@charset "utf-8";
/* CSS Document */

* {
  margin: 0;
}

html {
	height: 100%;
}

body {
	margin: 0px 0px 0px 0px;
	background-color: #f2e9da;
	height: 100%;
	padding: 0;
	word-wrap: break-word !important;
	font-size: 16px;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

#slideshow, img.bgM {
    width:1920px;
    height: 1080px;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left:-480px;
    z-index:-9999;
}

p { text-align: center; }
 .toggle, [id^=drop] {
 display: none;
}

ul {
	margin-bottom:3%;
}

li {
	margin-right:5%;
	margin-left:5%;
	font-family: 'EB Garamond', serif;
	font-size: 120%;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom:2%;
	text-align:left;
	list-style: none;
}

h1 {
	font-size:300%;
	font-family: 'kingthings_calligraphica_2Rg', Arial, sans-serif;
	text-align:center;
	color:#F00;
	text-shadow:
		2px 2px 0 #333,
		-1px -1px 0 #333,  
		1px -1px 0 #333,
		-1px 1px 0 #333,
		1px 1px 0 #333;	
}

h2,h3,h4,h5,h6  {
	font-family: 'EB Garamond', serif;
	margin-right:5%;
	margin-left:5%;
	color:#C0C0C0;
	text-shadow:
		2px 2px 0 #333,
		-1px -1px 0 #333,  
		1px -1px 0 #333,
		-1px 1px 0 #333,
		1px 1px 0 #333;	
}

h2 {
	font-size:175%;
}

h3 {
	font-size:150%;
}

h4 {
	font-size:125%;
}

h5 {
	font-size:100%;
}

h6 {
	font-size:75%;
}

hr {
   border : 0;
   height : 72px;
   background : url(images/linebreak.png) 50% 0 no-repeat;
   margin : 1em 0;
}

.clear {
	clear:both;
}

.center {
	text-align:center;
}

.right {
	float: right;
	padding-left:3%;
	padding-right:3%;
}

/* Section Blocks
--------------------------------------------- */
article {
	width:1000px;
	margin:0 auto;
	overflow:auto;
	min-height: 100%;
	background-image: url(images/content-background.png);
	background-repeat:repeat-y;
	z-index:-5;	
}

article p {
	margin-right:5%;
	margin-left:5%;
	font-family: 'EB Garamond', serif;
	font-size: 120%;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom:2%;
	text-align:left;
}

.characters {
	width:935px;
	height:530px;
	margin-top:20px;
}

/* Nav
--------------------------------------------- */

nav {
	width:100%;
	height:86px;
	text-align:center;
	margin:0 auto;
	background:url(images/nav-bar-background.jpg);
	background-repeat:repeat-x;
}

#logo {
	display: block;
	left: 0px;
	top: 0px;
	position:absolute;
	z-index:15;
}

nav:after {
	content: "";
	display: table;
	clear: both;
}

nav ul {
	float:right;
	padding: 0;
	margin: 0;
	margin-top:10px;
	list-style: none;
	position: relative;
}

nav ul li {
	margin: 0px;
	display: inline-block;
	float: left;
}

nav a {
	display: block;
	font-family: 'kingthings_calligraphica_2Rg', Arial, sans-serif;
	color: #FFF;
	margin:2px;	
	font-weight:bold;
	font-size:220%;
	padding-left:3px;
	padding-right:16px;
	text-shadow:
		2px 2px 0 #333,
		-1px -1px 0 #333,  
		1px -1px 0 #333,
		-1px 1px 0 #333,
		1px 1px 0 #333;
	text-decoration: none;
}

nav a:hover { color:#ff0000; }

/* gameplay &
--------------------------------------------- */

.gp {
    max-width: 704px;
    max-height: 419px;
    margin-right: auto;
    margin-left: auto;
}

/* Multimedia
--------------------------------------------- */
#wallpapers #icons {
	margin-top: 21px;
}

#wallpapers p {
	max-width: 700px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6px;
}
#wallpapers a {
	font-family: 'EB Garamond', serif;
	font-size: 120%;
	font-weight: bold;
	color:#000;
	text-decoration:none;
	/*for 3 links*/
	margin-right: 63px;
	margin-left: 37px;
}

#wallpapers a:hover {
	color:#333;
}

.ss {
    max-width: 628px;
    max-height: 419px;
    margin-right: auto;
    margin-left: auto;
}

#icons p {
	margin-top: 40px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

#icons img {
	margin-right:2%;
	border-style: solid;
    border-width: 1px;
	color:#663300;
}

/* Footer
--------------------------------------------- */
footer {
	display: block;
  	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	text-align: center;
}

footer p {
	font-family: 'EB Garamond', serif;
	font-size:100%;
	padding-top: 10px;
	padding-left:5%;
	clear: left;
}
  
.container-fluid {
	margin-right: 0 auto;
	margin-left: 0 auto;
	padding-left:10%;
}

.hidden-link {
	font-size: 10px;
	color: #FFF;
	line-height: 10px;
	text-indent: -1000em;
}

#falcom {
	background: url(images/logo-falcom.png) no-repeat left top;
	background-size: 162px 59px;
	width: 162px;
	height: 59px;
	display: block;
	float: left;
	padding-left: 0px;
	padding-right: 170px;
}

#marvelous a {
	background: url(images/logo-marvelous.png) no-repeat left top;
	background-size: 113px 51px;
	width: 113px;
	height: 51px;
	display: block;
	float: left;
	padding-left: 0px;
	padding-right: 170px;
}

#xseed a {
	background: url(images/logo-xseed-games.png) no-repeat left top;
	background-size: 161px 51px;
	width: 161px;
	height: 51px;
	display: block;
	float: left;
	padding-left: 90px;
	padding-right: 0px;
}

@media all and (max-width : 800px) {
	#falcom {
		padding-top: 40px;
	}
	
	#marvelous a {
		padding-bottom: 40px;
	}
	
	#xseed a {
		padding-bottom: 40px;
	}
	
	footer p {
		padding-left:0px;
	}
}

/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1920px) {
	
	#logo img {
		width: 379px;
		height: 225px;
		width: auto\9; /* ie8 */
	}
}

@media all and (max-width : 1280px) {
	
	#logo img {
		width: 145px;
		height: 86px;
		width: auto\9; /* ie8 */
	}
}

@media all and (max-width : 1024px) {

	#logo {
		display: block;
		padding: 0;
		text-align: center;
		float: none;
	}

	#logo img {
		width: 145px;
		height: 86px;
		width: auto\9; /* ie8 */
	}

	nav { 
		margin: 0;
		min-width:100%;
		font-family: 'kingthings_calligraphica_2Rg', Arial, sans-serif;
	}

	nav ul {
		float:none;
	}

	.toggle + a,
	 .menu { display: none; }

	.toggle {
		display: block;
		padding-top:20px;
		color: #FFF;
		font-size: 200%;
		line-height: 40px;
		text-decoration: none;
	}

	.toggle:hover { color:#ff0000; }

	[id^=drop]:checked + ul { display: block; }

	nav ul li {
		display: block;
		min-width: 100%;
		height: 41px;
		background:url(images/nav-mobile-background.jpg);
		background-color: #663300;
		line-height:1.4;
		font-size: 75%;

	}

	nav ul ul .toggle,
	 nav ul ul a { padding: 0 40px; }
	 
	@media all and (max-width : 960px) {

	#slideshow {
		display:none;
	}

	article {
		width:100%;
		background-image: url(images/background-mobile.jpg);
		background-repeat: repeat !important;
		z-index:-5;	
	}
}

@media all and (max-width : 800px) {

	.characters {
		width:100%;
		height:530px;
		margin-top:20px;
}	

@media all and (max-width : 480px) {

	.characters {
		width:100%;
		height:530px;
		margin-top:20px;
		padding-bottom:11%;
}	

@media all and (max-width : 330px) {
	
	
	#logo img {
		width: 109px;
		height: 65px;
		width: auto\9; /* ie8 */
	}

	nav ul li {
		display: block;
		width: 94%;
	}
	
	.characters {
		width:100%;
		height:100%;
		margin-top:20px;
		padding-bottom:11%;
}		
	
	.right {
		width:50%;
		height:0 auto;
	}	
}