/* CSS Document 
*
*	@developer:		Jake Plummer
*	@designer:		Jake Plummer
*	@website:		www.direct.tv
*	@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%;}
img { border: 0;}
* { vertical-align: baseline;}
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: #dbd8bf url(/images/body_bg.png) repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; color: #2a2f38;}

/* links */
a { color: #ff8126; text-decoration: underline;}
a:hover	{ text-decoration: none;}

/* floats */
.float-left { float: left;}
.float-right { float: right;}
.clear { clear: both; height: 1px; font-size: 1px; line-height: 1px;}

/* general */
p { margin-bottom: 1em;}
.margin-bottom { margin-bottom: 15px;}
.center { display: block; margin: 0 auto;}

/* headers */
h1 { border-bottom: #647591 solid 1px; font-weight: bold; font-size: 24px; line-height: 1; color: #647591; margin-bottom: 15px; padding-bottom: 2px;}
h2 { font-weight: bold; font-size: 18px; line-height: 1; margin-bottom: 10px;}
h3 { font-weight: bold; font-size: 15px; line-height: 1; margin-bottom: 5px;}
h4 { background: url(/images/content_cta_bg.png) repeat-x; padding-left: 10px; font-weight: bold; font-size: 15px; line-height: 30px; color: #ffffff; clear: both;}

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

#wrapper { width: 960px; margin: auto;}
#main-column { float: left; width: 700px; background: #ffffff; border: #98b4c8 solid 1px; padding: 4px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#right-column { float: right; width: 240px;}

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

#header { position: relative; height: 100px;}
	#direct-tv-logo { position: absolute; left: 10px; top: 30px; display: block; width: 200px; height: 50px; background: url(/images/direct_tv_logo.png) no-repeat;}
	#header-cta { position: absolute; left: 300px; top: 10px; width: 425px; background: url(/images/header_cta_divider.png) no-repeat 50% 60%; 
				  font-weight: bold; font-size: 30px; line-height: 36px; color: #ffffff; text-align: center;}
		#header-cta .phone { font-size: 36px; color: #fff950;}
		#header-cta .promo-code { display: block; padding-top: 20px; font-size: 14px; line-height: 1;}
			#header-cta .promo-code span { color: #fff950;}
	#directv-logo { position: absolute; right: 10px; top: 10px;}

/********************************************************************************
			HERO IMAGES
********************************************************************************/

.hero-image { position: relative;}

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

#main-nav { margin: 5px 0;}
	#main-nav li { float: left; background: url(/images/nav_divider.png) no-repeat right 50%;}
	#main-nav .last { background: none; padding-right: 0;}
	#main-nav a { display: block; margin: 0 10px; padding: 0 10px; font-size: 14px; line-height: 40px; color: #41290a; text-decoration: none;
				  -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	#main-nav a:hover, #main-nav #active a { background: url(/images/nav_hover_bg.png) repeat-x; color: #ffffff;}

/********************************************************************************
		 	MAIN COLUMN CONTENT
********************************************************************************/

/* urgency banner */
#urgency { height: 50px; background: url(/images/urgency_bg.png) repeat-x; margin-bottom: 4px; font-weight: bold; font-size: 24px; line-height: 50px; color: #ffffff; text-align: center;
		   -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	#urgency span { color: #fff950;}
	
/* deals boxes */
#deals-boxes { margin-top: 4px;}

/* content */
#main-column .content { padding: 20px 20px 40px;}
#main-column ul { list-style: disc; margin: 0 0 1em 35px;}
.legal { font-size: 9px; line-height: 12px; color: #7c7c7c;}
.info { background: #e9eff4; border-top: #ffffff solid 1px; border-bottom: #d3e0e9 solid 1px; margin-bottom: 10px; padding: 10px;}
.info .last { margin-bottom: 0;}

	/* order now button */
	#order-now { display: block; width: 250px; height: 35px; background: url(/images/order_now_button.png) no-repeat; margin: 15px auto; clear: both;}
	#order-now:hover { background-position: 0 -35px;}
	
	/* deals chart page */
	#deals-chart-wrapper { position: relative;}
		#deals-chart-wrapper .package-image { margin-bottom: 5px;}
		.deals-box { position: absolute; right: 10px; top: 4px;}
		#deals-chart-info { position: absolute; right: 10px; bottom: 20px; width: 330px;}
			#deals-chart-info ul { margin: 0 0 0 15px; font-size: 11px; line-height: 14px;}
			#deals-chart-info p { font-size: 11px;}
		
	/* packages page(s) */
	.package-image { float: left;}
	.package-image-intl { display: block;}
	.channels-spanish { float: right; padding-right: 100px;}
	.package-logos { padding: 10px 0 0;}
	.package-info { float: right; width: 52%; margin-top: 4px;}
		.package-info a { color: #ffffff; text-decoration: none;}
		
		/* individual package pages */
		#package-and-logos { float: left; width: 47%;}
	
	/* sports, movie, business pages */
	.sports-logo, .movie-logo { float: left; padding: 0 10px 10px 0;}
	.movie-logo { margin-bottom: 20px;}
	
	/* content contact form area */
	.content #contact-form-box { position: relative; width: 660px; height: 300px; background: url(/images/content_contact_form_bg.png) no-repeat; margin-bottom: 20px; color: #ffffff;}
	.content #contact-form-box .header { display: block; padding: 15px 0 15px 15px; font-weight: bold; font-size: 28px; line-height: 1; color: #acddff;}
	.content #contact-form-box p { font-weight: bold; font-size: 13px; line-height: 1.5; padding: 0 350px 0 15px; margin-bottom: 0;}
	.content #contact-form-box .cta { display: block; padding: 50px 270px 0 90px; font-weight: bold; font-size: 20px; line-height: 1.15;}
	.content #contact-form-box .phone { color: #fff950;}
	
	/* content contact form form */
	.content .form-wrapper { width: 200px; position: absolute; right: 25px; top: 20px;}
		#contact-form-box .form-wrapper p { padding: 0; font-weight: normal; font-size: 12px; line-height: 15px; color: #2a2f38;}
		#contact-form { padding: 5px 0 0;}
		#contact-form input { width: 192px !important; padding: 3px !important;}
		#contact-form .submit { display: block; width: 200px !important; height: 35px; background: url(/images/contact_form_submit.png) no-repeat; border: 0; padding: 0; margin: 5px 0 0; cursor: pointer;}
		#contact-form .submit:hover { background-position: 0 -35px;}
		#contact-form .errors { background: url(/images/urgency_bg.png) repeat-x; font-weight: bold; font-size: 10px; line-height: 20px; color: #ffffff; text-align: center;}

/* content cta */
#content-cta { height: 50px; background: url(/images/content_cta_bg.png) repeat-x; font-size: 30px; line-height: 50px; color: #ffffff; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	#content-cta .phone { color: #fff950;}

/********************************************************************************
			RIGHT COLUMN CONTENT
********************************************************************************/

.sidebar-box { position: relative; background: #ffffff; border: #98b4c8 solid 1px; margin-bottom: 10px; padding: 4px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
	.sidebar-box h2 { background: url(/images/sidebar_header_bg.png) repeat; line-height: 40px; margin: 0; padding-left: 10px; color: #647591; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;}
	#contact-form-top h2 { background: none; padding-top: 10px; line-height: 1;-moz-border-radius: 0; -webkit-border-radius: 0;}
	.sidebar-box .phone { display: block; color: #2a2f38;}
	.sidebar-box .content { padding: 15px;}
	/* sidebar link boxes (nav and resources) */
	.sidebar-box li { border-bottom: #e2e0cc solid 1px; padding-bottom: 10px; margin-bottom: 10px; line-height: 13px;}
	.sidebar-box .last, .sidebar-box li:last-child { border-bottom: 0; margin-bottom: 0;}
	.sidebar-box a { display: block; background: url(/images/sidebar_link_arrow.png) no-repeat right 3px; padding-right: 10px; font-size: 11px; line-height: 13px; color: #2a2f38; text-decoration: none;}
	.sidebar-box a:hover, .sidebar-box #active a { background: url(/images/sidebar_link_arrow_hover.png) no-repeat right 3px; color: #ff8f2a;}

/* contact form */
#contact-form-top { background: url(/images/contact_form_top_bg.png) repeat-x; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	#headset-hottie { position: absolute; right: -5px; top: -20px;}
	#contact-form-top p { padding-right: 50px;}
	
	/* the form */
	#contact-form input { display: block; width: 188px; background: #fffef5; border: #e8e6d4 solid 1px; margin: 5px 0; padding: 5px; font-size: 14px; line-height: 1; color: #666666;}
	#contact-form .submit { display: block; width: 200px; height: 35px; background: url(/images/contact_form_submit.png) no-repeat; border: 0; margin: 5px 0 0; padding: 0; cursor: pointer;}
	#contact-form .submit:hover { background-position: 0 -35px;}

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

#footer { float: left; width: 710px; position: relative; clear: both; padding: 10px 0 30px;}
	#footer-nav { float: left; position: relative; left: 50%;}
	#footer-nav li { float: left; position: relative; right: 50%; border-right: #373c44 solid 1px; margin-right: 5px; padding-right: 5px;}
	#footer-nav .last { border-right: 0;}
	#footer-nav a { display: block; font-size: 10px; line-height: 1; color: #373c44; 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 */