/* General */ body { width: 100%; text-align: center; font: 12px Arial, Helvetica, sans-serif; background-color: #C2E45B; background-image: url(../img/background.png); background-repeat: no-repeat; background-position: center top; } a { outline: none; } strong { font-weight: bold; } /* Main Wrap and Header */ #main-wrap { width: 960px; margin: 0 auto; } #logo { text-indent: -9999px; float: left; } #logo div { margin-left: 98px; } #logo a span { background: url(../img/logo.png) top left no-repeat; width: 132px; height: 164px; display: block; } /* Navigation */ #nav-wrap { float: right; display: inline; text-align: right; margin-top: 137px; margin-right: 60px; } #navigation ul { width: 540px; height: 51px; position: relative; background: url(../img/menu.png) top left no-repeat; } #navigation li { float: left; position: relative; text-align: left; text-indent: -999em; } #navigation ul li a { display: block; } #navigation li#item1 a.top { left: 0; width: 61px; height: 51px; } #navigation li#item2 a.top { left: 61px; width: 83px; height: 51px; } #navigation li#item3 a.top { left: 144px; width: 77px; height: 51px; } #navigation li#item4 a.top { left: 221px; width: 104px; height: 51px; } #navigation li#item5 a.top { left: 325px; width: 59px; height: 51px; } #navigation li#item6 a.top { left: 384px; width: 52px; height: 51px; } #navigation li#item7 a.top { left: 436px; width: 104px; height: 51px; } /* The a.current for the navigation items are currently commented out, if you want to restore the current page state, uncomment all the items */ #navigation li#item1:hover, #navigation li#item1 a:hover, #navigation li#item1.sfhover /*, #navigation li#item1 a.current*/ {background: url(../img/menu.png) 0 -51px no-repeat;} #navigation li#item2:hover, #navigation li#item2 a:hover, #navigation li#item2.sfhover /*, #navigation li#item2 a.current*/ {background: url(../img/menu.png) -61px -51px no-repeat;} #navigation li#item3:hover, #navigation li#item3 a:hover, #navigation li#item3.sfhover /*, #navigation li#item3 a.current*/ {background: url(../img/menu.png) -144px -51px no-repeat;} #navigation li#item4:hover, #navigation li#item4 a:hover, #navigation li#item4.sfhover /*, #navigation li#item4 a.current*/ {background: url(../img/menu.png) -221px -51px no-repeat;} #navigation li#item5:hover, #navigation li#item5 a:hover, #navigation li#item5.sfhover /*, #navigation li#item5 a.current*/ {background: url(../img/menu.png) -325px -51px no-repeat;} #navigation li#item6:hover, #navigation li#item6 a:hover, #navigation li#item6.sfhover /*, #navigation li#item6 a.current*/ {background: url(../img/menu.png) -384px -51px no-repeat;} #navigation li#item7:hover, #navigation li#item7 a:hover, #navigation li#item7.sfhover /*, #navigation li#item7 a.current*/ {background: url(../img/menu.png) -436px -51px no-repeat;} #navigation li#item1 ul a:hover, #navigation li#item1 ul a.current, #navigation li#item2 ul a:hover, #navigation li#item2 ul a.current, #navigation li#item3 ul a:hover, #navigation li#item3 ul a.current, #navigation li#item5 ul a:hover, #navigation li#item5 ul a.current, #navigation li#item6 ul a:hover, #navigation li#item6 ul a.current, #navigation li#item7 ul a:hover, #navigation li#item7 ul a.current { background: none; display: block; } #navigation li ul { position: absolute; left: -999em; background: none; } #navigation li ul:hover, #navigation li ul.sfhover { display: block; background: none; } #navigation li:hover ul { left: auto; } #navigation li ul li { padding: 8px; background: #5F8009; text-align: left; line-height: normal; width: 150px; padding: 0; margin-bottom: 0; display: block; font-weight: normal; text-indent: 0; border-bottom: 1px solid #C2E45B; } * html #navigation li ul li { display: inline; d\isplay: block; } #navigation li ul li:hover , #navigation li ul li.sfhover { color: #FFF; } #navigation li:hover ul, #navigation li.sfhover ul { padding: 0 0 8px 0; margin: 0; left: 0; width: 150px; top: 100%; } #navigation li ul li a { height: auto; width: auto; background: none; display: block; line-height: 1.2em; padding: 8px; color: #FFF; text-decoration: none; } #navigation li ul li a:hover { height: auto; background: #597807; display: block; text-decoration: underline; } /* The original CSS for the jQuery slideshow is still used below, in case a slideshow will be used in the future */ #slideshow { clear: both; background:url(../img/slideshow.png) top center no-repeat; width: 868px; height: 184px; margin: 0 auto; text-align: right; line-height: 1.2em; } #slider { margin: 0 14px; padding: 10px 0 5px 0; overflow: hidden; } #slide-rule { width: 840px; height: 158px; overflow: hidden; } #slider li { width: 840px; height: 158px; } #prevBtn, #nextBtn { margin-right: 16px; font: 11px Verdana, Arial, Helvetica, sans-serif; } #prevBtn a { margin-right: 10px; background: url(../img/backward.png) left 1px no-repeat; padding-left: 16px;} #nextBtn a { margin-right: 10px; background: url(../img/forward.png) right 1px no-repeat; padding-right: 16px;} #prevBtn a, #nextBtn a { color: #333333; text-decoration: none; } #prevBtn a:hover, #nextBtn a:hover { color: #333333; text-decoration: underline; } /* Content and Sidebar - Content Proper is where the main content of the site is */ #content-wrap { width: 868px; margin: 10px auto; } #sidebar-wrap { float: left; width: 280px; } #content-proper-wrap { float: right; width: 578px; text-align: left; background: url(../img/content-bg.png); } #content-inner { background: url(../img/content-bg-top.png) top center no-repeat; padding-top: 9px; } #content-proper { background: url(../img/content-bg-bottom.png) bottom center no-repeat; padding: 0 18px 10px 18px; color: #333333; } .sidebox-wrap { background: url(../img/sidebar-middle.png) top center repeat-y; } .sidebox-inner { background: url(../img/sidebar-top.png) top center no-repeat; padding-top: 12px; } .sidebox { background: url(../img/sidebar-bottom.png) bottom center no-repeat; padding-bottom: 16px; } .sidebox-text { padding: 0 14px; text-align: left; } .sidebox-text p { font: 12px Verdana, Arial, Helvetica, sans-serif; line-height: 1.3em; margin: .8em 0; } .sidebox h2 { font: bold 14px Arial, Helvetica, sans-serif; color: #6C861E; } .sidebox-text p a { color: #336633; padding: 0; margin: 0; background: none; font-size: 11px; display: inline; } .sidelinks li { border-bottom: 1px dashed #CCCCCC; } .sidelinks li a { padding: 8px 8px 8px 22px; display: block; font-size: 14px; background: url(../img/rightarrow.png) left center no-repeat; color: #336633; text-decoration: none;} .sidelinks li a.personal { background: url(../img/home.png) left center no-repeat; } .sidelinks li a.corporate { background: url(../img/inbox.png) left center no-repeat; } .sidelinks li a.cleaning { background: url(../img/trash.png) left center no-repeat; } .sidelinks li a.active { text-decoration: underline; } .sidelinks li a:hover { text-decoration: underline; } .sidelinks li ul li { background: url(../img/bullet-2.png) 0 0 no-repeat; padding-left: 18px; padding-bottom: .4em; margin-bottom: .8em; } #content-proper h2 { font: bold 16px Arial, Helvetica, sans-serif; color: #336633; margin: 1em 0; } #content-proper h3 { font: bold 14px Arial, Helvetica, sans-serif; color: #669933; margin: 1.4em 0 1em 0; } #content-proper h4 { font: bold italic 12px Arial, Helvetica, sans-serif; color: #333; margin: 1em 0; } #content-proper p { font: 12px Verdana, Arial, Helvetica, sans-serif; line-height: 1.3em; margin: .8em 0; } #content-proper p.exposition { margin: 1.2em 0; font: 12px Verdana, Arial, Helvetica, sans-serif; color: #333333; border-bottom:1px dashed #CCCCCC; padding-bottom: 10px; line-height: 1.3em; } ul.sidebar-contact { margin: 12px; } ul.sidebar-contact li { text-indent: -999em; width: 215px; height: 28px; } ul.sidebar-contact li.phone { background: url(../img/contact-phone.png) top left no-repeat; } ul.sidebar-contact li.hours { background: url(../img/office-hours.png) top left no-repeat; } ul.sidebar-contact li.mail { background: url(../img/contact-mail.png) top left no-repeat; } ul.sidebar-contact li.chat { background: url(../img/contact-chat.png) top left no-repeat; } ul.sidebar-contact li.twitter { background: url(../img/twitter-teg.png) top left no-repeat; height: 32px; } ul.sidebar-contact li.twitter a { width: 215px; height: 32px; display: block; } ul.sidebar-contact li.chat a { width: 215px; height: 28px; display: block; } ul.sidebar-contact li.no-indent { text-indent: 0; padding: 6px; } #content-proper p.phone { background: url(../img/contact-img-1.png) top left no-repeat; height: 30px; line-height:30px; padding-left: 40px; } #content-proper p.mail { background: url(../img/contact-img-2.png) top left no-repeat; height: 30px; line-height:30px; padding-left: 40px; } #content-proper p.chat { background: url(../img/contact-img-3.png) top left no-repeat; height: 30px; line-height:30px; padding-left: 40px; } #content-proper p.indent-b { padding-left: 2em; } #content-proper p.indent-c { padding-left: 5px; } #content-proper p.rates { background: url(../img/wallet_open.png) left center no-repeat; line-height: 32px; font-size: 12px; padding-left: 40px; margin-bottom: 1.5em; } #content-proper p.testimonials { background: url(../img/testimonials.png) left center no-repeat; line-height: 32px; font-size: 12px; padding-left: 40px; margin-bottom: 1.5em;} p.rates a { color: #6C861E; } p.rates a:hover { color: #333; } #content-proper p.services-link1 { background: url(../img/services-link1.png) left center no-repeat; line-height: 64px; height: 64px; font-size: 12px; padding-left: 70px; margin-bottom: 1.5em; margin-left: 1em;} #content-proper p.services-link2 { background: url(../img/services-link2.png) left center no-repeat; line-height: 64px; height: 64px; font-size: 12px; padding-left: 70px; margin-bottom: 1.5em; margin-left: 1em;} #content-proper a { color: #6C861E; } #content-proper a:hover { color: #333; } #footer { clear: both; width: 868px; margin: 0 auto; font-size: 11px; color: #336633; padding: 15px 0; } #footer ul { margin: 10px; display: block; text-align: center; } #footer ul li { display:inline; margin-right: 8px; } #footer ul li span { margin-left: 12px; } #footer a, #footer ul li a { color: #336633; text-decoration: none; } #footer a:hover, #footer ul li a:hover { color: #333; text-decoration: underline; } #content-proper ul { margin: 1em; list-style: none; } #content-proper ul li { background: url(../img/bullet.png) 0 0 no-repeat; padding-left: 18px; margin-bottom: .8em; } #content-proper ol { margin: 1em; list-style: decimal; padding-left: 18px; } #content-proper ol li { margin-left: 6px; margin-bottom: .8em } /* Classes for images */ .img-right { float: right; margin: 1em; } .img-left { float: left; margin: 1em; } .img-left-intro { float: left; margin: 0 1em 1em 0; } .img-right-intro { float: right; margin: 0 0 1em 1em; } .img-center { text-align: center; } /*Misc*/ .clear { clear: both; margin: 0; padding: 0; height: 1%; } #content-proper p.subtext, .sidebox-text p.subtext { font: bold 10px Verdana, Arial, Helvetica, sans-serif; color: #666; } .read-more a { background: url(../img/read-more-icon.png) left center no-repeat; padding: 6px 10px 10px 30px; } #content-proper p.faq { color: #8E0639; font-weight: bold; } .faq-answer { margin-bottom: 1em; padding-bottom: .6em; border-bottom: 1px dashed #CCCCCC; } #content-proper div.faq-answer ul li{ padding-left: 1.8em; margin-left: 1.2em; color: #336633; } #content-proper div.faq-answer p { padding: 0 1.5em; color: #336633; } .sidebox-text p.small-caption { font: 11px Arial, Helvetica, sans-serif; } .sidebox-text p.align-center { text-align: center; } .fl-left { float: left; } .indent-a { padding-left: 2em; border-top: 1px dashed #CCCCCC;} .wid-1 { width: 110px; } .important { font-weight: bold; font-style: italic; } .testimonials { margin-bottom: 12px; padding: 4px 0 12px 18px; background: url(../img/left-quote.png) left top no-repeat; border-bottom: 1px dashed #8DBD0C; } .testimonials blockquote { padding-right: 18px; margin-bottom: 12px;} #content-proper .testimonials blockquote p{ font-style: italic; margin-bottom: 1em; } #content-proper p.client { text-align: right; font-weight: bold; color: #669966; } #online-estimate p { margin: .8em; } .grid-1 { float: left; display: inline; width: 200px; } .package-rate { color: #336633; } .read-more { text-align: right; font-size: 12px; border-bottom: 1px dashed #CCCCCC; padding-bottom: 1em; } .paypal-link { margin: .5em auto; } #content-proper ol.instructions { font-size: 14px; color: #333; padding-left: 6px;} #content-proper ol.instructions li { list-style: none; padding: 4px 6px 8px 42px; line-height: 1.4em; margin-bottom: 1em; } ol.instructions li.i-one { background: url(../img/number1.png) left top no-repeat; } ol.instructions li.i-two { background: url(../img/number2.png) left top no-repeat; } ol.instructions li.i-three { background: url(../img/number3.png) left top no-repeat; } ol.instructions li.i-four { background: url(../img/number4.png) left top no-repeat; } .paypal-box { float: right; width: 220px; text-align: center; } .paypal-box-inner { padding: 20px; margin: 12px; background: #EFFFAA; border: 1px dashed #99CC00; } .payment-box { margin: 12px; padding: 12px; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; } .sidebox-text p { font: 12px Verdana, Arial, Helvetica, sans-serif; line-height: 1.3em; margin: .8em 0; } dl { float: left; margin: 0; padding: 10px 2em 1em 0; } dt { margin: 0; padding: 0; font-weight: bold; color: #336633; } dd { margin: 0; padding: 0; color: #000; } #contactInfo { height: 105px; background-image: url(../images/header_bg.gif); background-repeat: repeat-x; color: #0066CC; text-align: left; } /* CSS Document */ /* form.house-cleaning { padding:0; margin-top: 5px; } form.house-cleaning textarea { padding:4px; border: 1px solid #ccc; float: none; } form.house-cleaning fieldset { width: 400px; margin: 0 auto 8px auto; padding: 10px 0 20px 0; } form.house-cleaning legend { } form.house-cleaning fieldset legend { font-weight: bold; color: #FFF; margin: 0 0 0 5px; padding: 8px; } form.house-cleaning label { float: left; } form.house-cleaning fieldset ol { margin: 0; padding: 0; } form.house-cleaning fieldset li { list-style: none; padding: 5px 5px 5px 10px; margin: 0; display: block; clear: left; } form.house-cleaning em { font-style:italic; } form.hopeform label { width: 130px; } form.house-cleaning input { float: none; } styling for form */ /* removes padding in IE, using button tag - will not work in inside a table */ input.button { padding: 0 .25em; width: 0; overflow: visible; margin: 0px 0px 0px 10px; } input.button[class] { /* IE ignores [class] */ width: auto; /* cancel margin fix for other browsers */ margin: 0px 0px 0px 10px; } .alignbuttons { float: left; margin: 5px 0px 0px 15px; padding: 5px 0px 0px 15px; }