will include the padding and border in addition to the width specified in the CSS so adjust the width attribute if adjusting the padding and border attributes -- i.e. reduce width if increasing padding and/or border width sizes and vice versa */ /* main container that contains all other elements below */ #wrapper { margin:0 auto; /* the auto margins (in conjunction with a width) center the page */ width:780px; background-color:#4c4c4c; border-right:2px solid #000000; border-bottom:2px solid #000000; border-left:2px solid #000000; } #masthead { width:780px; height:71px; } #masthead img { width:780px; height:71px; border:none; } #taglinebar { padding:3px 14px 0 0; width:766px; height:23px; text-align:right; background-color:#000000; } #taglinebar h1 { margin:0; font-family:Arial, Helvetica, sans-serif; font-size:1.7em; font-weight:normal; color:#f37121; } #mainimage img { display:block; } .blackbar { width:780px; height:8px; background-color:#000000; } /* --- top nav buttons - rollover effect without javascript --- */ #topnav ul { margin:0; padding:0; list-style:none; width:780px; height:31px; float:left; background:url(../images/nav-bg-off.gif) repeat-x; font-size:1.2em; } #topnav ul li { float:left; } #topnav ul a { display:block; float:left; /* IE 5.2 Mac fix */ padding:5px 5px 0 5px; height:26px; text-decoration:none; } #topnav ul .first a { background:none; } #topnav ul a:hover { background:url(../images/nav-bg-on.gif); } .topnavdividerfloat { float:left; } /* makes the button for the page you're on look pressed - the unique ID's are contained in each respective page's tag and each #topnav

has a unique class */ #home #wrapper #topnav .topnavhome a, #about #wrapper #topnav .topnavabout a, #residential #wrapper #topnav .topnavresidential a, #commercial #wrapper #topnav .topnavcommercial a, #emergency #wrapper #topnav .topnavemergency a, #specialoffers #wrapper #topnav .topnavspecialoffers a, #serviceareas #wrapper #topnav .topnavserviceareas a, #contact #wrapper #topnav .topnavcontact a { background:url(../images/nav-bg-on.gif); cursor:default; } /* -------------------------------------------------- */ /* contains main and side sections */ #maincontainer { clear:left; /* clears float on #topnav ul */ margin:0 0 0 20px; padding:10px 0 0 0; width:760px; } /* --- main section --- */ #main { float:right; margin:0 0 10px 20px; width:519px; background:#FFFFFF; border-left:2px solid #2e2e2e; border-top:2px solid #2e2e2e; border-bottom:2px solid #2e2e2e; color:#000000; } #main a:link { color:#000000; text-decoration:none; } #main a:visited { color:#000000; text-decoration:none; } #main a:hover { color:#000000; text-decoration:underline; } #main a:active { color:#000000; text-decoration:underline; } #main img { border:none; } #main p { margin:8px 0; padding:0 20px 0 20px; font-size:1.2em; line-height:150%; } #main p.biggertext { font-size:1.5em; line-height:120%; } #main h1 { margin:0 0 20px 0; padding:10px 0 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:2.1em; font-weight:normal; color:#222222; } #main h2 { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:1.8em; font-weight:normal; color:#222222; } #main h3 { margin:0; padding: 0 0 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:1.5em; font-weight:normal; color:#222222; } #main ul { margin:0 0 10px 30px; padding:0; list-style-type:square; font-size:1.2em; } #main ul li ul { margin:0 0 0 13px; padding:0; list-style-type:square; font-size:1em; } #main ol { margin:0 0 10px 38px; padding:0; font-size:1.2em; } #main ol li ol { margin:0 0 0 13px; padding:0; font-size:1em; } #main .coupon { margin:0; padding:0; border:#f4ec09 dotted 4px; background-color:#eb6e1f; } /* -------------------------- */ /* --- side section --- */ #side { float:left; margin:3px 0 0 0; width:219px; } #side img { border:none; display:block; } /* -------------------------- */ /* --- side box --- */ .sidebox { margin:0 0 20px 0; padding:0 0 11px 0; width:219px; background:url(../images/boxbottom.gif) bottom no-repeat #888888; } #sideboxcontent a:link { color:#ffffff; text-decoration:none; } #sideboxcontent a:visited { color:#ffffff; text-decoration:none; } #sideboxcontent a:hover { color:#ffffff; text-decoration:underline; } #sideboxcontent a:active { color:#ffffff; text-decoration:underline; } .sideboxcontent { width:215px; border-top:2px solid #2e2e2e; border-right:2px solid #2e2e2e; border-left:2px solid #2e2e2e; } .sideboxcontent p { margin:8px 10px 0 10px; padding:0; font-size:1.2em; line-height:120%; } .sideboxcontent ul { margin:5px 10px 0 11px; padding:0; list-style-type:none; font-size:1.2em; } .sideboxcontent ul li { margin:0; padding:0 0 0 8px; background:url(../images/arrow.gif) no-repeat; } .sideboxcontent ol { margin:0 0 10px 38px; padding:0; font-size:1.2em; } .sideboxcontent ol li ol { margin:0 0 0 13px; padding:0; font-size:1em; } /* -------------------------- */ /* --- footer section --- */ #footer { margin:0 auto; background:#222222; padding:0px 10px 0px 10px; width:760px; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; color:#ffffff; border-right:2px solid #000000; border-bottom:2px solid #000000; border-left:2px solid #000000; } #footer a:link { color:#ffffff; text-decoration:none; } #footer a:visited { color:#ffffff; text-decoration:none; } #footer a:hover { color:#ffffff; text-decoration:underline; } #footer a:active { color:#ffffff; text-decoration:underline; } .phonenumber { font-size: 1.5em; font-weight:bold; } .footerleft { float:left; padding: 0 10px 10px 0; font-size:1.1em; font-weight:bold; color:#ffffff; } .footermid { float:left; padding: 0 10px 0 10px; font-size:1.1em; font-weight:bold; color:#222222; } .footerright { float:right; } .footer-float-right { float:right; width:278px; padding: 10px 0 20px 0; } #footer-lower-band { margin:0 auto; background:#000000; padding:10px 10px 0 10px; width: 760px; border-right:2px solid #000000; border-bottom:2px solid #000000; border-left:2px solid #000000; } /* -------------------------- */ /* --- contact form field attributes --- */ #contactform { margin:0; padding:0; } #contactform table { width:100%; border-collapse:collapse; } #contactform table tr td { margin:0; padding:0 5px; } #name, #phone, #email, #comments { margin:0; padding:0; width:200px; font:1em Arial, Helvetica, sans-serif; color:#000000; } #security_code { margin:0; padding:0; width:96px; font:1em Arial, Helvetica, sans-serif; color:#000000; } /* -------------------------- */