@font-face
{
font-family: "doctorsoosbold";
src: url("fonts/doctorsoosbold-webfont.ttf");
}

@font-face
{
font-family: "doctorsoosbold";
src: url("fonts/doctorsoosbold-webfont.eot");
}

@font-face
{
font-family: "dream_of_me";
src: url("fonts/dreamofme.ttf");
}

body
{
position:absolute;
width:800px;
height:600px;
padding:0px;
margin:0px;
overflow:hidden;
font-family:doctorsoosbold;
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;
}

#name_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/name_background.png);
display:none;
}

#player_name
{
position:absolute;
top:259px;
left:216px;
width:345px;
height:36px;
font-size:32px;
text-align:center;
background:url(images/blank.gif);
border:none;
outline:none;
font-family:doctorsoosbold;
color:#fff;
}

#game_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
}

#game_overlay_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/game_background.png);
}

#game_over_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/gameover_background.png);
font-family:dream_of_me;
display:none;
color:#000;
}

.tile
{
position:absolute;
width:182px;
height:74px;
cursor:pointer;
color:#fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000);
font-size:24px;
}

.tile_inner_0
{
position:absolute;
top:25px;
left:5px;
width:140px;
padding-top:0px;
-webkit-transform:rotate(6deg);
-moz-transform:rotate(6deg);
-ms-transform:rotate(6deg);
text-align:center;
}

.tile_inner_1
{
position:absolute;
top:25px;
left:30px;
width:140px;
padding-top:0px;
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
text-align:center;
}

.drop
{
//border:1px solid #000;
}

.place_name
{
display:none;
color:#fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000);
}

#cert_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
}

#sound_icon_div
{
position:absolute;
top:14px;
left:7px;
width:56px;
height:61px;
background:url(images/sound_icon.png);
cursor:pointer;
display:none;
}

.map_animal
{
position:absolute;
max-width:75px;
max-height:75px;
}

.button
{
position:absolute;
cursor:pointer;
background-image:url(images/blank.gif);
}

#cloud_div
{
position:absolute;
top:0px;
left:0px;
width:199px;
height:69px;
background:url(images/cloud.png);
cursor:pointer;
display:none;
-webkit-transition: -webkit-transform 2s ease-in-out;
-webkit-animation-name: pulse;-webkit-animation-duration: 2.0s;-webkit-animation-iteration-count: infinite;
-moz-transition: -moz-transform 2s ease-in-out;
-moz-animation-name: pulse;-moz-animation-duration: 2.0s;-moz-animation-iteration-count: infinite;
transition: transform 2s ease-in-out;
animation-name: pulse;animation-duration: 2.0s;animation-iteration-count: infinite;
}

@-webkit-keyframes pulse
{
from
 	{
	-webkit-transform: scale(0.5);
	opacity:0.0;
	}
	50%
	{
	-webkit-transform: scale(1.0) rotate(0deg);
	opacity:1.0;
	}
	 to
	{
	-webkit-transform: scale(0.5) rotate(0deg);
	opacity:0.0;
	}
}

@-moz-keyframes pulse
{
from
 	{
	-moz-transform: scale(0.5);
	opacity:0.0;
	}
	50%
	{
	-moz-transform: scale(1.0) rotate(0deg);
	opacity:1.0;
	}
	 to
	{
	-moz-transform: scale(0.5) rotate(0deg);
	opacity:0.0;
	}
}

@keyframes pulse
{
from
 	{
	transform: scale(0.5);
	opacity:0.0;
	}
	50%
	{
	transform: scale(1.0) rotate(0deg);
	opacity:1.0;
	}
	 to
	{
	transform: scale(0.5) rotate(0deg);
	opacity:0.0;
	}
}