@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:700px;
height:500px;
padding:0px;
margin:0px;
overflow:hidden;
font-family:cursivecasual;
font-size:20px;
background:#212121;
}

#main_div
{
position:absolute;
top:0px;
left:0px;
width:700px;
height:500px;
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;
}

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

.sound_button
{
position:absolute;
bottom:4px;
left:4px;
width:81px;
height:81px;
background-image:url(images/sound_off.png);
cursor:pointer;
opacity:0;
}

#menu_popup
{
position:absolute;
top:127px;
left:259px;
width:300px;
height:165px;
background-image:url(images/menu_popup.png);
display:none;
}

#improve_popup
{
position:absolute;
top:127px;
left:259px;
width:300px;
height:143px;
background-image:url(images/improve_popup.png);
display:none;
}

#score_div
{
position:absolute;
top:458px;
left:566px;
width:100px;
text-align:center;
color:yellow;
font-size:33px;
}

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

#sound_off_icon
{
position:absolute;
top:5px;
left:718px;
display:none;
cursor:pointer;
}

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

.letter
{
position:absolute;
color:#000;
font-size:30px;
font-family:soup;
cursor:pointer;
border:2px solid #ccc;
border-radius:6px;
width:65px;
height:65px;
text-align:center;
}

.letter img
{
max-width:65px;
max-height:65px;
}

.letter_hole
{
position:absolute;
width:72px;
height:66px;
padding-top:6px;
color:#0172bd;
background:#fcf9eb;
border-radius:6px;
font-size:50px;
font-family:cursivecasual;
text-align:center;
}

.letter_hole img
{
max-width:65px;
max-height:65px;
}

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

#grey_popup
{
position:absolute;
top:100px;
left:140px;
width:418px;
height:241px;
background-image:url(images/grey_popup.png);
text-align:center;
padding-top:30px;
color:yellow;
font-size:80px;
display:none;
z-index:200;
}