div {
	box-sizing: border-box;
	ransition-timing-function: linear;
}

ul {
	margin: 0;
	padding: 0;
	padding-left: 1.5em;
}

div.test {
	transition-property: width height top left;
	transition-duration: 1s;
}

div.document {
	background-color: #ffeeee;
}

div#document {
	position: relative;
}

div#tools {
	position: absolute;
	top: 0;
}

	div#view {
		position: relative;
		height: 400px;
		overflow: hidden;
		border: 1px solid;
	}

	div#instructions {
		width: 300px;
	}

div#clone {
	transform-origin: 0 0;
	transition-property: transform;
	transition-duration: 1s;
	z-index: -1;
}

	div.document div.header,div.document div.footer {
		padding: 10px;
		text-align: center;
		border: 1px solid;
		overflow: auto;
	}
	
	div.document div.left,div.document div.right {
		float: left;
		width: 44%;
		margin: 2%;
		padding: 0.7em;
		border: 1px solid;
		position: relative;
	}
	
	body.ideal .document div.left,body.ideal .document div.right {
		float: none;
		width: auto;
	}

	div.document div.right {
		float: right;
	}
	
	div.document div.footer {
		clear: both;
	}	
	
	div#layout {
		position: absolute;
		top: 0;
		left: 0;
		outline: 10px solid #ffffcc;
	}

	div#visual {
		position: absolute;
		top: 0;
		left: 0;
		outline: 10px solid #ccccff;
	}
	


div.testEl {
	position: absolute;
	border: 1px solid;
	width: 10px;
	height: 10px;
}

div.position {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%;
	min-height: 2em;
	background: white;
	text-align: center;
	font-size: 150%;
}

div#absoluteTest {

}


div#deviceFixedTest {
	transition-property: font-size height;
	transition-duration: 1s;
	min-height: auto;
}

div#deviceFixedTest,div#deviceFixedTestClone {
	z-index: 5;
	bottom: 0;
	top: auto;
	min-height: auto;
}

div#deviceFixedTestClone {
	font-size: 14px;
}

div#fixedTestClone {
	z-index: 5;
	transition-property: top;
	transition-duration: 1s;	
}

p.zoomBased {
	float: right;
	width: 30%;
	border: 1px solid;
	font-size: 40%;
	padding: 2%;	
}


div#tools section div {
	float: left;
	width: 48%;
	margin-right: 2%;
}

div#tools label {
	display: block;
	padding-left: 22px;
	text-indent: -23px;
	margin-bottom: 7px;
	max-width: 120px;
}

div#tools input {
	width: 12px;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition-property: opacity;
	transition-duration: 0.5s; 
	opacity: 0;
}

p.textBlock {
	position: absolute;
	top: 0;
	left: 0;
	transition-property: opacity;
	transition-duration: 0.5s; 
	opacity: 0;
	z-index: 12;
	border: 1px solid black;
	background: rgba(255,255,255,0.9);
	margin: 0;
	max-width: 200px;
	text-align: center;
}

p.textBlock span {
	font-size: 80%;
}

#keycode {
	display: none;
}