/* Crystal Clear Pond Services Style Sheets
----------------------------------------------- */

* {
margin: 0;
padding: 0;
}

body {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: small;
}

#shadow-wrapper {
text-align: left;
margin: auto;
width: 870px;
background: url(../images/bg-shadow.png) 50% 40px no-repeat;
}

#wrapper {
text-align: left;
width: 850px;
margin: /* Top */ 0 /* Right */ 10px /* Bottom */ 0 /* Left */ 10px;
}

h1, h2, h3, p, ul, li {
text-decoration: none;
}

img {
border: 0;
}

/* Body Page Styles
----------------------------------------------- */

body.home {
background: #CCC url(../images/pond-bg-home.jpg) 50% 0 no-repeat;
}

body.services {
background: #CCC url(../images/pond-bg-services.jpg) 50% 0 no-repeat;
}

body.other-services {
background: #CCC url(../images/pond-bg-other-services.jpg) 50% 0 no-repeat;
}

body.showcase {
background: #CCC url(../images/pond-bg-showcase.jpg) 50% 0 no-repeat;
}

body.firestone {
background: #CCC url(../images/pond-bg-firestone.jpg) 50% 0 no-repeat;
}

body.aquariums {
background: #CCC url(../images/pond-bg-aquariums.jpg) 50% 0 no-repeat;
}

body.testimonials {
background: #CCC url(../images/pond-bg-testimonials.jpg) 50% 0 no-repeat;
}

body.contact-us {
background: #CCC url(../images/pond-bg-contact.jpg) 50% 0 no-repeat;
}

/* Logo and Address
----------------------------------------------- */

#left-column {
width: 194px;
float: left;
font-weight: normal;
}

#left-column img {
margin: /* Top */ 6px /* Right */ 11px /* Bottom */ 24px /* Left */ 11px;
border: 4px #FFF solid;
display: block;
}

/* Navigation
----------------------------------------------- */

#navcontainer {
width: 194px;
float: left;
}

#navcontainer ul {
list-style: none;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li span {
display: block;
padding: /* Top */ 0 /* Right */ 10px /* Bottom */ 0 /* Left */ 17px;
color: #FFF;
}

#navcontainer ul li .about-us {
display: block;
width: 192px;
text-decoration: none;
border-top: #FFF 1px solid;
font-weight: bold;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
background: url(../images/buttons.gif) 0 0 no-repeat;
}

#navcontainer ul li .about-us:hover {
background-color: #006;
}

body.home #navcontainer ul li .about-us {
display: block;
width: 192px;
text-decoration: none;
background-color: #039;
}

#navcontainer ul li .our-services {
display: block;
width: 192px;
text-decoration: none;
border-top: #FFF 1px solid;
font-weight: bold;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
background: url(../images/buttons.gif) 0 -100px no-repeat;
}

#navcontainer ul li .our-services:hover {
background-color: #FC0;
}

body.services #navcontainer ul li .our-services {
display: block;
width: 192px;
text-decoration: none;
background-color: #f9d957;
}

#navcontainer ul li .other-services {
display: block;
width: 192px;
text-decoration: none;
border-top: #FFF 1px solid;
font-weight: bold;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
background: url(../images/buttons.gif) 0 -200px no-repeat;
}

#navcontainer ul li .other-services:hover {
background-color: #C3F;
}

body.other-services #navcontainer ul li .other-services {
display: block;
width: 192px;
text-decoration: none;
background-color: #C6F;
}

#navcontainer ul li .showcase {
display: block;
width: 192px;
text-decoration: none;
border-top: #FFF 1px solid;
font-weight: bold;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
background: url(../images/buttons.gif) 0 -300px no-repeat;
}

#navcontainer ul li .showcase:hover {
background-color: #0C3;
}

body.showcase #navcontainer ul li .showcase {
display: block;
width: 192px;
text-decoration: none;
background-color: #45da77;
}

#navcontainer ul li .firestone {
display: block;
width: 192px;
text-decoration: none;
border-top: #FFF 1px solid;
font-weight: bold;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
background: url(../images/buttons.gif) 0 -700px no-repeat;
}

#navcontainer ul li .firestone:hover {
background-color: #e33f25;
}

body.firestone #navcontainer ul li .firestone {
display: block;
width: 192px;
text-decoration: none;
background-color: #e9644f;
}

#navcontainer ul li .aquariums {
display: block;
width: 192px;
text-decoration: none;
border-top: #FFF 1px solid;
font-weight: bold;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
background: url(../images/buttons.gif) 0 -400px no-repeat;
}

#navcontainer ul li .aquariums:hover {
background-color: #900;
}

body.aquariums #navcontainer ul li .aquariums {
display: block;
width: 192px;
text-decoration: none;
background-color: #C00;
}

#navcontainer ul li .testimonials {
display: block;
width: 192px;
text-decoration: none;
border-top: #FFF 1px solid;
font-weight: bold;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
background: url(../images/buttons.gif) 0 -500px no-repeat;
}

#navcontainer ul li .testimonials:hover {
background-color: #F60;
}

body.testimonials #navcontainer ul li .testimonials {
display: block;
width: 192px;
text-decoration: none;
background-color: #F93;
}

#navcontainer ul li .contact-us {
display: block;
width: 192px;
text-decoration: none;
border-top: #FFF 1px solid;
font-weight: bold;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
background: url(../images/buttons.gif) 0 -600px no-repeat;
}

#navcontainer ul li .contact-us:hover {
background-color: #099;
}

body.contact-us #navcontainer ul li .contact-us {
display: block;
width: 192px;
text-decoration: none;
background-color: #0CC;
}

#navcontainer #speciality-button {
display: block;
width: 192px;
background: url(../images/speciality-button.jpg) left bottom no-repeat;
}

#navcontainer #speciality-button p {
color: #FFF;
padding: /* Top */ 5px /* Right */ 10px /* Bottom */ 140px /* Left */ 17px;
border-top: #FFF 1px solid;
border-bottom: #006 3px solid;
}

#navcontainer #speciality-button a:link, #navcontainer #speciality-button a:visited {
color: #FFF;
font-weight: bold;
text-decoration: underline;
}

#navcontainer #speciality-button a:hover {
font-weight: bold;
text-decoration: none;
}

/* Main Content
----------------------------------------------- */

#main-column {
float: left;
width: 656px;
margin-top: 40px;
padding: /* Top */ 0 /* Right */ 0 /* Bottom */ 5px /* Left */ 0;
}

#main-column #main-column-image-shadow {
width: 656px;
height: 245px;
float: left;
text-align: left;
background: url(../images/image-shadow.jpg) 50% 230px no-repeat;
margin-bottom: 6px;
}

#main-column #main-column-image {
width: 656px;
height: 232px;
float: left;
text-align: left;
overflow: hidden;
}

#main-column #main-column-image #no-javascript {
width: 656px;
height: 232px;
float: left;
text-align: left;
background: url(../images/index-image-1.jpg) no-repeat;
overflow: hidden;
}

#main-column #main-column-image #no-javascript p {
font-size: 1.3em;
color: #FFF;
margin:  /* Top */ 15px /* Right */ 230px /* Bottom */ 15px /* Left */ 15px;
}

#main-column #content-text {
float: left;
width: 656px;
font-weight: normal;
}

#main-column #content-text h1 {
font-size: 1.8em;
color: #69C;
font-weight: normal;
margin: /* Top */ 0 /* Right */ 10px /* Bottom */ 10px /* Left */ 10px;
}

#main-column #content-text h2 {
font-size: 1.5em;
color: #69C;
font-weight: normal;
margin: /* Top */ 0 /* Right */ 10px /* Bottom */ 10px /* Left */ 10px;
}

#main-column #content-text h3 {
font-size: 1.1em;
color: #006;
font-weight: bold;
margin: /* Top */ 0 /* Right */ 10px /* Bottom */ 10px /* Left */ 10px;
}

#main-column #content-text p {
font-size: 1em;
color: #000;
margin: /* Top */ 0 /* Right */ 10px /* Bottom */ 10px /* Left */ 10px;
line-height: 1.2em;
font-weight: normal;
letter-spacing: 0;
clear: both;
}

#main-column #content-text p a:link, #content-text p a:visited {
color: #006;
text-decoration: underline;
font-weight: bold;
}

#main-column #content-text p a:hover {
color: #006;
text-decoration: none;
}

#main-column ul {
list-style: disc url(../images/bullet-pond.gif) outside;
margin: /* Top */ 0 /* Right */ 10px /* Bottom */ 10px /* Left */ 10px;
padding-left: 20px;
line-height: 1.2em;
}

#main-column li {
margin-bottom: 3px;
}

#main-column .quotes {
width: 656px;
background: url(../images/quote-bottom.jpg) no-repeat right bottom;
}

#main-column .quotes p.first-paragraph {
background: url(../images/quote-top.jpg) no-repeat left top;
text-indent: 20px;
}

#main-column #content-text .intro {
color:#006;
font-weight:bold;
text-decoration:none;
}

#main-column #content-text .qualification-logos {
text-align: right;
}

#main-column #content-text .qualification-logos img {
margin-left: 25px;
margin-top: 15px;
}

#main-column #content-text .bold-highlight {
color:#69C;
font-weight:bold;
text-decoration:none;
}

/* Showcase Gallery Buttons
----------------------------------------------- */

#main-column #gallery {
width: 530px;
}

#main-column #gallery ul {
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
margin-bottom: 15px;
}

#main-column #gallery ul li {
display: inline;
margin-right: 15px;
}

#main-column #gallery ul li img {
border: #000066 solid 3px;
}

#main-column #gallery ul li a img, #main-column #gallery ul li a:visited img {
border: #000066 solid 3px;
}

#main-column #gallery ul li a:hover img {
border: #6699CC solid 3px;
}

/* Forms
----------------------------------------------- */
#main-column #content-text .form-container {
width: 400px;
float: left;
display: block;
clear: both;
}

#main-column #content-text .form-container .form-content {
width: 200px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}

#main-column #content-text .form-container .form-content-captcha {
width: 200px;
padding-top: 4px;
padding-bottom: 4px;
float: left;
}

#main-column #content-text .form-container .form-content-double {
width: 400px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
font-size: .9em;
}

#main-column #content-text .form-container .form-content p, #main-column #content-text .form-container .form-content-double p {
margin: /* Top */ 0 /* Right */ 10px /* Bottom */ 0 /* Left */ 10px;
color: #000;
}

#main-column #content-text .form-container .form-content .bottom, #main-column #content-text .form-container .form-content-double .bottom {
margin-bottom: 30px;
}

#main-column #content-text .input-box {
width: 160px;
color: #000;
background-color: #FFF;
border: 1px #69C solid;
}

#main-column #content-text .input-menu {
color: #000;
background-color: #FFF;
border: 1px #69C solid;
}

#main-column #content-text .input-text-area {
width: 160px;
color: #000;
background-color: #FFF;
border: 1px #69C solid;
margin-bottom: 15px;
}

#main-column #content-text .dropdown-menu {
width: 160px;
color: #000;
background-color: #FFF;
border: 1px #69C solid;
}

#main-column #content-text .button-form {
color: #000;
font-weight: bold;
padding: 1px;
background-color: #FFF;
border: 1px #69C solid;
}

#main-column #content-text .captcha-img {
border: 1px #69C solid;
}

/* Table Elements
----------------------------------------------- */

#main-column table.showcaseholder {
width: 636px;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 10px /* Left */ 10px;
}

#main-column table.showcaseholder td {
margin: 0;
padding: 3px 10px;
text-align: center;
vertical-align: middle;
}

#main-column table.showcaseholder tr {
border-bottom: 1px solid #006;
}

#main-column table.showcaseholder tr.alt {
border-bottom: 1px solid #006;
}

#main-column table.showcaseholder img {
border: 3px solid #006;
margin-top: 5px;
}

/* Footer
----------------------------------------------- */

#footer {
clear: both;
height: 20px;
text-align: right;
margin: auto;
width: 870px;
background: url(../images/bg-shadow-base.png) 50% 0 no-repeat;
padding: /* Top */ 10px /* Right */ 0 /* Bottom */ 5px /* Left */ 0;
}

#footer p {
color: #FFF;
font-size: .8em;
margin: /* Top */ 0 /* Right */ 10px /* Bottom */ 0 /* Left */ 10px;
}

#footer a:link, #footer a:visited {
color: #FFF;
font-weight: bold;
text-decoration: underline;
}

#footer a:hover {
color: #FFF;
font-weight: bold;
text-decoration: none;
}

/* Hacks
----------------------------------------------- */

#wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper {display: inline-block;}
/* Hides from IE-mac \*/
* html #wrapper {height: 1%;}
#wrapper {display: block;}
/* End hide from IE-mac */