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

html,body,div,canvas
{
margin: 0;
padding: 0;
}

canvas
{
width: 100%;
height: auto;
}

::-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;
}

body { }

p.header, p.footer
{
display: none;
}

.template-wrap
{
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.template-wrap canvas
{
margin: 0 0 -5px 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);
}

div.backgroundpicture
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
margin-top: 0px;
background: url(backgroundTexture.png);
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -5;
}

div#loadingBox
{
width: 650px;
height: 100px;
position: absolute;
top: 0;
left: 50%;
margin-top: 60px;
margin-left: -325px;
text-align: center;
}

div#bgBar
{
position: absolute;
width: 650px;
height: 90px;
background-image: url(loadingBar.png);
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}

div#progressBarBackground
{
position: absolute;
width: 650px;
height: 95px;
margin-top: -1px;
background-image: url(loadingProgressBackground.png);
background-repeat: no-repeat;
background-position: center;
z-index: 3;
}

div#progressBar
{
position: absolute;
margin-top: 0;
margin-left: 90px;
background-image: url(loadingProgress.png);
background-repeat: no-repeat;
background-position: left;
z-index: 4;
}

p#loadingText
{
color: #FFFFFF;
letter-spacing: 1px;
position: absolute;
width: 100%;
font-family: "Arial", sans-serif;
font-weight: bold;
text-align: center;
vertical-align: center;
text-shadow:
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000;
font-size: 21px;
top: 0;
margin-top: 33px;
z-index: 6;
}

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