/****************************************************************/
/*   Design:   Multiflex-3 Version 1.8 / Layout-4               */
/*   File:     Global layout structure                          */
/*--------------------------------------------------------------*/
/*   Author:   g. Wolfgang                                      */
/*   Date:     May 22, 2007                                     */
/*   Homepage: wwww.1-2-3-4.info                                */
/*--------------------------------------------------------------*/
/*   License:  Fully open source without restrictions.          */
/*             Please keep footer credits with a link to        */
/*             Wolfgang (www.1-2-3-4.info). Thank you!          */
/****************************************************************/

/************/
/*  GLOBAL  */
/************/

/* NON-HEADER */
*{padding:0; margin:0;}

body {
font-size:10px;
background: url(./img/shells.gif) top left repeat;
/*background-color:rgb(125,125,125);*/
font-family:verdana,tahoma,arial,sans-serif;
}

/*Font-size: 1.0em = 10px when browser default size is 16px*/

.page-container {
width:1000px;
margin:0px auto;
margin-top:10px;
margin-bottom:10px;
border:solid 1px rgb(150,150,150);
font-size:1.0em;
}

.main {
clear:both;
width:1000px;
padding-bottom:30px;
background: rgb(255,255,255) url(./img/sca_footer_surf.gif) bottom no-repeat;
}

.main-wide {
clear:both;
width:1000px;
padding-bottom:30px;
background: rgb(255,255,255) url(./img/sca_footer_surf.gif) bottom no-repeat;
}

.main-navigation {
display:inline /*Fix IE floating margin bug*/;
float:left;
width:250px;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

.main-content {
display:inline; /*Fix IE floating margin bug*/;
float:left;
width:470px;
margin:0 0 0 15px;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

.main-content-wide {
display:inline; /*Fix IE floating margin bug*/;
float:left;
width:700px;
margin:0 0 0 30px;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

.main-content-wide h1 {
font-size: 1.2em;
color: rgb(2,95,125);
}

.main-subcontent {
display:inline /*Fix IE floating margin bug*/;
float:right;
width:250px;
margin:0 0 0 0;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

.main-subcontent h1 {
color:rgb(255,255,255);
background:rgb(2,95,125);
}

.main-wide .main-subcontent p {
text-align: center;
}

.footer {
clear:both;
width:1000px;
padding:1.0em 0 1.0em 0;
background:rgb(2,95,125);
font-size:1.0em;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

/* #footer_image {
float:left;
width: 1000px;
height: 187px;
background: url(./img/sca_footer_surf.gif) no-repeat bottom center;
}*/

#recommend {
clear:both;
padding: 10px 0px 5px 0px;
width: 1000px;
font-size:1.0em;
text-align: center;
background: url(./img/sca_footer_surf.gif) no-repeat bottom center;
}

#recommend a {
color: #666;
}

#recommend img {
border: none;
}

/* --- For alternative headers START PASTE here --- */

/* HEADER */

.header {
width:1000px;
font-family:verdana,arial,sans-serif;
}

.header-top {
width:1000px;
height:80px;
background:rgb(255,255,255);
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

.headerImageWrapper{
clear:both;
padding-left: 0px;
background-position: center;
height:300px;
}

.header-middle {
width:1000px;
height:300px;
float: left;
background:rgb(255,255,255);
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

.header-bottom {
width:1000px;
background:none;
}

.header-breadcrumbs {
clear:both;
width:1000px;
padding:1.0em 0 1.5em 0;
background:rgb(255,255,255);
}

/* green logo */
.green {
width:100px;
height:82px;
margin:25px 0 0 840px;
z-index:1;
background:none;
position:absolute;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

/* Zero Carbon Logo */
.zeroc {
margin: 115px 0 0 825px;
z-index:1;
background:none;
position:absolute;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

/* Tourism Tick */
#tick {
padding-top: 0;
}

/* Add This Share Button*/
.addthis {
clear:both;
float:left;
position:absolute;
width:105px;
height:5px;
z-index:1;
margin:175px 0 0 830px;
}

/********************/
/*  HEADER SECTION  */
/********************/

.sitelogo {
width:300px;
height:187px;
position:absolute;
z-index:1;
margin:22px 0 0 20px;
background:none;
}

.sitename {
width:400px;
height:45px;
position:absolute;
z-index:1;
margin:20px 0 0 90px;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
}

.sitename h1 {
font-size:200%;
color:rgb(255,255,255);
}

.sitename h2 {
margin:-4px 0 0 0;
color:rgb(255,255,255);
font-size:150%;
}

.sitename a {
text-decoration:none;
color:rgb(125,125,125);
}

.sitename a:hover {
text-decoration:none;
color:rgb(50,50,50);
}

.nav0 {
width:350px;
position:absolute;
z-index:2;
margin:25px 0 0 0;
margin-left:550px !important/*Non-IE6*/;
margin-left:553px /*IE6*/;
}

.nav0 ul {
float:right;
padding:0 20px 0 0;
}

.nav0 li {
display:inline;
list-style:none;
}

.nav0 li a {
padding:0 0 0 3px;
}

.nav0 a:hover {
text-decoration:none;
}

.nav0 a img {
height:14px;
border:none;
}

.nav1 {
width:350px;
position:absolute;
z-index:3;
margin:45px 0 0 550px;
}

.nav1 ul {
float:right;
padding:0 15px 0 0;
font-weight:bold;
}	

.nav1 li {
display:inline;
list-style:none;
}

.nav1 li a {
display:block;
float:left;
padding:2px 5px 2px 5px;
color:rgb(125,125,125);
text-decoration:none;
font-size:120%;
}

.nav1 a:hover {
text-decoration:none;
color:rgb(50,50,50);
}

.sitemessage {
width:400px;
height:120px;
position:absolute;
text-align: right;
z-index:1;
color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/;
overflow:hidden /*IE6*/;
}

.sitemessage h1 {
width:400px;
text-align:right;
font-size:250%;
}

.sitemessage h2 {
float:right;
width:300px;
margin:0 0 8px 0;
text-align:right;
line-height:120%;
font-size:215%;
}

.sitemessage h3 {
float:right;
width:300px;
margin:10px 0 0 0;
text-align:right;
font-size:140%;
}

.sitemessage h3 a {
text-decoration:none;
color:rgb(234,239,247);
}

.sitemessage h3 a:hover {
text-decoration:none;
color:rgb(50,50,50);
}

#sfnav, #sfnav ul {
padding: 0;
margin: 0;
list-style: none;
list-style-type:none;
line-height: 1;
} 

#sfnav a {
display: block;
height:3.1em; 
line-height:3.1em; 
padding:0 16px; 
text-decoration:none; 
font-weight:bold; 
color: rgb(100,100,100);
}

#sfnav li {     
float: left;
border-right:solid 1px rgb(175,175,175);
}

#sfnav li ul {
position: absolute;
margin-left: -1px;
width: 10em;
left: -999em;
}

#sfnav li ul ul {
margin: -26px 0 0 189px;
}

#sfnav li:hover ul ul, #sfnav li.sfhover ul ul {
left: -999em;
}

#sfnav li:hover ul, #sfnav li li:hover ul, #sfnav li.sfhover ul, #sfnav li li.sfhover ul {
left: auto; 
width: 12.0em;
z-index: 999;
}

#sfnav li:hover a {
background-color:rgb(210,210,210);
text-decoration:none;
}

#sfnav li:hover ul li a {
white-space:normal;
display:block;
width:12.0em;
height:auto;
line-height:1.3em;
padding:4px 16px;
border-left:solid 1px rgb(175,175,175);
border-bottom: solid 1px rgb(175,175,175);
border-bottom: solid 1px rgb(175,175,175);
background-color:rgb(237,237,237);
font-weight:normal;
color:rgb(50,50,50);
}

#sfnav li:hover ul li a:hover {
background-color:rgb(210,210,210);
text-decoration:none;
}

.nav2 {
white-space:nowrap;
float:left;
width:1000px;
border:none;
background:rgb(225,225,225);
color:rgb(75,75,75);
font-size:130%;
} 

/*.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important ; z-index:1000 ; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important ; float:left ; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.nav2 ul li ul, .nav2 ul li ul li ul {display:none; border:none;}

/*Non-IE6 hovering
.nav2 ul li:hover {position:relative;} 
.nav2 ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;} 
.nav2 ul li:hover ul {display:block; width:12.0em; position:absolute; z-index:999; top:3.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:12.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} 
.nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} 

/*IE6 hovering
.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative ; z-index:1000 ; background-color:rgb(210,210,210); text-decoration:none;} 

.nav2 ul li a:hover ul {display:block; width:12.0em; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:12.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} 
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} 
*/

.header-breadcrumbs ul {
float:left;
width:560px;
list-style:none;
padding:0 0 0 15px;
}

.header-breadcrumbs ul li {
display:inline;
padding:0 0 0 10px;
background:transparent url(./img/bg_bullet_arrow.gif) no-repeat 0 50%;
font-weight:bold;
color:rgb(125,125,125);
font-size:100%;
}

.header-breadcrumbs ul a {
color:rgb(2,95,125);
text-decoration:none;
padding: 0 5px 0 0;
}

.header-breadcrumbs ul a:hover {
color:rgb(42,90,138);
text-decoration:underline;
}

.header-breadcrumbs .searchform {
float:right;
width:285px;
padding:0 17px 0px 0px !important /*Non-IE6*/;
padding:0 12px 0px 0px /*IE6*/;
}

.header-breadcrumbs .searchform form fieldset {
float:right;
border:none;
}

.header-breadcrumbs .searchform input.field {
width:10.0em;
padding:0.2em 0 0.2em 0;
border:1px solid rgb(200,200,200);
font-family:verdana,arial,sans-serif;
font-size:120%;
}

.header-breadcrumbs .searchform input.button {
width:3.0em;
padding:1px !important /*Non-IE6*/;
padding:0 /*IE6*/;
background:rgb(230,230,230);
border:solid 1px rgb(150,150,150);
text-align:center;
font-family:verdana,arial,sans-serif;
color:rgb(150,150,150);
font-size:120%;
}

.header-breadcrumbs .searchform input.button:hover {
cursor:pointer;
border:solid 1px rgb(80,80,80);
background:rgb(220,220,220);
color:rgb(80,80,80);
}

/* --- For alternative headers END PASTE here --- */

/******************/
/*  MAIN SECTION  */
/******************/

/* MAIN NAVIGATION */
.main-navigation .round-border-topright {
width:10px;
height:10px;
position:absolute;
z-index:100;
margin:0 0 0 190px;
/* background:url(./img/bg_corner_topright.gif) no-repeat;*/
}

/* MAIN CONTENT */

.column1-unit {
width:440px;
margin-bottom:10px !important /*Non-IE6*/;
margin-bottom:5px /*IE6*/;
}

.column2-unit-left {
float:left;
width:200px;
margin-bottom:10px !important /*Non-IE6*/;
margin-bottom:5px /*IE6*/;
}

.column2-unit-right {
float:right;
width:200px;
margin-bottom:10px !important /*Non-IE6*/;
margin-bottom:5px /*IE6*/;
}

.column3-unit-left {
float:left;
width:200px;
margin-bottom:10px !important /*Non-IE6*/;
margin-bottom:5px /*IE6*/;
}

.column3-unit-middle {
float:left;
width:200px;
margin-bottom:10px !important /*Non-IE6*/;
margin-bottom:5px /*IE6*/;
margin-left:40px;
}

.column3-unit-right {
float:right;
width:200px;
margin-bottom:10px !important /*Non-IE6*/;
margin-bottom:5px /*IE6*/;
}

/* MAIN SUBCONTENT */

.subcontent-unit-border {
width:250px;
margin:0 0 2.0em 0;
padding:0 0 5px 10px;
border:solid 1px rgb(190,190,190);
background:rgb(255,255,255);
}

.subcontent-unit-border-green {
width:250px;
margin:0 0 2.5em 0;
padding:0 0 10px 0;
border:solid 1px rgb(160,214,81);
/* background-color:rgb(217,239,185);*/
}

.subcontent-unit-border-blue {
width:250px;
margin:0 0 2.5em 0;
padding:0 0 10px 0;
border:solid 1px rgb(137,170,214);
/* background-color:rgb(213,225,240);*/
}

.subcontent-unit-border-orange {
width:250px;
margin:0 0 2.5em 0px;
padding:0 0 10px 0;
border:solid 1px rgb(232,177,13);
/* background-color:rgb(248,224,150);*/
}

.subcontent-unit-noborder {
width:250px;
margin:0 0 2.5em 0;
padding:0 0 10px 0;
/* background:rgb(235,235,235);*/
}

.subcontent-unit-noborder-green {
width:250px;
margin:0 0 2.5em 0;
padding:0 0 10px 0;
/* background-color:rgb(217,239,185);*/
}

.subcontent-unit-noborder-blue {
width:250px;
margin:0 0 2.5em 0;
padding:0 0 10px 0;
/* background-color:rgb(213,225,240);*/
}

.subcontent-unit-noborder-orange {
width:250px;
margin:0 0 2.5em 0;
padding:0 0 10px 0;
/* background-color:rgb(248,224,150);*/

}

.round-border-topleft {
width:10px;
height:10px;
position:absolute;
z-index:100;
background:url(./img/bg_corner_topleft.gif) no-repeat;
margin-top:-1px;
margin-left:-1px;
}

.round-border-topright {
width:10px;
height:10px;
position:absolute;
z-index:100;
background:url(./img/bg_corner_topright.gif) no-repeat;
margin-top:-1px;
margin-left:174px;
}


.round-noborder-topleft {
width:10px;
height:10px;
position:absolute;
z-index:100;
background:url(./img/bg_corner_topleft.gif) no-repeat;
margin-top:0px;
margin-left:0px;
}

.round-noborder-topright {
width:10px;
height:10px;
position:absolute;
z-index:100;
background:url(./img/bg_corner_topright.gif) no-repeat;
margin-top:0px;
margin-left:175px;
}

/********************/

/*  FOOTER SECTION  */
/********************/

.footer p {
line-height:1.3em;
text-align:center;
color:rgb(125,125,125);
font-weight:bold;
font-size:110%;
}

.footer p.credits {
font-weight:normal;
}

.footer a {
text-decoration:underline;
color:rgb(125,125,125);
}

.footer a:hover {
text-decoration:none;
color:rgb(255,255,255);
}

.footer a:visited {
color:rgb(255,255,255);
}

/******************/
/*  CLEAR FLOATS  */
/******************/

.page-container:after, .header:after, .header-bottom:after, .header-breadcrumbs:after, .main:after, .main-navigation:after, .main-content:after, .main-content div:after, .main-subcontent:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.subcontent-unit-border:after, .subcontent-unit-noborder:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.subcontent-unit-border-blue:after, .subcontent-unit-border-green:after, .subcontent-unit-border-orange:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.subcontent-unit-noborder-blue:after, .subcontent-unit-noborder-green:after, .subcontent-unit-noborder-orange:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.footer:after, /*p:after*/ {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clear-contentunit {
clear:both;
width:440px;
height:0.1em;
border:none;
background:rgb(210,210,210);
color:rgb(210,210,210);
}

/********************************/
/*  PRINTING and MISCELLANEOUS  */
/********************************/

@media print {.header-top {
width:1000px;
height:80px;
background:rgb(240,240,240);
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;}
}

@media print {.header-breadcrumbs {
width:1000px;
background:transparent;}
}

@media print {.nav2 {
float:left;
width:1000px;
border:none;
background:rgb(240,240,240);
color:rgb(75,75,75);
font-size:1.0em;
font-size:130%;}} /*Color navigation bar normal mode*/

@media print {.main {
clear:both;
width:1000px;
padding-bottom:30px;
background:transparent;}
}

@media print {.main-navigation {
display:inline /*Fix IE floating margin bug*/;
float:left;
width:199px;
border-right:solid 1px rgb(200,200,200);
border-bottom:solid 1px rgb(200,200,200);
background-color:rgb(240,240,240);
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE*/;}
}

@media print {.footer {
clear:both;
width:1000px;
height:3.7em;
padding:1.1em 0 0;
background:rgb(240,240,240);
font-size:1.0em;
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;}
}

/* Flash Menu */

#FMFmenu {
position:center;
left:0px;
top:0px;
height:77px;
margin:-12px 0 0 0;
background:transparent;
z-index: 1;
}

/* Home Page Hover Images */

a#image1 {
display: block;
width: 200px;
height: 150px;
float:left;
margin: 0 0 0 0;
background-color:rgb(255,255,255);
background-image: url(./img/learn_to_surf.gif);
}

a#image1:hover {
background-image: url(./img/learn_to_surf_hover.gif);
}

a#image2 {
display: block;
width: 200px;
height: 150px;
float:left;
margin:0 0 0 30px;
background-color:rgb(255,255,255);
background-image: url(./img/surfing_safari.png);
}

a#image2:hover {
background-image: url(./img/surfing_safari_hover.gif);
}

a .alt {
display: none;
}

/***** FAQ classes *****/

#faq ul li {
margin-left: 20px;
}

#faq ul li a {
padding: 0 0 0 20px;
text-decoration: none;
font-weight:bold;
background:url(./img/bg_bullet_full_1.gif) no-repeat 0 0.5em;
color: rgb(0,0,0);
}

#faq ul {
margin-top: 5px;
}

#faq strong {
color: #4b58cb;
font-size: 1.1em;
font-weight: bold;
border-bottom: 1px #666 dashed;
}

#faq h3 {
font-size: 1.2em;
color: #000;
padding: 15px 0 5px 0;
border-bottom: 1px #666 dashed;
}

#faq p strong {
border-bottom: none;
}

/***** Google Map pop up css *****/

#route_form, #route_form table td {
padding:-10px;
background:none;
border:none;
margin: -40px 0 0 -20px;
}

.route_td {
font-size:0.8em;
}

.route_help {
font-size:0.9em;
}