/* CSS Document */ /******************************************************************************** RESETS ********************************************************************************/ body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, label, p, strong, em, table, tr, td { margin: 0; padding: 0;} ul, ol { list-style: none;} h1, h2, h3, h4, h5, h6 { font-weight: normal;} sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: .75ex;} /******************************************************************************** GLOBAL STYLES ********************************************************************************/ body { background: #ffffff url(../images/top-nav-bg.png) repeat-x; font: normal normal 13px/150% Verdana, Geneva, sans-serif; color: #001c51;} a { color: #003e7e; text-decoration: underline;} a:hover {} img { border: none;} p { margin-bottom: 1em;} h1 { font: normal normal 25px/110% Verdana, Geneva, sans-serif; color: #c02e1a;} h2 { font: normal bold 16px/125% Verdana, Geneva, sans-serif; color: #001c51; margin-bottom: .75em;} h1 + h2 { margin-top: .5em;} h2.sub-header { -margin-top: .5em;} /* this is for IE6 because it does not support the sibling character "+" selector */ h3 { font: normal normal 22px/105% Verdana, Geneva, sans-serif; color: #c02e1a; margin-bottom: 1em;} h3.hours { font: normal bold 14px/125% Verdana, Geneva, sans-serif; color: #001c51; margin-bottom: 0; padding:0 0 0 15px;} .red { color: #c02e1a;} .yellow { color: #fffc00;} .white { color: #ffffff;} .text-callout-17 { font-size: 17px; font-weight: bold;} .center { text-align: center;} sup { font-size: 75%; -font-size: 12px;} sup.tm { font-size: 100%} sup.Dagger { font-size: 75%; -font-size: 12px;} sup.asterisk { font-size: 75%; -font-size: 14px;} table { margin-bottom: 1em;} .footnote { font-size: 80%;} .float-left { float:left; display: inline;} .float-right { float:right;} .clear{clear:both;} .legal{font-size:9px;} /******************************************************************************** WRAPPERS ********************************************************************************/ #wrapper { width: 960px; margin: auto;} #left-column { float: left; width: 700px; margin-right: 10px;} #right-column { float: right; width: 250px;} #appointment-wrapper { width: 960px;} /******************************************************************************** NAVIGATION ********************************************************************************/ #top-nav { width: 960px; height: 50px;} #top-nav ul { text-align: center;} #top-nav ul li { float: left; margin-right: 2px;} #top-nav ul li.top-nav-divider { width: 2px; height: 50px; background: url(../images/top-nav-divider.png) no-repeat;} #top-nav a { font: normal normal 14px/50px Verdana, Geneva, sans-serif; color: #ffffff; text-transform: capitalize; text-decoration: none; padding: 12px 11px;} #top-nav a:hover, #top-nav-active a { background: url(../images/top-nav-hover.png) repeat-x;} #left-side-nav-wrapper { float: left; width: 180px; margin-right: 15px;} #free-consultation-nav { float: left; width: 180px; margin-top: 15px;} #left-side-nav { background: #e5eef6; padding: 0 10px;} #left-side-nav a, #free-consultation-nav a { font: normal bold 13px/100% Verdana, Geneva, sans-serif; color: #0055a7; text-decoration: none;} #left-side-nav a:hover, #left-side-nav #left-side-nav-active a, #free-consultation-nav a:hover, #free-consultation-nav #left-side-nav-active a { color: #000000;} #left-side-nav ul a:hover, #left-side-nav ul #left-side-nav-active a { background: url(../images/left-nav-arrow.png) no-repeat left 50%; color: #000000; padding-left: 8px;} #left-side-nav li, #free-consultation-nav li { line-height: 25px;} #left-side-nav ul li, #free-consultation-nav ul li { line-height: 20px;} #left-side-nav ul, #free-consultation-nav ul { padding-left: 7px;} #left-side-nav ul li a { font-size: 11px; font-weight: normal;} /******************************************************************************** HEADER ********************************************************************************/ #header { width: 700px; position: relative;} #sears-logo { position: relative; left: -15px; top: 13px;} #sears-logo-101, #sears-logo-inside { position: relative; left: -15px; top: 13px;} #header-text { font-size: 14px; line-height: 120%; color: #333333; position: absolute; left: 245px; top: 25px;} #appointment-wrapper #header-text { font-size: 22px; color: #001c51; top: 100px;} /* override for appointment page */ #header-text #tagline { font-size: 13px; line-height: 19px; color: #0055a7;} #header-text #tagline.bigger { font-size: 22px;} #header-text-hvac { font-size: 17px; line-height: 175%; color: #c02e1a; position: absolute; left: 245px; top: 47px;} #header-phone { font-size: 25px; line-height: 25px; font-weight: bold; padding:10px 0 0 0; display:inline-block;} #header-text .promo-code, #header-text-hvac .promo-code { display: block; font-size: 13px; margin-bottom: 10px;} #header-text-hvac .promo-code { line-height: 1.5; margin-bottom: 0;} #header-phone-hvac { font-size: 25px; line-height: 25px; font-weight: bold; display:inline-block;} #header-image { width: 700px; margin-bottom: 10px;} #header-image-inside { width:700px; margin-bottom: 10px;} #header-image-2 { width: 700px; height: 460px; margin-bottom: 10px;} #header-image-101 { width: 700px; height: 329px; margin-bottom: 10px;} #header-image-thank-you { width:700px; height:125px; margin-bottom: 10px;} /*to revert to image without extended banner offer just remove "-small-energy" from tax credit call to action background image*/ #tax-credit-call-to-action { width: 700px; height: 65px; background: url(../images/tax-credit-call-to-action-small-energy.png) no-repeat;} #tax-left { float: left; width: 300px; font: normal normal 14px/100% Verdana, Geneva, sans-serif; color: #ffffff; padding: 3px 0 0 75px;} #tax-left #top-line { display: block;} #tax-left #amount { font-size: 20px; line-height: 125%; font-weight: bold;} #tax-left #tax-credit { font-size: 16px; font-weight: bold;} #tax-left #bottom-line { display: block; line-height: 110%;} #tax-right, #no-no-right { float: right; width: 305px; font-size: 16px; line-height: 150%; color: #ffffff; text-align: right; padding: 5px 20px 0 0;} #tax-right #cta-phone { font-size: 29px; font-weight: bold;} #no-no-banner { width: 700px; height: 65px; background: url(../images/no-no-banner.png) no-repeat;} #no-no-phone { font-size: 29px; font-weight: bold; padding:15px 0 0 0; display:inline-block;} #urgency-banner { background:url(../images/urgency-banner.png) no-repeat; width:700px; height:60px; margin:0 0 10px 0;} #urgency-banner p { width:650px; text-align:center; color:#ffffff; font-size:22px; font-weight:bold; margin:0 auto; padding:0 0 0; line-height:29px; } #urgency-banner p.holiday { width:650px; text-align:center; color:#ffffff; font-size:28px; line-height: 60px; font-weight:bold; margin:0 auto;} #urgency-banner span.banner-days { color:#000000; background:#ffffff; padding:7px; border:1px solid #000000; font-size:28px; line-height:50px;} #urgency-banner span.banner-bonus { color:#FF0; font-size:27px; line-height:37px;} #urgency-banner span.banner-bonus-no-no { color:#FF0; font-size:22px; line-height:37px;} #urgency-banner span.holiday-bonus { color:#FF0; font-size:28px; line-height:30px;} #urgency-banner p#small-months { font-size:12px; font-weight:normal; margin:-20px 0 0 0; text-align:right;} /* Controls Positioning of Offer in Hero Graphics for 101 Experience */ #burst-offer-home-101 { position:absolute; z-index:10; margin:156px 0 0 175px;} #banner-overlay { margin:-110px 0 0 477px;} /* Controls Positioning of Offer in Hero Graphics for 104 Experience */ #banner-overlay-104 { margin:-135px 0 0 392px;} /* Controls Positioning of Bursts in Hero Graphics for Default Experience */ #burst-offer-home { position:absolute; z-index:10; margin:156px 0 0 175px;} #burst-offer-hvac { position:absolute; z-index:10; margin:156px 0 0 175px;} #burst-offer-hvac-installation { position:absolute; z-index:10; margin:156px 0 0 55px;} #burst-offer-windows { position:absolute; z-index:10; margin:156px 0 0 175px;} #burst-offer-siding { position:absolute; z-index:10; margin:156px 0 0 175px;} #burst-offer-roofing { position:absolute; z-index:10; margin:156px 0 0 55px;} #burst-offer-kitchens { position:absolute; z-index:10; margin:156px 0 0 175px;} /******************************************************************************** CONTENT ********************************************************************************/ #content-wrapper { width: 700px; margin-top: 25px;} #content { width: 700px;} #content-inside { float: left; width: 500px;} #content ul, #content-inside ul { list-style: disc; margin: 0 0 1em 20px; padding: 0 0 0 20px;} #content ol, #content-inside ol { list-style: decimal; margin: 0 0 1em 20px; padding: 0 0 0 20px;} #content ul ul, #content-inside ul ul { margin-bottom: 0;} #content .content-img, #content-inside .content-img { border: #0052A4 solid 1px; padding: 5px;} .dotted-divider-line { height: 1px; font-size: 1px; background: url(../images/dotted-divider-line.png) repeat-x;} .below-header { margin: 5px 0 10px 0;} .grey-callout-box { background: #ececec; margin-top: 5px; padding: 25px 0px 25px 12px;} .callout-inner-box { display: inline; float: left; width: 200px; margin: 0 12px 0 13px;} .callout-inner-box p { font-size: 11px; line-height: 150%; margin: 0; padding: 5px;} .callout-inner-box a.more-info { display: block; font-size: 9px; text-align: right; padding-right: 5px;} table.before-after img, .before-after { border: #0052a4 solid 1px; padding: 5px;} .callout-rounded-top { width: 500px; height: 10px; background: url(../images/callout-rounded-top.png) no-repeat; -font-size: 1px; -line-height: 1px;} .callout-rounded-content { background: url(../images/callout-rounded-repeat.png) repeat-y; font: normal bold 14px/125% Verdana, Geneva, sans-serif; color: #1d3666;} .callout-rounded-content strong { font-size: 16px;} .callout-rounded-content span { font-size: 12px; font-weight: normal;} .callout-rounded-content table { margin-bottom: 0;} .callout-rounded-content p { padding: 0 15px; margin-bottom: 0;} .callout-rounded-bottom { width: 500px; height: 10px; background: url(../images/callout-rounded-bottom.png) no-repeat; margin-bottom: 1em;} p.carousel-note { margin: 0 0 -15px 20px; line-height: 22px;} table#license-information td { padding: 5px;} a.back-to-top { display: block; background: url(../images/back-to-top-arrow.png) no-repeat right bottom; font-size: 12px; line-height: 12px; text-align: right; margin-top: 5px; padding-right: 15px;} h2 span.phone { font-size: 24px; line-height: 28px;} /* --------- APPOINTMENT PAGES (103 TEST) --------- */ #appointment-wrapper #header { width: 960px; height: 125px; margin-bottom: 10px;} #appointment-wrapper #header-text { top: 70px;} #appointment-wrapper #call-now-consultation { position: absolute; right: 0; top: 0;} #appointment-wrapper #content { width: 960px; margin-top: 25px;} #appointment-wrapper h3 { font-size: 18px;} #step-1 { float: left; display: inline;} #step-1 p span { font-size: 80%;} #step-2 { float: left; display: inline;} #step-3 #col-1, #step-3 #col-2, #step-3 #col-3 { float: left; display: inline;} #step-3 #col-3 { margin: 0;} /* form elements */ form#appointment { font-size: 12px;} form#appointment br.clearfix { height: 1px; font-size: 1px; line-height: 1px; margin: 0; padding: 0; clear: both;} form#appointment label { float: left; display: block; padding-left: 1px;} form#appointment label span { font-size: 80%;} form#appointment input { width: 444px; padding: 5px; border: #000000 solid 1px; margin: 2px 0 10px -1px;} form#appointment input.formError { border: #c02e1a solid 1px;} form#appointment #City, form#appointment #State { width: 175px; margin-right: 10px;} form#appointment #ZipCode { width: 50px;} form#appointment .two-column { width: 210px; margin-right: 10px;} form#appointment .next-button { display: block; width: 90px; height: 30px; background: url(/images/next-button.png) no-repeat; margin: 0; border: 0; clear: both;} form#appointment .back-button { display: block; width: 90px; height: 30px; background: url(/images/back-button.png) no-repeat; margin: 0; border: 0; clear: both;} form#appointment .required { font-size: 80%; clear: both;} /* checkboxes */ form#appointment label.checkbox, form#appointment label.radio { float: left; margin: 0 0 20px; line-height: 13px;} form#appointment input.checkbox, form#appointment input.radio { float: left; clear: left; width: 13px; height: 13px; border: 0; padding: 0; margin: 0 5px 0 0;} /*labels*/ #errors {color: #c02e1a;} #errors ul li label {float: none !important;} /******************************************************************************** SIDEBAR ********************************************************************************/ #sidebar { width: 250px;} .small-header#sidebar { margin-top: 135px;} #call-now-consultation, #serving-area { width: 250px; height: 142px; background: url(../images/call-now-consultation.jpg) no-repeat;} #call-now-consultation p { padding: 20px 0 0 20px; font-size: 15px; line-height: 115%; color: #0055a7;} #consultation-phone { font-size: 23px; font-weight: bold;} #serving-area p { padding: 35px 0 0 25px; font-size: 18px; line-height: 130%; color: #0055a7;} #sbsc-wrapper-hours .open-late { position: absolute; z-index: 8; margin: 10px 0 0 200px; display: inline-block;} #sbsc-wrapper-hours p { font-size:11px; margin:5px 0 0 0;} #sbsc-wrapper-hours p#indent { margin:10px 0 0 8px;} #sbsc-wrapper-hours p#hours-phone { color:#c02e1a; font-size:22px; font-weight:bold; padding:0 0 5px 15px;} #blue-box-wrapper { width: 250px; background: url(../images/form-bg-repeat.png) repeat-y; margin:30px 0 10px 0;} #blue-box-top { width: 250px; background: url(../images/form-top-no-arrow.png) no-repeat;} #blue-box-bottom { width: 250px; background: url(../images/form-bottom.png) no-repeat left bottom;} #blue-box-wrapper #blue-content { width: 200px; margin:0 auto; padding:15px 0 15px 0;} #blue-content p { color:#ffffff; font-size:18px; line-height:115%; margin:0; padding:0;} #blue-content span { color:#FF0; font-weight:bold; font-style:italic;} /* --------- CONTACT FORM --------- */ #contact-form-wrapper { width: 250px; background: url(../images/form-bg-repeat.png) repeat-y; margin:0;} #contact-form-top { width: 250px; background: url(../images/form-top.png) no-repeat;} #contact-form-bottom { width: 250px; background: url(../images/form-bottom.png) no-repeat left bottom;} #contact-form-bottom p { font-size: 12px; line-height: 125%; margin: 0; padding: 0 0 0 20px;} #contact-form { padding: 40px 20px 20px 20px;} #contact-form label { font-size: 12px; line-height: 100%; color: #ffffff;} #contact-form label .example { font-size: 10px;} #contact-form input { width: 198px; background: #ffffff url(../images/form-input-bg.png) repeat-x; border: #002162 solid 1px; margin: 5px 0 10px 0; padding: 5px 5px;} #contact-form #name, #contact-form .name { width:90px;} #contact-form input.checkbox { width: auto; background: none; border: none; margin: 0 5px 0 0; padding: 0;} #contact-form div#expand span { font-size: 12px; line-height: 20px;} #contact-form select { width: 208px; color: #000; margin: 5px 0 10px 0;} #contact-form #appointment { width: 175px; background: #002367 url(../images/appointment-arrow.png) no-repeat 190px 50%; font-size: 10px; line-height: 135%; padding: 10px 25px 10px 10px; margin: 0 0 10px 0;} #contact-form #get-started { display: block; width: 210px; height: 54px; background: url(../images/form-submit-button.png) no-repeat; border: none; margin: 10px 0 0 0; padding: 0} #contact-form br.clearfix { height: 1px; font-size: 1px; line-height: 1px; margin: 0; padding: 0; clear: both;} .formError { width: 180px; background: #ffffff; font-size: 11px; font-weight: bold; line-height:12px; color:#c02e1a; padding: 10px; margin-bottom: 10px; border:5px solid #c02e1a;} /* 103 TEST */ #contact-form-top-103 { width: 250px; background: url(/images/form-top-103.png) no-repeat;} #contact-form-bottom-103 { width: 210px; background: url(../images/form-bottom.png) no-repeat left bottom;padding: 20px;} #contact-form-bottom-103 img.float-right { margin: 0 0 10px 10px;} #contact-form-bottom-103 #line-1 { display: block; font: normal bold 22px/28px Verdana, Geneva, sans-serif; color: #ffffff; margin-bottom: 15px;} #contact-form-bottom-103 #line-2 { display: block; font: normal normal 13px/18px Verdana, Geneva, sans-serif; color: #ffffff;} #contact-form-bottom-103 #line-2 span { color: #fffc00;} #contact-form-bottom-103 #line-3 { display: block; font: normal bold 25px/31px Verdana, Geneva, sans-serif; color: #fffc00; margin-bottom: 15px; clear: both;} .error{color:#c02e1a;} #appointment select { margin: 5px 5px 30px 5px; } /* --------- END CONTACT FORM ----- */ #sbsc-wrapper { width: 250px; background: url(../images/sbsc-bg.png) repeat-y; margin: 10px 0 0 0;} #sbsc-wrapper-hours { width: 250px; background: url(../images/sbsc-bg.png) repeat-y; margin: 0 0 10px 0;} #sbsc-wrapper-hours h2, #sbsc-wrapper-hours p { padding:0 0 0 15px; margin:0; line-height:130%;} #sbsc-wrapper p { color: #003e7e; margin: 0; padding: 0 20px;} #sbsc-wrapper h2 { padding-left: 20px; margin-bottom: 5px;} #sbsc-wrapper small { line-height: 1.5em; color: #001c51;} /******************************************************************************** FOOTER ********************************************************************************/ #footer { width: 960px; clear: both; text-align: center; padding: 10px 0 50px 0;} #footer p { font: normal normal 9px/125% Verdana, Geneva, sans-serif; color: #000000; text-align: left;} #secondary-nav { font: normal normal 10px/100% Verdana, Geneva, sans-serif; color: #001c51; margin: 10px 0 20px 0;} #secondary-nav ul li { display: inline; padding: 0 5px 0 0; margin-right: 5px; border-right: #001c51 solid 1px;} #secondary-nav ul li#last { border-right: none;} #secondary-nav ul li a { color: #001c51; text-decoration: none;} #secondary-nav ul li a:hover { text-decoration: underline;} /******************************************************************************** CLEARING FLOATS HACK! ********************************************************************************/ .clearFloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearFloat { display: inline-block;} /* Hides from IE-mac \*/ * html .clearFloat { height: 1%;} .clearFloat { display: block;} /* End hide from IE-mac */ /******************************************************************************** FOOTER ********************************************************************************/ #geoLinkListTable, #top_cities, #localCitiesTable, #letter_cities { width: 100%;} #top_cities td, #localCitiesTable td, #letter_cities td { width: 25%;} #geoLinkListTable a, #top_cities a, #localCitiesTable a, #letter_cities a { line-height: 2;}