*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}@font-face{font-family:'Lato';src:url('../fonts/lato-bold-webfont.eot');src:url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/lato-bold-webfont.woff') format('woff'),url('../fonts/lato-bold-webfont.ttf') format('truetype'),url('../fonts/lato-bold-webfont.svg#latobold') format('svg');font-weight:bold;font-style:normal}@font-face{font-family:'Lato';src:url('../fonts/lato-regular-webfont.eot');src:url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/lato-regular-webfont.woff') format('woff'),url('../fonts/lato-regular-webfont.ttf') format('truetype'),url('../fonts/lato-regular-webfont.svg#latoregular') format('svg');font-weight:normal;font-style:normal}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html{margin:0;height:100%}body{margin:0;height:100%}body #main{position:relative;width:100%;height:100%;overflow:hidden}body #main #background{position:absolute;width:100%;height:100%;color:rgba(255,255,255,0.2);font:1em 'Lato',sans-serif}body #main canvas{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body #main #start-overlay{position:absolute;left:0;top:0;width:100%;height:100%;padding:0 80px 0 5%}body #main #start-overlay .content{margin-top:50px;font:1em 'Lato',sans-serif;color:rgba(255,255,255,0.30000000000000004);width:100%;max-width:400px}body #main #start-overlay .content h1,body #main #start-overlay .content h2{margin-left:25px;font-size:1em;font-weight:normal;margin-bottom:5px;letter-spacing:.05em}body #main #start-overlay .content h2{font-size:1em;margin:20px 0 0 25px}body #main #start-overlay .content img.logo{width:90%;margin-bottom:30px}body #main #start-overlay .content img.draw{position:absolute;top:50px;right:100px;width:40%;max-width:900px}body #main #start-overlay .content p{margin:0 0 10px 25px;max-width:300px;font-size:.8em;line-height:1.2em;letter-spacing:.05em}body #main #start-overlay .content a{color:inherit}body #main #start-overlay .content form{margin-left:25px;display:inline}body #main #start-overlay .content form input{margin-top:10px}body #main #start-overlay .content button{margin-left:25px;width:120px;display:inline-block;color:#999;background:white;text-align:center;line-height:40px;height:40px;font-size:1.2em;font-weight:400;border:0;cursor:pointer;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;background-color:#fff;background-image:-webkit-linear-gradient(top,#fff,#ccc);background-image:-moz-linear-gradient(top,#fff,#ccc);background-image:-o-linear-gradient(top,#fff,#ccc);background-image:-ms-linear-gradient(top,#fff,#ccc);background-image:linear-gradient(top,#fff,#ccc);-webkit-transition:all .2s ease-out 1s linear;-moz-transition:all .2s ease-out 1s linear;-o-transition:all .2s ease-out 1s linear;-ms-transition:all .2s ease-out 1s linear;transition:all .2s ease-out 1s linear}body #main #start-overlay .content button:hover{background-color:#fff;background-image:-webkit-linear-gradient(top,#fff,#bfbfbf);background-image:-moz-linear-gradient(top,#fff,#bfbfbf);background-image:-o-linear-gradient(top,#fff,#bfbfbf);background-image:-ms-linear-gradient(top,#fff,#bfbfbf);background-image:linear-gradient(top,#fff,#bfbfbf);color:#808080}body #main #start-overlay .content button:active{color:#999}body #main #start-overlay .content button:focus{outline:0}body #main button#toggle{position:absolute;background:url("../images/toggle.png") center center;background-size:60px 50px;opacity:1;border:0;right:0;bottom:0;width:80px;height:50px;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out;transition:all .2s ease-out}body #main button#toggle.hidden{-webkit-transform:scale(-1);-moz-transform:scale(-1);-ms-transform:scale(-1);-o-transform:scale(-1);opacity:.1}body #main button#toggle:focus{outline:0}body #main #controls{font:1em 'Lato',sans-serif;color:#444;height:100%;position:absolute;top:0;right:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:top .3s ease-out;-moz-transition:top .3s ease-out;-o-transition:top .3s ease-out;-ms-transition:top .3s ease-out;transition:top .3s ease-out}body #main #controls *:focus{outline:0}body #main #controls>*{float:right}body #main #controls #preview{position:absolute;top:60px;right:-300px;width:220px;height:120px;margin-right:40px;-webkit-transition:right .2s ease-out;-moz-transition:right .2s ease-out;-o-transition:right .2s ease-out;-ms-transition:right .2s ease-out;transition:right .2s ease-out;overflow:hidden}body #main #controls #preview #gradient{position:absolute;width:100%;height:100%}body #main #controls #toolbar{position:absolute;right:0;top:0;height:100%;width:80px;min-height:370px;background:#d9d9d9;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.4);-moz-box-shadow:0 0 3px rgba(0,0,0,0.4);box-shadow:0 0 3px rgba(0,0,0,0.4)}body #main #controls #toolbar button{position:relative;width:60px;height:50px;margin:10px 0 0 10px;border:0;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4);-moz-box-shadow:0 0 1px rgba(0,0,0,0.4);box-shadow:0 0 1px rgba(0,0,0,0.4);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}body #main #controls #toolbar button.colorbg{background:#4297b2 url("../images/bg-color.png") center center;background-position:center center;background-size:60px 50px}body #main #controls #toolbar button.colorbg:hover{background:#3b879f url("../images/bg-color.png") center center;background-size:60px 50px}body #main #controls #toolbar button.colorbg:active,body #main #controls #toolbar button.colorbg.active{background:#34778d url("../images/bg-color.png") center center;background-size:60px 50px}body #main #controls #toolbar button.color{background:#4297b2 url("../images/line-color.png") center center;background-position:center center;background-size:60px 50px}body #main #controls #toolbar button.color:hover{background:#3b879f url("../images/line-color.png") center center;background-size:60px 50px}body #main #controls #toolbar button.color:active,body #main #controls #toolbar button.color.active{background:#34778d url("../images/line-color.png") center center;background-size:60px 50px}body #main #controls #toolbar button.size{background:#4297b2 url("../images/line-size.png") center center;background-position:center center;background-size:60px 50px}body #main #controls #toolbar button.size:hover{background:#3b879f url("../images/line-size.png") center center;background-size:60px 50px}body #main #controls #toolbar button.size:active,body #main #controls #toolbar button.size.active{background:#34778d url("../images/line-size.png") center center;background-size:60px 50px}body #main #controls #toolbar button.fade{background:#4297b2 url("../images/line-fade.png") center center;background-position:center center;background-size:60px 50px}body #main #controls #toolbar button.fade:hover{background:#3b879f url("../images/line-fade.png") center center;background-size:60px 50px}body #main #controls #toolbar button.fade:active,body #main #controls #toolbar button.fade.active{background:#34778d url("../images/line-fade.png") center center;background-size:60px 50px}body #main #controls #toolbar button.clear{background:#4297b2 url("../images/clear.png") center center;background-position:center center;background-size:60px 50px;position:absolute;bottom:70px;left:0}body #main #controls #toolbar button.clear:hover{background:#3b879f url("../images/clear.png") center center;background-size:60px 50px}body #main #controls #toolbar button.clear:active,body #main #controls #toolbar button.clear.active{background:#34778d url("../images/clear.png") center center;background-size:60px 50px}body #main #controls #toolbar button .reference{position:absolute;bottom:0;left:0;width:100%;background:red;height:4px;border-top:solid #53a5bf 1px;background:#4ca1bd}body #main #controls #toolbar button .reference .value{position:absolute;bottom:0;left:0;background:#87c0d3;height:4px;width:100%}body #main #controls .settings{opacity:0;position:absolute;background:#ededed;height:100%;width:300px;right:-300px;-webkit-transition:right .2s ease-out;-moz-transition:right .2s ease-out;-o-transition:right .2s ease-out;-ms-transition:right .2s ease-out;transition:right .2s ease-out;-webkit-box-shadow:-1px 0 2px rgba(0,0,0,0.2);-moz-box-shadow:-1px 0 2px rgba(0,0,0,0.2);box-shadow:-1px 0 2px rgba(0,0,0,0.2)}body #main #controls .settings header{height:35px;background:#34778d;border-bottom:solid #b3b3b3 1px;padding-left:10px}body #main #controls .settings header h1{color:#f2f2f2;font-size:1em;letter-spacing:1px;font-weight:normal;line-height:35px;margin:0;padding:0;padding-left:30px}body #main #controls .settings section{padding:200px 40px 0 40px}body #main #controls .settings section .slider{position:relative;margin-bottom:30px}body #main #controls .settings section .slider .value{position:absolute;bottom:-18px;right:5px;font:.7em 'Lato',sans-serif;color:#d1d1d1}body #main #controls .settings input[type="range"]{width:100%;appearance:none;-moz-appearance:none;-webkit-appearance:none;height:25px;padding:0;margin:0;background:white;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}body #main #controls .settings input[type="range"] .track-style{appearance:none;-moz-appearance:none;-webkit-appearance:none;height:25px;padding:0;margin:0;background:white;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}body #main #controls .settings input[type="range"] .thumb-style{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:#4297b2;height:40px;width:25px;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}body #main #controls .settings input[type="range"]::-moz-range-track{width:100%;appearance:none;-moz-appearance:none;-webkit-appearance:none;height:25px;padding:0;margin:0;background:white;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}body #main #controls .settings input[type="range"]::-webkit-slider-thumb{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:#4297b2;height:40px;width:25px;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}body #main #controls .settings input[type="range"]::-moz-range-thumb{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:#4297b2;height:40px;width:25px;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}body #main #controls .settings input[type="range"].h{background:-webkit-linear-gradient(left,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}body #main #controls .settings input[type="range"].h::-moz-range-track{background:-moz-linear-gradient(left,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}body #main #controls .settings input[type="range"].s{background-color:#cdcdcd;background-image:-webkit-linear-gradient(left,#cdcdcd,#000);background-image:-moz-linear-gradient(left,#cdcdcd,#000);background-image:-o-linear-gradient(left,#cdcdcd,#000);background-image:-ms-linear-gradient(left,#cdcdcd,#000);background-image:linear-gradient(left,#cdcdcd,#000)}body #main #controls .settings input[type="range"].s::-moz-range-track{background-color:#cdcdcd;background-image:-webkit-linear-gradient(left,#cdcdcd,#000);background-image:-moz-linear-gradient(left,#cdcdcd,#000);background-image:-o-linear-gradient(left,#cdcdcd,#000);background-image:-ms-linear-gradient(left,#cdcdcd,#000);background-image:linear-gradient(left,#cdcdcd,#000)}body #main #controls .settings input[type="range"].l{background-color:#000;background-image:-webkit-linear-gradient(left,#000,#fff);background-image:-moz-linear-gradient(left,#000,#fff);background-image:-o-linear-gradient(left,#000,#fff);background-image:-ms-linear-gradient(left,#000,#fff);background-image:linear-gradient(left,#000,#fff)}body #main #controls .settings input[type="range"].l::-moz-range-track{background-color:#000;background-image:-webkit-linear-gradient(left,#000,#fff);background-image:-moz-linear-gradient(left,#000,#fff);background-image:-o-linear-gradient(left,#000,#fff);background-image:-ms-linear-gradient(left,#000,#fff);background-image:linear-gradient(left,#000,#fff)}@media only screen and (max-width:45em){body #main #start-overlay .content,html #main #start-overlay .content{margin-top:30px}body #main #start-overlay .content img.draw,html #main #start-overlay .content img.draw{display:none}body #main #start-overlay .content img.logo,html #main #start-overlay .content img.logo{margin-bottom:10px}body #main #start-overlay .content h1,html #main #start-overlay .content h1,body #main #start-overlay .content h2,html #main #start-overlay .content h2,body #main #start-overlay .content p,html #main #start-overlay .content p{margin-left:10px;font-size:.7em}body #main #start-overlay .content h1,html #main #start-overlay .content h1,body #main #start-overlay .content h2,html #main #start-overlay .content h2{margin-top:10px}body #main #start-overlay .content form input,html #main #start-overlay .content form input{width:60px;margin:5px 0;margin-left:-10px}body #main #start-overlay .content p,html #main #start-overlay .content p{margin-bottom:5px;margin-right:50px}body #main #start-overlay .content button,html #main #start-overlay .content button{height:30px;width:90px;line-height:27px;font-size:1em;margin-left:10px}body #main button#toggle,html #main button#toggle{width:60px}body #main #controls #preview,html #main #controls #preview{right:-300px;width:140px;height:70px;margin-right:20px;-webkit-transition:right .2s ease-out;-moz-transition:right .2s ease-out;-o-transition:right .2s ease-out;-ms-transition:right .2s ease-out;transition:right .2s ease-out}body #main #controls #preview canvas#canvas_prev,html #main #controls #preview canvas#canvas_prev{position:absolute;width:100%;height:100%}body #main #controls #preview #gradient,html #main #controls #preview #gradient{position:absolute;width:100%;height:100%}body #main #controls #toolbar,html #main #controls #toolbar{width:60px;min-height:305px}body #main #controls #toolbar button,html #main #controls #toolbar button{width:46px;height:40px;margin:7px 0 0 7px}body #main #controls #toolbar button.colorbg,html #main #controls #toolbar button.colorbg{background-image:#4297b2;background-position:center center;background-size:46px 40px}body #main #controls #toolbar button.colorbg:hover,html #main #controls #toolbar button.colorbg:hover{background:#3b879f url("../images/bg-color.png") center center;background-size:46px 40px}body #main #controls #toolbar button.colorbg:active,html #main #controls #toolbar button.colorbg:active,body #main #controls #toolbar button.colorbg.active,html #main #controls #toolbar button.colorbg.active{background:#34778d url("../images/bg-color.png") center center;background-size:46px 40px}body #main #controls #toolbar button.color,html #main #controls #toolbar button.color{background-image:#4297b2;background-position:center center;background-size:46px 40px}body #main #controls #toolbar button.color:hover,html #main #controls #toolbar button.color:hover{background:#3b879f url("../images/line-color.png") center center;background-size:46px 40px}body #main #controls #toolbar button.color:active,html #main #controls #toolbar button.color:active,body #main #controls #toolbar button.color.active,html #main #controls #toolbar button.color.active{background:#34778d url("../images/line-color.png") center center;background-size:46px 40px}body #main #controls #toolbar button.size,html #main #controls #toolbar button.size{background-image:#4297b2;background-position:center center;background-size:46px 40px}body #main #controls #toolbar button.size:hover,html #main #controls #toolbar button.size:hover{background:#3b879f url("../images/line-size.png") center center;background-size:46px 40px}body #main #controls #toolbar button.size:active,html #main #controls #toolbar button.size:active,body #main #controls #toolbar button.size.active,html #main #controls #toolbar button.size.active{background:#34778d url("../images/line-size.png") center center;background-size:46px 40px}body #main #controls #toolbar button.fade,html #main #controls #toolbar button.fade{background-image:#4297b2;background-position:center center;background-size:46px 40px}body #main #controls #toolbar button.fade:hover,html #main #controls #toolbar button.fade:hover{background:#3b879f url("../images/line-fade.png") center center;background-size:46px 40px}body #main #controls #toolbar button.fade:active,html #main #controls #toolbar button.fade:active,body #main #controls #toolbar button.fade.active,html #main #controls #toolbar button.fade.active{background:#34778d url("../images/line-fade.png") center center;background-size:46px 40px}body #main #controls #toolbar button.clear,html #main #controls #toolbar button.clear{background-image:#4297b2;background-position:center center;background-size:46px 40px;position:absolute;bottom:70px;left:0}body #main #controls #toolbar button.clear:hover,html #main #controls #toolbar button.clear:hover{background:#3b879f url("../images/clear.png") center center;background-size:46px 40px}body #main #controls #toolbar button.clear:active,html #main #controls #toolbar button.clear:active,body #main #controls #toolbar button.clear.active,html #main #controls #toolbar button.clear.active{background:#34778d url("../images/clear.png") center center;background-size:46px 40px}body #main #controls .settings,html #main #controls .settings{width:180px;right:-180px}body #main #controls .settings header h1,html #main #controls .settings header h1{font-size:.8em;padding-left:10px}body #main #controls .settings section,html #main #controls .settings section{padding:130px 20px 0 20px}body #main #controls .settings input[type="range"],html #main #controls .settings input[type="range"]{height:15px}body #main #controls .settings input[type="range"]::-moz-range-track,html #main #controls .settings input[type="range"]::-moz-range-track{height:15px}body #main #controls .settings input[type="range"]::-webkit-slider-thumb,html #main #controls .settings input[type="range"]::-webkit-slider-thumb{height:30px;width:25px}body #main #controls .settings input[type="range"]::-moz-range-thumb,html #main #controls .settings input[type="range"]::-moz-range-thumb{height:30px;width:25px}}