#ColorPicker{text-shadow:1px 1px 1px #000;color:#aaa;cursor:default;z-index:100;padding:0 0 15px;font-family:arial,helvetica,sans-serif;position:relative}#ColorPicker br{clear:both;margin:0;padding:0}#ColorPicker input.hexInput:hover,#ColorPicker input.hexInput:focus{color:#ffd000}#ColorPicker input.hexInput{width:100px;float:left;color:#fff;cursor:text;background:0 0;border:0;outline:none;margin:0;padding:0 0 0 5px;font-family:courier,monospace;font-size:20px;transition-property:color;transition-duration:.25s;position:relative;top:-2px;left:2px}#ColorPicker div.hexBox{float:left;height:20px;width:20px;background:#fff;border:1px solid rgba(255,255,255,.5);border-radius:2px;margin:0 5px 0 1px;font-size:1px}#ColorPicker div.hexBox.active{border:1px solid #000;box-shadow:0 0 3px 2px #fff}#ColorPicker div.hexBox div{width:inherit;height:inherit}#ColorPicker div.hexClose{color:#fff;float:right;color:#666;cursor:pointer;padding-right:8px;font-size:20px;transition-property:color;transition-duration:.25s;position:relative;top:-3px;left:0;-webkit-transform:scaleY(.75);transform:scaleY(.75)}#ColorPicker div.hexClose:hover{text-shadow:0 0 20px #fff;color:#ff3dbd}#ColorPicker .icon-eyedropper{color:#bbb;float:right;cursor:pointer;padding:3px;font-size:20px;line-height:18px;transition-property:color;transition-duration:.25s;position:relative;top:1px;left:-10px}#ColorPicker .icon-eyedropper:hover{color:#71b8da}#ColorPicker canvas{position:relative;top:4px}#ColorPicker{-webkit-user-select:none;-webkit-transform-origin:50%;width:252px;z-index:100;text-shadow:1px 1px 1px #000;cursor:default;opacity:0;background:-webkit-gradient(linear,0 0,0 250,from(#444),color-stop(.1,#222),to(#222));background:-moz-linear-gradient(0deg,#444 0,#222 25px,#222 250px);border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.35);border-radius:3px;padding:10px 10px 20px;font-size:14px;transition-property:opacity;transition-duration:.25s;-webkit-animation-name:heartbeat-out;-webkit-animation-duration:.2s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:2;display:none;position:fixed;top:50px;left:400px;box-shadow:0 0 10px #000}@-webkit-keyframes heartbeat{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@-webkit-keyframes heartbeat-blink{0%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(.94)}to{-webkit-transform:scale(1)}}@-webkit-keyframes heartbeat-out{0%{-webkit-transform:scale(1)}to{-webkit-transform:scale(1.5)}}#ColorPicker.opened,#ColorPicker.opened{-webkit-transform-origin:50%;opacity:1;-webkit-animation-name:heartbeat;-webkit-animation-duration:.2s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:1;display:block}#ColorPicker.opened.blink,#ColorPicker.opened.blink-stall{-webkit-animation-name:none}#ColorPicker.opened.blink,#ColorPicker.opened.blink{-webkit-transform-origin:50%;-webkit-animation-name:heartbeat-blink;-webkit-animation-duration:.2s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:2}#ColorPicker.closed{opacity:0;transition-property:opacity;transition-duration:.25s;display:block}#ColorPicker:hover,#ColorPicker:hover{opacity:1}