#hslpicker{margin:0 auto}.color-tiles:before,.bgs:before,.slider:before{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2)),-webkit-linear-gradient(45deg, rgba(255,255,255,0.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2));background-image:-moz-linear-gradient(45deg, rgba(255,255,255,0.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2)),-moz-linear-gradient(45deg, rgba(255,255,255,0.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2));background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2)),-o-linear-gradient(45deg, rgba(255,255,255,0.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2));background-image:linear-gradient(45deg, rgba(255,255,255,0.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2)),linear-gradient(45deg, rgba(255,255,255,0.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,0.2));-webkit-background-size:20px 20px;-moz-background-size:20px 20px;-o-background-size:20px 20px;background-size:20px 20px;background-position:0px 0px, 10px 10px}.color-tiles:before,.bgs:before,.slider:before,.color-tiles:after,.bgs:after,.slider:after{content:"";z-index:-2}.color-tiles:after,.bgs:after,.slider:after{background:rgba(0,0,0,0.3);position:absolute;top:-3px;bottom:-3px;left:-4px;right:-4px;-webkit-box-shadow:rgba(0,0,0,0.3) 0 1px inset,rgba(255,255,255,0.1) 0 1px;-moz-box-shadow:rgba(0,0,0,0.3) 0 1px inset,rgba(255,255,255,0.1) 0 1px;box-shadow:rgba(0,0,0,0.3) 0 1px inset,rgba(255,255,255,0.1) 0 1px}.color-tiles:before,.bgs:before,.slider:before{position:absolute;top:0;bottom:0;left:0;right:0}.color-tiles{position:relative;width:119px;height:119px;margin-bottom:15px;margin-right:10px;margin-top:3px;float:left;background-color:rgba(255,255,255,0);-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-color 0.1s;transition:background-color 0.1s;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}.color-tiles:after{-moz-border-radius-topright:8px;-webkit-border-top-right-radius:8px;border-top-right-radius:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-right-radius:8px;border-bottom-right-radius:8px}.color-tiles:before{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.color-tiles .tile{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.color-tiles div .tile{position:absolute;top:0;bottom:0;left:0;right:0}.color-tiles div .tile,.color-tiles .bg{-webkit-box-shadow:rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 1px inset,rgba(0,0,0,0.4) 0 -1px 1px inset,rgba(0,0,0,0.4) 0 1px 1px;-moz-box-shadow:rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 1px inset,rgba(0,0,0,0.4) 0 -1px 1px inset,rgba(0,0,0,0.4) 0 1px 1px;box-shadow:rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 1px inset,rgba(0,0,0,0.4) 0 -1px 1px inset,rgba(0,0,0,0.4) 0 1px 1px}.foreground,.background{position:absolute;width:119px;height:119px}.foreground{z-index:2}.background{background-color:rgba(255,255,255,0)}.expose{-webkit-transition:all 0.15s ease-out;-moz-transition:all 0.15s ease-out;-o-transition:all 0.15s ease-out;transition:all 0.15s ease-out;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;position:absolute;top:5px;right:5px;width:16px;height:16px;z-index:2;cursor:pointer;opacity:.4;background:rgba(0,0,0,0.8)}.expose:before,.expose:after{content:"";position:absolute;height:5px;width:5px}.expose:before{border:solid 2px rgba(255,255,255,0.8);border-bottom:0;border-right:0;top:3px;left:3px}.expose:after{border:solid 2px rgba(255,255,255,0.8);border-top:0;border-left:0;bottom:3px;right:3px}.color-tiles:hover .expose{opacity:1}.exposed .expose,.expose:hover{width:20px;height:20px;top:3px;right:3px}.exposed .expose:before,.exposed .expose:after{height:4px;width:4px}.exposed .expose:before{border:solid 2px rgba(255,255,255,0.8);border-top:0;border-left:0;top:3px;left:3px}.exposed .expose:after{border:solid 2px rgba(255,255,255,0.8);border-bottom:0;border-right:0;bottom:3px;right:3px}.background-color{z-index:0;cursor:pointer;background-color:rgba(255,255,255,0)}.exposed .bg{left:0}.exposed .foreground{left:29px;top:29px;width:90px;height:90px}.exposed .background{right:29px;width:90px;height:90px;-webkit-box-shadow:rgba(0,0,0,0.8) 0 1px 10px;-moz-box-shadow:rgba(0,0,0,0.8) 0 1px 10px;box-shadow:rgba(0,0,0,0.8) 0 1px 10px}.exposed .foreground{-webkit-box-shadow:rgba(0,0,0,0.8) 0 1px 10px;-moz-box-shadow:rgba(0,0,0,0.8) 0 1px 10px;box-shadow:rgba(0,0,0,0.8) 0 1px 10px;cursor:pointer}.exposed .selected:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;z-index:1;-webkit-box-shadow:rgba(255,255,255,0.5) 0 0 0px 1px inset,rgba(0,0,0,0.5) 0 0 0 5px inset;-moz-box-shadow:rgba(255,255,255,0.5) 0 0 0px 1px inset,rgba(0,0,0,0.5) 0 0 0 5px inset;box-shadow:rgba(255,255,255,0.5) 0 0 0px 1px inset,rgba(0,0,0,0.5) 0 0 0 5px inset;cursor:pointer}.background,.foreground{-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}.bgs{position:absolute;left:-34px;width:30px}.bgs,.bgs:before,.bgs:after{-moz-border-radius-topleft:6px;-webkit-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-radius-bottomleft:6px;-webkit-border-bottom-left-radius:6px;border-bottom-left-radius:6px}.bgs:after{right:0px}.exposed .bgs div{left:0}.bgs div{width:30px;height:29px;position:relative;margin-top:1px;cursor:pointer}.bgs div:first-child{-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;margin-top:0}.bgs div:last-child{-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.bgs .none{background-color:rgba(255,255,255,0)}.bgs .light{background:#fff}.bgs .dark{background:#000}.bgs .random{background:#007fff}.bgs .random:after{content:"";height:6px;width:6px;position:absolute;top:0;left:0;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:rgba(0,0,0,0.8) 6px 5px,rgba(255,255,255,0.4) 6px 6px 1px,rgba(0,0,0,0.8) 18px 5px,rgba(255,255,255,0.4) 18px 6px 1px,rgba(0,0,0,0.8) 12px 12px,rgba(255,255,255,0.4) 12px 13px 1px,rgba(0,0,0,0.8) 6px 19px,rgba(255,255,255,0.4) 6px 20px 1px,rgba(0,0,0,0.8) 18px 19px,rgba(255,255,255,0.4) 18px 20px 1px;-moz-box-shadow:rgba(0,0,0,0.8) 6px 5px,rgba(255,255,255,0.4) 6px 6px 1px,rgba(0,0,0,0.8) 18px 5px,rgba(255,255,255,0.4) 18px 6px 1px,rgba(0,0,0,0.8) 12px 12px,rgba(255,255,255,0.4) 12px 13px 1px,rgba(0,0,0,0.8) 6px 19px,rgba(255,255,255,0.4) 6px 20px 1px,rgba(0,0,0,0.8) 18px 19px,rgba(255,255,255,0.4) 18px 20px 1px;box-shadow:rgba(0,0,0,0.8) 6px 5px,rgba(255,255,255,0.4) 6px 6px 1px,rgba(0,0,0,0.8) 18px 5px,rgba(255,255,255,0.4) 18px 6px 1px,rgba(0,0,0,0.8) 12px 12px,rgba(255,255,255,0.4) 12px 13px 1px,rgba(0,0,0,0.8) 6px 19px,rgba(255,255,255,0.4) 6px 20px 1px,rgba(0,0,0,0.8) 18px 19px,rgba(255,255,255,0.4) 18px 20px 1px}.slider{-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-color 0.1s;transition:background-color 0.1s;position:relative;width:381px;margin:3px 5px 10px;position:relative;cursor:pointer;height:20px;float:left;clear:left}.slider,.slider>div{width:381px;height:20px;-webkit-box-shadow:rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 1px inset,rgba(0,0,0,0.4) 0 -1px 1px inset,rgba(0,0,0,0.4) 0 1px 1px,#000 0 0 2px 1px;-moz-box-shadow:rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 1px inset,rgba(0,0,0,0.4) 0 -1px 1px inset,rgba(0,0,0,0.4) 0 1px 1px,#000 0 0 2px 1px;box-shadow:rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 1px inset,rgba(0,0,0,0.4) 0 -1px 1px inset,rgba(0,0,0,0.4) 0 1px 1px,#000 0 0 2px 1px}.slider>div{-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px}.slider:after,.slider:before{-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px}.slider:hover .handle{background-color:rgba(255,255,255,0.1)}.handle{position:absolute;cursor:pointer;z-index:2;top:-1px;content:" ";width:22px;height:22px;z-index:1;background-color:#ddd;-webkit-transition:background-color 0.4s;-moz-transition:background-color 0.4s;-o-transition:background-color 0.4s;transition:background-color 0.4s;background-image:-webkit-gradient(radial, 50% 0%, 0, 50% 0%, 15, color-stop(0%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0.2)));background-image:-webkit-radial-gradient(top center, circle, rgba(255,255,255,0.9),rgba(255,255,255,0.2) 15px);background-image:-moz-radial-gradient(top center, circle, rgba(255,255,255,0.9),rgba(255,255,255,0.2) 15px);background-image:-o-radial-gradient(top center, circle, rgba(255,255,255,0.9),rgba(255,255,255,0.2) 15px);background-image:radial-gradient(top center, circle, rgba(255,255,255,0.9),rgba(255,255,255,0.2) 15px);-webkit-border-radius:1em;-moz-border-radius:1em;-ms-border-radius:1em;-o-border-radius:1em;border-radius:1em;-webkit-box-shadow:#fff 0px 1px 1px inset,rgba(0,0,0,0.4) 0px -1px 1px inset,rgba(0,0,0,0.4) 0px 1px 4px 0px,rgba(0,0,0,0.6) 0 0 2px;-moz-box-shadow:#fff 0px 1px 1px inset,rgba(0,0,0,0.4) 0px -1px 1px inset,rgba(0,0,0,0.4) 0px 1px 4px 0px,rgba(0,0,0,0.6) 0 0 2px;box-shadow:#fff 0px 1px 1px inset,rgba(0,0,0,0.4) 0px -1px 1px inset,rgba(0,0,0,0.4) 0px 1px 4px 0px,rgba(0,0,0,0.6) 0 0 2px}.sliders{overflow:hidden;*zoom:1}.sliders input{width:40px;text-align:right;font-size:.9em;padding:3px 4px;float:left;margin-left:8px}.color-inputs{clear:left}.color-inputs input{text-align:center;margin-left:2px}.color-inputs input:first-child{margin-left:0}input{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;-moz-box-shadow:rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;box-shadow:rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;border:0;padding:8px 6px;font-size:1em;background-color:rgba(0,0,0,0.3);color:rgba(255,255,255,0.8);text-shadow:rgba(0,0,0,0.5) 0 2px 1px}input:focus{outline:none;color:#fff}#hex{width:5.7em}#rgba{width:14em}#hsla{width:15em}input.error{-webkit-box-shadow:rgba(255,127,127,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;-moz-box-shadow:rgba(255,127,127,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;box-shadow:rgba(255,127,127,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;background-color:rgba(102,0,0,0.3);color:#ff0f0f}@font-face{font-family:"AdelleBasic";src:url('/fonts/adellebasic_bold-webfont.ttf') format('truetype'), url('/fonts/adellebasic_bold-webfont.svg') format('svg'), url('/fonts/adellebasic_bold-webfont.woff') format('woff'), url('/fonts/adellebasic_bold-webfont.eot') format('embedded-opentype')}@font-face{font-family:"CaviarDreams";src:url('/fonts/caviardreams-webfont.ttf') format('truetype'), url('/fonts/caviardreams-webfont.svg') format('svg'), url('/fonts/caviardreams-webfont.woff') format('woff'), url('/fonts/caviardreams-webfont.eot') format('embedded-opentype')}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{text-align:center;-webkit-background-size:80px 80px;-moz-background-size:80px 80px;-o-background-size:80px 80px;background-size:80px 80px;background-image:-webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(25%, rgba(0,0,0,0.1)), color-stop(25%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.1)), color-stop(75%, rgba(0,0,0,0.1)), color-stop(75%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left top, rgba(0,0,0,0.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));background-image:-moz-linear-gradient(left top, rgba(0,0,0,0.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));background-image:-o-linear-gradient(left top, rgba(0,0,0,0.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));background-image:linear-gradient(left top, rgba(0,0,0,0.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));background-color:#2a2a2a}body{background:none;padding:0px 0px 40px;display:inline-block;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif}body>div,body>section,body>header{width:570px;margin:0 auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.heading-font,h1,h2,h3{font-family:'AdelleBasic', sans;font-weight:normal}.inset-box-shadow,pre,section{-webkit-box-shadow:rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;-moz-box-shadow:rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;box-shadow:rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset}h1,h2,h3{color:#eee;font-weight:normal}h3{font-size:1.6em;margin:.8em 0 1em}h2{text-align:center;font-size:2em;margin:.2em 0 0;border-bottom:1px solid rgba(0,0,0,0.3);padding-bottom:.6em}h2+p{border-top:1px solid rgba(255,255,255,0.05);padding-top:1.2em}h1{text-align:center;font-size:3.5em;margin:0em 0 .1em;line-height:1em;text-transform:uppercase;word-spacing:.05em;font-weight:bold}h1:focus{outline:0}header p:first-child{font-style:normal;text-transform:uppercase;font-family:"CaviarDreams", sans;display:block;text-shadow:#000 1px 1px 0px;color:#eee;letter-spacing:.1em;margin:1em 0 .3em;padding:0;font-size:1.25em}header p:first-child:before,header p:first-child:after{content:' ';width:4.5em;height:1px;display:inline-block;border-bottom:1px solid #888;position:relative;top:-0.35em;margin:0 .5em}header p{font-size:.7em;text-shadow:#000 0 1px;font-family:"Caviar Dreams", sans;font-style:normal;display:block;margin:0em 0 1.2em;color:#aaa;text-transform:uppercase;font-weight:normal;letter-spacing:.5em}header a{border-bottom:0}a{-webkit-transition:color 0.5s;-moz-transition:color 0.5s;-o-transition:color 0.5s;transition:color 0.5s;color:#eee;text-decoration:none}p{margin:0;padding:0 0 1.5em;line-height:1.5em}#hslpicker{margin:1em 0 2em}.frame{margin-bottom:1.5em}code{font-size:0.95em;font-family:menlo, monaco, 'andale mono', 'courier new', fixed;display:inline-block;background:rgba(0,0,0,0.3);padding:0 .4em;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}pre{background:rgba(0,0,0,0.3);padding:1em;margin:0 0 1.8em;width:auto;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}pre code{background:none}.hide{display:none}section{color:#c6c6c6;font-size:.9em;line-height:1.45em;margin-top:1em;padding-top:1em;text-align:left;overflow:hidden;margin-top:2em;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;padding:2em 2.5em .5em;background:rgba(0,0,0,0.2)}section p{font-family:"Lucida sans", Helvetica, Arial, sans}section strong{color:#ccc}section a.why{color:#444;text-shadow:#000 0 0 2px;text-transform:lowercase;display:block;width:3.5em;margin:0 auto;text-align:center;display:none}section h2,section h3{text-shadow:rgba(0,0,0,0.7) 0 2px 2px}footer{color:#555;text-shadow:rgba(0,0,0,0.5) 0 1px 1px;font-size:13px}footer p{padding-bottom:.5em}footer a{display:inline-block;color:#666;line-height:1.1em;border-color:#555;position:relative;margin-left:.2em}footer a+a{margin-left:1em}footer a+a:before{content:" ";display:block;position:absolute;left:-0.7em;top:0;border-left:1px solid rgba(0,0,0,0.7);-webkit-box-shadow:rgba(255,255,255,0.08) 1px 0 inset;-moz-box-shadow:rgba(255,255,255,0.08) 1px 0 inset;box-shadow:rgba(255,255,255,0.08) 1px 0 inset;width:1px;height:1.3em}.url{display:inline-block;padding:0 8px 2px;text-shadow:inherit;text-align:center;line-height:2em;cursor:text;margin:0;border:0;width:168px;color:#666;-webkit-border-radius:0px;-moz-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;border-radius:0px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background:none}.url:focus,.url:hover{background:rgba(0,0,0,0.05);-webkit-box-shadow:rgba(0,0,0,0.4) 0 1px 10px 0px inset;-moz-box-shadow:rgba(0,0,0,0.4) 0 1px 10px 0px inset;box-shadow:rgba(0,0,0,0.4) 0 1px 10px 0px inset;color:#999}