@charset "utf-8";
/* CSS Document */

/* colors:
orange: #f79537
blue: #99cccc
*/

/* resets */
* { margin: 0; padding: 0; border: 0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, strong, blockquote {}
table, caption, thead, tfoot, tbody, tr, th, td { border-collapse: collapse; border-spacing: 0; }
ul, ol, li, dl, dt, dd {}
form, input, input.text, textarea, fieldset {}
address, cite, code, dfn, var {}
h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #666; }
h1 { color: #f79537; font-size: 18px; font-style: italic; }
xxxh2 { margin: .5em 0; font-size: 14px; }
h2, h3 { background: #eee; padding: .25em .5em; color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
h3 { background: none; padding: .25em 0; margin-top: 1em; color: #666; }

p {  }
a { color: #99cccc; }
a:link, a:over {}
a:hover, a:active {}
em, strong {}

/* layout */
body {
	text-align: center;
	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
	xxxbackground: #121830;
}
.pageTop { height: 9px; margin-top: 20px; background: url(/Images/page_bkg_top.png) top center no-repeat; }
.pageBottom { height: 9px; background: url(/Images/page_bkg_bottom.png) top center no-repeat; }
.pageWrapper {
	text-align: left;
	width: 964px;
	margin: auto;
	padding: 0 18px;
	background-color: #333;
	xxxoverflow: hidden; /* throws off page center??! */
}
.header {
	position: relative;
	height: 100px;
	padding: 9px;
}
.contentWrapper { position: relative; padding: 2px 0; border-top: 12px solid #f79537; overflow: hidden; }
.content { height: 435px; width: 748px; float: right; margin: 0; background: #fff; border: 2px solid #fff; }
.sideBar { width: 210px; float: left; }
.bottomWrapper { border-top: 12px solid #666; padding-top: 2px; overflow: hidden; }
.bottom { width: 737px; width: 752px; float: right; padding: 6px 0 0 0; margin: 0; }
.footer { width: 1000px; margin: auto; text-align: center; font-size: 12px; letter-spacing: 0; padding: 10px 0 40px 0; }

/* navs */
div.navTop { position: absolute; top: 0px; right: 10px; color: #f79537; }
div.navTop ul { text-transform: uppercase; list-style: none; font-weight: bold; xxxpadding-bottom: 25px; }
div.navTop ul li:hover ul { display: block; }

	div.navTop ul ul { display: none; position: absolute; top: 25px; right: 55px; text-transform: none; border: 1px solid #999; }
	div.navTop ul ul li { padding: .4em .6em .4em 0; }
	div.navTop ul ul li:first-child { padding-left: .6em; }
	div.navTop ul ul li a { font-style: italic; line-height: 15px; }
	div.navTop ul ul li a:hover {}
	
div.navTop ul li { float: left; padding: 0 .4em 0 .1em; }
div.navTop ul li a { text-decoration: none; color: #999; line-height: 25px; }
xxxdiv.navTop ul li a:after { content: "/"; color: #f79537; }
div.navTop ul li:hover a {  }
div.navTop ul li a:hover { color: #fff; }

div.navMain { padding: 0 13px 0 17px; background: url(../Images/grad_top.gif) repeat-x top; }
div.navMain ul { margin-top: 25px; list-style: none; }

	div.navMain ul ul { margin: 0 0 13px 0; }
	div.navMain ul ul li { border: none; padding: 0; }
	div.navMain ul ul li a { text-transform: none; font-weight: normal; color: #999; line-height: 18px; }
	div.navMain ul ul li a:hover { color: #fff; }

div.navMain ul li { border-top: 1px solid #99cccc; padding: 6px 0; }
div.navMain ul li:first-child { border: none; }
div.navMain ul li a, div.navMain ul li span { display: block; text-transform: uppercase; font-size: 14px; font-weight: bold; line-height: 28px; color: #fff; text-decoration: none; }
div.navMain ul li a:hover { color: #99cccc; }

ul.navContent { list-style: none; }
ul.navContent li { width: 123px; margin-left: 2px; float: left; }
ul.navContent li:first-child { margin-left: 0; }
ul.navContent li a { display: block; text-decoration: none; }
ul.navContent li p a { text-align: center; width: 123px; line-height: 30px; color: #fff; background: url(../Images/trans80_99cccc.png); }
ul.navContent li:hover p a { color: #000; background-image: url(/Images/trans80_ffffff.png); }

.index ul li p { height: 435px; background: url(../Images/trans60_000000.png); }
.index ul li:hover p { background: none; }

.index ul li.gardenponds { background: url(/Images/photo_gardenponds.jpg) -180px -8px no-repeat; }
.index ul li.koiponds { background: url(/Images/photo_koiponds.jpg) -338px -8px no-repeat; }
.index ul li.features { background: url(/Images/photo_features.jpg) -117px -4px no-repeat; }
.index ul li.fountains { background: url(/Images/photo_fountains.jpg) -131px -20px no-repeat; }
.index ul li.filtration { background: url(/Images/photo_filtration.jpg) -126px -31px no-repeat; }
.index ul li.rainwater { background: url(/Images/photo_rainwater.jpg) -133px -8px no-repeat; }

div.navBottom { float: right; padding: 0 10px; }
div.navBottom ul { list-style: none; }
div.navBottom ul li { float: left; padding: 0 .4em 0 .1em; }
div.navBottom ul li a { text-transform: uppercase; }
div.navBottom ul li:hover a {}

/* content */
.header {}
.subhead { font-size: 16px; margin-bottom: 0; padding: .2em .4em; background: #99cccc; }

div.rotatorWrapper { position: relative; width: 748px; height: 192px; overflow: hidden; xxxfloat: right; background: #fff; border: 2px solid #fff; }
div.arrowLeft, div.arrowRight { display: none;position : absolute; top: 0; height: 192px; width: 30px; background: url(/Images/trans80_f79537.png); z-index: 1111; }
div.arrowLeft { left: 0; }
div.arrowRight { right: 0; }
div.rotatorWrapper a.prev, div.rotatorWrapper a.next { position: absolute; top: 90px; display: block; width: 19px; height: 19px; text-decoration: none; }
div.rotatorWrapper a.prev { background: url(/Images/icon_arrow_left.png) no-repeat; left: 5px; }
div.rotatorWrapper a.next { background: url(/Images/icon_arrow_right.png) no-repeat; right: 5px; }

div.rotator { xxxwidth: 748px; xxxheight: 192px; xxxoverflow: hidden; position: relative; visibility: hidden; left: -5000px; }
div.rotator ul { list-style: none; float: left; width: 1000px; margin: 0; padding: 0; }
div.rotator ul li { float: left; margin-left: 3px; width: auto!important; }
div.rotator ul li:first-child { margin: 0; }
div.rotator ul li a { xxxposition: relative; xxxdisplay: block; xxxwidth: 147px; xxxheight: 192px; }
div.rotator ul li a img { height: 192px; }

div.rotator ul li img.thumb { height: 192px; }
div.rotatorWrapper img.vert, div.rotatorWrapper img.horiz { height: 435px; position: absolute; top: 10px; left: 50px; }

.sideBar h1 {  }
.sideBar h2 {}
.sideBar p.heading3 { font-size: 11px; text-transform: uppercase; color: #333; background: #99cccc; padding: 4px 7px; }
.sideBar p.heading3 a:link, .sideBar p.heading3 a:visited { text-decoration: none; color: #333; }
.sideBar p {}
.sideBar a {}
.sideBar a:link, .sideBar a:over {}
.sideBar a:hover, .sideBar a:active {}
.search { padding: 7px 0; }
input.textfield { background: #fff; padding: 3px 0 3px 10px; color: #999; font-size: 11px; text-transform: uppercase; vertical-align: center; border: 1px solid #999; }
input.button { height: 21px; background: #f79537; color: #fff; padding: 0 .3em; }
input.button:hover { color: #000; }

.bottomWrapper .sideBar { background: url./Images/grad_top.gif) repeat-x; width: 190px; padding: 6px 10px; }

div.content {  }
div.garden-ponds { background: url(/Features/images/garden-pond-main.jpg) 0px 0px no-repeat; }
div.koi-ponds { background: url(/Features/images/koi-pond-main.jpg) 0px 0px no-repeat; }
div.large-features { background: url(/Features/images/large-features-main.jpg) 0px 0px no-repeat; }
div.fountains { background: url(/Images/photo_lg_fountains.jpg) -250px -450px no-repeat; }
div.filtration { background: url(/Features/images/filtration-main.jpg) 0px 0px no-repeat; }
div.rain-water { background: url(/Images/photo_lg_rainwater.jpg) -200px -450px no-repeat; }
div.design, div.construction, div.maintenance { background: url(/Images/no-image.jpg) no-repeat; }
div.why-pondworks, div.information-forms, div.manuals, div.brochures, div.downloads, div.links-resources, div.contact-us, div.customer-info-form, div.design, div.construction, div.maintenance { background: #fff; }

.description-whole { width: 675px; }
.description-half { width: 355px; }
.description-half, .description-whole { max-height: 331px; float: right; padding: 18px; margin: 20px; overflow: auto; background: url(/Images/trans80_ffffff.png); }
.description-half h1, .description-whole h1 { font-size: 16px; color: #666; line-height: 17px; margin-bottom: .8em; }
.description-half p, .description-whole p { padding-bottom: .8em; }
.description-half ul, .description-whole ul { list-style: none; line-height: 1.25em; font-weight: bold; margin: 0 0 20px 0; padding: 10px 0; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; }
.description-half ul li, .description-whole ul li { padding: .15em 0 .15em 12px; margin: 0 10px; background: url(/Images/icon_check.gif) 0 7px no-repeat; }
.description-half ul.2 li, .description-whole ul.2 li { }
.description-half .details, .description-whole .details { xxxclear: both; font-weight: bold; padding: .6em; border: 1px solid #ccc; font-size: 11px; }

div.newsBottom .date a { color: #fff; font-size: 9px; text-transform: uppercase; text-decoration: none; }
div.newsBottom p { font-size: 11px; color: #666; line-height: 13px; letter-spacing: 0; }
div.newsBottom li { padding: 6px 0 10px 22px; border-top: 1px solid #999; }
div.newsBottom li:first-child { border: none; }

div.newsBottom a { color: #fff; font-size: 9px; text-transform: uppercase; text-decoration: none;  }
div.newsBottom, div.newsBottom a b { display: block; text-transform: capitalize; font-size: 12px; padding-bottom: -3px; }
div.newsBottom table td { border-bottom: 1px solid #999; padding: 10px 0; color: #666; font-size: 11px; line-height: 13px; }
div.newsBottom div.title { display: none; }
.scroller { height: 370px; height: 190px; overflow-y: auto; }
.scroller div.spacer { height: 0; }
.scroller div { width: 165px; }

.bottom p { color: #999; margin-bottom: .8em; }
.bottom ul { color: #99cccc; list-style-position: inside; margin: 0 0 .8em 0; }
.bottom li {  }
.bottom li span { color: #999; }
.details { font weight: bold; font-style: italic; font-size: 16px; }

.footer p { float: left; margin-left: 10px; color: #666; }
.footer a { text-decoration: none; color: #666; }
.footer a:hover { color: #fff;  }
.footer a:link, .footer a:over {}
.footer a:hover, .footer a:active {}

/* form page */
table.formPage { border-collapse: collapse; }
table.formPage td { padding: .25em; vertical-align: top; border: 1px solid #333; }

/* scrollbars */
body {
	scrollbar-face-color: #999;
	scrollbar-highlight-color: #999;
	scrollbar-shadow-color: #999;
	scrollbar-3Dlight-color: #999;
	scrollbar-darkshadow-color: #999;
	scrollbar-arrow-color: #eee;
	scrollbar-track-color: #eee;
	overflow: auto;
 }

/* news module */
.newsTable { margin-top: -30px; }
.newsTable td { padding: 3px; }

/* lightbox */
span#lightbox-image-details-caption { display: none!important; }
a#lightbox-nav-btnPrev { display: block!important; }
a#lightbox-nav-btnNext { display: block!important; }
div#lightbox-nav { display: block!important; }

/* forms */

div#ctl00_Body_UpdatePanel3, div#ctl00_Body_UpdatePanel4 { margin-bottom: 20px; }

div.contactUs { margin: 20px 0; }

table.contactForm tbody {  }
table.contactForm td, table.contactForm2 td { width: 560px; padding: 10px 3px; vertical-align: top; xxxbackground: blue; border-top: 1px dotted #eee; }
table.contactForm td:first-child, table.contactForm2 td:first-child { font-style:italic; }
table.contactForm td:first-child { width: 140px; xxxbackground: #eee; text-align: right; }
xxxtable.contactForm td span { display: block; }
table.contactForm td span input, table.contactForm2 input { padding: 0 5px; xxxmargin-top: 15px; vertical-align: middle; }

table#ctl00_Body_rdoReference, table.contactForm table { border: 1px solid red; xxxwidth: 550px; }
table.contactForm table td { vertical-align: middle; width: 550px; }
table.contactForm table td:first-child { background: green; width: 550px; }
table.contactForm2 td { xxxborder: 1px solid red; }

/* pages */
p.heading2 { background:#333; padding:.25em; }
table.contact-us { margin-bottom: 20px; border: 1px solid #eee; }
table.contact-us td { padding: 4px 10px 4px 0; font-style: italic; border-bottom: 1px dotted #eee; }
table.contact-us td:first-child { padding-left: 10px; text-align:right; font-style: normal; text-transform: uppercase; letter-spacing: 1px; font-size: 9px; line-height: 19px; }
table.contact-us p { padding-bottom: 0; }

div.dude { width: 250px; height: 225px; float: left; margin: 0 25px 25px 0; overflow: hidden; padding: 20px; border: 1px dotted #ccc; xxxborder-top: 3px solid #333; }
div.dude img { xxxfloat: left; border: 1px solid #999; }
div.dude div.inside { float: left; margin: 10px 0 0 0; }

.float { width: 250px; float: left; margin: 0 20px 20px 0; }