@CHARSET "UTF-8";
/* --------------------- RUNE FACTORY 4 ---------------------- */

@import url('https://fonts.googleapis.com/css?family=Petrona|Roboto:400,500,700&display=swap');

/* --------------- global styles ------------------------------------- */
html { height:100%; }
body {
	margin: 0;
	padding: 0;
	border: 0;
	height:100%;
	min-height:100%;
	/*min-width: 1000px;*/
    min-width: 1024px;
	background: #FFFFFF url(../images/global-background.jpg) repeat left top;
	color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    /*font-weight: 400;*/
}
#wrapper { 
	position: relative; 
	float: left;
	width: 100%;
	min-height: 100%;
}

.clear { clear: both; }

object { 
	outline: none; 
}
a {
   outline: 0;
}

/* -------- header guide ----------
h1 : for link alt text
*/
h1 {
	font-size: 0.73em;
	color: #000;
	line-height: 1.5em;
	font-weight: normal;
}
#header {
	margin: 0px auto;
	width: 986px;
	background: url(../images/global-headerback.png) no-repeat left top;
	height: 173px;
    font-family: 'Petrona', serif;
    font-size: 16.5px;
}
#header a {    
    text-shadow: rgb(252, 248, 227) 2px 0px 0px, rgb(252, 248, 227) 1.75517px 0.958851px 0px, rgb(252, 248, 227) 1.0806px 1.68294px 0px, rgb(252, 248, 227) 0.141474px 1.99499px 0px, rgb(252, 248, 227) -0.832294px 1.81859px 0px, rgb(252, 248, 227) -1.60229px 1.19694px 0px, rgb(252, 248, 227) -1.97998px 0.28224px 0px, rgb(252, 248, 227) -1.87291px -0.701566px 0px, rgb(252, 248, 227) -1.30729px -1.5136px 0px, rgb(252, 248, 227) -0.421592px -1.95506px 0px, rgb(252, 248, 227) 0.567324px -1.91785px 0px, rgb(252, 248, 227) 1.41734px -1.41108px 0px, rgb(252, 248, 227) 1.92034px -0.558831px 0px;
}
#header a:link, #nav a:visited, #nav a:active {
	color: #3ca0b9;
	text-decoration: none;
}
#header a:hover {
    color: #7b6d1f;
	text-decoration: none; 
}
#fb {
	height: 38px;
	width: 39px;
	margin-top: 39px;
	margin-left: 235px;
	float: left;
}
#fb a{
	background: url(../images/global-fb.jpg) no-repeat left top;
	height: 38px;
	width: 39px;
	display: block;
}
#fb a:hover {
	border: none;
	background: url(../images/global-fb.jpg) no-repeat right top;
}
#fb h1{
	text-indent: -1000em;
}
#audio {
	float: left;
	height: 35px;
	width: 41px;
	margin-top: 43px;
	margin-left: 456px;
}
#order {
	clear: right;
	float: left;
	height: 17px;
	width: 119px;
	margin-top: 27px;
	margin-left: 186px;
}
#logo {
	height: 95px;
	width: 342px;
	float: left;
	margin-left: 10px;
}
#logo a{
	height: 95px;
	width: 342px;
	display: block;
}
#logo a:hover {
	border: none;
}
#logo h1{
	text-indent: -1000em;
}
#order2 {
	float: left;
	height: 17px;
	width: 150px;
	margin-top: 28px;
    margin-left: 50px;
}
#order a:hover, #order2 a:hover {
    -webkit-transition: all .15s linear;
	   -moz-transition: all .15s linear;
		-ms-transition: all .15s linear;
		 -o-transition: all .15s linear;
			transition: all .15s linear;
}
#order3 {
	position: absolute;
    top: -29px;
    left: -44px;
    z-index: 1;
	height: 143px;
	width: 297px;
}
#order3 img {
	height: 143px;
	width: 297px;
}
#order3 a:hover {
	-webkit-transition: all .2s linear;
	   -moz-transition: all .2s linear;
		-ms-transition: all .2s linear;
		 -o-transition: all .2s linear;
			transition: all .2s linear;
			opacity: 0.6;
}
#nav {
	margin: 0px auto;
    width: 1024px;
	height: 36px;
    list-style: none;
    font-family: 'Petrona', serif;
    font-size: 15.5px;
}
#nav li {
    float: left;
    margin-right: 18px;
    margin-left: 18px;
    padding-top: 6px;
}
#nav a {    
    text-shadow: rgb(252, 248, 227) 2px 0px 0px, rgb(252, 248, 227) 1.75517px 0.958851px 0px, rgb(252, 248, 227) 1.0806px 1.68294px 0px, rgb(252, 248, 227) 0.141474px 1.99499px 0px, rgb(252, 248, 227) -0.832294px 1.81859px 0px, rgb(252, 248, 227) -1.60229px 1.19694px 0px, rgb(252, 248, 227) -1.97998px 0.28224px 0px, rgb(252, 248, 227) -1.87291px -0.701566px 0px, rgb(252, 248, 227) -1.30729px -1.5136px 0px, rgb(252, 248, 227) -0.421592px -1.95506px 0px, rgb(252, 248, 227) 0.567324px -1.91785px 0px, rgb(252, 248, 227) 1.41734px -1.41108px 0px, rgb(252, 248, 227) 1.92034px -0.558831px 0px;
}
#nav a:link, #nav a:visited, #nav a:active {
	color: #7b6d1f;
	text-decoration: none;
}
#nav a:hover {
    color: #3ca0b9;
	text-decoration: none; 
    -webkit-transition: all .15s linear;
	   -moz-transition: all .15s linear;
		-ms-transition: all .15s linear;
		 -o-transition: all .15s linear;
			transition: all .15s linear;
}
#nav a.on {
    color: #3ca0b9;
}
#nav li.whats-new {
    background: url("../images/whats-new-back.png") no-repeat left top;
    background-size: cover;
    background-color: rgba(252, 248, 227, 0.7);
}
#pc-system-container {
    width: 100%;
    background-color: #f9f5d9;
}
#pc-system {
    margin: 0 auto;
    padding-top: 20px;
	width: 1024px;
    height: 156px;
    color: #000000;
    font-size: 12px;
}
#pc-system h2 {
	text-align: center;
    font-weight: 700;
    margin-bottom: 10px;
}
#pc-system p {
	width: 330px;
    float: left;
}
#pc-system p.first {
	margin-left: 220px;
}
#footer {
	margin: 0 auto;
	width: 1024px;
	height: 255px;
	display: block;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.6em;
	color: #000000;
	background: url(../images/global-legals.png) no-repeat left -10px;
	line-height: 1.25em;
}
#footer p {
	padding-top: 125px;
    padding-bottom: 7px;
	clear: left;
}
#xseed {
	height: 43px;
	width: 110px;
	margin-top: 29px;
    margin-left: 28px;
	float: left;
}
#xseed a{
	height: 43px;
	width: 110px;
	display: block;
}
#xseed a:hover {
	border: none;
}
#xseed h1{
	text-indent: -1000em;
}
#marvelous {
	float: left;
	height: 70px;
	width: 90px;
	margin-top: 11px;
	margin-left: 44px;
}
#marvelous a{
	height: 70px;
	width: 90px;
	display: block;
}
#marvelous a:hover {
	border: none;
}
#marvelous h1{
	text-indent: -1000em;
}

/* Layers
---------------------------------------------------------------------*/
.layer-splash {
	background: url('../images/layer-splash.jpg') top;
}
#splash .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#splash .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-story {
	background: url('../images/layer-story.jpg') top;
}
#story .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#story .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-feat {
	background: url('../images/layer-feat.jpg') top;
}
#feat .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#feat .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-new {
	/*background: url('../images/layer-new.jpg') top;*/
    background: url('../images/layer-multi.jpg') top;
}
#new .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#new .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-land {
	background: url('../images/layer-land.jpg') top;
}
#land .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#land .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-char {
	background: url('../images/layer-char.jpg') top;
}
#char .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#char .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-farm {
	background: url('../images/layer-farm.jpg') top;
}
#farm .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#farm .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-archival {
	/*background: url('../images/layer-archival.jpg') top;*/
    background: url('../images/layer-splash.jpg') top;
}
#archival .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#archival .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-multi {
	background: url('../images/layer-multi.jpg') top;
}
#multi .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#multi .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-video {
	background: url('../images/layer-multi.jpg') top;
}
#video .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#video .o-slider-arrows.next 		{ right: -40px; background-position: right; }

.layer-video2 {
	background: url('../images/layer-multi.jpg') top;
}
#video2 .o-slider-arrows.previous 	{ left: -40px;  background-position: left; }
#video2 .o-slider-arrows.next 		{ right: -40px; background-position: right; }