/* CSS Document */ /******************************************************************************** RESETS ********************************************************************************/ body, div, ul, ol, li, h1, h2, h2, 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%; margin: 0;} img { border: 0;} sup, sub { position: relative; height: 0; line-height: 1; vertical-align: baseline !important; vertical-align: bottom;} sup { bottom: 1ex;} sub { top: .5ex;} /******************************************************************************** GLOBAL STYLES ********************************************************************************/ a { color: #65b445; text-decoration: underline;} a:hover { text-decoration: none;} a.no-link { color: #000000; text-decoration: none;} a.no-underline { text-decoration: none;} hr { height: 1px; line-height: 1px; border:none; border-bottom:solid #000000 1px; width:80%; margin: 10px auto; text-align: center;} h1 {font-size: 26px; line-height: 105%; font-weight:bold; color: #000000; margin-bottom: 15px;} h1 span { font-size: 23px;} h2 { font-size:19px; line-height: 105%; font-weight:bold; color: #000000; margin: 1em 0 5px;} h3 { font-size: 16px; line-height: 135%; font-weight: bold; color: #c70000; text-align: center; clear: both;} h4 { font-size: 14px; font-weight: bold; color: #000000; margin-bottom: 5px;} .float-right { float: right; margin: 0 0 1em 1em;} .float-left { float: left; margin: 0 1em 0 1em;} br.clearfix { height: 1px; font-size: 1px; line-height: 1px; clear: both;} .black { color: #000000;} /******************************************************************************** BACKGROUNDS ********************************************************************************/ body { background:url(/images/main-repeat-x.jpg) repeat-x #d8edce; font-family:Arial, Helvetica, sans-serif;} /******************************************************************************** WRAPPERS ********************************************************************************/ #large-wrapper { background:url(/images/main-bg.jpg) no-repeat top center; min-width:960px;} #medium-wrapper { margin:auto; width:960px; background:#000000;} #small-wrapper { margin:auto; width:940px; position:relative;} #left-column { width:680px; float:left;} #content-wrapper { width:680px; background:#ffffff; margin:10px 0 0 0;} #right-column { width:250px; float:right; position: relative; padding-top: 34px;} /******************************************************************************** HEADER ********************************************************************************/ #header { display:block; width:680px;} #logo { height:110px; width:240px; float:left;} #site-phone {font-size:25px; color:#8c9793; float:right; padding:30px 30px 0 0;} #site-phone span {font-size:37px; color:#abd287; font-weight:bold;} #site-phone p#promo {font-size:16px; color:8c9793; width:375px; text-align:center;} /******************************************************************************** MAIN NAV ********************************************************************************/ #main-nav { background:url(/images/main-nav.jpg) no-repeat top left; height: 34px; margin:0 0 0 20px; width:639px; font-family:Arial, Helvetica, sans-serif; font-size:15px;} #main-nav ul { margin:auto; width:550px;} .nav-divider { height:34px; width:34px; background:url(/images/nav-divider.jpg) no-repeat;} #main-nav ul li {float:left; display:block;} #main-nav ul li a {color:#000000; text-decoration: none; padding:8px 0 0 0; display:block;} #main-nav ul li a:hover {text-decoration: none; color:#3eaa48;} #main-nav ul li#active a {text-decoration: none; color:#3eaa48;} /******************************************************************************** LEFT COLUMN ITEMS ********************************************************************************/ #hero-image { width: 680px; position: relative;} #hero-zip-search { font: normal normal 13px/175% Helvetica, Arial, sans-serif; color: #000000; text-align: left; position: absolute; left: 20px; bottom: 10px;} #hero-zip-search form { margin-top: 5px;} #hero-zip-search #large-text { font-size: 18px; font-weight: bold;} #hero-zip-search input { float: left; width: 147px; height: 15px; font-size: 15px; text-align: left; padding: 8px 0 10px 8px; margin-right: 5px; border: #000000 solid 1px;} #hero-zip-search .submit { float: left; display: block; width: 132px; height: 35px; background: url(/images/hero-zip-search-submit.png) no-repeat; padding: 0; margin: 0; border: none;} #hero-zip-search .submit:hover { background: url(/images/hero-zip-search-submit-hover.png) no-repeat;} #hero-zip-search #center { width: 294px;} #content { font: normal normal 13px/150% Helvetica, Arial, Helvetica, sans-serif; color: #555555; padding: 25px;} #content p { margin-bottom: 1em;} #content ul { list-style-type: disc; margin: 1em 0 1em 35px;} #content ol { list-style-type: decimal; margin: 1em 0 1em 35px;} #content .two-columns { float: left; width: 50%;} #content hr { width: 100%; height: 1px; line-height: 1px; border: none; border-top: #e3e3e3 solid 1px; margin: 0 auto 1em; text-align: center;} #content img.border { background: #e2edd5; border: #65b445 solid 2px; padding: 2px; margin-top: 4px;} #content img.coverage-map { background: #ffffff; border: #65b445 solid 2px; padding: 2px; margin-bottom: 1em;} #content .callout { background: #f2f2f2; font-size: 12px; border: #bfbfbf solid 1px; padding: 15px; margin-bottom: 1em;} /* home page list with icons */ ul#mobile-home-voice { margin: 1em 0; padding: 0; list-style: none;} li#mobile { background: url(/images/globe-icon-2.png) no-repeat left 50%; padding: 5px 0 5px 70px; margin: 0 0 15px;} li#home { background: url(/images/home-icon-2.png) no-repeat left 50%; padding: 5px 0 5px 70px; margin: 0 0 15px;} li#voice { background: url(/images/phone-icon-2.png) no-repeat left 50%; padding: 5px 0 5px 70px;} /* cool way to do columns using lists instead of tables (margin-left pushes the column out, negative margin on .top pulls the column up) */ #content .cities ul { float: left; list-style: none; margin: 0 0 0 0;} #content .cities ul.left-margin { margin-left: 110px;} #content .cities li { line-height: 2em; padding-left: 5px;} #content .cities li.col2 { margin-left: 125px;} /* this creates the "column" */ #content .cities li.col3 { margin-left: 300px;} #content .cities li.top4 { margin-top: -8em;} /* for lists with 4 rows */ #content .cities li.top5 { margin-top: -10em;} /* for lists with 5 rows */ #content .cities li.top6 { margin-top: -12em;} /* for lists with 6 rows */ #content .cities li.top7 { margin-top: -14em;} /* for lists with 7 rows */ #content .cities li.top8 { margin-top: -16em;} /* for lists with 8 rows */ #content .cities a { position: relative;} /* this enables all links to be clickable */ #content .cities li span { font-weight: bold; color: #dd0000; padding-left: 6px; font-size: 80%;} #content .cities .soon span {color: #01559a;} #content .cities li.title { font-size: 13px; line-height: 1em; font-weight: bold; padding: 10px 0 0 0; background: none;} /* deals chart */ #deals-chart { background: #e3e3e3; font-size: 12px; margin: 1em 0;} #deals-chart td div { width: 100%; position: relative;} /* this is so that we can position the strike through image absolutely */ #deals-chart .strike-through { position: absolute; left: 30px; top: 3px;} #deals-chart td#zip-search { padding: 10px;} #deals-chart #best-offer { float: left; width: 60px; height: 60px; margin: -10px 0 0 -10px; position: absolute;} /* cell borders */ #deals-chart table td { padding: 10px; border: #ffffff solid 1px; border-style: none none solid none;} #deals-chart .border-right { border-right-style: solid;} /* cell corners */ #deals-chart .top-left { background: url(/images/top-left-corner.png) no-repeat left top;} #deals-chart .top-right { background: url(/images/top-right-corner.png) no-repeat right top;} #deals-chart .bottom-left { background: url(/images/bottom-left-corner.png) no-repeat left bottom;} #deals-chart .bottom-right { background: url(/images/bottom-right-corner.png) no-repeat right bottom;} /* deals typography */ #deals-chart-headers { font-size: 18px; font-weight: bold;} #deals-chart p { margin-bottom: 0;} #deals-chart h4 { color: #65B445;} #deals-chart ul { margin: 5px 0 0 15px;} #deals-chart .dollar-sign { font-size: 22px; position: relative; top: -13px;} #deals-chart .price { font-size: 42px; line-height: 42px; font-weight: bold; color: #65b445;} #deals-chart .price.slashed { color: #555555;} #deals-chart .per-month { font-size: 22px; color: #555555;} #deals-chart .promo { font-size: 14px; line-height: 20px;} #deals-chart .promo .price { color: #65b445;} #deals-chart .reminder { font-size:12px; font-weight:bold; line-height:14px;} /* zip lookup for charts page */ #content-zip-lookup { width: 610px; height:33px; position: relative;} #content-zip-lookup p { color:#000000; font-size: 14px; line-height: 16px; font-weight: bold; padding: 9px 0 0 15px; margin: 0;} #chart-zip-search-form { position: absolute; top:0; right: 15px;} #chart-zip-search-form input { float: left; width: 92px; -width: 87px; height: 15px; font-size: 15px; text-align: left; padding: 8px 0 8px 8px; margin-right: 5px; border: #000000 solid 1px;} #chart-zip-search-form .submit { float: left; display: block; background: url(/images/chart-button.jpg) no-repeat; width: 90px; height: 33px; padding: 0; margin: 0; border: 0;} /******************************************************************************** RIGHT COLUMN ITEMS ********************************************************************************/ #sidebar-grey { width:250px; background:#e3e3e3; padding: 15px 0;} #sidebar-grey .content { width:200px; padding:0 25px;} #sidebar-grey .content p { font-size:13px;} #headset-box { background:url(/images/headset-woman.jpg) no-repeat 140px 0px; width:200px; padding:15px 25px 5px 25px; margin: auto;} #headset-box hr { width: 200px; height: 1px; line-height: 1px; border: none; border-top: #000000 solid 1px; margin: auto;} #headset-box #call-now {font-size:33px; color:#37a848; font-weight:bold; font-family:Verdana, Geneva, sans-serif; line-height:30px; text-transform:uppercase;} #headset-box #be-online-tomorrow { background: #37A848; font-weight:bold; font-family:Verdana, Geneva, sans-serif; font-size:16px; color: #ffffff; text-align: center; padding: 5px; margin-top: 15px; border: #ffffff solid 1px;} #headset-box .phone { font-weight:bold; font-family:Verdana, Geneva, sans-serif; font-size:21px; color:#000000; margin:10px 0 5px 0; display:block;} #headset-box .promo-code { display: block; background: #555555; border: #ffffff solid 1px; font-size: 17px; line-height: 34px; color: #ffffff; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #lead-gen-form label { font-size: 12px; font-weight: bold;} #lead-gen-form label span { font-size: 10px; font-weight: normal; font-style: italic;} #lead-gen-form input { width: 188px; padding: 5px; margin: 2px 0 15px 0; border: #000000 solid 1px;} #lead-gen-form .submit { display: block; background: url(/images/button-call-me.png) no-repeat; width: 200px; height: 35px; padding: 0; margin: 0 0 10px 0; border: none;} #lead-gen-form .submit:hover { background: url(/images/button-call-me-hover.png) no-repeat;} #lead-gen-form .form-error { background: #eeeeee; font-size: 12px; color: #fe0000; padding: 5px; margin-bottom: 1em; border: #bebebe solid 1px;} #required-field { font-size: 10px;} /* availability box with zip search */ #availability-box-content { font: normal normal 12px/150% Helvetica, Arial, sans-serif; color: #ffffff; padding: 0 10px; margin: 0 0 10px 0; position: absolute; top: -60px;} #availability-box-content .formError { background: #d50000; font: normal bold 12px Arial, Helvetica, sans-serif; color: #ffffff; padding: 5px; text-align: center; margin-top: 5px; border: #000000 solid 1px;} #availability-box-content .green { color: #a4d65a;} #zip-search-form { margin-top: 5px;} #zip-search-form input { float: left; width: 82px; -width: 78px; height: 15px; font-size: 15px; text-align: left; padding: 8px 0 8px 8px; margin-right: 5px; border: #cce291 solid 1px;} #zip-search-form .submit { float: left; display: block; background: url(/images/button-check-now.png) no-repeat; width: 130px; height: 33px; padding: 0; margin: 0; border: 0;} #zip-search-form .submit:hover { background: url(/images/button-check-now-hover.png) no-repeat;} /* testimonial box */ #testimonial-box { width: 220px; font: normal normal 12px/150% Helvetica, Arial, sans-serif; font-style: italic; color: #ffffff; padding: 0 10px; margin-top: 20px;} #testimonial-box span { display: block; font-size: 19px; line-height: 19px; font-weight: bold; font-style: normal; color: #65b445; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #333333 solid 1px;} #testimonial-box p { margin-bottom: 1em;} #testimonial-box #customer { background: url(/images/testimonial-arrow.png) no-repeat left 45%; font-weight: bold; padding-left: 15px;} /******************************************************************************** FOOTER ********************************************************************************/ #footer-black { height:20px; width:960px; margin:0 auto 20px auto;} #footer { width: 960px; font: normal normal 12px/100% Helvetica, Arial, sans-serif; color: #000000; text-align: center; padding: 0 0 20px 0; margin: auto; clear: both;} #secondary-nav { margin-bottom: 10px;} #secondary-nav li { display: inline; padding: 0 5px; border-right: #000000 solid 1px;} #secondary-nav li#last { border: none;} #secondary-nav a { color: #000000; text-decoration: none;} #secondary-nav a:hover { text-decoration: underline;} #legal { font-size: 10px; line-height: 12px;} #footer sup { bottom: .5ex; font-size: 80%;} /******************************************************************************** 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 */