/* 代码整理：时代Java NowJava.com */
html {
	font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
	background-color: hsl(200,5%,15%);
	background-size: 5px 5px;
	background-image:   -webkit-linear-gradient( 45deg, hsla(0,0%,0%,0) 0px, 
	                                                    hsla(0,0%,0%,.10) 50%, 
	                                                    hsla(0,0%,0%,0) 100% );
    }

body {
    margin: 0;
    }


/* list ------------------------------------------------------ */

ul {
    list-style: none;
    padding: 50px 0;
	margin: 0;
	font-size: 2em;
	text-align: center;
	background-image:   -webkit-linear-gradient( 0deg, 	hsla(0,0%,100%,0) 0px, 
														hsla(0,0%,100%,.09) 50%,
														hsla(0,0%,100%,0) 100% );
	
    }

ul li {
	padding: 50px 0;
    }


/* Aside ------------------------------------------------------ */

aside {
    position: fixed;
    top: 20px;
    left: 20px;    
    }

aside button {
    margin: 0;
    padding: 10px ;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    color: hsl(200,100%,60%);
    background: hsla(0,0%,0%,.12);
    cursor: pointer;
    }

aside button:hover {
    background: hsla(0,0%,0%,.2);
    }

aside button:active {
    -webkit-transform: translateY(1px);
    }


/* -------------- meter -------------- */

meter:nth-child(1) { -webkit-transform: translate(-50px,  50px) rotate(-90deg); }
meter:nth-child(2) { -webkit-transform: translate( -25px,  25px) rotate(-90deg); }
meter:nth-child(3) { -webkit-transform: translate(   0px,   0px) rotate(-90deg); }
meter:nth-child(4) { -webkit-transform: translate(  25px, -25px) rotate(-90deg); }
meter:nth-child(5) { -webkit-transform: translate( 50px, -50px) rotate(-90deg); }


meter {
	-webkit-appearance: none;
	position: relative;
    display: block;
    margin: 8px auto;
	width: 100px;
	height: 17px;
	border-radius: 5px; 	
	padding: 4px 5px 4px 5px;
    box-sizing: border-box;   
    background: #000;
	-webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,.08);
	-webkit-transform-origin: center 8px;																		
    }


meter::-webkit-meter-bar {
    background-color: hsl(200,10%,14%);
    background-size: 2px 5px;
    background-image: 	-webkit-linear-gradient( 0deg,  hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),
    		            -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );	
    }


meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
    background-size: inherit;
    background-image: 	inherit;
    -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);
    -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);
    }


/* With these pseudo selectors you could change the colors when changing the value. */
meter::-webkit-meter-optimum-value           { background-color: hsl(200,100%,50%); }
meter::-webkit-meter-suboptimum-value        { background-color: hsl(200,100%,50%); }
meter::-webkit-meter-even-less-good-value    { background-color: hsl(200,100%,50%); }


meter:hover::-webkit-meter-optimum-value,
meter:hover::-webkit-meter-suboptimum-value,
meter:hover::-webkit-meter-even-less-good-value {
	/*In the real world, just change the element's value, this is just a hack for this demo.*/
	width: 100% !important;
	-webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);
    }


/* -------------- Range Slider -------------- */

input[type="range"] {
	-webkit-appearance:	none;	/* Remove Safari default */
	outline: none;
	width: 250px;
	height: 5px;
	border-radius: 1px;
	position: relative;

	
	background-color: #000;
	
	-webkit-background-clip: padding-box;
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	cursor: ew-resize;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:	none;	/* Remove Safari default */
	position: relative;
	z-index: 		1;

	width: 26px;
	height: 40px;
	border-radius: 3px / 6px ;
	
	background-image: -webkit-gradient( linear, left top, right top,
		color-stop( 0, 		hsl(0,0%,15%) ), 
		color-stop( .16, 	hsl(0,0%,22%) ), 
		color-stop( .18, 	hsl(0,0%,30%) ), 
		color-stop( .2, 	hsl(0,0%,26%) ), 
		
		color-stop( .42,	hsl(200,60%,30%) ), 
		color-stop( .44,	hsl(200,0%,15%) ), 
		color-stop( .46,	hsl(200,100%,50%) ), 
		color-stop( .54,	hsl(200,100%,50%) ), 
		color-stop( .56,	hsl(200,0%,15%) ), 
		color-stop( .58,	hsl(200,60%,30%) ), 
		
		color-stop( .8,		hsl(0,0%,26%) ), 
		color-stop( .82,	hsl(0,0%,30%) ), 
		color-stop( .84,	hsl(0,0%,22%) ), 
		color-stop( 1, 		hsl(0,0%,15%) ) 
	);
	
	-webkit-box-shadow: 
		
		inset hsla(0,0%,100%,.15) 0 1px 0px,
		
		hsl(0,0%,17%) 0 2px 0px,
		hsl(0,0%,15%) 0 4px 0px,
		hsl(0,0%,13%) 0 6px 0px,
		
		rgba(0,0,0,.5) 0 8px 5px;
	
	-webkit-transform: translateY(-3px);
	-webkit-box-reflect: 	below 0px -webkit-gradient(linear, left top, left bottom, 
							from(transparent), color-stop(0.6, transparent), to( rgba(255,255,255,0.15) ));
}

input[type="range"]:hover {
	
	background-image: -webkit-gradient( linear, left top, right top,
		color-stop( 0, 		hsl(200,80%,45%) ), 
		color-stop( .08, 	hsl(200,80%,15%) ), 
		color-stop( .5, 	hsl(200,80%,0%) ), 
		color-stop( .92,	hsl(200,80%,15%) ), 
		color-stop( 1, 		hsl(200,80%,45%) ) 
	);
	
	-webkit-box-shadow: inset #000 1px 1px 1px, inset #000 -1px -1px 1px;

}



/* ----------- Checkbox */


input[type="checkbox"] {
	-webkit-appearance:none;	/* Remove Safari default */
	outline: none;
	width: 120px;
	height: 40px;
	
	position: relative;
	border-radius: 6px;
	background-color: #000;
	-webkit-background-clip: padding-box;
	
	border: 0;
	border-bottom: 1px solid transparent;
	-webkit-perspective: 200;
}

input[type="checkbox"]:before, input[type="checkbox"]:after {
	font: bold 22px/32px sans-serif;
	
	text-align: 	center;
	
	position: 	absolute;
	z-index: 	1;
    
    width: 			56px;
	height: 		30px;
    top: 			4px;
    
    border: 0;
	border-top: 1px solid rgba(255,255,255,0.15);
}

input[type="checkbox"]:before {
	content: 	attr(data-icon1);
	left: 		4px;
	border-radius: 3px 0 0 3px;

}

input[type="checkbox"]:after {
	content: 	attr(data-icon2);
	right: 		4px;
	border-radius: 0 3px 3px 0;
}


/* ----------- checked/unchecked */

/* unchecked */
input[type="checkbox"] {
	-webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, 
							from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
							color-stop(.1,rgba(255,255,255,.05)),
							color-stop(.3,rgba(5,137,200,0.4)),
							color-stop(.45,rgba(255,255,255,.05)),
							color-stop(.9,rgba(255,255,255,.1)) 
							)100% 100%;
	
	background-image: -webkit-gradient(
		linear, right top, left top,
		color-stop( 0, 	hsl(0,0%,0%) ),
		color-stop( 0.14, 	hsl(0,0%,50%) ),
		color-stop( 0.15, 	hsl(0,0%,0%) )
	);						
	-webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
}
input[type="checkbox"]:after {
	background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
		from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 
	);
	border-right: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
							from(rgba(255,255,255,0)), 
							color-stop(.2,rgba(255,255,255,0)),
							color-stop(.4,rgba(255,255,255,.5)),
							to(rgba(255,255,255,.05))
							)10% 100%;
	
	-webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px;
	-webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px);
}


/* checked */
input[type="checkbox"]:checked {
	-webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
							from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
							color-stop(.1,rgba(255,255,255,.05)),
							color-stop(.3,rgba(5,137,200,0.4)),
							color-stop(.45,rgba(255,255,255,.05)),
							color-stop(.9,rgba(255,255,255,.1)) 
							)100% 100%;
	
	background-image: -webkit-gradient(
		linear, left top, right top,
		color-stop( 0, 	hsl(0,0%,0%) ),
		color-stop( 0.14, 	hsl(0,0%,50%) ),
		color-stop( 0.15, 	hsl(0,0%,0%) )
	);						
	-webkit-box-shadow: inset #000 7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
}
input[type="checkbox"]:checked:before {
	background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
		from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 
	);
	border-left: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
							from(rgba(255,255,255,0)), 
							color-stop(.2,rgba(255,255,255,0)),
							color-stop(.4,rgba(255,255,255,.5)),
							to(rgba(255,255,255,.05))
							)10% 100%;

	-webkit-box-shadow: rgba(0,0,0,.6) -8px 3px 10px;
	-webkit-transform: rotateY(30deg) scaleX(.9) scaleY(1.1) translateX(8px);
}


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

/* Active */
input[type="checkbox"]:before, input[type="checkbox"]:checked:after {
	color: hsl(200,100%,50%);
	text-shadow: 	rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;
	-webkit-transform: none;
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
	);
	-webkit-border-image: none;
	-webkit-box-shadow: none;
	
	z-index: 	2;					
}

/* Inactive */
input[type="checkbox"]:after, input[type="checkbox"]:checked:before {
	color: #000;
	text-shadow: rgba(255,255,255,.1) 0 -1px 0;
	-webkit-box-reflect: none;
	z-index: 	1;
}




/* ----------- hover */

input[type="checkbox"]:hover {
	cursor: pointer;
}

input[type="checkbox"]:hover:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
	);

}
input[type="checkbox"]:hover:after {
	background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
		from( hsl(0,0%,16%) ),to( hsl(0,0%,11%) ) 
	);
}

input[type="checkbox"]:checked:hover:before {
	background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
		from( hsl(0,0%,16%) ),to( hsl(0,0%,12%) ) 
	);

}
input[type="checkbox"]:checked:hover:after {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
	);
}

/* 
 * by时代Java（NowJava.com）
 */

@import url(http://fonts.googleapis.com/css?family=VT323);


/* -------------- number -------------- */

input[type="number"] {
	-webkit-appearance:	none;
	outline: none;
	position: relative;
	z-index: 1;
	
	width: 120px;
	height: 60px;
    border-radius: 40px / 60px;    
	
	font-family: 'VT323', cursive;
	font-size: 36px;
	line-height: 40px;
	text-align: center;
	-webkit-font-smoothing: none;
	color: hsl(200,100%,50%);
	text-shadow: 0 -1px 0px hsla(200,100%,70%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(200,100%,50%);
	
	border: 0;
	
	background-color: hsl(200,10%,12%);
	background-size: 4px 4px;
	background-image: 	-webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ),
						-webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );	
		
	-webkit-box-shadow: inset 0 0 0 4px hsla(0,0%,0%,1),
						inset 0 0 20px 5px hsla(0,0%,0%,.5),
						0 0px 0px 1px hsla(0,0%,0%,.4),
						0 1px 0 hsla(0,0%,100%,.25);																				
}


/* Outer spin only works in Safari, so lets hide it */
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }


/* Spin button */
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    width: 32px;
    border-radius: 40px / 60px;    
    border: 4px solid #000;
    cursor: ns-resize;
    
    -webkit-box-shadow: inset 0px 0px 3px 1px hsla(0,0%,0%,.6),
    					inset 0px 6px 1px -2px hsla(0,0%,100%,.30),
    					inset 0px -7px 1px -1px hsla(0,0%,0%,.5);
    
    background-color: hsl(0,0%,20%);
    background-image: 
    				
    				-webkit-radial-gradient( 50% 5%, contain, 	hsla(0,0%,100%,.2) 0%, hsla(0,0%,0%,0) 70% ),
    				-webkit-radial-gradient( 50% 86%, contain, 	hsla(0,0%,100%,.05) 0%, hsla(0,0%,0%,0) 80% ),
    				-webkit-linear-gradient( -90deg, 	hsl(0,0%,15%) 0%, 
    													hsl(0,0%,18%) 48%,
    													hsl(0,0%,10%) 48%,
    													hsl(0,0%,27%) 52%, 
    													hsl(0,0%,20%) 52%, 
    													hsl(0,0%,34%) 100% );
        													
    -webkit-transition: border-color .2s ease-in-out;
}


/* :active */

input[type="number"]:active::-webkit-inner-spin-button {
	border-color: hsla(200,100%,50%,1);
	-webkit-box-shadow: inset 0px 0px 3px 1px hsla(200,100%,20%,.6),
						inset 0px 6px 1px -2px hsla(200,100%,70%,.4),
						inset 0px -7px 1px -1px hsla(200,100%,10%,.5),
						0px 0px 4px 3px hsla(200,100%,50%,.3);
    
    -webkit-transition: none;													
}

/* ----------- radio */

input[type="radio"] {
	-webkit-appearance:none;	/* Remove Safari default */
	outline: none;
	width: 68px;
	height: 80px;
	
	position: relative;
	display: inline-block;
	margin: 3px;
	border-radius: 6px;
	
	background-color: #000;
	
	-webkit-background-clip: padding-box;
	
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	
	-webkit-perspective: 200;
}



input[type="radio"]:before {
	content: 		attr(data-icon);
	
	font: 			22px/22px sans-serif;
	text-shadow: 	rgba(255,255,255,0.08) 0 -1px 0;
	line-height: 	40px;
	
	text-align: 	center;
	
	position: 		absolute;
	z-index: 		10;
    
    width: 			60px;
	height: 		70px;
	
	margin: 4px;
	border-radius: 3px;	
	
    background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
	);
	
	border-top: 1px solid rgba(255,255,255,0.15);
	
}


input[type="radio"]:after {
	content: "";
	z-index: 		12;
	position: 		absolute;
   
    margin: 3px;
	border-radius: 3px;
	
	left: 			6px;
	top: 			62px;
    width: 			50px;
	height: 		5px;
	
	-webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 2px, inset rgba(255,255,255,.1) 0 1px 1px;
				
}


/* ----------- checked */


input[type="radio"]:active, input[type="radio"]:checked {
	-webkit-box-shadow: inset #000 4px 0px 4px, inset #000 -4px 0px 4px;
	background-image: -webkit-gradient(
		linear, left top, left bottom,
		color-stop( 0, 		hsl(0,0%,10%) ),
		color-stop( 0.14, 	hsl(0,0%,30%) ),
		color-stop( 0.15, 	hsl(0,0%,0%) )
	);
		
}



input[type="radio"]:active:before, input[type="radio"]:checked:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,12%) )
	);
	
	z-index: 		11;
	
	border: 0;
	border-top: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
							color-stop(0,  hsla(200,100%,85%,.05)),
							color-stop(.5, hsl(200,0%,40%)),
							color-stop(1,  hsla(200,100%,80%,.05)) 
							)50% 100%;
	-webkit-box-shadow: 0px 2px 1px 1px hsl(0,0%,13%);						
	-webkit-transform: rotateX(-25deg) scaleX(.95) translateY(4px);
}

input[type="radio"]:checked:before {
	color: hsl(200,100%,50%);
	text-shadow: 	rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;	
	-webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
							color-stop(0,  hsla(200,100%,85%,.05)),
							color-stop(.5, hsl(200,20%,50%)),
							color-stop(1,  hsla(200,100%,80%,.05)) 
							)50% 100%;
}

input[type="radio"]:active:after, input[type="radio"]:checked:after {
	top: 59px;
	-webkit-transform: scale(.9);
	opacity: .4;
}


/* ----------- hover */

input[type="radio"]:hover {
	cursor: pointer;
}
input[type="radio"]:checked {
	cursor: default;
}
input[type="radio"]:hover:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19.5%) ), to( hsl(0,0%,14%) )
	);
}
input[type="radio"]:checked:hover:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,12%) )
	);
}

/* -------------- progress -------------- */
progress {
	-webkit-appearance: none;
	position: relative;
	width: 150px;
	height: 17px;
	border-radius: 5px; 	
	padding: 4px;   
    background: #000;
	-webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1);
    
    /*Disabled for now.
    -webkit-box-reflect: below -3px -webkit-radial-gradient( 50% 70%, 50% 25%, hsla(0,0%,0%,.2) 0%, hsla(0,0%,0%,0) 95% );*/
    }
progress::-webkit-progress-bar {
    background-color: hsl(200,10%,14%);
    background-size: 2px 5px;
    background-image: 	-webkit-linear-gradient( 0deg,  hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),
    		            -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );	
    }
progress::-webkit-progress-value {
    background-size: inherit;
    background-image: 	inherit;
    background-color: hsl(200,100%,50%);
    -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);
    -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);
    }
progress:hover::-webkit-progress-value {
	/*In the real world, just change the element's value, this is just a hack for this demo.*/
	width: 100% !important;
	-webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);
    }