/****************************************
  ==== RESETS
****************************************/

html,body,div,canvas { margin: 0; padding: 0; }
::-moz-selection { color: #333; text-shadow: none; }
::selection {  color: #333; text-shadow: none; }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */

/****************************************
  ==== FULLSCREEN
****************************************/
/*
* { margin: 0; padding: 0; }
canvas { width: 100%; height: 100%; position: absolute; }
*/

/****************************************
  ==== NOT FULLSCREEN
****************************************/

.template-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.template-wrap canvas { margin: 0 0 10px 0; position: relative; z-index: 9; box-shadow: 0 10px 30px rgba(0,0,0,0.2); -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

/****************************************
  ==== LAYOUT
****************************************/

html, body { width: 100%; height: 100%; font-family: monospace; }
body { }

body.template { }
.template .template-wrap { }
.template .template-wrap canvas { }

/****************************************
  ==== PLAY BUTTON
****************************************/

div#playWrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	background: #FFF;
	z-index: 900;
}
img#playButton {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 64px;
   height: 64px;
   margin-top: -32px;
   margin-left: -32px;
}

/****************************************
  ==== LOADING
****************************************/

div#loadingBox {
    position: fixed;
    top: 0;
    left: 0;
	width: 800px;
	height: 450px;
	background-color: black;
	text-align: center;
}
div#bgBar {
	width: 200px;
	height: 5px;
	margin-left: 300px;
	margin-top: 300px;
	position: absolute;
	background-color: #333;
}
div#progressBar {
	width: 0px;
	height: 5px;
	margin-left: 300px;
	margin-top: 300px;
	position: absolute;
	background-color: white;
	border-radius: 2px;
}
div#bgBar {
	border-radius: 2px;
}
p#loadingInfo {
	color: #666;
	letter-spacing: 1px;
	font-family: "Monaco", sans-serif;
	text-transform: uppercase;
	text-align: center;
	font-size: 12px;
	margin-top: 280px;
}

img#experaLogo {
	margin-left: -105px;
	margin-top: 150px;
	position: absolute;
}

img#spinner {
	width: 48px;
	height: 48px;
    position: fixed;
    top: 300px;
    left: 376px;
}