/* CSS Document */

body {
	margin:auto;
	padding:0;
	text-align: center;
	text-align: -moz-center;
	background-color: #002034;
}

#head-container {
	padding:0;
	margin:0;
	width: 980px;
	height: 284px;
}

#header {
	background:url(sliced_bg/new_headers/double_header_windsurfing.jpg) no-repeat;
	height: 285px;
	width: 980px;
	position: relative;
	float:left;
}

#header {
	background:url(sliced_bg/new_headers/double_header_windsurfing.jpg) no-repeat;
	height: 285px;
	width: 980px;
	position: relative;
	float:left;
}

#header-flash {
	background:url(sliced_bg/new_headers/flash_single_header_wsports.jpg) no-repeat;
	height: 147px;
	width: 980px;
	position: relative;
	float:left;
}

#header-wsports {
	background:url(sliced_bg/new_headers/double_header_wsports.jpg) no-repeat;
	height: 285px;
	width: 980px;
	position: relative;
	float:left;
}

#flash-container {
		height: 100px;
	width: 980px;
	position: relative;
	float:left;
}

#new-features {}

#nav-content-container{
	background:url(sliced_bg/ww_web_bg980_11.jpg) repeat-y;
	width: 980px;
}

#left-nav-bar{
	background: url(sliced_bg/ww_web_bg980_03.jpg) no-repeat;
	width: 166px;
	height: 100%;
	position: relative;
	float: left;
}

#content-top {
	background:url(sliced_bg/ww_web_bg980_14_achill.jpg) no-repeat;
	width:811px;
	height: 25px;
	position: relative;
	float: right;
} 

#content-top h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 80%;
	padding: 0px;
}

#content-pain {
	background: url(sliced_bg/ww_web_bg980_08.jpg) repeat-y;
	width: 811px;
	position: relative;
	float: right;
	text-align: left;
}

#content-pain ul li {
	font-family:Arial, Helvetica, sans-serif;
	list-style-type:circle;
	font-size: 80%;
	font-weight: bolder;
	color: #0D7FC6;
	margin-left: 10px;
	}

p.qhighlight {
	font-weight:bold;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 20px;
	font-style: italic;
	}

#content-bottom {
	background: url(sliced_bg/ww_web_bg980_06.jpg) no-repeat;
	position: relative;
	float: right;
	width: 811px;
	height: 24px;
}

#content-news {
	position:relative;
	width:200px;
	height:600px;
	float: right;
	background-color: #EEEEEE;
	border-left-color: #000000;
	}

#footer {
	background: url(sliced_bg/ww_web_bg980_07.jpg) no-repeat;
	height: 125px;
	width: 980px;
	position: relative;
	float: right;
}

/*This is the CSS for the Clock*/
#clock {
	width: 150px;
	position: relative;
	right: 5px;
}

This is the CSS used to control the top navigation links
.preload1 {background: url(menu/blank_over.gif);}
.preload2 {}

.menu2 {
	padding:0 0 0 32px;
	list-style:none;
	width:520px;
	height:28px;
	position:relative;
	font-family:arial, verdana, sans-serif;
	float: right;
	top: 5px;
}
.menu2 li.top {
	display:block;
	float:left;
}
.menu2 li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#000000; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px;}
.menu2 li a.top_link:hover {color:#FFFFFF; background: url(menu/blank_over.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(menu/blank_over.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(menu/blank_overa.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#CCCCCC; background: url(menu/blank_over.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(menu/blank_over.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(menu/blank_overa.gif) no-repeat right top;}


.menu2 table {width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible; position:relative; z-index:200;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:0; top:31px; background: #fff; padding:3px; border:1px solid #000; white-space:nowrap; width:90px; height:auto; z-index:300;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000000; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fff;}
.menu2 :hover ul.sub li a:hover {background:#2A73AD; color:#000000;}
.menu2 :hover ul.sub li a.fly:hover {background:#ff0000url(menu/arrow_over.gif) 80px 7px no-repeat; color:#082842;}
.menu2 :hover ul li:hover > a.fly {background:#2A73AD url(menu/arrow_over.gif) 80px 7px no-repeat; color:#000000;} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #000; white-space:nowrap; width:90px; z-index:400; height:auto;}

/*Left navigation CSS*/

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

#navigation {
	width: 164px;
	position: relative;
	margin-top: 10px;
	border-top: 1px solid #ffffff;
	text-align: left;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

#navigation li.heading {
text-align:center;
color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style:italic;}

#navigation li {
	border-bottom: 1px solid #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 82%;
}
#navigation li a:link, #navigation li a:visited {
font-size: 82%;
display: block;
padding: 0.6em 0 0.6em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #000000;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #000000;
}

p.left-nav-tag {
	margin-top:40px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-left: 15px;
}

#isa {
	margin-top:20px;
	text-align: center;
}

#windguru {
	margin-top: 20px;
	text-align: center;
}

p.isa-text {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size: 10px;
	padding: 2px;
}

.page-intro {
	width: 745px;
	margin-top: 5px;
	text-align: left;
	color: #000000;
	padding-left: 12px;
}

.page-intro h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1em;
}

The follwing code is used to style the content boxs
* html #tlc, * html #trc {height: 1%;}

#tlc, #trc { zoom: 1 }

#box
	{
	position: relative;
	margin-top: 5px;
	padding: 0px;
	text-align: left;				/* <-- use this for a set width */
	background-color: #eeeeee;
	margin-left: 12px;
	}
	
#course-box
	{
	position: relative;
	margin-top: 5px;
	padding: 0px;
	text-align: left;				/* <-- use this for a set width */
	background-color: #eeeeee;
	margin-left: 12px;
	height: 700px;
	}
 	
#content
	{
	padding:3em;
	padding-top: 1em;
	}

#content h1
	{
	color:#002034;
	font-weight: bold;
	font-size: 16px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	}
	
#content h5 {
	color:#040068;
	font-weight: bold;
	font-size: 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
		
#content p
	{
	color:#000000;
	font-size: 75%;
	line-height: 1.3em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
		
#content h3 {
	font-family:"Times New Roman", Times, serif;
	font-size: 14px;
	color: #990000;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #711515;
}

/* ---=== border code follows ===--- */
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/

h4.courses {
	font-family:"Times New Roman", Times, serif;
	font-size: 16px;
	text-align: center;
	margin-top: 15px;
	color: #990000;
	margin-bottom: 5px;
	}
	
p.courses {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	margin-right: 10px;
	text-align: left;
	float: right;
	position: relative;
	width: 200px;
	right: 5px;
	padding-left: 10px;
	}

#tlc, #trc, #blc, #brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#tlc
	{
	background-image:url(box-imgs/tlc.gif);
	background-position: 0% 0%;
	}

#trc
	{
	background-image:url(box-imgs/trc.gif);
	background-position: 100% 0%;
	}
	
#blc
	{
	background-image:url(box-imgs/blc.gif);
	background-position: 0% 100%;
	}

#brc
	{
	background-image:url(box-imgs/brc.gif);
	background-position: 100% 100%;
	}

#tb, #bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#tb
	{
	background-image:url(box-imgs/tb.gif);
	background-position: 0% 0%;
	}

#bb
	{
	background-image:url(box-imgs/bb.gif);
	background-position: 50% 100%;
	}
	
#rb
	{
	background-image:url(box-imgs/r.gif);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

#lb
	{
	background-color: #eeeeee;
	background-image:url(box-imgs/l.gif);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}

#intro-pic {
	position: relative;
	float: right;
	margin-bottom: 20px;
	margin-left: 5px;
	text-decoration: none;
}

#intro-pic2 {
	position: relative;
	float: left;
	margin: 10px;
	width: 200px;
}

#intro-pic3 {
	float: right;
	margin: 10px;
	width: 200px;
	position: relative;
}

#intro-pic4 {
	float: right;
	margin: 10px;
	width: 200px;
	position: relative;
}

#intro-pic5 {
	float: right;
	margin: 10px;
	width: 92px;
	position: relative;
}

#intro-pic6 {
	position: relative;
	float: right;
	width: 115px;
	margin-left: 10px;
}

#intro-pic7 {
	position: relative;
	float: right;
	margin-left: 5px;
	text-decoration: none;
}

#intro-pic-img {
	position: relative;
	float: left;
	margin: 10px;
	width: 80px;
}

#intro-pic-img2 {
	margin: 10px;
	width: 80px;
	position: relative;
}

#content a {
	color:#0066FF;
	text-decoration: none;
}

#foot-clear {
	clear:both;
	}
#footer {
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#results-table {
	background-color:#002034;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#search-form {
	background-color:#FFFFFF;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	position: relative;
	float: left;
	width: 770px;
	height: 200px;
	font-weight: bold;
}

#gallery-content
	{
	padding:2em;
	padding-top: 1em;
	padding-right: 3em;
	}

#gallery-content p {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.course-box {}

#beg-course{
	background:url(imgs/courses_boxes/beginner.jpg);
	background-color:#990000;
	height:171px;
	width: 300px;
	height: 171px;
	float: right;
	position: relative;
	}

#imp-course{
	background:url(imgs/courses_boxes/improver.jpg);
	background-color:#FF6600;
	width: 300px;
	height: 171px;
	float: right;
	margin-top: 10px;
	position: relative;
	}
	
#adv-course{
	background:url(imgs/courses_boxes/advanced.jpg);
	background-color:#009900;
	width: 300px;
	height: 171px;
	float: right;
	margin-top: 10px;
	position: relative;
	}

/*#special-course{
	background:url(imgs/courses_boxes/specialist.jpg);
	background-color:#000066;
	width:300px
	height:400px;
	width: 300px;
	float: left;
	margin-left: 30px;
	margin-top: 20px;
	height: 171px;
	position: relative;
	}*/
	
p.courses-link {
	position:relative;
	top: 155px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;

}

#adult-courses {
	width:500px;
	height: 50px;
	left: 160px;
	background:url(imgs/adult_courses_img.gif) no-repeat;
	text-align: center;
	position: relative;
	float: left;
	}
#content p.junior {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #002034;
	color: #FFFFFF;
	text-align: center;
	}

#logo-pic1 {
	position:relative;
	float: left;
	margin-right: 10px;
	}
	
#logo-pic2 {
	position:relative;
	float: right;
	margin-left: 2px;
	}

#ga-pic {
	position:relative;
	float: right;
	margin-left: 10px;
	}
	
#ruth-pic {
	position:relative;
	float:left;
	margin-right: 10px;
	}

#rrd {
	position:relative;
	float:left;
}

#go-pic {
	position:relative;
	float:left;
	padding-right: 30px;
	}
	
#roundcont-container{
	position: relative;
	float: right;
	margin-left: 5px;
}
	
.roundcont {
	width: 180px;
	background-color: #002034;
	position: relative;
	float: right;
	margin-left: 5px;
}

.roundcont p {
	margin: 10px;
	color: #FFFFFF;
}

.roundtop { 
	background: url(tr.gif) no-repeat top right; 
}

.roundbottom {
	background: url(br.gif) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}


#content .roundcont p{
	color: #FFFFFF;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-left: 10px;
}

#homepage-img {
	position: relative;
	float: left;
	margin-right: 5px;
}

#s1-small {
	position: relative;
	float: right;
	margin: 2px;
}

.intro-text {
	position: relative;
	float: left;
	width: 440px;
}

.intro-text1 {
	position: relative;
	float: left;
	width: 140px;
}

.intro-text2 {
	position: relative;
	float: left;
	width: 140px;
}

.intro-text4 {
	position: relative;
	float: left;
	width: 140px;
	padding-bottom: 2px;
}

#feb {
background-color:#0066FF;}
#march {background-color:#00CCFF;}
#april {background-color:#00CC99;}
#may {background-color:#FFCC00;}
#april {}
#june {
	background-color: #CC3333;
}
#july {
	background-color: #FFFF66;
}
#august {
	background-color: #66cc33;
}
#sept {
	background-color: #66cc99;
}
#oct {
	background-color: #0099CC;
}
#nov {
	background-color: #006699;
}

h2.events {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000033;
	margin-left: 10px;
}

p.events {
	margin-left: 10px;
}

#supman {
	position: relative;
	float: left;
	width: 200px;
	margin-right: 5px;
}

#sup-flash {
	position: relative;
	float: right;
	margin-left: 5px;
}

#rrd-sup {
	position: relative;
	float: left;
	margin-right: 10px;
}

.inst-pic1 {
	position: relative;
	float: left;
	margin-right: 5px;
}

.inst-pic2 {
	position: relative;
	float: right;
	margin-right: 5px;
}

#counter {
	position: relative;
	float: left;
}

.links-logos {
	position: relative;
	float: right;
}

.video-comments {
	background:url(imgs/video_comments.jpg) no-repeat;
	position: relative;
	float: right;
	width: 230px;
	height: 260px;
	border: 1px solid #000000;
	padding: 10px;
}

#rrd-improve-page {
	position: relative;
	float: right;
	margin-left: 40px;
}

#imp-course-box {
	position: relative;
	width: 630px;
	margin-top: 50px;
}

/* 
  CSS reqired for the email form
*/

#mail-form {
	width: 550px;
	padding-top: 10px;
	margin-top: 40px;
	}

/* for main form wrapping div */
div#gb_form_div {
	width: 650px;
}

/* id for the form itself */
form#gb_form {
	width: 650px;  /* not styled on demo page */
	margin-top: 10px;
}

/* form and results heading size */
.main_formhead, .formhead { 
  font-size : 1em; 
  color : #FF0000; 
}

/* outer fieldset - it's common to make this border : 0; */
fieldset#formwrap { 
  background-color : #fefefe; 
}

/* section fieldsets - it's common to make this border : 0; */
fieldset { 
  background-color : #fafafa; 
}

/* form legends and dt "heading" */
legend, dt { 
  font-weight : bold; 
  color : #FF0000;
}

/* main legend at top of the form */
legend#mainlegend { 
  font-size : 1.2em;
  color : #000000; 
}

/* form label text */
label { 
  color : #000033;
}

/* all inputs, select, and textarea */
input.med, input.short, select.med, textarea.textbox { 
  font : 80% 'Trebuchet MS', sans-serif; 
  color : #666; 
  padding : 2px; 
  border : 1px solid #cc9000;
  background-color : #fffffa;
}

/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE */
input.med:hover, input.med:focus, input.short:hover, input.short:hover, select.med:hover, select.med:focus, textarea.textbox:hover, textarea.textbox:focus, input.med.hover, input.med.focus, input.short.hover, input.short.focus, select.med.hover, select.med.focus, textarea.textbox.hover, textarea.textbox.focus { 
  color : #000;  
  border : 1px solid #000;
  background-color : #fff;
}

/* for the checkbox input */
input.checkbox {
  /* not styled on demo page */
}

/* error heading weight and color - bold is for the error reason text */
span.error, dt.error, strong.error { 
  color : #cd0000; 
  font-weight : bold; 
}

/* success heading color */
span.success { 
  color : #669900; 
  font-weight : bold; 
}

/* privacy and "Why?" small element link sizes (relative to their parent element */
small.privacy, small.whythis { 
  font-size : 80%; 
}

/* set up relativity to position small Why? text */
small.whythis { 
  position : relative; 
}

/* Why? link style */
small.whythis a { 
  text-decoration : underline; 
  font-size : 0.95em;
}

small.whythis a:hover, small.whythis a:focus, small.whythis a:active { 
  text-decoration : none;
} 

/* hide the Why? text span */
small.whythis a span { 
  border : 1px solid #fafafa; 
  background-color : #fafafa; 
  padding : 0 4px 0 4px; 
  color : #fafafa;
  text-decoration : none; 
}

/* bring back Why? text span (title attribute backs this up for borwsers it doesn't function in */
small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span { 
  border : 1px solid #000; 
  background-color : #eecc11; 
  color : #000;
  padding : 0 4px 0 4px; 
  text-decoration : none; 
}

/* the link back to me for form credit */
p.creditline { 
  float : right; 
  margin : -17px 0; 
  padding-bottom : 1px; 
  font-size : 80%; 
}

/* used for abbreviation used relative to form. the .abbr class is for the span added for IE */
abbr, .abbr { 
  cursor : help; 
  border-bottom : 1px dotted #999;
}

/* set result color for blockquote dt "heading" */
dl#result_dl_blockq dt, dl.result_dl_blockq dt {
  color : #669900;
}

/* position result blockquote flush with parent */
dl#result_dl_blockq blockquote, dl.result_dl_blockq blockquote {
  margin-left : 0;
}

/* style the input names in the result */
div#hf_form_div span.items {
  font-weight : bold;
  color : #cc9900;
}

/*Severne sails CSS*/
.severne-sails-right {
	position: relative;
	float: right;
}