/* --------------------------*
 * SlideShow using iCarousel *
 * --------------------------*/

/* SlideShow DIV */
.slideShow {
	position: relative;
	overflow: hidden;
	height: 219px;
	width: 715px;
	top: 22px;
	left: 22px;
	padding: 0;
}
.slideShow * {
	padding: 0;
}
/* Slides container UL */
.slideShowSlides {
	height: 219px;
	width: 30000px;
	position: absolute;
	top: 0;
}
/* Slide container LI */
.slideShowSlideContainer {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	float: left;
	height: 219px;
	width: 715px;
}
/* Slide parts */
.slideShowSlide {
	position: relative;
	width: 715px;
	height: 219px;
}
.slideShowSlideTitle {
	color: #FFFFFF;
	font-size: 25px;
	left: 120px;
	position: absolute;
	top: 45px;
}
.slideShowSlideText {
	color: #FFFFFF;
	left: 120px;
	position: absolute;
	top: 80px;
	width: 400px;
}
.slideShowPreviousButton,
.slideShowNextButton {
	list-style: none;
	width: 12px;
	height: 27px;
	display: block;
	float: left;
	margin-top: 10px;
	cursor: pointer;
}
.slideShowNextButton {
	background-image: url('../img/slideShow/arrowright.png');
}
.slideShowPreviousButton {
	background-image: url('../img/slideShow/arrowleft.png');
}
.slideShowFrame {
	background: url("../img/slideShow/sliderFrame.png") repeat scroll 0 0 transparent;
	width: 729px;
	height: 233px;
	top: 15px;
	left: 15px;
}
/* SlideShow Thumbs UL */
.slideShowThumbs {
	position: absolute;
	top: 163px;
	right: 10px;
	float: right;
	margin: 0;
	padding: 0;
	height: 50px;
}
.slideShowSlideThumb {
	list-style: none;
	border: 1px solid black;
	display: block;
	float: left;
	width: 44px;
	height: 44px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}
.slideShowSlideThumb.active {
	border: 2px solid white;
	margin: -1px 4px;
}
.slideShowSlideThumb:hover {
	border: 2px solid #FF892C;
	margin: -1px 4px;
}
/* --------------------------*
 * Register Creatures SlideShow using iCarousel *
 * --------------------------*/

/* Creatures SlideShow DIV */

#SlideShowSmoothMask {
	height: 320px;
	width: 40px;
	background-image: url('../img/firstConnection/creaturesSlideShow/smooth_mask.png');
	position: absolute;
	top: 17px;
	left:0px;
	z-index: 1;
}
.creaturesSlideShow {
	position: absolute;
	left: -7px;
	top: -61px;
	overflow: hidden;
	height: 374px;
	width: 320px;
	padding: 0;
	margin: 0;
}
.creaturesSlideShow  *{
	padding: 0;
}
/* Slides container */

.creaturesSlideShowSlides
.creaturesSlideShowSlideItem {
	list-style: none;
	margin: 0;
}
.creaturesSlideShowSlideItem {
	display: block;
	height: 320px;
	width: 320px;
	float: left;
}
.creaturesSlideShowSlides
{
	height: 320px;
	width: 30000px;
	position: absolute;
}
.creaturesSlideShowImg {
	position: relative;
	height: 320px;
	width: 320px;
}
/* Creatures Slide Navigation */

.creaturesSlideShowNav {
	width: 320px;
	height: 36px;
	position:absolute;
	bottom:-1px;
	left:0px;
	z-index:10;
}
.creaturesSlideShowButtons {
	position: relative;
	margin: 0;
	padding: 0;
	width: 320px;
	height: 33px;
}
.creaturesSlideShowPreviousButton,
.creaturesSlideShowNextButton,
.creaturesSlideShowZoomButton {
	list-style: none;
	width: 28px;
	height: 28px;
	display: block;
	cursor: pointer;
	margin-right: 6px;
}
.creaturesSlideShowNextButton {
	background-image: url('../img/portal/ng_portal/icons.png');
	float: right;
}
.creaturesSlideShowNextButton:hover {
	background-position: 0px 412px;
}
.creaturesSlideShowPreviousButton {
	background-image: url('../img/portal/ng_portal/icons.png');
	background-position: 0px 374px;
	float: left;
}
.creaturesSlideShowPreviousButton:hover {
	background-position: 0px 336px;
}
.creaturesSlideShowZoomButton {
	background-image: url('../img/portal/ng_portal/icons.png');
	background-position: 0px 70px;
	float: right;
}
.creaturesSlideShowZoomButton:hover {
	background-position: 0px 32px;
}
#ButtonsMask {
	list-style: none;
	display: block;
	height: 30px;
	width: 320px;
	background-image: url('../img/firstConnection/creaturesSlideShow/buttons_mask.png');
}
/* Creatures Slide Title */

.creaturesSlideShowTitle {
	width: 200px;
	font-size: 14px;
	position: relative;
	bottom: -346px;
	margin: 0 auto;
	color:white;
}
/* Creatures Viewer */

#characterViewerWrapper {
	position: absolute;
	width:900px;
	z-index: 9999;
	margin: auto;
	top:0;
	left:0;
}
#characterViewer {
	width: 900px;
	height: 1085px;
	margin: 70px auto;
	background: url(../img/portal/ng_portal/character-viewer-background.png) no-repeat;
	padding: 72px 0px 0px 4px;
	position: absolute;
}
#characterViewerWrapper .closeMediaPlayer {
	background:url(../img/portal/ng_portal/icons.png) 0 -304px;
	width:28px;
	height:28px;
	display:block;
	position:relative;
	text-indent:-9999px;
	left:447px;
	top:200px;
	margin:0 auto;
	z-index: 9999;
}
#characterViewerWrapper .closeMediaPlayer:hover {
	background-position: 0 -342px;
}
#characterViewerWrapper .introVideoTop, #characterViewerWrapper .introVideoBot {
	width: 197px;
	height: 10px;
}
#characterViewerWrapper .introVideoTop {
	background: url(../img/portal/ng_portal/bg-intro-detail.png) 0 0px;
	top:69px;
	left:352px;
}
#characterViewerWrapper .introVideoBot {
	background: url(../img/portal/ng_portal/bg-intro-detail.png) 0 -22px;
	bottom: 185px;
	left: 352px;
}
#hoverNav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#outerImageContainer > #hoverNav {
	left: 0;
}
#hoverNav a {
	outline: none;
}
#prevLink, #nextLink {
	top: 370px;
	display: block;
	padding-top: 53px;
	position: absolute;
	background: url(../img/portal/ng_portal/bg-nav-detail.png) no-repeat top !important;
	height: 106px;
	width: 58px;
	display: block;
}
#prevLink span, #nextLink span {
	background: url(../img/portal/ng_portal/screenshot-buttons.png);
	display: block;
	height: 58px;
	width: 58px;
}
#prevLink {
	left: -27px;
}
#prevLink span {
	background-position: 0 0;
}
#prevLink:hover span {
	background-position: 0 -68px;
}
#nextLink {
	right: -27px;
	float: right;
}
#nextLink span {
	background-position: 0 -136px;
}
#nextLink:hover span {
	background-position: 0 -204px;
}