
#main-page #target, #main-page .target{
	width: 110px;
	position: absolute;
	transform-origin: center center;
	/*transform: translate(-50%, -50%);*/
	left: 50%; 
	top: 50%; 
}

#target img, .target img{
	position:absolute;
}
#target img.creature, .target img.creature{
	width: 100%;
	transform: translate(-50%, -50%);
}
#target img.decor{
	width: 100%;
	transform: translateX(-50%) translateY(-80%);
}

#main-page img.cracks{

	width: 110px;
	position: absolute;
	transform: translate(-50%, -50%);
	opacity: 0.4;
}

#main-page{
	/*light-off effect*/
	/*background-color: #181818;*/ 
	background-color: gray;
	color: white;
	overflow: hidden;
	background-image: url("../image/Raster.png");

	/*    background: repeating-linear-gradient(
					45deg,
					gray,
					gray 30px,
					#FFF 30px,
					#FFF 40px
					);*/
}    

/*#main-page.light-on{
    background-color: gray;
}*/

#post-page{
	background-color: #CCC;
}


/*#spotlight-canvas{
    position: absolute;
}*/

.instruction-text{
	text-align: center; 
	font-size: 1.4em;
	position: absolute;
	bottom: 15%;
	width: 100%;
	margin: auto;
}


#main-page.light-on .peeping-mask, #main-page.light-on .spotlight-marking, #main-page.light-on .instruction-text{
	display:none;
}

.spotlight-marking {
	border-radius: 50%;
	behavior: url(PIE.htc); /* remove if you don't care about IE8 */
	width: 260px;
	height: 260px;
	/*opacity: 0.4;*/


	/*background: gray;*/
	border: 10px dashed #FFF;
	/*    background: repeating-linear-gradient(
					45deg,
					transparent,
					transparent 30px,
					#FFF 30px,
					#FFF 40px
					);*/
}


.peeping-mask{
	width:100%; 
	height: 100%;
}


#target-area, .target-area{
	margin:40px; 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#miniature-canvas{
	border: lightgray solid 1px;
	width: 200px;
	height: 100px;
}

/*Settings page*/
.icon-default{
	background-image: url("image/settings-default.png");
}
.icon-xmas{
	background-image: url("image/settings-xmas.png");
}

