/* ----- CHARACTERS ----- */
#charactersMainContent {
	display: none;
	opacity: 0;
	overflow: hidden;
	/*background: #000000;*/
}

.characters-header {
	position: relative;
	padding-top: 5px;
	font-size: 40px;
	line-height: 42px;
	color: #ffffff;
}

.characters-subtitle {
	color: #a8ac66;
	font-size: 22px;
	padding: 0 0 10px;
}

.characters-scroll {
	position: relative;
	line-height: 20px;
	font-size: 12px;
	width: 365px;
}

.characters-scroll .viewport { font-size:12px; line-height: 20px; width: 330px; height: 160px; overflow: hidden; position: relative; }
.characters-scroll .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; margin-right: 10px; }
.characters-scroll .scrollbar{ background: transparent url(../images/story/info_box_scroller.png) no-repeat 0 0; position: absolute; background-position: 0 0; float: right; width: 40px; right: 0; }
.characters-scroll .track { background: transparent no-repeat 0 100%; height: 100%; width:40px; position: relative; padding: 0 1px; }
.characters-scroll .thumb { background: transparent url(../images/story/info_box_scrollerbar.png) no-repeat 50% 100%; height: 40px; width: 40px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0px; }
.characters-scroll .thumb .end { background: transparent no-repeat 50% 0; overflow: hidden; height: 5px; width: 40px; }
.characters-scroll .disable { display: none; }

.characters-info-container {
	position: absolute;
	top:200px;
	right: 200px;
	width: 360px;
	height: 265px;
	background-image: url(../images/characters/characters_contentbox.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	color: #ffffff;
	padding: 20px 30px 55px;
}

.characters-image-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	opacity: 0;
	overflow: hidden;
}

.characters-image {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

.characters-prev {
	position: absolute;
	right: 655px;
	top: 340px;
	width: 28px;
	height: 43px;
	background: url(../images/shared/arrows_sprite.png) 0 0px no-repeat;
	cursor: pointer;
}

.characters-next {
	position: absolute;
	right: 150px;
	top: 340px;
	width: 28px;
	height: 43px;
	background: url(../images/shared/arrows_sprite.png) -28px 0px no-repeat;
	cursor: pointer;
}

.thumbnail-container {
	position: absolute;
	left: 210px;
	bottom: 25px;
	width: 1130px;
	height: 82px;
	margin: 0 auto;
	background: url(../images/characters/characters_thumbnail_holder.png) top center no-repeat;
}

.thumbnail-images {
	position: absolute;
	top: -10px;
	left: 100px;
	width: 430px;
	height: 60px;
}

.thumbnail-image {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 137px;
	height: 58px;
	opacity: 0;
	display: none;
	cursor: pointer;
	border: solid 1px #b09e4f;
}

.thumbnail-image.current {
	cursor: default;
	background-position: 0 -58px;
}

.thumbnail-image.current .thumbnail-name {
	color: #ffffff;
}

.thumbnail-name {
	color: #726C54;
	text-align: center;
	font-size: 16px;
	padding-top: 3px;
}

.thumbnail-prev {
	position: absolute;
	top: 20px;
	left: 65px;
	width: 27px;
	height: 44px;
	background: url(../images/shared/arrows_sprite.png) 0 0 no-repeat;
	cursor: pointer;
}

.thumbnail-next {
	position: absolute;
	top: 20px;
	right: 65px;
	width: 27px;
	height: 44px;
	background: url(../images/shared/arrows_sprite.png) -27px 0 no-repeat;
	cursor: pointer;
}