@font-face {font-family: bitLike; src: url(8-bitwonder.ttf);}

*{
	margin:0;
	padding:0;
}

body{
	background-color: #000000;
	color: #FFFFFF;
	font-family: "Verdana", "Arial";
	font-size: 10px;
	overflow: hidden;
}

#wrapper{
	position:relative;
	width: 960px;
	display: block;
	margin-left: auto;
	margin-right: auto;		
	margin-top: 16px;		
}	 

#game-embed{
   position:absolute;
   z-index: 15;
}

#canvas{
	position:absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	background-image: url(background.png); background-color: black; 
}

div#logo {width: 256px; height: 64px; position: absolute; top: 10px;  left: 10px;  z-index: 10; text-align: center; background-image: url(miniclip.png);}
div#progress { position: absolute; width: 512px; height: 12px; top: 512px; left: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 10; }
div#emptyBar { position: relative; left: -50%; width: 512px; height: 12px; z-index: 11; background-color: transparent}
div#fullBar  { position: absolute; top: 1px; left: 1px; width: 0px; height: 10px; z-index: 11; background-color: #fcae2f}
div#progressInfo { position: absolute; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); margin-top: 8px; z-index: 11; font-family: bitLike; font-size: 12px; color: white; }

.template-wrap, canvas { width: 100%!important; height: 100%!important; }