* {
  xbox-sizing: border-box;
}

html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	font: 14px/1.5 arial, sans-serif, helvetica;
	color: #000;
	background: #eee;
}

/** canvas ********************************************************************************************************************/

#canvas {
	display: block;
	xmargin: 0 auto;
	margin: 0;
	xbackground: #fdd;
}


/** inputcontainer ************************************************************************************************************/

#controlpanel {
	xposition: absolute;
	position: relative;
	xbottom: 0;
	height: 300px;
	max-height: 300px;
	xoverflow-y: auto;
	background: #eef;

	height: auto;
}

.controlbox {
	position: relative;
	width: 144px;
	padding: 5px 10px;
	margin: 5px;
	background: #fff;
	border: 1px solid #aaa;
	float: left;
	xdisplay: inline-block;
	xdisplay: inline-flex;
	xposition: sticky;
	xposition: fixed;
}

.inputbox {
	margin: 4px 0 16px;
	padding: 4px 2px 3px;
	width: 136px;

	margin: 1px 0 8px;

	border: 1px solid #89c;
	background: #dde;
	border-radius: 4px;

	background: #fff;
	border-radius: 0;
	border: 1px solid #000;
}

.w {
	background: #fff;
	border-radius: 0;
	border: 1px solid #000;
}

.g {
	border: 1px solid #89c;
	background: #dde;
	border-radius: 4px;
}

/************************************************* others *********************************************************************/

#output {
	position: absolute;
	width: 300px;
	height: 200px;
	top: 0;
	xbottom: 0;
	right: 0;
	overflow-y: auto;
	font: 13px/20px lucida console;
	background: rgba(240, 240, 240, 0.7);
	z-index: 10000;

	xheight: 700px;
	font: 12px/16px lucida console;

	display: none;
}

.spacer {
	width: 0;
	height: 0;
	clear: both;
}