/*  
    form-button buttons are based on a blog post by ZERB
    Read there blog post for more information:
    "Super form-button Buttons with CSS3 and RGBA":http://www.zurb.com/article/266/super-form-button-buttons-with-css3-and-rgba 
    
    I merge the form-button cross browser inline block hack for more stability
    http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
    
    the only difference is an additional graphic for the :hover status,
    so you don't need to set different colors for different states.
*/

/* set an button.form-button, input.form-button, a.button.form-buttonbackground color for the buttons */
button.form-button, button.form-button-alt, 
input.form-button, input.form-button-alt, 
a.button.form-button, a.button.form-button-alt {
  background-color: #222;
  font: inherit;
  background-image: url(../images/button-overlay-sprite.png);
  
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline !important;
  position: relative;
}
.form-button::selection, .form-button-alt::selection {
	background: transparent;
}
 
/* Touch the rest at your onw risk. */
button.form-button,             input.form-button,              a.button.form-button                { background-position: 0 0; background-repeat: repeat-x; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; border: 0; font-style: normal; font-weight: bold; line-height: 1; -moz-user-select: none;}
button.form-button:hover,       input.form-button:hover,        a.button.form-button:hover	        { background-position: 0 -50px; color: #fff; }
button.form-button:active,      input.form-button:active,       a.button.form-button:active	        { background-position: 0 100%; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.7); -webkit-box-shadow: none;  }
button.form-button,             input.form-button,              a.button.form-button                { padding: 4px 9px 5px; font-size: 12px; }
button.form-button:active,      input.form-button:active,       a.button.form-button:active	        { padding: 5px 9px 4px; }

button.form-button-alt,         input.form-button-alt,          a.button.form-button-alt            { background-position: 0 0; background-repeat: repeat-x; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; border: 0; font-style: normal; font-weight: bold; line-height: 1; -moz-user-select: none;}
button.form-button-alt:hover,   input.form-button-alt:hover,    a.button.form-button-alt:hover	    { background-position: 0 -50px; color: #fff; }
button.form-button-alt:active,  input.form-button-alt:active,   a.button.form-button-alt:active	    { background-position: 0 100%; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.7); -webkit-box-shadow: none;  }
button.form-button-alt,         input.form-button-alt,          a.button.form-button-alt            { padding: 4px 9px 5px; font-size: 12px; }
button.form-button-alt:active,  input.form-button-alt:active,   a.button.form-button-alt:active	    { padding: 5px 9px 4px; }


button.form-button.small,         input.form-button.small,          a.button.form-button.small 	        { padding: 4px 7px 5px; font-size: 10px; }
button.form-button.small:active,  input.form-button.small:active,   a.button.form-button.small:active	{ padding: 5px 7px 4px; }
button.form-button.medium,        input.form-button.medium,         a.button.form-button.medium         { padding: 5px 10px 6px; font-size: 13px; }
button.form-button.medium:active, input.form-button.medium:active,  a.button.form-button.medium:active	{ padding: 6px 10px 5px; }
button.form-button.large,         input.form-button.large,          a.button.form-button.large 	        { padding: 8px 14px 9px; font-size: 14px; }
button.form-button.large:active,  input.form-button.large:active,   a.button.form-button.large:active	{ padding: 9px 14px 8px; }