/* CSS To govern the PAGE Layout associated with the BODY tag */
body { margin:0; padding:0; font:70% 'Lucida Grande',Verdana, Helvetica, sans-serif; text-align: center; }
	#threeColLayout { background: #99ccff url(../images/bg.gif) repeat-x fixed;}
	#twoColLayout { background: #99ccff url(../images/bg.gif) repeat-x fixed;}
	#oneColLayout { background: #99ccff url(../images/bg.gif) repeat-x fixed;}
body.home #mainNav a#home, body.facilities #mainNav a#facilities, body.pclub #mainNav a#pclub, body.lessons #mainNav a#lessons, body.prices #mainNav a#prices, body.events #mainNav a#events, body.gallery #mainNav a#gallery, body.findus #mainNav a#findus { background: #ffffff; color: #003366; }
body.home #mainNav a:hover#home, body.facilities #mainNav a:hover#facilities, body.pclub #mainNav a:hover#pclub, body.lessons #mainNav a:hover#lessons, body.prices #mainNav a:hover#prices, body.events #mainNav a:hover#events, body.gallery #mainNav a:hover#gallery, body.findus #mainNav a:hover#findus { color: #003366; }

/* Navigation CSS */
#mainNav { margin:-25px 0 0 20px; padding:0; width:700px; font-weight:bold; font-size:102%; }
#mainNav ul  { list-style:none; margin:0; padding:0; border:none;}
#mainNav li { display:block; margin: 0 8px 0 0; padding:0; float:left; width:auto; }
#mainNav a { color:#6699ff; display:inline; width:auto; text-decoration:none; background:#ffffff; margin:0; padding: 1px 10px 2px 0px; border-right: 0px solid #003399;}
#mainNav a:hover, #mainNav a:active { background:#ffffff; color:#003366; } 
#mainNav a.active:link, #mainNav a.active:visited { position:relative; z-index: 102; background:#ffffff; color:#003366; font-weight:bold; }

/* now the three main columns, named in order of importance and display when styles switched off */
/* note that specifying n_ColLayout in the body will activate the n_ColLayout div instead of the default primaryContent */
/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */
/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */
/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */
#primaryContent { float:left; width:750px; display:inline; margin: 0; }
#twoColLayout #primaryContent {width:555px; float:left; margin: 0 0 0 195px;}
#sideContent{ float:left; width:180px; margin: 0 0 20px -750px;}

/* main wrapper that holds it all centrally */
#wrapper {width:750px; margin-left: auto; margin-right: auto; text-align: left; background-color: #ffffff; }

/* default masthead holding the banner and mainNav */
#header { width:750px; height:91px; background:url(../images/header.gif) no-repeat; }

/* BOX is the content holder */
.box {margin: 7px 20px 0 20px; padding:5px 0 5px 0; /* remove for testing background:url(../images/diags.gif); */}

/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */
.cbSide {width:180px; margin:5px 0 0 0; padding:10px 0 5px 0; background: transparent; }
.cbSide ul {list-style-type: none; margin: -15px 0 0 0; padding: 5px; }
.cbSide li a:link, .cbSide li a:active, .cbSide li a:visited {color:#003399; line-height:160%; text-decoration:none; display:block; width:155px; border-bottom: 1px solid #99ccff; background: transparent; font-size: 93%}
.cbSide li a:hover {color:#6699ff; line-height:160%; display:block; width:155px; border-bottom: 1px solid #003399; text-decoration:none; }

/* paragraph colours and formatting */
.cbb {padding:0 10px 0 5px;  color: #003399; }
.cbb p {margin: 0; padding: 0 0 0px 0; color: #003399;}
.cblb {padding:0 10px 0 5px;color:#6699ff; }

/* back to top links for gallery usage */
.gallup a:link, .gallup a:visited { background: url(../images/up.gif); text-decoration: none; color: #003366; display: block; width: 40px; height:15px; margin-bottom:3px; margin-left:480px}
.gallup a:hover { background-position: 0px 15px; text-decoration: none; }
	
/* headers are used to determine the caption at the top of each box element */
/* h1 is off screen for browser compatibility */
/* h3 statements, are unique to whichever section is being targeted */
h1 { margin: 0; padding: 35px; font-size: 90%; color: #FF0000; text-indent: -9000px; } 
h2 { margin: 0; padding: 2px 5px; font-size: 100%; font-weight: bold; color: #003366; background: #99ccff; width: 150px;}
h3 { margin: 0; padding: 2px 5px; font-size: 100%; font-weight: bold; color: #003366; background: #99ccff; width: 500px;}
h4 { font-size: 100%; margin-top: 15px; margin-left: 5px; margin-bottom:-5px; padding: 0; color:#6699ff; background: #ffffff;}

/* Footer */
#footer { clear:both; width: 750px; height: 81px; background: transparent url(../images/footer.gif) no-repeat; padding: -50px 0 0 0; }
.tele { margin: 0 0 0 510px; width:230px; padding: 15px 0 0 0; font-weight: bold; font-size: 100%; color: #003399;}
.mail { margin: 0 0 0 510px; width:230px; font-weight: bold; font-size: 100%; color: #6699ff;}
#footer a:link, #footer a:visited {margin: 0; text-decoration: none; color: #6699ff}
#footer a:hover { text-decoration: none; color: #003399; background: #ffffff; }

/* default links */
a:link, a:visited { background-color: #ffffff; text-decoration: underline; color: #6699ff;}
a:hover { background-color: #ffffff; text-decoration: underline; color: #003366; }

.port {display:block; float:none; margin:0 0 10px 90px ; padding: 2px; border:1px solid #003366;}
.land {display:block; float:none; margin:0 0 10px 40px ; padding: 2px; border:1px solid #003366;}
.homeimg {display:block; float:none; margin-left: 5px; padding: 2px; border:1px solid #003366;}
.sideimg {display:block; float:none; margin-top: -17px; margin-bottom: 5px; margin-left: 5px; border:1px solid #003366;}
.default img {border: 0; margin: 0}

/* Event and Lesson table properties */
table.LBEC { display:block; width: 500px; margin-top: 10px; margin-left: 5px;  background-color: #ffffff; border: 1px #336699 solid; border-collapse: collapse; border-spacing: 0px;}
td.rwWhite { padding: 6px; text-align: left; font-size: 90%; color: #003366; background-color: #ffffff; }
td.rwCyan { padding: 6px; text-align: left; font-size: 90%; color: #003366; background-color: #99ccff; }

/* Lessons Page Lists */
ul.list-left {margin-left: 50px; margin-top: -5px; margin-bottom: -15px; padding: 0;}
ul.list-left li {margin: 0; font-weight: normal; font-size: 100%; color: #003399;}
ul.list-right {margin-left: 200px; margin-top: -65px; padding: 0;}
ul.list-right li {margin: 0; font-weight: normal; font-size: 100%; color: #003399;}

.thum {display: block; float: none; margin: 0 0 35px 5px;}
.thumpic {margin-bottom: 30px; padding: 2px; border:1px solid #003366;}
.thumtitle {font-weight: bold; font-size: 100%;  margin: -115px 0 0 115px; color:#6699ff; background: #ffffff;}
.thumnarr {font-weight: normal; font-size: 100%;  margin: 5px 0 0px 115px; width: 400px; color:#003399; background: #ffffff;}

.alert {display:block; background: #ff6633; font-wreight: bold; text-size: 110%; color: #ffffff; padding: 5px;}