/* Handyman Plus - Stylesheet - Developed by Jared Telling - October, 2004 */

body{background-image:url(images/graybrck.jpg); background-repeat: repeat; font-family: Arial, Helvetica, sans-serif;}

/* Content Area */
#wrap{width: 800px; height: 500px; margin-left: auto; margin-right: auto; margin-top: 13px; padding: 0; text-align:center;}

/* Border Styles */
#header{width: 800px; height: 40px; padding: 0; float: none; margin: 0; padding: 0; background-image:url(images/header.gif); background-repeat:no-repeat;}

/* #colLeft{width: 40px; height: 100px; float: left; margin: 0; padding: 0;}
#colRight{width: 40px; height: auto; float: left; margin: 0; padding: 0;}  */

#footer{width: 800px; height: 70px; float: left; margin: 0 0 0 0; padding: 0; background-image:url(images/footer.gif); background-repeat:no-repeat;}
#footer ul{ float: left; margin: 40px 0 0 20px; padding: 0; list-style: none;}
#footer li{ float: left; display: inline; margin: 0 5px 0 0; padding: 0 5px 0 0; border-right: 1px solid #ccc; font-size: 60%; text-transform: uppercase;}
#footer li a{ color: #444; text-decoration: none;}
#footer li a:hover{ color: #C00;}

#footer p a{padding: 10px 0 0 20px; float: left; font-size: 80%; border: 0; color: #666666;}
#footer p a:hover{color: #CC0806;}


/* Content Areas */
#contentContainer{width: 720px; float:left; padding: 0 40px; margin: 0; text-align: left; background-color: #FFFFFF; background-image:url(images/contentBg.gif); background-repeat: repeat;}

#logo{width: 300px; height: 90px; float:left; margin: 10px 0 0 0; padding: 0;}
#freephone{width: 400px; height: auto; float: right; margin: 0 0 10px 0; padding: 0;}
#contentLeft{width: 200px; float: left; margin: 0; padding: 0;}
#contentRight{width: 500px; float: right; margin: 0; padding: 0;}
#contentMain{width: 450px; float: left; margin: 10px 0 0 15px; padding: 0;}

/* left-hand Nav */
#leftMenu ul{padding: 0; margin: 0 0 30px 0; width:190px; color: #990000; float: left; list-style: none;}
#leftMenu li{display: block; padding: 0; margin: 0; font: 90% "Arial Black", arial; }
#leftMenu li a{color: #F60; text-decoration: none; border-bottom: 1px dotted #999;  display: block; width: 190px; padding: 5px 0;}
#leftMenu li a:hover{color: #FCA610; text-decoration: none;}



/* *************************************************************
HOMEPAGE HEADER
************************************************************* */
#hp_header{ float: left; height: 380px; width: 480px; background: #FC7419 url(images/header_hp.gif) 0 40px no-repeat; padding: 13px 0 40px 10px;}
#hp_header h1{ color: #fff; font: 170% Arial, Helvetica, sans-serif; letter-spacing: -0.03em; margin: 0; padding: 0; float: left; font-weight: bold; width: 100%;}
#hp_header h2{ color: #fff; font: 130% Arial, Helvetica, sans-serif; margin: 5px 0 0 0; padding: 0; float: left; width: 450px; letter-spacing: 0;}

#hp_header h3{ color: #FF6; font: 130% Arial, Helvetica, sans-serif; margin: 10px 0 0 0; padding: 0; float: right; width: 210px; font-weight: bold;}

#hp_header ul{ float: right; width: 210px; list-style: none; clear: both; margin: 10px 0 0 0; padding: 0;}
#hp_header li{ background: url(images/icon_star.gif) 0 3px no-repeat; margin: 0 0 5px 0; padding: 0 0 0 20px; font: 100% Arial, Helvetica, sans-serif; color: #FF0;}

h1.hp_jobs{ color: #F90; margin: 30px 0 0 10px;}


/* Homepage Left and Right Columns */
#hpColLeft{float:left; width: 220px; padding: 0; margin: 10px 0 0 10px; text-align:left; background-image:url(images/verticalDotHP.gif); background-repeat:repeat-y; }

#hpColRight{float:right; width: 220px; padding: 0; margin: 10px 0 0 0;}

#hpColLeft2{background-color: #FFE9E3; float:left; width: 215px; padding: 0; margin: 10px 40px 10px 10px; text-align:left; clear: both;}
#hpColRight2{background-color: #FEE7BA; float:left; width: 215px; padding: 0; margin: 10px 0 10px 0; text-align:left;}

#hpColLeft2 h3, #hpColRight2 h3{margin: 0 0 0 10px; float: left; width: 200px;}
#hpColLeft2 p, #hpColRight2 p{ margin: 0 0 0 10px; float: left; width: 200px;}
#hpColLeft2 img, #hpColRight2 img{ float: left; margin-bottom: 10px;}

/* Main Content Area */
#contentColLeft{float:left; padding: 0; margin: 0 10px 0 0; text-align:left; background-image:url(images/verticalDot.gif); background-repeat:repeat-y;}
#contentColRight{width: 180px; float:left; padding-left: 15px; margin: 0 0 0 0;}

#hpColRightNavlist ul, #colRightNavlist ul{width: 200px; font: 70% Verdana, Arial, Helvetica, sans-serif; color: #CC0000; padding: 0; margin: 0;}
#colRightNavlist li{padding: 0 0 5px 15px; margin: 0; line-height: 160%; background-image:url(images/orangeSquare.gif); background-repeat: no-repeat; background-position: 0px 6px; list-style-type: none;}
#hpColRightNavlist li{padding: 0 0 5px 15px; margin: 0; line-height: 150%; background-image:url(images/orangeSquare.gif); background-repeat: no-repeat; background-position: 0px 6px; list-style-type: none;}
#hpColRightNavlist li a{text-decoration: none; color:#CC0000; border-bottom: 1px dashed #990000;}
#colRightNavlist li a{text-decoration: none; color:#CC0000;}
#hpColRightNavlist li a:hover, #colRightNavlist li a:hover{text-decoration: none; color:#FCA610; border-bottom: 1px dashed #FCA610;}

#servicesList ul, #areasCovered ul{width: 180px; font: 65% Verdana, Arial, Helvetica, sans-serif; color: #666666; padding: 0; margin: 5px 0 20px 0; clear: both; float: left;}
#servicesList li, #areasCovered li{padding: 0 0 0 15px; margin: 0; line-height: 160%; list-style-type: none; background-image:url(images/orangeSquare.gif); background-repeat: no-repeat; background-position: 0px 6px;}
#areasCovered ul{margin-left: 30px;}

#links ul{font: 65% Verdana, Arial, Helvetica, sans-serif; color: #666666; padding: 0; margin: 5px 0 20px 0;}
#links li{padding: 0 0 8px 15px; margin: 0; line-height: 160%; list-style-type: none; background-image:url(images/orangeSquare.gif); background-repeat: no-repeat; background-position: 0px 6px;}
#links li a{ text-decoration: none; color: #666666;}
#links li a:hover{ text-decoration: none; color: #CC0000;}


/* FONTS */
h1{font: 130% Arial, Helvetica, sans-serif; color: #CC0000; margin: 0 0 20px 0; padding: 0; font-weight:bold;}
h1 .orange{color: #FCA102;}
h1 .small{font-size: 80%;}
h2{font: 100% Arial, Helvetica, sans-serif; color: #CC0000; margin:0; padding: 0; font-weight: bold;}
h3{font: 80% Arial, Helvetica, sans-serif; color: #F30; margin: 10px 0 0 0; padding: 0; font-weight: bold;}
h4{font: 70% Arial, Helvetica, sans-serif; color: #CC0000; margin: 0; padding: 20px 0 0 0; font-style:italic; font-weight: normal;background-image:url(images/titleLines.gif); background-repeat:no-repeat; background-position:top; float: left; clear: both; width: 100%;}
p{font: 75% Arial, Helvetica, sans-serif; color: #666666; margin:0; padding: 0 0 10px 0; line-height: 160%; float: left; width: 100%;}
p a{color: #CC0806; border-bottom: 1px dashed #990000; text-decoration: none;}
p a:hover{color: #FCA610; border-bottom: 1px dashed #FCA610; text-decoration: none;}
.redText{color: #CC0000;}

#what_we_charge strong{ color: #F60;}

#plumbing ul{width: 440px; float: left; font: 75% Arial, Helvetica, sans-serif; color: #666666; padding: 0; margin: 0 0 10px 0;}
#plumbing li{padding: 0 0 0 15px; margin: 0; line-height: 160%; list-style-type: none; background-image:url(images/orangeSquare.gif); background-repeat: no-repeat; background-position: 0px 6px;}

#hp_services { float: left; margin: 20px 0 0 0; width: 100%;}
#hp_services h2{ font-size: 120%; letter-spacing: -0.03em; }
#hp_services h3{ font-size: 100%; letter-spacing: -0.03em; color: #F60}

.hp_service_list { float: left; width: 170px; border: 1px solid #ccc; margin: 5px 10px 0 0; height: 235px; background-color: #F3F3F3;}
.hp_service_list  img{ float: left; clear: both;}
#hp_services .hp_service_list h2{ font-size: 100%; color: #F60; font-weight: normal; letter-spacing: normal;  float: left; width: 160px; margin: 8px 0 3px 8px; padding: 0;}

#hp_services .hp_service_list ul { float: left; clear: both;  margin: 0 0 0 8px; padding: 0; list-style: none; width: 100%;}
#hp_services .hp_service_list li {font-size: 70%; color: #666; margin: 0; padding: 0; line-height: 150%;}
#hp_services .hp_service_list li a, #hp_services .hp_service_list p a{ color: #C00; border-bottom: none; text-decoration: underline;}
#hp_services .hp_service_list li a:hover, #hp_services .hp_service_list p a:hover{ color: #333;}
#hp_services .hp_service_list p{font-size: 70%; color: #666; float: left; width: 155px; margin: 0 0 0 8px; padding: 0;  line-height: 150%;}

#contactForm{ float: left; width: 100%; margin: 20px 0 0 0; padding: 10px; background-color: #f4f4f4; border: 1px dotted #ccc;}
#contactForm h2{ margin: 0 0 10px 0; font-size: 110%; color: #F60; font-weight: normal;}
#contactForm p{ float: left; margin: 2px 0 0 0; padding: 0;}
#contactForm label{ float: left; width: 100px;}
#contactForm .text{ color: #666; width: 200px;}
#contactForm textarea{ font: 100% Arial, Helvetica, sans-serif; color: #666; width: 300px;}

#alertBox{ float: left; width: 100%; background-color: #FFC; border: 1px solid #FC0; padding: 10px;}
#alertBox p{ color: #F30; margin: 0; padding: 0;}


/* *************************************************************
TESTIMONIAL
************************************************************* */
#testimonial{ float: left; width: 440px; margin: 10px 0 15px 0; padding: 15px; background: #FEF0D6 url(images/icon_quotes.gif) 15px 15px no-repeat;}
#testimonial p{ color: #C00; font-size: 80%; float: left; width: 400px; margin: 0 0 0 40px; padding: 0; font-style: italic; }
#testimonial h3{ color: #09F; font-size: 75%; font-weight: bold; margin: 2px 0 0 0; padding: 0; float: right; width: 530px; font-style: normal; }
#testimonial h4{ color: #888; font-size: 75%; font-weight: bold; margin: 2px 0 0 0; padding: 0; float: right; width: 530px; font-style: normal;}
#testimonial .separation{ float: right; width: 400px; border-top: 1px dotted #F96; font-size: 0; margin: 10px 0 10px 0;}