/*--------------------------------------------------------------------------------------------
	@GarySwanepoel
	http://www.itbusiness.com.au
	
	.button|[class*=buttons] a
	{.xxsmall|.xsmall|.small|.normal|.medium|.large|.xlarge|.xxlarge|.subtitle|.title}.button
	.rounded.button|pill.button|.cornered.button(?)|.circle.button(?)
	.pretty.button|.pretty[class*=buttons]
	
	inline-buttons
	block-inputs
	inline-inputs
	
	v1.0 Updated: 20130404
	
	* Add Pretty by default ??
	* Remove options ie. {.buttons|.button} -rounded -gradients -pretty {?}
	* What about blocks?
	
	BUG:
	* spacing between buttons in Nav Block group > Border Issue
--------------------------------------------------------------------------------------------*/

    
    
    
    /* Normalize */
    button::-moz-focus-inner,
    a.button::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    a.block::-moz-focus-inner {
	border: 0;
	padding: 0;
    }
    button,
    .button,
    input[type="reset"],
    input[type="submit"],
    input[type="button"],
    [class*=buttons] a,
    [class*=blocks] a{
	/*Normalize*/
	-webkit-appearance: none;
	 -webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;
    }
    
    /* BUTTON DEFAULTS */
    button,
    .button,
    input[type="reset"],
    input[type="submit"],
    input[type="button"],
    [class*=buttons] a,
    .block,
    [class*=blocks] a,
    .add-on {
	
	display: inline-block; *display: inline; *zoom:1; /*TODO: TEST*/
	padding: .5em 1em;
	margin-top: 0.4375em; margin-bottom: 0.4375em;
	/*font-size: 1em;*/ line-height: 1em; text-align: center; vertical-align: middle;
	cursor: pointer;
	/*border: 1px solid rgba(0,0,0,.6);*/
	/**margin-left: .3em;*/
	
	text-shadow: 0 1px 0px rgba(255, 255, 255, 0.6);
	
	-webkit-box-shadow: inset 0 1px 3px rgba(255, 255, 255, .3), 0 1px 3px rgba(0, 0, 0, .2);
	   -moz-box-shadow: inset 0 1px 3px rgba(255, 255, 255, .3), 0 1px 3px rgba(0, 0, 0, .2);
		box-shadow: inset 0 1px 3px rgba(255, 255, 255, .3), 0 1px 3px rgba(0, 0, 0, .2);
		
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.1));
	background-image: -webkit-gradient(linear, 0 0, 0 100%, rgba(255,255,255,.2), to(rgba(0,0,0,.1)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.1));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.1));
	background-image: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(0,0,0,.1));
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); /*TODO: Test*/
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /*TODO: Test*/
	
	*border: 0; /*TODO: TEST */
	border-width:1px;
	border-style: solid;
	/*border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .3);
	border-color: red;*/
    }
    
    button,
    .button,
    input[type="reset"],
    input[type="submit"],
    input[type="button"],
    [class*=buttons] a,
    .add-on {
        -webkit-border-radius: .25em;-moz-border-radius: .25em;border-radius: .25em;
    }
    [class*=blocks] a {display: block}
    
    /* Buttons - Hover */
    button:hover,
    .button:hover,
    input[type="reset"]:hover,
    input[type="submit"]:hover,
    input[type="button"]:hover,
    [class*=buttons] a:hover,
    .block:hover,
    [class*=blocks] a:hover{
	/*filter: alpha(opacity=90);
	opacity: .9;*/
	background-image: -moz-linear-gradient(top, rgba(0,0,0,.02), rgba(0,0,0,.2));
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,.02)), to(rgba(0,0,0,.2)));
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.02), rgba(0,0,0,.2));
	background-image: -o-linear-gradient(top, rgba(0,0,0,.02), rgba(0,0,0,.2));
	background-image: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.2));
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    }
    
    /* Buttons - Inline */
    button.inline,
    .button.inline,
    input[type="reset"].inline,
    input[type="submit"].inline,
    input[type="button"].inline,
    [class*=buttons].inline a,
    .block.inline,
    [class*=blocks].inline a { margin:-2px 0 0; font-size: .9em; padding:.3em .5em; vertical-align: top; display: inline-block; *display: inline; *zoom:1}
    
    /* Buttons - Active */
    button:active,
    button:focus,
    .button:active,
    .button:focus,
    .active .button,
    button.active,
    [class*=buttons] a:active,
    .block:active,
    [class*=blocks] a:active {}
	
    /* :active */
    button:active,
    .button:active,
    input[type="reset"]:active,
    input[type="submit"]:active,
    input[type="button"]:active,
    [class*=buttons] a:active,
    .block:active,
    [class*=blocks] a:active,
    /* .active */
    button.active,
    .button.active,
    input[type="reset"].active,
    input[type="submit"].active,
    input[type="button"].active,
    .block.active,
    [class*=buttons] a.active,
    [class*=buttons] .active a,
    [class*=buttons] .active button,
    [class*=buttons] .active .button,
    [class*=buttons] .active input[type="reset"],
    [class*=buttons] .active input[type="submit"],
    [class*=buttons] .active input[type="button"],
    [class*=blocks] a.active,
    [class*=blocks] .active a,
    [class*=blocks] .active button,
    [class*=blocks] .active .button,
    [class*=blocks] .active input[type="reset"],
    [class*=blocks] .active input[type="submit"],
    [class*=blocks] .active input[type="button"],
    /*:focus */
    button:focus,
    .button:focus,
    input[type="reset"]:focus,
    input[type="submit"]:focus,
    input[type="button"]:focus,
    [class*=buttons] a:focus,
    .block:focus,    
    [class*=blocks] a:focus{
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .2);
	   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .2);
		box-shadow: inset 0 1px 1px rgba(0,0,0, .1), 0 1px 3px rgba(0, 0, 0, .2);
	
	outline: none;
	
	background-image: -moz-linear-gradient(top, rgba(0,0,0,.02), rgba(0,0,0,.2));
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,.02)), to(rgba(0,0,0,.2)));
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.02), rgba(0,0,0,.2));
	background-image: -o-linear-gradient(top, rgba(0,0,0,.02), rgba(0,0,0,.2));
	background-image: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.2));
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		
    }
    
    /* Active Only */ /*TODO: move*/
    .active-buttons li:not(.active) a { /*NOTE: !IE7*/
	border:0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
    }
    
    /* BUTTON SIZES */
    
    /* Skinny Buttons */ /*TODO: fix margins */
    button.skinny,
    .button.skinny,
    input[type="reset"].skinny,
    input[type="submit"].skinny,
    input[type="button"].skinny,
    [class*=buttons].skinny a { padding-top: .25em; padding-bottom: .25em;}
    
    /* Skinny Buttons */ /*TODO: fix margins */
    button.fat,
    .button.fat,
    input[type="reset"].fat,
    input[type="submit"].fat,
    input[type="button"].fat,
    [class*=buttons].fat a { padding-top: 1em; padding-bottom: 1em;}
    
    /* Buttons - Remove padding */
    /* See Utitlies */
    
    /* BUTTON SHAPES */
    /* {.square|.rounded|.pill|.circle|-radius}
    /* See Utilities */
    
    
    /* Gradients */
    .gradient-down {}
    .gradient-up {}
    
    button.-gradient,
    .button.-gradient,
    input[type="reset"].-gradient,
    input[type="submit"].-gradient,
    input[type="button"].-gradient,
    [class*=buttons].-gradient a {
	background-image: none;
    }
    
    
    /* Pretty Buttons */
    button.pretty,
    .button.pretty,
    input[type="reset"].pretty,
    input[type="submit"].pretty,
    input[type="button"].pretty,
    [class*=buttons].pretty a {
	text-shadow: 0 1px 0px rgba(255, 255, 255, 0.6);
	
	-webkit-box-shadow: inset 0 1px 3px rgba(255, 255, 255, .4), 0 1px 3px rgba(0, 0, 0, .2);
	   -moz-box-shadow: inset 0 1px 3px rgba(255, 255, 255, .4), 0 1px 3px rgba(0, 0, 0, .2);
		box-shadow: inset 0 1px 3px rgba(255, 255, 255, .4), 0 1px 3px rgba(0, 0, 0, .2);
		
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.1));
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(rgba(0,0,0,.1)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.1));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.1));
	background-image: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(0,0,0,.1));
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	
	*border: 0; /*TODO: Check */
	border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .3);
    }
    
    
    /* Add-Ons */
    /*TODO: move to input */
    .add-on {

	padding-left:.5em; padding-right:.25em;
	border-color: rgba(0, 0, 0, .2) rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) rgba(0,0,0,.2);
	-webkit-box-shadow: none;-moz-box-shadow: none; box-shadow: none;
	-webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0;}
	
    .add-on + * {
	margin-left: 0;
	-webkit-border-top-left-radius: 0 !important; -moz-border-radius-topleft: 0 !important; border-top-left-radius: 0 !important;
	-webkit-border-bottom-left-radius: 0 !important; -moz-border-radius-bottomleft: 0 !important; border-bottom-left-radius: 0 !important;}
	
    /* Add after? */
    
    /*button.pretty:not(.white),
    .button.pretty:not(.white),
    [class*=buttons].pretty:not(.white) a { text-shadow: 0 1px 1px rgba(0,0,0,0.2); }*/
    
    /* TODO: SORT */
    
    button,
    a.button,
    input[type="reset"],
    input[type="submit"],
    input[type="button"] {
      /*-webkit-appearance: none;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
      
      -webkit-background-clip: padding;
      -moz-background-clip: padding;
      background-clip: padding-box;
      background: #dddddd url('../images/button-1298351022.png') repeat-x;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
      background-image: -webkit-linear-gradient(#ffffff, #dddddd);
      background-image: -moz-linear-gradient(#ffffff, #dddddd);
      background-image: -o-linear-gradient(#ffffff, #dddddd);
      background-image: linear-gradient(#ffffff, #dddddd);
      border: 1px solid;
      border-color: #dddddd #bbbbbb #999999;
      cursor: pointer;
      color: #333333;
      display: inline-block;
      font: bold 12px/1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
      outline: 0;
      overflow: visible;
      margin: 0;
      padding: 3px 10px;
      text-shadow: white 0 1px 1px;
      text-decoration: none;
      vertical-align: top;
      width: auto;
      *padding-top: 2px;
      *padding-bottom: 0;*/
    }

    
    
    a.button {
      *padding-bottom: 3px;
    }
    
    button {
      *padding-top: 1px;
      *padding-bottom: 1px;
    }
    
    
    /* Disabled Buttons */
    
/* Localized */