/* CSS Document */

/********************************************************************************
			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;}
table { border-collapse: collapse;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
img { border: 0;}
input { outline: none;}
sup, sub { position: relative; height: 0; line-height: 1; vertical-align: baseline !important; vertical-align: bottom;}
sup { bottom: .75ex;}
sub { top: .5ex;}

/********************************************************************************
			GLOBAL STYLES
********************************************************************************/

body { background: #ffffff url(/images/body-bg.png) repeat-x; font: normal normal 13px/150% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #818181;}
p { margin-bottom: 1.25em;}
h1 { font: normal normal 24px/105% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4b504e; margin: 0 0 10px;}
h2 { font: normal bold 19px/105% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #57ac2a; margin: 10px 0;}
	h2 sup { font-size: 75%;}
h3 { font: normal bold 16px/105% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #424242; margin: 0 0 10px;}
.relative { position: relative;}
.float-right { float:right;}
.float-left { float:left;}

/********************************************************************************
			WRAPPERS
********************************************************************************/

#wrapper { width: 960px; margin: auto; border-bottom: #cccccc solid 1px;}
#left-column { float: left; display: inline; width: 710px; margin-right: 20px;}
#right-column { float: right; width: 230px;}

/********************************************************************************
			HEADER
********************************************************************************/

#logo { float: left;}

/* -- main nav -- */
#main-nav { float: left; width: 720px; height: 114px;}
	#main-nav ul { font: normal normal 19px/115% "Helvetica Neue", Helvetica, Arial, sans-serif;}
		#main-nav li { float: left; display: block;}
			#main-nav a { display: block; color: #858f8b; text-decoration: none; text-align: center; padding: 55px 0 0; overflow: hidden;}
			#main-nav a:hover { color: #84c342;}
	/* setting up for image sprite */
	#main-nav a#home { width: 97px; height: 59px;}
	#main-nav a#what-is-clear { width: 174px; height: 59px;}
	#main-nav a#pricing { width: 99px; height: 59px;}
	#main-nav a#coverage { width: 125px; height: 59px;}
	#main-nav a#reviews { width: 115px; height: 59px;}
	#main-nav a#contact { width: 110px; height: 59px;}
	/* sprites - the thirst quencher */
	#main-nav li#active a#home { width: 97px; height: 59px; background: url(/images/nav-bg.png) no-repeat 0 0; color: #ffffff;}
	#main-nav li#active a#what-is-clear { width: 174px; height: 59px; background: url(/images/nav-bg.png) no-repeat -97px 0; color: #ffffff;}
	#main-nav li#active a#pricing { width: 99px; height: 59px; background: url(/images/nav-bg.png) no-repeat -271px 0; color: #ffffff;}
	#main-nav li#active a#coverage { width: 125px; height: 59px; background: url(/images/nav-bg.png) no-repeat -370px 0; color: #ffffff;}
	#main-nav li#active a#reviews { width: 115px; height: 59px; background: url(/images/nav-bg.png) no-repeat -495px 0; color: #ffffff;}
	#main-nav li#active a#contact { width: 110px; height: 59px; background: url(/images/nav-bg.png) no-repeat -610px 0; color: #ffffff;}

/********************************************************************************
			LEFT COLUMN CONTENT
********************************************************************************/

/* -- hero image, phone number and zip search -- */
#hero-image { width: 710px; position: relative;}
	/* phone number */
	#hero-phone { font: normal normal 18px/30px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #424242; text-align: center; position: absolute; right: 15px; top: 25px;}
		#hero-phone .phone { font-size: 30px; color: #c30000;}
		#hero-phone #promo { display: block; font-size: 12px; line-height: 12px;}
	/* zip search */
	#hero-zip-search { font: normal bold 12px/150% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #424242; position: absolute; left: 30px; bottom: 15px;}
		#hero-zip-search p { margin: 0 0 .75em 0;}
		#hero-zip-search span { font-size: 16px; font-weight: normal; color: #329d19;}
		#hero-zip-search .zip-search .input-corners { float: left; width: 88px; height: 21px; background: #ffffff; border: #ababab solid 1px; padding: 5px; margin: 0 10px 0 0;}
		#hero-zip-search .zip-search input { width: 100%; background: #ffffff; border: 0; font-size: 14px; padding-top: 2px;}
		#hero-zip-search .zip-search .submit { float: left; display: block; width: 140px; height: 33px; background: url(/images/hero-zip-search-submit.png) no-repeat; padding: 0; margin: 0;}
		#hero-zip-search .zip-search .submit:hover { background: url(/images/hero-zip-search-submit.png) no-repeat 0 -33px;}
		#hero-zip-search #service-available { margin-bottom: 10px;}
		
/* -- content -- */
#content { width: 710px; margin: 10px 0 0 0;}
#content ul { list-style: disc; margin: 0 0 1.25em 35px;}
	#content #simple { list-style: none; font-style: italic; font-size: 16px; font-weight: bold; color: #57ac2a;}
#content ol { list-style: decimal; margin: 0 0 1.25em 35px;}
#content a { color: #858f8b; text-decoration: underline;}
			#content a:hover { color: #84c342;}
.disclaimer { font-size: 9px;}
.callout-corners { background: #e7e7e7; font-size: 18px; line-height: 24px; font-weight: bold; text-align: center; padding: 10px; margin: 0 0 1em;}
	.callout-corners .phone { color: #c30000;}
.callout-corners.red { background: #fe0000; color: #ffffff;}
.not-available-corners { background: #c30000; font-size: 13px; line-height: 18px; font-weight: bold; color: #ffffff; text-align: center; padding: 10px; margin: 0 0 1em;}
.not-available-corners.big { font-size: 18px; line-height: 1.25;}
a.discreet-link { color:#818181; text-decoration:none;}
	
	/* quote box */
	.quote-corners.dark { background: #e7e7e7; font: italic normal 12px/135% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #424242; padding: 10px 30px 30px; margin: 0 0 20px; position: relative;}
	.quote-corners.light { background: #f1f1f1; font: italic normal 12px/135% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #424242; padding: 10px 30px 30px; margin: 0 0 20px; position: relative;}
		.quote-corners img { position: absolute; top: 5px;}
		.quote-corners img.left-quotation { left: 5px;}
		.quote-corners img.right-quotation { right: 5px;}
		.quote-corners p { width: 98%; margin: 0;}
		.quote-corners .customer-corners { width: 25%; height: 15px; background: #ffffff; font-style: normal; font-weight: bold; text-align: center; padding: 5px; position: absolute; right: 15px; bottom: -37px;}
		.quote-corners .medium { width: 40%;}
		.quote-corners .long { width: 60%;}
	
	/* cta */
	#cta { font: normal normal 18px/135% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #424242; clear: both; text-align:center;}
		#cta span { font-size: 25px; font-weight: bold;}
		#cta sup { font-size: 50%; bottom: 2ex;}
			#cta span .phone { color: #c30000;}
	
	/* deals chart */
	#deals-chart { background: #e7e7e7; font-size: 12px; line-height: 125%; margin-bottom: 1.25em;}
		#deals-chart p { margin: 0; padding: 10px;}
		#deals-chart p.chart-title { margin: 0; padding: 0; font-size:12px; line-height:15px;}
		#deals-chart .chart-title-icon { padding: 0 5px 0 0; float:left;}
		#deals-chart div p { padding: 0;}
		#deals-chart td { border:  #999 solid 1px; border-style: none none solid solid;}
		#deals-chart .col-1 { border-left: none;}
		#deals-chart .col-1-left-bottom { border-left: none; border-bottom: none;}
		#deals-chart .col-1-bottom { border-bottom: none;}
		#deals-chart .col-1-right-bottom { border-right: none; border-bottom: none;}
		#deals-chart .col-1-right { border-right: none;}
		#deals-chart .col-1-white { border: #ffffff solid 1px;}
		#deals-chart .col-none { border: #ffffff solid 1px;}
		/* corners */
		#deals-chart #top-left { background: #57ac2a url(/images/deals-top-left-corner.png) no-repeat left top;}
		#deals-chart #top-right { background: #57ac2a url(/images/deals-top-right-corner.png) no-repeat right top;}
		#deals-chart #bottom-left { background: url(/images/deals-bottom-left-corner.png) no-repeat left bottom;}
		#deals-chart #bottom-right { background: url(/images/deals-bottom-right-corner.png) no-repeat right bottom;}
		/* chart headers */
		#deals-chart #row-1 {}
			#deals-chart #row-1 td { color: #424242;}
		#deals-chart #row-1 { font-size: 13px; font-weight: bold; line-height: 135%; color: #424242;}
			#row-1 span { font-size: 10px;}
		/* zip search form */
		#deals-chart #row-2 td { background: #f1f1f3; padding: 10px;}
		#deals-chart #row-2 p { float: left; font-size: 16px; font-weight: bold;}
		#deals-chart .zip-search div { padding: 0;}
		#deals-chart .zip-search .input-corners { float: left; width: 88px; height: 21px; background: #ffffff; border: #ababab solid 1px; padding: 5px; margin: 0 10px 0 0;}
		#deals-chart .zip-search input { width: 100%; background: #ffffff; border: 0; font-size: 14px; padding-top: 2px;}
		#deals-chart .zip-search .submit { float: left; display: block; width: 140px; height: 33px; background: url(/images/hero-zip-search-submit.png) no-repeat; padding: 0; margin: 0;}
		#deals-chart .zip-search .submit:hover { background: url(/images/hero-zip-search-submit.png) no-repeat 0 -33px;}
		/* pricing cell */
		#deals-chart td div { width: 125px; padding: 10px; position: relative;} /* this is so that we can position the strike through image absolutely */
		#deals-chart .strike-through { position: absolute; left: 24px; top: 13px;}
		/* general typography */
		#deals-chart .col-1 { color: #424242; font-weight: bold; text-transform: capitalize;}
		#deals-chart .dollar-sign { font-size: 22px; position: relative; top: -13px;}
		#deals-chart .price { font-size: 42px; line-height: 42px; font-weight: bold; color: #57ac2a;}
		#deals-chart .price.slashed { color: #555555;}
		#deals-chart .per-month { font-size: 22px; color: #555555;}
		#deals-chart .promo { font-size: 12px; line-height: 16px; color: #424242;}
			#deals-chart .promo .price { color: #57ac2a;}
		#deals-chart .reminder { font-size: 12px; font-weight: bold; line-height: 14px;}

	/* horizontal out of service form */
	#horizontal-form { padding-bottom: 1em;}
	#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: 698px; padding: 5px; font-size: 13px; font-weight: normal; border: #ababab solid 1px; margin: 2px 0 10px -3px;}
	#horizontal-form .two-column { width: 338px; margin-right: 10px;}
	#horizontal-form .three-column { width: 217px; margin-right: 10px;}
	#horizontal-form #City, #horizontal-form #State { width: 218px;}
	#horizontal-form #Email { width: 338px;}
	#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-submit.png) no-repeat; width: 210px; height: 43px; padding: 0; margin: 5px 0 0; border: 0; clear: both;}
	#horizontal-form .submit:hover { background-position: 0 -43px;}
	#horizontal-form .form-error { background: #fe0000; font-size: 14px; line-height: 1; color: #ffffff; text-align: center; padding: 8px 0; margin: 5px 0 10px;}
	
	/* 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
********************************************************************************/

/* -- call now box above lead gen -- */
#call-now-box { background: url(/images/call-now-bg.jpg) no-repeat; text-align: left; padding: 0px 5px 20px 0;}
	#call { display: block; font-size: 35px; line-height: 100%; font-weight: bold; color: #424242; position: relative; left: 52px; top: 22px;}
	#now { display: block; font-size: 57px; line-height: 100%; font-weight: bold; color: #424242;}
	#call-now-box .phone { display: block; font-size: 18px; line-height: 100%; font-weight: bold;; color: #ffffff; padding: 10px 5px 0;}
	#call-now-box .promo-code { display: block; width: 50%; background: #424242; border: #ffffff solid 1px; margin: 20px 0 0 5px; padding: 5px 0 8px; font-size: 13px; line-height: 16px; 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;}
	.promo-code strong { font-size: 18px;}
	#call-now-box p { font-size: 12px; line-height: 125%; color: #777777; margin: 0; padding: 10px 75px 0 0;}
	#call-now-box p strong { display: block; font-size: 16px; line-height: 16px; color: #424242; padding: 0 0 5px 0;}
	
/* -- lead gen form -- */
.lead-gen-corners { background: #e7e7e7; padding: 20px 10px;}
#lead-gen { font: normal normal 14px/105% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #424242;}
	#lead-gen .form-error-corners { background: #ff0000; color: #ffffff; text-align: center; padding: 5px; margin: 0 0 15px;}
	#lead-gen label span { font-size: 75%; font-style: italic;}
	#lead-gen .two-column { float: left; width: 100px;}
	#lead-gen .two-column.margin-right { margin: 0 10px 0 0;}
		#lead-gen .two-column .input-corners { width: 88px;}
	#lead-gen .input-corners { background: #ffffff; height: 21px; border: #ababab solid 1px; padding: 5px; margin: 2px 0 15px 0;}
		#lead-gen input { width: 100%; background: #ffffff; border: 0; font-size: 14px; padding-top: 2px;}
	#lead-gen .submit { display: block; width: 210px; height: 43px; background: url(/images/lead-gen-submit.png) no-repeat; border: 0; padding: 0; margin: 0;}
	#lead-gen .submit:hover { background: url(/images/lead-gen-submit.png) no-repeat 0 -43px;}
	#lead-gen #required { font-size: 75%; font-style: italic; margin: 5px 0 0;}
	
#left-column .corners { background: #e7e7e7; padding: 10px 15px; margin-bottom: 10px;}
	
/********************************************************************************
			FOOTER
********************************************************************************/

#footer { width: 960px; padding: 14px 0; margin: auto; text-align: center;}
	#footer ul { font: normal normal 12px/105% "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 0 10px;}
		#footer li { display: inline;}
			#footer a { color: #424242; text-decoration: none;}
			#footer a:hover { text-decoration: underline;}
	#footer p { font-size: 10px; line-height: 14px; margin: 0; text-align: left; clear: both;}
	#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;}
#city-container { width: 708px; height: 175px; background: #ffffff url(/images/coverage_list_bg.png) repeat-x; border: #f0f0f0 solid 1px; padding: 15px 0 10px; margin-bottom: 20px; border-radius: 10px; -moz-border-radius: 10px;}
    #city-container .instructions { display: block; padding: 0 15px 5px; font-weight: bold; font-size: 18px; line-height: 1; color: #818181;}
    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%; background: none; margin-bottom: 15px; font-weight: bold; font-size: 18px; line-height: 1; color: #818181;}
        ul.cities span.coming-soon { font-weight: bold; font-size: 10px; line-height: 1; color: #da0000;}
        ul.cities span.now-available { font-weight: bold; font-size: 10px; line-height: 1; color: #006acd;}
        ul.cities a { padding: 0 10px; font-size: 12px; color: #329d19; text-decoration: underline;}
        ul.cities a:hover { text-decoration: none;}
ul#state-list { float: left; width: 100%; list-style: none;  margin: 0 0 20px;}
    ul#state-list li { float: left; width: 24%; padding: 0; text-align: left;}
    ul#state-list a { display: block; padding: 0 10px; font-size: 11px; line-height: 30px; color: #329D19; text-decoration: underline;}
    ul#state-list a:hover { background: #f0f0f0; font-size: 115%; color: #333333; text-decoration: none;}
#localCitiesTable { width: 100%; margin: 0 0 20px; border-collapse: collapse;}
    #localCitiesTable td { width: 25%; padding: 0; text-align: left;}
    #localCitiesTable a { display: block; padding: 0 10px; font-size: 11px; line-height: 30px; color: #329D19; text-decoration: underline;}
    #localCitiesTable a:hover { background: #e7e7e7; font-size: 115%; color: #333333; text-decoration: none;}                
#geoCityMap { display: block; margin: 0 auto 20px}

.local_locations .vcard {
 width:250px;
float:left;
padding:5px;
font-size:9px;
}