html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; 	list-style-type:none; 	font-weight:400; 	font-family: Lato; font-weight: 400; }  body {line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }  nav ul {list-style:none; }  blockquote, q {quotes:none; }  blockquote:before, blockquote:after, q:before, q:after {content:'';content:none; }  a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent; 	text-decoration:none; }  ins {background-color:#ff9;color:#000;text-decoration:none; }  mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold; }  del {text-decoration: line-through; }  abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help; }  table {border-collapse:collapse;border-spacing:0; }  hr {display:block;height:1px;border:0;   border-top:1px solid #cccccc;margin:1em 0;padding:0; }  strong {font-weight:600;}  input, select {vertical-align:middle; }  /* apply a natural box layout model to all elements - this should make all elements "exclude" the padding when calculating widths*/ *, *:before, *:after {   -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  }   *  { -webkit-user-select:none; user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); } input, textarea  { -webkit-user-select:text;  -moz-user-select:text;-ms-user-select:text; } body {-webkit-text-size-adjust: none;}  body {background:#333;} #wrapper {position:fixed; top: 0px; left: 0px; right: 0px; bottom:0px; z-index:0;}   #controls {position:fixed; left: 30px; width: 202px; top:70px; padding: 10px; border-radius: 3px; background:#191919; z-index:99999; font-size: 0px; border-top:1px solid rgba(255,255,255,0.15); border-left:1px solid rgba(255,255,255,0.1); border-right:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.3); box-shadow:0px 0px 3px rgba(0,0,0,0.3);} #controls h2 {position:absolute; top:-20px; left: 0px;  display:inline-block; background:#111; padding: 4px 12px; border-radius: 3px 3px 0px 0px;  color:#fff !important; font-size: 14px !important; text-align:center;} #controls label {display:inline-block; position:relative; top: 4px; width: 60px; color:#ccc; font-size: 10px; font-weight: 300;} #controls select {border:1px solid #666; border-radius: 3px; outline:none; padding: 3px 10px; width: 118px; color:#ccc; background:#222; -webkit-appearance:none; -moz-appearance:none;appearance:none;} #controls .labWrap {margin-bottom: 3px;} #setCanvas,#setContain,#setCover  {width:56px; height: 56px; margin:10px 2px 14px 2px; border:1px solid #666; border-radius:3px; position:relative; display:inline-block; vertical-align:top;} #setCanvas span,#setContain span,#setCover span {position:absolute; left: 0px; bottom: -14px; letter-spacing:0.3px; color:#aaa; width: 56px; text-align:center; font-size: 8px;} #setCanvas {background:url(icon_set-canvas.png);} #setContain {background:url(icon_set-contain.png);} #setCover {background:url(icon_set-cover.png);}  #controls hr {margin:10px 0px 10px 0px; border-color:#333;} #controls input[type="button"] {background:#111; border:1px solid #666; border-radius: 2px; outline:none; padding: 4px; text-align:center; width: 100%; color:#ddd; margin-top: 10px;} #uploadImage {background:#300 !important;} #controls input[type="button"]:hover {background:#000; box-shadow:0px 0px 5px #000;} #controls input[type="button"]:active {background:#000; color:#fff; box-shadow:0px 0px 5px #999;}   #topnav {position:fixed; padding: 5px; top: 0px; left: 0px; right: 0px; height: 30px; background:#111; z-index:9999;} #topnav label {display:inline-block; font-size: 10px; color:#bbb; padding:0px 10px;} #topnav input[type="text"],#controls input[type="text"] {font-size: 11px; border:none; padding: 0px; background:none; outline:none; color:#ccc; width: 28px; text-align:center; margin:0px -5px;} #topnav input[type="text"]:active,#topnav input[type="text"]:focus {color:#fff;} #controls input[type="text"] {text-align:left; padding-left: 5px; width:130px;} #controls input[type="text"]:active,#controls input[type="text"]:focus {color:#fff;} #topnav .seperator {border-left:1px dotted #444;border-right:1px dotted #666; position:absolute; height: 21px; width: 2px; margin-left: -10px;} #topnav input[type="button"] {outline:none; background:none; border:1px solid #444; border-radius: 2px; color:#ccc; margin-right: 30px;} #topnav input[type="button"]:hover {box-shadow:0px 0px 4px #444; color:#eee;} #topnav input[type="button"]:active {box-shadow:0px 0px 4px #666; background:#000; color:#fff;} #topnav .fa-unlock-alt, #topnav .fa-lock {color:#ccc; font-size: 12px; margin-left:24px; margin-right: 10px; position:relative; top: 1px; cursor:pointer} #topnav .fa-unlock-alt:hover, #topnav .fa-lock:hover {color:#fff;} #topnav .fa-unlock-alt {display:none;}  #canvas {position:absolute; top: 0px; left: 0px;} #clip {position:absolute; top:0px; left: 0px; z-index: 100; opacity:0; cursor:move; background-size:100% 100% !Important;} #cropHandles {position:absolute; z-index:200; border:1px dotted rgba(255,255,255,0.5); display:none; z-index:99999;} #cropHandles i {background:#222; font-size: 22px; color:#eee; padding:3px 5px 5px 5px; border-radius: 3px; position:absolute; text-align:Center; line-height: 1; } #cropTop {left:50%; margin-left:-15px; margin-top:-15px;top:0px; cursor:ns-resize;} #cropBottom {left:50%; margin-left:-15px; bottom:-0px; margin-bottom: -15px; cursor:ns-resize;} #cropLeft {top:50%; margin-top:-15px; left:-0px; margin-left:-15px; cursor:ew-resize; padding-left: 8px !Important; padding-top:5px !important;} #cropRight {top:50%; margin-top:-15px; right:-0px; margin-right:-15px; cursor:ew-resize; padding-right: 8px !Important;  padding-top:5px !important;} #cropInfo {position:absolute; right: 0px; top:-24px; background:#111; border-radius: 2px; color:#ddd; font-size: 11px; padding: 4px 14px;}  #scaleHandles {position:absolute; z-index:200; border:1px dotted rgba(255,255,255,0.5); display:none; z-index:99999;} #scaleHandles i {background:#222; font-size: 22px; color:#eee; padding:3px 5px 5px 5px; border-radius: 3px; position:absolute; text-align:Center; line-height: 1; } #scaleTop {left:50%; margin-left:-15px; margin-top:-15px;top:0px; cursor:ns-resize;} #scaleBottom {left:50%; margin-left:-15px; bottom:-0px; margin-bottom: -15px; cursor:ns-resize;} #scaleLeft {top:50%; margin-top:-15px; left:-0px; margin-left:-15px; cursor:ew-resize; padding-left: 8px !Important; padding-top:5px !important;} #scaleRight {top:50%; margin-top:-15px; right:-0px; margin-right:-15px; cursor:ew-resize; padding-right: 8px !Important;  padding-top:5px !important;} #scaleCorner {bottom:-10px; right:0px; transform:rotate(-45deg); margin-top:-10px; margin-right:-10px; cursor:nwse-resize;  padding-top:4px !important;} #scaleInfo {position:absolute; right: 0px; top:-24px; background:#111; border-radius: 2px; color:#ddd; font-size: 11px; padding: 4px 14px;} .fa-unlock-alt {display:none;} #scaleHandles i span, #cropHandles i span {position:absolute; width: 30px; height: 30px; background:rgba(255,0,0,0.2); top:0px; left:0px;}  #imgStart {position:fixed; top:0px; right: 0px; bottom:0px; left:0px; background:rgba(0,0,0,0.85); z-index:99999;} #imageLoader {width: 100%; background:red; opacity:0.01; height: 100%; position:absolute;  } #fileLoader {width: 94%; pointer-events:none; position:absolute; left: 3%; top: 3%; height: 94%;  border: 4px dashed #999;  color:#fff;border-radius: 12px; text-align:center; font-size: 32px; letter-spacing:2px; padding-top: 46%;}  #imgInfo {position:fixed; bottom: 10px; left: 10px; background:rgba(0,0,0,0.6); padding: 7px 10px; border-radius:3px; color:#aaa; font-size: 14px; font-weight: 400;} #imgInfo .key {display:inline-block; background:rgba(255,255,255,0.1); border:1px solid #555; border-radius: 2px; padding: 5px 12px; font-size: 12px; margin-right: 5px;} #imgInfo .arrKeys {display:inline-block; width: 60px; left: 10px; position:relative; top:-18px;}  #imgInfo .arrKeys .fa {display:inline-block; background:rgba(255,255,255,0.1); border:1px solid #555; border-radius: 2px; width: 12px; height: 12px; font-size: 9px; padding: 1px; position:absolute;}  #imgInfo .arrKeys .fa-arrow-up {left: 15px; top: 0px;} #imgInfo .arrKeys .fa-arrow-right {left:0px; top: 15px;} #imgInfo .arrKeys .fa-arrow-down {left: 15px; top: 15px;} #imgInfo .arrKeys .fa-arrow-left {left:30px; top: 15px;}   #zoom {width:190px; position:absolute; height: 6px; border-radius: 6px; background:#222; top: 12px; border:1px solid #444; left: 600px;} #zoomBar {position:absolute; width: 10px; height: 20px; background:#333; top:-7px; border-radius:10px; box-shadow:inset 4px 2px 5px 2px rgba(255,255,255,0.1); border:1px solid rgba(0,0,0,0.3); cursor:ew-resize; left: 90px;} #zoomBar:hover {background:#295ad2;} #zoomVal {position:absolute; right: -34px; top: -5px;}  #saving {position:fixed; z-index:999999; background:rgba(0,0,0,0.6); padding-top: 50%; right: 0px; height: 100%; left: 0px; top: 0px;} #saving span {display:block; width: 100%; font-size: 24px; color:#fff; text-align:center;}  #rgeAlert {display:none; width: 100%; height: 100%; position:fixed; top: 0px; left: 0px; z-index:99999; background:rgba(0,0,0,0.5);} #alertbox {width: 500px; min-height: 20px; border: 2px solid rgba(255,255,255,0.1); border-radius: 15px; padding: 20px; margin-left: auto; margin-right: auto; position:relative; background:#000; font-family:'Lato',Helvetica;} #alertbox h2 {max-width: 350px; white-space:pre-line; color:#eee; font-size: 14px; font-weight: 400; line-height: 20px; padding-left: 60px; padding-bottom: 20px; font-family:'Lato';} #alertbox i {position:absolute; left: 26px; top: 27px; font-size: 32px; color:#fff;} #alertbox #alertconfirm {color:#eee; background:#002222; display:inline-block; padding: 3px 15px 3px 15px; border:1px solid #006600; border-radius: 3px; text-shadow: 1px 1px 2px #333; position: absolute; right: 12px; bottom: 12px; cursor:pointer;} #alertbox #alertcancel {color:#eee; background:#551111; display:inline-block; padding: 3px 15px 3px 15px; border:1px solid #a71414; border-radius: 3px; text-shadow: 1px 1px 2px #333; position: absolute; right: 120px; bottom: 12px; cursor:pointer;} #alertbox #alertconfirm:hover , #alertbox #alertcancel:hover {background:#111; color:#fff;} #alertbox textarea { background: #222; border: 2px solid #444; padding: 10px; margin-top: 10px; margin-bottom: -28px; color: #fff; border-radius: 5px; width: 300px;} #alertbox #rgeFileMove {width: 200px; font-size: 16px; margin-top: 10px; outline:0;} #alertbox #rgeFileName {width: 200px; font-size: 16px;margin-bottom: 10px; margin-right: 5px; margin-top: 10px; padding: 3px 9px; border:0px; border-radius: 20px; outline:0;} #alertbox span {color:#999; position:relative; top: 0px; display:inline-block; } .cp-app {z-index:99999; left: 200px !important;} #canvasColor {padding: 2px 6px !Important; margin-left: 5px; border:5px solid #191919 !important;}