/* Brushed Metal by @simurai */

/* globals */

html {
	background-image:	-moz-repeating-linear-gradient( 45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px),
						-moz-repeating-linear-gradient(-45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px);
	
	background-image:	-ms-repeating-linear-gradient( 45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px),
						-ms-repeating-linear-gradient(-45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px);
	
	background-image:	-o-repeating-linear-gradient( 45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px),
						-o-repeating-linear-gradient(-45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px);
	
	background-image:	repeating-linear-gradient( 45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px),
						repeating-linear-gradient(-45deg, hsla(0,0%,0%,0) 0, hsla(0,0%,0%,.015) 5px);
}



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

.metal {
	-moz-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 */	
	
	-ms-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 */	
	
	-o-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 */	
	
	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 */	
	
	-moz-transition: color .2s;
	-ms-transition: color .2s;
	-o-transition: color .2s;
	transition: color .2s;
}


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

.radial.metal {
	background-image:	-moz-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-moz-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
						-moz-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-moz-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-moz-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%),
						-moz-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%),
						-moz-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%),
						-moz-radial-gradient(	50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);					
	
	background-image:	-ms-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-ms-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
						-ms-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-ms-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-ms-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%),
						-ms-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%),
						-ms-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%),
						-ms-radial-gradient(	50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);					
	
	background-image:	-o-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-o-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
						-o-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-o-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						-o-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%),
						-o-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%),
						-o-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%),
						-o-radial-gradient(	50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);					
	
	background-image:	radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
						radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
						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%),
						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%),
						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%),
						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 {	
	background-image: 	-moz-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-moz-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-moz-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-moz-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
	
	background-image: 	-ms-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-ms-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-ms-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-ms-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
	
	background-image: 	-o-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-o-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-o-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						-o-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
	
	background-image: 	radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
						radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}
.metal.radial:before { 	-moz-transform: rotate( 65deg); }
.metal.radial:before { 	-ms-transform: rotate( 65deg); }
.metal.radial:before { 	-o-transform: rotate( 65deg); }
.metal.radial:before { 	transform: rotate( 65deg); }

.metal.radial:after {	-moz-transform: rotate(-65deg); }
.metal.radial:after {	-ms-transform: rotate(-65deg); }
.metal.radial:after {	-o-transform: rotate(-65deg); }
.metal.radial:after {	transform: rotate(-65deg); }



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

.metal.linear {
	background-image: 	-moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),					
						-moz-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),					
						-moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
						-moz-linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);						
	
	background-image: 	-ms-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),					
						-ms-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),					
						-ms-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
						-ms-linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);						
	
	background-image: 	-o-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),					
						-o-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),					
						-o-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
						-o-linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);						
	
	background-image: 	repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),					
						repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),					
						repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
						linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);						
}



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

.metal:active {
	-moz-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 */
	
	-ms-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 */
	
	-o-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 */
	
	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 */
}