/* CSS Document 
*
*	@developer:		Jake Plummer
*	@designer:		Jake Mize
*	@date:			02/23/10
*	@website:		www.clearwirewimax4g.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-size: 100%; font-weight: normal;}
img { border: 0;}
sup, sub { position: relative; height: 0; line-height: 1; vertical-align: baseline !important; vertical-align: bottom;}
sup { bottom: .75ex;}
sub { top: .5ex;}

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

html, body, #grain { height: 100%;} /* make the height of #grain 100% of window size */
body { height: 100%; background: #2b2b2b url(/images/bg.jpg) no-repeat center top; font: normal normal 12px/1.5 Helvetica, Arial, sans-serif; color: #757575;}
a { color: #309f48; text-decoration: underline;}
a:hover	{ text-decoration: none;}
.float-left { float: left;}
.float-right { float: right;}
.phone { color: #c10000;}
.center { text-align: center;}
p { margin-bottom: 1em;}
h1 { font-weight: bold; font-size: 30px; line-height: 32px; border-bottom: #000000 dotted 1px; margin: 0 0 10px -5px; color: #464646;}
	h1 span { font-style: italic; font-weight: normal; font-size: 25px; color: #309f48;}
h1.smaller { font-size: 22px;}
h2 { font-weight: bold; font-size: 18px; margin-bottom: 10px;}
	h2 sup { font-size: 75%;}
h2.smaller { font-size: 17px;}
h3 { clear: both; font-weight: bold; font-size: 16px; line-height: 1.25; margin-bottom: 10px;}
input.hidden { display: none !important;}

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

#grain { background: url(/images/grain.png) repeat;}
body > #grain { height: auto; min-height: 100%;}
#wrapper { width: 960px; margin: auto;}
#content-wrapper { position: relative; background: url(/images/content-bg.png) repeat-y; padding: 0 20px;}
	#content-wrapper-top, #content-wrapper-bottom { width: 960px; height: 29px; background: url(/images/content-corners.png) no-repeat;}
	#content-wrapper-bottom { background-position: 0 -29px;}
#col-01 { position: relative; float: left; width: 630px; margin-top: -8px; z-index: 999;} /* left-column */
#col-02 { position: relative; float: right; width: 280px; margin-top: -8px; z-index: 999;} /* right-column */

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

#header { position: relative; width: 960px; padding-top: 70px; margin-bottom: 10px;}
	#clear-logo { float: left; display: block; width: 229px; height: 88px; background: url(/images/clear-logo.png) no-repeat;}
	#header .promo-code { position: absolute; left: 300px; top: 45px; font-size: 15px; color: #464646;}
	#header .phone { position: absolute; right: 20px; top: 24px; font-size: 20px; color: #464646;}
		#header .phone span { font-weight: bold; font-size: 36px; color: #c10000;}
	
/********************************************************************************
			MAIN NAV
********************************************************************************/

#main-nav { float: right; width: 688px; height: 62px; background: url(/images/main-nav-bg.png) no-repeat; padding: 34px 0 0 20px;}
	#main-nav li { float: left; display: inline; font-size: 14px; line-height: 1.25; padding-left: 10px;}
	#main-nav a { display: block; color: #555555; text-decoration: none; padding: 5px 10px;}
	#main-nav a:hover, #main-nav #active a { background: #464646; color: #ffffff; -webkit-border-radius: 5px; -moz-border-radius: 5px;}

/********************************************************************************
			HERO IMAGE
********************************************************************************/

#hero-image { margin-bottom: 10px;}

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

.content { padding: 5px 10px 0;}
.content ul { list-style: disc; margin: 0 0 1em 15px;}
.content ul br { line-height: .75;}
.content ul.arrow { list-style: none;}
	ul.arrow li { position: relative; background: url(/images/list-arrow.gif) no-repeat 0 2px; padding: 0 0 1em 15px;}
	ul.arrow span { font-weight: bold; font-size: 14px; line-height: 18px; color: #309f48;}
.content .callout { position: relative; background: #f2f2f2; padding: 10px; font-weight: bold; font-size: 16px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
.content .callout.not-available { background: #da0000; color: #ffffff;}
.content #us-map { float: right;}
#breadcrumb { display: block; margin-bottom: 15px; font-size: 11px;}
#service-available-big { margin-bottom: 10px;}

/* questions on home page */
.content .questions { list-style: none; margin: 0; padding: 0;}
	.content .questions li { background: #f2f2f2 url(/images/question_mark.png) no-repeat -35px -15px; padding: 10px 15px 0; margin: 0 0 1em; border-radius: 10px; -moz-border-radius: 10px;}
			.questions .arrow li { position: relative; background: url(/images/list-arrow.gif) no-repeat 0 2px; padding: 0 0 1em 15px; margin: 0;}

/* urgency banners */
#urgency { position: relative; width: 650px; height: 89px; background: url(/images/urgency-bg.png) no-repeat; margin: -10px 0 0 -20px;}
	#urgency span { padding-left: 190px; font-weight: bold; font-size: 16px; line-height: 89px; color: #ffffff; text-transform: uppercase;}

/* banner at the bottom of content area */
#footer-cta { clear: both; width: 960px; height: 89px; background: url(/images/footer-cta-bg.png) no-repeat; margin-left: -20px;}
	#footer-cta span { font-size: 26px; line-height: 92px; color: #ffffff; padding-left: 300px;}
	
/* deals chart */
#deals-chart { position: relative; background: #f2f2f2;}
	#deals-chart td { position: relative; padding: 10px 15px;}
	#deals-chart .features { border-left: #cccccc solid 1px; border-right: #cccccc solid 1px;}
	#deals-chart .border-bottom { border-bottom: #cccccc solid 1px;}
	#deals-chart h2 { margin-bottom: 0; text-align: center;}
	#deals-chart h3 { margin-bottom: 0; font-size: 14px; color: #309f48;}
	#deals-chart ul { margin-bottom: 0;}
	#deals-chart .dollar-sign { position: relative; left: 0; top: -20px; font-size: 20px;}
	#deals-chart .price { font-weight: bold; font-size: 50px; line-height: 1.15; color: #309f48;}
	#deals-chart .price.slashed { color: #424242;}
	#deals-chart .per-month { font-size: 20px;}
	#deals-chart .promo { font-weight: bold; font-size: 13px; color: #424242;}
	#deals-chart td div { position: relative;} /* this is so that we can position the strike through image absolutely */
		#deals-chart .strike-through { position: absolute; left: 5px; top: 10px;}
	#deals-chart .instructions { background: #cccccc; font-weight: bold; font-size: 12px; line-height: 36px;}
		#deals-chart .instructions span { float: left;}
	#chart-zip-form { float: right;}
	#chart-zip-form input { float: left; width: 113px; height: 26px; border: #cccccc solid 1px; padding: 5px 0; margin-right: 10px; font-weight: normal; font-size: 20px; text-align: center;
							  -webkit-border-radius: 5px; -moz-border-radius: 5px;}
	#chart-zip-form .submit { float: left; width: 125px; height: 38px; background: url(/images/sidebar-zip-form-submit.gif) no-repeat; border: none; margin: 0; cursor: pointer;}
	#chart-zip-form .submit:hover { background-position: 0 -38px;}

/* out of service form */
#contact-inquiry-form .errors { width: 540px; background: #da0000; padding: 5px; margin-bottom: 10px; font-weight: bold; color: #ffffff; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
#contact-inquiry-form label { float: left; display: block; font-size: 13px; font-weight: normal; padding-left: 3px;}
#contact-inquiry-form label span { font-size: 80%; line-height: 1;}
#contact-inquiry-form input { display: block; width: 525px; height: 26px; border: #cccccc solid 1px; padding: 5px 10px; margin-bottom: 10px; font-size: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
#contact-inquiry-form .two-column { width: 245px; margin-right: 10px;}
#contact-inquiry-form .three-column { width: 75px; margin-right: 10px;}
#contact-inquiry-form #City, #contact-inquiry-form #State { width: 190px;}
#contact-inquiry-form #Email { width: 415px;}
#contact-inquiry-form br.clearfix { height: 1px; font-size: 1px; line-height: 1px; margin: 0; padding: 0; clear: both;}
#contact-inquiry-form .submit { display: block; width: 240px; height: 43px; background: url(/images/contact-form-submit.gif) no-repeat; border: none; cursor: pointer;}
#contact-inquiry-form .submit:hover { background-position: 0 -43px;}

/* 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
********************************************************************************/

/* side zip search */
#sidebar-zip { width: 280px; height: 122px; background: url(/images/sidebar-zip-bg.png) no-repeat;}
	#sidebar-zip div { padding: 20px 15px 5px 15px; font-weight: bold; font-size: 17px; line-height: 1.35; color: #464646; text-shadow: 1px 1px 0px #ffffff;}
		#sidebar-zip div span { font-weight: normal; font-size: 13px; text-shadow: none;}
	#sidebar-zip-form { padding: 0 15px;}
		#sidebar-zip-form input { float: left; display: block; width: 113px; height: 26px; border: #cccccc solid 1px; padding: 5px 0; font-size: 20px; text-align: center;
								  -webkit-border-radius: 5px; -moz-border-radius: 5px;}
		#sidebar-zip-form .submit { float: right; display: block; width: 125px; height: 38px; background: url(/images/sidebar-zip-form-submit.gif) no-repeat; border: none; cursor: pointer;}
		#sidebar-zip-form .submit:hover { background-position: 0 -38px;}
		
/* contact form section */
#contact-form-wrapper { position: relative; background: #f2f2f2; margin-bottom: 10px;}
	#contact-form-top { position: relative; width: 280px; height: 116px; background: url(/images/contact-form-top.jpg) no-repeat; margin-top: -12px; z-index: 999;}
	#contact-form-bottom { position: relative; height: 10px;}
		#contact-form-bottom .bottom-left { position: absolute; width: 10px; height: 10px; background: url(/images/gray-corners-10.gif) no-repeat 0 -10px;}
		#contact-form-bottom .bottom-right { position: absolute; right: 0; width: 10px; height: 10px; background: url(/images/gray-corners-10.gif) no-repeat -10px -10px;}
	#contact-form-phone { position: relative; float: right; width: 290px; height: 64px; background: url(/images/contact-form-phone-bg.png) no-repeat; margin: -10px -20px 0 0; z-index: 999;}
		#contact-form-phone span { padding-left: 20px; font-weight: bold; font-size: 32px; line-height: 64px; color: #ffffff;}
	#contact-form-wrapper .promo-code { clear: both; display: block; width: 220px; background: #555555; border: #ffffff solid 1px; margin: 0 auto; 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;}
	
	/* the form */
	#contact-form { padding: 10px 20px 0 20px;}
		#contact-form .errors { background: #da0000; padding: 5px; margin-bottom: 10px; font-weight: bold; color: #ffffff; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
		#contact-form h3 { margin: 0; color: #424242;}
		#contact-form label { font-size: 14px; color: #424242;}
		#contact-form input { display: block; width: 218px; height: 26px; border: #cccccc solid 1px; padding: 5px 10px; margin-bottom: 10px; font-size: 20px;
							  -webkit-border-radius: 5px; -moz-border-radius: 5px;}
		#contact-form .two-column { float: left; width: 115px;}
			#contact-form .two-column input { width: 93px;}
			#contact-form .margin-right { padding-right: 10px;}
		#contact-form .submit { display: block; width: 240px; height: 43px; background: url(/images/contact-form-submit.gif) no-repeat; border: none; cursor: pointer;}
		#contact-form .submit:hover { background-position: 0 -43px;}

/* testimonials section */
.testimonials { padding: 5px 10px;}
	.testimonials span { display: block; padding-bottom: 10px; font-weight: bold; font-size: 19px; line-height: 1.25; color: #424242;}
	.testimonials p { padding: 0 10px; font-style: italic;}
	.testimonials strong { padding: 0 10px 10px;}

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

#footer { width: 960px; padding: 10px 0 50px; margin: auto; font-size: 12px; color: #ffffff; text-align: center;}
	#footer-nav { padding-bottom: 5px;	}
	#footer-nav a { padding: 0 5px; color: #ffffff; text-decoration: none;}
	#footer-nav a:hover { text-decoration: underline;}
	#footer p { margin-bottom: 5px;}
	#footer .legal { font-size: 10px; line-height: 12px; text-align: left;}
	#footer sup { bottom: .5ex; font-size: 80%;}

/********************************************************************************
			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: -10px 0 10px; font-size: 11px;}
#city-container { width: 100%; background: #f2f2f2; border: #cccccc solid 1px; padding: 15px 0 10px; margin-bottom: 20px; overflow: hidden;}
    #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 { color: #555555;}
ul#state-list { list-style: none;  margin: 0; padding: 0;}
    ul#state-list li { float: left; width: 121px; border-bottom: #ffffff solid 1px; border-right: #ffffff solid 1px; padding: 0; text-align: center;}
    ul#state-list a { display: block; width: 120px; 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: #000000;}
#localCitiesTable { margin: 10px 0 15px; border-collapse: collapse;}
	#localCitiesTable td { width: 151px; border-bottom: #ffffff solid 1px; border-right: #ffffff solid 1px; padding: 0; text-align: center;}
	#localCitiesTable td a { display: block; width: 150px; 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: #000000;}
#geoCityMap { display: block; margin: 0 auto;}