@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
}
body{
	width:100%; height:100%;
	background:rgb(70,70,70);
	background: -moz-linear-gradient(top,rgb(70,70,70) 0%, rgb(120,150,130) 50%,rgb(70,70,70) 100%);
}
img{
	width:100%;
	height:auto;
}
div{
	width:500px;
	margin:350px auto 0 auto;
	border:1px solid #fff;
	transform:translate(-50%,-50%);
}
table{
	width:100%;
	border:1px solid #FFF;
}
td{ 
    
	background-color:rgba(120,150,200,.5);
	text-align:center;
	font-size:20px;
	color:#222;
	font-weight:100;
}
table tr:nth-of-type(1) td{
	width:10%;
	height:100px;
	cursor:pointer;
	border-bottom:3px solid #fff;
}
table tr:nth-of-type(1) td:hover{
	background-color:rgb(70,70,70);
	box-shadow:10px 10px 5px #000 inset;
	color:#ccc;
}
.onclick{
	background-color:rgb(70,70,70);
	box-shadow:10px 10px 5px #000 inset;
	color:#ccc;
}
.losefocus{
}
table tr:nth-child(2) td{
	background-color:#ccc;
	width:10%;
	height:70px;
	font-size:20px;
	color:#666;
	
}
table tr:nth-child(2) td input[type=range]{
	width:70%;
	color:#000;
}
table tr:nth-child(2) td input[type=number]{
	width:50px;
	color:#000;
}
table tr:nth-child(2) td input[way=saturatetext]{
	width:50%;
}
table tr:nth-child(2) td input[way=huerotatetext]{
	width:50%;
}
table tr:nth-child(2) td input[way=brightnesstext]{
	width:50%;
}
table tr:nth-child(2) td input[way=contrasttext]{
	width:50%;
}
/*img[way=grayscale]{
	-webkit-filter:grayscale(1);
	filter:grayscale(1);
}
img[way=sepia]{
	-webkit-filter:sepia(1);
	filter:sepia(1);
}
img[way=saturate]{
	-webkit-filter:saturate(3);
	filter:saturate(3);
}
img[way=hue-rotate]{
	-webkit-filter:hue-rotate(90deg);
	filter:hue-rotate(90deg);
}
img[way=invert]{
	 -webkit-filter:invert(1);
	filter:invert(1);
}
img[way=opacity]{
	-webkit-filter:opacity(.2);
	filter:opacity(.2);
}
img[way=brightness]{
	-webkit-filter:brightness(.5);
	filter:brightness(.5);
}
img[way=contrast]{
	-webkit-filter:contrast(2);
	filter:contrast(2);
}
img[way=blur]{
	-webkit-filter:blur(3px);
	filter:blur(3px);
}
img[way=drop-shadow]{
	-webkit-filter:drop-shadow(5px 5px 5px #ccc);
	filter:drop-shadow(5px 5px 5px #ccc);
}
img[way=img]{
	-webkit-filter:;
	filter:;
}
以上是滤镜效果使用方法示例*/
table tr:nth-child(3) td{
	background:#ccc;
	width:10%;
	height:30px;
	border-top:3px solid #333;
	font-size:10px;
	cursor:pointer;
	color:#666;
}
table tr:nth-child(4) td{
	background:#ccc;
	width:10%;
	height:25px;
	font-size:16px;
	border-top:1px solid #fff;
	color:#666;
}