body {
color: #000;
margin: 0;
padding: 0;
text-align: center;
font: normal 70%/180% "Trebuchet MS", arial, helvetica, sans-serif;
background: #666 url( pge_bgd.jpg ) bottom left fixed repeat-x ;
}

.clr {
clear: both;
}

.important  {
color:#f00;
}
.error {
	color: #c33;
	font-weight: bold;
	font-size: 120%;
}

hr {
clear: both;
border: 0;
background: #fff;
color: #fff;
border-top: 1px solid #9c9;
padding: 0;
margin: 10px 20px 0 20px;
}

* html hr {
margin: 0;
}

em {
font-style: italic;
}

img, img.noBorder, input.check {
border: none;
}

#content div.icon, #content div.img div.icon {
padding: 5px 0;
}

#content div.icon, #content div.ic div.icon {
padding-left: 10px;
margin-left:10px;
}

#content div.icon img, #content div.img div.icon img {
height: 16px;
width: 16px;
float: left;
display: inline;
margin-right: 5px;
border: none;
}

#content div.icon strong, #content div.img div.icon strong {
color: #000;
}

/* BREADCRUMB */

#breadcrumb {
background-color: #eee;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}

#breadcrumb p {
margin: 0;
padding: 2px 20px;
color: #999;
}

#breadcrumb a {
margin: 0;
padding: 2px 20px;
color: #36c;
}

#content strong {
color: #333;
}

/* FORMS */

form {
margin: 0;
padding: 0;
}

div.column1 , div.colunm2 {
display:inline;
float:left;
text-align:left;
width:250px;
padding:0;
margin:20px;
}

form fieldset {
border: 0;
padding: 5px;
margin: 5px;
}

form fieldset legend {
font-weight: bold;
font-size: 120%;
padding-left: 10px;
margin-left: 0;
color: #a7430f;
}

form fieldset div.formLegend {
float: left;
width: 120px;
text-align: right;
padding: 0 5px 3px 0;
margin: 0;
font-size: 120%;
color: #36c;
}

form fieldset div.formLegend small {
font-weight: normal;
color: #333;
}

form fieldset div.formElement {
float: left;
width: 350px;
padding: 0 0 3px 0;
margin: 0;
color: #666;
}

form fieldset div.formElement span {
color: #666;
}

form fieldset div.formElement img {
margin-top: 3px;
}

form fieldset div.formElement strong {
color: #587f32;
font-size: 120%;
}


input, select, textarea {
font: normal 120% Verdana, Arial, Helvetica, sans-serif;
color: #333;
border: 1px solid #36c;
}

input.xs {
width: 25px;
}

input.s {
width: 50px;
}

input.m {
width: 150px;
}

input.l {
width: 225px;
}

input.xl {
width: 300px;
}

input.submit {
background-color: #36c;
color: #fff;
font-weight: bold;
font-size: 12px;
}

input.back {
background-color: #eee;
color: #333;
font-size: 11px;
border-color: #999;
}

input.button2 {
background-color: #eee;
color: #333;
font-size: 11px;
border-color: #999;
}

input.button4 {
background-color: #a7430f;
color: #fff;
font-size: 11px;
border-color: #000;
}

textarea {
width: 225px;
height: 75px;
overflow: auto;
}

textarea.tall {
height: 125px;
}

textarea.taller {
height: 250px;
}

textarea.wide {
width: 300px;
}


form div.formWrapper {
background-color: #CAEADF;
border:none;
width: 540px;
overflow: hidden;
display: inline;
float:left;
padding: 0;
margin: 0 0 60px 20px;
}

form.agegroup1 div.formWrapper {
background: #9EBF32 url( form_logo_age1.gif ) no-repeat 380px 35px;
}

form.agegroup2 div.formWrapper {
background: #EC5922 url( form_logo_age2.gif ) no-repeat 380px 35px;
}

form.agegroup3 div.formWrapper {
background: #762E6A url( form_logo_age3.gif ) no-repeat 380px 35px;
}


form div.formWrapperTop {
width: 540px;
height: 32px;
overflow: hidden;
display: block;
padding: 0;
margin: 0;
background: #fff url( formtop_bgd.gif ) top left no-repeat;
}

form.agegroup1 div.formWrapperTop {
background: #fff url( form_bgd_top_age1.gif ) top left no-repeat;
}

form.agegroup2 div.formWrapperTop {
background: #fff url( form_bgd_top_age2.gif ) top left no-repeat;
}

form.agegroup3 div.formWrapperTop {
background: #fff url( form_bgd_top_age3.gif ) top left no-repeat;
}

form div.formWrapperBot {
height: 32px;
width: 540px;
display: block;
overflow: hidden;
padding: 0;
margin: 0;
background: #fff url( formbot_bgd.gif ) bottom right no-repeat;
}

form.agegroup1 div.formWrapperBot {
background: #fff url( form_bgd_bot_age1.gif ) bottom right no-repeat;
}

form.agegroup2 div.formWrapperBot {
background: #fff url( form_bgd_bot_age2.gif ) bottom right no-repeat;
}

form.agegroup3 div.formWrapperBot {
background: #fff url( form_bgd_bot_age3.gif ) bottom right no-repeat;
}

form.agegroup1 p,
form.agegroup1 fieldset div.formElement span,
form.agegroup1 fieldset div.formElement,
/*form.agegroup1 fieldset div.formElement input.s,*/
form.agegroup1 legend,
form.agegroup1 div.formLegend,
form.agegroup2 p,
form.agegroup2 fieldset div.formElement span,
form.agegroup2 fieldset div.formElement,
/*form.agegroup2 fieldset div.formElement input.s,*/
form.agegroup2 legend,
form.agegroup2 div.formLegend,
form.agegroup3 p,
form.agegroup3 fieldset div.formElement span,
form.agegroup3 fieldset div.formElement,
/*form.agegroup3 fieldset div.formElement input.s,*/
form.agegroup3 legend,
form.agegroup3 div.formLegend
{
color:#fff;
}

/* CONTACT FORM */


#content div.address {
width: 220px;
float: left;
display: inline;
}

#content div.form {
width: 560px;
float: left;
display: inline;
}

#content div.form fieldset div.formElement{
width: 360px;
float: left;
display: inline;
}

/* CONTENT PAGES */

#content div.txt {
float: left;
display: inline;
width: 370px;
}

#content div.fw {
width: 560px;
}

#content div.txt p {
padding-right: 0;
}

#content ul {
list-style-type: none;
padding: 0;
margin:10px 0 0 0;
padding:0 0 5px 20px;
}

#content ul li {
width: auto;
float: none;
padding-left:10px;
background: transparent url( bul_tri_active_sub.gif) no-repeat 2px 7px ;
}

#content div.img {
float: left;
display: inline;
width: 190px;
padding-bottom: 5px;
}

.youngChampion #content div.img {
width:195px;
border: none;
}

#content div.img span.caption {
text-align: left;
width: 180px;
display: block;
font: bold 90%/160% "Trebuchet MS", arial, helvetica, sans-serif;
color:#666;
text-decoration:none;
}

#content div.img img {
width: 178px;
border: 1px solid #ccc;
}

.youngChampion #content div.img img {
width:195px;
border: none;
}

#content div.pad1 {
padding-left: 10px;
padding-bottom: 10px;
}

#content div.pad1 a span.caption , #content div.pad1 a {
color:#36c;
text-decoration:none;
}

#content div.pad1 a span.caption:hover , #content div.pad1 a:hover {
color:#9c9;
text-decoration:none;
}

#content div.pad2 {
padding-right: 10px;
padding-bottom: 10px;
}

#content div.pad {
padding: 0;
float: left;
display: inline;
width: 200px;
}

#content div.pad img {
display: block;
width: 178px;
border: 1px solid #ccc;
}



#content div.pad span.caption {
text-align: center;
width: 180px;
display: block;
font: bold 90%/160% "Trebuchet MS", arial, helvetica, sans-serif;
color:#666;
text-decoration:none;
}

/* LINKS IMG/TXT */

#content div.link {
width: 540px;
padding: 20px;
}

#content div.link div.linkTxt {
width: 420px;
float: left;
display: inline;
}

#content div.link div.linkTxt h2 {
padding: 0 5px 5px 0;
margin: 0;
font-size: 120%;
}

#content div.link div.linkTxt h2 a {
color: #36c;
text-decoration:none;
}

#content div.link div.linkTxt p {
padding: 0 5px 5px 0;
margin: 0;
}

#content div.link div.linkTxt p.url {
font-weight: bold;
color: #666;
}

#content div.link div.linkTxt p.url a {
font-weight: normal;
color: #36c;
}

#content div.link div.linkImg {
width: 120px;
float: left;
display: inline;
}

#content div.link div.linkImg img {
width: 118px;
border: 1px solid #ccc;
}

h1 {
margin: 0;
padding: 0 5px 10px 20px;
font-size: 150%;
line-height: 130%;
}

h2 {
margin: 0;
padding: 5px 5px 0 20px;
font-size: 130%;
line-height: 130%;
}

h3 {
margin: 0;
padding: 5px 5px 0 20px;
font-size: 110%;
}

h4 {
margin: 0;
padding: 5px 5px 0 20px;
font-size: 100%;
}

h1, h2 {
color: #36c;
}

h3, h4 {
color: #036;
}

#floatCentral {
position:relative;
display:block;
width: 760px;
margin: auto;
padding: 0;
text-align: left;
visibility: visible;
}

#outerWrap {
position: absolute;
top:10px;
width: 760px;
padding: 0px;
display: block;
visibility: visible;
border-left:1px solid #fff;
border-bottom:1px solid #fff;
background-position:0 150px;
}

/* Start Colour coding */

.welcome {
background: #096 url( section_graphics/sec_welcome.gif ) no-repeat;
}

div.welcome h1 {
background: transparent url( h1_welcome.gif ) no-repeat 16px 0;
width:360px;
height:25px;
text-indent:-9000px;
color:#36c;
padding:0;
margin:0;
}



/*
div.welcome h1 {
background: transparent url( h1_welcome.gif ) no-repeat 16px 0;
width:360px;
height:25px;
color:#36c;
padding: 0 5px 10px 34px;
font-size: 120%;
line-height: 130%;
margin:0;
}
*/



.youngChampion  {
background-color:#036;
}

.youngChampion.ageOne  {
background-color:#9EBF32;
}

.youngChampion.ageTwo {
background-color:#EC5922;
}

.youngChampion.ageThree {
background-color:#762E6A;
}


.harbour {
background: #099 url( section_graphics/sec_harbour.gif ) no-repeat;
}

div.harbour h1 {
color: #099;
}

.weatherTides {
background: #036 url( section_graphics/sec_weather.gif ) no-repeat;
}

div.weatherTides h1 {
color: #036;
}

.moorings {
background: #606 url( section_graphics/sec_moorings.gif ) no-repeat;
}

div.moorings h1 {
color: #606;
}

.riverGuide {
background: #990 url( section_graphics/sec_riverGuide.gif ) no-repeat;
}

div.riverGuide h1 {
color: #990;
}

.commercial {
background: #f60 url( section_graphics/sec_commVessels.gif ) no-repeat;
}

div.commercial h1 {
color: #f60;
}

.luxury {
background: #69f url( section_graphics/sec_luxury.gif ) no-repeat;
}

div.luxury h1 {
color: #69f;
}

.visiting {
background: #f36 url( section_graphics/sec_visiting.gif) no-repeat;
}

div.visiting h1 {
color: #f36;
}

.events {
background: #f39 url( section_graphics/sec_news.gif ) no-repeat;
}

div.events h1 {
color: #f39;
}

.contactSec {
background: #c9f url( section_graphics/sec_contact.gif ) no-repeat;
}

div.contactSec h1 {
color: #c9f;
}

.linksSec {
background: #963 url( section_graphics/sec_links.gif) no-repeat;
}

div.linksSec h1 {
color: #963;
}

/* End Colour coding */

#outerWrap div.outerWrapL {
position:relative;
display:inline;
float:left;
width: 22px;
padding: 0px;
visibility: visible;
background-color: #fff;
height:1px;
}

#outerWrap div.outerWrapR {
position:relative;
display:inline;
float:right;
width: 738px;
padding: 0px;
visibility: visible;
background-color: #fff;
}

#header {
position:relative;
width: 737px;
padding: 0px;
margin:0px;
height: 123px;
display: block;
visibility: visible;
background: #666 url( masthead_bgd.gif) no-repeat top right;
border-left:1px solid #fff;
}

.youngChampion #header {
background: #666 url( yca_test_bgd.gif ) no-repeat top right;
}

#header div.masthead {
display:none;
}

.youngChampion #header div.date {
display:none;
}

.youngChampion #header div.masthead {
display:block;
position:absolute;
top:26px;
left:550px;
width:165px;
height: 91px;
}



#header div.textSize {
position:absolute;
top:0px;
left:540px;
width:162px;
padding:0 0 0 30px;
margin:0;
background: transparent url( eye_icon.gif ) top left no-repeat ;
}

#header div.textSize p, #header div.textSize a {
color:#fff;
padding:3px 1px 1px 1px;
margin:0;
text-decoration:none;
}

#header div.textSize a:hover {
text-decoration:underline;
}

#header div.textSize span, #header div.textSize span a {
color:#9c9;
}

#header div.logo {
position:absolute;
top:20px;
left:10px;
width:182px;
height: 70px;
}

#header div.date {
position:absolute;
top:105px;
left:150px;
width:182px;
color:#fff;
}

#header div.date p {
margin: 0 5px 10px 5px;
}

#panelHolder {
position:relative;
width:587px;
padding: 0px;
height: 193px;
display: inline;
float:right;
visibility: visible;
background: transparent url( panel_holder_bgd.gif) no-repeat top right;
}

.youngChampion #panelHolder {
background: transparent url( panel_yca_test.gif) no-repeat top right;
}

.youngChampion.ageOne #panelHolder {
background: transparent url( panel_yca_test1.jpg) no-repeat top right;
}

.youngChampion.ageTwo #panelHolder {
background: transparent url( panel_yca_test2.jpg) no-repeat top right;
}

.youngChampion.ageThree #panelHolder {
background: transparent url( panel_yca_test3.jpg) no-repeat top right;
}



.youngChampion.ageOne #panelHolder div.featureRight,
.youngChampion.ageTwo #panelHolder div.featureRight,
.youngChampion.ageThree #panelHolder div.featureRight,
.youngChampion.ageOne #panelHolder div.featureLeft,
.youngChampion.ageTwo #panelHolder div.featureLeft,
.youngChampion.ageThree #panelHolder div.featureLeft {
display:none;
}


.youngChampion #panelHolder a,
.youngChampion #panelHolder p,
.youngChampion #panelHolder h3,
.youngChampion #panelHolder a {
color:#fff;
}

.youngChampion.ageOne h1,
.youngChampion.ageOne h2 {
color:#9EBF32;
}

.youngChampion.ageTwo h1,
.youngChampion.ageTwo h2 {
color:#EC5922;
}

.youngChampion.ageThree h1,
.youngChampion.ageThree h2 {
color:#762E6A;
}




div.welcome #panelHolder {
background: transparent url( panel_holder_bgd.jpg) no-repeat top right;
}

div.welcome #panelHolder img {
padding-left:4px;
border:none;
}

#panelHolder div.featureLeft {
position:absolute;
top:35px;
left:0px;
width:182px;
height: 124px;
padding:5px;
overflow: hidden;
}

#panelHolder h3 {
margin:0;
padding:0 0 8px 0;
}

#panelHolder a {
display:block;
text-decoration:none;
color: #36c;
}

#panelHolder h3 a {
color: #36c;
}

#panelHolder h3 a:hover , #panelHolder a:hover{
text-decoration:none;
color: #036;
}

#panelHolder div.colTxt {
margin:0;
padding:0;
display:inline;
float:left;
width:180px;
}

#panelHolder p {
font: normal 89%/180% "Trebuchet MS", arial, helvetica, sans-serif;
margin:0;
padding:0;
color:#666;
}

#panelHolder div.colTxt img {
display:inline;
float:right;
margin:6px 4px 4px 4px;
padding:0;
border:1px solid #36c;
}

div.welcome #panelHolder div.featureLeft {
overflow: visible;
}

div.welcome #panelHolder p {
font: bold 10px "Courier New", Courier, monospace;
padding:26px 2px 0 4px;
line-height: 14px;
color:#fff;
}

div.welcome #panelHolder div.featureLeft p {
padding:0;
margin:0;
}

div.welcome #panelHolder h3 {
padding:0;
margin:0;
}

#panelHolder div.featureMid {
position:absolute;
top:35px;
left:195px;
width:182px;
height: 124px;
padding:5px;
overflow: hidden;
}

#panelHolder div.featureRight {
position:absolute;
top:35px;
left:390px;
width:182px;
height: 124px;
padding:5px;
overflow: hidden;
}


.youngChampion #panelHolder div.featureLeft {
position:absolute;
top:75px;
left:5px;
width:182px;
height: 124px;
padding:5px;
overflow: hidden;
}

.youngChampion #panelHolder div.featureMid {
position:absolute;
top:75px;
left:200px;
width:182px;
height: 124px;
padding:5px;
overflow: hidden;
}

.youngChampion #panelHolder div.featureRight {
position:absolute;
top:75px;
left:395px;
width:182px;
height: 124px;
padding:5px;
overflow: hidden;
}


.youngChampion.ageOne #panelHolder div.featureMid,
.youngChampion.ageTwo #panelHolder div.featureMid,
.youngChampion.ageThree #panelHolder div.featureMid {
position:absolute;
top:35px;
left:200px;
}


div.welcome #panelHolder div.featureLeft table {
width:180px;
background: transparent url( home_tide_table_bgd.gif) no-repeat -3px 20px;
margin:0;
padding:0;
margin-top:2px;
}

div.welcome #panelHolder div.featureLeft table a {
font: normal 10px "Trebuchet MS", arial, helvetica, sans-serif;
color:#036;
text-decoration:none;
display:inline;
}

div.welcome #panelHolder div.featureLeft table a:hover {
color:#36c;
text-decoration:underline;
}

div.welcome #panelHolder div.featureLeft table th {
font: bold 10px "Trebuchet MS", arial, helvetica, sans-serif;
color:#fff;
width:62px;
text-align:center;
padding-bottom:4px;
}

div.welcome #panelHolder div.featureLeft table tfoot tr td {
padding-left:0px;
}

div.welcome #panelHolder div.featureLeft table tbody tr td {
padding-top:2px;
}

div.welcome #panelHolder div.featureLeft table td {
font: normal 11px "Trebuchet MS", arial, helvetica, sans-serif;
height: 14px;
line-height:180%;
padding-left:16px;
}

#content, #tides, #forecast {
position:relative;
display:inline;
float:right;
width: 587px;
padding: 0px;
margin: 0px;
visibility: visible;
background: #fff url( ) no-repeat top left;
}

#content p {
padding: 0 5px 10px 20px;
margin: 10px 0 0 0;
}

/* #content p {
font: normal 120%/180% "Trebuchet MS", arial, helvetica, sans-serif;
}
*/

#forecast p {
padding: 0 80px 30px 20px;
margin: 10px 0 0 0;
line-height: 1.3em;
}

/* Tidal formatting */

.tide {
float: left;
display: inline;
padding: 0 0 20px 20px;
margin: 0;
width: 265px;
}

.tide  h3 {
color: #666;
padding: 5px 0;
margin: 0;
}

.tide table {
width: 250px;
height: 100px;
padding:2px;
margin: 0;
border:1px solid #666;
}

.tide th {
text-align:center;
width: 83px;
padding:0 0 0 10px;
margin: 0;
}

.tide table td {
text-align:center;
padding:0 0 0 10px;
margin: 0;
background-color: #eee;

}

.tide table tr.alt td {
background-color: #9c9;
}

/* HOEMPAGE COLUMNS */
#content div.col1 {
width: 384px;
float: left;
display: inline;
}

#content div.col2 {
width: 200px;
float: right;
display: inline;
}

#content a {
font: normal 100%/180% "Trebuchet MS", arial, helvetica, sans-serif;
color:#36c;
}

#content a:hover {
font: normal 100%/180% "Trebuchet MS", arial, helvetica, sans-serif;
color:#9c9;
}

#content div.panel {
width: 190px;
overflow: hidden;
display: inline;
float:right;
padding: 0;
margin: 5px;
background-color: #d7e1f5;
}

#content div.panel h3 {
padding: 5px 5px 0 0;
}

#content div.panel div.colTxt {
margin:0;
padding:0;
display:inline;
float:left;
width: 190px;
}

#content div.panel div.colTxt img {
display:inline;
float:right;
margin:8px 8px 4px 4px;
padding:0;
border:1px solid #36c;
}

#content div.panelTop a {
padding: 11px 0 0 8px;
}

#content div.panel a {
text-decoration:none;
}

#content div.panel a:hover {
color: #9c9;
}

#content div.panel p {
margin: 0;
padding: 2px 8px 0 8px;
color:#666;
}

#content div.panel a {
display:block;
text-decoration:none;
color: #36c;
}

#content div.panelTop {
height: 36px;
width: 190px;
overflow: hidden;
display: block;
padding: 0;
margin: 0;
background: #fff url( content_panel_top.gif ) top left no-repeat;
}

#content div.panelBot {
height: 36px;
width: 190px;
display: block;
overflow: hidden;
padding: 0;
margin: 0;
margin-bottom:0;
background: #fff url( content_panel_bot.gif ) top left no-repeat;
}

/* footer formatting */

#footer {
position: relative;
float:right;
text-align:center;
width: 100%;
height:160px;
padding: 0px;
visibility: visible;
background: transparent url( footer_bgd.gif ) no-repeat top right;
}

#footer a {
color: #36c;
text-decoration: none;
font: normal 100%/180% "Trebuchet MS", arial, helvetica, sans-serif;
}

#footer a:hover {
color: #9c9;
}

#footer div.credit {
position:absolute;
left:0;
bottom:30px;
text-align:center;
width: 100%;
height:20px;
padding: 0px;
visibility: visible;
}

#footer div.credit a , #footer div.credit p {
color: #9c9;
text-decoration: none;
font: normal 100%/180% "Trebuchet MS", arial, helvetica, sans-serif;
}

#footer div.credit a:hover {
color: #fff;
}

address {
font: normal 90%/180% "Trebuchet MS", arial, helvetica, sans-serif;
color: #fff;
text-align:center;
}

#footer div.address {
position:absolute;
left:0;
width:100%;
bottom:55px;
text-align:center;
height:20px;
padding: 0px;
visibility: visible;
}

#footer div.address a {
color: #fff;
text-decoration: underline;
font: normal 100%/180% "Trebuchet MS", arial, helvetica, sans-serif;
}

#footer div.address a:hover {
color: #9c9;
}