body{margin:0;background:#202020;color:#808080;font:11px/1.33 Verdana, sans-serif;}
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;}
#csd3-jscheck{margin: 20%;padding: 2em 4em;border: 1px dotted #666;text-align: center;}
#csd3-jscheck hr{display: none;}
#csd3-canvas{width:980px;height:670px;margin:10px auto;position:relative;background:url("../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.hilite{color: #7f723f;}
.pane{position:absolute; top:205px; left:25px;width:380px;height:380px;}
/* @group menu */
#csd3-menu{position: absolute; top: 0; left: 550px; z-index: 1;width: 540px;background: #202020;margin: 0;padding: 0;list-style: none;font-size: 12px;line-height: 1.1;}
#csd3-menu li{list-style: none;margin: 0; padding: 0;float: left;position: relative;}
#csd3-menu ul{display: none;position: absolute; left:0;/*width: 150px;*/margin: 0;padding: 0;}
#csd3-menu ul{border-left: 1px solid black;border-right: 2px solid black;border-bottom: 2px solid black;background: #202020;}
#csd3-menu ul ul{left: 145px;}
* html #csd3-menu ul{line-height: 0;} /* IE6 "fix" */
#csd3-menu ul a{zoom: 1} /* IE6/7 fix */
#csd3-menu ul li{float: none}
#csd3-menu ul ul{top: 3px}
#csd3-menu li.sep{padding: 5px;background: #202020;font-size: 1px;}
#csd3-menu hr{margin: 0;padding: 0;height: 1px;border: none;border-top: 1px solid #404040;}
#csd3-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;}
#csd3-menu a:hover{background-color: #999;color: #000;}
#csd3-menu ul a{padding: 8px 15px;text-align: left;border: none;background-color: #202020;color: #ccc;cursor: pointer;}
#csd3-menu ul a:hover{background-color: #999;color: #000;}
#csd3-menu a.disabled{color: #404040;background: #202020;cursor: default;}
#csd3-menu #colorblind a{padding-left: 30px;}
#csd3-menu #colorblind a.sel{color: #fc0;background-image: url("../img/warning.png");background-position: 7px 50%;background-repeat: no-repeat;}
#csd3-menu a.sel{color: #fc0;}
#csd3-menu a.sel:hover{background-color: #fc0;color: #000;}
/* @end */
/* @group tabs */
#csd3-tabs-color{position: absolute; top: 605px; left: 8px;width:415px; height: 27px;}
#csd3-tabs-preview{position: absolute; top: 606px; left: 430px;width:542px; height: 27px;}
#csd3-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: 12px;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;}
#csd3-tab-api a{width: 100%;font-size: 9px;background: #252525;color: #808080;overflow: visible;}
#csd3-tab-api a.sel{font-size: 11px;background: #000;color: #999;}
#csd3-tab-api a:hover{background: #282828;color: #ccc;}
#csd3-tab-wheel{left: 0;width: 137px;}
#csd3-tab-vars{left: 138px;width: 138px;}
#csd3-tab-info{left: 277px;width: 138px;}
#csd3-tab-preview0{left: 0;width: 180px;}
#csd3-tab-preview1{left: 181px;width: 180px;}
#csd3-tab-preview2{left: 362px;width: 180px;}
/* @end */
#csd3-debug{position:absolute; top:120px; left:450px;}
/* @group Model */
#csd3-model{position: absolute; top: 95px; left:25px;width:380px;border-collapse: collapse;border: none;}
#csd3-model td{border: none;padding: 0;text-align: center;vertical-align:top;}
#csd3-model a{display: block;border: none;width: 50px;margin: auto;padding: 55px 0 0 0;background: url("../img/model.png") 0 0 no-repeat;font-size: 12px;color:#808080;text-decoration: none;}
#csd3-model a.sel{color:#ccc;}
#csd3-model a:hover{color:white;text-decoration: underline;}
#csd3-model a.sel:hover{color:#ccc;text-decoration: none;}
a#csd3-m2{background-position: -50px 0}
a#csd3-m3{background-position: -100px 0}
a#csd3-m4{background-position: -150px 0}
a#csd3-m5{background-position: -200px 0}
a#csd3-m6{background-position: -250px 0}
a#csd3-m1.sel, a#csd3-m1:hover{background-position: -300px 0}
a#csd3-m2.sel, a#csd3-m2:hover{background-position: -350px 0}
a#csd3-m3.sel, a#csd3-m3:hover{background-position: -400px 0}
a#csd3-m4.sel, a#csd3-m4:hover{background-position: -450px 0}
a#csd3-m5.sel, a#csd3-m5:hover{background-position: -500px 0}
a#csd3-m6.sel, a#csd3-m6:hover{background-position: -550px 0}
/* @end */
/* @group Wheel */
#csd3-pane-wheel{position:absolute; top:205px; left:25px;width:380px;height:380px;}
#csd3-wheel{width:100%;height:100%;background: url("../img/wheel_bkgr.png") center no-repeat;}
#csd3-wh1{position:absolute; top:0; left:0;width:190px;height:190px;background: url("../img/wheel1.png") right bottom no-repeat;}
#csd3-wh2{position:absolute; top:0; left:190px;width:190px;height:190px;background: url("../img/wheel2.png") left bottom no-repeat;}
#csd3-wh3{position:absolute; top:190px; left:0;width:190px;height:190px;background: url("../img/wheel3.png") right top no-repeat;}
#csd3-wh4{position:absolute; top:190px; left:190px;width:190px;height:190px;background: url("../img/wheel4.png") left top no-repeat;}
.dot, .dotv{position:absolute;width:13px; height:13px;background: url("../img/dot1.png") 0 0 no-repeat;}
.dot{cursor:pointer;}
#csd3-wheel #csd3-dot2{display:none; background-image: url("../img/dot3.png")}
#csd3-wheel #csd3-dot3,
#csd3-wheel #csd3-dot4{display:none; background-image: url("../img/dot2.png")}
#csd3-sample{position:absolute; top:120px; left:120px; z-index:0;width:140px; height:140px;background: gray;}
#csd3-wheel .val{position:absolute; z-index:10;font-size:12px;line-height:1;color:#808080;text-align:left;cursor: pointer;}
#csd3-wheel .val span{color: #ccc}
#csd3-wheel #csd3-hue-val{top:5px; left:0}
#csd3-wheel #csd3-hue-compl{top:25px; left:0;font-size: 12px;line-height:1;text-decoration: underline;}
#csd3-wheel #csd3-dist-val{top:5px; right:0; text-align:right}
#csd3-wheel #csd3-rgb-val{bottom:5px; right:0}
#csd3-rgb-parts{position:absolute; z-index:10;bottom:10px; left:0;border-collapse: collapse;border: none;}
#csd3-rgb-parts th, #csd3-rgb-parts td{padding: 1px 3px 0 0;text-align: right;font-weight: normal;color: #808080;font-size: 12px;line-height:1;}
/* @end */
/* @group Vars */
#csd3-pane-vars{display: none;}
.slider .dotv{background-image: url("../images/dot4.png");}
.slider .dot, .slider .dotv.sel{background-image: url("../img/dot3.png");}
#csd3-presets{position: absolute; top: 18px; left:5px; z-index: 100;text-align: left;}
#csd3-presets select{font-size: 12px;line-height: 1.1;font-weight: normal;}
#csd3-tabs-csv{position: absolute; left: -5px; top: 80px;}
#csd3-tabs-csv a{height: 20px;padding: 8px 0 4px 0;font-size: 9px;line-height: 11px;background: #333;}
#csd3-tab-c1{width:220px; left:0}
#csd3-tab-c2{width:170px; left:220px}
#csd3-tabs-csv a.sel{padding: 10px 0 0 0;background: #262626;font-size: 11px;line-height: 13px;}
#csd3-c1-cover *{/*outline: 1px dotted green;*/}
#csd3-c1-cover, #csd3-c2-cover{display: none;position: absolute; left: -5px; top: 110px;width: 390px; height: 240px;background: #262626;}
#csd3-saturation-cover, #csd3-contrast-cover, #csd3-manvar-cover{position: absolute; left: 5px; top: 30px;width: 195px;}
#csd3-contrast-cover{left: 200px;}
#csd3-manvar-cover{width: 380px;}
#csd3-saturation-cover h4, #csd3-contrast-cover h4, #csd3-manvar-cover h4{position: absolute; left:0; top: 0;margin: 0; width: 190px;font-size: 10px;line-height: 12px;font-weight: normal;font-style: italic;text-align: center;}
#csd3-ttl-c2{display: none}
#csd3-saturation, #csd3-manvar{position: absolute; left: 28px; top: 38px;width: 140px; height: 140px;}
#csd3-saturation .slider, #csd3-manvar .slider{position: absolute; left: -26px; top: -28px;width: 190px; height: 190px;background: url("../img/sv_slider_alpha.png") top center no-repeat;}
#csd3-contrast{position: absolute; left: 0; top: 10px;width: 190px; height: 190px;background: url("../img/c_slider.png") top center no-repeat;}
#csd3-manvar-list{position: absolute; left: 190px; top: 0;width: 190px;}
#csd3-manvar-list a.ttl{display: block;margin: 1px 0;padding: 3px 10px;color: #999;background: #202020;font-weight: normal;text-decoration: none;}
#csd3-manvar-list a.ttl:hover{background: black;}
#csd3-manvar-list a.ttl.sel{background: black;}
.var-set{display: none;}
#csd3-manvar-list a.col{display: block;margin: 1px 0;padding: 2px 10px 2px 15px;color: #999;background: transparent;text-decoration: none;}
#csd3-manvar-list a.col:hover{background: black;}
#csd3-manvar-list a.col.sel{background: black;color: #ccc;}
#csd3-manvar-list .cbox{width: 18px; height: 18px;margin-right: 10px;border: 1px solid #202020;vertical-align: middle;}
#csd3-manvar-list .code{display: none}
/* @end */
/* @group pane-info */
#csd3-pane-info{display: none;}
#csd3-pane-info h4{margin: 0.7em 0 0.2em 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{height: 25px;border: 1px solid #202020;}
.info-table td.code{text-align: center;vertical-align: middle;font-size: 9px;white-space: nowrap;}
#csd3-coltable .info{margin: 1em 0 0 0;font-size: 9px;text-align: center;}
#csd3-export{margin-top: 2em;padding-top: 0.5em;border-top: 1px dotted #666;font-size: 115%;text-align: center;}
#csd3-export strong{margin-right: 1em;}
#csd3-export .smaller{font-size: 85%;}
.export{padding: 1em;}
.export pre{font: 11px/1.1 monospace;}
/* @end */
/* @group Palette */
#csd3-palette{position: absolute; top: 55px; left:530px;border-collapse: collapse;border: none;}
#csd3-palette td{border: 2px solid #333;width: 85px; height: 85px;}
#csd3-schemeid{position: absolute; top: 150px; left:445px;width: 480px;margin: 0;font-size:12px;font-weight: normal;text-align: center;}
#csd3-schemeid span{color: #ccc;}
#csd3-page-preview{position: absolute; top: 160px; left: 465px;width: 480px;margin: 0;font-size: 12px;font-weight: normal;text-align: center;}
/* @end */
/* @group preview */
#csd3-preview-palette-canvas{position: absolute; top: 210px; left:460px;width:490px; height:360px;}
#csd3-preview-palette-bg1{position: absolute; top: 0; left:0;width:85%; height:80%;background: white;}
#csd3-preview-palette-bg2{position: absolute; bottom: 0; right:0;width:85%; height:85%;background: black;}
#csd3-preview-palette{position: absolute; top: 4px; left:4px;width:480px;border-collapse: collapse;border: none;}
#csd3-preview-palette td{padding: 0;text-align: center;vertical-align: middle;overflow: hidden;border: none;}
#csd3-preview-palette td.bg-pri-0{width: 56%}
#csd3-preview-palette td.bg-pri-1,
#csd3-preview-palette td.bg-pri-3{width: 22%}
.scheme-m1 #csd3-preview-palette tr.pri td{height: 175px}
.scheme-m1 #csd3-preview-palette tr.sec td{display: none}
.scheme-m1 #csd3-preview-palette tr.compl td{display: none}
.scheme-m2 #csd3-preview-palette tr.pri td{height: 141px}
.scheme-m2 #csd3-preview-palette tr.sec td{display: none}
.scheme-m2 #csd3-preview-palette tr.compl td{height: 34px}
.scheme-m3 #csd3-preview-palette tr.pri td{height: 89px}
.scheme-m3 #csd3-preview-palette tr.sec td{height: 43px}
.scheme-m3 #csd3-preview-palette tr.compl td{display: none}
.scheme-m4 #csd3-preview-palette tr.pri td{height: 73px}
.scheme-m4 #csd3-preview-palette tr.sec td{height: 35px}
.scheme-m4 #csd3-preview-palette tr.compl td{height: 32px}
.scheme-m5 #csd3-preview-palette tr.pri td{height: 89px}
.scheme-m5 #csd3-preview-palette tr.sec td{height: 43px}
.scheme-m5 #csd3-preview-palette tr.compl td{display: none}
.scheme-m6 #csd3-preview-palette tr.pri td{height: 73px}
.scheme-m6 #csd3-preview-palette tr.sec td{height: 35px}
.scheme-m6 #csd3-preview-palette tr.compl td{height: 32px}
#csd3-preview-palette .text{display: inline;padding: 2px 5px;font-size: 9px;line-height: 10px;white-space: nowrap;}
#csd3-preview-palette .text .row1{color: white}
#csd3-preview-palette .text .row2{color: gray}
#csd3-preview-palette .text .row3{color: black}
#csd3-preview-palette .hilite .text{font-size: 10px;border: 1px outset #202020;}
#csd3-showtext{position: absolute; top: 575px; right:30px;width: 490px;text-align: right;}
#csd3-showtext-btn{font-size: 12px;text-decoration: none;color: #555;}
#csd3-showtext-btn:hover{color: #fff;}
#csd3-showtext-btn.sel{}
/* @end */
#csd3-preview-pars{position: absolute; top: 603px; left:460px;width: 490px;white-space: nowrap;}
#csd3-fps{position: absolute; top: 7px; left:520px;white-space: nowrap;font-size: 9px;color: #555;text-align: left;}
#csd3-randomize{position: absolute; top: 7px; left: 560px;width: 155px;margin: 0;font-size: 9px;text-align: center;}
#csd3-randomize span{font-size: 9px;}
#csd3-vision-warning{position: absolute; top: 612px; left: 445px;width: 15px; height: 15px;background: url("../img/warning.png") center no-repeat;}
.cb-active-0 #csd3-vision-warning,
.convert-off #csd3-vision-warning{display: none;}
/*#csd3-colorblind{position: absolute; top: 660px; right:0;text-align: right;vertical-align: middle;white-space: nowrap;color: #555;}
#csd3-colorblind label.hilite{color: #970;}
#csd3-colorblind select{font-size: 125%;}
#csd3-colorblind .select-replace{color: #555;border-color: #404040;}*/
#csd3-donate{position: absolute; top: 660px; left:10px;text-align: left;}
#csd3-donate .btn{width: 122px; height: 40px;background: url("../img/donate.png") 0 -60px no-repeat;}
#csd3-donate .btn:hover{height: 60px;background-position: 0 0;}
#csd3-relatedlinks{position: absolute; top: 650px; right:10px;width: 820px;text-align: right;vertical-align: middle;white-space: nowrap;color: #555;font-size: 100%;}
#csd3-relatedlinks a{color: #555}
#csd3-relatedlinks a:hover{color: #808080}
.select-replace{padding: 5px 30px 5px 10px;background: url("../img/ddarrow.png") 98% 50% no-repeat;color: #999;border: 1px dotted #555;}
#csd3-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;}
#csd3-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;}
#csd3-form{display: none;}
#csd3-prompt{padding: 25px 50px;border: 1px outset #000;background: #202020;color: #ccc;text-align: center;font-size: 12px;}
#csd3-prompt .submit{margin-top: 3em;}
#csd3-prompt-input{background: #000;color: #ccc;border: 1px solid #666;padding: 5px;width: 7em;font-size: 15px;}
#csd3-prompt .chkbox{margin: 0;text-align: left;}
#csd3-prompt button{margin: 0 0.5em;padding: 2px 1em;vertical-align: middle;font-size: 14px;border: 1px outset #000;}
#csd3-prompt-ok{background: #333;color: #ccc;font-weight: bold;}
#csd3-prompt-cancel{background: #202020;color: #999;font-weight: normal;}
#csd3-shoplink{position: absolute; top: 50px; left: 910px;display: block;width: 98px; height: 106px;background: url("../images/shop.png") 0 0 no-repeat;}
#csd3-shoplink:hover{background-position: -100px 0;}
#csd3-shoplink2{position: absolute; top: 50px; left: 910px;display: block;width: 98px; height: 106px;background: url("../img/banner.png") 0 0 no-repeat;}
#csd3-shoplink2:hover{background-position: -100px 0;}
#csd3-shoplink2:active{background-position: -200px 0;}