/* Photo gallery template ||| Joshuaink.com ||| March 2005 ||| Free to use but this credit must remain in place */
/*--------------------------------------------------------Main Elements--------------------------------------------------*/

body {	
	color: #252547;
	background: transparent;
	font-size: 62.5%; 
	font-family: verdana, arial, helvetica, san-serif;
	margin: 0;
	padding:0;
	min-width:750px;
	}
p {
	font: 1.1em verdana,arial,garamond,ssan-serif;
	color: #252547;
	text-align: justify;
	}

h1 { font: 1.8em #981364 verdana,arial,helvetica,san-serif;
	border-bottom: 1px solid #ee2336;
	font-weight: bold;
	background: transparent;}
h2 { 
	background: transparent;	
	font: 1.6em #981364 verdana,arial,helvetica,san-serif;
	border-bottom: 3px solid #65ca88;
	margin-top: 0;
	padding-top: 0;	}
h4 { 	
	font: 1.3em #65CA88 verdana,arial,helvetica,san-serif;
	border-bottom: 3px solid #65CA88;
	margin-top: 0;
	padding-top: 0;}
a:link{text-decoration:none;
color: #008800;
}
a:visited{color: #a01223;
}
a:hover{
color: #abd3e6;
background-color: #157a34;
}
a img{border:none;}
ul{
	margin: 0;
	padding: 0;
}
/*Hacks and tricks*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix/*need to change to relclass name*/ {height: 1%;}
/* End hide from IE-mac */
.floatL{float:left;}
.floatR{float:right;}
.clear{clear: both;}
.textR{text-align: right;}
#spacer{height: 100em;}
/*------------------------------------Structure-------------------------------------------------------------*/
/*Layout solution courtesy of http://bluerobot.com/web/layouts/layout3.html - Layout Resovoir*/
#container{
	width: 100%;
	/*background: url(gfx/bgd1.gif) no-repeat;*/
	background-position: 68% 10%; 
	overflow: hidden;
	position: relative;
	}
#header {
	margin:0 0 10px 0;
	height: 138px;
	border-bottom: 4px solid #ee2336;
	}
#contact{
	float:right;
	padding:.3em;
}
#contact p{
	color: #016492;
	font-size: 1.5em;
}
#contact em{
	color: #a01223;
	font-size: 1.4em;
}
#holding{
	width: 90%;
	float: left;
	margin-left: 1em;
	background: #016492; }
#holding p{color:#fff; font-size: 1.2em; margin: .8em;}
#holding dl{color:#fff; font-size: 1.1em; margin: .8em;}
#holding dl dd a:link{color:#fff; font-size: 1.1em; margin: .8em;}
#middle{border: 1px solid yellow;}
#leftCol {
	background: #014e71; 
	background: #ffffff; 
	position:absolute;
	width:222px;
	left:10px;
	top:146px;
	padding: 0 0 0 0;
	z-index:100;
	min-height:406px;

	/*margin-bottom: 1em;*/
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px;
	}
/* Again, "be nice to Opera 5". */
body>#leftCol {width:200px;}

#contentFull {/*Use when you want content to fill everything to the right of secondary nav i.e. no sidebar*/
margin: 0 5px 5px 215px;
padding: 2px;
}
#contentMiddle {/*use if you want to use a sidebar*/
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:auto;
	min-width:120px;
	margin: 0 215px 5px 215px;
	padding: 2px;
	z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#rightCol {
	float:right;
	width: 250px;
	margin-left:1em;
	border-left: 1px solid #016492;
	padding: .3em;
	background-color:#fff;}
#rightCol ul { margin:.2em; border-left: solid 2px #016492; padding:.2em; text-decoration:none;}
#rightCol li {padding-bottom: .4em; text-decoration:none;}
#sidenav, #sitedeclaration{background: #016492; width: 100%;}
.sidenav1, .sidenav2, #furtherlinks ul, .sidenav1 li li{
	list-style-type: none;
	margin-left: .25em;
	padding-left: 1em;	
}
.sidenav2{background-color:#016492;}
.sidenav1 li, .sidenav2 li{
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	padding: .2em;	
}
.sidenav1 li a, {
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color:#56a7cd;
}
.sidenav2 li a{
	font-size: .9em;
	font-weight: bold;
	text-decoration: none;
	color:#56a7cd;}
.sidenav1 a:visited, .sidenav2 a:visited, .sidenav1 li ul li a:visited,{
	color:#56a7cd;
	text-decoration: none;	}
.sidenav1 a:hover, .sidenav2 a:hover, .sidenav1 li ul li a:hover, #furtherlinks a:hover{
	text-decoration: none;
	color:#88cfb7;
	background-color:#016492;
}
#footer {
	background-color: #ee2336;
	border-top: solid 1px #56a7cd;
	border-bottom: solid 1px #56a7cd;
	clear: both;
	float: left;
	width: 100%;
	text-align: center;
	padding-top: .4em;
	padding-bottom: .4em;
	margin-top: 10px;
	}
	
/*----------Home Page--------------------*/
#boxed1, #boxed2, #boxed3, #boxed4{
	width:378px;
	height:180px;
	float: left;
	margin: 2px;}
#boxed1{
	background-image:url(gfx/people/frontpage/sailing_school.jpg);
	background-repeat: no-repeat;
	border: 1px solid #016492;}
#boxed2{
	background-image:url(gfx/people/frontpage/charters-sunset.jpg);
	background-repeat: no-repeat;
	border: 1px solid #2ca047;}
#boxed3{
	background-image:url(gfx/people/frontpage/sailing-club.jpg);
	background-repeat: no-repeat;
	border: 1px solid #016492;
}
#boxed4{background-image:url(gfx/people/frontpage/consultancy-lisa-andy.jpg);
		background-repeat:no-repeat;
		border: 1px solid #2ca047;}
#boxed1 h1, #boxed2 h1, #boxed3 h1, #boxed4 h1{
margin-top:0;
margin-bottom:.1em;
margin-left:.5em;
font-size:2.1em;
}
#boxed1 h1, #boxed2 h1, #boxed3 h1, #boxed4 h1{
color:#000033;
border-bottom: double 3px #000033;}
#boxed1 h1 a, #boxed2 h1 a, #boxed3 h1 a, #boxed4 h1 a {
color:#000033;
border-bottom: double 3px #000033;
text-decoration:none;}
#boxed1 h1 a:hover, #boxed2 h1 a:hover, #boxed3 h1 a:hover, #boxed4 h1 a:hover {color:#FFF;border-bottom: double 3px #FFF;}
#divider, #quote, .quote2{
	width: 760px;
	height: 90px;
	float:left;
	padding: 3px;
	margin: 2px;
	border: 1px solid #ee2336;
}
#quote{height:auto; float:none;}
.quote2{
height:auto; 
width:auto;
float:none;
font-size: 1.4em;
color:#027bb4;
text-align: center;
font-weight: bold;
margin-bottom: .3em;}
#divider p, #quote p{
	font-size: 1.6em;
	color:#027bb4;
	text-align: center;
	font-weight: bold;}
/*------------------------------------------------About-------------------------------------------------------------------------*/
#intro p{
	font-size: 1.6em;
	text-align: center;
	color: #00374f;
	font-weight: bold;
	padding: .3em}
.aboutSeg, .aboutSeg1{
	width: 95%;
	border: .2em solid #00374f;
	padding: .2em;
	margin: .6em;
	}
.aboutSeg img{border:1px solid #00374f; padding: .2em; margin: .2em;}
.aboutSeg1 img{border:1px solid #abd3e6; padding: .2em; margin: .2em;}
.aboutSeg1{
	background-color: #abd3e6;
	}
.aboutSeg{
	background-color: #00374f;
	color:#fff;
	border: .2em solid #abd3e6;
	}
.aboutSeg dt, .aboutSeg1 dt{
	font-size: 1.6em;
	border-bottom: .2em solid #88cfb7;
	}
.aboutSeg1 dt{border-bottom: .2em solid #157a34;}
.aboutSeg dd, .aboutSeg1 dd{
	padding: .8em;
	margin: .2em;
	font-size: 1.4em;
}
.aboutSeg dd a{color:#abd3e6;}
/*-------------------------------------------------team------------------------------------------------------------------*/
.teamProfile {
	display: block;
	padding: 1em;
	margin: .8em;
	border: 4px double #65CA88;	
}
.teamProfile h2{
	text-align: right;
	display: block;
	background-color:#65ca88;
	padding:.2em;
	padding-right: .4em;
	margin:.2em;
	margin-right:0;
	color:#00374f;
	font-size: 1.8em;
	font-weight: bold;
}
.teamProfile h3{
	color:#00374f;
	font-size: 1.4em;
	font-weight: bold;
}
.teamProfile img{
	float: right;
	border-right: 4px solid #65ca88;
	border-bottom: 4px solid #42c659;
	border-left: 4px solid #2ca047;
	border-top:4px solid #157a34;
	margin-left: 1em;
}
.teamProfile p{

}
.teamProfile ul{
	list-style-type:none;
	margin-left: 1.4em;
	padding-left: .6em;
	font-size: 1.4em;
	border-left: 4px solid #157a34;
}
.teamProfile em{
	font-size: 1.2em;
	font-weight: bold;
	color: #2ca047;}
/*------------------------------------------------Sailing Lessons-------------------------------------------------------------*/
.lessons{
margin: .3em;
padding: .2em;
border: .2em solid #016492;
}
.lessons h3{
font-size: 1.8em;
background:#252547;
color:#D5E9F3;
padding: .4em;
margin-top:.2em;
}
.lessons dt {
font-size: 1.3em;
float:left;
font-weight:bold;
padding-left: .2em;
margin-left: .2em;
}
.lessons dd {
font-size: 1.2em;
float:left;
margin-left: 4px;
margin-right:20px;
}
.lessons p{padding: .4em;font-size: 1.2em;}
.lessons p em{font-size: 1.2em;font-weight: bold;}
.lessons ul{
list-style: none;
font-size: 1.2em;
border-left: .2em solid #ee2336;
padding-left: .3em;
margin-left:.6em;
margin-bottom:.4em;}
.lessons ul li{padding-top: .2em; padding-bottom: .4em}
.rate{ font-size: .8em;}
#boxOut{
}
.vertical{
border-right: 1px solid #00374f; 
border-bottom: 1px solid #00374f;
margin:.1em; padding: .2em}
.head1, .head2, .head3, .head4, .head5, .head6, .head7, .head8{
margin:.1em; padding: .2em;
}
.head1{background:#00374f;}
.head2{background:#014e71; color:#D5E9F3;}
.head3{background:#016492; color:#abd3e6;}
.head4{background:#56a7cd; color:#014e71;}
.head5{background:#88cfb7;}
.head6{background:#abd3e6;}
.head7{background:#D5E9F3;}
.head8{background:#ffffff; border: 1px solid #00374f;}
/*-------------------------------------------------Classes----------------------------------------------------------------------*/
.button1, .button2, .button3, .button4 {
	background: #016492;
	border: 1px solid #226262;
	border-top:  1px solid #88cfb7;
	border-left:  1px solid #88cfb7;
	list-style-type: none;
	border-left: 0;
	margin-left: 0;
}
.button2 {
	border-top: 0;	
}
.button3 {
	border-bottom: 0;	
}
.newsintro1, .newsintro2{
	font: 18pt verdana,arial,helvetica,san-serif;
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
	border-bottom: 1px #eee solid;
}
.newsintro1 {color: #45467e;}
.newsintro2 {color: #9ad7d7;}
.listhead {
	font: 16pt verdana, arial, helvetica, san-serif;
	color: #9ad7d7;
	padding-left: .5em;}
.sidelist {padding-left: 1em;}
.image1 {
	padding: .5em;
	margin: .8em;
	border-right: .2em solid #56a7cd;
	border-bottom: .2em solid #56a7cd;
}
.image2 {padding: .5em;margin: .3em;}
.image3 {padding: .5em;margin: .6em;}
.siteloco {color: #abd3e6;}
.siteloco1 {color: #00374f; background-color: #abd3e6;}
.siteloco2 {color: #00374f; background-color: #abd3e6;}
.button{ background-color:#abd3e6; padding: .4em; margin: .2em; border: 2px solid #56a7cd;}
/*---------------------------home port------------------------------------------*/
#homeport p{
font-size: 1.3em;
border-bottom: 1px solid #abd3e6}

.image1{padding: .2em; margin: .4em; border: 1px solid #00374f;}
/*-------------------------weather/directions--------------------------------------------------*/
.weather{
background-image:url(gfx/weather.jpg);
background-repeat: no-repeat;
background-position: 90% 30px;
padding: 1.6em;}
.weather ul, .captains ul{
border-left: .3em solid #56a7cd;
border-right: .8em solid #56a7cd;
list-style:none;
padding-left: .3em;
padding-top: .4em;
margin-left: .4em;}
.weather ul a, .captains ul li{
font-size: 1.4em;}
.directions h4{	
	font: 1.3em #65CA88 verdana,arial,helvetica,san-serif;
	border-bottom: 3px solid #65CA88;
	margin-top: 0;
	padding-top: 0;
}
/*--------------------------team building---------------------------------------------*/
.teamText{color: #f1912b;font-size: 1.2em;}
/*-----------------------------Charters-----------------------------------------------*/
#chartersT{clear: both;}
#charters{ 
border-bottom: 1px solid #56a7cd;
border-right: 1px solid #56a7cd;
font-size: 1.2em;
padding: .2em;}
#charters p{ 
border-right: 1px solid #016492;
padding: .2em;}
.charterPhoto, .layout{height:100px;}
.2dayCol{background:#014e71; color:#abd3e6;}
.4dayCol{background:#56a7cd;}
.7dayCol{background:#65ca88; color:#000;}
.yacht{
border-top: 1px solid #252547;
border-bottom: 1px solid #252547;}
.mmm, .ratesC{
text-align:left; 
border: 1px solid #014e71; 
padding:.2em; margin:.1em; 
background-color:#252547;
color:#88cfb7;}
.chartHead{
text-align:left; 
border: 1px solid #014e71;
background:#226262;
padding: .3em;
font-size: 1.2em;
color:#56a7cd;}

/*--------------------------corners----------------------------------------------------*/

b.rtop {display:block;background: #FFF}
b.rbottom{display:block;background: #ffffff}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #016492}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

/*----------------------------------------Light box--------------------------------------*/
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 1.4em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}
.thumbnail2{

	padding: 7px;
	background-color:#d4e7f7;
	border: 1px solid #006f96;
	margin-right: 10px;
	margin-bottom: 15px;
	height: 115px;
	}

.caption a{ font-size:.9em; padding-top: 0.2em ;	color:green}

	/*-------------------------------------------------------------------------*/
	/*------------------------Gallery------------------------------------*/
#main-content li{
	width:200px;
	border:solid #ee2336;
	border-width:0 1px 1px 0;
/* uncomment and adjust this if you want a rounded frame in Mozilla browsers
	-moz-border-radius:20px;
 */
	background:#FFF;
	padding:10px;
	text-align:center;
	position:relative;
	float:left;
	display:inline;
	margin:5px;
}
#fullplate-navigation{
	list-style:none;
	margin:5px 0 0 45px;
}
#fullplate-navigation li{
	display:block;
	float:left;
	width:210px;		}
#previous{text-align:left;}
#next{text-align:right;}
#fullplate-navigation li a{
	display:block;
	width:190px;
	padding:10px;}
#fullplate-navigation li a:hover{color:#333; background:#fff}
#fullplate-photo{
	border:solid #ee2336;
	border-width:0 1px 1px 0;
	background:#FFF;
	padding:5px 15px 15px 15px;
	margin:0 auto;
	width:600px;
}

#main-content a span{
/*\*/
	position:absolute;
	left:-9999px;
	}
#main-content a:hover span{	
	top:10px;
	left:10px;
	width:202px;
	font-weight:bold;
	background:#FFF;
	color:#016492;
	padding:5px 0 5px 0;
	text-transform:uppercase;
	font-size:85%;
	border:1px solid #EEE;
	border-width:0 0 1px 0;
	filter: alpha(opacity=100);
	/*-moz-opacity:.8;
		opacity:.80;*/
/**/
} 
#main-content img{
border:1px solid;
border-color:#666 #EEE #EEE #666;
}