/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.petraroofingco.com/
   TEMPLATE NAME:  Petra Roofing Company
   DATE:           May-15th-2009
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }
html { margin: 0; padding: 0px; height: 100%; background: #232323 url(images/bg.gif) repeat-x;}
body { margin: 0; padding: 0px; height: 100%; background: url(images/bodybg.jpg) no-repeat top center;}

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


/* ----------CART--------------------- */
font, table, tr, td { border: none; background-color: transparent;}
table, td, tr { border: none; font: 12px Arial,  Helvetica, Sans-Serif; color: #696969; }
td { line-height: 20px; }
table strong { color: #696969; }
table a, tr a, td a, font a, .content table a {color: #e1e1e1; font: 12px Arial,  Helvetica, Sans-Serif; }
table a:hover, tr a:hover, td a:hover, font a:hover, .content table a:hover {color: #ee4591;}
table hr {border: none; border-bottom: 1px solid #e1e1e1; height: 0px;}
font img { border: 6px solid #c00000; margin-right: 10px; } 

div div {
	 font: 12px Arial,  Helvetica, Sans-Serif;
}

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

/* --------------LABELS BUTTONS & FORMS-----------*/
label { font: lighter 18px Georgia, "Times New Roman", Sans-Serif; color: #c00000;}
 
#name, #name0, textarea {
width: 20em;
border: 1px solid #5c5c5c;
color: #232323;
padding: 6px;
margin-bottom: 20px;
font: lighter 18px Georgia, "Times New Roman", Sans-Serif; 
}
 
.button {
width: 6em;
font: lighter 18px Georgia, "Times New Roman", Sans-Serif; 
color: #fff;      
background: #c00000;
padding: 10px;
border: 1px solid #c00000;
cursor: pointer
}

/* --------------HEADER------------- */
#header { height: 129px;}
#header .text { float: right; color: white; width: 400px; text-align: right; padding-top: 20px;}

#header h4 {
font-family: Cambria, serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1.2em;
}

#header .text p {
padding-top: 21px;
font-family: Cambria, serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
letter-spacing: normal;
}

/* --------------LOGO IN HEADER *always use this*------------- */
.logolink, #swap { width: 281px; height: 129px; background: url('/images/logo.gif') no-repeat; float: left}
.logolink a { float: left;  }
.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 */


/* --------------TOPNAV------------- */
#topnav { background: url(/images/navbg.gif) repeat-x; height: 44px; margin-bottom: 16px;}
#topnav .left { float: left; clear: right;}
#topnav .right { float: right; background: url(/images/nav_right.gif) no-repeat; width: 10px; height: 44px;}
#topnav img { border: 0px;}

#topnav a { float: left; }

#swap01 {background-image: url(/images/nav_on_about.jpg);  width: 125px;  height: 44px; }
#swap02 {background-image: url(/images/nav_on_commercial.jpg);  width: 125px;  height: 44px; }
#swap03 {background-image: url(/images/nav_on_residential.jpg);  width: 125px;  height: 44px; }
#swap04 {background-image: url(/images/nav_on_staff.jpg);  width: 125px;  height: 44px; }
#swap05 {background-image: url(/images/nav_on_test.jpg);  width: 125px;  height: 44px; }
#swap06 {background-image: url(/images/nav_on_contact.jpg);  width: 125px;  height: 44px; }

.rollover { display: inline; } /* Allow setting widths and heights */
.rollover img { 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 */



/* --------------MISSION------------- */
#mission { height: 349px; background: url(/images/missionbg.png) no-repeat; margin-bottom: 0px; padding: 13px;}
#mission .left { width: 484px; float: left;}
#mission p {color: #eaf5fd; font: 12px Arial,  Helvetica, Sans-Serif; padding: 0px 12px 8px 8px; line-height: 20px;}
#mission .right { margin-left: 513px; padding: 14px 0px 0px 0px;}
#mission .right .video {padding: 10px; background: url(/images/videobg.gif) repeat-x; border: 1px solid #555555; }


/* --------------HOME DIV------------- */
#home { height: 259px; background: url(/images/homediv_bg.gif) repeat-x; margin-top: -5px;}
#home .left { float: left; background: url(/images/homediv_left.gif) no-repeat; height: 259px; width: 10px; clear: right;}
#home .right { float: right; background: url(/images/homediv_right.gif) no-repeat; height: 259px; width: 10px;}
#home .listleft { float: left; width: 266px;  background: url(/images/homediv_leftbg.gif) repeat-y top right; padding: 10px 0px 0px px; margin: 15px; min-height: 210px}
#home .listleft ul { margin: 0px; padding: 0px;}

#home .listleft ul li { 
list-style-type: none; 
background: url(/images/icon_arrow.gif) no-repeat center left; 
color: #c00000; 
font: 12px Arial,  Helvetica, Sans-Serif;  
line-height: 25px;
padding-left: 16px;
}

#home .content { margin-left: 330px; margin: 0px 0px 15px 15px; clear: right;  background: url(/images/homediv_right.gif) no-repeat top right; height: 259px}
#home .content .text { padding: 20px 20px 20px 240px; margin-left: 70px}
#home .content h1 { color: #c00000;  font: bold 24px Arial,  Helvetica, Sans-Serif; letter-spacing: -1px; margin-bottom: 14px;}
#home .content p, #main p { font: 12px Arial,  Helvetica, Sans-Serif; color: #383838; padding-bottom: 18px; line-height: 24px;}

/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/
#main {
min-height: 100%; 
height: auto !important; 
height: 100%; 
background: #FFF url(/images/mainbg.gif) repeat-x bottom left; /* Main DIV Background Img */
padding: 16px;
}

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

#main .img { float: right; border: 1px solid #cecece; margin: 10px; padding: 5px;}
#main h1 { color: #c00000;  font: lighter 26px Georgia, "Times New Roman", Sans-Serif; margin-bottom: 20px;}
#main p { padding-right: 20px}
#main a { color: #c00000;}
#main .navleft { float:left; width: 270px; margin: 0px; padding: 0px; background-color: #65e03f; height: 500px; background: url(/images/homediv_leftbg.gif) repeat-y top right;}
/* --------------LEFTSIDE----------------*/
#left { margin: 0px; padding: 0px;}
#left .sponsorhead { background: url(/images/lefthead_sponsors.gif) no-repeat; width: 246px; height: 50px; margin-bottom: 15px;}
#left .testhead { background: url(/images/lefthead_testimonials.gif) no-repeat; width: 246px; height: 50px; margin-bottom: 15px;}

#testimonials { width: 244px; margin-bottom: 50px;}
#testimonials .top { height: 17px; width: 244px; background: url(/images/test_top.gif) no-repeat;}
#testimonials .text b { font: bold 11px Arial, Helvetica, Sans-Serif;  }
#testimonials .text p { font-style: italic; font-size: 10px; line-height: 18px;}
#testimonials .bottom { height: 61px; width: 244px; background: url(/images/test_bottom.gif) no-repeat; }

#testimonials .text { 
background: #e0e0e0 url(/images/testbg.gif) repeat-x;
height: 128px;
padding: 0px 10px 6px 10px;
height: auto; 
height: 100%;
min-height: 100%;
}

#testimonials img { position: absolute; margin-left: 20px; margin-top: 60px; border: 0px;}

/* --------------Staff----------------*/
.staff{ border: 2px #696969 solid;}


/* --------------MAIN THREE BLOCKS----------------*/
#fourblocks {
padding: 11px 0px 0px 0px;
font: 10px Arial,  Helvetica, Sans-Serif;
color: #e9f3f9;
height: 100%;
height: auto;
min-height: 100%;
width: 960px;
line-height: 18px
}

#fourblocks a:hover, #main .content ul a:hover, #main .content a:hover { text-decoration: none}
#fourblocks p { padding: 0px 10px 25px 0px; line-height: 20px;}
#fourblocks h1 { font-size: 12pt; font-weight: none; color: #c20202; margin-bottom: 10px}
#fourblocks .block { float: left; width: 153px; margin-right: 24px; padding: 0px; clear:right}
#fourblocks .last { float: left; width: 250px; padding: 0px; clear:right; text-align: right}

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

#footer { height: 100px; height: auto; margin-top: 16px;}
#footer .content { width: 960px; margin: 0 auto; position: relative; }

/* --------------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;
}















/* ----- 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; }