@font-face {font-family: 'VeraMono'; src: url('font/VeraMono.ttf'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'VeraMono'; src: url('font/VeraMono-Bold.ttf'); font-weight: bold; font-style: normal;}
@font-face {font-family: 'VeraMono'; src: url('font/VeraMono-Italic.ttf'); font-weight: normal; font-style: italic;}
@font-face {font-family: 'VeraMono'; src: url('font/VeraMono-Bold-Italic.ttf'); font-weight: bold; font-style: italic;}
body {margin:0;overflow-y:scroll;font-family:arial;font-family:"VeraMono";background:black;overflow-x:hidden;}
.canvas-wrap {}
.state {display:none}
canvas {}
.overlay {position:fixed;height:100%;width:100%;z-index:50;display:none;}
.overlay .fadeout {width:100%;height:100%;background:#000d;}
.overlay .text {left:50%;top:50%;position:fixed;transform: translate(-50%, -50%);text-align:center;font-size:36px;color:white;}
.overlay .loader {width:64px;margin-top:20px;}
.overlay .close {
	position:absolute;right:0;top:0;color:white;font-size:31px;width:40px;height:40px;text-align:center;cursor:pointer;user-select:none;
	background:#a00c;border-radius:0 0 0 5px;
}
.overlay .close:hover {cursor:pointer;}
.image-drop-wrap {
	padding:50px;width:100%;height:100%;
	box-sizing:border-box;
	position:fixed;
}
#image-drop {
	width:100%;height:100%;
	box-sizing:border-box;
	background:white;cursor:pointer;border-radius:5px;
}
#image-drop.drag {
	background:#0a0c;
}
@keyframes example {
  0% {color:blue;}
  100% {color:red;}
}
@keyframes rotate {
}

.done-overlay a {
	color:white;margin-top:16px;display:inline-block;padding:15px 20px;background:#0a0c;border-radius:5px;
	text-decoration:none;font-size:24px;
}
.done-overlay a:hover {cursor:pointer;}

.loading-overlay {}

.clearfix {clear:both;}

.less-info {display:none;}
.image-drop-text {pointer-events:none;left:50%;top:50%;position:fixed;transform: translate(-50%, -50%);color:black;font-size:36px;
}
.image-state .more {display:none;margin-top:0;}
.image-state .desc-caption {font-weight:bold;margin-top:5px;display:inline-block;}
.image-state .desc-title {display:inline-block;min-width:137px;}
.image-state .desc-title:after {content:" =";float:right;padding-right:7px;}
.image-state .desc {font-size:14px;}
.image-props {padding:8px;background:#eee;font-size:14px;padding-bottom:8px;}
.image-props .group {float:left;margin-right:20px;margin-bottom:6px;height:62px;}
.image-props .group > div{margin-bottom:2px;}
.image-props .label {display:inline-block;}
.image-state form {}
.image-state .title {font-weight:bold;padding-bottom:1px;}
.image-state .unit {display:inline-block;padding-left:2px;}
.image-state .name {max-width:140px;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;}
.image-state input {border-radius:3px;border:1px solid #888;}
.image-state input[type=text]:read-only {background:#ddd;}
.image-state input[type=text] {background:white;width:70px;padding:1px 2px;text-align:center;}
.image-state input[type=button],
.image-state input[type=submit] {background:#007;border-color:#006;color:white;cursor:pointer;height:41px;width:80px;font-weight:bold;
	margin-left:-5px;
	margin-right:-5px;
}
.image-state input[type=submit] {width:auto;padding-left:12px;padding-right:12px;margin-top:19px;}
.image-state input[type=button].another {background:white;color:#111;width:auto;padding-left:12px;padding-right:12px;border-color:#111;margin-top:19px;}
.image-state .group-size input[type=text] {text-align:center;}
.image-state .group-padding input[type=text] {width:60px;text-align:center;}
.image-state .group-aspect input[type=text] {width:60px;text-align:center;}
.image-state .group-dpi input[type=text] {width:60px;text-align:center;}