/*
dk brown #372413
med brown #B69967
lt brown #E1CDAA
maroon #490014
ylw #FFEA6F
*/

body   { color: #1e4e28; font-size: 0.9em; background: url("images/headerBG.png") repeat-x; margin: 0; padding: 0 }

body, th, td, input, textarea, select, option {
	font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4  { color: #1e4e28; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal }

h1 {

	font-size: 3em;
}

h2 {

	font-size: 2em;
}

h3  { font-size: 1.3em }

p, ul, ol {
	line-height: 150%;
}

blockquote {
	padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
	line-height: normal;
	font-style: italic;
}

a  { color: #1e4e28; font-weight: bold }

a:hover {
	text-decoration: none;
}

img {
	border:none;
}

small {
font-size:75%;
}

larger {
font-size:125%;
}

.clear {
content: ".";
    display: block;

    clear: both;
    visibility: hidden;
}





/* Header */

#header   { background-color: transparent; background-image: url("images/watertower.png"); background-repeat: no-repeat; background-position: 0 0; margin-top: 60px; margin-right: auto; margin-left: auto; width: 800px; height: 200px }

/* Logo */

#logo  { padding-right: 20px; padding-left: 20px; height: 125px }

#logo img {
	float: left;
	padding-top: 30px;

}

#logo p  { color: #000; font-size: 1.2em; font-weight: bolder; text-align: right; margin-top: 30px; margin-bottom: 0; margin-left: 0; float: right }


#logo a {
	text-decoration: none;
	color: #372412;
}


/* Menu */

/* active page tab */
#menu .active a   { color: #ff0; line-height: 35px; background: #1e4e28; text-align: center; width: 160px; height: 35px }
#menu a  { color: #fff; line-height: 35px; background: #1e4e28; text-align: center; width: 160px; height: 35px }
/* common styling */
#menu   { font-size: 20px; position: relative; top: 40px; width: 800px; height: 50px }
#menu ul li a   { color: #fff; line-height: 35px; text-decoration: none; text-align: center; display: block; width: 160px; height: 35px; overflow: hidden }
#menu ul  { text-align: center; list-style: none; margin: 0; padding: 0 }
#menu ul li  { text-align: center; position: relative; float: left }
#menu ul li ul {display: none;}

#menu ul li:hover a   { color: #ff0; line-height: 35px; background: #1e4e28; width: 160px; height: 35px }
#menu ul li:hover ul  { line-height: 35px; display: block; position: absolute; top: 35px; left: 0; width: 170px }
#menu ul li:hover ul li ul {display: none;}
#menu ul li:hover ul li a   { color: #fff; line-height: 35px; background: #1e4e28; display: block }
#menu ul li:hover ul li a:hover   { color: #ff0; line-height: 35px; background: #1e4e28; display: block }
#menu ul li:hover ul li:hover ul {display:block; position:absolute; left:170px; top:0;}
#menu ul li:hover ul li:hover ul.left {left:-170px;}
/* Page */

#wrapper   { background: url("images/page.png") }


#page   { background: #a9b3a3; margin: 0 auto; padding: 20px 0; width: 800px; min-height: 800px }

/* Content */

#content   { margin-left: 20px; width: 480px; float: left }
#sizes { margin-left: 20px; width: 760px; float: left }
#boats { margin-left: 20px; width: 760px; float: left }
#temperature { margin-left: 20px; width: 760px }
th.unit   { width: 15% }
th.unit1 { margin-left: 20px; width: 25% }
td.unit  { text-align: center; width: 15% }
td.unit1 { text-align: center; margin-left: 20px; width: 25% }
th.picture  { width: 15% }
th.picture1 { width: 25% }
td.picture { width: 15% }
td.picture1 { width: 25% }
th.equiv  { width: 20% }
th.equiv1 { width: 25% }
td.equiv { text-align: center; padding-right: 10px; padding-left: 10px; width: 20% }
td.equiv1 { text-align: center; padding-right: 10px; padding-left: 10px; width: 25% }
th.desc  { width: 40% }
th.desc1 { width: 25% }
td.desc  { text-align: justify; padding-top: 10px; padding-bottom: 10px; width: 40% }
td.desc-center { text-align: center; padding-top: 10px; padding-bottom: 10px; width: 25% }
.unit a .preview { display: none }
.unit1 a .preview { display: none }
.unit a:hover .preview  { display: block; position: absolute; z-index: 1; top: 350px }
.unit1 a:hover .preview { display: block; position: absolute; z-index: 1; top: 350px }
#coming { margin-top: -15pt; margin-bottom: -6pt; padding-left: 120pt }
.post {
	padding: 0 0 20px 0;
}
.p-temp { text-align: justify }
.title  { color: #1e4e28; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid #1e4e28 }
.img-right { margin-top: 0; margin-right: 0; margin-left: 5px; float: right }
.img-pad-left { margin-top: 0; margin-right: 0; margin-left: 15px }
.img-right2 { margin-top: 25px; margin-right: 0; margin-left: 20px; width: 40%; height: 40%; float: right }
.hover { }
.byline {
	margin: 0;
}

.meta {
	border-top: 1px solid #4A3903;
	text-align: right;
	color: #646464;
}

.meta a  { font-weight: bold; padding-left: 15px }

#content h2   { color: #1e4e28; margin: 0; padding-top: 5px; padding-right: 0; padding-bottom: 5px }

#content h2.nopad    { color: #1e4e28; font-size: 1.5em; margin: 0; padding-top: 5px; padding-right: 0; padding-bottom: 0 }

#content h4  { color: #000; font-size: 1.5em; text-align: center }
.blockbox {
width:600px; float:left; clear:both; padding-bottom:30px; margin-bottom:10px; 
}
.center {
margin:0 auto;
width:500px;
}

.compare {
font-size:90%;
color:#6A1029;
padding-top:50px;
text-align:center;
}


/* 2 column list in content */

.left {
float:left;
padding-right:10px;
width:290px;
}

.right {
float:right;
padding-left:10px;
width:290px;
}

#content ul  { list-style-type: disc; list-style-image: none; margin-bottom: 20px; padding: 0 }


#content li   { color: #1e4e28; list-style-position: outside; margin-bottom: 5px; margin-left: 35px }

.ruled li  { margin: 10px 0; padding: 10px 0; border-bottom: 1px solid #1e4e28 }
/* Sidebar */

#sidebar  { text-align: right; padding-right: 20px; width: 280px; float: right }

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

#sidebar li {
}

#sidebar li ul {
	padding: 15px 0;
}

#sidebar li li  { padding-left: 30px; border-bottom: 1px dotted #4a3903 }

#sidebar h2  { margin: 0; padding: 20px 0 2px 30px; border-bottom: 2px solid #4a3903 }

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

#sidebar img {
margin-bottom:20px;
}

/* Footer */

#footer  { color: #372413; font-size: 0.8em; font-weight: bold; background-image: url("images/page.png"); text-align: center; padding: 10px 0; clear: both }

#footer a {
	color: #C28C21;
}

/* Contact Form */

.contact p{
width: 377px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/

height: 1%;
}

.contact label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.contact input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 300px;
}

.contact input:focus, .contact textarea:focus {
background: #FFEA6F;
}

.contact textarea{
width: 300px;
height: 150px;
}

.submit-btn {
margin-left: 200px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}
.required {color: red; font-weight: bold; font-size: 130%;}
.availability { text-align: center }
.availability a { color: blue; text-decoration: underline; position: relative; top: 10px }