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: 32px; line-height: 120%
}
h2
{
	font-size: 28px; line-height: 120%
}
h3
{
	font-size: 24px; line-height: 120%
}
h4
{
	font-size: 20px; line-height: 120%
}
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;
	max-width:100%;
}

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-right: auto;
	margin-left: auto;
	width: 800px;
	height: 197px;
	background-size: contain;
}
#header p
{
	color: #000;
	font-size: 20px;
	font-weight: bolder;
	line-height: 120%;
	text-align: right;
	padding-right: 2.5%;
	float: right;
	margin-bottom: 0px;
	margin-top: 0px;
}
#header a  { color: #372412 }

/* Logo */
#logo       { padding-top: 10px }
#logo img       { padding-left: 2.5%; width: 45%; float: left }

/* 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 }

#menu     { font-size: 20px; margin-right: auto; margin-left: auto; position: absolute; z-index: 3; top: 162px; right: 0; left: 0; 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;}*/
/*New Menu*/
.menu
{
	font-size: 20px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	z-index: 3;
	width: 800px;
	height: 35px
}
.menu .active a
{
	color: #ff0;
	line-height: 35px;
	text-decoration: none;
	background: #1e4e28;
	text-align: center;
	display: block;
	width: 160px;
	height: 35px
}
.menu a
{
	color: #fff;
	line-height: 35px;
	text-decoration: none;
	background: #1e4e28;
	text-align: center;
	display: block;
	width: 160px;
	height: 35px
}
.menu a:hover
{
	color: #ff0;
	line-height: 35px;
	text-decoration: none;
	background: #1e4e28;
	text-align: center;
	display: block;
	width: 160px;
	height: 35px
}
.menu ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	transition: max-height 0.25s linear;
	}
.menu ul li
{
	display: inline-block;
	position: relative;
	float: left;
	transition: visibility .25s linear;
}
.menu ul li ul
{
	display: none;
}
.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:hover ul
{
	display:block;
	position:absolute;
	left:170px;
	top:0;
}
.menu ul li:hover ul li:hover ul.left
{
	left:-170px;
}
.menu .navbar-handle
{
	color: #fff;
	font-size: 20px;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	background: #1e4e28;
	display: none;
	position: relative;
	z-index: 10;
	width: 100%;
}
.navbar-checkbox
{
  display: none;
}
/*@media (max-width: 800px)
{
	.menu
	{
		width: 100%;
	}
	.menu .active a
	{
		width: auto;
	}
	.menu a
	{
		width: auto;
	}
	.menu a:hover
	{
		color: #ff0;
		width: 20%;
	}
}*/
/*@media (max-width: 640px)*/
@media (max-width: 800px)
{
	.menu
	{
		font-size: 20px;
		font-weight: bold;
		position: relative;
		z-index: 3;
		width: 100%;
		height: 35px;
	}
	.menu .active a
	{
		width: 100%;
	}
	.menu a
	{
		width: 100%;
	}
	.menu a:hover
	{
		color: #ff0;
		width: 100%;
	}
	.menu ul
	{
		max-height: 0;
		overflow: hidden;
	}
	.menu ul li
	{
		visibility: hidden;
		display: block;
		float: none;
	}
	.menu ul li ul
	{
		display: block;
	}
	.menu ul li:hover ul
	{
		line-height: 35px;
		display: block;
		position: relative;
		top: 0px;
		left: 0;
		width: 100%;
	}
	.menu .navbar-handle
	{
		display: block;
	}
	#navbar-checkbox:checked + .menu ul
	{
		max-height: 400px;
	}
	#navbar-checkbox:checked + .menu ul li
	{
		visibility: visible;
	}
}

/* Page */
#wrapper   { background: url("images/page.png") }
#page
{
	background: #a9b3a3;
	margin: 0 auto;
	padding: 20px 0;
	width: 800px;
	overflow: auto;
}

/* 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: 20% }
td.unit  { text-align: center; width: 15% }
td.unit1  { text-align: center; margin-left: 20px; width: 20% }
th.picture  { width: 15% }
th.picture1  { width: 15% }
td.picture { width: 15% }
td.picture1  { width: 15% }
th.equiv  { width: 20% }
th.equiv1  { width: 20% }
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: 20% }
th.desc  { width: 40% }
th.desc1  { width: 20% }
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: 20% }
.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; padding-top: 5px; padding-bottom: 5px }

#content h2.nopad     { color: #1e4e28; padding-top: 5px }

#content h4
{
	color: #000;
	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; margin-bottom: 20px }


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

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

/* Sidebar */
#sidebar    { text-align: right; margin-right: auto; margin-left: auto; padding-right: 20px; width: 280px; float: right }

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#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 img {
margin-bottom:20px;
}

/* Footer */
#footer
{
	color: #372413;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	line-height: 110%;
	font-stretch: normal;
	background-image: url("images/page.png");
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
#copyright
{
	margin-top: 0px;
	margin-bottom: 0px;
}

/* 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 }

@media screen and (max-width: 800px)
{
	/* applies only if the screen is narrower than 800px */
    #header
	{
		background-color: #a9b3a3;
		background-image: url("images/watertower.png");
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
		height: auto;
		overflow: auto;
	}
	#header p
	{
		color: #000;
		font-size: 20px;
		font-weight: bolder;
		line-height: 120%;
		text-align: right;
		padding-right: 2.5%;
		float: right
	}
	
	#logo
	{
		padding-left: 2.5%;
		height: 125px
	}

	#logo img
	{
		width: 45%;
		min-width: 240px;
		float: left
	}

	#content     { margin-right: auto; margin-left: auto; width: 80%; float: none }
	#page    	{ background: #a9b3a3; margin: 0 auto; width: 100%; min-height: 800px;   }
	#images		{ width: 100% }
	.post
	{
		width: 90%;
	}
	
	#sidebar
	{
		text-align: center;
		margin-top: 30px;
		margin-right: auto;
		margin-left: auto;
		width: 80%;
		padding-right: 0px;
		float: none;
	}
}
@media screen and (max-width: 566px)
{
    #header
	{
		background-image: none;
	}
}
@media screen and (max-width: 520px)
{
    #header p
	{
		text-align: left;
		padding-left: 2.5%;
		padding-top: 10px;
		padding-bottom: 10px;
		float: left
	}
}