@charset "UTF-8";
@import "/css/reset.css";

/* CSS Document */

/*
	----------------------------
	HTML SELECTORS
	____________________________
*/

html { background-color: #333; }
body { background: url(../media/layout/bg.gif) repeat-x #333; font:14px/21px Helvetica, Arial, sans-serif; color: #eef; margin: 0; padding: 0; }
a { color: #33f; text-decoration: 0 none; }
a:hover { color: #00f; }
h1, h2 { font-size: 26px; line-height: 28px; font-weight: normal; letter-spacing: -1px; }
h3 { font-size: 18px; font-weight: normal; margin: 8px 0; }
h4 { font-size: 14px; font-weight: normal; margin: 0; }
h5 { font-size: 12px; font-weight: normal; margin: 0; }
ul { margin-left: 20px; }
ol { margin-left: 36px; }

h1#home { text-indent: -9999px; width: 592px; height: 24px; background: #333 url(../media/layout/title.gif) no-repeat; margin: 12px 0 6px; }

/*
	----------------------------
	LAYOUT
	____________________________
*/

#wrapper { width: 960px; margin: 12px auto 0; position: relative; }
	#map { width: 954px; height: 500px; background: #444 url(../media/layout/map-bh.jpg) no-repeat; border: 3px solid #444; position: relative; }
	#code { color: #444; position: absolute; top: 20px; left: 100px; width: 760px; height: 400px; display: none; background-color: #fff; border: 2px solid #ccc; }
		#timer { position: absolute; right: 0; top: 0; width: 300px; font: 32px/34px "Courier New", courier, monospace; text-align: right; margin-right: 10px; z-index: 9; }
		#overlay { position: absolute; width: 954px; height: 500px; background: url(../media/layout/overlay.png); z-index: 100; }
		#message { position: absolute; top: 80px; left: 134px; width: 700px; height: 304px; background: url(../media/layout/message.png); z-index: 101; display: none; }
		#screen-welcome { position: absolute; top: 34px; left: 134px; width: 700px; height: 304px; background: url(../media/layout/screen-welcome.png); z-index: 101; }
		#captains { position: absolute; top: 358px; left: 130px; z-index: 101; }
			.captain { width: 100px; height: 104px; float: left; margin-right: 20px; cursor: pointer; }
			#adam { background: url(../media/layout/capt-adam.png) 0 0 no-repeat; }
			#ian { background: url(../media/layout/capt-ian.png) 0 0 no-repeat; }
			#zeb { background: url(../media/layout/capt-zeb.png) 0 0 no-repeat; }
			#bitsy { background: url(../media/layout/capt-bitsy.png) 0 0 no-repeat; }
		#vessels { position: absolute; top: 358px; left: 130px; z-index: 101; display: none; }
			.vessel { float: left; margin-right: 20px; cursor: pointer; }
			#fv { width: 160px; height: 56px; margin-top: 28px; margin-left: 24px; background: url(../media/layout/boat-fv.png) 0 0 no-repeat; }
			#mt { width: 110px; height: 94px; background: url(../media/layout/boat-mt.png) 0 0 no-repeat; }
			#se { width: 80px; height: 68px; margin-top: 30px; margin-left: 10px; background: url(../media/layout/boat-se.png) 0 0 no-repeat; }
		#difficulties { position: absolute; top: 358px; left: 130px; z-index: 101; display: none; }
			.difficulty { width: 150px; height: 39px; float: left; margin-top: 40px; margin-right: 12px; cursor: pointer; }
			#easy { background: url(../media/layout/difficulty-easy.png) 0 0 no-repeat; }
			#medium { background: url(../media/layout/difficulty-medium.png) 0 0 no-repeat; }
			#hard { background: url(../media/layout/difficulty-hard.png) 0 0 no-repeat; }
		#start { position: absolute; top: 386px; left: 335px; width: 291px; height: 47px; background: url(../media/layout/button-start.png) 0 0 no-repeat; z-index: 101; cursor: pointer; display: none; }
		#countdown { position: absolute; top: 136px; left: 400px; width: 177px; height: 237px; display: none; background: url(../media/layout/countdown.png) 0 0 no-repeat; z-index: 101; }
		#directions { width: 700px; height: 304px; position: absolute; left: 134px; top: 34px; background: url(../media/layout/directions.png) 0 0 no-repeat; z-index: 101; cursor: pointer; display: none; }
		#reset { position: absolute; right: 0; top: -2px; width: 149px; height: 24px; background: url(../media/layout/button-reset.png) 0 0 no-repeat; }
		
		#thumb { position: absolute; left: 12px; top: 12px; z-index: 20; }
		#message-boat { position: absolute; left: 20px; bottom: 12px; }
		#message-score { position: absolute; left: 54px; top: 32px; }
		#message-message { position: absolute; right: 30px; top: 76px; font: 20px/23px "Courier New",courier,monospace; letter-spacing: -1px; width: 280px; }
		#final-time { position: absolute; right: 30px; top: 12px; font: 54px/60px "Courier New",courier,monospace; letter-spacing: -5px; }
		#again { position: absolute; bottom: 20px; right: 20px; width: 291px; height: 47px; background: url(../media/layout/button-again.png) 0 0 no-repeat; z-index: 101; cursor: pointer; }

/*
	----------------------------
	BOATS
	____________________________
*/

.boat { position: absolute; width: 20px; height: 20px; }

.heading-0 { background-position: 0 0; }
.heading-1 { background-position: 0 -20px; }
.heading-2 { background-position: 0 -40px; }
.heading-3 { background-position: 0 -60px; }
.heading-4 { background-position: 0 -80px; }
.heading-5 { background-position: 0 -100px; }
.heading-6 { background-position: 0 -120px; }
.heading-7 { background-position: 0 -140px; }
.heading-8 { background-position: 0 -160px; }
.heading-9 { background-position: 0 -180px; }
.heading-10 { background-position: 0 -200px; }
.heading-11 { background-position: 0 -220px; }
.heading-12 { background-position: 0 -240px; }
.heading-13 { background-position: 0 -260px; }
.heading-14 { background-position: 0 -280px; }
.heading-15 { background-position: 0 -300px; }
.heading-1a { background-position: 0 -320px; }
.heading-3a { background-position: 0 -340px; }
.heading-5a { background-position: 0 -360px; }
.heading-7a { background-position: 0 -380px; }
.heading-9a { background-position: 0 -400px; }
.heading-11a { background-position: 0 -420px; }
.heading-13a { background-position: 0 -440px; }
.heading-15a { background-position: 0 -460px; }

#b1 { background-image: url(../media/layout/boat1.png); background-repeat: none; }
#b2 { background-image: url(../media/layout/boat2.png); background-repeat: none; }
#b3 { background-image: url(../media/layout/boat3.png); background-repeat: none; }

/*
	----------------------------
	BOATS
	____________________________
*/

.buoy { position: absolute; display: none; width: 20px; height: 30px; z-index: 2; }

/*
	----------------------------
	UTILITY CLASSES
	____________________________
*/

div.clear { overflow: hidden; height: 1px; clear: both; }
div.float { float: left; margin-right: 20px; }
div.clear-right { overflow: hidden; height: 1px; clear: right; }
img.alignRight { float: right; margin: 0 0 15px 15px; }
img.alignLeft { float: left; margin: 0 15px 15px 0; }
.error { color: #833; }