@charset "UTF-8";
/* CSS Document */

.container {
	float: left;
}

.can {
	float: left;
	border-top: 2px #AFAFAF solid;
	border-right: 2px #AFAFAF solid;
	border-left: 2px #AFAFAF solid;
	cursor: crosshair;
}

.controls {
	clear: both;
	margin: 10px 0px;
	padding: 5px 10px;
	color: #CCC;
	border-bottom: 2px #AFAFAF solid;
	border-right: 2px #AFAFAF solid;
	border-left: 2px #AFAFAF solid;
	background-color: #000;
}

.controls p {
	clear: both;
}

.color_controls, .drag_controls {
	float: left;
}

.color_controls div {
	margin: 0 .25em;
	width: 1.5em;
	height: 1.5em;
	border: solid .1em #CCC;
	float: left;
}

.pen_controls {
	margin-left: 1.0em;
	float: left;
	font-size: 1.1em;
}

.pen_controls select {
	font-size: 1.1em;
}

.frame_controls {
	float: right;
}

.frame_controls input {
	font-size: 1.1em;
	border: 2px solid;
	border-radius: 25px;
}

.draggable {
	display: inline; 
	border: 2px solid rgba(255,255,255,.2);
	background-color: rgba(255,255,255,.2);
	border-radius: 25px;
	color: rgba(255,0,0,.7);
	font-size: 1.5em;
	font-weight: bold;
	cursor: move;
	padding: 0px 10px;
}

.drag {
	float: left;
	border-top: 2px #AFAFAF solid;
	border-right: 2px #AFAFAF solid;
	border-left: 2px #AFAFAF solid;
}