T@charset "utf-8";

* {margin:0;padding:0;outline:none;border:none;list-style-type:none;text-decoration:none;}

body {background:url(../images/body_bg.jpg) 50% 0 no-repeat #000;}

#buyBtn {display:none;}

.clear {clear:both;}

.globalH3 {margin:14px 7px 0 7px;}
.globalH4 {
	border-bottom:1px dashed #8F6A1A;
	padding:5px 0;
	margin:14px 7px 0 7px;}
.hSupportingCharacters {
	border-bottom:1px dashed #8F6A1A;
	padding:5px 0;
	margin:14px 7px 0 7px;
	width:440px;}

.globalP {
	margin:4px 7px 0px 0;
	padding:4px 0 0 0 !important;}
.globalHighlight {color:#DF7237;}

.dh1Link, .fairiesLink, .classesLink {cursor:pointer;}

#container {
	width:980px;
	margin:0 auto;}

	#header {
		width:271px;
		display:inline;float:left;
		position:relative;}
		#isologoBlur {
			position:absolute;top:0;left:0;}
		
		#musicPlayer {
			width:271px;height:81px;
			background:url(../images/playerTexture.png) top left repeat;
			overflow:hidden;
			border:1px solid #4A3718;
			-moz-border-radius:4px;
			position:relative;top:0;left:0;margin-top:10px;}
			#playerPlayPauseBtn {
				width:29px;height:29px;
				position:absolute;top:11px;left:32px;
				background:url(../images/player_play_pause_btn.png) top left no-repeat;}
			#playerStopBtn {
				width:15px;height:15px;
				position:absolute;top:24px;left:70px;
				background:url(../images/player_stop_btn.png) top left no-repeat;}
			#currentSong {
				width:85px;
				position:absolute;top:52px;left:9px;
				padding-left:12px;
				font:bold 10px/1 Arial, Helvetica, sans-serif;color:#FFCD62;
				background:url(../images/currentsong_arrow.png) 0px 2px no-repeat;}
			#setList {
				position:relative;top:0px;left:115px !important;
				font:normal 10px/1.3 Arial, Helvetica, sans-serif;color:#fff;}
				#setList a:link, #setList a:visited {color:#fff;}
				#setList label {cursor:pointer;}
				.playerDownloadBtn {position:relative;top:2px;}
			#scrollLinks {
				position:absolute;top:0;left:258px;}
				#scrollLinks .mouseover_up {position:absolute;top:4px;cursor:pointer;}
				#scrollLinks .mouseover_down {position:absolute;top:73px;cursor:pointer;}
			.trackSelected {color:#FFCD62;}
		
	
	#content {
		width:646px;
		display:inline;float:right;
		
		font:bold 40px/1 Verdana, Geneva, sans-serif;color:#fff;}
		#subcontentContainer_02, #subcontentContainer_03, #subcontentContainer_04, #subcontentContainer_05,
		#subcontentContainer_06 {display:none;}
		
		.rightContent {
			width:670px;
			padding:0 0 0 0;
			display:inline;float:right;
			position:relative;}
			.rightContent h2 {
				font:bold 16px/1.2 'Trajan Pro', Arial, Helvetica, sans-serif;color:#ffcd62;
				background:url(../images/content_h2_bg.png) top left no-repeat;
				padding:2px 0px 2px 7px;}
			.rightContent h3 {
				font:bold 14px/1.2 'Trajan Pro', Arial, Helvetica, sans-serif;color:#ffcd62;}
			.rightContent p {
				font:normal 11px/1.2 Verdana, Geneva, sans-serif;color:#fff;
				padding:10px 0 10px 0;
				text-align:left;}
				.rightContent p a:link, .rightContent p a:visited {color:#FFCD62;}
				
				/** GAME DESCRIPTION **/
				.leftBox {
					width:407px;
					display:inline;float:left;
					text-align:center;
					padding:8px 0 0 8px;}
					.leftBox h3 {
						width:500px;
						text-align:left;
						margin:7px 0 0 0;}
					.leftBox p {
						padding:5px 0 0 0;
						margin-top:30px;}
						.leftBox p strong {font-weight:normal;color:#ffcd62;}
					.leftBox dl {
						font:normal 11px/1.2 Verdana, Geneva, sans-serif;
						text-align:left;
						margin:10px 0 7px 0;
						border-bottom:1px dashed #8F6A1A;}
						.leftBox dl dt {color:#ffcd62;}
						.leftBox dl dd {
							font-style:oblique;
							text-align:right;s
							margin:0 0 10px 0;}

					.screensContainer {position:relative;margin:79px 0 12px 0;}
						.screenshotsOverlay {
							position:absolute;top:0;
							width:695px;}
							.screenshotsOverlay div {
								width:133px;
								display:inline;float:left;
								margin:0 6px 7px 0;}
								.screenshotsOverlay div span {
									width:133px;height:89px;
									display:block;
									cursor:pointer;}
									.screenshotsOverlay div label {
										display:none;
										width:722px;height:411px;
										padding-top:9px;
										background:url(../images/screensBg.jpg) top left no-repeat;
										position:absolute;top:-230px;left:0;z-index:1;}
										.screenshotsOverlay div label img {margin:0;}
										.gameDescImgClose {
											position:absolute;top:-10px;left:703px;
											cursor:pointer;}
					
				#gameDescFullBox {
					width:100%;
					padding:0 0 0 8px;}
					#gameDescFullBox h3 {
						text-align:left;
						margin:7px 0 0 0;}
					#gameDescFullBox p {
						padding:5px 0 0 0;}
					#gameDescFullBox ul {
						font:normal 11px/1.2 Verdana, Geneva, sans-serif;color:#fff;
						margin:10px 0 0 7px;}
						#gameDescFullBox ul li {
							background:url(../images/bullet.jpg) 0px 4px no-repeat;
							padding:0 0 0 14px;
							margin:7px 0 0 0;}
				.gameDescLaunchTrailerLink {
					width:244px;
					display:inline;float:right;
					position:relative;top:60px;
					cursor:pointer;}
					.gameDescLaunchTrailerLink span {
						width:100%;
						position:absolute;top:183px;left:0;
						font:bold 11px/1.2 Verdana, Geneva, sans-serif;color:#fff;
						text-align:center;}
				.dh2LaunchTrailerVideo {
					display:none;
					width:486px;height:275px;
					padding:9px 8px;
					background:url(../images/makingOfVideoBg.jpg) top left no-repeat;
					position:absolute;top:100px;left:100px;z-index:1;}
					.closeDh2Trailer {
						position:absolute;top:-10px;left:483px;
						cursor:pointer;}		
				
				/**ENVIRONMENTS**/
				.environmentsContainer {position:relative;margin:79px 0 12px 0;}
						.environmentsOverlay {
							position:absolute;top:0;
							width:695px;}
							.environmentsOverlay div {
								width:133px;
								display:inline;float:left;
								margin:0 6px 7px 0;}
								.environmentsOverlay div span {
									width:133px;height:89px;
									display:block;
									cursor:pointer;}
									.environmentsOverlay div label {
										display:none;
										width:468px;height:284px;
										padding-top:9px;
										background:url(../images/environmentsBg.jpg) top left no-repeat;
										position:absolute;top:-100px;left:110px;z-index:1;}
										.environmentsOverlay div label img {margin:0;}
										.environmentsImgClose {
											position:absolute;top:-10px;left:453px;
											cursor:pointer;}
									
				/**CLASSES & EVOLUTION**/
				#classessSubTitle {padding:10px;}
				#classesEvolutionSelector {
					width:100%;height:47px;
					background:url(../images/selector_fairies_bestiary_bg.png) top left repeat-x;
					text-align:center;
					margin-top:30px;}
					#classesEvolutionSelector div {
						height:32px;
						display:inline;float:left;
						margin-right:10px;
						position:relative;
						cursor:pointer;}
						#classesEvolutionSelector div span {							
							font:bold 12px/1.2 Verdana, Geneva, sans-serif;color:#ffcd62;
							text-transform:uppercase;}
					#classesSelectBtn {
						width:160px;padding-top:15px;
						background:url(../images/classesEvolution_btn.png) top left no-repeat;}
					#evolutionSelectBtn {
						width:160px;padding-top:15px;
						background:url(../images/classesEvolution_btn.png) top left no-repeat;}
					.classesSelected {background-position:top left !important;}
					.classesUnselected {background-position:top right !important;}
					
					#classesContainer {
						width:650px;
						margin:12px auto 0 auto;}
						#classesContainer h4 {
							text-align:center;
							font:bold 11px/1.2 Verdana, Geneva, sans-serif;color:#fff;}
						#classesContainer p {
							text-align:center;
							padding:5px 0 0 0;}
						#classesContainer ul {
							margin-top:17px;}
							#classesContainer ul li {height:113px;margin-bottom:20px;}
								#classesContainer ul li img {
									display:inline;float:right;
									width:200px;height:113px;}
								#classesContainer ul li p {
									text-align:left;
									width:325px;height:113px;
									display:table-cell;
									vertical-align:middle;
									padding:0;}
								#classesContainer ul li p label {
									font:bold 14px/1.2 'Trajan Pro', Arial, Helvetica, sans-serif;color:#ffcd62;}
									#classesContainer ul li p label strong {font-size:13px;}
				
					#evolutionContainer {
						display:none;
						width:100%;height:536px;
						margin:10px 0 0 0;
						background:url(../images/evolution_bg.png) top left no-repeat;}
						#evolutionContainer ul {
							width:630px;
							margin:0 auto;padding:20px;}
								#evolutionContainer ul li h3 {margin-bottom:20px;}							
				
				/**VIDEO GALLERY**/
				#videoNext, #videoPrev {
					width:30px;height:48px;
					position:absolute;top:175px;
					background-image:url(../images/btns_next_prev.png);
					background-repeat:no-repeat;
					cursor:pointer;}
				#videoNext {
					left:623px;
					background-position:top left;}
				#videoPrev {
					left:20px;
					background-position:top right;}
				#videoGallery {
					width:557px;height:320px;
					margin:0 auto;
					overflow:hidden;
					position:relative;top:20px;}
					#videoGallery ul {
						width:1000px;position:absolute;top:50px;left:142px;}
						#videoGallery ul li {
							display:inline;float:left;
							margin-right:12px;margin-top:30px;
							position:relative;}
							#videoGallery ul li img {
								width:129px;height:86px;
								position:relative;top:35px;}
							#videoGallery ul li object {
								display:none;
								width:272px;height:182px;
								position:absolute;top:0;left:0;}
						.videoSelected {
							top:-45px;
							z-index:1!important;}
							.videoSelected img {width:272px !important;height:182px !important;}
							.videoSelected object {
								display:block!important;
								width:450px!important;height:320px!important;
								top:-35px!important;left:-85px!important;}
				#videoTitles {
					text-align:center;
					position:relative;top:30px;
					margin-bottom:60px;
					font:bold 14px/1.2 'Trajan Pro',Arial,Helvetica,sans-serif;color:#FFCD62;}
					#videoTitles li {display:none;}
					.videoTitleSelected {display:block !important;}
					
				/** GAMEPLAY **/
				#gameplayScreens {margin:10px 0 0 -20px;}
					#gameplayScreens img {margin-bottom:10px;}

	/**MAIN MENU**/
	#mainMenuContainer {
		width:261px;
		padding:5px;
		-moz-border-radius:10px;
		border:1px solid #4a3718;}
		#mainMenuContainer h2 {
			width:100%;
			margin:5px 0;
			padding:3px 0;
			font:bold 11px/1.2 Verdana, Geneva, sans-serif;
			color:#fff;text-align:center;
			background:url(../images/display_menu_bg.jpg) top left no-repeat;}
		#mainMenu {
			text-align:center;
			margin-top:4px;}
			#mainMenu li {
				font:normal 11px/1.5 Verdana, Geneva, sans-serif;}
				#mainMenu li a:link, #mainMenu li a:visited {
					display:block;
					color:#8e8371;}
				#mainMenu li a:hover {
					color:#ffcd62;
					background:url(../images/main_menu_selected_item.png) top center no-repeat;}
					#mainMenu li a:hover strong {display:inline;}
					#mainMenu li a strong {
						display:none;
						font-size:9px;}
				.menuItemSelected {color:#ffcd62 !important;}
					.menuItemSelected strong {display:inline !important;}
				.menuItemUnselected {color:#fff;}
					.menuItemUnselected strong {display:none;}
				#linkBackGame {font-weight:bold;text-transform:uppercase;}
					#linkBackGame a:link, #linkBackGame a:visited {color:#ffcd62 !important;}
	/**MAP**/
	#maskMapContainer {
		width:259px;height:124px;
		margin:0 auto;
		overflow:hidden;
		position:relative;}
		#mapMask {
			position:absolute;z-index:10;}
		#fullMap {
			width:729px;height:523px;
			background:url(../images/fullmap.png) top left no-repeat;
			position:absolute;top:-60px;left:-148px;z-index:5;}
			.fullMapFlag {
				width:115px;
				padding:50px 0 0 0;
				font:bold 15px/1.2 'Trajan Pro', Arial, Helvetica, sans-serif;text-align:center;
				position:absolute;}
			.mapFlagSelected {
				color:#fff !important;
				text-shadow:2px 2px 1px #000;
				background:url(../images/flag_selected.png) top center no-repeat !important;}
			.mapFlagUnselected {
				color:#000;
				background:url(../images/flag_unselected.png) top center no-repeat;}
			/**FLAGS COORDINATES LIST**/
			#flagGameDesc {top:79px;left:221px;}
			#flagStory {top:302px;left:252px;}
			#flagBestiary {top:202px;left:191px;}
			#flagGoodies {top:233px;left:365px;}
			#flagCharacters {top:345px;left:108px;}
			#flagVideo {top:296px;left:514px;}
			#flagMakingOf {top:342px;left:362px;}
			#flagDH1 {top:146px;left:365px;}

	/**FOOTER**/
	#footer {
		width:1600px;height:104px;
		position:relative;left:50%;margin-left:-800px;margin-top:40px;}
		#footerContainer {
			width:980px;
			margin:auto;
			padding:20px 0 80px 0;
			text-align:center;}
			#footerContainer a {
				font-family:Verdana, Geneva, sans-serif;
				font-size:10px;
				color:#fff;}
			#footerContainer p {
				color:#fff;
				font-size:10px;
				font-family:Verdana, Geneva, sans-serif;}
			#seoFooter {
				margin:0;
				padding-bottom:15px;}
				#seoFooter a:hover {text-decoration: underline;}