/* CSS Document */
/********************************************************************************
@author: Jake Plummer
@date: 9/29/09
********************************************************************************/
/********************************************************************************
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;}
sup, sub { position: relative; height: 0; font-size: 70%; line-height: 1; vertical-align: baseline !important; vertical-align: bottom;}
sup { bottom: .75ex !important; bottom: 1.25ex;}
sub { top: .5em;}
/********************************************************************************
GLOBAL STYLES
********************************************************************************/
body { background: #c8c4c2 url(/images/body-bg.png) repeat-x; font: normal normal 14px/150% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333;}
body#terms, body#visitor-agreement, body#privacy-policy { font-size: 12px;}
p { margin-bottom: 0.75em;}
.float-left { float: left;}
.float-right { float: right; margin: 0 0 1em 1em;}
.clear-both { clear: both; height: 1px; font-size: 1px; line-height: 1px;}
h1 sup { font-size: 60%;}
.red { color: #DF342B;}
.corners_10 { border-radius: 10px; -moz-border-radius: 10px;}
/* links */
/* headers */
h1 { font: normal bold 34px/105% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #446a94;}
h1 span { display: block; font-size: 27px; font-weight: normal; margin-top: -10px;}
h1.padding-bottom { padding-bottom: 15px;}
h2 { font: normal bold 22px/105% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #446a94; margin-top: 1em; padding-bottom:8px;}
h3 { font: normal bold 14px/105% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333; margin: 1em 0;}
h4 { font: normal bold 16px/105% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #446a94;}
/********************************************************************************
WRAPPERS
********************************************************************************/
#wrapper { width: 940px; margin: 1em auto 0 auto;}
#content-wrapper { background: #ffffff; width: 938px; padding: 0.75em 0 1em 0; border: #999591 solid 1px; border-style: none solid;}
#left-column { float: left; width: 675px; padding: 0 0 0 20px;}
#right-column { float: right; width: 205px; padding: 0 20px 0 0;}
#content-wrapper-bottom { width: 940px; height: 5px; background: url(/images/content-wrapper-bottom.png) no-repeat; clear: both;}
/********************************************************************************
HEADER
********************************************************************************/
#header { width: 940px; height: 419px; position: relative; font-size: 1px; line-height: 1px;} /* font-size and line-height must be applied for IE6 not to create a 2px space between #header and #content-wrapper */
#call-now-phone { width: 385px; font: normal normal 23px/100% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333; text-align: center; position: absolute; left: 0; top: 8px;}
#call-now-phone .phone { font-size: 29px; line-height: 29px; font-weight: bold; color: #DF342B;}
#call-now-phone .sub-head { display: block; font-size: 17px; line-height: 1.75;}
#call-now-phone .promo-code { display: block; background: #63b244; border: #138800 solid 1px; border-top: none; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; padding: 10px 25px; font-weight: bold; font-size: 16px; color: #ffffff; line-height: 13px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); position: absolute; left: 10px; top: 64px;}
#hero-zip-search { width: 360px; font: normal bold 12px/125% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333; text-align: left; position: absolute; left: 12px; top: 233px;}
.address_lookup { margin-top: 10px;}
.address_lookup .large { font-size: 18px; font-weight: bold; margin-bottom: 10px;}
.address_lookup label { float: left; margin: 0 5px 0 0; padding: 0 0 0 3px;}
.address_lookup input { display: block; width: 110px; font-size: 12px; font-weight: normal; text-align: left; padding: 6px 5px; margin: 0 0 8px -3px; border: #bebebe solid 1px;}
.address_lookup #Address { width: 190px;}
.address_lookup #City { width: 135px;}
.address_lookup #zip { width: 75px;}
.address_lookup .submit { float: left; display: block; background: url(/images/hero-zip-search-submit.png) no-repeat; width: 134px; height: 29px; padding: 0; margin: 0; border: none; cursor: pointer;}
.address_lookup .submit:hover { background-position: 0 -29px;}
.submit:hover { background-position: 0 -29px;}
.address_lookup .errors { clear: both; width: 353px; margin: 5px 0 0; background: #fe0000; font-weight: bold; font-size: 12px; line-height: 25px; color: #ffffff; text-align: center;}
#home_link { background:url(#) 0 0 no-repeat; position:absolute; display:block; z-index:100; width:380px; height:150px; top:70px; left:0;}
#price_link { background:url(#) 0 0 no-repeat; position:absolute; display:block; z-index:100; width:550px; height:337px; top:0; left:380px;}
/********************************************************************************
MAIN NAV
********************************************************************************/
#main-nav { position: absolute; right: 15px; top: 362px;} /* this is positioned relative to #header */
#main-nav ul { list-style: none;}
#main-nav li { float: left; padding-right: 7px; margin-right: 7px;}
#main-nav li.last { padding: 0; margin: 0;}
#main-nav li.nav-divider { background: url(/images/nav-divider.png) no-repeat; width: 2px; height: 48px;}
#main-nav a { display: block; font: normal normal 19px/47px Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333; text-decoration: none; text-shadow:0 1px #DDDDDD;}
#main-nav a:hover { color: #446a94;}
#main-nav li#active a { color: #446a94;}
/********************************************************************************
COUNTDOWN BANNER
********************************************************************************/
#countdown_banner { width: 898px; background: #bf0000; border: #590000 solid 1px; box-shadow: 0 0 30px #222222 inset; -moz-box-shadow: 0 0 30px #555555 inset; margin: 0 auto 20px; padding: 15px 0; text-align: center; text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.5);}
#countdown_banner h2 { margin: 0 0 15px; padding: 0; font-size: 30px; color: #ffffff; line-height: 1.05;}
#countdown_banner h3 { margin: 0; font-size: 22px; color: #ffffff;}
#countdown_banner .highlight { color: #fff000;}
#countdown_banner .phone { width: 60%; margin: -15px auto 45px; font-size: 36px; border-bottom: #ffffff solid 2px; color: #000000;} /* not using right now */
#countdown_banner .phone span { padding: 3px 15px; background: #ffffff; border: #bf0000 solid 5px; position: relative; top: 20px;} /* not using right now */
#countdown_banner .time { padding: 3px 10px; background: #ffffff; border: #000000 solid 1px; border-radius: 5px; -moz-border-radius: 5px; color: #000000; text-shadow: none;}
/********************************************************************************
LEFT-COLUMN CONTENT
********************************************************************************/
/* general typography and everything else that doesn't fit into a specific category */
.divider-line { background: url(/images/divider-line.png) no-repeat; width: 675px; height: 14px; margin-bottom: 5px;}
#terms ul, #visitor-agreement ul, #privacy-policy ul { list-style: disc; margin: 0 0 0.75em 35px}
ul.arrow { font-size: 14px; margin: 0 0 0.75em 15px;}
ul.arrow li { background: url(/images/list-arrow.gif) no-repeat left 50%; padding-left: 15px;}
ul.arrow li.top { background: url(/images/list-arrow.gif) no-repeat left 2%;}
ul.content-list { margin-top: -10px;} /* this pulls the list up to compensate for the extra space between the and the
due to the margin-bottom on the */
a.coverage-map { display: block; width: 575px; border: #446a94 solid 3px; margin: auto; margin-bottom:20px;}
.callout { background: #f2f2f2; font-size: 12px; border: #bfbfbf solid 1px; padding: 15px; margin-bottom: 1em;}
.callout.red.big { background: #fe0000; font-size: 18px; line-height: 1.25; color: #ffffff; text-align: center; border: none;}
#service-available-big { margin-bottom: 10px;}
ol.numbers li{list-style: decimal outside none; margin-left: 20px; margin-top: 10px;}
a{color:#446A94;}
a:hover{color:#328B32;}
/* content box */
.content-box { width: 675px; background: url(/images/content-box-repeat.png) repeat-y; margin-bottom: 0.75em;}
.content-box-top { background: url(/images/content-box-top.png) no-repeat; width: 665px; height: 39px; font: normal normal 24px/39px Arial, "Helvetica Neue", Helvetica, sans-serif; color: #446a94; padding-left: 10px;}
.content-box-top .green { color: #328b32;}
.content-box-top .location { font-size: 14px;}
.content-box p { float: right; width: 58%; font-size: 12px; line-height: 150%; padding: 1em; margin: 0;}
.content-box img.float-left { float: left; margin: 1.75em 1em 0 3em;}
.content-box p.float-left { float: left; width: 251px; font-size: 14px; line-height: 16px; color: #446a94; text-align: center; padding: 5px 0 0 0;}
.content-box p.float-left img { padding-bottom: 2px;}
.content-box ul.arrow { float: right; width: 414px; padding: 10px 10px 0 0; font-size: 14px; margin: 0;}
.content-box li { background: url(/images/list-arrow.gif) no-repeat left 50%; line-height: 30px; padding-left: 15px; margin-left: 10px;}
.content-box ul.arrow li { background-position: 0 10%; line-height: 1.25; padding-bottom: 8px; margin-bottom: 8px; border-bottom: #b5b5b5 solid 1px;}
.content-box ul.arrow .last { border: 0; margin-bottom: 0;}
.content-box ul.arrow .header { background: none; margin: 0 0 8px; padding: 0 0 0 10px; border: 0; font-size: 14px;}
.content-box .last { line-height: 26px; border: 0;}
.content-box-bottom { background: url(/images/content-box-bottom.png) no-repeat; width: 675px; height: 12px; font-size: 1px; line-height: 1px; clear: both;} /* has a gray stripe within the image to complete the bottom of the
background image above */
.content-box-bottom-2 { background: url(/images/content-box-bottom-2.png) no-repeat; width: 675px; height: 12px; font-size: 1px; line-height: 1px; clear: both;} /* no gray stripe */
.content-box p#no-arrow { float: right; background: url(/images/content-box-no-arrow.jpg) no-repeat; width: 396px; font-size: 14px; margin: 0;}
#left-column ol{color:#575757; font-size:14px; line-height:20px; list-style:decimal outside none; margin:10px 0 10px 35px;
}
#left-column ol li{margin-bottom: 10px;}
/* call-to-action box */
#cta-box { clear: both; background: url(/images/cta-bg.png) no-repeat; width: 675px; height: 75px; text-align: center;}
#cta-box .small { display: block; font-size: 17px; line-height: 30px; padding-top: 2px;}
#cta-box sup { font-size: 50%;}
#cta-box .large { font-size: 34px; text-shadow:0 1px #DDDDDD; color:#DF342B; font-weight:bold;}
/* deals chart on pricing page */
table#deals-chart-headers { background: url(/images/content-box-top.png) no-repeat; font: normal bold 14px/100% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #446a94;}
#deals-chart-bg-repeat { background: url(/images/deals-chart-repeat.gif) repeat-y; margin: 0 0 1em;}
#deals-chart-gradient { background: url(/images/deals-chart-gradient.png) repeat-y 224px 0;} /* the left position must be equal to the width of the 1st td */
table.deals-chart { background: url(/images/deals-chart-bottom.gif) no-repeat left bottom; font: normal normal 12px/135% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333; border-collapse: collapse;}
.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;}
/* cell borders */
.deals-chart td { border: #999591 solid 1px; padding: 10px 0;}
.deals-chart .col-1 { padding: 10px 5px;}
td.border-left { border-style: none none none solid;}
td.border-right { border-style: none solid none none;}
td.border-bottom { border-style: none none solid none;}
td.border-right-bottom { border-style: none solid solid none;}
td.border-left-right { border-style: none solid;}
td.border-left-right-bottom { border-style: none solid solid solid;}
td.border-none { border-style: none;}
/* best offer row */
.deals-chart tr#best-offer-top td, .deals-chart tr#best-offer-bottom td, .deals-chart tr#best-offer td { padding: 0; border: 0;}
.deals-chart tr#best-offer .col-2, .deals-chart tr#best-offer .col-3 { background: #ffffff;}
/* deals typography */
.deals-chart p { margin-bottom: 0;}
.deals-chart ul { font-size: 12px; line-height: 14px; margin: 0 15px;}
.deals-chart h3 { margin: 0 0 10px; font-weight: bold; font-size: 15px; line-height: 1.25; color: #328b32;}
.deals-chart .blue { font-size: 13px; font-weight: normal; color: #446a94;}
.col-1 .green-big { font-size: 18px; line-height: 18px; font-weight: bold; color: #328b32; margin-bottom: 5px;}
.col-1 .small { font-size: 10px;}
.col-1 img { margin-bottom: 5px;}
.col-3 .small { font-size: 10px; line-height: 12px;}
.col-3 .green-small { font-size: 14px; color: #328b32; margin: -5px 0 5px 0;}
.col-3 .green-big { font-size: 36px; line-height: 36px; font-weight: bold; color: #328b32;}
.col-3 .green-big span { font-weight: normal; position: relative; top: -10px; line-height: 14px;}
.col-4 .dollar-sign { font-size: 24px; position: relative; top: -15px;}
.col-4 .price { font-size: 48px; line-height: 48px; font-weight: bold; color: #328b32;}
.col-4 .price.slashed { color: #333333;}
.col-4 .per-month { font-size: 24px; line-height: 24px; color: #333333; position: relative; top: -15px;}
.col-4 .promo { font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 10px;}
.col-4 .instructions { padding: 0 10px; font-size: 13px; font-weight: bold; color: #333333; text-align: center;} /* only shows up if zip code has not been entered yet */
.best { background: url(/images/popular-plan.png) no-repeat 50% top;}
/* zip search boxes */
.deals-chart input { width: 114px; font-size: 15px; font-weight: normal; text-align: left; padding: 2px; margin: 8px 0; border: #bebebe solid 1px;}
.deals-chart .submit { display: block; background: url(/images/chart-zip-search.png) no-repeat; width: 114px; height: 25px; padding: 0; margin: 0; border: none; text-decoration:none;}
.deals-chart .submit:hover { background-position: 0 -25px;}
/* horizontal out of service form */
#horizontal-form { background: #d1ccc9; padding: 10px 15px 15px; border: #bbbbbb solid 1px;}
#horizontal-form label { float: left; display: block; font-size: 13px; font-weight: normal; color: #000000; padding-left: 3px;}
#horizontal-form label span { font-size: 80%; line-height: 1;}
#horizontal-form input { width: 631px; padding: 5px; font-size: 13px; font-weight: normal; border: #000000 solid 1px; margin: 2px 0 10px -3px;}
#horizontal-form .two-column { width: 304px; margin-right: 11px;}
#horizontal-form .three-column { width: 195px; margin-right: 10px;}
#horizontal-form #City, #horizontal-form #State { width: 195px;}
#horizontal-form #Email { width: 304px;}
#horizontal-form br.clearfix { height: 1px; font-size: 1px; line-height: 1px; margin: 0; padding: 0; clear: both;}
#horizontal-form .submit { display: block; background: url(/images/contact-me-button.png) no-repeat; width: 174px; height: 34px; padding: 0; margin: 5px 0 0; border: 0; clear: both;}
#horizontal-form .submit:hover { background-position: 0 -34px;}
#horizontal-form .form-error { background: #fe0000; font-size: 14px; line-height: 1; color: #ffffff; text-align: center; padding: 8px 0; margin: 5px 0 10px;}
.spot-product{width:685px;}
.spot-product h3{float:left; width:300px; display: none;}
.spot-product img{float: left;}
.spot-product ul{float: left; margin-top: 90px; margin-left: 0px;}
/* full address lookup */
.address_lookup_container { background: #dddbda; margin: 1em 0; padding: 15px 15px 20px; border: #a29e9c solid 1px; border-radius: 5px; -moz-border-radius: 5px;}
.address_lookup_container h3 { float: left; margin: 20px 0 0; line-height: 1.5;}
.address_lookup_container form { float: right; margin: 0;}
.address_lookup_container label { font-size: 12px;}
#State, #zip { margin-bottom: 0;}
/* early termination chart on terms page */
#cancellation { width: 98%; padding: 0; background: #ffffff;}
#cancellation_chart { margin: 15px 0 0; font-size: 11px; line-height: 1.5; text-align: left; border-collapse: collapse;}
#cancellation_chart th { padding: 0 0 0 10px; background: #c5c5c5; border: #b5b5b5 solid 1px; font-size: 14px; line-height: 28px; letter-spacing: 0.1;}
#cancellation_chart td { background: #f2f2f2; padding: 5px 10px; vertical-align: top; border: #b5b5b5 solid 1px;}
#cancellation_chart .section_title { background: #e5e5e5; font-weight: bold;}
/********************************************************************************
RIGHT-COLUMN CONTENT
********************************************************************************/
/* general typography and everything else that doesn't fit into a specific category */
.header { display: block; font: normal bold 32px/33px Arial, "Helvetica Neue", Helvetica, sans-serif; color: #446a94; text-decoration: none; margin-bottom: 5px;}
/* vertical lead-gen form */
#vertical-form-wrapper { background: #e1dfdc url(/images/sidebar-box-repeat.png) repeat-y; width: 205px; margin-bottom: 0.75em;}
#vertical-form-content { background: url(/images/sidebar-box-top-headset.png) no-repeat; font: normal normal 12px/115% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333; padding: 10px;}
#vertical-form-content a { color: #446a94; text-decoration: none;}
#vertical-form-content .phone { display: block; font: normal bold 25px/30px Arial, "Helvetica Neue", Helvetica, sans-serif; color: #DF342B; margin-bottom: 5px;}
#vertical-form-content .promo-code { display: block; background: #446A94; border: #ffffff solid 1px; margin-bottom: 1em; font-size: 16px; line-height: 30px; 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;}
#vertical-form-content p span { font-size: 14px; font-weight: bold;}
#vertical-form { margin-top: 10px;}
#vertical-form .form-error { background: #eeeeee; color: #fe0000; padding: 5px; margin-bottom: 1em; border: #bebebe solid 1px;}
#vertical-form label { font-size: 12px; font-weight: bold;}
#vertical-form label span { font-size: 10px; font-weight: normal; font-style: italic;}
#vertical-form input { width: 173px; padding: 5px; margin: 2px 0 10px 0; border: #515151 solid 1px;}
#vertical-form .submit { text-decoration:none; display: block; background: url(/images/lead-gen-submit.png) no-repeat; width: 154px; height: 33px; padding: 0; margin: 0 auto 10px auto; border: 0;}
#vertical-form .submit:hover { background-position: 0 -33px;}
#required-field { font-size: 10px;}
#vertical-form-bottom { background: url(/images/sidebar-box-bottom.png) no-repeat left bottom;}
/* sidebar box */
.sidebar-box-wrapper { background: #e1dfdc url(/images/sidebar-box-repeat.png) repeat-y; margin-bottom: 0.75em;}
.sidebar-box-content { background: url(/images/sidebar-box-top.png) no-repeat; font: normal normal 12px/115% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333; padding: 10px;}
.sub-header { display: block; font-size: 20px; line-height: 100%; margin-bottom: 0.75em;}
.content-header { font-size: 20px; color: #446a94;}
.sidebar-box-content ul.arrow { margin: 0.75em 0 1em 0;}
.sidebar-box-content ul.arrow li { background: url(/images/list-arrow.gif) no-repeat 0 5%;}
.sidebar-box-bottom { background: url(/images/sidebar-box-bottom.png) no-repeat left bottom;}
/********************************************************************************
FOOTER
********************************************************************************/
#footer { width: 940px; clear: both; padding: 0.5em 0 2em; text-align: center;}
#footer p { margin: 0 0 5px; font: normal normal 11px/100% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333333;}
#footer a { color: #333333; text-decoration: none;}
#footer a:hover { text-decoration: underline;}
#footer .legal { font-size: 9px; line-height: 10px; text-align: left;}
#footer sup { bottom: .5ex; font-size: 80%;}
/********************************************************************************
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 */
/********************************************************************************
GEONATOR
********************************************************************************/
#geo_breadcrumbs { margin: 0 0 10px; font-size: 11px;}
ul#state-list { float: left; list-style: none; margin: 0 0 20px;}
ul#state-list li { float: left; width: 134px; border-bottom: #ffffff solid 1px; border-right: #ffffff solid 1px; padding: 0; text-align: center;}
ul#state-list a { display: block; width: 133px; background: #f2f2f2; border-bottom: #b0b0b0 solid 1px; border-right: #b0b0b0 solid 1px; font-size: 11px; line-height: 30px; text-decoration: none;}
ul#state-list a:hover { background: #e5e5e5; color: #333333;}
#city-container { width: 100%; height: 175px; background: #f2f2f2; border: #cccccc solid 1px; padding: 15px 0 10px; margin-bottom: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
#city-container .instructions { display: block; padding: 0 15px 5px 15px; font-weight: bold; font-size: 18px; line-height: 1; color: #555555;}
ul.cities { list-style: none !important; padding: 0 15px !important; margin: 0 !important;}
ul.cities li { float: left; display: block; width: 33%; padding: 0; line-height: 2em;}
ul.cities .city_coverage_label { float: none; width: 100%; border-bottom: #555555 solid 1px; padding-bottom: 4px; margin-bottom: 10px; font-weight: bold; font-size: 18px; line-height: 1; color: #555555;}
ul.cities span.coming-soon { padding-left: 5px; font-size: 10px; line-height: 1; color: #da0000;}
ul.cities span.now-available { padding-left: 5px; font-size: 10px; line-height: 1; color: #006acd;}
ul.cities a { font-size: 12px; color: #555555;}
#localCitiesTable { margin: 0 0 20px; border-collapse: collapse;}
#localCitiesTable td { float: left; width: 167px; border-bottom: #ffffff solid 1px; border-right: #ffffff solid 1px; padding: 0; text-align: center;}
#localCitiesTable td a { display: block; width: 166px; background: #f2f2f2; border-bottom: #b0b0b0 solid 1px; border-right: #b0b0b0 solid 1px; font-size: 11px; line-height: 30px; text-decoration: none;}
#localCitiesTable td a:hover { background: #e5e5e5; color: #333333;}
#geoCityMap { display: block; margin: 0 auto 20px;}