/*  
    awesome buttons are based on a blog post by ZERB
    Read there blog post for more information:
    "Super awesome Buttons with CSS3 and RGBA":http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba 
    
    this buttons are even more awesome, as the need only one color for all three states,
    and have an super awesome onclick state
*/

/* set an awesome color for the buttons */
button.awesome, 
input.awesome, 
a.button.awesome {
  background-color: #111;
}

button.awesome.green, 
input.awesome.green, 
a.button.awesome.green {
	background-color: #217A00;
}

button.awesome.red, 
input.awesome.red, 
a.button.awesome.red {
	background-color: red;
}

/* Touch the rest at your onw risk. */
button.awesome,
input.awesome,
a.button.awesome { 

  font: inherit;
  background-repeat: repeat-x; 
  color: #fff;
  text-decoration: none; 
  position: relative; 
  cursor: pointer; 
  border: 0; 
  font-style: normal; 
  font-weight: bold; 
  line-height: 1; 
  
  padding: 5px 10px 6px;
  font-size: 13px;
  
  /* IE only stuff */
  border-bottom: 1px solid transparent\9;
  
  
  /* not all browser support these, but who cares? */
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25); 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); 
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  
  /* one image for all states 
     see http://www.alistapart.com/articles/sprites */
  background-image: url("images/awesome-overlay-sprite.png");
  background-position: 0 0;
  
  /* cross browser inline block hack 
     see http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *display: inline !important;
  position: relative;
  
  /* help IE to calm down a bit */
  zoom: 1;
  
  /*disable text selection (Firefox only)*/
  -moz-user-select: none;
}
/* hide selection background color */
.awesome::selection {
	background: transparent;
}

button.awesome:hover,
input.awesome:hover,
a.button.awesome:hover {
  background-position: 0 -50px; 
  color: #fff;
}
button.awesome:active,
input.awesome:active,
a.button.awesome:active	{ 
  background-position: 0 100%; 
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7); 
  /* unfortunately, Safari seems not to support inset yet */
  -webkit-box-shadow: none;
  
  /* IE only stuff */
  border-bottom: 0\9;
  border-top: 1px solid #666\9;
}

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