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

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

body
{
width:792px;
height:462px;
padding:0px;
margin:0px;
overflow:hidden;
font-family:cursivecasual;
font-size:20px;
}

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

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

#state_list
{
position:absolute;
top:44px;
left:34px;
font-size:16px;
color:darkorange;
}

.state_button
{
cursor:pointer;
position:absolute;
}

.state_button:hover
{
color:#fff;
}

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

#game_inner
{
position:absolute;
top:84px;
left:49px;
width:380px;
height:300px;
background:#bfd3db;
}

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

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

#time_div
{
position:absolute;
top:131px;
left:486px;
width:254px;
height:40px;
font-size:149px;
font-family:tunnepinta;
color:yellow;
text-align:center;
}

#current_word
{
position:absolute;
top:5px;
left:30px;
width:320px;
text-align:center;
color:#000;
-webkit-text-stroke:1px #fff;
font-size:35px;
}

#entered_word
{
position: absolute;
color: red;
-webkit-text-stroke: 1px #fff;
font-size: 40px;
border: none;
outline: none;
background: url(images/blank.gif);
top: 240px;
left: 30px;
font-family: cursivecasual;
width: 320px;
text-align: center;
}

#animated_word
{
position: absolute;
color: red;
-webkit-text-stroke: 1px #fff;
font-size: 40px;
top: 200px;
left: 30px;
font-family: cursivecasual;
width: 320px;
text-align: center;
}

#tornado_meter
{
position:absolute;
top:342px;
left:444px;
}

#score_div
{
position: absolute;
top:35px;
left:386px;
color:#fff;
font-size:35px;
}

#sound_off_text
{
position:absolute;
top:391px;
left:474px;
display:none;
cursor:pointer;
}

#sound_off_icon
{
position:absolute;
top:406px;
left:646px;
display:none;
cursor:pointer;
}

#menu_popup
{
position:absolute;
top:150px;
left:50%;
margin-left:-151px;
width:300px;
height:183px;
background-image:url(images/menu_popup.png);
display:none;
z-index:10;
}

#game_over_popup
{
position:absolute;
top:150px;
left:50%;
margin-left:-150px;
width:300px;
height:143px;
background-image:url(images/game_over_popup.png);
display:none;
z-index:10;
}

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

#keyboard_div
{
position:absolute;
top:60px;
left:36px;
text-align:center;
display:none;
}

.key
{
border:1px solid #fff;
border-radius:3px;
font-size:35px;
width:45px;
height:35px;
text-align:center;
color:#000;
background:rgba(0,0,0,0.5);
padding:0 6px 0 6px;
margin-right:2px;
line-height:134%;
cursor:pointer;
}

#hot_air
{
position:absolute;
top:287px;
left:11px;
font-size:32px;
color:red;
-webkit-text-stroke:1px #fff;
}

#cold_air
{
position:absolute;
top:12px;
left:698px;
font-size:32px;
color:cyan;
-webkit-text-stroke:1px #fff;
}

#print_button
{
position:absolute;
top:404px;
left:51px;
font-size:33px;
font-family:tunnepinta;
color:yellow;
-webkit-text-stroke:3px #000;
}

#play_again_button
{
top:404px;
left:526px;
font-size:33px;
font-family:tunnepinta;
color:yellow;
-webkit-text-stroke:3px #000;
}

#tornado_info
{
position:absolute;
top:279px;
right:30px;
font-size:30px;
color:#000;
-webkit-text-stroke:1px yellow;
text-align:right;
}

#clouds
{
position:absolute;
top:-22px;
left:0px;
filter:contrast(50%);
opacity:0.7;
}

#lightning_left
{
position:absolute;
top:-310px;
left:30px;
}

#lightning_right
{
position:absolute;
top:-240px;
left:500px;
}

#tornado
{
position:absolute;
top:0px;
left:100px;
width:507px;
height:630px;
background-image:url(images/tornado.png);
animation:spin 0.3s steps(3) infinite;
}

#tornado2
{
position:absolute;
top:0px;
left:100px;
width:507px;
height:630px;
background-image:url(images/tornado.png);
animation:spin 0.3s steps(3) infinite;
transform:scale(0.4, 0.9);
}

@keyframes spin
{
100% { background-position: -1521px; }
}

.preload
{
width:1px;
height:1px;
opacity:0;
}