html, body { margin: 0; padding: 0; font-size: 12px; font-family: 'Microsoft YaHei' 'SimSun' 'Verdana'; }
body { -webkit-user-select: none; }
h2, h3 { margin: 0; padding: 0; font-size: 12px; font-weight: bold; line-height: 14px; }
h3 { font-size: 10px; line-height: 20px; padding: 10px 0 0 0; }
dl { margin: 0; padding: 0; list-style: none; }
dt { clear: both; width: 120px; }
dd { margin-left: 5px; }
dt, dd { float: left; }

#main { padding: 10px; }
#options { float: left; width: 400px; }
#options > div { clear: both; margin-bottom: 5px; }
#result { float: left; width: 300px; }
#css { -webkit-user-select: auto; word-wrap:break-word; }
#demo { width: 280px; height: 180px; margin: auto; overflow: auto; }
#demo-content {  }
#css-wrap { width: 280px; height: 300px; overflow: auto; }
.boxshadow-options label, .boxshadow-options .slider { float: left; }
.boxshadow-options label { padding-right: 3px; width: 100px; }
.boxshadow-options input[type="range"] { width: 120px; }
.cb { clear: both; font-size: 0; height: 1px; }

.slider { position: relative; }
.rangevalue { width: 30px; color: white; font-size: 10px; 
	text-align: center;	font-family:  Arial, sans-serif;
	display: block;	margin: 0 0 0 -15px;
	position: relative;	left: 50%;
	padding: 2px 6px; border: 1px solid black;

	-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
	box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222931), color-stop(100%,#181D21));

	-webkit-border-radius: 5px;
	opacity: 0;

	-webkit-transition: all 0.5s ease;
	top: -50px;
}
input[type="range"] { background-color: black; width: 200px; height: 2px; }
input[type="range"]:hover ~ .rangevalue,input[type="range"]:active ~ .rangevalue {
	opacity: 1;
	top: -40px;
}


.color-picker, .miniColors-triggerWrap { float: left; margin: 0; }
