@font-face
{
font-family: "arcade";
src: url("fonts/pacman.eot");
}

@font-face
{
font-family: "arcade";
src: url("fonts/pacman.ttf");
}

@font-face
{
font-family: "xmas";
src: url("fonts/xmas2.ttf");
}

body
{
font-family: xmas;
padding:0px;
margin:0px;
}

#controls     { width: 28em; float: left; padding: 1em; font-size: 0.7em; }
#controls th  { text-align: right; vertical-align: middle; }
#racer        { position: absolute; z-index: 0; width: 640px; height: 350px; border: 0px solid black; }
#canvas       { position: absolute; z-index: 0; width: 640px; height: 350px; z-index: 0; background-color: #060555; }
#mute         { top: 10px; left: 290px; background-position:0px 0px; width: 32px; height: 32px; background: url(images/mute.png); display: inline-block; cursor: pointer; position: absolute; margin-left: 20em; }
#mute.on      { background-position: -32px 0px; }

#hud                   { position: absolute; z-index: 1; width: 640px; padding: 5px 0; font-size: 18px; }

#hud .hud
{
color:#fff;
text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#hud #score            { position:absolute; top: 10px; left: 30px; }
#hud #highscore { position:absolute; top: 10px; right: 38px;  }

#loading_message, #game_over_text
{
font-family:arcade;
color:#f00;
text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-size:18px;
}

#frontpage
{
position:absolute;
width:100%;
height:100%;
padding-top:67px;
z-index:5;
text-align:center;
color:#fff;
}

#game_over_div
{
position:absolute;
width:100%;
height:100%;
padding-top:67px;
z-index:5;
text-align:center;
color:#fff;
display:none;
}

#countdown_div
{
position:absolute;
top:100px;
left:50%;
margin-left:-50px;
width:100px;
z-index:5;
font-size:55px;
text-align:center;
color:#fff;
text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
display:none;
}

#dpad
{
position:absolute;
bottom:0px;
display:none;
}