#selectedRYB{width:33%;height:100px;margin:auto}#comp{width:33%;height:100px;margin:auto;display:none}#triadic1,#triadic2,#analogous1,#analogous2{float:left;width:33%;height:100px;margin:10px;display:none}#lighter,#lightest{float:left;width:20%;height:100px;margin:10px}#darker,#darkest{float:right;width:20%;height:100px;margin:10px}#rulelist li{cursor:pointer}#rulelist li:hover{background-color:#faf9f9}#slidecontainer{width:200px;margin:auto;padding-top:53px}#rulecontainer{text-align:center;width:200px;margin:auto}.colorcolumn{float:left;width:20%}.satlightsliderscontainer{background-color:#fff;padding:20px}.slider{-webkit-appearance:none;opacity:.7;background:#d3d3d3;border-radius:5px;outline:none;width:100%;height:10px;-webkit-transition:opacity .15s ease-in-out;transition:opacity .15s ease-in-out}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;cursor:pointer;background:url(contrasticon.png);border-radius:50%;width:23px;height:24px}.slider-sun::-webkit-slider-thumb{background:url(sunicon.png);width:25px;height:25px}.slider-hue::-webkit-slider-thumb{background:red}.slider::-moz-range-thumb{cursor:pointer;background:url(contrasticon.png);border:0;border-radius:50%;width:23px;height:24px}.slider-sun::-moz-range-thumb{background:url(sunicon.png);width:25px;height:25px}.slider-hue::-moz-range-thumb{background:red}.slider-mini{height:16px}.slider-mini::-webkit-slider-thumb{background-size:16px 16px;width:16px;height:16px}.slider-mini::-moz-range-thumb{background-size:16px 16px;width:16px;height:16px}#color1,#color2,#color3,#color4,#color5{width:100%;padding-top:70px}#colorvalue1,#colorvalue2,#colorvalue3,#colorvalue4,#colorvalue5{text-align:center;font-family:consolas,monospace;font-size:20px;font-weight:700}.dot{cursor:pointer;background-color:#ddd;border-radius:50%;width:13px;height:13px;margin:0 2px;transition:background-color .6s;display:inline-block}.active,.dot:hover{background-color:#aaa}.fade{-webkit-animation-name:fade;animation-name:fade;-webkit-animation-duration:1.5s;animation-duration:.5s}.prev,.next{cursor:pointer;color:#fff;background-color:#0003;border-radius:0 3px 3px 0;margin-top:-22px;padding:8px;font-size:18px;font-weight:700;transition:all .4s}.next{border-radius:3px 0 0 3px}.prev:hover,.next:hover{color:#000c;background-color:#fffc}@-webkit-keyframes fade{0%{opacity:.4}to{opacity:1}}@keyframes fade{0%{opacity:.4}to{opacity:1}}@media (width<=650px){#slidecontainer{width:150px}#rulecontainer{width:180px}}@media (width<=600px){#slidecontainer{width:200px;padding-top:20px;padding-bottom:20px}#rulecontainer{width:200px}}@media (width<=500px){.colorcolumn{width:100%}.satlightsliderscontainer{background-color:#0000;padding:10px 50px}}