hmtl,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: red;
}

.canvas,
.quadrant,
.target {
	position: absolute;
}

.canvas {
	background-color: #fff;
}

#canvas {
	width: 320px;
	height: 460px;
}

#zoomedCanvas {
	width: 208px;
	height: 299px;
	bottom: 65px;
	left: 55px;
	border: 1px solid #222;
	overflow: hidden;
	--moz-border-radius: 4px;
	--webkit-border-radius: 4px;
}

.target {
	width: 32px;
	background-color: #68f;
	--moz-border-radius: 3px;
	--webkit-border-radius: 3px;
}

#zoomedTarget {
	width: 20%;
}

.target-active {
	background-color: #f68;
}

.quadrant {
	width: 50%;
	height: 50%;
}

.quadrant-right {
	left: 50%;
}

.quadrant-lower {
	top: 50%;
}

#q1, #q3 {
	background-color: #e9e9e9;
}