/*
This is the<a href="#" class="button default inline">Default</a> action!
<a href="#" class="button blue">Blue</a>
*/

.button {
  margin: 0 15px 15px 0;
  font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  display: inline-block;
  background-color: #f5f5f5;
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
  color: #444;
  
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  
  cursor: default;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  height: 27px;
  line-height: 27px;
  min-width: 54px;
  padding: .3em;
  text-decoration: none;

  width: 240px;
}

.button.inline {
  margin: 0 .2em 0 .5em;
}

.button:hover {
  background-color: #F8F8F8;
  background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
  
  border: 1px solid #C6C6C6;
  color: #333;
  
  -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
  box-shadow: 0px 1px 1px rgba(0,0,0,.1);
  text-decoration: none;
}

/* blue */

.button.blue {
  background-color: #4D90FE;
  background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
  background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
  background-image: linear-gradient(top,#4d90fe,#4787ed);

  border: 1px solid #3079ED;
  color: white;
}

.button.blue:hover {
  border: 1px solid #2F5BB7;
  
  background-color: #357AE8;
  background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
  background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
  background-image: linear-gradient(top,#4d90fe,#357ae8);
  
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

/* sand */

.button.sand {
  background-color: #635A48;
  background-image: -webkit-linear-gradient(top,#FEF3DD,#635A48);
  background-image: -moz-linear-gradient(top,#FEF3DD,#635A48);
  background-image: -ms-linear-gradient(top,#FEF3DD,#635A48);
  background-image: -o-linear-gradient(top,#FEF3DD,#635A48);
  background-image: linear-gradient(top,#FEF3DD,#635A48);
  
  border: 1px solid #635A48;
  color: #2D221B;
  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}

.button.sand:hover {
  background-color: #C7B491;
  background-image: -webkit-linear-gradient(top,#FEF3DD,#C7B491);
  background-image: -moz-linear-gradient(top,#FEF3DD,#C7B491);
  background-image: -ms-linear-gradient(top,#FEF3DD,#C7B491);
  background-image: -o-linear-gradient(top,#FEF3DD,#C7B491);
  background-image: linear-gradient(top,#FEF3DD,#C7B491); 
}

/* green */

.button.green {
  background-color: #cc8;
  background-image: -webkit-linear-gradient(top,#cc8,#CCCC66);
  background-image: -moz-linear-gradient(top,#cc8,#CCCC66);
  background-image: -ms-linear-gradient(top,#cc8,#CCCC66);
  background-image: -o-linear-gradient(top,#cc8,#CCCC66);
  background-image: linear-gradient(top,#cc8,#CCCC66);
  
  border: 1px solid #29691D;
  color: #005400;
  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}

.button.green:hover {
  background-color: #368200;
  background-image: -webkit-linear-gradient(top,#cc8,#bb5);
  background-image: -moz-linear-gradient(top,#cc8,#bb5);
  background-image: -ms-linear-gradient(top,#cc8,#bb5);
  background-image: -o-linear-gradient(top,#cc8,#bb5);
  background-image: linear-gradient(top,#cc8,#bb5);
  
  border: 1px solid #2D6200;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}