/* CSS Document */

/* chars */

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

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


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

#chars-main {
	background: #000;
	width: 1280px;
	height: 544px;
	display: block;
	position:absolute;
	color: #999;
	top: 544px;
	left: 50%;
	margin-left: -640px;
}


#charsContent {
	position: absolute;
	top: 0;
	left: 30px;
	display: block;
}
	
	#charsImg, charImg2 {
		display: block;
		top: 0;
		left: 0;
		width: 1280px;
		height: 544px;
		background: #000;
	}

	#charsBgLeft {
		position: absolute;
		top: 97px;
		left: 0px;
	}
	
	#charsMenuShell {
		top: 112px;
		left: 0;
		width: 416px;
		height: 406px;
		display: block;
		overflow: hidden;
	}

	
		.charsMenu {
			list-style-type: none;
			width: 396px;
		}
		
		#charsMenu {
			top:0;
			left: 0;
			position: relative;
			z-index: 6;
		}
		
			.charsBtn {
				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/chars/nameBg.png);
				padding-left: 20px;
			}
			
			.charsBtn:first-child {
				background:url(../img/chars/nameBgTop.png);
			}
			
			.charsBtn:last-child {
				background:url(../img/chars/nameBgBottom.png);
			}
		
			.charsBtn .makerBtnStyle1 {
				color: #f53c3c;
				font-size: 11px;
			}
		
			.charsBtn .makerBtnStyle2 {
				color: #fff;
				font-size: 11px;
			}
			
			.canHover.charsBtn:hover {
				background:url(../img/chars/nameBgSelected.png);
			}
			
			.charsBtn.selected, .canHover.charsBtn.selected {
				background:url(../img/chars/nameBgSelected2.png);
			}
			
			.charsBtn.selected {
				cursor: default;
			}
		
			.charsBtnStyle1 {
				color: #f53c3c;
				font-size: 11px;
				padding: 0 4px;
			}
		
		
	
	#charsBios {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
		
		.charsBio {
			line-height: 0px;
			font-size: 1px;
		}
	
	#charsClickKill {
		display: block;
		left: 780px;
		top: 107px;
		width: 406px;
		height: 378px;
		-webkit-user-select: none;
	}
	
	#charsBio {
		display: block;
		left: 780px;
		top: 107px;
		width: 406px;
		height: 378px;
		-webkit-user-select: none;
	}

				#charsBio .viewport {
					width: 386px;
					height: 362px;
					overflow: hidden;
					position: relative;
					font-size: 15px;
					line-height: 25px;
					-webkit-user-select: none;
				}
				#charsBio .overview {
					width: 386px;
					position: absolute;
					left: 0;
					top: 0;
					-webkit-user-select: none;
					line-height: 20px;
					font-size: 15px;
					color: #fff;
				}
				
				
				
				#charsBio .scrollbar {
					position: absolute;
					background-position: 0 0;
					width: 15px;
					top: 0;
					left: 390px;
				}
				#charsBio .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;
				}
				#charsBio .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;
				}
				#charsBio .thumb {
					height: 20px;
					width: 15px;
					cursor: pointer;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0px;
				}
				#charsBio .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;
				}
				#charsBio .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%;
				}
				#charsBio .disable {
					display: none;
				}
	#charsDownloads {
		display: block;
		left: 780px;
		top: 307px;
		width: 406px;
		height: 378px;
		line-height: 23px;
			white-space: nowrap;
	}
		.charsDLBtn {
			background: url(../img/chars/dlBtnBg.png) top right;
			height: 19px;
			line-height: 19px;
			color: #000;
			font-size: 12px;
			padding-left: 5px;
			margin-right: 4px;
			margin-bottom: 5px;
			padding-right: 19px;
			white-space: nowrap;
			display: inline-block;
		}
		.charsDLBtn:hover {
			background-position: bottom right;
			color: #fff;
		}