/*
 * This code is unlicensed and stuff. Go make cool things. Maybe link to http://somadesign.ca if you want. And tell me what you've done.
 *
 * Inspired by:
 * 	http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/
 * 	http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php
 *
 */
a.button, button {
	text-decoration: none;
	border-color:rgba(0, 0, 0, 0.56);
	cursor: pointer;
	outline: none;
	color:#111;
	font-family:"Lucida Grande","Lucida Sans","Lucida Sans Unicode","Segoe UI",Verdana,sans-serif;
	display:inline-block;
	vertical-align:top;
	position:relative;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	background-color:#c90;
	background: #c90 -moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,0));
	background: #c90 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.75)), to(rgba(255,255,255,0)));
	text-shadow:1px 1px 0 rgba(255,255,255,.67);
	line-height:24px;
	height:24px;
	margin:0 0 24px 12px;
	width:95px;
	padding:0;
	/** Make the text unselectable **/
	-moz-user-select: none;
	-webkit-user-select: none;
}
a.button, a.button:after, a.button:before, button, button:after, button:before {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border-width:1px;
	border-style:solid;
}
a.button:after, a.button:before, button:after, button:before {
	display:block;
	position:absolute;
	content:' ';
}
a.button:before, button:before {
	border-color: #FFF rgba(255,255,255,.25) rgba(255,255,255,.25);
	left:0;
	top:0;
	width:73px;
	height:22px;
}
a.button:after, button:after {
	border-color: transparent transparent rgba(255, 255, 255, 0.63);
	left:-1px;
	bottom:-2px;
	height:100%;
	width:100%;
}
a.button:hover, a.button:focus, button:hover, button:focus {
	background-image:-moz-linear-gradient(top, rgba(255,255,255,.9), rgba(255,255,255,0.2));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.9)), to(rgba(255,255,255,0.2)));
}
a.button:active, button:active {
	background-image:-moz-linear-gradient(top, rgba(75,75,75,.4), rgba(255,255,255,.4));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(75,75,75,.4)), to(rgba(255,255,255,.4)));
	line-height:26px;
}
a.button:active:before, button:active:before {
	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}

a.button.bg {
	-webkit-transition: all .185s linear;
	-moz-transition: all .185s linear;
}
a.button.bg, a.button.bg:hover, a.button.bg:focus {
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,0));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.75)), to(rgba(255,255,255,0)));
}
a.button.bg:hover, a.button.bg:focus {
	background-color:#a8c0cb;
}
a.button.bg:active {
	background-image:-moz-linear-gradient(top, rgba(75,75,75,.4), rgba(255,255,255,.4));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(75,75,75,.4)), to(rgba(255,255,255,.4)));
}

/* Lengths */
a.button.short {
	width:50px;
}
a.button.short:before {
	width:48px;
}
a.button.long {
	width:125px;
}
a.button.long:before {
	width:123px;
}
a.button.super, button.super {
	width:100px;
}
a.button.super:before, button.super:before {
	width:98px;
}
a.button.crazy {
	width:205px;
}
a.button.crazy:before {
	width:203px;
}

/* Colors/Styles */
a.button.blue {
	background-color:#9eb4bf;
}
a.button.darkblue {
	background-color:#046;
	color:#fff;
	text-shadow:-1px -1px 0 rgba(0,0,0,.3);
}
a.button.red {
	background-color:#900;
	color:#fff;
	text-shadow:-1px -1px 0 rgba(0,0,0,.3);
}
a.button.red:before {
	border-top-color:rgba(255,255,255,.5);
}
a.button.green {
	background-color:#86bf7c;
}
a.button.pill, a.button.pill:before, a.button.pill:after {
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}
a.button.black {
	background-color:#000;
	color:#fff;
	text-shadow:-1px -1px 0 rgba(0,0,0,.3);
}
a.button.black:before {
	border-top-color:rgba(255,255,255,.67);
}
a.button.sharp {
	background-image:-moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,.33) 50%, transparent 50%, transparent 100%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
		from(rgba(255,255,255,.75)),
		color-stop(0.5, rgba(255,255,255,.33) ),
		color-stop(0.5, transparent ),
		to(transparent)
	);
	background-repeat:repeat-x;
}
a.button.sharp:hover, a.button.sharp:focus {
	background-image:-moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,.4) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 100%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
		from(rgba(255,255,255,.75)),
		color-stop(0.5, rgba(255,255,255,.67) ),
		color-stop(0.5, rgba(255,255,255,.33) ),
		to( rgba(255,255,255,.15) )
	);
}
a.button.sharp:active {
	background-image:-moz-linear-gradient(top, rgba(75,75,75,.4), rgba(255,255,255,.4));
	background-image:-moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0) 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.33) 100%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
		from(rgba(255,255,255,.75)),
		color-stop(0.5, rgba(255,255,255,.67) ),
		color-stop(0.5, rgba(255,255,255,.33) ),
		to( rgba(255,255,255,.15) )
	);
}
button.inset {
	width:auto;
	padding:0 9px;
	-moz-box-shadow:1px 1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow:1px 1px 1px pink inset;
}
button.inset:before, button.inset:after {
	display:none;
}
/*
 another button
*/
.abutton {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
 .abutton:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
 .abutton:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }