/* ---------------------------------------------
Hauk Custom Pools
07.2009 / www.haukcustompools.com
----------------------------------------------- */

/* 
	Eric Meyer's CSS Reset 
	http://meyerweb.com/eric/tools/css/reset/
	v1.0 | 20080212
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}

body {line-height:1}
ol, ul {list-style: none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content:none}

/* remember to define focus styles! */
:focus {outline:0}
	
/* remember to highlight inserts somehow! */
ins {text-decoration:none}
del {text-decoration:line-through}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:collapse;border-spacing:0}


/* ---------- Body ---------- */


body {
	font: normal 12px/20px Arial, Verdana, sans-serif;
	background: url('../images/hauk-background.jpg') repeat-x top #0E6EA2;
        color: #231F20;
	margin: 0 0 45px 0;
	padding: 0;
}

#skip {
	left: -9999px;
	position: absolute;
}


/* ---------- Header ---------- */


#header {
        width: 918px;
	height: 40px;
        margin: 0 auto;
        padding: 0;
        background: url('../images/hauk-header-top.jpg') no-repeat;
	overflow: hidden;
}


/* ---------- Logo ---------- */


#logo {
        width: 918px;
	height: 86px;
        margin: 0 auto;
        padding: 0;
        background: url('../images/hauk-logo-top.jpg') top left no-repeat;
}

#logo .content {
	width: 298px;
	height: 86px;
	margin: 0 0 0 304px;
	padding: 0;
#       background: url('../images/hauk-logo-background.jpg') top left no-repeat;
}


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

#main {
        width: 918px;
        height: 327px;
        margin: 0 auto;
        padding: 0;
}

#main .left-border {
        width: 102px;
	height: 327px;
        margin: 0; 
        padding: 0;
        background: url('../images/hauk-left-border.jpg') no-repeat;
	float: left;
}

#main .left-border-alt {
        width: 102px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-left-border-alt.jpg') no-repeat;
        float: left;
}

#main .main-highlight {
        width: 52px;
	height: 327px;
	margin: 0;
	padding: 0;
        background: url('../images/hauk-main-highlight.jpg') no-repeat;
	float: left;
}

#main .main-gallery {
        width: 52px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-gallery-highlight.jpg') no-repeat;
        float: left;
}

#main .main-about {
        width: 52px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-about-highlight.jpg') no-repeat;
        float: left;
}

#main .main-experience {
        width: 52px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-experience-highlight.jpg') no-repeat;
        float: left;
}

#main .main-testimonials {
        width: 52px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-testimonials-highlight.jpg') no-repeat;
        float: left;
}

#main .main-store {
        width: 52px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-store-highlight.jpg') no-repeat;
        float: left;
}

#main .main-contact {
        width: 52px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-contact-highlight.jpg') no-repeat;
        float: left;
}

#main .menu {
        width: 176px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-menu-background.jpg') no-repeat;
        float: left;
}

ul#options {
        width: 146px;
        height: 172px;
        margin: 0; 
        padding: 39px 0 0 0;
        list-style-type: none;
}

ul#options li {    
        margin: 0;     
        padding: 0; 
        float: left;
}

ul#options span {
        left: -10000px;
        position: absolute;
}

ul#options li#home a {
	display: block;
	position: relative;
	width: 146px;
	height: 21px;
	top: 0px;
	background-image: url('../images/menu-home.jpg');
}

ul#options li#home a:hover {
        background-position: 0px -21px;
}

ul#options li#home a#there {
        background-position: 0px -42px;
        width: 81px;
        height: 21px;
}

ul#options li#gallery a {
        display: block;
        position: relative;
        width: 146px;
        height: 26px;
        top: 0px;
        background-image: url('../images/menu-gallery.jpg');
}

ul#options li#gallery a:hover {
        background-position: 0px -26px;
}

ul#options li#gallery a#there {
        background-position: 0px -52px;
        width: 146px;
        height: 26px;
}

ul#options li#about a {
        display: block;
        position: relative;
        width: 146px;
        height: 26px;
        top: 0px;
        background-image: url('../images/menu-about.jpg');
}

ul#options li#about a:hover {
        background-position: 0px -26px;
}

ul#options li#about a#there {
        background-position: 0px -52px;
        width: 146px;
        height: 26px;
}

ul#options li#experience a {
        display: block;
        position: relative;
        width: 146px;
        height: 26px;
        top: 0px;
        background-image: url('../images/menu-experience.jpg');
}

ul#options li#experience a:hover {
        background-position: 0px -26px;
}

ul#options li#experience a#there {
        background-position: 0px -52px;
        width: 146px;
        height: 26px;
}
	
ul#options li#testimonials a {
        display: block;
        position: relative;
        width: 146px;
        height: 26px;
        top: 0px;
        background-image: url('../images/menu-testimonials.jpg');
}

ul#options li#testimonials a:hover {
        background-position: 0px -26px;
}

ul#options li#testimonials a#there {
        background-position: 0px -52px;
        width: 146px;
        height: 26px;
}

ul#options li#store a {
        display: block;
        position: relative;
        width: 146px;
        height: 26px;
        top: 0px;
        background-image: url('../images/menu-store.jpg');
}

ul#options li#store a:hover {
        background-position: 0px -26px;
}

ul#options li#store a#there {
        background-position: 0px -52px;
        width: 146px;
        height: 26px;
}

ul#options li#contact a {
        display: block;
        position: relative;
        width: 146px;
        height: 21px;
        top: 0px;
        background-image: url('../images/menu-contact.jpg');
}

ul#options li#contact a:hover {
        background-position: 0px -21px;
}

ul#options li#contact a#there {
        background-position: 0px -42px;
        width: 146px;
        height: 21px;
}

ul#options li#contact-alt a {
        display: block;
        position: relative;
        width: 146px;
        height: 21px;
        top: 0px;
        background-image: url('../images/menu-contact-alt.jpg');
}

ul#options li#contact-alt a:hover {
        background-position: 0px -21px;
}

ul#options li#contact-alt a#there {
        background-position: 0px -42px;
        width: 146px;
        height: 21px;
}

#main .flash {
        width: 488px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-flash-main.jpg') no-repeat;
        float: left;
}

#main .gallery-content {
        width: 488px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-flash-main-a-alt.jpg') no-repeat;
        float: left;
}

#main .about-content {
        width: 488px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-flash-main-c-alt.jpg') no-repeat;
        float: left;
}

#main .experience-content {
        width: 488px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-flash-main.jpg') no-repeat;
        float: left;
}

#main .testimonials-content {
        width: 488px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-flash-main-f-alt.jpg') no-repeat;
        float: left;
}

#main .store-content {
        width: 488px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-flash-main-g-alt.jpg') no-repeat;
        float: left;
}

#main .contact-content {
        width: 488px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-flash-main-d.jpg') no-repeat;
        float: left;
}

#main .right-border {
        width: 100px;
        height: 327px;
        margin: 0;
        padding: 0;
        background: url('../images/hauk-right-border.jpg') no-repeat;
        float: right;
}


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


#content {
        width: 918px;
        margin: 0 auto;
        padding: 0;
        background: url('../images/hauk-content.jpg') top repeat-y;
	clear: both;
	overflow: hidden;
	position: relative;
}

#content-main {
        width: 918px;
        margin: 0 auto;
        padding: 0;
	overflow: hidden;
}

#content-main .left {
        width: 440px;
        margin: 0 auto;
        padding: 28px 0 25px 135px;
	float: left;	
}

#content-main .left a:active, #content-main .left a:visited, #content-main .left a:link {
        color: #B16010;
        text-decoration: none;
}

#content-main .left a:hover {
        color: #B16010;
        text-decoration: underline;
}

#content-main .left h1.main {
        width: 268px;
        height: 21px;
        margin: 3px 0 5px 0; 
        padding: 0;
        background: url('../images/header-main.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.freeform {
        width: 219px;
        height: 22px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-freeform.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.lagoon {
        width: 202px;
        height: 22px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-lagoon.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.geometric {
        width: 232px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-geometric.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.modern {
        width: 206px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-modern.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.water {
        width: 275px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-water.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.outdoor {
        width: 333px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-outdoor.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.roof {
        width: 223px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-roof.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.fencing {
        width: 77px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-fencing.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.landscaping {
        width: 233px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-landscaping.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.about {
        width: 262px;
        height: 17px;
        margin: 3px 0 7px 0;
        padding: 0;
        background: url('../images/header-about.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.experience {
        width: 346px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-experience.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.testimonials {
        width: 224px;
        height: 17px;
        margin: 3px 0 7px 0;
        padding: 0;
        background: url('../images/header-main-testimonials.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.store {
        width: 103px;
        height: 17px;
        margin: 3px 0 7px 0;
        padding: 0;
        background: url('../images/header-main-store.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.contact {
        width: 309px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-main-contact.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.contact-sales {
        width: 350px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-main-contact-sales.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.contact-service {
        width: 372px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-main-contact-service.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h1.contact-construction {
        width: 428px;
        height: 21px;
        margin: 3px 0 5px 0;
        padding: 0;
        background: url('../images/header-main-contact-construction.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
}

#content-main .left h2 {
        margin: 0;
        padding: 0 0 6px 0;
	color: #BF751C;
}

#content-main .left h2.alt {
        margin: 0;
        padding: 1px 0 6px 0;
        color: #BF751C;
}

#content-main .left p {
        margin: 0;
        padding: 0 0 7px 0;
}

#content-main .left p.form {
	font-size: 11px;
        margin: 0;
        padding: 0 0 7px 0;
}

#content-main .left p.testimonial {
        margin: 0;
        padding: 0;
}

#content-main .left p.testimonial-alt {
        margin: 0;
        padding: 10px 0 0 0;
}

#content-main .left p.family {
        margin: 0;
        padding: 0 0 11px 0;
	color: #BF751C;
	font-weight: bold;
	font-size: 11px;
        border-bottom: 1px solid #DCC091;
}

#content-main .left p.family-alt {
        margin: 0;
        padding: 0 0 11px 0;
        color: #BF751C;
        font-weight: bold;
        font-size: 11px;
        border-bottom: 0px solid #DCC091;
}

#content-main .right {
        width: 160px;
        margin: 0 auto;
        padding: 0 0 30px 57px;
        float: left;
}

#content-main .right a:active, #content-main .right a:visited, #content-main .right a:link {
	color: #B45C0C;
	text-decoration: none;
	font-weight: bold;
}
    
#content-main .right a:hover {      
	color: #B45C0C;
	text-decoration: underline;
	font-weight: bold;
}

#content-main .right h3.gallery {
        width: 119px;
        height: 18px;
        margin: 0;
        padding: 0;
        background: url('../images/header-poolgallery.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
	overflow: hidden;
}

#content-main .right h3.experience {
        width: 149px;
        height: 13px;
        margin: 14px 0 0 0;
        padding: 0;
        background: url('../images/header-haukexperience.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
	overflow: hidden;
}

#content-main .right h3.testimonials {
        width: 149px;
        height: 11px;
        margin: 14px 0 2px 0;
        padding: 0;
        background: url('../images/header-testimonials.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
        overflow: hidden;
}

#content-main .right h3.contact {
        width: 129px;
        height: 11px;
        margin: 14px 0 4px 0;
        padding: 0;
        background: url('../images/header-contact.jpg') no-repeat;
        text-align: left;
        text-indent: -9999px;
        overflow: hidden;
}

#content-main .right p {
        font-size: 11px;
        line-height: 20px;
        margin: 0;
        padding: 0 0 11px 0;
	border-bottom: 1px solid #DCC091;
        color: #231F20;
}

#content-main .right p.contact {
        font-size: 11px;
        line-height: 20px;
        margin: 0;
        padding: 8px 0 8px 0;
        border-bottom: 1px solid #DCC091;
        color: #231F20;
}

#content-main .right p.contact-alt {
        font-size: 11px;
        line-height: 20px;
        margin: 0;
        padding: 8px 0 8px 0;
        border-bottom: 0px solid #DCC091;
        color: #231F20;
}

#content-main .right p.end {
        font-size: 11px;
        line-height: 20px;
        margin: 0;
        padding: 4px 0 0 0;
        border-bottom: 0px solid #DCDCDC;
        color: #231F20;
}

.highlight-contact {
	color: #BF751C;
	font-weight: bold;
}

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


#footer-shadow {
        width: 918px;
	height: 41px;
        margin: 0 auto;
        padding: 0;
        background: url('../images/hauk-footer-bottom.jpg') no-repeat;
        clear: both;
	overflow: hidden;
}

#footer {
	width: 846px;
	margin: 0 auto;
	padding: 0;
	color: #B9D3E3;
	text-align: left;
	clear: both;	
}

#footer p {
        margin: 0;
        padding: 0;
	font-size: 11px;
}

#footer a:active, #footer a:visited, #footer a:link {
	color: #D7E5EE;
	text-decoration: none;
}
    
#footer a:hover {      
	color: #B7E4FE;
	text-decoration: underline;
}

#footer .divider {
	padding: 0 6px 0 6px;
	color: #B7E4FE;
}

ul#footermenu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 11px;
	text-align: left;
}

ul#footermenu li {
	display: inline; 
	margin: 0;
	padding: 0;
}


/* ---------- Gallery---------- */


ul.portfolio-row {
	width: 435px;
	margin: 0;
	padding: 0 0 3px 0;
	list-style-type: none;
	float: left;
	line-height: 1px;
}

ul.portfolio-row li.option1 {
	margin: 0;
	padding: 0 7px 5px 0;
	float: left;
}

ul.portfolio-row li.option2 {
        margin: 0;
        padding: 0 7px 5px 0;
        float: left;
}

ul.portfolio-row li.option3 {
        margin: 0;
        padding: 0 7px 5px 0;
        float: left;
}

ul.portfolio-row li.option4 {
        margin: 0;
        padding: 0 0 5px 0;
        float: left;
}

.imgborder {
	padding: 4px;
	background: #E4C387;
}

/* ---------- Gallery Menu ---------- */


ul#sidemenu {
        list-style-type: none;
        width: 160px;
        margin: 0 0 35px 0;
        padding: 0;
        color: #666;
        font-size: 11px;
        line-height: 1.3em;
}

ul#sidemenu li {
        margin: 0;
#       padding: 10px 0 10px 0;
        padding: 10px 0 10px 14px;
        background: url(/images/square.jpg) no-repeat 0 14px;
        border-bottom: 1px solid #DCC091;
}

ul#sidemenu .there a:active, ul#sidemenu .there a:visited, ul#sidemenu .there a:link, ul#sidemenu .there a:hover {
        color: #7F2100;
        text-decoration: none;
}


/* ---------- Experience Table ---------- */


table.tablewide { 
	width: 440px;
	margin: 0;
	border-right: 1px solid #955032;
        border-left: 1px solid #955032;
	color: #777;
}

table.tablewide thead.section th {
	padding: 8px 13px;
	background: url('../images/section-background.jpg') top repeat-x #833C22;
	border-top: 1px solid #955032;  
	border-left: 1px solid #955032; 
	border-bottom: 1px solid #955032; 
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	color: #FFF;
}

table.tablewide td.experience {
	width: 9%;
	padding: 9px 14px 9px 14px;
	font-size: 11px;
        line-height: 17px;
	font-weight: bold;
	background: #A86749;
	color: #FFF;
	border-bottom: 1px solid #955032;
}

table.tablewide td.border {
        width: 1%;
        padding: 3px;
        font-size: 11px;
        line-height: 17px;
        font-weight: bold;
        background: #CB9046;
        color: #FFF;
        border-bottom: 1px solid #955032;
}

table.tablewide td.experiencealt {
        width: 90%;
        padding: 9px 14px 9px 14px;
        font-size: 11px;
        line-height: 18px;
	text-align: left;
	font-weight: normal;
	color: #221E1F;
        border-bottom: 1px solid #833C22;
	background: #FCFBEC;
}

table.tablewide td.experiencealt-sub {
        width: 90%;
        padding: 9px 14px 9px 14px;
        font-size: 11px;
        line-height: 18px;
        text-align: left;
        font-weight: normal;
        color: #221E1F;
        border-bottom: 1px solid #833C22;
        background: #F2EEDA;
}

.highlight {
	color: #B16010;
	font-weight: bold;
}


/* ---------- Form ---------- */


.forminput {
        width: 195px;
        margin: 0 0 3px 0;
        padding: 4px;
        font-size: 11px;
        font-family: Arial, Verdana;
        border: 2px solid #D6BFA0;
        background: #FFF !important;
}

.forminput-comments {
        width: 425px;
	height: 45px;
        margin: 0 0 3px 0;
        padding: 4px;
        font-size: 11px;
        font-family: Arial, Verdana;
        border: 2px solid #D6BFA0;
        background: #FFF !important;
}

.formbutton {
        width: 100px;
        border: 1px outset;
        cursor: pointer;
        font-weight: normal;
        margin: 13px 0 0 0;
        padding: 3px;
        background: #954F00;
        color: #FFF;
        font-size: 11px;
        font-family: Arial, Verdana;
}

.required {
        font-weight: bold;
        font-size: 14px;
        color: #B45C0C;
}


/* ---------- Contact Menu ---------- */


ul#contact-menu {
        list-style-type: none;
        width: 400px;
        margin: 0 0 10px 0;
        padding: 0;
        color: #666;
        font-size: 12px;
        line-height: 12px;
}

ul#contact-menu li {
        margin: 0;
#       padding: 10px 0 10px 0;
        padding: 10px 0 3px 14px;
        background: url(/images/square.jpg) no-repeat 0 14px;
        border-bottom: 0px solid #DCC091;
}

ul#contact-menu .there a:active, ul#contact-menu .there a:visited, ul#contact-menu .there a:link, ul#contact-menu .there a:hover {
        color: #7F2100;
        text-decoration: none;
}

ul#contact-phone {
        list-style-type: none;
        width: 400px;
        margin: 0 0 10px 0;
        padding: 0;
        color: #231F20;
        font-size: 12px;
        line-height: 12px;
}

ul#contact-phone li {
        margin: 0;
#       padding: 10px 0 10px 0;
        padding: 10px 0 3px 14px;
        background: url(/images/square.jpg) no-repeat 0 14px;
        border-bottom: 0px solid #DCC091;
}