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

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

@media (orientation: portrait)
{ /* tablet and smaller */
#overlay
	{
	position: absolute;
	z-index: 9999;
	width: 100%;
	height:100%;
	top: 0;
	bottom: 0;
	content: "";
	background: #212121 url(images/turndevice.png) 0 0 no-repeat;
	background-size: 100% auto;
	}
}

body
{
width:800px;
height:600px;
padding:0px;
margin:0px;
overflow:hidden;
font-family:cursivecasual;
font-size:20px;
background:#212121;
}

#main_div
{
position:absolute;
top:0px;
left:0px;
width:800px;
height:600px;
overflow:hidden;
padding:0;
margin:0;
}

#frontpage_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/frontpage_background.png);
display:none;
}

#info_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/info_background.png);
display:none;
}

#game_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
background:url(images/game_background.png);
}

#game_over_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/game_over_background.png);
display:none;
color:#fff;
z-index:10;
}

#print_map_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/cert_background.png);
display:none;
color:#fff;
z-index:10;
}

#game_over_message_div
{
position:absolute;
top:78px;
left:72px;
width:570px;
font-size:22px;
text-align:center;
color:#fff;
}

.button
{
position:absolute;
cursor:pointer;
background-image:url(images/blank.gif);
}

#greyout
{
background-color: #fff;
filter:alpha(opacity=40);
opacity: 0.4;
-moz-opacity:0.4;
z-index: 0;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
top: 0px;
left: 0px;
display:none;
}

#correct_div
{
position:absolute;
top:173px;
left:122px;
display:none;
}

#incorrect_div
{
position:absolute;
top:176px;
left:125px;
display:none;
}

#result_div
{
position:absolute;
top:140px;
left:0px;
width:800px;
color:#f00;
-webkit-text-stroke:3px yellow;
font-size:120px;
text-align:center;
z-index:200;
display:none;
}

#state_names
{
position:absolute;
top:58px;
left:584px;
width:200px;
height:515px;
overflow-x:hidden;
overfloy-y:auto;
}

.state_name
{
width:200px;
background-color:#064879;
cursor:pointer;
text-align:center;
color:#fff;
}

.tick
{
background-image:url(images/tick.png);
background-repeat:no-repeat;
}

.state_pic
{
cursor:pointer;
}