body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow: hidden;
}

#game{
	margin: 0px auto;
	border: 1px solid black;
	width: 800px;
	height: 500px;
	background-color: #C5EBF9;
	background-image: url(assets/sea.png);
	position: relative;
	overflow: hidden;
}


#menu{
	background-image: url(assets/scroll.png);
	position: absolute;
	width: 344px;
	height: 443px;
	left: 233px;
	top: 30px;
	z-index: 10000;
}

@font-face{
	font-family: ahoy;
		src: 	url('assets/HoboStd.otf'),
     			url('assets/HoboStd.eot'); /* IE9 */
}

#startButtons{
	font-family: ahoy;
	font-size: 36pt;
	width: 195px;
	margin: 115px auto;
	text-align: center;
	color: #353535;
	
	
}

.button{
	cursor: pointer;
	text-shadow:3px 3px 2px rgba(0,0,0,0.65);

	z-index: 10001;
}

.button:hover{
	font-size: 42pt;
}

#scoreSheet{
	display:none;
	font-family: ahoy;
	font-size: 32pt;
	width: 300px;
	margin: 115px auto;
	text-align: center;
	color: #353535;	
}

#playAgain{
	float: left;
	font-size: 16pt;
	margin: 10px 0 0 25px;
	cursor: pointer;
}

#back2menu{
	float: right;
	font-size: 16pt;
	margin: 10px 25px 0 0;
	cursor: pointer;
}



.actor{
	position: absolute;
	background-size: 100% 100%;
}



#muteButton{
	background-image: url(assets/mutebutton.png);
	background-position: top;
	position: absolute;
	z-index: 10000;
	display:none;
	bottom: 50px;
	right: 5px;
	width: 35px;
	height: 39px;
}

#exitButton{
	background-image: url(assets/exitbutton.png);
	background-position: auto;
	position: absolute;
	z-index: 10000;
	bottom: 5px;
	right: 5px;
	width: 35px;
	height: 39px;
}

#scoreboard{
	display:none;
	position: absolute;
	z-index: 10001;
	top: 4px;
	right: 18px;
	font-family: ahoy;
	font-size: 2.5em;
	color: white;
	text-align: right;
}

#scoreRight{
	display: inline;	
	text-shadow:5px 5px 4px rgba(0,0,0,0.65);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#a5000000,Positive=true)";zoom:1;
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#a5000000,Positive=true);
}

#scoreRight:before{
	content: url(assets/iconChest.png);
	padding-right: 8px;
}

#scoreWrong{
	display: inline;
	text-shadow:5px 5px 4px rgba(0,0,0,0.65);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#a5000000,Positive=true)";zoom:1;
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#a5000000,Positive=true);
}

#scoreWrong:before{
	content: url(assets/iconCannonball.png);
	padding-right: 8px;
}





#problem{
	position: absolute;
	right: 90px;
	bottom: 55px;
	font-family: ahoy;
	font-size: 4em;
	color: white;
	overflow: visible;
	text-shadow:5px 5px 4px rgba(0,0,0,0.65);
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#a5000000,Positive=true)";zoom:1;
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5,OffY=5,Color=#a5000000,Positive=true);
}

#shiparea{
	width: 800px;
	height: 200px;
	top: 200px;
	position: relative;
	
	
}

.ship{
	background-image: url(assets/ship.png);
	font-family: ahoy;
	color: white;
	text-align: center;
}

.distanceClose{
	background-size: 180px 180px;
	width: 180px;
	height: 180px;
	top: -80px;
	font-size: 22pt;
}

.shipnumClose{
	left: 28px;
	top: 80px;	
	width: 60px;
	transform: skew(-10deg,10deg);
	-moz-transform: skew(-10deg,10deg);
	-webkit-transform: skew(-10deg,10deg);
	-o-transform: skew(-10deg,10deg);
}

.distanceMed{
	background-size: 130px 130px;
	width: 130px;
	height: 130px;
	top: -50px;
	font-size: 18pt;
}

.shipnumMed{
	left: 16px;
	top: 58px;	
	width: 60px;
	transform: skew(-10deg,10deg);
	-moz-transform: skew(-10deg,10deg);
	-webkit-transform: skew(-10deg,10deg);
	-o-transform: skew(-10deg,10deg);
}

.distanceFar{
	background-size: 90px 90px;
	width: 90px;
	height: 90px;
	top: -25px;
	font-size: 12pt;
}

.shipnumFar{
	left: 2px;
	top: 38px;	
	width: 60px;
	transform: skew(-10deg,10deg);
	-moz-transform: skew(-10deg,10deg);
	-webkit-transform: skew(-10deg,10deg);
	-o-transform: skew(-10deg,10deg);
}

#cannonball{
	background-image: url(assets/cannon_ball.png);
	background-size: 100% 100%;
	width: 75px;
	height: 75px;
	left: 195px;
	bottom: 167px;
	z-index: 0;
}



#deck{
	background-image: url(assets/deck.png);	
	width: 900px;
	height: 654px;
	left: -80px;
	bottom: -50px;
	z-index: 1;
	
	
	animation:rock 5s infinite alternate ease-in-out;
	-moz-animation:rock 5s infinite alternate ease-in-out;
	-webkit-animation:rock 5s infinite alternate ease-in-out;
	-o-animation:rock 5s infinite alternate ease-in-out;
}

#cannon{
	background-image: url(assets/cannon.png);	
	width: 230px;
	height: 219px;
	left: 100px;
	bottom: 55px;
}

#smoke{
	background-image: url(assets/smoke.png);
	width: 183px;
	height: 189px;
	left: 200px;
	bottom: 157px;
	opacity:0.0;
	filter:alpha(opacity=0);
}

#cannon_balls{
	background-image: url(assets/cannon_balls.png);	
	width: 156px;
	height: 113px;
	left: 260px;
	bottom: 75px;
}

#island{
	background-image: url(assets/island.png);	
	width: 317px;
	height: 177px;
	right: -50px;
	top: 100px;
}


#cloud1{
	background-image: url(assets/cloud1.png);	
	width: 172px;
	height: 84px;
	animation: cloud1 155s infinite;
	-moz-animation: cloud1 155s infinite;
	-webkit-animation: cloud1 155s infinite;
	-o-animation: cloud1 155s infinite;
}

#cloud2{
	background-image: url(assets/cloud2.png);	
	width: 248px;
	height: 88px;
	animation: cloud2 200s infinite;
	-moz-animation: cloud2 200s infinite;
	-webkit-animation: cloud2 200s infinite;
	-o-animation: cloud2 200s infinite;
}

#cloud3{
	background-image: url(assets/cloud1.png);	
	width: 170px;
	height: 87px;	
	animation: cloud3 180s infinite;
	-moz-animation: cloud3 180s infinite;
	-webkit-animation: cloud3 180s infinite;
	-o-animation: cloud3 180s infinite;
}

#bird1{
	
}

#bird2{
	
}

#bird3{
	
}