/* CSS Document * * @developer: Jake Plummer * @designer: Jake Mize * @date: 12/2/2009 * @desc: Miracle-Ear Website Styles */ /******************************************************************************** RESETS ********************************************************************************/ body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, label, p, strong, em, table, td { margin: 0; padding: 0;} ul, ol { list-style: none;} h1, h2, h3, h4, h5, h6 { font-size: 100%;} img { border: 0;} * { vertical-align: baseline;} /******************************************************************************** GLOBAL STYLES ********************************************************************************/ html { background: #ffffff url(/images/body-bg.png) repeat-x;} body { background: url(/images/body-bg-shadow.png) no-repeat center top; font-family: Verdana, Geneva, sans-serif;} h1 { font-weight: normal; font-size: 23px; line-height: 25px; color: #075356; margin-bottom: 15px;} h2 { font-weight: normal; font-size: 19px; line-height: 21px; color: #088f94; margin-bottom: 10px;} h3 { font-weight: bold; font-size: 15px; line-height: 19px; margin-bottom: 5px;} a { color: #0b7c80; text-decoration: underline;} a:hover { text-decoration: none;} p { margin-bottom: 1.25em;} .float-left { float: left; display: inline; margin: 0 15px 15px 0;} .float-right { float: right; display: inline; margin: 0 0 15px 10px;} .image-stroke { border: solid 1px #dddddd;} .clear { clear: both;} .clear-fix {display: block; height: 1px; font-size: 1px; line-height: 1px; clear: both;} sup { font-size: 50%; height: 0; line-height: 1; position: relative; left: 2px; top: -5px; vertical-align: baseline !important; vertical-align: bottom;} /* colors */ .red { color: #940808;} /******************************************************************************** TEST LETTER 106 ********************************************************************************/ #test-letter { font-size: 13px; line-height: 21px; width: 960px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 10px 0 0; background: #ffffff;} #test-letter h1 { font-size: 40px; line-height: 36px; font-weight: bold;} #test-letter h1 span { font-size: 17px; font-weight: bold;} #test-letter h1 span.sub { font-size: 15px; margin: -13px 0 0; display: block; font-weight: normal;} #test-letter ul { list-style: disc; margin: 0 0 1.25em 35px;} #test-letter li { margin: 0 0 10px;} #test-letter .legal { font-size: 9px; line-height: 13px; margin-top: 10px;} /******************************************************************************** WRAPPERS ********************************************************************************/ #wrapper { width: 960px; margin: auto;} #left-column { float: left; display: inline; width: 690px;} #right-column { float: right; display: inline; background: url(/images/sidebar-top.png) no-repeat left top; width: 270px; padding-top: 30px;} /******************************************************************************** HEADER CONTENT ********************************************************************************/ #logo-phone-adjuster { width: 960px; height: 113px; position: relative;} #logo { float: left; display: inline;} #header-phone { float: left; display: inline; font-size: 14px; color: #0b7c80; text-align: center; padding: 40px 20px 0;} #header-phone .phone { font-weight: bold; font-size: 36px; color: #940808;} #font-adjuster { float: left; display: inline; background: url(/images/font-adjuster-bg.png) no-repeat; width: 254px; height: 60px; padding: 0 15px; position: absolute; right: -5px; top: 0;} #font-adjuster .header { font-size: 11px; color: #0b7c80; position: relative; left: 0; top: -7px;} #font-adjuster #smaller { position: relative; left: 5px; top: 0;} #font-adjuster #default { position: relative; left: 5px; top: 3px;} #font-adjuster #larger { position: relative; left: 5px; top: 5px;} #font-adjuster #promo-code { width: 195px; font-size: 15px; color: #7F2104; text-align: center; position: absolute; right: 10px; top: 55px;} #font-adjuster #promo-code div { background: url(/images/me_promo_bg.gif) repeat-x bottom #66A6AE; color: #ffffff; padding: 3px 10px; font-weight: bold; font-size: 18px; border: 1px solid #457980; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 175px; text-align: center; float: right; text-shadow: 1px 1px 1px #457980; } /******************************************************************************** MAIN NAV ********************************************************************************/ #main-nav { background: url(/images/main-nav-bg.png) no-repeat; width: 690px; height: 47px;} #main-nav ul { padding-left: 5px;} #main-nav li { float: left; font-size: 14px; line-height: 47px; padding-right: 2px;} #main-nav .divider { width: 1px; height: 39px; background: url(/images/main-nav-divider.png) no-repeat left 4px;} #main-nav a { color: #ffffff; text-decoration: none; padding: 5px;} #main-nav a:hover, #main-nav #active a { background: #075356; color: #ffffff;} /******************************************************************************** MAIN NAV - for experiences including the about us page or additional links ********************************************************************************/ #main-nav-long { background: url(/images/main-nav-bg.png) no-repeat; width: 690px; height: 47px;} #main-nav-long ul { padding-left: 5px;} #main-nav-long li { float: left; font-size: 13px; line-height: 47px; padding-right: 2px;} #main-nav-long .divider { width: 1px; height: 39px; background: url(/images/main-nav-divider.png) no-repeat left 4px;} #main-nav-long a { color: #ffffff; text-decoration: none; padding: 4px;} #main-nav-long a:hover, #main-nav-long #active a { background: #075356; color: #ffffff;} /******************************************************************************** HERO IMAGE ********************************************************************************/ #hero-image { width: 690px; position: relative;} #hero-image-top { background: url(/images/hero-image-top.png) no-repeat; width: 690px; height: 10px; font-size: 10px; line-height: 10px;} #hero-image #location-search { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: absolute; left: 50px; bottom: 30px;} #hero-image #location-search .line-1 { font-size: 17px; color: #940808; padding-left: 85px;} #hero-image #location-search form { padding-left: 85px; margin: 10px 0;} #hero-image #location-search .line-2 { font-size: 17px; color: #0b7c80;} #hero-image .line-2 .phone { font-weight: bold; color: #940808;} #hero-image #location-search .line-3 { font-size: 14px; color: #0b7c80;} #hero-image a#hero-button-open-bte { background: url(/images/hero-button-open-bte.png) bottom no-repeat; display: inline-block; float: left; height: 124px; width: 235px;} #hero-image a#hero-button-bte { background: url(/images/hero-button-bte.png) bottom no-repeat; display: inline-block; float: left; height: 124px; width: 229px;} #hero-image a#hero-button-styles { background: url(/images/hero-button-styles.png) bottom no-repeat; display: inline-block; float: left; height: 124px; width: 226px;} #hero-image a:hover#hero-button-open-bte, #hero-image a:hover#hero-button-bte, #hero-image a:hover#hero-button-styles { background-position: top;} #hero-geo { margin: 0 0 0 -20px;} /******************************************************************************** LEFT-COLUMN CONTENT ********************************************************************************/ #content { width: 670px; font-size: 12px; line-height: 1.5em; color: #656565; padding: 10px 0 0 20px;} #content ul { list-style: disc; margin: 0 0 1.25em 25px;} #content ol { list-style: decimal; margin: 0 0 1.25em 25px;} #content .divider-dotted { background: url(/images/divider-dotted.png) repeat-x; width: 80%; height: 3px; font-size: 3px; line-height: 3px; margin: 0 auto 18px auto;} #content iframe { margin: 10px 0 0;} /* this is for the location map */ /* standard styles */ .quote { font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; width: 620px; position: relative;} .quote-link { font-size: 11px; position: absolute; right: 0; bottom: 0;} /* three boxes (on home page) */ #three-boxes { width: 680px; background: #f6f2ea; padding-bottom: 30px; margin: 10px 0 10px 10px; position: relative; clear: both;} #three-boxes .top-left { position: absolute; left: 0; top: 0;} /* corners */ #three-boxes .bottom-left { position: absolute; left: 0; bottom: 0;} /* corners */ #three-boxes .bottom-right { position: absolute; right: 0; bottom: 0;} /* corners */ #three-boxes a { text-decoration: none;} #box-1, #box-2, #box-3 { float: left; display: inline; width: 205px; font-size: 12px; color: #656565; padding: 10px; position: relative;} #box-1 p, #box-2 p, #box-3 p { line-height: 1.5em; margin-bottom: 2em;} #box-1 img, #box-2 img, #box-3 img { position: absolute; right: 10px; top: -5px;} #box-1 span, #box-2 span, #box-3 span { display: block; height: 75px; font-size: 15px; line-height: 18px; color: #088f94;} #learn-more { display: block; width: 201px; height: 36px; background: url(/images/learn-more.png) no-repeat; position: absolute; left: 10px; bottom: 10px;} #learn-more:hover { background-position: 0 -36px;} #reach-out { display: block; width: 201px; height: 36px; background: url(/images/reach-out.png) no-repeat; position: absolute; left: 236px; bottom: 10px;} #reach-out:hover { background-position: 0 -36px;} #get-started { display: block; width: 201px; height: 36px; background: url(/images/get-started.png) no-repeat; position: absolute; left: 462px; bottom: 10px;} #get-started:hover { background-position: 0 -36px;} #three-boxes .divider { float: left; background: url(/images/three-boxes-divider.png) no-repeat; width: 1px; height: 154px;} /* call to action (on home page) */ #home-cta { background: url(/images/home-cta.png) no-repeat; width: 680px; height: 98px; margin: 0 0 10px 10px; clear: both;} #home-cta .line-1 { display: block; font-size: 18px; color: #088f94; padding: 18px 0 0 180px;} #home-cta .line-2 { font-size: 13px; color: #656565; padding-left: 180px;} #home-cta .line-2 a { font-size: 11px; color: #0b7c80; text-decoration: underline;} #home-cta-bte-ear { background: url(/images/home-cta-bte-ear.png) no-repeat; width: 680px; height: 98px; margin: 0 0 10px 10px; clear: both;} #home-cta-bte-ear .line-1 { display: block; font-size: 16px; color: #088f94; padding: 18px 0 0 25px;} #home-cta-bte-ear .line-2 { font-size: 13px; color: #656565; padding: 10px 0 0 25px;} #home-cta-bte-ear .line-2 a { font-size: 13px; color: #0b7c80; text-decoration: underline;} /* collapsible boxes (on hearing aids page) */ .toggle-box { font-size: 12px; line-height: 1.25em; color: #0b7c80;} .toggle-box p { display: inline-block; float: left; margin: 0; width: 465px;} .toggle-box a { text-decoration: none; outline: none;} .toggle-box .teal-corners { background: #d0e5e7; padding: 8px; margin-bottom: 8px; position: relative;} .teal-corners .top-left { position: absolute; left: 0; top: 0;} /* corners */ .teal-corners .top-right { position: absolute; right: 0; top: 0;} /* corners */ .teal-corners .bottom-left { position: absolute; left: 0; bottom: 0;} /* corners */ .teal-corners .bottom-right { position: absolute; right: 0; bottom: 0;} /* corners */ .corners3 { background: #000000;} .toggle-box .float-left { margin: 0 20px 0 0;} .toggle-box span { display: block; font-size: 15px; line-height: 18px; color: #075356; margin-bottom: 5px;} .toggle-box a.more-less { display: inline; font-size: 12px; color: #0b7c80; text-decoration: underline;} .toggle-box a:hover.more-less { text-decoration: none;} .slickbox .left { float: left; width: 170px;} .slickbox .left p { padding-left: 20px; width: 150px;} .slickbox .left .left-cta { background: #940808; font-size: 14px; color: #ffffff; padding: 10px; margin: 20px 0 10px 0; } .slickbox .left .left-cta span { font-size: 12px; color: #ffffff;} .slickbox .left .left-cta .phone { font-weight: bold; font-size: 14px; line-height: 22px; color: #fff000;} .slickbox .right { float: left; width: 500px;} .slickbox ul { list-style: none !important;} .slickbox li { background: url(/images/list-dash.png) no-repeat left 55%; padding-left: 10px;} /* 5 reasons list (on why miracle-ear page) */ .five-reasons { margin-bottom: 10px; position: relative;} .five-reasons div { float: left; width: 170px; height: 67px; margin: 0 20px;} /* this is the image */ #reason-1 { background: url(/images/five-reasons.png) no-repeat left 0;} #reason-2 { background: url(/images/five-reasons.png) no-repeat left -67px;} #reason-3 { background: url(/images/five-reasons.png) no-repeat left -134px;} #reason-4 { background: url(/images/five-reasons.png) no-repeat left -201px;} #reason-5 { background: url(/images/five-reasons.png) no-repeat left -268px;} /* coupon */ #coupon { background: url(/images/miracle-ear-large-coupon.png) no-repeat; width: 670px; height: 350px; position: relative;} #coupon h2 { text-align: center;} #coupon .phone { font-size: 20px; color: #940808; position: absolute; left: 110px; top: 185px;} #coupon .coupon-code { position: absolute; left: 55px; top: 218px;} /* locations (hearing centers page) */ #map { width: 670px; height: 400px; margin-bottom: 10px;} #content #locations ul { list-style: none; margin: 15px 0 0;} #content #locations .location-list { float: left; display: inline; width: 33%;} /* inside-cta */ #inside-cta { font-size: 19px; line-height: 24px; color: #088f94; text-align: center; padding-top: 30px; clear: both;} #inside-cta span { display: block;} #inside-cta .phone { font-weight: bold; font-size: 30px; line-height: 38px; color: #940808;} /* inside-cta (hearing center locations page) */ #locations-cta #inside-cta { padding-top: 0; margin-bottom: 15px; clear: none;} /* find a center cta */ #find-a-center-cta { line-height: 1.05; color: #088f94; margin-top: 2em;} #find-a-center-cta span { display: block;} #find-a-center-cta .line-1 { font-size: 22px;} #find-a-center-cta .phone { font-weight: bold; font-size: 27px; line-height: 38px; color: #940808;} #find-a-center-cta .line-3 { font-size: 18px;} /* contact form (on contact page) */ #content #contact-form { background: url(/images/contact-form-bg.png) no-repeat center bottom; padding: 0 10px; margin-bottom: 10px;} #content form#contact { font-size: 12px; color: #01676b; padding: 0;} #content .form-error { width: 400px; background: #ff0000; border: 0; color: #ffffff; text-align: center; padding: 5px; margin: 0 0 15px;} #content form#contact label span { font-size: 75%; font-style: italic;} #content form#contact .two-column { float: left; width: 200px;} /* div that wraps .corners to create 2 column layout */ #content form#contact .two-column.margin-right { margin: 0 10px 0 0;} #content form#contact .corners { width: 188px; background: #ffffff; border: #b4d2d4 solid 1px; padding: 5px; margin: 2px 0 15px 0;} /* div that wraps input to create rounded corners */ #content form#contact input { width: 100%; background: #ffffff; border: 0; font-size: 14px;} #content form#contact .submit { display: block; width: 210px; height: 47px; background: url(/images/contact-form-submit.png) no-repeat; border: 0; padding: 0; margin: 0;} #content form#contact .submit:hover { background-position: 0 -47px; cursor: pointer;} #content form#contact #required { font-size: 75%; font-style: italic; margin: 5px 0 0;} /* location search errors */ #stateSelectError {background-color: red; color: white; display: none; margin: 5px 0; width: 220px; padding: 3px; text-align:center;} /* find a center state links */ #state_links {clear: both; color:#656565; font-size: 11px; text-align: center; letter-spacing: 0px;} #state_links a {color:#656565; text-decoration: none; white-space:nowrap; letter-spacing: 0px;} /* pricing pyramid on the pricing page */ #pricing-pyramid { display:block; margin: 10px auto; width: 469px;} /* content charts */ .content-chart { border-collapse: collapse; margin: 10px 0 15px; font-weight: bold;} .content-chart td { border: #656565 solid 1px; padding: 5px 8px; vertical-align: middle;} tr.headers { background: #e2f4f5; font-weight: bold;} tr.alt { background: #f5f5f5;} .content-chart a {} .content-chart .yes { font-weight: bold; font-size: 13px; color: #00ad2d;} .content-chart .no { font-weight: bold; font-size: 13px; color: #ad0f15;} .content-chart .check { width: 15px; height: 15px; background: url(/images/check.png) no-repeat; margin: auto;} .content-chart .x { display: block; padding: 5px 0; font-size: 20px; line-height: 1; color: #ad0f15; text-align: center;} .content-chart span { font-weight: normal; font-size: 10px;} /******************************************************************************** RIGHT COLUMN CONTENT ********************************************************************************/ /* call now box above lead gen */ #call-now-box { padding: 0 20px; position: relative;} #call-now-box p { font-size: 12px; line-height: 18px; color: #01676b; padding: 0 85px 5px 0;} #call-now-box span { font-size: 17px; line-height: 25px; color: #940808; position: relative; z-index: 3;} #call-now-box .phone { font-weight: bold; font-size: 24px;} #call-now-box span.promo-code { color: #ffffff; background: #940808; padding: 2px 25px; margin-top: 5px; text-align: center; width: 230px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 15px; } #doctor-hottie { position: absolute; right: 0; top: -41px;} /* contact form */ #contact-form { background: url(/images/contact-form-bg.png) no-repeat center bottom; padding: 0 10px; margin-bottom: 10px;} form#contact { font-size: 12px; color: #01676b; padding: 20px 20px 10px;} .form-error { background: #ff0000; border: 0; color: #ffffff; text-align: center; padding: 5px; margin: 0 0 15px;} form#contact label span { font-size: 75%; font-style: italic;} form#contact .corners { background: #ffffff; border: #b4d2d4 solid 1px; padding: 5px; margin: 2px 0 15px 0;} /* div that wraps input to create rounded corners */ form#contact input { width: 100%; background: #ffffff; border: 0; font-size: 14px;} form#contact .two-column { float: left; width: 100px;} /* div that wraps .corners to create 2 column layout */ form#contact .two-column.margin-right { margin: 0 10px 0 0;} form#contact .two-column .corners { width: 88px;} form#contact .submit { display: block; width: 210px; height: 47px; background: url(/images/contact-form-submit.png) no-repeat; border: 0; padding: 0; margin: 0;} form#contact .submit:hover { background-position: 0 -47px; cursor: pointer;} form#contact #required { font-size: 75%; font-style: italic; margin: 5px 0 0;} /* location search */ #location-search { background: #faf7f2; width: 230px; border: #e8dfd1 solid 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 10px; margin: 10px auto;} #contact-page #location-search { margin: 0 auto 10px;} /* this overrides the top margin for the contact page because it is missing the contact form */ #location-search img { float: left; display: inline; margin: 10px 5px 10px 0;} #location-search .line-1 { font-size: 24px; line-height: 24px; color: #075356; clear: right;} #location-search form { margin: 15px 0 10px;} #location-search input, select { float: left; display: inline;} #location-search select, #content #location-form select { margin-right: 10px;} #location-search .submit, #content #location-form .submit { display: inline-block; background: url(/images/location-search-submit.png) no-repeat; width: 59px; height: 24px; border: 0; padding: 0; margin: 0; left: 0; top: -2px;} #location-search .submit:hover, #content #location .submit:hover { background-position: 0 -24px; cursor: pointer;} #location-search .line-2 { font-size: 17px; color: #0b7c80;} #location-search .line-2 .phone { font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 24px; line-height: 29px; color: #940808;} #location-search .line-3 { font-size: 14px; color: #0b7c80;} /* coupon link */ #coupon-link { margin: 0 0 10px 10px; width: 250px;} /* email us */ #email-us { padding: 0 20px; width: 230px;} #email-us p { font-size: 11px; color: #01676b;} form#email-form { font-size: 12px; color: #01676b;} form#email-form .corners { background: #ffffff; border: #b4d2d4 solid 1px; padding: 5px; margin: 2px 0 15px 0;} form#email-form input { width: 100%; background: #ffffff; border: 0; font-size: 14px;} form#email-form .submit { display: block; width: 196px; height: 37px; background: url(/images/email-submit.png) no-repeat; border: 0; padding: 0; margin: 0 auto;} form#email-form .submit:hover { background-position: 0 -37px; cursor: pointer;} /* testimonial box */ #testimonial-box { font-family: Georgia, "Times New Roman", Times, serif; padding: 0 10px; margin-top: 2em; width: 248px;} #testimonial-box .header { display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 20px; color: #0b7c80; padding: 0 10px; margin-bottom: 10px;} #testimonial-box .corners3 { background: #ffffff; border: #bfd9da solid 1px; padding: 15px; position: relative;} #testimonial-box p { font-style: italic; font-size: 12px; line-height: 18px; color: #656565; zoom: 1;} #testimonial-box img { position: absolute; right: 14px; bottom: -19px;} #testimonial-box .customer { font-style: italic; font-weight: bold; font-size: 13px; color: #656565; padding: 0 10px;} /******************************************************************************** FOOTER ********************************************************************************/ #footer { clear: both; width: 960px; font-size: 11px; line-height: 18px; color: #656565; text-align: center; padding: 25px 0 35px;} #footer p { margin-bottom: 0;} #footer .legal { font-size: 9px; line-height: 11px; margin-top: 10px;} #footer a { color: #656565; text-decoration: none; margin-bottom: 5px;} #footer a:hover { text-decoration: underline;} /******************************************************************************** CLEARING ELEMENTS THAT CONTAIN FLOATED ELEMENTS ********************************************************************************/ .clear-float:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clear-float { display: inline-block;} /* Hides from IE-mac \*/ * html .clear-float { height: 1%;} .clear-float { display: block;} /* End hide from IE-mac */ #_top_cities { width:100%; }