/* CSS Document 
*
*	@developer:		Jake Plummer
*	@designer:		Jake Mize
*	@date:			03/17/10
*	@website:		http://www.cleartvbundle.com
*	@other:			IDs included are intended to start providing consistency and familiarity with styles across all websites
*	@styles:		selector { LAYOUT(position, float, clear), APPEARANCE(display, width, height, background, border), SPACING(padding, margin), TYPOGRAPHY(font, color, text-decoration), MISC.(z-index, zoom)}
*/

/********************************************************************************
			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-weight: normal; font-size: 100%;}
img { border: 0;}
* { vertical-align: baseline;}

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

body { background: #ffffff url(/images/inside-body-bg.png) repeat-x; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; color: #000000;}
body#home { background-image: url(/images/body-bg.png);}
a { cursor: pointer;}
a:hover	{}
.float-left { float: left;}
.float-right { float: right;}
.no-margin { margin: 0 !important;}
.phone { color: #de0606 !important;}
.legal { font-size: 10px !important; text-align: left;}
.yellow { color: #fffd46;}
.clear { clear: both; height: 1px; font-size: 1px; line-height: 1px;}
p { margin-bottom: 1em;}
blockquote { margin: 0 0 15px 25px;}
sup {font-size: 8px; height: 0; line-height: 1; position: relative; left: 0; top: -5px; vertical-align: baseline !important; vertical-align: bottom;}
hr { display: block; height: 1px; border: 0; border-top: #000000 solid 1px; margin: 40px 0;}
hr.separator { margin: 3px 0 0; border-top: #cccccc solid 1px;}
h1 { font-size: 27px; line-height: 1.15; color: #0c2140; padding-bottom: 15px;}
h2 { font-weight: bold; font-size: 20px; line-height: 1.15; color: #0c2140; padding-bottom: 10px;}
h3 { font-size: 16px; line-height: 1.15; color: #d80505; padding-bottom: 5px;}

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

#wrapper { background: #ffffff; width: 960px; margin: auto; padding:0 3px;}
#content-wrapper { padding: 0 0 30px 10px; border-bottom: #e2e2e2 solid 1px;}
#col-01 { float: left; display: inline; width: 640px; padding-top: 10px; margin-top: 10px;} /* left-column */
#col-02 { float: right; display: inline; width: 300px; margin-top: 10px;} /* right-column */

/* one column */
#order #col-01, #clear-privacy #col-01, #dstar-privacy #col-01, #comparison #col-01 { width: 940px;}

/********************************************************************************
			HEADER CONTENT
********************************************************************************/

#header { position: relative; width: 100%;}
	#bundle-logos { display: block; width: 370px; height: 102px; background: url(/images/bundle-logos.png) no-repeat;}
	#header .promo-code { position: absolute; right: 10px; top: 5px; font-size: 14px; color: #0c2140;}
	#header .phone { position: absolute; right: 10px; top: 17px; font-size: 25px;}
		#header .phone span { font-weight: bold; font-size: 39px;}

/****** 171 Urgency Banner *******/
#urgency-banner { width: 960px; height: 183px; background: url(/images/urgency-banner.png) no-repeat; margin: 3px 0 0; position: relative;}
	#urgency-banner p { margin: 0; padding: 0; line-height: normal;}
	#urgency-banner #offer-title { font-size: 48px; font-weight: bold; color: #fffd46; margin: 22px 0 0 29px; position: absolute; text-shadow: 2px 2px 0px #6c0000;}
	#urgency-banner #exclusive-offer { font-size: 33px; font-weight: bold; color: #ffffff; position: absolute; margin: 90px 0 0 29px; text-shadow: 2px 2px 0px #6c0000;}
	#urgency-banner #offer-date { color: #ffffff; font-size: 22px; font-weight: normal; color: #ffffff; position: absolute; margin: 135px 0 0 29px; text-shadow: 2px 2px 0px #6c0000;}
	
	#urgency-banner #offer-only-box { width: 272px; height: 183px; background: url(/images/open-only-hours.png) no-repeat; float: right; position: relative;}
	#urgency-banner #hours-remaining { position: absolute; text-align: center; top: 54px; left: 58px;}
	#urgency-banner #minutes-remaining { position: absolute; text-align: center; top: 54px; right: 50px;}
	#urgency-banner .time { font-size: 39px; font-weight: bold;}
	#urgency-banner #minutes, #urgency-banner #hours { font-size: 13px; margin: 2px 0 0;}
	
/****** 172 Urgency Banner *******/
#banner-position-bottom { z-index: 10; position:fixed; bottom: 0; left: 0; width: 100%; margin: 0; padding: 0;}
#banner-button-bottom { width: 150px; height: 17px; text-align: center; color: #ffffff; font-family: Helvetica; line-height: 13px; font-size: 13px; padding: 8px 0 0 0; text-decoration: none; background: url(/images/banner-button.png) no-repeat; display: block; margin: 0 auto;}
* html #banner-position-bottom /* IE6 position fixed Bottom     */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); right: expression(((ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');}

#urgency-wrapper-bottom { background: url(/images/urgency-banner-wide.png) repeat-x; height: 183px; width: 100%;}
#urgency-banner-bottom { width: 960px; height: 183px; position: relative; margin: auto;}
	#urgency-banner-bottom p { margin: 0; padding: 0; line-height: normal;}
	#urgency-banner-bottom #offer-title { font-size: 48px; font-weight: bold; color: #fffd46; margin: 22px 0 0 29px; position: absolute; text-shadow: 2px 2px 0px #6c0000;}
	#urgency-banner-bottom #exclusive-offer { font-size: 33px; font-weight: bold; color: #ffffff; position: absolute; margin: 90px 0 0 29px; text-shadow: 2px 2px 0px #6c0000;}
	#urgency-banner-bottom #offer-date { color: #ffffff; font-size: 22px; font-weight: normal; color: #ffffff; position: absolute; margin: 135px 0 0 29px; text-shadow: 2px 2px 0px #6c0000;}
	
	#urgency-banner-bottom #offer-only-box { width: 272px; height: 183px; background: url(/images/open-only-hours-wide.png) no-repeat; float: right; position: relative;}
	#urgency-banner-bottom #hours-remaining { position: absolute; text-align: center; top: 54px; left: 58px;}
	#urgency-banner-bottom #minutes-remaining { position: absolute; text-align: center; top: 54px; right: 50px;}
	#urgency-banner-bottom .time { font-size: 39px; font-weight: bold;}
	#urgency-banner-bottom #minutes, #urgency-banner-bottom #hours { font-size: 13px; margin: 2px 0 0;}
	
/****** 173 Urgency Banner *******/
#banner-button-top { width: 960px; height: 183px; display: block; margin: 3px auto 0 auto; z-index: 99; position: relative;}

#urgency-wrapper-top { height: 183px; width: 960px; background: url(/images/urgency-banner.png) repeat-x; margin: 3px 0 0; position: absolute; z-index: 1;}
#urgency-banner-top { width: 960px; height: 183px; margin: 0 auto;}
	#urgency-banner-top p { margin: 0; padding: 0; line-height: normal;}
	#urgency-banner-top #offer-title { font-size: 48px; font-weight: bold; color: #fffd46; margin: 13px 0 0 29px; position: absolute; text-shadow: 2px 2px 0px #6c0000;}
	#urgency-banner-top #exclusive-offer { font-size: 33px; font-weight: bold; color: #ffffff; position: absolute; margin: 90px 0 0 29px; text-shadow: 2px 2px 0px #6c0000;}
	#urgency-banner-top #offer-date { color: #ffffff; font-size: 22px; font-weight: normal; color: #ffffff; position: absolute; margin: 135px 0 0 29px; text-shadow: 2px 2px 0px #6c0000;}
	
	#urgency-banner-top #offer-only-box { width: 272px; height: 183px; background: url(/images/open-only-hours.png) no-repeat; float: right; position: relative;}
	#urgency-banner-top #hours-remaining { position: absolute; text-align: center; top: 54px; left: 58px;}
	#urgency-banner-top #minutes-remaining { position: absolute; text-align: center; top: 54px; right: 50px;}
	#urgency-banner-top .time { font-size: 39px; font-weight: bold;}
	#urgency-banner-top #minutes, #urgency-banner-top #hours { font-size: 13px; margin: 2px 0 0;}

/* social box */
.social { background: #ffffff; padding: 5px; border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; position: absolute; left: -63px; top: 130px;}
	.facebook-like-button iframe { width: 55px !important; overflow: hidden;}
			.fb_edge_comment_widget iframe { width: 401px !important;}
		#___plusone_0 { display: block !important; margin-top: 5px !important;}	

/********************************************************************************
			MAIN NAV
********************************************************************************/

#main-nav { position: absolute; right: 15px; top: 68px;}
	#main-nav li { float: left; display: inline; margin-left: 5px; line-height: 34px;}
	#main-nav a { display: block; background: url(/images/nav-left-corner.png) no-repeat;
				  font-weight: bold; font-size: 14px; text-decoration: none; text-transform: uppercase; color: #0c2140;}
	#main-nav a:hover, #main-nav #active { background-position: 0 -34px; color: #ffffff;}
	#main-nav span { display: block; background: url(/images/nav-right-corner.png) no-repeat right 0; padding: 0 10px;}
		#main-nav a:hover span, #main-nav #active span { background-position: right -34px;}
		
/********************************************************************************
			HERO IMAGE
********************************************************************************/

#hero-image { margin: 3px 0 8px 0; z-index: 2; position: relative;}

/********************************************************************************
			HOME PAGE BOXES
********************************************************************************/

.box-1, .box-2, .box-3, .box-4 { float: left; display: block; width: 234px; height: 100px; background: url(/images/home-boxes.png) no-repeat; overflow: hidden; margin-right: 8px;}
.box-1:hover { background-position: 0 -100px;}
.box-2 { background-position: -234px 0;}
.box-2:hover { background-position: -234px -100px;}
.box-3 { background-position: -468px 0;}
.box-3:hover { background-position: -468px -100px;}
.box-4 { background-position: -702px 0; margin-right: 0;}
.box-4:hover { background-position: -702px -100px;}
	
/********************************************************************************
			LEFT COLUMN CONTENT
********************************************************************************/

#col-01 ul { list-style: disc; margin: 10px 0 15px 35px;}
blockquote span { display: block; font-size: 16px; line-height: 1.15; color: #d80505;}
blockquote span.black { font-weight: bold; color: #000000;}
blockquote strong span { font-style: italic; display: inline;}
blockquote span.legal { display: inline; color: #000000;}
.choice { background: #2E6195; padding: 3px; margin-bottom: 15px; font-weight: bold; font-size: 15px; line-height: 1.25; color: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	#col-01 .choice ul { margin: 0 0 0 15px; padding: 0 15px 15px;}
	#col-01 .choice li { padding-top: 10px;}
	.choice .header  { display: block; background: #f2f2f2; font-weight: bold; font-size: 26px; line-height: 46px; text-align: center; color: #122C4D; border-radius: 3px; -moz-border-radius: 3px;}
.content-col-01, .content-col-02 { float: left; display: inline; width: 423px; background: #efefef; border: #e2e2e2 solid 1px; padding: 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.content-col-01 { margin-right: 30px;}
	.content-col-01 img { margin-top: -22px;}
	.content-col-01 .phone { display: block; margin-top: 20px; font-weight: bold; font-size: 36px; text-align: center;}
.img-margin { margin-bottom: 15px;}

/* vs-chart */
.vs-chart-wrapper { position: relative;}
.vs-chart { border: #e2e2e2 solid 1px; margin-bottom: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	.vs-chart td { padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	.vs-chart #vs { position: absolute; left: 46%; top: 20px;} /* this is placed in one of the <td> tags although its placement in HTML is irrelevant because of the absolute positioning */
	.chart-header { font-weight: bold; font-size: 17px; line-height: 1.25; text-transform: uppercase; color: #0c2140;}
		.chart-header td { background: #c5c5c5; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
		.chart-header .vs-logos { background: #c5c5c5 url(/images/vs-chart-logos.png) no-repeat 2px 10px;}
		.chart-header span { font-size: 25px;}
	.content-header td { font-weight: bold; background: #9a9a9a; font-size: 17px; line-height: 1; text-transform: uppercase; color: #ffffff;}
	.vs-chart .content td { background: #efefef; color: #0c2140;}
		.vs-chart .content .check { background: #efefef url(/images/vs-chart-check.png) no-repeat 10px 10px; padding-left: 80px;}
		.vs-chart .content .x { background: #efefef url(/images/vs-chart-x.png) no-repeat 10px 10px; padding-left: 80px;}
		
	/* competitor page - also using .vs-chart and we'll override what we need to */
	#competitor_chart .spacer { background: #ffffff;}
	#competitor_chart .chart-header td { padding: 10px; vertical-align: middle; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75); text-align: center;}
	.vs-chart .tv td { background: #cbe7ef;}
	.vs-chart .wireless_internet td { background: #d0efcb;}
	.vs-chart .wireless_and_tv td { background: #efe6cb;}
	#tv_section { background: #2e6195; font-weight: bold; font-size: 16px; color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); vertical-align: middle;}
	#wireless_internet_section { background: #54a439; font-weight: bold; font-size: 16px; color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); vertical-align: middle;}
	#wireless_and_tv_section { background: #cf6f2f; font-weight: bold; font-size: 16px; color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); vertical-align: middle;}
	#competitor_chart .category { font-weight: bold; font-size: 16px; text-shadow: 1px 1px 0 #ffffff; vertical-align: middle;}
	
/* CTA at bottom of content area */
#content-bottom-cta { clear: both; padding: 10px 0 0; font-size: 22px; text-align: center; color: #0c2140;}
	#content-bottom-cta span { font-weight: bold; font-size: 32px;}
	
	/* 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
********************************************************************************/

/* contact form */
#contact-form-wrapper { position: relative; border: #e2e2e2 solid 1px; padding: 20px;  color: #0c2140; -moz-border-radius: 5px; -webkit-border-radius: 5px; zoom: 1;}
	#contact-form-wrapper img { position: absolute; right: 10px; top: -7px;}
	#contact-form-wrapper span { font-weight: bold; font-size: 30px; line-height: 1.25;}
	#contact-form-wrapper .phone { display: block; font-size: 21px;}
	#contact-form-wrapper .promo-code { display: block; width: 60%; background: #2e6195; border: #ffffff solid 1px; margin: 5px 0 1em; padding: 4px 0 7px; font-size: 14px; line-height: 18px; 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;}
	#contact-form-wrapper .promo-code strong { font-size: 18px;}
	#contact-form-wrapper p { padding-right: 115px; font-size: 14px; line-height: 1.35;}
	#contact-form { padding-top: 10px;}
	#contact-form label { display: block; margin-bottom: 10px; font-weight: bold; font-size: 12px; text-transform: uppercase;}
		#contact-form label span { font-size: 10px; text-transform: lowercase;}
		#contact-form input { width: 246px; border: #0c2140 solid 1px; padding: 5px;}
	#contact-form .submit { display: block; width: 258px; height: 33px; background: url(/images/contact-form-submit.png) no-repeat; border: 0; padding: 0; cursor: pointer;}
	.required { padding: 10px 0 0; font-size: 10px;}
	.errors { background: #ff0000; padding: 5px; margin: 35px 0 10px;; font-weight: bold; text-align: center; color: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	.content-col-02 .errors { width: 248px; margin: 0 0 10px;}
	
/* testimonials */
.testimonials { background: #efefef; border: #e2e2e2 solid 1px; padding: 15px; margin-top: 10px; color: #0c2140; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	.testimonials span { display: block; padding-bottom: 5px; font-weight: bold; font-size: 17px; line-height: 1.15;}
	.testimonials span.legal { display: inline;}
	.testimonials p { width: 99%; font-style: italic;}

/********************************************************************************
			FOOTER
********************************************************************************/

#footer { padding: 10px 0 20px; font-size: 12px; color: #0c2140;}
	#footer-nav { padding-bottom: 10px; text-align: center;}
		#footer-nav a { padding: 0 10px; color: #0c2140; text-decoration: none;}
		#footer-nav a:hover { text-decoration: underline;}
	
/********************************************************************************
			CLEARING ELEMENTS THAT CONTAIN FLOATED ELEMENTS
********************************************************************************/

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/********************************************************************************
			GEONATOR
********************************************************************************/

#geo_breadcrumbs { margin: 0 0 10px; font-size: 11px;}
ul#state-list { float: left; width: 630px; list-style: none;  margin: 0 0 20px;}
    ul#state-list li { float: left; width: 125px; border-bottom: #ffffff solid 1px; border-right: #ffffff solid 1px; padding: 0; text-align: center;}
    ul#state-list a { display: block; width: 124px; background: #efefef; 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: 628px; height: 175px; background: #efefef; 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: 155px; border-bottom: #ffffff solid 1px; border-right: #ffffff solid 1px; padding: 0; text-align: center;}
    #localCitiesTable td a { display: block; width: 154px; 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;}