html{background:#f3f3f3}body{margin:0 auto;font-family:sans-serif}form{margin:0;box-shadow:0 0 5px rgba(0,0,0,.2)}fieldset{margin:0;padding:0;border:none}#instructions{padding:5px;background:#8cabe6;font-size:14px;color:#333}#preview_container{position:relative;overflow:hidden;background-color:#fff;background-image:-webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px) , -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px);background-image:-moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px) , -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px);background-image:-ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px) , -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px);background-image:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px) , linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px);background-size:10px 10px}#preview_container::before{position:absolute;display:block;top:10vh;width:60%;padding:0 20%;content:"Drop Image Here";text-align:center;font-size:8em;color:#dedede}#preview_container.over{background-color:#ffc}#preview_container.dropped::before{content:""}#preview_cropbox.over{background-color:#ffc;background-image:-webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px) , -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px);background-image:-moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px) , -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px);background-image:-ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px) , -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px);background-image:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px) , linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0) 9px,rgba(0,0,0,.05) 10px,rgba(0,0,0,0) 10px);background-size:10px 10px}#drag_corner{position:absolute;margin:0 -3px -3px 0;right:0;bottom:0;border-style:solid;border-width:0 0 1em 1em;border-color:transparent transparent #8cabe6 transparent;cursor:se-resize}#preview_cropbox{position:absolute;left:0;top:0;outline:3px solid #8cabe6;content:"";cursor:move;transition:background .3s;transition-delay:.25s}#preview_cropbox:hover{background:rgba(255,0,0,.1);transition-delay:0s}#preview_image{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}#output{position:absolute;left:0;top:0;display:none;width:100%;height:100%;background:rgba(255,255,255,.95)}.display-output #output{display:block}.display-output #output::after{position:absolute;bottom:.5em;width:100%;content:attr(data-width) ' x ' attr(data-height) ' pixels';text-align:center;font-size:.8em;color:#666}.display-output #controls,.display-output #rotate{display:none!important}#output img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;box-shadow:0 0 10px rgba(0,0,0,.5)}#controls{display:none;width:100%;background:#2e5096;color:#bed0f3}#controls>div{display:table-cell;padding:.2em 0;width:50%;vertical-align:middle;white-space:nowrap;text-align:center;font-size:.9em}#controls input[type="number"]{width:50px}.range{display:table;margin-right:.5em;background:#f5f5f5;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border-radius:4px}.range input{display:table-cell;padding:3px 0;width:90%;border:none;cursor:ew-resize}.range output{display:table-cell;padding:3px 5px 2px;min-width:48px;width:1%;background:#999;border-radius:0 4px 4px 0;vertical-align:middle;text-align:right;color:#fff}#buttons{display:none;padding:.2em 0;background:#8cabe6;text-align:center}button{padding:.4em 1em;height:28px;background:#ccc;border-width:1px;font-size:.8em;color:#000}#apply_scale_crop.active,#apply_crop.active{background:#f0f0f0}#rotate::before{margin:-2px 4px 0 0;content:"\27f3";color:#666}#cancel{display:none}#cancel::before{margin:-2px 4px 0 0;content:"\2717";color:#c33}.display-output #cancel{display:inline-block}#version{float:left;font-size:10px;color:#999}#copyright{text-align:right;font-size:10px;color:#999}#copyright a:link,#copyright a:visited{color:inherit}