/****************************************
  ==== 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: "Font1"; }
body { }
.template-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.template-wrap canvas {background-color: black; margin: 0 0 0px 0; position: relative; z-index: 9;}


body.template { }
.template .template-wrap {width:848px; height: 477px;}
.template .template-wrap canvas { }

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

div#loadingBox {
	width: 100%;
	height: 50px;
	position: absolute;
	top: 50%;
	margin-top: 0px;
	text-align: center;
}
div#bgBar {
	position: absolute;
	width: 400px;
	margin-left: -200px;
	margin-top: 190px;
	left: 50%;
	height: 3px;
	display: block;
	background-color: rgba(255,255,255,0.5);
}
div#progressBar {
	left: 50%;
	position: absolute;
	margin-left: -200px;
	margin-top: 190px;
	width: 0px;
	height: 3px;
	background-color: rgba(170,0,0,1);
	border-radius: 2px;
}

img#PreparingBar {
	left: 50%;
	position: absolute;
	margin-left: -200px;
	margin-top: 190px;
	width: 400px;
	height: 3px;
}

p#loadingInfo {
    color: white;
	letter-spacing: 1px;
	position: inherit;
	width: 100%;
	font-family: "Font1";
	text-transform: uppercase;
	text-align: center;
	font-size: 22px;
	margin-top: 195px;
}
img#BG{
	position: absolute;
    width: auto;
    height: 477px;
	margin-left:-424px;
	background-repeat: no-repeat;
	margin-top: -238.5px;
}

button#Twitter{
	position: absolute;
	border: none;
	background-color: rgba(0,0,0,0);
    width: 50px;
    height: 50px;
	margin-left:365px;
	background-image:url("Twitter.png");
	background-repeat: no-repeat;
	margin-top: 180px;
    cursor:pointer;
}
button#DarkenautsLogo{
	position: absolute;
	border: none;
	background-color: rgba(0,0,0,0);
    width: 140px;
    height: 23px;
	margin-left:-415px;
	background-image:url("DarkenautsLogo.png");
	background-repeat: no-repeat;
	margin-top: 205px;
    cursor:pointer;
}
@font-face {
    font-family: 'Font1';
    src: url('libel-suit.regular.ttf');
}