/*
Theme Name: 
Theme URL: 
Description:
Author:
Author URL: 
Version: 1.0
*/
/*------------------------------------*\
    $RESET
\*------------------------------------*/
/**
 * Includes .normalize() and .reset()
*/
/* normalize.css v2.1.3 | http://git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a {
  background: transparent;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre-wrap;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height: normal;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
}
/*------------------------------------*\
    $SQUARE ENIX BAR
\*------------------------------------*/
/*
START Custom Contra
*/
.fixed-square-enix {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #000000;
}
/*
END Custom Contra
*/
/*
The background parameter is set to #555 just for display, to have some contrast for the bar's border.
It can be removed.
*/
body {
  /*background: #333; 
	color: #fff;
	font-size: 13px;
	font-family: Arial, Helvetica, Sans-Serif;*/
}
a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  color: #c80000;
  text-decoration: none;
}
/*
Like the <div class="label"> in the HTML, this is just for display purpose. It can be removed.
*/
.label {
  text-align: left;
  font-size: 11px;
  font-weight: bold;
  margin: 5px;
}
/*
Full width bar background
*/
#membership-bar-header-bg {
  background: #000;
  border-bottom: 1px solid #555;
  height: 40px;
  text-align: center;
}
/*
The header width is flexible.
As for now it is set like the SE Member's width, 950 pixels, but it can be resized to match the one of the website it is placed into or made as wide as the whole page (setting "width: 100%;" or removing the parameter)
The alignement is centered. To change it to the default left alignment, the margin "auto" and the compatibility <center></center> tag in the html must be removed.
*/
#membership-bar-header {
  position: relative;
  max-width: 980px;
  height: 40px;
  margin: 0 auto;
}
/*
This and the next class are for the SE Logo.
It is always aligned with the left side of the header div, with a 15 pixels left margin.
*/
#se-logo {
  position: absolute;
  top: 11px;
  left: 15px;
  width: 300px;
  text-align: left;
  font-size: 0;
}
/*
This and the following classes control the user area (when logged in) and the "Login" and "Register" buttons.
This area is always aligned with the right side of the header div, with a 15 pixels right margin.
The z-index parameter should assure that the dropdown-menu is always on top of the other content in the page.
*/
#user-area {
  z-index: 10000;
  position: absolute;
  top: 8px;
  right: 15px;
  height: 40px;
  width: 450px;
  cursor: pointer;
}
#user-area .login,
#user-area .register {
  float: right;
  margin-top: 5px;
}
#user-area .login {
  background: url("https://membership.square-enix.com/images/membership_bar//menu_div.png") no-repeat right top;
  padding-right: 8px;
  margin-right: 8px;
}
/*
When the dropdown-box is shown the user avatar has a 5 pixels white glow.
This works just in non-IE browsers.
*/
#user-area .user-pieces.open .avatar {
  box-shadow: 0 0 5px #ffffff;
}
/*
This is the clickable area for showing the dropdown-menu.
When clicked the script set in "scripts/user_top.js" (jquery has to be enabled) adds an "open" class to the corresponding div and an inline style "display: block" to the dropdown-box div (see HTML for reference).
*/
#user-area .user-pieces {
  cursor: pointer;
  position: absolute;
  right: -15px;
}
#user-area .dropdown {
  background: url("https://membership.square-enix.com/images/membership_bar//main_buttons.png") no-repeat scroll -30px 2px transparent;
  float: right;
  height: 20px;
  width: 20px;
}
/*
These classes controls the arrow display status when the dropdown menu is open or closed.
The arrow image is a sprite, hence only the background position is changed.
*/
#user-area .user-pieces:hover .dropdown {
  background: url("https://membership.square-enix.com/images/membership_bar//main_buttons.png") no-repeat -30px -23px;
}
#user-area .user-pieces.open .dropdown {
  background: url("https://membership.square-enix.com/images/membership_bar//main_buttons.png") no-repeat -30px -23px;
}
#user-area .avatar {
  float: right;
  font-size: 12px;
  height: 23px;
  line-height: 23px;
  margin-right: 10px;
  text-align: right;
}
/*
The Member's user avatar image has a default with and height of 200 pixels.
This assure the correct resize of the image.
*/
#user-area .avatar img {
  height: 24px;
  width: 24px;
}
#user-area .mail {
  float: right;
  font-size: 12px;
  height: 23px;
  line-height: 23px;
  margin-right: 10px;
  text-align: right;
  color: #FFF;
}
#user-area .unconfirmed {
  float: right;
  font-size: 12px;
  height: 23px;
  line-height: 23px;
  margin-right: 10px;
  margin-left: -5px;
  text-align: right;
  color: #999;
}
/*
This and the following classes are for the dropdown menu.
The default display parameter is set to "none" to hide the menu till the user clicks on the "user-pieces" area, then it is overridden by the "display: block" set inline by the script (see HTML for reference).
*/
#user-area .dropdown-box {
  display: none;
  background: url("https://membership.square-enix.com/images/membership_bar//dropmenu_bg.png") repeat-x scroll right top transparent;
  font-size: 12px;
  padding: 11px 2px 2px;
  position: absolute;
  right: -14px;
  text-align: center;
  top: 31px;
  width: 150px;
}
/*
 * SRP - Specify link styles to avoid picking up defaults from main website style.
 */
#user-area a {
  color: #fff;
  font-size: 13px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-weight: normal;
}
#user-area a:hover {
  color: #c80000;
  text-decoration: none;
}
#user-area .dropdown-box .links a,
#user-area .dropdown-box .log-out a {
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
#user-area .dropdown-box .log-out a {
  background: none repeat scroll 0 0 #151515;
  margin-top: 2px;
}
#user-area .dropdown-box .links a:hover {
  color: #fff;
  background: #222;
}
.row {
  display: block;
  margin: 0 -10px;
}
.container {
  margin: 0 auto;
  max-width: 950px;
}
body {
  font-family: "futura-pt";
  font-weight: 300;
}
body p {
  font-weight: 300;
}
body p strong {
  font-weight: 400;
}
.lt-ie9 .container,
.lt-ie9 main,
.lt-ie9 footer,
.lt-ie9 header,
.lt-ie9 center {
  display: none;
}
.lt-ie9 .browsehappy {
  display: block !important;
  background: #e41e67;
  padding: 20px;
  margin: 20px;
  color: #ffffff;
  font-size: 20px;
}
.lt-ie9 .browsehappy h1,
.lt-ie9 .browsehappy h2 {
  margin: 0;
}
.lt-ie9 .browsehappy a {
  text-decoration: underline;
}
.lt-ie9 .browsehappy a:hover {
  color: #CCC;
}
.lt-ie9 .browsehappy p {
  margin-bottom: 0;
}
.splash {
  min-height: 100%;
  background: url(../img/splash-bg.png);
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.splash .container {
  margin: 0 auto;
  margin-top: 200px;
  max-width: 680px;
}
@media screen and (max-width: 680px) {
  .splash .container {
    margin-top: 20px;
    padding: 0 10px;
  }
}
.splash .container ul {
  margin: 0 0 0 240px;
  padding: 10px 10px 0 10px;
  list-style: none;
  font-size: 30px;
  color: #666;
  background: rgba(255, 255, 255, 0.6);
}
@media screen and (max-width: 680px) {
  .splash .container ul {
    margin: 0 0 0 0px;
  }
}
.splash .container ul .title {
  font-size: 19px;
  padding-bottom: 10px;
}
.splash .container ul li a {
  display: block;
  padding-left: 40px;
  color: #666;
  text-decoration: none;
}
.splash .container ul li a:hover {
  color: #e41e67;
}
.splash .container ul li.us a {
  background: url(../img/us.jpg) no-repeat left center;
}
.splash .container ul li.eu a {
  background: url(../img/eu.jpg) no-repeat left center;
}
.splash .container ul li.fr a {
  background: url(../img/fr.jpg) no-repeat left center;
}
.splash .container ul li.de a {
  background: url(../img/de.jpg) no-repeat left center;
}
.splash .container ul li.es a {
  background: url(../img/es.jpg) no-repeat left center;
}
.splash .container ul li.it a {
  background: url(../img/it.jpg) no-repeat left center;
}
.splash .container footer {
  margin-top: 200px;
  text-align: center;
  font-size: 14px;
}
@media screen and (max-width: 680px) {
  .splash .container footer {
    margin-top: 100px;
  }
}
.lang.container {
  position: relative;
}
.lang.container .languages {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 1000;
  width: 155px;
}
@media screen and (max-width: 1000px) {
  .lang.container .languages {
    right: 10px;
  }
}
.lang.container .languages > a {
  color: #666;
  display: block;
  background: url(../img/arrow-down.png) no-repeat right center;
}
.lang.container .languages ul {
  display: none;
  background: #666;
  margin: 5px 0 0 0;
  padding: 0;
  list-style: none;
  width: 155px;
}
.lang.container .languages ul li a {
  display: block;
  padding: 2px 10px;
  background: #666 !important;
}
.lang.container .languages ul li a:hover {
  color: #ffffff;
  background: #e41e67 !important;
}
.lang.container .languages ul li:first-child a {
  padding-top: 4px;
}
.lang.container .languages ul li:last-child a {
  padding-bottom: 4px;
}
.main-site header {
  text-align: center;
  text-transform: uppercase;
}
@media screen and (max-width: 420px) {
  .main-site header {
    margin-top: 40px;
  }
}
@media screen and (max-width: 1000px) {
  .main-site header .container {
    padding: 0 20px;
  }
}
.main-site header h1 {
  color: #666;
  font-size: 56px;
  font-weight: 300;
  margin-bottom: 0;
}
@media screen and (max-width: 420px) {
  .main-site header h1 {
    font-size: 38px;
  }
}
.main-site header h2 {
  color: #666;
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
}
@media screen and (max-width: 420px) {
  .main-site header h2 {
    font-size: 20px;
  }
}
.main-site main .container {
  position: relative;
}
@media screen and (max-width: 1000px) {
  .main-site main .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
}
.main-site main .container > div {
  display: block;
  margin: 0 -10px;
  height: 860px;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div {
    height: auto;
    margin: 0 !important;
  }
}
.main-site main .container > div .game {
  display: inline;
  float: left;
  width: 33.33333333%;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  height: inherit;
  border-left: 2px solid #ffffff;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
  background-color: #eeeeee;
  background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -ms-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
  background-image: linear-gradient(top, #ffffff, #eeeeee);
  background-repeat: repeat-x;
}
html.lt-ie8 .main-site main .container > div .game {
  width: 29.33333333%;
  padding: 0 1%;
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div .game {
    display: inline;
    float: left;
    width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    height: 200px;
    overflow: hidden;
    background: #eeeeee !important;
    margin-bottom: 20px;
    border: none !important;
  }
  html.lt-ie8 .main-site main .container > div .game {
    width: 88%;
    padding: 0 1%;
  }
}
.main-site main .container > div .game:hover {
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #98bdcd 50%, #eeeeee 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #98bdcd), color-stop(100%, #eeeeee));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%, #98bdcd 50%, #eeeeee 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%, #98bdcd 50%, #eeeeee 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%, #98bdcd 50%, #eeeeee 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%, #98bdcd 50%, #eeeeee 100%);
  /* W3C */
}
.main-site main .container > div .game > div {
  height: inherit;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div .game > div {
    text-align: left;
  }
}
.main-site main .container > div .game > div img {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div .game > div img.logo-one,
  .main-site main .container > div .game > div img.logo-two,
  .main-site main .container > div .game > div img.logo-three {
    position: absolute;
    top: 2%;
    right: 20%;
  }
}
@media screen and (max-width: 770px) {
  .main-site main .container > div .game > div img.logo-one,
  .main-site main .container > div .game > div img.logo-two,
  .main-site main .container > div .game > div img.logo-three {
    right: 10%;
  }
}
@media screen and (max-width: 640px) {
  .main-site main .container > div .game > div img.logo-one,
  .main-site main .container > div .game > div img.logo-two,
  .main-site main .container > div .game > div img.logo-three {
    right: 5%;
  }
}
@media screen and (max-width: 570px) {
  .main-site main .container > div .game > div img.logo-one,
  .main-site main .container > div .game > div img.logo-two,
  .main-site main .container > div .game > div img.logo-three {
    top: 5%;
    right: 10px;
    width: 40%;
  }
}
@media screen and (max-width: 420px) {
  .main-site main .container > div .game > div img.logo-one,
  .main-site main .container > div .game > div img.logo-two,
  .main-site main .container > div .game > div img.logo-three {
    top: 10%;
    right: 10px;
    width: 50%;
  }
}
.main-site main .container > div .game > div img.logo-two {
  padding-top: 10px;
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div .game > div img.logo-two {
    top: 0;
  }
}
@media screen and (max-width: 570px) {
  .main-site main .container > div .game > div img.logo-two {
    top: 5%;
  }
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div .game > div img.logo-three {
    top: 5%;
  }
}
@media screen and (max-width: 420px) {
  .main-site main .container > div .game > div img.logo-three {
    top: 10%;
  }
}
.main-site main .container > div .game > div .character-one {
  padding-top: 35px;
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div .game > div .character-one {
    padding: 0;
  }
}
@media screen and (max-width: 420px) {
  .main-site main .container > div .game > div .character-one {
    width: 50%;
  }
}
.main-site main .container > div .game > div .character-two {
  padding-top: 35px;
  margin-left: -35px;
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div .game > div .character-two {
    padding: 0;
  }
}
@media screen and (max-width: 420px) {
  .main-site main .container > div .game > div .character-two {
    width: 70%;
    margin-left: -25px;
  }
}
.main-site main .container > div .game > div .character-three {
  padding-top: 15px;
  margin-left: -15px;
}
@media screen and (max-width: 1000px) {
  .main-site main .container > div .game > div .character-three {
    margin-left: -90px;
    padding: 0;
  }
}
@media screen and (max-width: 420px) {
  .main-site main .container > div .game > div .character-three {
    width: 70%;
    margin-left: -65px;
  }
}
.main-site main .container > div .game > div p {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 20px;
  color: #666;
}
@media screen and (max-width: 1024px) {
  .main-site main .container > div .game > div p {
    text-align: right;
    font-size: 14px;
  }
}
.main-site main .container:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -74px;
  height: 74px;
  content: '';
  background-image: url(../img/arrow.png);
}
@media screen and (max-width: 1000px) {
  .main-site main .container:after {
    display: none;
  }
}
.main-site footer {
  padding-top: 30px;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  .main-site footer {
    padding-top: 0;
  }
  .main-site footer .container {
    padding: 0 20px;
  }
}
.main-site footer .top {
  color: #ffffff;
  background-color: #4B5460;
  padding: 50px 0 40px 0;
  font-size: 25px;
}
@media screen and (max-width: 420px) {
  .main-site footer .top {
    padding: 10px 0;
    font-size: 16px;
  }
}
.main-site footer .top .preorder-container {
  display: block;
  margin: 0 -10px;
  *zoom: 1;
}
.main-site footer .top .preorder-container:before,
.main-site footer .top .preorder-container:after {
  content: "";
  display: table;
}
.main-site footer .top .preorder-container:after {
  clear: both;
}
.main-site footer .top .preorder-container > div {
  display: inline;
  float: left;
  width: 33.33333333%;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
html.lt-ie8 .main-site footer .top .preorder-container > div {
  width: 29.33333333%;
  padding: 0 1%;
}
@media screen and (max-width: 1024px) {
  .main-site footer .top .preorder-container > div {
    display: inline;
    float: left;
    width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  html.lt-ie8 .main-site footer .top .preorder-container > div {
    width: 88%;
    padding: 0 1%;
  }
}
.main-site footer .top .preorder-container > div a {
  display: block;
  color: #666;
  background: #ffffff;
  padding: 15px;
  border-bottom: 6px solid #CCC;
  margin-bottom: 5px;
}
.main-site footer .top .preorder-container > div a:hover {
  background: #000000;
  color: #ffffff;
  border-bottom: 6px solid #333;
}
.main-site footer .bottom {
  color: #ffffff;
  background-color: #000000;
  padding: 40px 0;
  font-size: 13px;
}
.main-site footer .bottom .footer-links {
  overflow: hidden;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-site footer .bottom .footer-links li {
  padding: 0 10px;
  float: left;
}
@media screen and (max-width: 1000px) {
  .main-site footer .bottom .footer-links li {
    margin-bottom: 20px;
    width: 33%;
    padding: 0;
  }
}
@media screen and (max-width: 700px) {
  .main-site footer .bottom .footer-links li {
    width: 50%;
    padding: 0;
  }
}
@media screen and (max-width: 420px) {
  .main-site footer .bottom .footer-links li {
    width: 100%;
  }
}
.main-site footer .bottom p img {
  margin-bottom: -5px;
  padding: 0 3px;
}
@media screen and (max-width: 420px) {
  .main-site footer .bottom {
    padding: 10px 0;
    font-size: 11px;
  }
}

.notice{
  color: #d4d4d4;
}