/*
-----------------------------------------------
Dragon Quest 9 Stylesheet
(c)2010 Deep Focus - MJS
----------------------------------------------- */

@import url("reset.css");
@import url("globalnav.css");


body{
	margin:0;
	font-size:12px;
	line-height: normal;
	font-family: Georgia, times, serif;
	color:#000;
	background: #1b1813 url(../images/mapTest.jpg) repeat-y top center;
	line-height: normal
}

#wrap {
	width: 640px;
	margin: 0 auto;
/* 	background: #fde1bc; */
	min-height: 400px;
}


p {padding-bottom:15px;}


a {color:#936222; font-weight: bold;}
a:hover {color:#B86D0D; }

p.learn {margin-top:-10px; padding-bottom:20px;}

/* Nav
---------------- */
#header {
	background: url(../images/bg-header.png) no-repeat center 0;
	position: relative;
}

#header h1 {
	position: relative;
	height: 1px;
	width: 640px;
	margin: 0 auto;
}

#header h1 a {
	position: absolute;
	display: block;
	left: 240px;
	width:160px;
	height: 100px;
	text-indent: -9999em;
}


#nav {
	height: 90px;
	width: 640px;
	margin: 0 auto;
	padding-top:48px;
}

#nav li{
	float: left;
}

#nav li a {
	display: block;
	color: #FFF;
	text-decoration: none;
	height: 35px;
	background-image: url(../images/topnav.png);
	background-repeat: no-repeat;
	text-indent: -99999em;
}

.french #nav li a {background-image: url(../images/topnav-fr.png)}
.spanish #nav li a {background-image: url(../images/topnav-sp.png)}

.nav-about a {background-position: 0 0; width: 50px;}
.nav-mg a {background-position: -52px 0; width:100px; }
.nav-vg a {background-position: -152px 0; width:90px;}
.nav-dl a {margin-left:200px; background-position: -442px 0; width: 100px; }
.nav-dq a {background-position: -542px 0; width: 95px;}

.nav-about a:hover {background-position: 0 -74px;}
.nav-mg a:hover {background-position: -52px -74px;}
.nav-vg a:hover {background-position: -152px -74px;}
.nav-dl a:hover {background-position: -442px -74px; }
.nav-dq a:hover {background-position: -542px -74px;}

#current.nav-about a, #current.nav-about a:hover {background-position: 0 -37px;}
#current.nav-mg a, #current.nav-mg a:hover {background-position: -52px -37px;}
#current.nav-vg a, #current.nav-vg a:hover {background-position: -152px -37px;}
#current.nav-dl a, #current.nav-dl a:hover {background-position: -442px -37px; }
#current.nav-dq a, #current.nav-dq a:hover {background-position: -542px -37px;}

/* French and Spanish Nav */
.french #nav li a {background-image: url(../images/topnav-fr.png)}
.spanish #nav li a {background-image: url(../images/topnav-sp.png)}

.french .nav-about a, .spanish .nav-about a {background-position: 0 0; width: 60px;}
.french .nav-mg a, .spanish .nav-mg a {background-position: -65px 0; width:90px; }
.french .nav-vg a, .spanish .nav-vg a {background-position: -162px 0; width:90px;}
.french .nav-dl a, .spanish .nav-dl a {margin-left:200px; background-position: -432px 0; width: 100px; }
.french .nav-dq a, .spanish .nav-dq a {background-position: -548px 0; width: 100px;}

.french .nav-about a:hover, .spanish .nav-about a:hover {background-position: 0 -74px;}
.french .nav-mg a:hover, .spanish .nav-mg a:hover {background-position: -65px -74px;}
.french .nav-vg a:hover, .spanish .nav-vg a:hover {background-position: -162px -74px;}
.french .nav-dl a:hover, .spanish .nav-dl a:hover {background-position: -432px -74px; }
.french .nav-dq a:hover, .spanish .nav-dq a:hover {background-position: -548px -74px;}

.french #current.nav-about a, .french #current.nav-about a:hover, .spanish #current.nav-about a, .spanish #current.nav-about a:hover {background-position: 0 -36px;}
.french #current.nav-mg a, .french #current.nav-mg a:hover, .spanish #current.nav-mg a, .spanish #current.nav-mg a:hover {background-position: -65px -36px;}
.french #current.nav-vg a, .french #current.nav-vg a:hover, .spanish #current.nav-vg a, .spanish #current.nav-vg a:hover {background-position: -162px -36px;}
.french #current.nav-dl a, .french #current.nav-dl a:hover, .spanish #current.nav-dl a, .spanish #current.nav-dl a:hover {background-position: -432px -36px; }
.french #current.nav-dq a, .french #current.nav-dq a:hover, .spanish #current.nav-dq a, .spanish #current.nav-dq a:hover {background-position: -548px -36px;}




h2 {
	color:#401f02;
	text-transform: uppercase;
	font-size:18px;
	letter-spacing: .5px;
	margin-bottom: 10px;
}

/* SubNav
---------------- */
#subnav {
	float:left;
	width:165px;
	font-size:13px;
	font-family: arial, sans-serif;
}

#subnav ul {
	background: url(../images/bg-subnav.png) no-repeat top left;
	padding:30px 5px 0 0;
}

#subnav span {
	background: url(../images/bg-subnav.png) no-repeat bottom left;
	display: block;
	width:165px;
	height: 30px;
}

#subnav a {
	display: block;
	padding:6px 15px;
	border-bottom:1px solid #E4C9A4;
	color:#402702;
	text-decoration: none;
	font-weight: normal;
}
#subnav a.last {
	border: none;
}

#subnav a:hover {
	background: #945208;
	color:#FFF;
}


#subnav li.current a, #subnav li.current a:hover {
	background: #3A2F29;
	color:#FFF;
}


.about {
	margin-left:180px;
	width: 480px;
/* 			background: url(../images/bg-about.png) repeat-y top left; */

}

h3 {
	color:#401f02;
	text-transform: uppercase;
	font-size:14px;
	letter-spacing: -.2px;
	margin-bottom: 3px;
}

.about h3 {
	border-bottom:1px solid #d79f5f;
}

.about div.about-main {
	padding: 0 45px 0 20px;
	background: url(../images/bg-about.png) repeat-y top left;
}

/*
.about div img {
	width: 200px;
}
*/

.about div.about-left, .about div.about-right {
	padding-bottom:10px;
	margin-bottom:20px;
	border-bottom:2px solid #945208;
}


.about div.last, .about div.last {
	padding-bottom:0;
	margin-bottom:0;
	border-bottom:none;
}

.about div.about-left img {
	float:left;
	margin:0 10px 10px 0;
	position: inherit;
}

.about div.about-right img {
	float:right;
	margin:0 0 10px 10px;
}

.about div.about-left p, .about div.about-left h3 {
	margin-left:212px;
}

.about div.about-right p, .about div.about-right h3 {
	margin-right:212px;
}



.about .btm {
	display: block;
	height: 67px;
	background: url(../images/bg-about-btm.png) no-repeat bottom left;
}

.about .top {
	display: block;
	height: 30px;
	background: url(../images/bg-about-tp.png) no-repeat top left;
}

.clear {
	clear:both;
}


#main {
	background: url(../images/bg-main.png) repeat-y top left;
	padding: 0 45px 0 35px;
}


#main-top {
	height: 37px;
	background: url(../images/bg-main-top.png) no-repeat top left;
}

#main-btm {
	height: 50px;
	background: url(../images/bg-main-btm.png) no-repeat bottom left;
}



#main div.last {
	padding-bottom:0;
	margin-bottom:0;
	border-bottom:none;
}


#landing {
	background: url(../images/landing.png) no-repeat top center;
	height: 400px;
}

.french #landing {background: url(../images/landing-fr.png) no-repeat top center;}
.spanish #landing {background: url(../images/landing-sp.png) no-repeat top center;}


/* Guide */


div.guide-left, div.guide-right {
	padding-bottom:10px;
	margin-bottom:20px;
	border-bottom:2px solid #945208;
}


div.last, div.last {
	padding-bottom:0;
	margin-bottom:0;
	border-bottom:none;
}

div.guide-left img {
	float:left;
	margin:0 10px 10px 0;
	position: inherit;
}

div.guide-right img {
	float:right;
	margin:0 0 10px 10px;
}





/* Monsters */

.monster-top {
	height: 50px;
	background: url(../images/bg-monster-top.png) no-repeat top left;
}

.monster-btm {
	height: 80px;
	margin-bottom: 30px;
	background: url(../images/bg-monster-btm.png) no-repeat bottom left;
}

.monsters {
	background: #fde1bc url(../images/bg-monster.png) top left repeat-y;
	padding:20px 30px;
}

.description {
	padding: 80px 0 0 0;
	color:#333;
}

.description h2 {
	color:#401f02;
	text-transform: uppercase;
	font-family: Tahoma, sans-serif;
	font-size:16px;
	letter-spacing: -.5px;
}

.left {
	padding: 0 340px 0 50px;
}

.right {
	padding: 0 30px 0 390px;
}

.left, .right {height:300px; position: relative;}

.left img {position: absolute; right:0; top:-10px;}
.right img {position: absolute; left:0;  top:-10px;}



/* Footer
---------------- */

#footer {
	background: url(../images/bg-footer.png) no-repeat top center;
	color: #a94a08;
}

.spanish #footer {background: url(../images/bg-footer-sp.png) no-repeat top center;}


#footer-wrap {
	background: #f0b861 url(../images/bg-footer-wrap.jpg) no-repeat center top;
}

#footer .cta{
	margin:0 auto;
	padding:25px 0 0 0;
	list-style:none;
	text-align:center;
	width: 640px;
	height: 90px;

}

.spanish #footer .cta {padding-left:180px;}

#lang {
	text-align: center;
	padding-bottom:32px;
	color:#d0c09a;
/* 	text-indent: -9999em; */
}

#lang a {
	color:#d0c09a;
	font-family: Arial, sans-serif;
	font-size:11px
}

#lang a:hover {
	color: #FFF;
}

#footer .cta li{
	float: left;
}

#footer .cta a {
	display: block;
	width:212px;
	height: 60px;
	padding:0;
	margin:0;
	text-indent: -9999em;
	background-image: url(../images/bg-footer-nav.png);
	background-repeat: no-repeat;
	
}

.french #footer .cta a {background-image: url(../images/bg-footer-nav-fr.png);}
.spanish #footer .cta a {background-image: url(../images/bg-footer-nav-sp.png);}

.preorder a {background-position: 36px 19px;}
.newsletters a {background-position: -178px 9px; }
.iwata a {background-position: -388px 19px;}

.spanish #footer .cta .preorder a {background-position: 28px 19px; width:230px}
.spanish #footer .cta .preorder a:hover {background-position: 28px -61px;}


.spanish #footer .cta .iwata a {background-position: -395px 19px;}
.spanish #footer .cta .iwata a:hover {background-position: -395px -61px;}


.french #footer .cta .preorder a {background-position: 28px 12px;}
.french #footer .cta .preorder a:hover {background-position: 28px -68px;}

.french #footer .cta .iwata a {background-position: -395px 19px;}
.french #footer .cta .iwata a:hover {background-position: -395px -61px;}


.preorder a:hover {background-position: 36px -61px;}
.newsletters a:hover {background-position: -178px -71px; }
.iwata a:hover {background-position: -388px -61px;}

#footer .legal{
	margin:0 auto;
	padding:0;
	list-style:none;
	text-align:center;
	width: 640px;
	font-family: Arial, sans-serif
}

#footer .second {
	padding:8px 0 0 0;
}


#footer .legal li{
	display:inline-block;
	*display:inline;
	padding:0 8px;
}

#footer .legal li a {
	display: block;
	font-weight: normal;
}

a.privacy {
	color:#333333;
	font-size:8px;
	text-decoration:none;
	text-indent:0;
	text-transform:uppercase;
	width:150px;
}

#footer .legal img{vertical-align:middle;}

.copy{
	text-align:center;
	color:#803501;
	font-size:9px;
	line-height:13px;
	padding:22px 0 20px 0;
}
.copy p{padding:0; font-family: Arial, sans-serif}