/****************************************
  ==== 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 */

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

html, body { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; background-color: #0f0b0c;}
/****************************************
html, body { width: 100%; height: 100%; font-family: monospace; }
****************************************/
div.logo { width: 204px; height: 38px; float: left; background: url(logo.png) 0 0 no-repeat; position: relative; z-index: 10; }
div.title { height: 38px; line-height: 38px; padding: 0 10px; margin: 0 1px 0 0; float: right; color: #dcd2c8; text-align: right; font-size: 18px; position: relative; z-index: 10; }
.template-wrap { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 920px; max-height: 518px; }
/****************************************
//This can be used in place of the above line in order to stop the dynamic canvas ratio added via the vw (Viewport Width). Multiply the value of width by "0.5625" to get the value of height. Can also use "relative" in place of "absolute" in the above line to fix certain browser compatibility issues.
.template-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
//This was up there before, but I removed part of it to fix iframe centering.
.template-wrap { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60vw; height:33.75vw; max-width: 720px; max-height: 405px; }
****************************************/
.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);
		background-color: #e6e6e6;
        /*width:100%;
        height:100%;*/
		background-image: url(backdrop.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		/*background-attachment: fixed;*/
		background-position: center; }
.fullscreen { float: right; position: relative; z-index: 10; }

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

div#loadingBox {
	width: 100%;
	height: 20px;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	text-align: center;
}
div#bgBar {
	position: absolute;
	width: 200px;
	margin-left: -100px;
	left: 50%;
	height: 8px;
	display: block;
	background-color: #333;
}
div#progressBar {
	left: 50%;
	position: absolute;
	margin-left: -100px;
	width: 0px;
	height: 8px;
	background-color: white;
	border-radius: 2px;
}
div#bgBar {
	border-radius: 2px;
}
p#loadingInfo {
color: #666;
	letter-spacing: 1px;
	position: absolute;
	width: 100%;
	font-family: "Monaco", sans-serif;
	text-transform: uppercase;
	text-align: center;
	font-size: 8px;
	margin-top: 14px;
}