/* 
	Sources: 
	
	http://designmodo.com/create-css3-buttons/
	http://hellohappy.org/css3-buttons/
	
	Modified and extended by Joffrey Fitz, 2012
*/

a button, a.button, a.button:hover, a.button:active {
	color:#fff;
    	text-decoration:none;
    	font-weight: normal;
}

.button {
	color: #fff;
	display: inline-block;
	position: relative;
	//margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	font: bold 12px/25px Arial, sans-serif;

	text-shadow: 1px 1px 1px rgba(255,255,255, .22);

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;

	border-top: 1px solid #4081af;
	border-right: 1px solid #2e69a3;
	border-bottom: 1px solid #20559a;
	border-left: 1px solid #2e69a3;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	color: #fff;
	font: normal 10px "lucida grande", sans-serif;
	line-height: 1;
	padding: 3px 5px;
	text-align: center;
	text-shadow: 0 -1px 1px #3275bc;
	width: 112px;
	-webkit-background-clip: padding-box;
}

.button:hover {
	color: #fff;
	background-color: #3e9ee5;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb));
	background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
	background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
	background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
	background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
	background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
	border-top: 1px solid #2a73a6;
	border-right: 1px solid #165899;
	border-bottom: 1px solid #07428f;
	border-left: 1px solid #165899;
	-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
	-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
	box-shadow: inset 0 1px 0 0 #62b1e9;
	cursor: pointer;
	text-shadow: 0 -1px 1px #1d62ab;
	-webkit-background-clip: padding-box;
}

.button:active {
    background: #3282d3;
	border: 1px solid #154c8c;
	border-bottom: 1px solid #0e408e;
	-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
	-moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
	box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
	text-shadow: 0 -1px 1px #2361a4;
	-webkit-background-clip: padding-box;
}



.blue {
	color: #fff;
	background: #70c9e3; /* Old browsers */
	background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
	background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */

	background-color: #52a8e8;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
	background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
	background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
	background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
	background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
	background-image: linear-gradient(top, #52a8e8, #377ad0);
}

.wide {
	width: 150px;
}