* { margin: 0; }	
/*======= general =====*/
html, body { height:100%; padding:0 3px; }
body { font-size:12px; font-family:Arial; text-align: center; background-color:#fff; }
h2 { /*color:#0B216B;*/ margin:5px 0 3px 0; font-size:35px; color:#5C6996;  }	
h3 { color:#3B4B77; font-size:20px; margin:10px 0 0 0; padding:0; }	

a:link, a:visited { color:#2E47C4; text-decoration: none; }
a:hover { color:#304FE9; text-decoration: underline; }
a:active { outline:none; }

a.external:link, a.external:visited { color:#24AD34;  }
a.external:hover { color:#46E831; }

p { font-size:16px; padding:2px 5px; color:#636060; }
p.notes { font-size:12px; }
p.caption { font-size:12px; text-align:center; padding:0; color:#636060; }  /* Mainly for image captions */

ul { font-size:12px; color:#636060; padding-left:30px; }  /* padding for IE so that bullets are seen properly */
li{ list-style-position: outside; } 

img { border:none; }
  
div#main { 
  width: 900px; /*background-color: #fff;*/
  margin: 0 auto -20px;
  text-align: left;
  /* for footer - Terms&Conditions */
    min-height: 100%;
    height: auto !important;
    height: 100%; 
	position:relative; /* temp terms cond. */
  }
	
div#header { 
  height:135px;
  background:#fff url('images/JKSA_web_head.png') no-repeat -3px -2px; 
  }

div#menu {
	background:none; border:none; position:relative; top:92px; left:0px; 
	color:#2A4079; font-size:14px; font-weight:400; 
	margin:0 0 5px 0; padding:5px 0; 
	}

a:link#BKSA_link, a:visited#BKSA_link { 
	position:absolute; right:10px; top:52px; width:175px; height:25px;  
	background:url('images/affiliated_bksa.png') 0px 24px;
	}
a:hover#BKSA_link { background-position:0px 0px; }

/* ====================== NAVIGATION BUTTONS ======================== */
div#menu a:link, div#menu a:visited   {
    background: transparent url('images/nav_right.png') no-repeat right bottom;
    display:block; float:left;
    font: normal 10px Arial, sans-serif; font-weight:400; text-decoration: none; white-space:nowrap;
    height: 34px;
    margin::0px; /* between buttons */
    padding-right: 10px;  /* sliding doors padding */
    padding-bottom:2px;
  }

div#menu a:link span, div#menu a:visited span {
    background: transparent url('images/nav_left.png') no-repeat left bottom;
    display:block; color:#486EA0; font-size:14px; font-weight:400;
    line-height:34px;
    padding:0 6px 2px 12px; /* sliding doors padding */
  }

/*hover*/
div#menu a:hover { background-position: right -34px;  outline: none; }
div#menu a:hover span { background-position: left -34px; color:#2364B9; }

/*selected*/
div#menu a.selected { background-position: right 1px; outline: none; }
div#menu a.selected span { background-position: left 1px;  color:#044581; }

/* ======== Footer ======== */ 
div#footer, .footer_push { font-size:11px; color:#A3A5A5; height:20px; text-align: center; vertical-align:bottom; 
	position:relative; clear:both; /* temp terms cond. */}
div#footer a { color:#75788A; }

div#ajax_throbber { position:absolute; left:358px; top:25px; z-index:999; 
	width:32px; height:32px; background:transparent url('images/ajax_throbber.gif'); display:none; }
	
/* ======== image rotator ======== */
#image_rotator_wrap { position:relative; width:900px; height:200px; overflow:hidden; }
#image_rotator { position:relative; right:0px; height:200px; width:900px; }
#image_rotator img, .img_rot { width:900px; height:200px; float:left; }

/* ======== pre load ======== */
@media projection, screen {
     div.pre_load { position: absolute; left: -8000px; top: -8000px; }
     div.pre_load img { display:block; }
}
@media print { div.pre_load { display: none; } }


/* ====================== THE WISE MONKEY ======================== */
a#compact_wind {
	position:absolute; top:89px; /*right:19px;*/ left:740px; height:26px; width:160px; z-index:5;
	padding:0px; overflow:hidden; text-decoration:none;
	color:#868992; /*opacity:0.1; filter:alpha(opacity=1);*/
	display:none; /*so js-disabled browsers can't see it. We'll make it visible with js*/
	}
#compact_wind #wind_area { border:solid 1px #CACFDA; background:#fff; height:17px; }
	
#compact_wind div { float:left; padding:0; margin-top:3px; line-height:10px; }
#compact_wind #wind_speed_knots, #compact_wind #wind_direction_compass { font-size:15px; font-weight:400; padding-left:5px; }
#compact_wind #wind_speed_knots_text, #compact_wind #wind_direction_compass_plus { font-size:11px; font-weight:400; margin-right:4px; }
#compact_wind #wind_speed_knots_text { margin-left:2px; }

#compact_wind #wm_logo { float:left; width:26px; border:solid 1px #71757C; /*opacity:0; filter:alpha(opacity=0);*/ opacity:0.25; filter:alpha(opacity=25); }
#compact_wind #arrow { float:left; width:24px; padding:0;margin:0; position:relative;top:-5px; opacity:0.50; filter:alpha(opacity=50); }

a#compact_wind:hover {  color:#212738; }
a#compact_wind:hover #wind_area  { background-color:#DFFDFD; border-color:#AEB3BD; }
#compact_wind:hover #wm_logo { opacity:0.99; filter:alpha(opacity=100); }
#compact_wind:hover #arrow { opacity:0.85; filter:alpha(opacity=85); }

/* =======  LINKS PAGE  ======== */
div#links_area { }
/* main links */
#links_area a.links_item:link, #links_area a.links_item:visited {  
	clear:left; display:block; position:relative; float:left; width:900px;
	color:#4B4D68; text-decoration:none;
	margin-top:10px;
	outline: none; 
	background:url('images/links_bg.png') no-repeat bottom left;
	}	 
#links_area a.links_item div.top_img { 
	position:relative; top:-20px; width:900px; height:16px; background:url('images/links_bg.png') no-repeat top left; 
	}
#links_area a.links_item div.bottom_img { 
	width:900px; height:40px; margin-top:40px; background:url('images/links_bg.png') no-repeat bottom left; 
	}

#links_area a.links_item img { padding:0; margin:0;}
#links_area a.links_item div { float:left; text-decoration:none; font-size:12px; padding:5px; }
#links_area a.links_item div.title { font-size:18px; text-align:center; width:150px; padding-left:20px; }
#links_area a.links_item div.desc {  width:500px; }
#links_area a.links_item div.website { width:180px; color:#2E5781; text-align:center; }

#links_area a.links_item div.title, #links_area a.links_item div.desc, #links_area a.links_item div.website { position:relative; top:-20px; }

#links_area a.links_item:hover { background:url('images/links_bg_over.png') no-repeat bottom left; color:#1B466F; }
#links_area a.links_item:hover div.top_img { background:url('images/links_bg_over.png') no-repeat top left; }
#links_area a.links_item:hover div.title { color:#02274D; }
#links_area a.links_item:hover div.website { color:#000; }

/* sub links */
#links_area a.link_sub:link, #links_area a.link_sub:visited {  
	display:block; position:relative; float:left; width:auto; padding:1px 10px; margin-left:10px;
	color:#4B4D68; text-decoration:none;
	margin-top:10px;
	outline: none; border:solid 1px;
	}


/* headings */
#links_area h3 { 
	clear:both; color:#1D78DA; padding-left:5px; padding-top:4px;  margin-bottom:5px; 
	border-top:solid 1px #A6C9E9;
	}
#links_area h3 .notes { padding-left:10px; font-size:13px; font-weight:400; color:#969797; } 


/* =======  RULES PAGE  ======== */
#map_portal { 
	width:450px; height:290px; margin-left:0px; border:solid 3px #333; background-color:#fff;
	overflow:hidden; position:relative; float:left;
	}
#map {
	width:500px; position:absolute;
}	
.cursor_hover { cursor:pointer;cursor:hand; }

#map_rules_overlay_wrap { width:450px; position:absolute; top:0px;left:0px;  /*display:none;*/ } /* need this for IshitE */
#map_rules_overlay { 
	width:500px; position:absolute; top:0px;left:0px; opacity:0.0; filter:alpha(opacity=0);
	cursor:pointer;cursor:hand; 
 }
#zoom_out { 
	position:absolute; width:450px; height:290px; display:none; 
	font-size:310px; opacity:0.0; filter:alpha(opacity=0); /*  to get IE to recognise the div for click events we have to add some extra large dummy text - so this makes it so we can't see it*/
	cursor:pointer;cursor:hand; font-size:310px; color:transparent;
	}



/* =============  SITE CLICK  ================  */
#map_portal a.site_click:link, #map_portal a.site_click:visited {  
	position:absolute;  
	border:solid 1px #fff; background-color:#9BD17B;-webkit-border-radius: 5px; -moz-border-radius: 5px;
	  opacity:0.35; filter:alpha(opacity=35); 
    font-size:0px; color:#B3B3B3; text-decoration:none; text-align:center; padding:3px;
	}
#map_portal a.site_click:hover {  
	border-color:#C4FFA8; opacity:0.6; filter:alpha(opacity=60);
	background-color:#66C92D;
	}	

#map_portal a.nr:link, #map_portal a.nr:visited { 
	border-color:#DBDBDB; background-color:#D4B19D;
	 }
#map_portal a.nr:hover { background-color:#C4694D; }	

#main_site_links {  position:absolute; }	
 #plemont 	{ left:30px; top:2px; width:45px; height:30px; }
 #greve_de_lecq 	{ left:100px; top:20px; width:55px; height:30px; }
 #gorey 		{ left:390px; top:160px; width:45px; height:60px; }
 #rice_bowl 	{ left:280px; top:220px; width:65px; height:40px;  }
 #bel_royal 	{ left:170px; top:160px; width:90px; height:60px; }
 #st_brelade 	{ left:110px; top:190px; width:35px; height:30px; }
 #st_ouen 	{ left:40px; top:90px; width:65px; height:87px; }

#stouen_site_links { display:none; background-color:#0f0;height:200px; position:absolute; }
 #secrets 	{ left:150px; top:-22px; width:120px; height:90px; }
 #sands 	{ left:180px; top:85px; width:120px; height:90px; }
 #la_braye 	{ left:170px; top:190px; width:125px; height:100px; }


/* ============= Z-INDEX  ================  */
#map { z-index:1 }
#map_rules_overlay_wrap { z-index:2; }
#zoom_out { z-index:3; }
#main_site_links, #stouen_site_links { z-index:4; }


/* =============  INFO PANEL  ================  */
#click_map_instr { font-size:14px; padding-left:10px; color:#6886B9; }

#site_summary { 
	width:405px; height:270px; margin-left:10px; padding:10px; float:left;
	border:solid 3px #333; background-color:#FDFDE4;
	font-size:14px; color:#555;
	overflow:auto;
	/* -webkit-border-radius: 10px; */
	}
 #site_summary .title { font-size:18px; font-weight:800; color:#49A533; margin-bottom:5px; }	
 #site_summary .subtitle { font-size:14px; font-weight:800; color:#3175CE; margin-top:10px; }
	
#site_summary .nr { color:#A63D33; }
	
.spacer { height:10px; clear:both; }	
	
#status { 
	position:absolute; top:130px; left:400px;
	width:50px; height:14px; padding:1px 2px; margin-top:5px; 
	font-size:12px; color:#ccc; text-align:center; border:solid 1px #DDDEDF; 
	}