html { background: url(../images/inflicted.png); }
html,body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
img {
	display: block;
	position: absolute;
	z-index:1;
	-o-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	top: 0px; left: 0px; /* though this won't be flush, due to transform (actual top and left = half the width/height of image */
	border: 20px transparent solid;
	background-color: #eee;
	background-origin: border-box;
	background-image: url(../images/centermarks.png), url(../images/centermarks.png), url(../images/centermarks.png), url(../images/centermarks.png), url(../images/bullseye.png), url(../images/bullseye.png), url(../images/bullseye.png), url(../images/bullseye.png), url(../images/bullseye.png), url(../images/bullseye.png), url(../images/bullseye.png), url(../images/bullseye.png), url(../images/colourbar.png);
	background-repeat: no-repeat;
	background-position: center bottom, center top, left center, right center, 0 15%,  0 85%,  100% 15%,  100% 85%, 15% 0, 85% 0, 15% 100%, 85% 100%, 100% 70%;
	margin: 0; padding: 0;
}