/* CSS Document */

#about {
	background: #000 url(../img/aboutvid/IM3-CLIP1_00000.jpg);
	width: 1280px;
	height: 544px;
	display: block;
	position:absolute;
	color: #999;
	top: 0px;
	left: 50%;
	margin-left: 640px;
}

	#aboutVideoCanvas {
		position: absolute;
		top: 0;
		left: 0;
	}

	#aboutVidPlayhead {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
	}

	#aboutContent {
		top: 110px;
		left: 180px;
		width: 350px;
		height: 250px;
		overflow: hidden;
	}

/* story */

#about-story {
	background: #000 url(../img/story/bg.jpg);
	width: 1280px;
	height: 544px;
	display: block;
	position:absolute;
	color: #999;
	top: 544px;
	left: 50%;
	margin-left: -640px;
}


	#storyCanvasShell {
		position: absolute;
		top: 0;
		left: 601px;
		display: block;
		width: 679px;
		height: 544px;
		background: #000 url(../img/storyvid/mk42-closeup-rotation_00000.jpg);
	}

	#storyVideoCanvas {
		position: absolute;
		top: 0;
		left: 0;
	}

	#storyVidPlayhead {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
	}

	#aboutStoryContent {
		top: 115px;
		left: 180px;
		display: block;
	}
	
		#aboutStoryContent #title {
			top: 0;
			left: 0;
			font-size: 26px;
			color: #888;
		}
		
		#aboutStoryContent #bar1 {
			display: block;
			top: 30px;
			left: 0;
			width: 510px;
			height: 1px;
			background: rgba(205,205,205, .3);
		}
		
		#aboutStoryContent #bar2 {
			display: block;
			top: 33px;
			left: 0;
			width: 510px;
			height: 4px;
			background: rgba(255,255,255, .1);
		}
		
		#storyCols {
			position: relative;
			display: block;
			list-style-type: none;
			top: 42px;
			left: 0;
		}
			#storyCols li {
				vertical-align: top;
				display: inline-block;
				width: 250px;
				margin-right: 10px;
				color: #fff;
				font-size: 14px;
				line-height: 20px;
				
			}

		#aboutStoryContent #title2 {
			top: 365px;
			left: 0;
			font-size: 26px;
			color: #888;
			width: 430px;
			display: block;
		}
		
		#aboutStoryContent #bottomBar1 {
			display: block;
			top: 360px;
			left: 0;
			width: 430px;
			height: 1px;
			background: rgba(205,205,205, .3);
		}
		
		#aboutStoryContent #bottomBar2 {
			display: block;
			top: 363px;
			left: 0;
			width: 430px;
			height: 4px;
			background: rgba(255,255,255, .1);
		}
		
		
		#notesDownloadBtn {
			display: block;
			top: 6px;
			right: 0;
			white-space: nowrap;
			font-size: 16px;
			color: #fff;
		}
		
		#notesDownloadBtn img {
			margin-left: 5px;
			vertical-align:	top;
		}
/* makers */

#makers {
	background: #000 url(../img/makersvid/IM3-AF1_00000.jpg);
	width: 1280px;
	height: 544px;
	display: block;
	position:absolute;
	color: #999;
	left: 50%;
	top: 544px;
	margin-left: -640px;
}

	#makersVideoCanvas {
		position: absolute;
		top: 0;
		left: 0;
	}


	#makersVidPlayhead {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
	}

#about-makers {
	background: #000 url(../img/makers/bg.jpg);
	width: 1280px;
	height: 544px;
	display: block;
	position:absolute;
	color: #999;
	top: 0;
	left: 50%;
	margin-left: 640px;
}


#makersContent {
	position: absolute;
	top: 0;
	left: 30px;
	display: block;
}

	#makersBgLeft {
		position: absolute;
		top: 97px;
		left: 0px;
	}
	
	#makersBgCenter {
		position: absolute;
		top: 97px;
		left: 396px;
	}
	
	#makersBgRight {
		position: absolute;
		top: 97px;
		left: 1065px;
	}
	
	#makersTopMenu {
		position: absolute;
		top: 68px;
		left: 15px;
		display: block;
		white-space: nowrap;
	}
		.makersTopBtn {
			display: inline-block;
			height: 29px;
			color: #000;
			line-height: 27px;
			font-size: 23px;
			padding: 0 5px;
			margin-right: 5px;
			background:url(../img/makers/topBtnBg.png);
		}
	
	#makersContent #bar1 {
		display: block;
		top: 100px;
		left: 0;
		width: 364px;
		height: 1px;
		background: rgba(205,205,205, .3);
	}
	
	#makersContent #bar2 {
		display: block;
		top: 102px;
		left: 0;
		width: 364px;
		height: 4px;
		background: rgba(255,255,255, .1);
	}
	
	#makersMenu, #makersMenu2 {
		top: 112px;
		left: 0;
		width: 416px;
		height: 406px;
		display: block;
		overflow: hidden;
	}

				#makersMenu .viewport, #makersMenu2 .viewport {
					width: 396px;
					height: 362px;
					overflow: hidden;
					position: relative;
					font-size: 15px;
					line-height: 25px;
					-webkit-user-select: none;
				}
				#makersMenu .overview, #makersMenu2 .overview {
					width: 396px;
					position: absolute;
					left: 0;
					top: 0;
					-webkit-user-select: none;
					line-height: 20px;
					font-size: 15px;
					color: #fff;
				}
				
				
				
				#makersMenu .scrollbar, #makersMenu2 .scrollbar {
					position: absolute;
					background-position: 0 0;
					width: 15px;
					top: 0;
					left: 398px;
					-webkit-user-select: none;
				}
				#makersMenu .track .trackStart, #makersMenu2 .track .trackStart{
					background: url(../img/scrollbar/bg-scrollbar-track-y-black.png) no-repeat 50% 0%;
					left: 0px;
					width: 15px;
					height:50%;
					position: absolute;
					overflow: hidden;
				}
				#makersMenu .track .trackEnd, #makersMenu2 .track .trackEnd {
					background: url(../img/scrollbar/bg-scrollbar-track-y-black.png)  no-repeat 50% 100%;
					left: 0px;
					top: 50%;
					height: 50%;
					width:15px;
					position: relative;
					overflow: hidden;
				}
				#makersMenu .thumb, #makersMenu2 .thumb {
					height: 20px;
					width: 15px;
					cursor: pointer;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0px;
				}
				#makersMenu .thumb .start, #makersMenu2 .thumb .start {
					background: url(../img/scrollbar/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
					width: 15px;
					height: 50%;
					cursor: pointer;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
				}
				#makersMenu .thumb .end, #makersMenu2 .thumb .end {
					position: relative;
					background: url(../img/scrollbar/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
					overflow: hidden;
					width: 15px;
					height: 50%;
					top: 50%;
				}
				#makersMenu .disable, #makersMenu2 .disable {
					display: none;
				}
	
		.makersMenu {
			list-style-type: none;
			width: 396px;
		}
		
		#crewMenu {
			top:0;
			left: -396px;
			position: relative;
		}
		
		#castMenu {
			top:0;
			left: 0;
			position: relative;
			z-index: 6;
		}
		
			.makersBtn {
				display: inline-block;
				white-space: nowrap;
				font-size: 16px;
				background: #000;
				background: rgba(0,0,0,.7);
				color: #fff;
				line-height: 40px;
				height: 38px;
				width: 376px;
				margin-bottom: -2px;
				background:url(../img/makers/nameBg.png);
				padding-left: 20px;
			}
			
			.makerBtn:first-child {
				background:url(../img/makers/nameBgTop.png);
			}
			
			.makerBtn:last-child {
				background:url(../img/makers/nameBgBottom.png);
			}
		
			.makersBtn .makerBtnStyle1 {
				color: #f53c3c;
				font-size: 11px;
			}
		
			.makersBtn .makerBtnStyle2 {
				color: #fff;
				font-size: 11px;
			}
			
			.canHover.makersBtn:hover {
				background:url(../img/makers/nameBgSelected.png);
			}
			.makersBtn.selected, .canHover.makersBtn.selected {
				background:url(../img/makers/nameBgSelected2.png);
			}
			
			.makersBtn.selected {
				cursor: default;
			}
		
	
	#makersImg {
		display: block;
		top: 107px;
		left: 416px;
		width: 364px;
		height: 364px;
		background: #000;
	}
	
	#makersBios {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
		
		.makersBio {
			line-height: 0px;
			font-size: 1px;
		}
	
	#makersClickKill {
		display: block;
		left: 780px;
		top: 107px;
		width: 406px;
		height: 378px;
		-webkit-user-select: none;
	}
	
	#makersBio {
		display: block;
		left: 780px;
		top: 107px;
		width: 406px;
		height: 378px;
		-webkit-user-select: none;
	}

				#makersBio .viewport {
					width: 386px;
					height: 362px;
					overflow: hidden;
					position: relative;
					font-size: 15px;
					line-height: 25px;
					-webkit-user-select: none;
				}
				#makersBio .overview {
					width: 386px;
					position: absolute;
					left: 0;
					top: 0;
					-webkit-user-select: none;
					line-height: 20px;
					font-size: 15px;
					color: #fff;
				}
				
				
				
				#makersBio .scrollbar {
					position: absolute;
					background-position: 0 0;
					width: 15px;
					top: 0;
					left: 390px;
				}
				#makersBio .track .trackStart{
					background: url(../img/scrollbar/bg-scrollbar-track-y.png) no-repeat 50% 0%;
					left: 0px;
					width: 15px;
					height:50%;
					position: absolute;
					overflow: hidden;
				}
				#makersBio .track .trackEnd {
					background: url(../img/scrollbar/bg-scrollbar-track-y.png)  no-repeat 50% 100%;
					left: 0px;
					top: 50%;
					height: 50%;
					width:15px;
					position: relative;
					overflow: hidden;
				}
				#makersBio .thumb {
					height: 20px;
					width: 15px;
					cursor: pointer;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0px;
				}
				#makersBio .thumb .start {
					background: url(../img/scrollbar/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
					width: 15px;
					height: 50%;
					cursor: pointer;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
				}
				#makersBio .thumb .end {
					position: relative;
					background: url(../img/scrollbar/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
					overflow: hidden;
					width: 15px;
					height: 50%;
					top: 50%;
				}
				#makersBio .disable {
					display: none;
				}