/*
* PURE CSS3 BUTTONS by Samuel Bran
* http://www.samuelbran.com/
* 12.04.2012
*
* GNU General Public License, version 3 (GPL-3.0)
* http://www.opensource.org/licenses/gpl-3.0.html
*
* HOW TO USE:
*
* <a href="#" class="button color shape">Button</a>
*
* - Or -
*
* <button class="color shape">Button</button>
*/

/* =Base: If you're using an anchor tag you MUST use this class.
----------------------------------------------------------------------------*/
.button, button, input[type = submit] {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #666;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255,1);
	border: 1px solid #dbdad9;
	text-decoration: none;
	background: #f4f4f4;
	padding: 5px 10px;
	margin: 3px;
	display: inline-block;
	outline: 0;
}
.button:hover, button:hover, input[type = submit]:hover {
	background: #fff;
}
/* =Shapes: Use only one per button
----------------------------------------------------------------------------*/
.rounded {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}
.pill {
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
}

/* =Flat: and simple
----------------------------------------------------------------------------*/
.flat {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
	border: none;
}

/* =Crisp: the cute ones
----------------------------------------------------------------------------*/
.crisp {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset;
}
.crisp:active {
	text-shadow: 0 1px 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.35) inset;
	cursor: pointer;
}

.crisp.blue {
	border-color: #157497;
	background-image: -moz-linear-gradient(-90deg, #35afdc, #2497c2);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#35afdc), to(#2497c2));
}
.crisp.blue:hover {
	border-color:#106281;
	background-image: -moz-linear-gradient(-90deg, #2497c2, #3fbcea);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#2497c2), to(#3fbcea));
}

.crisp.orange{
	border-color: #ca731f;
	background-image: -moz-linear-gradient(-90deg, #f59820, #f57e20);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f59820), to(#f57e20));
}
.crisp.orange:hover {
	border-color: #c45221;
	background-image: -moz-linear-gradient(-90deg, #f57e20, #f59820);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f57e20), to(#f59820));
}

.crisp.red {
	border-color: #a62417;
	background-image: -moz-linear-gradient(-90deg, #f44c3a, #f23a27);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f44c3a), to(#f23a27));
}
.crisp.red:hover {
	border-color: #8e1c10;
	background-image: -moz-linear-gradient(-90deg, #f23a27, #f44c3a);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f23a27), to(#f44c3a));
}

.crisp.green {
	border-color: #628917;
	background-image: -moz-linear-gradient(-90deg, #a0dc2c, #8ec523);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#a0dc2c), to(#8ec523));
}
.crisp.green:hover {
	border-color: #52740f;
	background-image: -moz-linear-gradient(-90deg, #8ec523, #a0dc2c);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#8ec523), to(#a0dc2c));
}

.crisp.white { 
	border-color: #c1c0c0;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
	background-image: -moz-linear-gradient(-90deg, #f5f5f5, #d9d9d9);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f5f5f5), to(#d9d9d9));
}
.crisp.white:hover {
	background-image: -moz-linear-gradient(-90deg, #d9d9d9, #f5f5f5);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#d9d9d9), to(#f5f5f5));
}
.crisp.white:active {
	text-shadow: 0 -1px 0 rgba(255,255,255,1);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.25) inset;
	cursor: pointer;
}

.crisp.black {
	border-color: #000;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
	background-image: -moz-linear-gradient(-90deg, #2a2a2a, #1d1d1d);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#2a2a2a), to(#1d1d1d));
}
.crisp.black:hover {
	background-image: -moz-linear-gradient(-90deg, #1d1d1d, #2a2a2a);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#1d1d1d), to(#2a2a2a));
}
.crisp.black:active {
	text-shadow: 0 1px 0 rgba(0,0,0,1);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.85) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.85) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.85) inset;
	cursor: pointer;
}

/* =Colors: 4 colors available (blue, orange, red, green) plus white and black. Use one per button
----------------------------------------------------------------------------*/
.blue {
	background-color: #2497c2;
} 
.blue:hover {
	background-color: #32a7d3;
} 
.blue:active { 
	background-color: #0f5e7b;
}

.orange {
	background-color: #f57e20;
}
.orange:hover {
	background-color: #f59320;
} 
.orange:active {
	background-color: #aa5e14;
}

.red {
	background-color: #f44b39;
}
.red:hover {
	background-color: #f23a27;
}
.red:active {
	background-color: #76170d;
}

.green {
	background-color: #8ec523;
}
.green:hover {
	background-color: #9dd92a;
}
.green:active {
	background-color: #47640f;
}

.white {
	background-color: #ece9e9;
	color: #333;
	text-shadow: 0 1px 0 rgba(255,255,255,1);
}
.white:hover {
	background-color: #f9f8f8;
}
.white:active {
	background-color: #d1d1d1;
}

.black {
	background-color: #1d1d1d;
	text-shadow: 0 -1px 0 rgba(0,0,0,1);
}
.black:hover {
	background-color: #2c2c2c;
}
.black:active {
	background-color: #141414;
}