/*
 Screen style    
 Site: Nautica 13
*/


.box {
 background-color: #DFF1EE;
 color: #8D8D8D;
}

.layer0 {
margin: 0;
padding: 0;
width: 140px;
}
.skyBlue {
	color: #00F;
}
 
.heading0 {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content0 {
padding: 5px 10px;
background-color:#fafafa;
width:100%;
}

.content0 a:link {
	color: #00F;
}

.content0 a:hover {
	color:#09F;
}

p { padding: 5px 0; }

.box.left.welcome {
 background-image: url(../images/bg/blue/welcome.jpg);
 background-position: bottom left;
 background-repeat: no-repeat;
 padding-top: 18px;
}

.box.left.welcome h2 {
 margin-bottom: 0.75em;
}

#content {
 background: transparent url(../images/bg/blue/content-bottom.gif) left bottom no-repeat;
 color: #0000ff;
 padding-bottom: 12px;
}

#content a {
 background-color: transparent;
 color: #470F00;
 text-decoration: none;
}
#content a:hover {
 background-color: transparent;
 color: #470F00;
 text-decoration: underline;
}

#content a:hover {
 background-color: transparent;
 color: #470F00;
}

#content h1, #content h2, #content h3 {
	background-color: transparent;
	color: #470F00;
	font-size: 14px;
	text-align: left;
}


#packages {
color:#000;
width: 900px;
font-size:14px;
margin-left:1px;
float:right;
background-color: #DFF1EE;
border-top: 5px solid #ffffff;
border-right: 5px solid #ffffff;
border-bottom: 5px solid #ffffff;
border-left: 5px solid #ffffff;
}

#packages ul {
	list-style-image:url(../images/green_check.gif);
	 padding-left: 0.8em; 
  list-style: none;
}

#packages li {
		list-style-image:url(../images/green_check.gif);
	 padding-left: 0.8em; 
}

#box1 {
	width:235px;
	float:left;
	margin-left:7px;
	background-color:white;
	border:#0F0 thin solid;
	padding:5px;
}

#box1 h2 {
	font-size:large;
	color:green;
	text-align:center;
}

#box2 {
	width:235px;
	float:left;
	margin-left:10px;
	margin-top:5%;
	background-color:white;
	border:#00F thin solid;
	padding:5px;
}

#box2 h2 {
	font-size:large;
	color:blue;
	text-align:center;
}

#box3 {
	width:230px;
	float:left;
	margin-left:10px;
	margin-top:10%;
	background-color:white;
	border:#F00 thin solid;
	padding:5px;
}

#box3 h2 {
	font-size:large;
	color:red;
	text-align:center;
}

#kw {
	margin:0 auto;
	color:gray;
	font-size:8px;
	text-align:center;
}
#kw a:link {
	color:gray;
	font-size:8px;
	text-align:center;
}

#lgimg {
	margin:0 auto;
	text-align:center;
}
#lgimg a {
	color:blue;
	font-size:15px;
	margin-bottom:10px;
}

#packages img {
	border:none;
}

#packages hr {
	height:3px;
	width:90%;
	color:#CCC;
	background-color:#CCC;
}

a.lglink {font-size:17px; color:blue; background-color:transparent;}
a:visited .lglink {font-size:17px; color:blue; background-color:transparent;}
a:hover .lglink {font-size:17px; color:blue; background-color:transparent;}
a:hover .lglink {font-size:17px; color:blue; background-color:transparent;}

#footer {
 background-color: #DFF1EE;
 background-image: none;
 color: #684C35;
 width: 716px;
}

#footer a {
 background-color: transparent;
 color: #684C35;
}

#footer a:hover {
 background-color: transparent;
 color: #CCCCCC;
}

#footer p {
 background: #DFF1EE url(../images/bg/blue/footer-bottom.gif) bottom left no-repeat;
 color: #684C35;
}

.gallerycontroller{
background: #DFF1EE;
width: 230px;
height: 80px;
padding-left: 3px;
}

.gallerycontent{
width: 230px;
height: 230px;
border: 0px;
padding: 3px;
display: block;
}


#inner-wrapper {
 background: #D0E7E3 url(../images/bg/blue/inner-wrapper-top.gif) left top no-repeat;
 color: #8D8D8D;
}

#nav a {
 background-color: #FFFFFF;
 color: #453121;
}

#nav a#nav01 span {
 background-image: url(../images/nav/blue/01.gif);
}

#nav a#nav02 span {
 background-image: url(../images/nav/blue/02.gif);
}

#nav a#nav03 span {
 background-image: url(../images/nav/blue/03.gif);
}

#nav a#nav04 span{
 background-image: url(../images/nav/blue/04.gif);
}

#nav a#nav04 {
 width: 111px;
}

#nav a#nav05 span{
 background-image: url(../images/nav/blue/05.gif);
}

#nav a#nav05 {
 width: 109px;
}

#nav a:hover {
 background-color: #FFFFFF;
 color: #453121;
}

#original-events h1 span {

}

#original-events img {
 border: 5px solid #fff;
}

#testimonials-link {
 height: 107px;
 width: 29px;
 left: -1px;
}

#testimonials-link a:hover span, #testimonials-link a.current span {
 background-position: -29px 0;
}

#testimonials-link a:hover {
 background-color: #DDF1EE;
 color: #453121;
}

#testimonials-link span {
 background-image: url(../images/nav/blue/testimonials.gif);
}

#projects-link {
 height: 107px;
 width: 29px;
 left: -1px;
}

#projects-link a:hover span, #projects-link a.current span {
 background-position: -29px 0;
}

#projects-link a:hover {
 background-color: #DDF1EE;
 color: #453121;
}

#projects-link span {
 background-image: url(../images/nav/blue/projects.gif);
}

#leaks-link {
 height: 107px;
 width: 29px;
 left: -1px;
}

#leaks-link a:hover span, #leaks-link a.current span {
 background-position: -29px 0;
}

#leaks-link a:hover {
 background-color: #DDF1EE;
 color: #453121;
}

#leaks-link span {
 background-image: url(../images/nav/blue/leaks.gif);
}

#products {
 height: 107px;
 width: 29px;
 left: -1px;
}

#products a:hover span, #products a.current span {
 background-position: -29px 0;
}

#products a:hover {
 background-color: #DDF1EE;
 color: #453121;
}

#products span {
 background-image: url(../images/nav/blue/products.gif);
}

#renovation-link {
 height: 107px;
 width: 29px;
 left: -1px;
}

#renovation-link a:hover span, #renovation-link a.current span {
 background-position: -29px 0;
}

#renovation-link a:hover {
 background-color: #DDF1EE;
 color: #453121;
}

#renovation-link span {
 background-image: url(../images/nav/blue/renovation.gif);
}

#links-link {
 height: 107px;
 width: 29px;
 left: -1px;
}

#links-link a:hover span, #links-link a.current span {
 background-position: -29px 0;
}

#links-link a:hover {
 background-color: #DDF1EE;
 color: #453121;
}

#links-link span {
 background-image: url(../images/nav/blue/links.gif);
}

#contact-link {
 height: 107px;
 width: 29px;
 left: -1px;
}

#contact-link a:hover span, #contact-link a.current span {
 background-position: -29px 0;
}

#contact-link a:hover {
 background-color: #DDF1EE;
 color: #453121;
}

#contact-link span {
 background-image: url(../images/nav/blue/contact.gif);
}

#wrapper {
width: 828px;
}

.slide
{
width: 469px;
padding: 0px;
border-top: 5px solid #ffffff;
border-right: 5px solid #ffffff;
border-bottom: 5px solid #ffffff;
border-left: 5px solid #ffffff;
}

.underslide
{
width: 460px;
padding: 5px;
margin-top:10px;
border-top: 5px solid #ffffff;
border-right: 5px solid #ffffff;
border-bottom: 5px solid #ffffff;
border-left: 5px solid #ffffff;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #000;
}

.slide p {
color: #666666;
}

.water-header
{
padding: 20px;

}

#dropinboxv2cover{
width: 320px; /*change width to desired */
height: 220px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
width: 300px; /*change width to above width-20. */
height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid black; /*Customize box appearance*/
background-color: lightyellow;
padding: 4px;
position:absolute; /*Don't change below 3 rules */
left: 0;
top: 0;
}

.whiteTextField {
border:0px solid #ffffff; 
background-color: lightyellow;
color: #000099;
}

.aceTextField {
border:1px solid #4b77b4;
background-color: lightyellow;
color: #000099;
padding-left: 2px;
}

.aceButton {
background-color: lightyellow;
border-color: 000099;
border-style: solid;
color: #000099;
}

#pscroller1{
width: 205px;
height: 20px;
border: 4px solid white;
padding: 5px;
background-color: #e1f1f0;
}



.someclass{ //class to apply to your scroller(s) if desired
}

/* form styles */
.formfield {
width: 200px;
color: #666666;
border: 1px solid #666666;
background: transparent;
padding: 2px;
}

.formfieldshort {
width: 100px;
color: #666666;
border: 1px solid #666666;
background: transparent;
padding: 2px;
}


.formtextarea {
color: #666666;
border: 1px solid #666666;
background: transparent;
padding: 2px;
font-family: Arial, Helvetica, sans-serif;
}

.formbutton {
background-color: #003876;
border-color: #d8dfea rgb(14, 31, 91) rgb(14, 31, 91) rgb(216, 223, 234);
border-style: solid;
border-width: 1px;
color: #fff;
font-family: arial, tahoma, verdana, sans-serif;
font-size: 100%;
margin: 0 2px;
padding: 4px 18px;
font-weight: bold;
width:auto;
overflow:visible;
}



.bold {
	color: #000;
	font-weight: bold;
}

/* ================================================================ 
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/css3-slide-list.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#css3slidebox {
	background-color:white;
}

#css3Slide2 {width:890px; height:24px; margin:1px auto; position:relative; z-index:501;}
#css3Slide2 ul {padding:0; margin:0; list-style:none; height:27px; float:left; position:relative; z-index:500; list-style-image:none;}
#css3Slide2 ul li {float:left; height:27px; font: 12px/24px arial, sans-serif; margin:0 0 0 10px; list-style-image:none;}
#css3Slide2 ul li span {display:block; float:left; height:27px; padding:0 1px 0 0; color:blue;}
#css3Slide2 ul li b {display:block; float:left; height:27px; padding:0 5px 0 5px; margin-left:-10px; cursor:default;}

#css3Slide2 ul li:hover > span {background:url(../css3-slide/tab.png) no-repeat right top; color:#fff;}
#css3Slide2 ul li:hover > span b {background:url(../css3-slide/tab.png) no-repeat left top;}

#css3Slide2 ul li.blank {width:890px; height:0; position:absolute; left:0; top:24px; overflow:hidden; border-top:3px solid #666; z-index:-1; margin:0; padding:0;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide2 .base {width:890px; height:310px; background:url(../css3-slide/back.png) repeat-x; position:absolute; top:-310px;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide2 .shadow {width: 890px; height:10px; position:absolute; left:0; bottom:0; background:url(../css3-slide/shadow.png);}

#css3Slide2 ul:hover li.blank {height:310px;}
#css3Slide2 ul:hover li.blank .base {top:0;}

#css3Slide2 ul li .container {width:890px; height:0; position:absolute; left:0; top:27px; z-index:501; overflow:hidden;  background: url(../css3-slide/trans.png);
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide2 ul li:hover .container {height:310px;}

#css3Slide2 ul li .container .sub {width:890px; position:relative; height:260px; padding:20px 0; top:-300px;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#css3Slide2 ul li:hover .container .sub {top:0;}

#css3Slide2 ul li .container .sub h4 {font-size:18px; padding:0 0 1px 1px; margin:0;}
#css3Slide2 ul li .container .sub dl {padding:0; margin:0;}
#css3Slide2 ul li .container .sub dl dt {font-size:14px; font-weight:bold; height:30px; padding-left:1px;}
#css3Slide2 ul li .container .sub dl dd {display:block; height:30px; line-height:30px; padding:0 0 0 1px; margin:0; font-weight:bold; font-size:15px; color:#888; width:500px; background: url(../css3-slide/trans.png);}

#css3Slide2 ul li .container .sub dl dd p {display:block; position:absolute; left:150px; top:40px; width:500px; height:230px; font-size:12px; font-weight:normal; padding:0; margin:0; line-height:20px; opacity:0; filter: alpha(opacity=0); background: url(../css3-slide/trans.png); z-index:1;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide2 ul li .container .sub dl dd p em {font-style:normal; font-weight:bold; text-decoration:none;}
#css3Slide2 ul li .container .sub dl dd p a {color:#069; font-weight:bold; text-decoration:none;}
#css3Slide2 ul li .container .sub dl dd p a:hover {text-decoration:underline;}

#css3Slide2 ul li .container .sub dl dd img {position:absolute; right:0; padding-right:30px; top:50px; opacity:0; filter: alpha(opacity=0); z-index:1; 
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide2 ul li .container .sub dl dd.current {color:#000; background:url(../css3-slide/arrow.gif) no-repeat 120px center;}
#css3Slide2 ul li .container .sub dl dd.current p {opacity:1; filter: alpha(opacity=100); z-index:20;}
#css3Slide2 ul li .container .sub dl dd.current img {opacity:1; filter: alpha(opacity=100); z-index:20;}

#css3Slide2 ul li .container .sub dl:hover dd.current {color:#888; background:none;}
#css3Slide2 ul li .container .sub dl:hover dd.current p {opacity:0; filter: alpha(opacity=0); z-index:10;}
#css3Slide2 ul li .container .sub dl:hover dd.current img {opacity:0; filter: alpha(opacity=0); z-index:10;}

#css3Slide2 ul li .container .sub dl:hover dd:hover {color:#000; cursor:default; background:url(../css3-slide/arrow.gif) no-repeat 120px center;}
#css3Slide2 ul li .container .sub dl:hover dd:hover p {opacity:1; filter: alpha(opacity=100); z-index:20;}
#css3Slide2 ul li .container .sub dl:hover dd:hover img {opacity:1; filter: alpha(opacity=100); z-index:20;}

/* ================================================================ 
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/css3-slide-list.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#css3Slide {width:890px; height:24px; margin:1px auto; position:relative; z-index:500;}
#css3Slide ul {padding:0; margin:0; list-style:none; height:27px; float:left; position:relative; z-index:500; list-style-image:none;}
#css3Slide ul li {float:left; height:27px; font: 12px/24px arial, sans-serif; margin:0 0 0 10px; list-style-image:none;}
#css3Slide ul li span {display:block; float:left; height:27px; padding:0 1px 0 0; color:blue;}
#css3Slide ul li b {display:block; float:left; height:27px; padding:0 1px 0 1px; margin-left:-1px; cursor:default;}

#css3Slide ul li:hover > span {background:url(../css3-slide/tab.png) no-repeat right top; color:#fff;}
#css3Slide ul li:hover > span b {background:url(../css3-slide/tab.png) no-repeat left top;}

#css3Slide ul li.blank {width:890px; height:0; position:absolute; left:0; top:24px; overflow:hidden; border-top:3px solid #666; z-index:-1; margin:0; padding:0;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

.base {width:890px; height:310px; background:url(../css3-slide/back.png) repeat-x; position:absolute; top:-310px;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

.shadow {width: 890px; height:10px; position:absolute; left:0; bottom:0; background:url(../css3-slide/shadow.png);}

#css3Slide ul:hover li.blank {height:310px;}
#css3Slide ul:hover li.blank .base {top:0;}

#css3Slide ul li .container {width:890px; height:0; position:absolute; left:0; top:27px; z-index:500; overflow:hidden;  background: url(../css3-slide/trans.png);
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide ul li:hover .container {height:310px;}

#css3Slide ul li .container .sub {width:890px; position:relative; height:260px; padding:20px 0; top:-300px;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#css3Slide ul li:hover .container .sub {top:0;}

#css3Slide ul li .container .sub h4 {font-size:18px; padding:0 0 1px 1px; margin:0;}
#css3Slide ul li .container .sub dl {padding:0; margin:0;}
#css3Slide ul li .container .sub dl dt {font-size:14px; font-weight:bold; height:30px; padding-left:1px;}
#css3Slide ul li .container .sub dl dd {display:block; height:30px; line-height:30px; padding:0 0 0 1px; margin:0; font-size:15px; font-weight:bold; color:#888; width:150px; background: url(../css3-slide/trans.png);}

#css3Slide ul li .container .sub dl dd p {display:block; position:absolute; left:150px; top:50px; width:500px; height:230px; font-size:12px; font-weight:normal; padding:0; margin:0; line-height:20px; opacity:0; filter: alpha(opacity=0); background: url(../css3-slide/trans.png); z-index:1;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide ul li .container .sub dl dd p em {font-style:normal; font-weight:bold; text-decoration:none;}
#css3Slide ul li .container .sub dl dd p a {color:#069; font-weight:bold; text-decoration:none;}
#css3Slide ul li .container .sub dl dd p a:hover {text-decoration:underline;}

#css3Slide ul li .container .sub dl dd img {position:absolute; right:0; padding-right:30px; top:50px; opacity:0; filter: alpha(opacity=0); z-index:1; 
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide ul li .container .sub dl dd.current {color:#000; background:url(../css3-slide/arrow.gif) no-repeat 120px center;}
#css3Slide ul li .container .sub dl dd.current p {opacity:1; filter: alpha(opacity=100); z-index:20;}
#css3Slide ul li .container .sub dl dd.current img {opacity:1; filter: alpha(opacity=100); z-index:20;}

#css3Slide ul li .container .sub dl:hover dd.current {color:#888; background:none;}
#css3Slide ul li .container .sub dl:hover dd.current p {opacity:0; filter: alpha(opacity=0); z-index:10;}
#css3Slide ul li .container .sub dl:hover dd.current img {opacity:0; filter: alpha(opacity=0); z-index:10;}

#css3Slide ul li .container .sub dl:hover dd:hover {color:#000; cursor:default; background:url(../css3-slide/arrow.gif) no-repeat 120px center;}
#css3Slide ul li .container .sub dl:hover dd:hover p {opacity:1; filter: alpha(opacity=100); z-index:20;}
#css3Slide ul li .container .sub dl:hover dd:hover img {opacity:1; filter: alpha(opacity=100); z-index:20;}


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
height:600px;
margin-bottom:20px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}