﻿/*== HOMEPAGE STYLES ==*/
.leftcolumn { position: relative; z-index: 5;}

.roosterWatch { height: 121px;}
.roosterWatch a { background-image: url(../images/landing/cta_watchRooster.jpg); background-repeat: no-repeat; display: block; float: right; height: 121px; overflow: hidden; text-indent: -5000px; width: 182px;}
.roosterWatch a:hover { background-position: 0 -121px;}

#mediaWrap { float: left; height: 620px; margin: 0 0 30px; padding: 0; position: relative; width: 810px;}
#mediaWrap .mediaSlide { position: absolute;}

/*-- flash frame --*/
#mediaWrap #flashFrame { height: 550px; left: -8px; top: 0; width: 818px;}
	#flashFrame .roosterAlt { background: #FFF url(../images/landing/bg_home_flashAlternate.jpg) no-repeat; height: 550px; width: 818px;}
	#flashFrame .headlines { margin: 16px 0 0 65px;}
	#flashFrame h1 { color: #0048a9; font-size: 21px; font-weight: normal; height: 24px; line-height: 21px; margin: 0 0 4px; overflow: hidden; position: relative; width: 644px;}
		#flashFrame h1 .over { background-position: 0 0;}
	#flashFrame h2 { color: #999; font-size: 18px; font-weight: normal; height: 21px; line-height: 18px; margin: 0; overflow: hidden; position: relative; width: 416px;}
		#flashFrame h2 .over { background-position: 0 -25px;}		
	
	#flashFrame h1 .over, #flashFrame h2 .over { background-color: #FFF; background-image: url(../images/landing/bg_home_flashHeadlines.gif); background-repeat: no-repeat; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
	
/*-- boxes frame --*/	
#mediaWrap #boxesFrame { left: 48px; top: 90px; width: 672px;}
	#boxesFrame .boxed { display: inline;}
	/*#boxesFrame .boxContent, */#boxesFrame .boxTop, #boxesFrame .boxBottom { overflow: hidden;}
	/*-- box 1 --*/
	#boxesFrame .leftBox { background: #FFF; float: left; width: 426px;}
	#boxesFrame .leftBox .boxTop { background: #FFF /*url(../images/landing/boxes_01_top.jpg) no-repeat;*/ height: 217px;}
	#boxesFrame .leftBox .boxBottom { background: #FFF url(../images/landing/bg_boxes_01_bottom.jpg) no-repeat; height: 52px;}
	#boxesFrame .leftBox .boxContent { background: #eee url(../images/landing/bg_boxes_01_boxContent.jpg) repeat-x left bottom; border-left: 1px solid #ccc; border-right: 1px solid #ccc; height: 135px; position: relative;}
	#boxesFrame .leftBox .boxPad { padding: 12px 0 0 22px;}
	
	#boxesFrame .leftBox h2 { color: #0048a8; font-size: 24px; font-weight: normal; height: 28px; margin: 0 0 0 -2px; overflow: hidden; padding: 0; position: relative; text-indent: -3000px; width: 392px;}
	#boxesFrame .leftBox h2 .over { background: transparent url(../images/landing/txt_boxes_01_h2.gif) no-repeat; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
	#boxesFrame .leftBox p { color: #999; font-size: 15px; line-height: 18px; margin: 0; padding: 0 12px 0 0;}
	
	#boxesFrame .leftBox .ctaBtn { bottom: 0; height: 28px; overflow: hidden; position: absolute;}
	#boxesFrame .leftBox .ctaBtn a:hover { top: -28px; position: relative;}
	/*-- box 2 --*/
	#boxesFrame .rightTop { background: #FFF; float: right; margin: 0; position: relative; width: 234px; z-index: 5;}
	#boxesFrame .rightTop .boxTop { background: #FFF url(../images/landing/bg_boxes_02_top.jpg) no-repeat; height: 20px;}
	#boxesFrame .rightTop .boxBottom { background: #FFF url(../images/landing/bg_boxes_02_bottom.jpg) no-repeat; height: 13px;}
	#boxesFrame .rightTop .boxContent { background: #f4f4f4 url(../images/landing/bg_boxes_02_boxContent.jpg) repeat-x left bottom; border-left: 1px solid #ccc; border-right: 1px solid #ccc; height: 99px; position: relative;}
	#boxesFrame .rightTop .boxPad { background: url(../images/landing/bg_boxes_02_padd.gif) no-repeat 140px 17px; height: 100%; padding: 0 0 0 12px;}
	
	#boxesFrame .rightTop h3 { color: #0048a8; font-size: 15px; font-weight: normal; height: 17px; margin: 0 0 5px; overflow: hidden; padding: 0; position: relative; text-indent: -3000px; width: 165px;}
	#boxesFrame .rightTop h3 .over { background: transparent url(../images/landing/txt_boxes_02_h3.gif) no-repeat; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
	#boxesFrame .rightTop p { color: #999; font-size: 12px; line-height: 13px; margin: 0; padding: 0 70px 0 0;}
	
	#boxesFrame .rightTop .ctaBtn { bottom: 0; height: 20px; overflow: hidden; position: absolute;}
	#boxesFrame .rightTop .ctaBtn a:hover { top: -20px; position: relative;}	
	/*-- box 3 --*/
	#boxesFrame .rightMid { background: #FFF; float: right; margin: 8px 0 9px; width: 234px;}
	#boxesFrame .rightMid .boxTop { background: #FFF url(../images/landing/bg_boxes_03_top.jpg) no-repeat; height: 15px;}
	#boxesFrame .rightMid .boxBottom { background: #FFF url(../images/landing/bg_boxes_03_bottom.jpg) no-repeat; height: 15px;}
	#boxesFrame .rightMid .boxContent { background: #f4f4f4 url(../images/landing/bg_boxes_03_boxContent.jpg) repeat-x left bottom; border-left: 1px solid #ccc; border-right: 1px solid #ccc; height: 75px; position: relative; z-index: 100;}
	#boxesFrame .rightMid .boxPad { height: 100%; padding: 0 0 0 12px;}
	
	#boxesFrame .rightMid h3 { color: #0048a8; font-size: 15px; font-weight: normal; height: 17px; margin: 0 0 5px; overflow: hidden; padding: 0; position: relative; text-indent: -3000px; width: 178px;}
	#boxesFrame .rightMid h3 .over { background: transparent url(../images/landing/txt_boxes_03_h3.gif) no-repeat; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
	#boxesFrame .rightMid p { color: #999; font-size: 12px; line-height: 13px; margin: 0; padding: 0 70px 0 0;}
	
	#boxesFrame .rightMid .ctaBtn { bottom: 0; height: 20px; overflow: hidden; position: absolute;}
	#boxesFrame .rightMid .ctaBtn a:hover { top: -20px; position: relative;}	
		
		/*-- sleep select --*/
		#sleepSelect { position: relative; z-index: 10;}
		#sleepSelect select { color: #848181; font-size: 11px; line-height: 16px; position: absolute; width: 200px;}
		#sleepSelect select:focus { width: auto;}
		#sleepSelect option { height: 16px; line-height: 16px; width: auto;}
		
		#sleepSelect .ddWrap { position: relative; width: 210px; z-index: 10;}
		.ddWrap .ddToggle { background: url(../images/landing/bg_ddToggle.gif) no-repeat; cursor: pointer; height: 18px; position: absolute; right: 3px; top: 3px; width: 24px; z-index: 15;}
			.ddWrap>.ddToggle {  background: url(../images/landing/bg_ddToggle.png) no-repeat;}
		
		.ddWrap .ddItemsWrap { left: 0; position: absolute; top: 0; z-index: 10;}
		.ddWrap .ddItemsTop { display: none; background: #FFF; border: 1px solid #8f8f8f; border-bottom: none; height: 7px; width: 208px;}
		.ddWrap .ddItemsWrap>.ddItemsTop { background: transparent url(../images/landing/bg_ddTop.png) no-repeat; border: none; height: 8px; width: 210px;}
		.ddWrap .ddItemsBottom { display: none; background: #FFF; border: 1px solid #8f8f8f; border-bottom: none; height: 7px; width: 208px;}
		.ddWrap .ddItemsWrap>.ddItemsBottom { background: transparent url(../images/landing/bg_ddBottom.png) no-repeat; border: none; height: 8px; width: 210px;}	
		
		.ddWrap .ddItems { position: relative; width: 210px; z-index: 10;}	
		.ddItems .ddItem, .ddWrap .ddCurrent { background: #FFF; border-left: 1px solid #8f8f8f; border-right: 1px solid #8f8f8f;  border-bottom: 1px solid #bcbcbc; color: #848181; cursor: pointer; font-size: 11px; padding: 4px 10px; position: relative; z-index: 10;}
			.ddWrap .ddCurrent { background: transparent url(../images/landing/bg_ddCurrent.gif) no-repeat; border: none; height: 24px; line-height: 24px; padding: 0 10px;}
				.ddWrap>.ddCurrent { background: transparent url(../images/landing/bg_ddCurrent.png) no-repeat;}
			
			.ddWrap .ddItems .ddFirstItem { background: transparent url(../images/landing/bg_ddFirstItem.gif) no-repeat top left; border-left: none; border-right: none;}
				.ddWrap .ddItems>.ddFirstItem { background: transparent url(../images/landing/bg_ddFirstItem.png) no-repeat top left;}			
			.ddWrap .ddItems .ddLastItem { background: transparent url(../images/landing/bg_ddLastItem.gif) no-repeat bottom left; border: none;}
				.ddWrap .ddItems>.ddLastItem { background: transparent url(../images/landing/bg_ddLastItem.png) no-repeat bottom left;}
			
			.ddWrap .ddItems .ddFirstOver { background-position: -210px 0 !important; color: #FFF;}
			.ddWrap .ddItems .ddLastOver { background-position: -210px bottom !important; color: #FFF;}
		
			.ddWrap .ddItems .ddOver { background-color: #8f8f8f; color: #FFF;}
			.ddWrap .ddItems .ddSelected { background-color: #8f8f8f; color: #FFF;}
	
	/*-- box 4 --*/
	#boxesFrame .rightBot { background: #FFF; float: right; margin: 0; width: 234px;}
	#boxesFrame .rightBot .boxTop { background: #FFF url(../images/landing/bg_boxes_04_top.jpg) no-repeat; height: 14px;}
	#boxesFrame .rightBot .boxBottom { background: #FFF url(../images/landing/bg_boxes_04_bottom.jpg) no-repeat; height: 49px;}
	#boxesFrame .rightBot .boxContent { background: #f4f4f4 url(../images/landing/bg_boxes_04_boxContent.jpg) repeat-x left bottom; border-left: 1px solid #ccc; border-right: 1px solid #ccc; height: 87px; position: relative;}
	#boxesFrame .rightBot .boxPad { background: url(../images/landing/bg_boxes_04_padd.gif) no-repeat 155px 17px; height: 100%; padding: 0 0 0 12px;}
	
	#boxesFrame .rightBot h3 { color: #0048a8; font-size: 15px; font-weight: normal; height: 17px; margin: 0 0 5px; overflow: hidden; padding: 0; position: relative; text-indent: -3000px; width: 165px; z-index: 1;}
	#boxesFrame .rightBot h3 .over { background: transparent url(../images/landing/txt_boxes_04_h3.gif) no-repeat; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1;}
	#boxesFrame .rightBot p { color: #999; font-size: 12px; line-height: 13px; margin: 0; padding: 0 80px 0 0;}
	
	#boxesFrame .rightBot .ctaBtn { bottom: 0; height: 20px; overflow: hidden; position: absolute;}
	#boxesFrame .rightBot .ctaBtn a:hover { top: -20px; position: relative;}		
	
	/*-- lightbulb cta --*/
	#lightBulb { background: url(../images/landing/bg_home_lightbulb.jpg) no-repeat; height: 44px; margin: 0; position: absolute; top: 565px; width: 762px;} 
		#lightBulb p { color: #333; font-size: 13px; left: 35px; line-height: 17px; margin: 0; padding: 0; position: absolute; top: 12px;}
		#lightBulb p strong { color: #e54e96;}
		#lightBulb .cta { background-image:url(../images/landing/bg_home_lightbulb.jpg); background-repeat: no-repeat; background-position: -510px -9px; color: #333; display: block; font-size: 12px; height: 24px; left: 510px; overflow: hidden; position: absolute; text-indent: -2000px; top: 9px; width: 229px;}
		#lightBulb .cta:hover { background-position: -510px -53px;}
		
/*-- rooster frame --*/
#mediaWrap #roosterBgFrame { background: #0373b6 url(../images/landing/bg_roosterBgFrame.jpg) no-repeat; height: 421px; left: 39px; top: 94px; width: 687px;}
#mediaWrap #roosterFrame { height: 421px; left: 39px; top: 94px; width: 687px;}
		
/*===  ROOSTER FRAME CONTENT  ===*/
.popupOut { height: 430px; position: relative; width: 687px;}
	.popupOut .popupIn { height: 430px; margin: 0 2px; overflow: hidden; position: relative; width: 687px;}

.popupSlide { display: none; height: 430px; left: 0; position: absolute; top: 0; width: 687px;}
	.nojs .popupSlide {display: block;}
.popupSlide .returnBtn {  background: url(../images/popup/btn_return.gif) no-repeat right; color: #FFF; display: block; font-size: 9px; line-height: 19px; padding: 0 25px 0 0; text-decoration: none; text-transform: uppercase;}
.popupSlide h1 { color: #FFF; font-size: 18px; margin: 94px 0 0; overflow: hidden; text-indent: -5000px;}

/*===  SLIDE SPECIFIC  ===*/
.slide1 {/*background: #39506a url(../images/popup/bg_popupSlide1.jpg) no-repeat top left;*/}
	.slide1 h1 { background: url(../images/popup/popup_headline_slide1.gif) no-repeat; height: 35px; line-height: 35px;}
.slide1 .colwrap { padding: 20px 0 0;}
	.slide1 .col { float: left;}
	.slide1 .left { width: 250px;}
		.slide1 .left p { padding: 311px 0 0 29px;}	
	.slide1 .mid { padding: 0; width: 426px;}
		.slide1 .mid a { margin-bottom: 8px;}	
	.slide1 .right { padding: 0; width: 234px;}
		.slide1 .right p {margin: 0; padding: 0;}
		.slide1 .right a {}


.slide2 {background: #39506a url(../images/popup/bg_popupSlide2.jpg) no-repeat top left;}
	.slide2 h1 { background: url(../images/popup/popup_headline_slide2.gif) no-repeat; height: 35px; line-height: 35px;}
.slide2 .colwrap { padding: 39px 0 0 85px;}
	.slide2 .colwrap .returnBtn { position: absolute; right: -5px; top: -17px; z-index: 5;}
	
	.slide2 .col { float: left;}
	.slide2 .left { background: url(../images/popup/bg_playerWrap.jpg) no-repeat; height: 359px; position: relative; width: 614px;}	
		.slide2 .playerLeft {float: left; padding: 23px 0 0 15px; position: relative; width: 175px;}
			.playerLeft .shareBtn {  background: url(../images/popup/btn_share.gif) no-repeat right; bottom: -23px; right: -10px; color: #FFF; display: block; font-size: 9px; line-height: 19px; padding: 0 25px 0 0; position: absolute; text-decoration: none; text-transform: uppercase; z-index: 5;}
			.playerLeft h5 {padding: 0;margin: 0;}
			.playerLeft .top { padding: 0 0 9px;}
			.playerLeft .mid {padding: 0 0 11px;}
				.playerLeft .mid td {padding-right: 5px;}	
			.playerLeft .bottom {}
				.playerLeft .bottom td {padding-left: 5px;}	
	
		.slide2 .playerRight { float: left; padding: 0 0 0 16px; position: relative; width: 400px;}
			/*send to friend*/
			.playerRight .sendToForm { background: #FFF; display: none; height: 248px; left: 45px; position: absolute; top: 50px; width: 347px;}
			.playerRight>.sendToForm { background: transparent url(../images/popup/bg_sendForm.png) no-repeat;}
				.sendToForm .closeBtn { background: url(../images/popup/closeboxsmall.gif) no-repeat; cursor: pointer; display: block; height: 17px; position: absolute; right: 5px; top: 2px; width: 17px;}
				.playerRight .sendToForm .sendInner { padding: 20px;}
				.sendToForm th, .sendToForm td { padding-bottom: 8px;}
				.sendToForm th {color: #364d67; font-size: 11px; font-weight: bold; text-align: right; vertical-align: middle; width: 115px;}
					.sendToForm th.msg { vertical-align: top;}
				.sendToForm td {padding-left: 4px;}
				.sendToForm input, .sendToForm textarea {background: #FFF; border: 1px solid #364d67; font-family: Arial, Helvetica, Sans-Serif; font-size: 12px; width: 185px;}
				.sendToForm .sendBtn { text-align: center;}
				.sendToForm #sendConfirm p {color: #FFF; font-size: 14px; font-weight: bold; text-align: center;}
				
			.playerRight .playerTitle { height: 27px; overflow: hidden;}
				.playerRight .playerTitle .vidTitle {display: none;}
			.playerRight .playerWrapper { height: 300px;}		
	
	.slide2 .right { padding: 120px 0 0; text-align: right; width: 211px;}
		.slide2 .right p {margin: 0 0 22px;}

	.slide2 .nojsPlayer p { color: #FFF; font-size: 14px; font-weight: bold; padding: 25px 0; text-align: center;}
		.slide2 .nojsPlayer p a { color: #E54E96; text-decoration: underline;}

.slide3 {background: #39506a url(../images/popup/bg_popupSlide2.jpg) no-repeat top left;}
	.slide3 h1 { background: url(../images/popup/popup_headline_slide2.gif) no-repeat; height: 35px; line-height: 35px;}
	.slide3 .roosterWrapper { background: url(../images/popup/bg_roosterGame.gif) no-repeat top left; height: 428px; margin: 22px auto 0; position: relative; width: 898px;}
		.roosterWrapper .roosterGameWrapper {height: 428px; overflow: hidden; width: 898px;}
		.roosterWrapper #gameCTA {display: none; height: 300px; position: absolute; right: 0; top: 110px; z-index: 99; width: 155px;}
			.roosterWrapper #gameCTA a, .roosterWrapper #gameCTA img {display: block; height: 100%; width: 100%;}
	.slide3 .returnBtn { position: absolute; right: 130px; top: -21px; z-index: 5;}
	
	.slide3 .nojsGame p { color: #FFF; font-size: 14px; font-weight: bold; padding: 75px 0; text-align: center;}
		.slide3 .nojsGame p a { color: #E54E96; text-decoration: underline;}		