/*		
 *		Fox Channel
 *		----------------------------------------------------------------------------------------
 *		common styles, shared with other FOX sites
 *
 *		Legend
 *		----------------------------------------------------------------------------------------
 *
 *		1. dropdown
 *		2. header
 *			2.1 logo
 *			2.2 nav
 *			2.3 user-area
 *					signin_panel
 *					signup_panel
 *		3. promos
 *		4. footer
 *			fox-nav
 *			fox-sites
 *		5. tracking
 *
 */

/* ghostvalues */
.ghosted_password {
	display: none;
}

/* overlay */
#overlaycontainer {
	height: 0px;
	width: 100%;
	overflow: visible;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:10001;
}

.overlayplaceholder {
	position: relative;
	top: 15px;
	width: 0px;
	height: 0px;
}

#overlaycontainer .inner {
	position: relative;
}

/* dimmer */
#dimmer{
	display: none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 400;
	background-color:#000;
}
#dimmer.active {
	display: block;
	-moz-opacity: 0.0;
	opacity:0.0;
	filter: alpha(opacity=0);
}

/*	-1- dropdown 
 *	---------------------------------------------------------------------------------------------*/
.dropdown {
	border: 1px solid #000;
	position: absolute;
	left: -1000em;
	padding: 20px;
	background: #FFF;
	z-index: 1501;
	}

	/* close link */
	.dropdown a.close {
		width: 29px;
		height: 28px;
		position: absolute;
		right: -14px;
		top: -8px;
		background: transparent url(/_ui/images/bg/dd_close.png) no-repeat left top;
		text-indent: -1000em;
		text-align: left;
		z-index: 1001;
		}

	/* visual elements */
	.dropdown span.a, .dropdown span.b , .dropdown span.r, .dropdown span.rb{
		display: block;
		position: absolute;
		overflow: hidden;
		background: transparent no-repeat left top;
		z-index: 2000
		}

		/* top arrow */
		.dropdown span.a {
			width: 14px;
			height: 8px;
			background-image: url(/_ui/images/bg/dd_arrow.png);
			top: -8px;
			left: 250px;
			}

		/* bottom shadow */
		.dropdown span.b {
			height: 7px;
			left: 0px;
			bottom: -7px;
			right: 0px;
			background-image: url(/_ui/images/bg/dd_b.png);
			}

		/* shadow right */	
		.dropdown span.r {
			width: 8px;
			right: -8px;
			top: 20px;
			bottom: 0px;
			background-image: url(/_ui/images/bg/dd_r.png);
			}

		/* shadow right bottom */
		.dropdown span.rb {
			width: 8px;
			height: 7px;
			right: -8px;
			bottom: -7px;
			background-image: url(/_ui/images/bg/dd_rb.png);
			}

/*	-2- header 
 *	---------------------------------------------------------------------------------------------*/
#header .inner{
	padding: 10px 0;
	}

	#header .inner:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		}		

	/* logo */
	#header .logo {
		margin: 0 90px 0 0;
		float: left;
		}

		#header .logo img {
			display: block;
			}


	/* date - only on fox main */
	#header .date {
		position: absolute;
		left: -1000em;
		}

	/* navigation */
	#nav {
		float: left;
		position: relative;
		bottom: auto;
		left: auto;
		font: normal normal bold 1.33em/21px Helvetica,Arial,verdana,sans;
		}

		#nav li {
			margin: 0 45px 0 0;
			display: block;
			float: left;
			}

		#nav li a:hover {
			color: #FFF;
			text-decoration: none;
			}

		/* full episodes copy */
		#nav a.full-episodes {
			margin: -5px 0 -7px;
			display: block;
			padding: 0 30px 0 0;
			height: 31px;
			float: left;
			position: relative;
			color: #1e1e1e;
			}
			
		#nav a.full-episodes strong {
			padding: 6px 0 6px 10px;
			height: 19px;
			display: block;
			float: left;
			background: transparent url(/_ui/images/bg/nav_full-episodes.png) no-repeat left top;
			}

		#nav a.full-episodes span {
			display: block;
			width: 30px;
			height: 31px;
			position: absolute;
			right: 0px;
			top: 0px;
			background: transparent url(/_ui/images/bg/nav_full-episodes.png) no-repeat right top;
			}

			/* full episodes states */

			/* flickering prevention (preloading hover image) */
				#nav a.full-episodes strong {
				  background-image: url(/_ui/images/bg/nav_full-episodes_h.png);
				}
				
				/* white rollover preload image
				#nav a.full-episodes strong {
				  background-image: url(/_ui/images/bg/nav_full-episodes_c.png);
				}
				*/
				#nav a.full-episodes:link strong,
				#nav a.full-episodes:visited strong,
				#nav a.full-episodes:link span,
				#nav a.full-episodes:visited span {
				  background-image: url(/_ui/images/bg/nav_full-episodes.png);
				}
				#nav a.full-episodes:hover strong,
				#nav a.full-episodes:hover span {
				  background-image: url(/_ui/images/bg/nav_full-episodes_h.png);
				}
				
				/* white rollover image
				#nav a.full-episodes:hover strong {
				  background-image: url(/_ui/images/bg/nav_full-episodes_c.png);
				}*/
				
				/* full episodes hover state*/	
				#nav a.full-episodes:hover, 
				#nav li.active a.full-episodes {
					color: #1e1e1e;
					}
					#nav li a.full-episodes:hover span{
						background-image: url(/_ui/images/bg/nav_full-episodes_h.png);
						}
					/* white rollover image
					#nav li a.full-episodes:hover span{
						background-image: url(/_ui/images/bg/nav_full-episodes_c_r.png);
						}	
						*/
				
				/* full episodes active state*/	
					#nav li.active a.full-episodes strong,
					#nav li.active a.full-episodes span,
					#nav li.active a.full-episodes:link strong,
					#nav li.active a.full-episodes:visited strong,
					#nav li.active a.full-episodes:link span,
					#nav li.active a.full-episodes:visited span {
						background-image: url(/_ui/images/bg/nav_full-episodes_c.png);
						}

	
		/* full episodes dropdown */
		#full-episodes-nav {
			font: normal normal bold 13px/1.538em Helvetica,Arial,Verdana,sans-serif;	
			line-height: 1.1em;
			padding: 20px 20px 45px;
			width: 934px;
			position: absolute;
			left: -9999px;
			}
			
			.mini-dropdown #full-episodes-nav {
	       		line-height: 1em;
	       		padding: 5px 10px 10px;
	       		height: 75px;
	       }
			
			#full-episodes-nav a:hover {
				color: #1e1e1e;
				}
			
			#full-episodes-nav ul {
				float: left;
				margin: 0 10px 0 0;
				width: 294px;
				}
				
			.mini-dropdown #full-episodes-nav ul{
		        height: 60px;
		        width: 170px;
		        overflow: hidden;
		       }
			
			#full-episodes-nav li {
				float: none;
				display: block;
				color: #2c85bf;
				line-height: 1.538em;
				}
			
			#full-episodes-nav li a {
				color: #1e1e1e;
				}
			
			#full-episodes-nav li em {
				margin: 0 0 0 3px;
				padding: 0 0 0 8px;
				background: transparent url(/_ui/images/bg/dd_sep.png) no-repeat left center;
				font-size: .76em;
				line-height: 2em;
				font-family: Verdana,Helvetica,Arial,sans;
				font-weight: bold;
				font-style: normal;
				text-transform: uppercase;
				}
			
			#full-episodes-nav .view-all {
				padding: 0 0 0 10px;
				position: absolute;
				right: 20px;
				bottom: 20px;
				background: transparent url(/_ui/images/bg/dd_view-all.png) no-repeat left center;
				}
				
			.mini-dropdown #full-episodes-nav .view-all{
		       bottom: 10px;
		     }
	
			/** dropdown position */
			#placeholder_full-episodes-nav {
				left: -140px;
				top: 37px;
			}
			
			/* arrow position */
			#full-episodes-nav span.a {
				left: 245px;
			}

	/* user nav */
	#user-nav {
		margin-right: -5px;
		width: 185px;
		float: right;
		}
		
		#user-nav li {
			float: right;
			padding: 0 5px 0 10px;
			}
	
		#user-nav li:first-child,
		#user-nav .signout {
			padding-left: 10px;
			background: transparent url(/_ui/images/bg/user-nav_sep.png) no-repeat left center;
			}

		#user-nav a,
		#user-nav .welcome {
			color: #f2f2f2;
			}
	
		/* by default, the welcome & sign out items are hidden */
		#user-nav .welcome, 
		#user-nav .signout {
			display: none;
			}
	
		/* when a user is logged in, all but the welcome & sign out are hidden */
		#user-nav.loggedin li {
			display: none;
			}
		#user-nav.loggedin .welcome, 
		#user-nav.loggedin .signout {
			display: block;
			}


		/* sign in panel */
		#signin_panel {
			width: 340px;
			text-align: left;
			}

			#signin_panel form label {
				position: absolute;
				left: -1000em;
				text-align: left;
				}

			#signin_panel form a {
				color: #2C85BF;
				}
			
			#signin_panel input {
				margin: 0 5px 4px 0;
				padding: 3px 5px 2px 5px;
				border: 1px solid #C2C2C2;
				width: 140px;
				}

			#signin_panel input.signin-arrow {
				margin: 2px 5px 4px 0px;
				padding: 0;
				border: none;
				width: 10px;
				height: 14px;
				position: relative;
				top: 2px;
				}
			
			#signin_panel input.ghosted {
				color: #d5d5d5;
				}
			
			#signin_password {
				margin-right: 10px;
				}
			
			#signin_panel input.invalid {
				border: 1px solid #ff0000;
				color: red;
				}
			
			#signin_panel .validation_error {
				color: #FF0000;
				}

			/* START sign in msg display logic */
			/* by default, the signin panel is hidden */
			#signin_panel {
				display: none;
				}
				
			/* the signin panel appears when the open class is applied */
			#signin_panel.open {
				display: block;
				}
			
			/* by default, the validation errors are hidden */
			#signin_panel .validation_error {
				display: none;
				}
			
			/* validation errors appear when the field is in the "invalid" state */
			#signin_panel .invalid .validation_error {
				display: block;
				}

			#signin_panel .submit_msg{
				display: none;
				color: #900;
			}

			#signin_panel .submitting .submit_msg{
				display: block;
			}
		
			#signin_panel .submitting input.signin-arrow{
				display: none;
			}
			/* END sign in msg display logic */

			/* signin floatingpanel arrow */
			#signin_panel span.a {
				left: 304px;
				}

			/* signin panel overlay */
			#placeholder_signin_panel {
				top: 9px;
				left: -293px;
				}

			#signin_panel .forgotpassword {
				display: none;
			}


		/* signup panel */
		#signup_panel {
			width: 590px;
			padding: 20px;
			color: #000;
			text-align: left;
			background: #FFF url(/_ui/images/fox_logo_black.png) no-repeat 20px 20px;
			}
		
			#signup_panel h2 {
				font-weight: bold;
				color: #000;
				padding: 27px 0 0 103px;
				margin: 0 0 20px 0;
				}

			.pre_form  {
				padding-bottom: 10px;
				}
			
			.privacy {
				padding: 20px 0 30px 0;
				}
			
			.already_member {
				padding-bottom: 30px;
				}
			
			#signup_panel a {
				color: #2C85BF /* aqua */;
				}

			#signup_panel p {
				clear: both;
				margin-bottom: 5px;
				}

			#signup_panel form {
				width: 400px;
				overflow: hidden;
				}

				#signup_panel fieldset {
					margin: 0 0 5px;
					}

				#signup_panel legend {
					display: none;
					}
			
				#signup_panel form div {
					margin: 0 0 10px;
					}
					
				#signup_panel label {
					position: absolute;
					left: -1000em;
					text-align: left;
					}

				#signup_panel input {
					border: 1px solid #C2C2C2;
					padding: 3px 5px 2px 5px;
					width: 300px;
					}

					#signup_panel input.ghosted {
						color: #C2C2C2;
						}
				
					#signup_panel input.invalid {
						border: 1px solid #FF0000;
						color: #FF0000;
						}
				
				/* error */
				#signup_panel .validation_error {
					margin-bottom: 10px;
					color: #FF0000;
					}

				/* username */
				#signup_panel div.first-name,
				#signup_panel div.last-name {
					width: 150px;
					float: left;
					margin-right: 10px;
					}
					
					#signup_panel div.first-name input,
					#signup_panel div.last-name input{
						width: 140px;	
						}

				/* date */
				#signup_panel div.date {
					overflow: hidden;
					}
				#signup_panel div.date input {
					float: left;
					margin-right: 10px;
					width: 33px;
					}

				#signup_panel #reg_year {
					width: 44px;
					margin-right: 10px;
					}

				/* genre */
				#signup_panel .genre *{
					display: inline;
					vertical-align: middle;
					line-height: 1.2em;
					}
					
				#signup_panel .genre label{
					position: relative;
					left: auto;
					}
					
				#signup_panel .genre input{
					margin: 0 3px 0 10px;
					border: 0;
					padding: 0;
					width: auto;
					height: 1.2em;
					}

				/* zip */
				#signup_panel .zip input {
					width: 140px;
					}


				/* actions */
				#signup_panel .actions input {
					margin-right: 5px;
					border: 0px;
					padding: 0px;
					width: auto;
					float: left;
					}
				
				/* cancel button */
				#signup_panel .cancel-button,
				#signup_panel .cancel-button span {
					float: left;
					position: relative;
					width: 59px;
					height: 20px;
					overflow: hidden;
					margin-right: 5px;
					}	

				#signup_panel .cancel-button span{
					background: url(/_ui/images/btn/cancel.gif) no-repeat left top;
					position: absolute;
					top: 0;
					left: 0;
					cursor: pointer;
					}

				#signup_panel .cancel-button{
					margin: 0;
					display: inline;
					}

			/* signup floatingpanel arrow */
			#signup_panel span.a {
				left: auto;
				right: 20px;
				}
	
			/* signup panel overlay */
			#placeholder_signup_panel {
				left: -592px;
				top: 9px;
				}
			
			/* by default, the signiup panel is hidden */
			#signup_panel {
				display: none;
				}
				
			/* the signup panel appears when the open class is applied */
			#signup_panel.open {
				display: block;
				}
			
			/* by default, the validation errors are hidden */
			#signup_panel .validation_error {
				display: none;
				}
				
			/* validation errors appear when the field is in the "invalid" state */
			#signup_panel .invalid .validation_error {
				display: block;
				}
					
		#header form button {
			margin: 0 0 0 1px;
			border: 0px;
			padding: 0px;
			height: 20px;
			width: 20px;
			background: transparent url(/_ui/images/ico/search.png) no-repeat center center;
			text-align: left;
			text-indent: -1000em;
			cursor: pointer;
			}

	
/* -1.4- promos
 *------------------------------------------------------------------------------------------------*/
#promos {
	padding: 30px 0;	
	}

	#promos .inner {
		overflow: hidden;
		}
	
	#promos ol {
		margin: 0 -20px 0 0;
		background: url(/_ui/images/bg/promos.gif) repeat-y left top;
		}
	
	#promos li {
		margin: 0 19px 0 0;
		display: block;
		position: relative;
		float: left;
		width: 179px;
		}
	
	#promos h2 {
		position: absolute;
		left: -1000em;
		}
	
	#promos h3 {
		z-index: 10;
		background: #000;
		font: normal normal normal 100%/1em Helvetica,Arial,Verdana,sans-serif; 
		}
	
	#promos h3 a {
		padding: 81px 5px 5px 5px;	
		display: block;
		z-index: 10;
		position: relative;
		background: no-repeat  1px 1px;
		}
	
	#promos img {
		border: 1px solid #1e1e1e;
		border-bottom: 1px solid #0387b4;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 1;
		display: block;
		}

		#promos li:hover img{
			border: 1px solid #0387b4;
		}
	
	/* icons */
	#promos li.question h3 a {
		background-image: url(/_ui/images/ico/promo/question.png);
		}
	#promos li.show h3 a {
		background-image: url(/_ui/images/ico/promo/show.png);
		}
	#promos li.watch h3 a {
		background-image: url(/_ui/images/ico/promo/watch.png);
		}
	#promos li.shop h3 a {
		background-image: url(/_ui/images/ico/promo/shop.png);
		}
	#promos li.cinema h3 a {
		background-image: url(/_ui/images/ico/promo/cinema.png);
		}

		
/*	-4- footer
 *	---------------------------------------------------------------------------------------------*/

#footer {
	border-top: 1px solid #f9f62c;
	padding: 0 0 40px;
	background: #f2f2f2;
	color: #c2c2c2;
	font-family: Helvetica,Arial,Verdana,sans-serif;
	}
	
	#footer h3 {
		color: #1e1e1e;
		font-size: 1.333em;
		line-height: 1em;
		}
	#footer a {
		color: #2c85bf;
		}

	/* fox nav */
	#fox-nav {
		margin: 1.3em 0 0;
		font-weight: bold;
		overflow: hidden;
		position: relative;
		font-size: 1.083em;
		line-height: 1.2em;
		}

		#fox-nav h2 {
			position: absolute;
			left: -1000em;
			text-align: left;
			}
			
		#fox-nav ul {
			margin-right: -20px; 
			}
			
		#fox-nav li {
			padding: 0 12px 0 20px;
			margin-bottom: 5px;
			float: left;
			background: transparent url(/_ui/images/bg/fox-nav_sep.png) no-repeat left center;
			}
			
		#fox-nav li:first-child {
			padding-left: 0;
			background: none;
			}
			
	/* fox-sites */
	#fox-sites h3 {
		margin: 1.2em 0 0.25em;
		font-size: 1.4em;
		line-height: 1em;
		}

	#fox-sites ul { 
		overflow: hidden;
		line-height: 2em;
		}
		
	#fox-sites li {
		display: inline;
		margin: 0 10px 0 0;
		}

	#fox-sites li a {
		white-space: nowrap;
		}	
		
	#footer .site-info{
		color: #666;
		font-size: .916em;
		padding-top: 2.8em;
		}		
		
		#footer .site-info span{
			padding: 0 .7em;
			}

		
/*	-5- tracking
 *	---------------------------------------------------------------------------------------------*/

#tracking{
	display: none;
	}