/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/three-up-two-down.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* Set up the containing div with a background image - not supplied with the zip file */
#outer {width:729px; height:360px; background:#fff url(photographer1.jpg); border:1px solid #000; position:relative; color:#000;}

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; width:127px;}
.menu {margin:0px}
/* for IE7 to position the tables correctly */
.menu {position:relative; float:left;}

/* for IE5.5 and IE6 to position the tables corectly */
* html .menu {position:static;}

/* Set up the size of the list items and float left to place inline */
.menu li {display:block; float:left; width:125px; background:#ddc; margin:2px 0 0 0; border:1px solid #000; border-color:#fff #000 #000 #fff;}

/* Give the sub level list item a diffent background color to make it 'stand out'. */
.menu li.sub {background:#BBD0F7;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:24px; position:absolute; bottom: 0; top:auto; left:0; font-size:1em;}

/* Default link styling */
.menu li a {display:block; color:#000; font-family:arial, sans-serif; font-size:11px; line-height:23px; height:24px; text-decoration:none; text-indent:10px; font-weight:bold;}

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {color:#bd4; background:#578;}

/* For all browsers except IE5.5 and IE6 to keep the hover state through the menu cascade. */
.menu :hover > a {color:#bd4; background:#578;}

/* Give the link OR list a relative position. Depends on which browser is used */
.menu li.sub:hover,
.menu li.sub a:hover {position:relative;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute;left:-9999px; width:128px; top:0;}

/* Position the flyout sub levels to 'pull-up' or 'drop-down' when hovering over the sub level list OR link.  the transparent gif is for IE7 only and need not actually exist. File transparent.gif supplied with zip file */
/* pull up */
.menu :hover ul, 
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul {padding:20px 20px 20px 0; left:100px; bottom:-10px; top:auto; background:transparent url(trans.png);} 
/* drop down */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul {padding:20px 20px 20px 0; left:100px; top:-10px; bottom:auto;}

#home {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #CCCCCC url(images/home2.jpg) no-repeat;
color : #eee;
}

#laser {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/laser4.jpg) no-repeat;
color : #eee;
}
#mirror {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/mirror2.jpg) no-repeat;
color : #eee;
}
#lugger {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/lugger2.jpg) no-repeat;
color : #eee;
}

#results {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/results2.jpg) no-repeat;
color : #eee;
}

#membership {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/membership2.jpg) no-repeat;
color : #eee;
}

#social {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/social2.jpg) no-repeat;
color : #eee;
}
#events {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/events2.jpg) no-repeat;
color : #eee;
}
#history {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/history2.jpg) no-repeat;
color : #eee;
}

#weather {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/weather2.jpg) no-repeat;
color : #eee;
}

#contact {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/contact2.jpg) no-repeat;
color : #eee;
}

#photo {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/gallery2.jpg) no-repeat;
color : #eee;
}

#link {
margin : 0;
padding : 0;
font : 73% arial;
line-height : 1.7em;
background : #333 url(images/club.jpg) no-repeat;
color : #eee;
}

a:hover {
text-decoration: underline;

}

a:link, a:visited, a:active {
color : #01325D;
}


a {
color : #01325D;
text-decoration : none;
}

h1.banner1 {

width: 750px;
height: 150px;
background : transparent url(images/head-homepage1.gif) no-repeat;
}
h1.banner2 {
width: 750px;
height: 150px;
background : transparent url(images/head-laser3.jpg) no-repeat;
margin : 0;
}
h1.banner3 {
width: 750px;
height: 150px;
background : transparent url(images/head-mirror.jpg) no-repeat;
margin : 0;
}
h1.banner4 {
width: 750px;
height: 150px;
background : transparent url(images/head-luggers1.jpg) no-repeat;
margin : 0;
}
h1.banner5 {
width: 750px;
height: 150px;
background : transparent url(images/head-laser2.jpg) no-repeat;
margin : 0;
}
h1.banner6 {
width: 750px;
height: 150px;
background : transparent url(images/head-laser2.jpg) no-repeat;
margin : 0;
}
h1.banner7 {
width: 750px;
height: 150px;
background : transparent url(images/head-mirror-open.jpg) no-repeat;
margin : 0;
}
h1.banner8 {
width: 750px;
height: 150px;
background : transparent url(images/head-laser2.jpg) no-repeat;
margin : 0;
}
h1.banner9 {
width: 750px;
height: 150px;
background : transparent url(images/head-laser2.jpg) no-repeat;
margin : 0;
}
h1.banner10 {
width: 750px;
height: 150px;
background : transparent url(images/head-laser2.jpg) no-repeat;
margin : 0;
}
h1.banner11 {
width: 750px;
height: 150px;
background : transparent url(images/head-mirror-open.jpg) no-repeat;
margin : 0;
}
h1.banner12 {
width: 750px;
height: 150px;
background : transparent url(images/head-contact1.jpg) no-repeat;
margin : 0;
}

h1.banner13 {
width: 750px;
height: 150px;
background : transparent url(images/head-rs800-open1.jpg) no-repeat;
margin : 0;
}

h1.banner14 {
width: 750px;
height: 150px;
background : transparent url(images/head-rs800-open.jpg) no-repeat;
margin : 0;
}

h1.banner15 {
width: 750px;
height: 150px;
background : transparent url(images/head1.jpg) no-repeat;
margin : 0;
}

h1.banner16 {
width: 750px;
height: 150px;
background : transparent url(images/head-luggers1.jpg) no-repeat;
margin : 0;
}

h1.banner17 {
width: 750px;
height: 150px;
background : transparent url(images/head-boats.jpg) no-repeat;
margin : 0;
}

h1.banner18 {
width: 750px;
height: 150px;
background : transparent url(images/head-14.jpg) no-repeat;
margin : 0;
}

h1.banner19 {
width: 750px;
height: 150px;
background : transparent url(images/head-sea.jpg) no-repeat;
margin : 0;
}

h1.banner20 {
width: 750px;
height: 150px;
background : transparent url(images/head-social.jpg) no-repeat;
margin : 0;
}

h1.banner21 {
width: 750px;
height: 150px;
background : transparent url(images/head-bigrig.jpg) no-repeat;
margin : 0;
}

h1.banner22 {
width: 750px;
height: 150px;
background : transparent url(images/head-beach.jpg) no-repeat;
margin : 0;
}

h1 {
font-size : 120%;
color : #fff;
background : inherit;
margin : 0;
padding : 20px;
}
#content h2 {
font-size : 140%;
text-transform : uppercase;
color : #fff;
background : inherit;
padding : 10px 0 10px 30px;
margin-top : 20px;
}
p {
margin : 0;
text-align : left;
}

table {
margin : 0;
padding : 10px 0 10px 30px;
}


form {
margin : 0;
padding : 10px 0 10px 30px;
}


#container {
width : 730px;
color : #333;
background : inherit;
padding : 0;
margin-bottom: 0;
}

#header {
display:inline;
padding: 0;
width : 780px;
/*height : 100px;*/
border-bottom : 0 solid #ccc;
/*background : transparent url(images/head-mirror.jpg) no-repeat;*/
margin-bottom: 0;
padding : 0;

}

#title {
padding-top : 20px;
display:inline;
padding : 0;


}

#title h1 {
text-align : right;
line-height : 1.5em;
letter-spacing : 5px;
color : #c0d1e1;
font-size : 90%;
font-style : italic;
padding-top : 0;

}

#title p{
text-align : right;
line-height : 1.5em;
/*text-transform : lowercase;*/
letter-spacing : 5px;
color : #c0d1e1;
background : inherit;
font-size : 150%;

}
#leftcol {
width : 120px;
float : right;
margin-top : 20px;
padding : 0;
}
#leftcol p {
padding : 5px 20px 5px 20px;
margin : 0;
}
#leftcol h2 {
font-size : 140%;
text-transform : uppercase;
color : #fff;
background : inherit;
padding : 10px 0 10px 20px;
margin : 0;
}
#leftcol ol, ul {
font-size : 100%;
color : #fff;
background : inherit;
}
#content {
/*margin-right : 0;*/
width : 550px;
float: left;
margin-top : 10px;
}
#content p {
font-size : 100%;
line-height : 1.5em;
padding : 5px 20px 5px 30px;
}
#footer {
color : #333;
background : #999;
clear : right;
width : 750px;
}

#footer p {
float : left;
text-align : left;
padding-left : 25px;
font-size : 90%;
padding-top: 8%;
}

#footer_l {
color : #333;
background : #999;
clear : right;
width : 750px;
}

#footer_l p {
float : left;
text-align : left;
padding-left : 25px;
font-size : 90%;
padding-top: 20%;
}

#footer_s {
color : #333;
background : #999;
clear : right;
width : 750px;
}

#footer_s p {
float : left;
text-align : left;
padding-left : 25px;
font-size : 90%;
padding-top: 1%;
}

.em {
font-weight : bold;
}

.box {
padding : 10px, 0px, 10px, 0px;

}