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

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

#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%;
background-image:url(images/level_1_background.jpg);
display:none;
}

#game_over_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
color:#663300;
}

#correct_incorrect_div
{
position:absolute;
padding-top:5px;
top:200px;
left:175px;
width:450px;
font-size:70px;
text-align:center;
color:#fff;
overflow:hidden;
z-index:10;
}

#popup_div
{
position:absolute;
width:397px;
height:268px;
top:140px;
left:50%;
margin-left:-198px;
background:rgba(0,0,0,0.5);
border:1px solid #000;
border-radius:12px;
color:#00ff00;
display:none;
}

#popup_inner
{
left:20%;
right:20%;
top:20%;
bottom:20%;
margin:20px;
color:#ffff00;
font-size:32px;
text-align:center;
}

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

.animal
{
position:absolute;
width:108px;
height:62px;
text-align:center;
}

.word
{
position:absolute;
width:108px;
height:25px;
font-size:20px;
color:#fff;
text-align:center;
cursor:pointer;
text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=#ccc);
}

.tile
{
position:absolute;
width:108px;
height:70px;
}

.tile_shake
{
position:absolute;
width:108px;
height:62px;
background-image:url(images/tile_bg.png);
-webkit-transition: all 1s ease-in-out;
-webkit-animation-name: sway;-webkit-animation-duration: 0.2s;-webkit-animation-iteration-count: infinite;
-moz-transition: all 1s ease-in-out;
-moz-animation-name: sway;-moz-animation-duration: 0.2s;-moz-animation-iteration-count: infinite;
transition: all 1s ease-in-out;
animation-name: sway;animation-duration: 0.2s;animation-iteration-count: infinite;
}

@-webkit-keyframes sway
{
from
 	{
	-webkit-transform: rotate(-4deg);
	}
	50%
	{
	-webkit-transform: rotate(4deg);
	}
	 to
	{
	-webkit-transform: rotate(-4deg);
	}
}

@-moz-keyframes sway
{
from
 	{
	-moz-transform: rotate(-4deg);
	}
	50%
	{
	-moz-transform: rotate(4deg);
	}
	 to
	{
	-moz-transform: rotate(-4deg);
	}
}

@keyframes sway
{
from
 	{
	transform: rotate(-4deg);
	}
	50%
	{
	transform: rotate(4deg);
	}
	 to
	{
	transform: rotate(-4deg);
	}
}