/* CSS Document */
* {
	outline: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #fff;
	border: 0;
}

html {
	height: 100%;
	-webkit-text-size-adjust: none;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 10px;
	
	overflow-y: auto;
	overflow-x: auto;
	min-width: 1200px;
	background: #000;
	height: 100%;
	background: #000;
}

#mainWrap, #page_content {
	font-family: 'Dosis', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 10px;
}




/* fonts */

.dosis {
	font-family: 'Dosis', sans-serif;
	font-weight: 400;
}


.dosisSemi
{
	font-family: 'Dosis', sans-serif;
	font-weight: 600;
}


.dosisBold
{
	font-family: 'Dosis', sans-serif;
	font-weight: 700;
}

/* generic helpers */
.fs {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.abs {
	position: absolute;
}


/* preloader */
#preload {
	background: #000;
	z-index: 1000;
}
	#preloadArt {
		width: 100%;
		height: 0px;
		top: 130px;
		background: #333;
		opacity: 0;
		margin-top: -30px;
	}
		#preload #bar {
			width: 0%;
			background: #700;
			height: 100%;
		}



/* main site */
#shell {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	overflow-y: hidden;
	overflow-x: hidden;
	min-width: 1200px;
}

	#contentShell {
		position: fixed;
		width: 1280px;
		height: 544px;
		left: 50%;
		top: 0;
		
	}
	
		#contentBody {
			display: block;
			position: absolute;
			left: 0;
		}


#contentFront {
	top: 0;
	left: 0;
}

/* menu */

#menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 42px;
	background:url(../img/main/menuBarBg2.png);
}

	
	
	#menuBtns {
		position: relative;
		top: 0;
		margin: 0;
		list-style: none;
		white-space: nowrap;
		height: 42px;
		margin-left: -50px;
		text-align: center;
	}
		
	#menuBtns li {
		display: inline;
		height: 42px;
		vertical-align: top;
	}					
			.menuBtnTop {
				display: inline-block;
				position: relative;
				padding: 0 20px 0 5px;
				color: #fff;
				font-size: 15px;
				height: 42px;
				line-height: 42px;
				background: url(../img/main/menuDivider2.png) top right no-repeat;
			}
			
			.menuBtnTop.last {
				background: none;
			}
				
				.menuBtn {
					position: relative;
					display: block;
					color: #a5a5a5;
					font-size: 12px;
				}
				
				.menuBtn .comingSoonLabel, .menuBtnTop .comingSoonLabel {
					display: none;
				}
				
				.menuBtnTop:hover, .menuBtn:hover {
					color: #ead877;
				}
				
				.menuBtn:hover .comingSoonLabel, .menuBtnTop:hover .comingSoonLabel {
					display: block;
				}
				
				.menuBtnTop.comingSoon:hover, .menuBtn.comingSoon:hover {
					color: #222;
				}
				/*
				.menuBtnTop.selected, .menuBtn.selected {
					color: #de0202;
					cursor: default;
				}
				*/
				.comingSoonLabel {
					top: 10px;
					left: 0;
					position: absolute;
					color: #ead877;
					font-size: 13px;
					line-height: 12px;
					width: 100%;
					margin-left: -10px;
				}

	#soundDiv {
		position: absolute;
		top: 0;
		left: 0;
		background:url(../img/main/soundBg.png);
		width: 81px;
		height: 42px;
		display: block;
	}
	
	#soundIcon {
		position: absolute;
		display: block;
		top: 13px;
		left: 16px;
		width: 40px;
		height: 20px;
		background: url(../img/main/soundIcon2.png) top right;
	}
	
		#soundIcon:hover {
			background-position: top left;
		}
		#soundIcon.mute {
			background-position: bottom right;
		}
		#soundIcon.mute:hover {
			background-position: bottom left;
		}

	#menuRight {
		position: absolute;
		top: 0;
		right: 0;
		background:url(../img/main/menuRightBg2.png) no-repeat left;
		width: 147px;
		height: 42px;
		display: block;
	}
			.tixBtn {
				display: inline-block;
				position: relative;
				padding: 0 26px;
				color: #fff;
				font-size: 19px;
				height: 42px;
				line-height: 42px;
				white-space: nowrap;
  				text-shadow: 0px 0px 8px rgb( 0, 0, 0 );
			}
			.tixBtn:hover, .menuBtn:hover {
				color: #62010e;
			}


/* misc main stuff */
#number1 {
	position: absolute;
	top: 300px;
	right: 40px;
}

#scrollCue {
	position: fixed;
	top: 510px;
	right: 27px;
	font-size: 20px;
	letter-spacing: 6px;
}
	#scrollCue #arrowUp {
		position: absolute;
		right: -16px;
		top: 2px;
	}
	#scrollCue #arrowDown {
		position: absolute;
		right: -16px;
		top: 15px;
	}
#social {
	position: fixed;
	left: 16px;
	top: 4px;
}

	.socialBox {
		display: inline-block;
		vertical-align: top;
		margin-right: 3px;
		width: 20px;
		height: 20px;
	}
		#socialFB { background: url(../img/main/socialIcons.png); background-position: 0 0; }
		#socialTW { background: url(../img/main/socialIcons.png); background-position: -20px 0; }
		#socialG { background: url(../img/main/socialIcons.png); background-position: -40px 0; }
		#socialP { background: url(../img/main/socialIcons.png); background-position: -60px 0; }


#news {
	position: fixed;
	top: 4px;
	left: 108px;
	white-space: nowrap;
	text-align: left;
	height: 20px;
	vertical-align: top;
}

	#newsTitle {
		background: #fff;
		height: 20px;
		padding: 0 8px;
		color: #000;
		font-size: 12px;
		line-height: 20px;
		display: inline-block;
		vertical-align: top;
		white-space: nowrap;
	}
	
	#newsContent {
		background: #000;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		display: inline-block;
		color: #fff;
		padding: 0 8px;
		vertical-align: top;
		white-space: nowrap;
		letter-spacing: 1px;
	}
		#newsContent a {
			color: #de0202;
		}
			
		

#curtains {
	position: absolute;
}
	
	#curtainLeft {
		display: block;
		position: fixed;
		top: 0;
		background: #000;
		width: 100px;
		height: 544px;
		left: 0;
	}
	#curtainLeft2 {
		position: fixed;
		top: 0;
		left: 50%;
		margin-left: -640px;
	}
	#curtainRight {
		display: block;
		position: fixed;
		top: 0;
		background: #000;
		width: 100px;
		height: 544px;
		right: 0;
	}
	#curtainRight2 {
		position: fixed;
		top: 0;
		right: 50%;
		height: 544px;
		margin-right: -640px;
	}


/* footer */
#footerShell {
	min-width: 1200px;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	top: 544px;
}
#footer {
	position: absolute;
	width: 100%;
	top: 42px;
	background: #000 url(../img/main/footerBg.jpg) repeat-x top center;
	left: 0;
	height: 100%;
	min-height: 1000px;
}

	

	#footerExpand {
		display: block;
		position:absolute;
		top: -62px;
		height: 20px;
		left: 20px;
		position: absolute;
		padding: 0 10px;
		font-size: 11px;
		line-height: 20px;
		color: #b4b4b4;
		background: #000;
		background: rgba(0,0,0,.8);
		visibility: hidden;
		opacity: 0;
	}
		#footerExpandArrow1 {
			margin-left: 3px;
			margin-top: -2px;
		}
		
		#footerExpandArrow2 {
			margin-left: 3px;
			margin-top: -2px;
			display: none;
		}
	
	#footerRight {
		top: 12px;
		right: 35px;
		position: absolute;
	}
		#footerRight #logo {
			position: absolute;
			right: 0;
			top: 2px;
		}
		#footerRight #logoSmall {
			position: absolute;
			top: -2px;
			right: -8px;
			display: none;
		}


		#footerTrailerBtn {
			position: absolute;
			background:url(../img/main/watchTrailerBg.png);
			display: block;
			top: 0;
			right: 95px;
			width: 279px;
			height: 117px;
			text-align: center;
			white-space: nowrap;
		}
		
		#footerTrailerBtn.short {
			height: 36px;
			width: 229px;
		}
			#footerTrailerBtn:hover {
				background: #fff;
			}
			
			#footerTrailerBtn img {
				position: relative;
				margin-top: 4px;
				margin-left: 4px;
				display: block;
			}
			
			#footerTrailerBtn.short img {
				display: none;
			}
			
				#footerTrailerBtn #label {
					text-align: center;
					margin-left: 4px;
					width: 270px;
					height: 30px;
					display: block;
					background: url(../img/main/watchTrailerLabelBg.png);
					color: #fff;
					line-height: 30px;
					font-size: 16px;
					letter-spacing: 1px;
				}
				#footerTrailerBtn.short #label {
					margin-top: 3px;
					width: 220px;
				}
				#footerTrailerBtn:hover #label {
					color: #ead877;
				}

	
	#footerLeft {
		top: 10px;
		left: 10px;
		position: absolute;
	}
	
		#footerRatings {
			color: #b4b4b4;
			font-size: 9px;
			position: absolute;
			top: 58px;
			left: 0px;
		}
		
			#footerRatingsImg {
				display: block;
				margin: 4px 0;
			}
			
			.short #footerRatingsImg {
				width: 200px;
				height: 28px;
			}
			
			.ratingLink {
				color: #b4b4b4;
				font-size: 9px;
			}
			
			.ratingLink:hover {
				color: #fff;
			}
	
	
		#footerRatings.short {
			top: 3px;
			left: 107px;
			text-align: right;
		}
	
	#footerCenter {
		top: 15px;
		left: 0;
		width: 400px;
		position: absolute;
		text-align: center;
	}
	
		#findUs {
			margin: 8px 0;
			color: #b4b4b4;
			font-size: 9px;
			font-weight: bold;
			line-height: 8px;
		}
		
			#findUsFB {
				display: inline-block;
				background:url(../img/main/findUsBtns.png) 0 0 no-repeat;
				width: 58px;
				height: 16px;
				margin-left: 8px;
				margin-top: -4px;
				vertical-align: middle;
			}
			
			#findUsFB:hover {
				background-position: 0 -16px;
			}
		
			#findUsTW {
				display: inline-block;
				background:url(../img/main/findUsBtns.png) -60px 0 no-repeat;
				width: 52px;
				height: 16px;
				margin-left: 8px;
				margin-top: -4px;
				vertical-align: middle;
			}
			
			#findUsTW:hover {
				background-position: -60px -16px;
			}
		
			#findUsYT {
				display: inline-block;
				background:url(../img/main/findUsBtns.png) -115px 0 no-repeat;
				width: 35px;
				height: 16px;
				margin-left: 8px;
				margin-top: -4px;
				vertical-align: middle;
			}
			
			#findUsYT:hover {
				background-position: -115px -16px;
			}
		#legal {
			color: #b4b4b4;
			font-size: 9px;
			font-weight: bold;
		}
			#marvelBtn {
				color: inherit;
			}
			
			#creditsBtn {
				margin-left: 5px;
			}
			
			#creditsBtn img {
				margin-right: 3px;
			}
			
		#creditsDrawer {
			bottom: 0px;
			margin-bottom: -130px;
			left: 0;
			display: block;
			position: fixed;
			width: 100%;
			height: 130px;
			background: #000;
			color: #747474;
			font-size: 9px;
			font-weight: bold;
			text-align: center;
		}
			
			#creditsDrawer img {
				display: block;
				margin: auto;
			}
			.legalLink {
				color: inherit;
				font-size: inherit;
				font-weight: inherit;
				margin: 0 6px;
			}
			.legalLink:hover {
				color: #fff;
			}
			
			#creditsClose {
				font-size: 13px;
				position: absolute;
				top: 4px;
				right: 8px;
				color: #fff;
				display: block;
			}
			
	
/* common subpage content */

.pageTitle {
	margin-left: 15px;
	font-size: 38px;
	color: #888;
	line-height: 38px;
}

.pageScrollCue {
	margin-left: 15px;
	font-size: 10px;
	color: #aaa;
	letter-spacing: 6px;
	line-height: 22px;
}

.pageMenuBtn {
	position: relative;
	margin-left: 15px;
	font-size: 14px;
	display: block;
	color: #b8b8b8;
	width: 10px;
	white-space: nowrap;
}

.pageMenuBtn:hover {
	color: #fff;
}


				
	.pageMenuBtn .comingSoonLabel {
		top: 3px;
		left: 0;
		position: absolute;
		color: #fff;
		font-size: 11px;
		display: none;
	}
	
				
	.pageMenuBtn.comingSoon:hover {
		color: #333;
	}
	
	.pageMenuBtn:hover .comingSoonLabel {
		display: block;
	}



/* upgrade */

#upgrade {
	background: #000;
	width: 100%;
	display: block;
	position:relative;
	color: #999;
	top: 50px;
	text-align: center;
}




/* progress bar */

#progressBar {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 545px;
	display: block;
}

	.progressBarBox {
		border: 1px #fff solid;
		width: 14px;
		display: block;
		position: absolute;
	}
	
	#progressBarThumb {
		width: 20px;
		height: 40px;
		position: absolute;
		top: 0;
		left: 0;
		background:url(../img/main/progressThumb.png) left center no-repeat;
		display: block;
	}