/* --------------- google fonts ---------------- */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);

/* --------------------------- global constants ------------------------- */
html { 
  background: url(../_images/main-background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
html, body {
	margin: 0px;
	padding: 0px;
}
body {
	text-align:center;
	/*background: #faf2ea url(../_images/main-background.jpg) no-repeat center top;*/
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 100%;
}
body a:hover > img{
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		 -o-transition: all .3s linear;
			transition: all .3s linear;
			opacity: 0.4;
}

/* --------------- limited-scale reset ---------------- */
h1, h2, h3, h4, h5, h6, p, address, blockquote, div, ul, li {
	margin: 0;
	padding: 0;
}
p {
	color:#4f2c07;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
}
object { 
	outline: none; 
}
a {
   outline: 0;
}
a:link {
	color: #4f2c07;
	text-decoration: none;
}
a:visited {
	color: #4f2c07;
	text-decoration: none;
}
a:hover {
	color: #e39802;
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
map area {
	outline: none;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* -------- header guide ----------
h1 : for link alt text
h2 : for main header
h3 : for features, ss headers, world tooltips
h3.multi-header : for multimedia headers
*/
h1, h2 {
	font-size: 10px;
	color: #4f2c07;
	line-height: 10px;
	font-weight: normal;
}
h3 {
	font-size: 22px;
	line-height: 30px;
	letter-spacing: 0px;
	color: #e39802;
	font-weight: 700;
	text-align: center;
	margin-bottom: 5px;
}
h3.multi-header {
	font-size: 48px;
	line-height: 48px;
	font-weight: 800;
	margin-bottom: 25px;
}

/* --------------- global styles ---------------- */
#wrapper {
	width: 1024px;
	text-align: left;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: .5px;
	margin: 0px auto;
	position: relative;
	padding: 0px;
	/*background: url(../_images/ref.png) no-repeat left top;
	height: 1600px;*/
}
header {
	width: 1024px;
	height: 218px;
	background: url(../_images/main-header.png) no-repeat left top;
	margin-bottom: 15px;
	position: relative;
	z-index: 10;
}
#logo {
	height: 180px;
	width: 577px;
	position: absolute;
	left: 258px;
	top: 28px;
}
#logo a {
	height: 180px;
	width: 577px;
	display: block;
}
#logo h1 {
	text-indent: -1000em;
}
#order {
	height: 64px;
	width: 70px;
	position: absolute;
	left: 49px;
	top: 71px;
}
#email {
	height: 52px;
	width: 56px;
	position: absolute;
	left: 849px;
	top: 31px;
}
#audio {
	height: 61px;
	width: 60px;
	position: absolute;
	left: 180px;
	top: 145px;
}
#fb {
	height: 51px;
	width: 32px;
	position: absolute;
	left: 854px;
	top: 151px;
}
nav {
    position: fixed; 
	z-index: 10;
    bottom: 0px; 
    width: 100%; 
    height: 121px; 
    background: url(../_images/main-nav_back.png) repeat-x left top;
}
nav h1 {
	text-indent: -1000em;
}
#nav {
    position: relative; 
    width: 1024px; 
    height: 121px; 
    background: url(../_images/main-nav.png) no-repeat left top;
	display: block;
  	margin-right: auto;
  	margin-left: auto;
}
#nav img {
	margin-top: 57px;	
	margin-left: 7px;
	float: left;
}
.nav1 {
	padding-left: 18px;
}
.nav2 {
	padding-left: 1px;
}
.nav7 {
	padding-left: 1px;
}
footer {
	width: 1024px;
	height: 300px;
	background: url(../_images/main-footer.png) no-repeat 10px top;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 13px;
	padding: 0;
	margin-top: 20px;
}
footer p {
	clear: left;
	padding-left: 45px;
	padding-top: 12px;
	color:#000;
	font-weight: 500;
	letter-spacing: 0;
}
#xseed {
	height: 43px;
	width: 110px;
	float: left;
	margin-top: 37px;
	margin-left: 36px;
}
#xseed a{
	height: 43px;
	width: 110px;
	display: block;
}
#xseed h1{
	text-indent: -1000em;
}
#marvelous {
	float: left;
	height: 60px;
	width: 102px;
	margin-top: 27px;
	margin-left: 127px;
}
#marvelous a{
	height: 60px;
	width: 102px;
	display: block;
}
#marvelous h1{
	text-indent: -1000em;
}
#esrb {
	float: left;
	height: 110px;
	width: 216px;
	margin-top: 10px;
	margin-left: 409px;
}
#esrb a{
	height: 110px;
	width: 216px;
	display: block;
}
#esrb h1{
	text-indent: -1000em;
}
#container-top {
	background-image: url(../_images/container-top.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 157px;
	width: 984px;
}
#container-middle {
	background-image: url(../_images/container-middle.png);
	background-repeat: repeat-y;
	background-position: left top;
	width: 984px;
	padding-top: 20px;
	padding-bottom: 1px;
}
#container-middle h3, #container-invisible h3{
	width: 846px;
	margin-top: 30px;
	display: block;
  	margin-right: auto;
  	margin-left: auto;
	text-align: center;
}
#container-middle p, #container-invisible p{
	width: 846px;
	margin-bottom: 30px;
	display: block;
  	margin-right: auto;
  	margin-left: auto;
}
#container-invisible p.large-bold-brown{
	width: 1017px;
}
#container-middle p:last-child {
    margin-bottom: 0px;
}
#container-invisible p.first {
    margin-top: -60px;
	position: relative;
	z-index: 2;
}
#container-bottom {
	background-image: url(../_images/container-bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 157px;
	width: 984px;
}
.subhead {
	padding-top: 40px;	
}
.subhead h1 {
	text-indent: -1000em;
}
.subhead-invisible {
	margin-top: -60px;
	position: relative;
	z-index: 0;	
}
.subhead-invisible h1 {
	text-indent: -1000em;
}
.image-frame {
	background-image: url(../_images/image-frame.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 523px;
	width: 854px;
	margin-bottom: 30px;
}
.image-frame img{
	margin-left: 17px;
	margin-top: 18px;
}

.ss-frame {
	background-image: url(../_images/ss-frame.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 276px;
	width: 433px;
	margin-top: 20px;
}
.ss-frame:first-child {
    margin-top: 5px;
}
.ss-frame img{
	margin-left: 17px;
	margin-top: 18px;
}
.divider {
	background-image: url(../_images/divider.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 24px;
	width: 853px;
	margin-bottom: 40px;
}
.large-bold-orange {
	font-size: 18px;
	letter-spacing: 0px;
	color: #e39802;
	font-weight: 600;
}
.large-bold-brown {
	font-size: 22px;
	letter-spacing: 0px;
	font-weight: 600;
	text-align: center;
}
.bold-brown {
	font-weight: 600;
}
.btn-orange,.btn-orange:focus,.btn-orange:active,.btn-orange.active{
	background: #e39802;
	color: #fff;
	padding: 6px 12px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 20px;
	box-shadow: none;
	border-radius: 0px;
	border: none;
	outline: none;
	text-decoration: none;
	text-shadow:none;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: .5px;
	font-size: 14px;
	line-height: 21px;
	font-weight: 600;
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		 -o-transition: all .3s linear;
			transition: all .3s linear;
}
.btn-orange:hover{
	cursor: pointer;
	background: #4f2c07;
	color: #fff;
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		 -o-transition: all .3s linear;
			transition: all .3s linear;
}

/* --------------------------- splash ------------------------- */
#splash {
	margin-top: 20px;
}

/* --------------------------- story ------------------------- */
span.story{
	font-size: 22px;
	letter-spacing: 0px;
	color: #e39802;
	font-weight: 600;
}

/* --------------------------- characters ------------------------- */

/* ---------------------- char main page -------------------- */
#char-world-container {
	background-image: url(../_images/char-world-container.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 769px;
	width: 1023px;
	padding-top: 3px;
	padding-left: 3px;
}

/* SHOWCASE CONTAINER (IDENTIFIER) */
	    #showcase-char {
			width:1024px;
			height: 763px;
			}
		
		/* THE ACTUAL IMAGE */
		.char_image {
			width:1017px;
			}

		/* BULLET */
		.char-bullet {
			width:22px;
			height:23px;
			}	
			
			/* TOOLTIP TAIL */
		.char-tooltip-down:before {  
		    content:' ';
    		display: block;
    		position: absolute;
   		 	left: 92px;
    		top: -8px;
    		width: 14px;
    		height: 14px;
    		border-color:rgba(79,44,7,1);
    		border-width: 1px;
			border-style: solid none none solid;
    		background-color: #faf2ea;
			/*box-shadow:0px 2px 2px 0px rgba(51,51,51,0.15);*/
    		transform: rotate(45deg);
    		-webkit-transform: rotate(45deg);
    		-moz-transform: rotate(45deg);
	}
	
	.char-tooltip-left:before {  
		    content:' ';
    		display: block;
    		position: absolute;
   		 	left: 188px;
		    top: 16px;
    		width: 14px;
    		height: 14px;
    		border-color:rgba(79,44,7,1);
    		border-width: 1px;
    		border-style: solid solid none none;
    		background-color: #faf2ea;
			/*box-shadow:0px 2px 2px 0px rgba(51,51,51,0.15);*/
    		transform: rotate(45deg);
    		-webkit-transform: rotate(45deg);
    		-moz-transform: rotate(45deg);
	}
		
		/* TOOLTIP */
		.char-tooltip-down, 
		.char-tooltip-left {
			overflow:visible!important;
		  	position: relative;
			width: 195px;
			height: 47px;
			/*cursor:pointer;*/
			background:#faf2ea;
			border-radius:2px;
			border:1px solid rgba(79,44,7,1);
			box-shadow:2px 2px 2px 0px rgba(51,51,51,0.15);
			}
						
			/* TOOLTIP TEXT */
		#container-invisible .char-tooltip-down h3,
		#container-invisible .char-tooltip-left h3 {
			width: 195px;
			color: #4f2c07;
			font-size:24px;
			line-height:24px;
			margin-top: 0px;
			padding-top: 11px;
			}
			
			.char-name {
			width: 195px;
			height: 47px;
				}
			
		#container-invisible .char-tooltip-down .char-name:hover h3,
		#container-invisible .char-tooltip-left .char-name:hover h3 {
			color: #e39802;
			text-decoration: none;
			}
			
/* ---------------------- char light box -------------------- */
#charbox-wrapper {
	/*width: 870px;*/
	width: 900px;
	height: 670px;
	text-align: left;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: .5px;
	margin: 0px auto;
	position: relative;
	padding: 0px;
	background-color: #faf2ea;
	/*background: url(../_images/charbox-ref.jpg) no-repeat left top;*/
}
#charbox-sect-heading {
	width: 100%;
	height: 86px;
	background-color: #9f876d;
}
#charbox-sect-heading span {
	color: #fff;
	font-size: 24px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0px;
	font-weight: 700;
	text-align: left;
	margin-bottom: 0px;
	clear: none;
}
#charbox-sect-heading p {
	color: #fff;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
}
#char {
	float: left;
	margin-left: 30px;
}
#char-text {
	float: left;
	width: 430px;
}
#char-text h3 {
	font-size: 48px;
	line-height: 48px;
	font-weight: 800;
	text-align: left;
	margin-top: 25px;
}
#char-text p {
	margin-top: 10px;
	text-align: left;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: .5px;
}
#audio-4-holder {
	width: 300px;
	margin-top: 18px;
	}
#audio-6-holder {
	width: 400px;
	margin-top: 18px;
	}
	#char-text .char-btn-orange,.char-btn-orange:focus,.char-btn-orange:active,.char-btn-orange.active{
	float: left;
	width: 124px;
	background: #e39802;
	color: #fff;
	padding: 8px 0px 8px 0px;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-right: 5px;
	box-shadow: none;
	border-radius: 0px;
	border: none;
	outline: none;
	text-decoration: none;
	text-shadow:none;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: .5px;
	font-size: 12px;
	line-height: 14px;
	text-align: center;
	font-weight: 600;
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		 -o-transition: all .3s linear;
			transition: all .3s linear;
}
#char-text .char-btn-orange:hover{
	cursor: pointer;
	background: #4f2c07;
	color: #fff;
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		 -o-transition: all .3s linear;
			transition: all .3s linear;
}

/* --------------------------- world ------------------------- */
/* SHOWCASE CONTAINER (IDENTIFIER) */
	    #showcase-world {
			width:1024px;
			height: 850px;
			/*width:1017px;
			height: 763px;*/
			}
		
		/* THE ACTUAL IMAGE */
		.world_image {
			width:1017px;
			/*height: 763px;*/
			}

		/* BULLET */
		.world-bullet {
			width:26px;
			height:43px;
			}	
		
		/* TOOLTIP TAIL */
		.world-tooltip-down:before {  
		    content:' ';
    		display: block;
    		position: absolute;
   		 	left: 190px;
    		top: -8px;
    		width: 14px;
    		height: 14px;
    		border-color:rgba(79,44,7,1);
    		border-width: 1px;
			border-style: solid none none solid;
    		background-color: #faf2ea;
			/*box-shadow:0px 2px 2px 0px rgba(51,51,51,0.15);*/
    		transform: rotate(45deg);
    		-webkit-transform: rotate(45deg);
    		-moz-transform: rotate(45deg);
	}
	
	.world-tooltip-right:before {  
		    content:' ';
    		display: block;
    		position: absolute;
   		 	left: -8px;
		    top: 15px;
    		width: 14px;
    		height: 14px;
    		border-color:rgba(79,44,7,1);
    		border-width: 1px;
    		border-style: none none solid solid;
    		background-color: #faf2ea;
			/*box-shadow:0px 2px 2px 0px rgba(51,51,51,0.15);*/
    		transform: rotate(45deg);
    		-webkit-transform: rotate(45deg);
    		-moz-transform: rotate(45deg);
	}
	
	.world-tooltip-left:before {  
		    content:' ';
    		display: block;
    		position: absolute;
   		 	left: 375px;
		    top: 15px;
    		width: 14px;
    		height: 14px;
    		border-color:rgba(79,44,7,1);
    		border-width: 1px;
    		border-style: solid solid none none;
    		background-color: #faf2ea;
			/*box-shadow:0px 2px 2px 0px rgba(51,51,51,0.15);*/
    		transform: rotate(45deg);
    		-webkit-transform: rotate(45deg);
    		-moz-transform: rotate(45deg);
	}
		
		/* TOOLTIP */
		.world-tooltip-down, 
		.world-tooltip-right, 
		.world-tooltip-left {
			overflow:visible!important;
		  	position: relative;
			width: 364px;
			/*height: 440px;*/
			/*cursor:pointer;*/
			padding-left: 15px;
			padding-right: 3px;
			padding-top: 15px;
			background:#faf2ea;
			border-radius:2px;
			border:1px solid rgba(79,44,7,1);
			box-shadow:2px 2px 2px 0px rgba(51,51,51,0.15);
			}
			
			.unknown {
			padding-top: 5px;
			}
		
		/* TOOLTIP TEXT */
		#container-invisible .world-tooltip-down p,
		#container-invisible .world-tooltip-right p,
		#container-invisible .world-tooltip-left p {
			width: 347px;
			font-size:14px;
			line-height:21px;
			letter-spacing: .5px;
			margin-bottom: 10px;
			}
			
		#container-invisible .world-tooltip-down h3,
		#container-invisible .world-tooltip-right h3,
		#container-invisible .world-tooltip-left h3 {
			width: 350px;
			font-size:22px;
			line-height:21px;
			margin-top: 2px;
			}
			
			/* TOOLTIP IMAGE */
		#container-invisible .world-tooltip-down img,
		#container-invisible .world-tooltip-right img,
		#container-invisible .world-tooltip-left img {
			text-align: center;
			border:1px solid rgba(79,44,7,1);
			}

/* --------------------------- gameplay ------------------------- */
#game h3{
	margin-top: 21px;
}
#game p{
	margin-bottom: 2px;
}
#game p:last-child {
    margin-bottom: 0px;
}

/* --------------------------- multimedia ------------------------- */
#multi #container-middle {
	padding-top: 1px;
}
#multi .divider {
	margin-top: 5px;
	margin-bottom: 45px;
}
#multi .btn-orange,.btn-orange:focus,.btn-orange:active,.btn-orange.active{
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 0px;
}
.walls {
	width: 640px;
	margin-top: -15px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
}
.walls-last {
	width: 640px;
	margin-top: -15px;
	margin-right: auto;
	margin-left: auto;
    margin-bottom: 25px;
}
.icons {
	width: 462px;
	margin-right: auto;
	margin-left: auto;
}
.icons img {
	margin-top: 10px;
	margin-right: 10px;
	border: 1px solid #86694b;
}

/* --------------------------- manga 2 ------------------------- */
#manga2-wrapper {
	max-width: 85%;
	max-height: 85%;
	text-align: left;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: .5px;
	margin: 0px auto;
	position: relative;
	z-index: 1;
	padding: 0px;
	}
/*.wowbook-toolbar {
	box-sizing: content-box !important;
	position: absolute;
	left: 600px;
	top: 385px;
}*/
.wowbook-controls {
	border-radius: 6px;
	width: auto;
}
#mybook {
	margin-top: 10px;
}

/* hide book to avoid flash of unstyled content */
.js #mybook {
	margin-left: -10000px; width: 100%;
}
.manga-text {
	/*padding-top: 270px;*/
	padding-top: 47%;
	padding-left: 40px;
}
.manga-text p {
	/*width: 400px;*/
	width: 90%;
	/*font-size: 22px;*/
	font-size: 110%;
	line-height: 30px;
	letter-spacing: 0px;
	font-weight: 400;
	text-align: left;
}
#manga-update {
    position: fixed; 
	z-index: 0;
    bottom: 0px; 
    width: 100%; 
    height: 30px; 
    background-color:rgba(255, 255, 255, 0.5);
}
#manga-update p {
	/*width: 150px;*/
    margin-top: 4px;
}
#manga-update a {
	/*float: left;
    margin-right: 10px;*/
}
.wowbook-page-number {
	color: #fff;
}

/* toolbar fontawesome icons */
.wowbook-fontawesome .wowbook-control-first i:before {
	content: "\f054\f054"; /* fa-chevron-right */
	letter-spacing: -6px;
	margin-left: -5px;
}
.wowbook-fontawesome .wowbook-control-back i:before {
	content: "\f054"; /* fa-chevron-right */
}

.wowbook-fontawesome .wowbook-control-next i:before {
	content: "\f053"; /* fa-chevron-left */
}

.wowbook-fontawesome .wowbook-control-last i:before {
	content: "\f053\f053"; /* fa-chevron-left */
	letter-spacing: -6px;
	margin-left: -10px;
}