html
{
	font-family : Arial,Helvetica,sans-serif;
	background-color : #fff;
}



div.debug
{
	display : none;
	position : absolute;
	top : 20px;
	left : 20px;
	background-color : #efe;
	padding : 10px;
	border : 1px solid #ddd;
}

div.save
{
	position : absolute;
	bottom : 8px;
	right : 20px;
	background-color : #efe;
	padding : 8px;
	border : 1px solid #ddd;
}

div.save button
{
	display : block;
	margin : 10px 10px 10px;
	border : 1px solid #888;
	font-size : 16px;
	font-weight : bold;
	border-radius : 5px;
	width : 164px;
	font-family : Arial,Helvetica,sans-serif;
}

div.close
{
	position : absolute;
	bottom : 70px;
	right : 20px;
	background-color : #ff0000;
	padding : 8px;
	border : 1px solid #ddd;
}

div.close button
{
	display : block;
	margin : 10px 10px 10px;
	border : 1px solid #888;
	font-size : 16px;
	font-weight : bold;
	border-radius : 5px;
	width : 164px;
	font-family : Arial,Helvetica,sans-serif;
}

div.controls
{
	position : absolute;
	top : 8px;
	right : 20px;
	background-color : #eef;
	padding : 10px;
	border : 1px solid #ddd;
}

div.controls button
{
	display : block;
	margin : 10px 10px 10px;
	border : 1px solid #888;
	width : 160px;
	font-size : 13px;
	font-weight : bold;
	border-radius : 5px;
	font-family : Arial,Helvetica,sans-serif;
	padding: 4px 0 4px 0 ;
}

div.controls-label
{
	text-align: center;
	font-weight: bold;
}

div.legend
{
	text-align: center;
	width: 160px;
	font-size: 12px;
}

#error-msg
{
	text-align: center;
	color: #ff0000;
	background: #fff;
	margin: 5px;
}

div.controls button:active
{
	background-color : #aaa;
}

div.controls button:hover
{
	background-color : #eee;
}

div.dialog
{
	margin : 0 230px 0 0;
	background-color: #eee;
	height : 100%;
	position : relative;
	overflow : hidden;
}

div.slot
{
	position : absolute;
	pointer-events : none;
}

div.slot-border
{
	position : absolute;
	top : 0;
	left : 0;
	bottom : 0;
	right : 0;
	border : 1px solid #000;
	pointer-events : none;
}

div.trim
{
	position : absolute;
	pointer-events : none;
}

div.trim-border
{
	position : absolute;
	top : 0;
	left : 0;
	bottom : 0;
	right : 0;
	pointer-events : none;
}

div.trim.left-border div.trim-border
{
	border-left : 1px dashed #888;
}

div.trim.right-border div.trim-border
{
	border-right : 1px dashed #888;
}

div.trim.top-border div.trim-border
{
	border-top : 1px dashed #888;
}

div.trim.bottom-border div.trim-border
{
	border-bottom : 1px dashed #888;
}

div.image
{
	background-size : cover;
	background-position : center;
	position : absolute;
	transform-origin: center;
}

div.move,
div.corner-top-left,
div.corner-top-right,
div.corner-bottom-left,
div.corner-bottom-right
{
	position : absolute;
	opacity : 0.5;
	background-color : #0a0;
}

div.center-top-rotate
{
	position : absolute;
	opacity : 0.5;
	background-color : blue;
}

div.move.active,
div.corner-top-left.active,
div.corner-top-right.active,
div.corner-bottom-left.active,
div.corner-bottom-right.active,
div.center-top-rotate.active
{
	background-color : #aa0;
}

div.corner-top-left,
div.corner-top-right,
div.corner-bottom-left,
div.corner-bottom-right,
div.center-top-rotate
{
	width : 20px;
	height : 20px;
	border-radius : 10px;
}

div.center-top-rotate
{
	top : -10px;
	left : 0;
	right : 0;
	margin: 0 auto 0;
	cursor : grab;
}

div.corner-top-left
{
	top : -10px;
	left : -10px;
	cursor : nwse-resize;
}

div.corner-top-right
{
	top : -10px;
	right : -10px;
	cursor : nesw-resize;
}

div.corner-bottom-left
{
	bottom : -10px;
	left : -10px;
	cursor : nesw-resize;
}

div.corner-bottom-right
{
	bottom : -10px;
	right : -10px;
	cursor : nwse-resize;
}

div.move
{
	width : 80px;
	height : 80px;
	border-radius : 40px;
	margin : auto auto;
	top : 0;
	left : 0;
	bottom : 0;
	right : 0;
	cursor : move;
}

body.cursor-nesw-resize *
{
	cursor : nesw-resize;
}

body.cursor-nwse-resize *
{
	cursor : nwse-resize;
}

body.cursor-rotate
{
	cursor : grabbing;
}

body.cursor-move *
{
	cursor : move;
}