/* CSS Document */


	


/* ***  -----  GENERAL STYLES  -----   ****   */



body {
margin: 0;
padding: 0;
background: url(images/HeaderBackRepeat.gif) repeat-x ;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
}

a:link { color: #C32AD9; }
a:visited { color: #009900 }
a:hover{ color: #009900 } 

.graphicLink {
	margin: 0;
	padding: 0;
	border: none;	
 }
 
h1 {
	margin: 0;
}

h2 {
	margin: 0;
}

#container {
    background: url(images/headerGraphic.gif) no-repeat;
	width: 770px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	}



.clear {
clear: both;
}

.imageWithText {
text-align: center;
}

img.centerImage {
    display: block;
    margin-left: auto;
    margin-right: auto; 
	}
	
.mainheading {
	padding-top: 2px;
	padding-bottom: 0px;
}	

.subheading {
	padding-top: 10px;
	padding-bottom: 0px;
}

.subheading2 {
	padding-top: 10px;
	padding-bottom: 26px;
}

.imageheading {
	padding-top: 34px;
	padding-bottom: 0px;
}

.imageheading2 {
	padding-top: 18px;
	padding-bottom: 0px;
}

#pageBody {
width: 630px;
font-size: 80%;
margin-top: 210px;
line-height: 1.5em;
float: left;
}
	
p {
 line-height: 1.9em;
}	

.imagecaption {
margin-top: 6px;
 line-height: 1.8em;
}	

.icontext {
	margin-top: 1px;
 	line-height: 1.4em;
}
	
#pageBody ul {
list-style-image: url(images/bullet_red.gif);
margin-left: 8px;
padding-left: 8px;
}
 
#pageBody li {
line-height: 1.8 em;
}






/* ***  ----- Columns on some sub pages   -----   ****   */



#subColumn1 {
margin-top: 5px;
width: 275px;
padding-right: 15px;
float: left;
}

#subColumn1 #redText {

font-size: 105%;
font-weight: bold;
color:#CC0000;
line-height: 2.5em;
} 

#subColumn1 #greenText {

font-size: 105%;
font-weight: bold;
color:#669933;
line-height: 1.5em;
} 

#subColumn2 {
margin-top: 15px;
width: 275px;
float: left;
line-height: 2.0em;
}









/* ***  -----  HOME PAGE  -----   ****   */



/* moving top overlap imagine */

#pageHeader {
padding: 0;
height: 200px;

}




/*  left nav  */

#mainNav {
margin-top: 160px;
float: left;
width: 135px;
padding: 0;
}


#mainNav ul {
list-style: none;
font-size: 85%;
font-weight: bold;
margin: 0;
padding: 0;
}

#mainNav li { 
margin-bottom: 5px;
}



/* highlights current page - no link */


#mainNav li#currentLink
{
background: url(images/leftNavRollOver.gif) no-repeat 0 -35px;
width: 30px;
height: 35px;
padding: 0 0 0 35px;
line-height: 35px;
}



/* -- */ 

	#mainNav li.game { 
	margin-top: 10px;
	}

#mainNav a {
    background: url(images/leftNavRollOver.gif) no-repeat;
	padding: 0 0 0 35px;
	text-decoration: none;
	display: block;
	height: 35px;
	color:#000000;
	line-height: 35px;
}



	/*#mainNav #currentLink, #mainNav #currentLink a  {
		background: url(images/leftNavRollOver.gif) no-repeat 0 -35px;	
	
	}*/


	#mainNav a.game {
		background: url(images/leftNavPlayGame.gif) no-repeat;
		padding: 0 0 0 35px;
		text-decoration: none;
		display: block;
		height: 35px;
		color:#000000;
		line-height: 35px;
	}

#mainNav a:hover {
	background: url(images/leftNavRollOver.gif) no-repeat 0 -35px;
	color:#009900;
}

	#mainNav a:hover.game {
		background: url(images/leftNavPlayGame.gif) no-repeat 0 -35px;
		color:#009900;
	}




/* interactive */



#game {
margin-top: 210px;
float:left;
width: 195px;
font-size: 90%;
}

#game #button a {
    background: url(images/playGameButton.gif) no-repeat;
	display: block;
	height: 37px;
	margin: 5px 0 5px 0;
 }
 
#game #button a:hover {
    background: url(images/playGameButton.gif) no-repeat 0 -37px;
 }
 
 #game p {
 margin-top:0;
 padding-top: 0;
 line-height: 1.8em;
 }
 
 #game ul {
list-style-image: url(images/bullet_red.gif);
margin-left: 8px;
padding-left: 8px;
font-size: 90%;
line-height: 2em;
 }
 
#game li {
line-height: 1.8 em;
}

 
 
 
 
/* section navigation rollovers */
 
 
 #sectionNavContainer {
float: left;
width: 425px;
margin-top: 165px;
padding-left: 5px;

}


a.icon {
	float: left;
	display: block;
	width: 130px;
	text-decoration: underline;
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 157px;
	line-height: 2em;
	font-size: 80%;
	text-align: center;
}

.centerIcons { padding-left: 80px;}

a.icon:hover { 
        background-position:-130px 0;
}


a.icon160 { 
		float: left;
		display: block;  
        width: 160px; 
        text-decoration: underline; 
        background-repeat: no-repeat;
		text-align: center;
		padding-top: 157px;
		line-height: 2em;
		font-size: 80%;
		text-align: center;
}

a.icon160:hover { 
        background-position: -160px 0; 
}

#boats  { 
        background-image: url(images/hpgNav_boats.gif);
		background-repeat:no-repeat; }

#prepare { background-image: url(images/hpgNav_prepare.gif); }

#forecasts  { background-image: url(images/hpgNav_forecasts.gif); }

#wind  { background-image: url(images/hpgNav_wind.gif); }

#charts  { background-image: url(images/hpgNav_charts.gif); }

#dontCrash  { background-image: url(images/hpgNav_dontCrash.gif); background-repeat:no-repeat; }
#buoys  { background-image: url(images/hpgNav_buoys.gif); }
#night  { background-image: url(images/hpgNav_night.jpg); background-repeat:no-repeat; }

#help  { background-image: url(images/hpgNav_help.gif); background-repeat:no-repeat; }
#seasense  { background-image: url(images/hpgNav_seasense.gif); background-repeat:no-repeat; }







/* footer */

#footer {
width: 750px;
clear: both;
padding: 0 0 5px 10px;
border-bottom: 1px solid #B41518;
}

#legal
{ 
width: 760px;
text-align: right;
font-size: 80%;
margin: 5px 0 10px 0;

}






/* links for quizzes and game at the bottom of the pages  */

#quizblock {
width:227px;
margin: 15px 0 20px 42px;
float: left;
}

#quizblock a { 
	background: url(images/button_takeQuiz.gif) no-repeat;
	display: block;
	margin-top: 10px;
	margin-bottom: 45px;
	height: 35px;
}

#quizblock a:hover {
	background: url(images/button_takeQuiz.gif) no-repeat -227px 0;
	width: 227px; 
	height: 35px;
	}

#gameblock {
width:227px;
margin: 15px 0 20px 66px;
float: left;
}


#gameblock a { 
	background: url(images/button_playGame.gif) no-repeat;
	display: block;
	margin-top: 10px;
	margin-bottom: 45px;
	height: 35px;
}

#gameblock a:hover {
	background: url(images/button_playGame.gif) no-repeat -227px 0;
	width: 227px; 
	height: 35px;
	}
	
	
	

	
	
/* ***  -----  PREPARE  -----   ****   */



/*  checklist icons at the bottom of the page */

.checklist {
float: left;
}

.checklistText {
	position: relative;
    height: auto;
    width: auto;
    top: 130px;
	text-align:center;
}

.checklistText2 {
	position: relative;
    height: auto;
    width: auto;
    top: 150px;
	text-align:center;
}

#EmergencyWater {
background-image:url(images/prepared_water.jpg);
width: 214px;
height: 175px;
}

#Food {
background-image:url(images/prepared_food.jpg);
width: 110px;
height: 175px;

}

#Liferaft {
background-image:url(images/prepared_liferaft.jpg);
width: 214px;
height: 175px;
}

#EPIRB {
background-image: url(images/prepared_epirb.jpg);
width: 144px;
height: 132px;
margin-right: 12px;
}

#Flares {
background-image: url(images/prepared_flares.jpg);
width: 152px;
height: 132px;
margin-right: 5px;
}

#Lifejacket {
background-image: url(images/prepared_lifejacket.jpg);
width: 156px;
height: 132px;
margin-right: 16px;
}

#Clocks {
background-image: url(images/prepared_clock.jpg);
width: 119px;
height: 132px;
margin-left: 0;
}

#Torch {
background-image: url(images/prepared_torch.jpg);
width: 142px;
height: 132px;
margin: 20px 21px 20px 0;              
}

#FireExtinguisher {
background-image: url(images/prepared_fireExtinguisher.jpg);
background-repeat: no-repeat;
width: 134px;
height: 132px;
margin: 20px 33px 0 0;
}

#Compass {
background-image: url(images/prepared_compass.jpg);
width: 122px;
height: 132px;
margin: 20px 0 0 0;
}

#FirstAid {
background-image: url(images/prepared_firstAid.jpg);
width: 120px;
height: 132px;
margin: 20px 0 0 12px;
}

#Passport {
background-image: url(images/prepared_passport.jpg);
width: 136px;
height: 132px;
margin: 20px 8px 0 32px;
}

#Chart {
background-image: url(images/prepared_chart.jpg);
width: 166px;
height: 132px;
margin: 20px 0 0 0;
}

#Binoculars {
background-image: url(images/prepared_binoculars.jpg);
width: 111px;
height: 132px;
margin: 20px 0 0 19px;
}

#GPS {
background-image: url(images/prepared_gps.jpg);
width: 126px;
height: 149px;
margin: 20px 47px 50px 0;
}

#BilgePump {
background-image: url(images/prepared_bilgePump.jpg);
width: 100px;
height: 149px;
margin: 20px 40px 0px 0px;
}

#Radio {
background-image: url(images/prepared_vhfRadio.jpg);
width: 140px;
height: 149px;
margin: 20px 0px 0px 0px;
}






/* ***  -----  FORECASTS  -----   ****   */


/* Forecsasts icons */

.forecastsText {
	position: relative;
    height: auto;
    width: auto;
    top: 120px;
	text-align:center;
}

#Internet {
background-image: url(images/forecasts_internet.jpg);
width: 119px;
height: 114px;
margin: 20px 0px 30px 5px;
}

#LocalRadio {
background-image: url(images/forecasts_localRadio.jpg);
width: 150px;
height: 114px;
margin: 20px 0px 0px 25px;
}

#Mobile {
background: url(images/forecasts_mobile.jpg) no-repeat 10px 0;
width: 120px;
height: 114px;
margin: 20px 0px 0px 35px;
}

#Phone {
background-image: url(images/forecasts_phone.jpg);
width: 100px;
height: 114px;
margin: 20px 0px 0px 35px;
}

#HarbourMaster {
background-image: url(images/forecasts_HarbourMaster.jpg);
width: 100px;
height: 120px;
margin: 20px 0 45px 0px;
}

#Newspaper {
background-image: url(images/forecasts_newspaper.jpg);
width: 146px;
height: 120px;
margin: 20px 0 0 37px;
}

#Ceefax {
background-image: url(images/forecasts_ceefax.jpg);
width: 120px;
height: 120px;
margin: 20px 0 0 27px;
}

table.forecasts {
border-top: 1px solid black;
border-right: 1px solid black;
margin-left: 16px;
margin-top: 20px;
margin-bottom: 20px;
}


table.forecasts td { 
border-bottom: 1px solid black;
border-left: 1px solid black;
font-weight: bold;
}

table.forecasts td.noBold {
font-weight: normal;
}

table.forecasts th { 
border-bottom: 1px solid black;
border-left: 1px solid black;
font-weight: bold;
text-align: left;
}

.darkYellow {background-color: #FFE042;}
.lightYellow {background-color: #FFF1B3;}
.darkGreen {background-color: #A0C64B;}
.lightGreen {background-color: #E2EEC8;}
.darkBlue {background-color: #9CDCE3;}
.lightBlue {background-color: #DFF4F7;}
.darkWhite {background-color: #F0F0F0;}
.lightWhite {background-color: #FFFFFF;}

.weatherdarkBlue {background-color: #0059AA; color:#FFFFFF;}
.weatherlightBlue {background-color: #D9EDFF;}
.weatherdarkRed {background-color: #B11518; color:#FFFFFF;}

table.forecasts td.weatherlightBlue2 { 
border-bottom: 1px solid black;
border-left: 1px solid black;
font-weight: normal;
background-color: #D9EDFF;
}





/* ***  -----  WIND  -----   ****   */


/*  Wind rollovers */

a.windRollovers { 
		float: left;
		display: block;
		margin-top: 20px;  
        width: 157px; 
		height: 126px;
}

.centerWindRollovers { padding-left: 120px;}

a.windRollovers:hover { 
        background-position: -157px 0; 
}

#calm  { 
        background-image: url(images/wind_RO_calm.jpg);
		margin-left: 16px;
		}
#lightAirs  { 
        background-image: url(images/wind_RO_lightAirs.jpg);
		margin-left: 58px;
		}
#lightBreeze { 
        background-image: url(images/wind_RO_lightBreeze.jpg);
		margin-left: 58px;		
		}
#gentleBreeze { 
        background-image: url(images/wind_RO_gentleBreeze.jpg);	
		}
#moderate { 
        background-image: url(images/wind_RO_moderate.jpg);
		margin-left: 58px;		
		}
#freshBreeze { 
        background-image: url(images/wind_RO_freshBreeze.jpg);
		margin-left: 16px;		
		}
#strongBreeze { 
        background-image: url(images/wind_RO_strongBreeze.jpg);
		margin-left: 58px;		
		}
#nearGale { 
        background-image: url(images/wind_RO_nearGale.jpg);
		margin-left: 58px;		
		}
#gale { 
        background-image: url(images/wind_RO_gale.jpg);	
		}
#severeGale { 
        background-image: url(images/wind_RO_severeGale.jpg);
		margin-left: 58px;
		}
#storm { 
        background-image: url(images/wind_RO_storm.jpg);
		margin-left: 16px;		
		}
#violent { 
        background-image: url(images/wind_RO_violent.jpg);
		margin-left: 58px;		
		}
#hurricane { 
        background-image: url(images/wind_RO_hurricane.jpg);
		margin-left: 58px;		
		}
	





/* ***  -----  CHARTS  -----   ****   */

#chartsIcons {
width: 612px;
}


#chartsIcons ul {
list-style: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#chartsIcons li { 
float: left;
text-align: center;
line-height: 1.0em;
margin: 0 0 25px 60px;
}

#chartsIcons li.firstIcon { 
margin-left:16px;
}



/* ***  -----  HELP  -----   ****   */

#helpIcons {
width: 630px;
}


#helpIcons img 
{margin-bottom: 5px;}

#helpIcons ul {
list-style: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#helpIcons li {
float: left;
text-align: center;
line-height: 1.0em;
}



/* ***  -----  SEASENSE  -----   ****   */



#seasenseIcons {
width: 562px;
}



#seasenseIcons ul {
list-style: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#seasenseIcons li {
float: left;
width: 187px;
margin-top: 5px;
text-align: center;
line-height: 1.5em;
}






#seasenseIcons01 {
background-image:url(images/seasense_icon01.jpg);
width: 562px;
height: 146px;
}

#seasenseIcons02 {
background-image:url(images/seasense_icon02.jpg);
width: 562px;
height: 170px;

}

#seasenseIcons03 {
background-image:url(images/seasense_icon03.jpg);
width: 562px;
height: 170px;
}

#seasenseIcons04 {
background-image:url(images/seasense_icon04.jpg);
width: 562px;
height: 170px;
}

#seasenseIcons05 {
background-image:url(images/seasense_icon05.jpg);
width: 562px;
height: 170px;
}

#seasenseIcons06 {
background-image:url(images/seasense_icon06.jpg);
height: 170px;
width: 562px;
}

#seasenseIcons07 {
background-image:url(images/seasense_icon07.jpg);
height: 150px;
width: 562px;
}

#seasenseIcons08 {
background-image:url(images/seasense_icon08.jpg);
height: 170px;
width: 562px;
}

#seasenseIcons09 {
background-image:url(images/seasense_icon09.jpg);
height: 170px;
width: 562px;
}

#seasenseIcons10 {
background-image:url(images/seasense_icon10.jpg);
height: 46px;
width: 562px;
}