/* Brushed Metal by @simurai */

/* globals */



html {
	font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	background-color: hsla(0,0%,85%,1);
	background-image:	-webkit-repeating-linear-gradient( 45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px),
						-webkit-repeating-linear-gradient(-45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px);
}

body {
	margin: 0;
}

button { border: none; display: block; }
/*a { text-decoration: none; display: block; }*/



/* Metal ------------------------- */

.metal {
	position: relative;
	margin: 40px auto;
	
	font: bold 6em/2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
	color: hsla(0,0%,20%,1);
	text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
	
	background-color: hsl(0,0%,90%);
	-webkit-box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, 	/* border */
						inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, 	/* soft SD */
						inset hsla(0,0%,0%, .25) 0 -1px 0px 7px,	/* bottom SD */
						inset hsla(0,0%,100%,.7) 0  2px 1px 7px, 	/* top HL */
						
							  hsla(0,0%, 0%,.15) 0 -5px 6px 4px, 	/* outer SD */
							  hsla(0,0%,100%,.5) 0  5px 6px 4px;	/* outer HL */	
	
	-webkit-transition: color .2s;
}



/* Radial ------------------------- */

.radial.metal {
	width: 160px;
	height: 160px;
	line-height: 160px;
	border-radius: 80px;
	background-image:	-webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
						-webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						
						-webkit-repeating-radial-gradient(	50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
						-webkit-repeating-radial-gradient(	50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
						-webkit-repeating-radial-gradient(	50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
						
						-webkit-radial-gradient(	50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);					
}


.metal.radial:before, .metal.radial:after {
	content: "";
	top: 0;
	left: 0;
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: inherit;
	
	/* fake conical gradients */
	background-image: 	-webkit-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}
.metal.radial:before { 	-webkit-transform: rotate( 65deg); }
.metal.radial:after {	-webkit-transform: rotate(-65deg); }




/* Linear ------------------------- */

.metal.linear {
	width: 100px;
	font-size: 4em;
	height: 80px;
	border-radius: .5em;
	background-image: 	-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),					
						-webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),					
						-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
						
						-webkit-linear-gradient(-90deg, hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);						
}


/* Oval ------------------------- */

.metal.linear.oval {
	margin-top: 100px;
	width: 70px;
	height: 60px;
	line-height: 60px !important;
	border-radius: 50%;
	font: normal bold 3em/50px sans-serif;
/*	font: italic bold 3em/50px Georgia, "Times New Roman", Times, serif;*/
}




/* active ------------------------- */

.metal:active {
	color: hsl(210, 100%, 40%);
	text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
	-webkit-box-shadow: 
					inset hsla(210,100%,30%,  1) 0  0px 0px 4px, 	/* border */
					inset hsla(210,100%,15%, .4) 0 -1px 5px 4px, 	/* soft SD */
					inset hsla(210,100%,20%,.25) 0 -1px 0px 7px,	/* bottom SD */
					inset hsla(210,100%,100%,.7) 0  2px 1px 7px, 	/* top HL */
							
						  hsla(210,100%,75%, .8) 0  0px 3px 2px, 	/* outer SD */			
						  hsla(210,50%,40%, .25) 0 -5px 6px 4px, 	/* outer SD */
						  hsla(210,80%,95%,   1) 0  5px 6px 4px;	/* outer HL */
}