/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.poolcreationsinc.com/
   TEMPLATE NAME:  Pool Creations Inc.
   DATE:           Aug-13th-2009
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }
html, body { margin: 0; padding: 0px; height: 100%; background: #c4dadf url('images/bg.gif') repeat-x;} 

.subbg { margin: 0; padding: 0px; height: 100%; background: #c4dadf url('images/subbg.gif') repeat-x;}

a:active, a:focus{outline: 0;}

.line { border: none; border-bottom: 1px solid #4e5b28; height: 0px; margin: 0 auto }
.clear { clear: both; }


/* ----------Centered Container Or the Layout--------------------- */
#container, #subcontainer { 
min-height: 50%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; /* make sure this matches in the body footer DIV */
width: 960px;
} 

#subcontainer { min-height: 75%; }

/* -------------LABELS BUTTONS & FORMS-----------*/

label { font: bold 10pt "Lucida Sans unicode", Helvetica, Arial, Sans-Serif; color: #bd6b5e; line-height: 22px;} 

input[type="text"], textarea {
font: 10pt "Lucida Sans", Helvetica, Arial, Sans-Serif; 
border: none;
background-color: #f7f3e7;
padding: 5px;
}

.form{
font: 10pt "Lucida Sans", Helvetica, Arial, Sans-Serif; 
background-color: #f7f3e7;
background: #f7f3e7 url('/images/formbgleft.gif') no-repeat top left;
padding: 10px;
}

.ContactTable{
padding: 0px;
width: 350px;
margin-left: 25px;
}

.ContactTable td{
padding: 0px;
border: 5px;
}




/* --------------HEADER------------- */
#header { background: url(/images/hometopbg.jpg) no-repeat top center; height: 437px;}
#header em, #subheader em {display: none}
#header .holder, #subheader .holder { width: 960px; margin: 0 auto;}
#header .holder .left, #subheader .holder .left { width: 300px; float: left; }
#header .holder .left .mission h1, #subheader .holder .left .mission h1 { background: url(/images/missionhead.gif) no-repeat; width: 247px; height: 28px; margin-bottom: 10px;}
#header .holder .left .mission { margin: 70px 0px 0px 14px; font: 14px Arial, Tahoma, Sans-Serif; color: white; font-style: italic; line-height: 20px;}
#header .holder .right, #subheader .holder .right { width: 557px; float: right; text-align: right}
#header .holder .right .tag, #subheader .holder .right .tag { background: url(/images/headertag.gif) no-repeat; width: 134px; height: 52px; float: right; text-align: center; padding-top: 26px;}
#header .holder .right .tag p, #subheader .holder .right .tag p { font: bold 18px Arial, Tahoma, Sans-Serif; color: #291d3a;}

/* --------------SUBHEADER------------- */
#subheader { background: url(/images/subtopbg.jpg) no-repeat top center; height: 192px;}

/* --------------HEADER NAVIGATION------------- */
#header .right ul, #subheader .right ul {margin-top: 20px; padding: 0px; }
#header .right ul li, #subheader .right ul li { display: inline; list-style-type: none; border-right: 1px solid #a8d8d8;}
#header .right ul li.last, #subheader .right ul li.last { border-right: 0px;}
#header .right ul li a, #subheader .right ul li a { color: white; font: bold 12px Arial, Tahoma, Sans-Serif; text-transform: uppercase; text-decoration: none; padding: 8px;}
#header .right ul li a:hover, #subheader .right ul li a:hover { color: #c5ffff;}

/* --------------LOGO IN HEADER *always use this*------------- */
.logolink, #swap { width: 394px; height: 119px;}
.logolink { background-image: url('/images/logo.png'); background-repeat: no-repeat;}
.logolink a { float: left;  }
#swap { background-image: url(/images/logo.png); }
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */


/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/
#main, #sub { min-height: 100%; height: auto !important; height: 100%; }
#main a, #sub a { color: #bd6b5e; border-bottom: 1px dashed #bd6b5e; text-decoration: none;}

#main .content {
padding: 0px;
margin: 0px;
margin-left: 200px;
margin-right: 0px;
min-height: 170px; /* Height of Background Img */
height: auto;
}

/* --------------SUBCONTENT----------------*/
#sub { padding: 20px;}
#sub h1 { font: bold 36px 'Lucida Sans unicode', Arial, Helvetica, Sans-Serif; color: #bd6b5e; margin-bottom: 16px;}
#sub p { font: 14px 'Lucida Sans unicode', Arial, Helvetica, Sans-Serif; color: #8c7c74; line-height: 24px; margin-bottom: 20px;}
#sub .rightpic { float: right; margin: 0px 0px 0px 10px;}
html { font: 14px 'Lucida Sans unicode', Arial, Helvetica, Sans-Serif; color: #8c7c74; line-height: 24px;}


/* --------------HOME BLOCKS----------------*/
#main .homecontent {
padding: 0px;
margin: 0px;
margin-left: 0px;
margin-right: 0px;
min-height: 170px; /* Height of Background Img */
height: auto;
}

#threeblocks {
padding: 11px 10px 0px 14px;
font: 12px "Lucida Sans unicode", Helvetica, Arial, Sans-Serif;
color: #624d41;
height: 100%;
height: auto;
min-height: 100%;
width: 960px;
line-height: 18px;
margin-top: 30px;
}

#threeblocks a:hover, #main .content ul a:hover, #main .content a:hover { text-decoration: none}
#threeblocks p { padding: 0px 10px 18px 18px; line-height: 20px;}

#threeblocks a { margin-left: 18px; color: #ee4591;}
#threeblocks em { display: none}
#threeblocks img { background: url(/images/imgborder.gif) no-repeat; padding: 20px 30px 20px 13px;}

#threeblocks .blockone, .blocktwo, .blockthree { float: left; margin: 0px; padding: 0px; clear:right; min-height: 300px}
#threeblocks .blockone h1, .blocktwo h1, .blockthree h1 {margin-bottom: 6px;}

#threeblocks .blockone, .blocktwo { border-right: 1px solid #c0dce4}
#threeblocks .blockone { width: 255px;}
#threeblocks .blockone h1 { height: 37px; width: 229px; background: url(/images/head_carry.png) no-repeat;}
#threeblocks .blockone img { margin-left: -10px;}


#threeblocks .blocktwo {width: 255px;}
#threeblocks .blocktwo h1 { height: 37px; width: 151px; background: url(/images/head_about.png) no-repeat; margin-left: 16px;}

#threeblocks .blockthree { width: 412px;}
#threeblocks .blockthree h1 { height: 37px; width: 308px; background: url(/images/head_quote.png) no-repeat; margin-left: 16px;}

#threeblocks .readmore { float: right; margin-top: -24px; margin-right: -15px;}
#threeblocks .submit { float: right; margin-right: 0px;}


/* --------------FOOTER------------- */

#footer, .push { 
clear: both;
width: 100%;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footer { height: auto; background-color: white;}
#footer .content { height: 130px; width: 960px; margin: 0 auto; position: relative;}
#footer a { color: #5f493e; font: 12px Arial, Tahoma, Sans-Serif;}

/* --------------FOOTER LEFT------------- */
#footer .left { float: left; width: 200px; padding-top: 32px;}
#footer .left p { color: #5f493e; font: 12px Arial, Tahoma, Sans-Serif; line-height: 23px;}
#footer .left b { color: #c78476;}

/* --------------FOOTER RIGHT------------- */
#footer .right { float: left; width: 760px; padding-top: 25px;}
#footer .right p { color: #5f493e; font: 12px Arial, Tahoma, Sans-Serif; line-height: 14px; text-align: right;}
#footer .right ul { margin-top: 16px; padding: 0px; float: right}
#footer .right ul li { display: inline; list-style-type: none; border-right: 1px solid #5f493e }
#footer .right ul li a { padding: 10px;}
#footer .right ul li a.last { padding-right: 0px; border-right: 0px}
#footer .right ul li.last { border-right: 0px}

/* --------------FOOTER LINKS------------- */
#footer ul { padding: 10px;}
#footer .links ul { margin: 0px; padding: 0px;}
#footer .links li { display: inline; list-style-type: none;}
#footer .links li a { color: #000; text-decoration: none; border-right: 1px solid; padding: 0px 10px 0px 10px; font: 10pt Arial, 'Trebuchet MS', Sans-Serif;}
#footer .links li a:hover { text-decoration: underline; }


/* --------------FOOTER SEO LINKS------------- */
#footer .seo {
height: auto;
text-align: left;
min-height: 100px;
width: 750px;
font: 8pt 'century gothic', Sans-Serif;
}
 

#footer .seo a {
color: #6e4a2f;
text-decoration: none;
font: 8pt 'century gothic', Sans-Serif;
}



/* --------------GALLERY------------- */

#gallery{
width: 950px;
float: left;
}

#gallery .displayimage{
width: 210px;
height: 175px;
color: #dbc495;
text-align:center;
margin: 10px;
float: left;
}

#gallery .displayimage img{
width: 200px;
border: 5px #dbd4be solid;
margin: 0px;
}

#gallery .displayimage p{
font: bold 8pt 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
text-align:center;
margin-top: 5px;
}

#gallery .displayimage a{
text-decoration: none;
border-bottom: 0px;
}



/* ----- IMAGEROTATOR ---------- */

#imagerotator{
border: 4px #fff solid;
width: 370px;
height: 240px;
margin: 30px 20px 0px 0px;
float: right;
}

/* --------------ADMIN----------------*/
.admin {

color: #624d41;
background-color: #fff;
font-family:"Lucida Sans unicode", sans-serif;
}

.admin a { color: #5f493e; font: 10pt Arial, Tahoma, Sans-Serif;}

.admin b { color: #5f493e; font: bold 10pt Arial, Tahoma, Sans-Serif;}


/* ----- Customer Cart TABLES ---------- */
#awscustomertables table{margin: 1em; border-collapse: collapse;}
#awscustomertables td{ padding: .3em; border: 1px #F2F2F2 solid; }
#awscustomertables th{ padding: .3em; border: 1px #F2F2F2 solid; background: #F2F2F2; }