﻿/* CSS layout*/body {
	background-image:url('../../images/diwen_302.gif');
	/* 在水平和垂直方向平铺*/ 
	background-repeat:repeat;
	/*设置网页背景图片为随屏幕大小缩放的代码*/
	/*background-size:100% 100%;*/
	/*设置网页背景图片为固定（不随网页移动）的代码*/
	background-attachment:fixed;
	margin:0px auto;
	padding:0px 0px 0px 0px;
	box-sizing:border-box;
	border-width:0px;
	/*设置为无边框的代码*/;
	border-style:none;
}
a {
	color:#887;
}
a:hover {
	color:white;
}
input,select,button {
	font-size:100%;
	vertical-align:middle;
}
select,button {
	background:#202020;
	color:#999;
	border:1px dotted #666;
}
#jscheck {
	margin:20%;
	padding:2em 4em;
	border:1px dotted #666;
	text-align:center;
}
#jscheck hr {
	display:none;
}
.container {
	width:1200px;
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;
}
@media screen and (min-width:768px) {
	.container {
		width:750px;
	}
}
@media screen and (min-width:992px) {
	.container {
		width:970px;
	}
}
@media screen and (min-width:1200px) {
	.container {
		width:1170px;
	}
}
.container-fluid {
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;
}
.mgbt30 {
	margin-bottom:30px;
}
.content .ys-tabs ul li a {
	color:#333;
}
.content .ys-tabs ul li a:hover {
	color:#777;
}
#canvas {
	width:1150px;
	height:780px;
	margin:30px 0;
	position:relative;
	background:url('../../sehuandapei/color/img/ui.png') 0 0 no-repeat;
}
h1 {
	display:none;
}
h2 {
	position:absolute;
	top:60px;
	left:27px;
	margin:0;
	font-size:9px;
	font-weight:normal;
	color:#555;
}
h2 a {
	color:#555;
}
h2 a strong {
	color:#665;
	font-weight:normal;
}
.pane {
	position:absolute;
	top:205px;
	left:25px;
	width:380px;
	height:380px;
}
/* @group menu*/
#menu {
	position:absolute;
	top:0;
	left:440px;
	z-index:1;
	width:540px;
	background:#202020;
	margin:0;
	padding:0;
	list-style:none;
	font-size:11px;
	line-height:1.1;
}
#menu li {
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	position:relative;
}
#menu ul {
	display:none;
	position:absolute;
	left:0;
	/*width:150px;*/
	margin:0;
	padding:0;
}
#menu ul {
	border-left:1px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	background:#202020;
}
#menu ul ul {
	left:145px;
}
* html #menu ul {
	line-height:0;
}
/* IE6 "fix"*/
#menu ul a {
	zoom:1;
}
/* IE6/7 fix*/
#menu ul li {
	float:none;
}
#menu ul ul {
	top:3px;
}
#menu li.sep {
	padding:5px;
	background:#202020;
	font-size:1px;
}
#menu hr {
	margin:0;
	padding:0;
	height:1px;
	border:none;
	border-top:1px solid #404040;
}
#menu a {
	display:block;
	text-align:center;
	padding:3px 15px 7px;
	text-decoration:none;
	color:#808080;
	background:#202020;
	border-left:1px solid #333;
	white-space:nowrap;
	cursor:default;
}
#menu a:hover {
	background-color:#999;
	color:#000;
}
#menu ul a {
	padding:8px 15px;
	text-align:left;
	border:none;
	background-color:#202020;
	color:#ccc;
	cursor:pointer;
}
#menu ul a:hover {
	background-color:#999;
	color:#000;
}
#menu a.disabled {
	color:#404040;
	background:#202020;
	cursor:default;
}
#menu #colorblind a {
	padding-left:30px;
}
#menu #colorblind a.sel {
	color:#fc0;
	background-image:url('../../sehuandapei/color/img/warning.png');
	background-position:7px 50%;
	background-repeat:no-repeat;
}
#menu a.sel {
	color:#fc0;
}
/* @end*/
/* @group tabs*/
#tabs-color {
	position:absolute;
	top:605px;
	left:8px;
	width:415px;
	height:27px;
}
#tabs-preview {
	position:absolute;
	top:606px;
	left:430px;
	width:542px;
	height:27px;
}
#tab-api {
	position:absolute;
	top:0;
	left:715px;
	width:265px;
	height:27px;
}
.tabs a {
	display:block;
	position:absolute;
	top:0;
	left:0;
	background:#333;
	color:#808080;
	font-size:11px;
	line-height:27px;
	text-align:center;
	text-decoration:none;
	white-space:nowrap;
}
.tabs a.sel {
	background:transparent;
}
.tabs a:hover {
	color:#ccc;
}
.tabs a.sel:hover {
	color:#808080;
}
#tab-api a {
	width:100%;
	font-size:9px;
	background:#252525;
	color:#808080;
	overflow:visible;
}
#tab-api a.sel {
	font-size:11px;
	background:#000;
	color:#999;
}
#tab-api a:hover {
	background:#282828;
	color:#ccc;
}
#tab-wheel {
	left:0;
	width:137px;
}
#tab-vars {
	left:138px;
	width:138px;
}
#tab-info {
	left:277px;
	width:138px;
}
#tab-preview {
	left:0;
	width:180px;
}
#tab-preview2 {
	left:181px;
	width:180px;
}
#tab-preview3 {
	left:362px;
	width:180px;
}
/* @end*/
#debug {
	position:absolute;
	top:120px;
	left:450px;
}
/* @group Model*/
#model {
	position:absolute;
	top:95px;
	left:25px;
	width:380px;
	border-collapse:collapse;
	border:none;
}
#model td {
	border:none;
	padding:0;
	text-align:center;
	vertical-align:top;
}
#model a {
	display:block;
	border:none;
	width:50px;
	margin:auto;
	padding:55px 0 0 0;
	background:url('../../sehuandapei/color/img/model.png') 0 0 no-repeat;
	font-size:12px;
	color:#808080;
	text-decoration:none;
}
#model a.sel {
	color:#ccc;
}
#model a:hover {
	color:white;
	text-decoration:underline;
}
#model a.sel:hover {
	color:#ccc;
	text-decoration:none;
}
a#m2 {
	background-position:-50px 0;
}
a#m3 {
	background-position:-100px 0;
}
a#m4 {
	background-position:-150px 0;
}
a#m5 {
	background-position:-200px 0;
}
a#m6 {
	background-position:-250px 0;
}
a#m1.sel,a#m1:hover {
	background-position:-300px 0;
}
a#m2.sel,a#m2:hover {
	background-position:-350px 0;
}
a#m3.sel,a#m3:hover {
	background-position:-400px 0;
}
a#m4.sel,a#m4:hover {
	background-position:-450px 0;
}
a#m5.sel,a#m5:hover {
	background-position:-500px 0;
}
a#m6.sel,a#m6:hover {
	background-position:-550px 0;
}
/* @end*/
/* @group Wheel*/
#pane-wheel {
	position:absolute;
	top:205px;
	left:25px;
	width:380px;
	height:380px;
}
#wheel {
	width:100%;
	height:100%;
	background:url('../../sehuandapei/color/img/wheel_bkgr.png') center no-repeat;
}
#wh1 {
	position:absolute;
	top:0;
	left:0;
	width:190px;
	height:190px;
	background:url('../../sehuandapei/color/img/wheel1.png') right bottom no-repeat;
}
#wh2 {
	position:absolute;
	top:0;
	left:190px;
	width:190px;
	height:190px;
	background:url('../../sehuandapei/color/img/wheel2.png') left bottom no-repeat;
}
#wh3 {
	position:absolute;
	top:190px;
	left:0;
	width:190px;
	height:190px;
	background:url('../../sehuandapei/color/img/wheel3.png') right top no-repeat;
}
#wh4 {
	position:absolute;
	top:190px;
	left:190px;
	width:190px;
	height:190px;
	background:url('../../sehuandapei/color/img/wheel4.png') left top no-repeat;
}
.dot,.dotv {
	position:absolute;
	width:13px;
	height:13px;
	background:url('../../sehuandapei/color/img/dot1.png') 0 0 no-repeat;
}
.dot {
	cursor:pointer;
}
#wheel #dot2 {
	display:none;
	background-image:url('../../sehuandapei/color/img/dot3.png');
}
#wheel #dot3,#wheel #dot4 {
	display:none;
	background-image:url('../../sehuandapei/color/img/dot2.png');
}
#sample {
	position:absolute;
	top:120px;
	left:120px;
	z-index:0;
	width:140px;
	height:140px;
	background:gray;
}
#wheel .val {
	position:absolute;
	z-index:10;
	font-size:11px;
	line-height:1;
	color:#808080;
	text-align:left;
	cursor:pointer;
}
#wheel .val span {
	color:#ccc;
}
#wheel #hue-val {
	top:5px;
	left:0;
}
#wheel #dist-val {
	top:5px;
	right:0;
	text-align:right;
}
#wheel #rgb-val {
	bottom:5px;
	right:0;
}
#rgb-parts {
	position:absolute;
	z-index:10;
	bottom:10px;
	left:0;
	border-collapse:collapse;
	border:none;
}
#rgb-parts th,#rgb-parts td {
	padding:1px 3px 0 0;
	text-align:right;
	font-weight:normal;
	color:#808080;
	font-size:9px;
	line-height:1;
}
/* @end*/
/* @group Vars*/
#pane-vars {
	display:none;
}
.slider .dot {
	background-image:url('../../sehuandapei/color/img/dot3.png');
}
.slider .dotv {
	display:none;
	background-image:url('../../sehuandapei/color/img/dot4.png');
}
#presets {
	position:absolute;
	top:25px;
	left:5px;
	z-index:100;
	text-align:left;
}
#presets select {
	font-size:12px;
	line-height:1.1;
	font-weight:normal;
}
#saturation-cover {
	position:absolute;
	left:-3px;
	top:95px;
	width:190px;
	height:240px;
	background:#282828;
}
#saturation-cover h4 {
	position:absolute;
	left:0;
	top:10px;
	margin:0;
	width:100%;
	font-size:11px;
	line-height:13px;
	font-weight:normal;
	text-align:center;
}
#ttl-c2 {
	display:none;
}
#saturation {
	position:absolute;
	left:28px;
	top:65px;
	width:140px;
	height:140px;
}
#saturation .slider {
	position:absolute;
	left:-26px;
	top:-28px;
	width:190px;
	height:190px;
}
#contrast-cover {
	position:absolute;
	left:193px;
	top:95px;
	width:190px;
	height:240px;
	background:#282828;
}
#tabs-contrast {
	position:absolute;
	left:0;
	top:0;
}
#tabs-contrast a {
	width:95px;
	height:30px;
	padding:6px 0 4px 0;
	font-size:9px;
	line-height:11px;
	background:#333;
}
#tab-c1 {
	left:0;
}
#tab-c2 {
	left:95px;
}
#tabs-contrast a.sel {
	padding:10px 0 0 0;
	background:#282828;
	font-size:11px;
	line-height:13px;
}
#contrast {
	position:absolute;
	left:0;
	top:35px;
	width:190px;
	height:190px;
}
#manualvars {
	display:none;
	position:absolute;
	left:0;
	top:45px;
	width:190px;
}
#manualvars a.ttl {
	display:block;
	margin:1px 0;
	padding:3px 10px;
	color:#999;
	background:#202020;
	font-weight:normal;
	text-decoration:none;
}
#manualvars a.ttl:hover {
	background:black;
}
.var-set {
	display:none;
}
#manualvars a.col {
	display:block;
	margin:1px 0;
	padding:2px 10px 2px 15px;
	color:#999;
	background:transparent;
	text-decoration:none;
}
#manualvars a.col:hover {
	background:black;
}
#manualvars a.col.sel {
	background:black;
	color:#ccc;
}
#manualvars .cbox {
	width:18px;
	height:18px;
	margin-right:10px;
	border:1px solid #202020;
	vertical-align:middle;
}
#manualvars .code {
	display:none;
}
#saturation-cover span,#presets {
	color:#fff;
}
.info-table .code {
	color:#fff;
}
/* @end*/
/* @group pane-info*/
#pane-info {
	display:none;
}
#pane-info h4 {
	margin:1em 0 1em 0;
	font-size:12px;
	font-weight:normal;
	color:#ccc;
}
.info-table {
	width:100%;
	margin:0;
	border-collapse:collapse;
	border:none;
	font-size:10px;
	color:#999;
}
.info-table td.cbox {
	width:20px;
	height:25px;
	border:1px solid #202020;
}
.info-table td.code {
	padding-left:5px;
	text-align:left;
	vertical-align:middle;
}
#export {
	margin-top:2em;
	padding-top:0.5em;
	border-top:1px dotted #666;
	font-size:115%;
	text-align:center;
}
#export strong {
	margin-right:1em;
}
#export .smaller {
	font-size:85%;
}
.export {
	padding:1em;
}
.export pre {
	font:11px/1.1 monospace;
}
/* @end*/
/* @group Palette*/
#palette {
	position:absolute;
	top:55px;
	left:500px;
	border-collapse:collapse;
	border:none;
}
#palette td {
	border:2px solid #333;
	width:85px;
	height:85px;
}
#schemeid {
	position:absolute;
	top:150px;
	left:445px;
	width:480px;
	margin:0;
	font-size:9px;
	font-weight:normal;
	text-align:center;
}
#schemeid span {
	color:#ccc;
}
#page-preview {
	position:absolute;
	top:160px;
	left:465px;
	width:480px;
	margin:0;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}
/* @end*/
/* @group preview*/
#preview-palette-canvas {
	position:absolute;
	top:210px;
	left:460px;
	width:490px;
	height:360px;
}
#preview-palette-bg1 {
	position:absolute;
	top:0;
	left:0;
	width:85%;
	height:80%;
	background:white;
}
#preview-palette-bg2 {
	position:absolute;
	bottom:0;
	right:0;
	width:85%;
	height:85%;
	background:black;
}
#preview-palette {
	position:absolute;
	top:4px;
	left:4px;
	width:480px;
	border-collapse:collapse;
	border:none;
}
#preview-palette td {
	padding:0;
	text-align:center;
	vertical-align:middle;
	overflow:hidden;
	border:none;
}
#preview-palette td.bg-pri-0 {
	width:56%;
}
#preview-palette td.bg-pri-1,#preview-palette td.bg-pri-3 {
	width:22%;
}
#preview-palette.scheme-m1 tr.pri td {
	height:175px;
}
#preview-palette.scheme-m1 tr.sec td {
	display:none;
}
#preview-palette.scheme-m1 tr.compl td {
	display:none;
}
#preview-palette.scheme-m2 tr.pri td {
	height:141px;
}
#preview-palette.scheme-m2 tr.sec td {
	display:none;
}
#preview-palette.scheme-m2 tr.compl td {
	height:34px;
}
#preview-palette.scheme-m3 tr.pri td {
	height:89px;
}
#preview-palette.scheme-m3 tr.sec td {
	height:43px;
}
#preview-palette.scheme-m3 tr.compl td {
	display:none;
}
#preview-palette.scheme-m4 tr.pri td {
	height:73px;
}
#preview-palette.scheme-m4 tr.sec td {
	height:35px;
}
#preview-palette.scheme-m4 tr.compl td {
	height:32px;
}
#preview-palette.scheme-m5 tr.pri td {
	height:89px;
}
#preview-palette.scheme-m5 tr.sec td {
	height:43px;
}
#preview-palette.scheme-m5 tr.compl td {
	display:none;
}
#preview-palette.scheme-m6 tr.pri td {
	height:73px;
}
#preview-palette.scheme-m6 tr.sec td {
	height:35px;
}
#preview-palette.scheme-m6 tr.compl td {
	height:32px;
}
#preview-palette .text {
	display:inline;
	padding:2px 5px;
	font-size:9px;
	line-height:10px;
	white-space:nowrap;
}
#preview-palette .text .row1 {
	color:white;
}
#preview-palette .text .row2 {
	color:gray;
}
#preview-palette .text .row3 {
	color:black;
}
#preview-palette .hilite .text {
	font-size:10px;
	border:1px outset #202020;
}
#showtext {
	position:absolute;
	top:575px;
	left:460px;
	width:490px;
	text-align:right;
	color:#555;
}
/* @end*/
#preview-pars {
	position:absolute;
	top:603px;
	left:460px;
	width:490px;
	white-space:nowrap;
}
#fps {
	position:absolute;
	top:7px;
	left:520px;
	white-space:nowrap;
	font-size:9px;
	color:#fff;
	text-align:left;
}
#randomize {
	position:absolute;
	top:7px;
	left:560px;
	width:155px;
	margin:0;
	font-size:9px;
	text-align:center;
}
#randomize span {
	font-size:9px;
}
#cb-warning {
	display:none;
	position:absolute;
	top:612px;
	left:445px;
	width:15px;
	height:15px;
	background:url('../../sehuandapei/color/img/warning.png') center no-repeat;
}
#relatedlinks {
	position:absolute;
	top:680px;
	right:10px;
	width:820px;
	text-align:right;
	vertical-align:middle;
	white-space:nowrap;
	color:#555;
	font-size:100%;
}
#relatedlinks a {
	color:#555;
}
#relatedlinks a:hover {
	color:#808080;
}
.select-replace {
	padding:5px 30px 5px 10px;
	color:#999;
	width:269px;
	border:1px dotted #555;
}
#help {
	display:none;
}
#tooltip {
	position:absolute;
	z-index:9999;
	width:200px;
	padding:10px 15px;
	opacity:0.9;
	background:#000;
	color:#ccc;
	border:1px solid #666;
	font-size:95%;
	line-height:1.66;
}
#tooltip.color {
	width:auto;
	text-align:center;
	font-size:10px;
	padding:2px 5px;
}
iframe.sample {
	width:100%;
	height:610px;
	margin:0 auto;
	border:1px solid #404040;
}
.sample-info {
	padding:3px 5px;
	background:black;
	color:#ccc;
}
#form {
	display:none;
}
#prompt {
	padding:25px 50px;
	border:1px outset #000;
	background:#202020;
	color:#ccc;
	text-align:center;
	font-size:12px;
}
#prompt .submit {
	margin-top:3em;
}
#prompt-input {
	background:#000;
	color:#ccc;
	border:1px solid #666;
	padding:5px;
	width:7em;
	font-size:15px;
}
#prompt .chkbox {
	margin:0;
	text-align:left;
}
#prompt button {
	margin:0 0.5em;
	padding:2px 1em;
	vertical-align:middle;
	font-size:14px;
	border:1px outset #000;
}
#prompt-ok {
	background:#333;
	color:#ccc;
	font-weight:bold;
}
#prompt-cancel {
	background:#202020;
	color:#999;
	font-weight:normal;
}
#shoplink {
	position:absolute;
	top:50px;
	left:910px;
	display:block;
	width:98px;
	height:106px;
}
#shoplink:hover {
	background-position:-100px 0;
}
#shoplink2 {
	position:absolute;
	top:50px;
	left:910px;
	display:block;
	width:98px;
	height:106px;
}
#shoplink2:hover {
	background-position:-100px 0;
}
#shoplink2:active {
	background-position:-200px 0;
}
