@font-face {
   font-family: "Azura Sun";
   font-weight: bold;
   src: url("azura_sun.ttf");
}

* {
   margin: 0em;
   padding: 0em;
}

html[lang=ja] {
   word-break: keep-all;
}

body {
   font-family: "Azura Sun", sans-serif;
   font-size: 1.5em;
   font-weight: bold;
   line-height: 1.25em;
   background-color: #0080FF;
   background-image: url("background.png");
   background-attachment: fixed;
   background-size: 32em 32em;
   color: #FFFF00;
   text-shadow: -0.05em -0.05em 0em #FF0000,
                 0.05em -0.05em 0em #FF0000,
                -0.05em  0.05em 0em #FF0000,
                 0.05em  0.05em 0em #FF0000,
                -0.05em  0.15em 0em #000000,
                 0.05em  0.15em 0em #000000;
   margin: 1.5em auto;
   max-width: 36em;
}

p {
   margin: 0.75em 0em;
}

h1 {
   font-size: 2em;
   font-style: normal;
   font-weight: bold;
   margin: 0.375em 0em;
   clear: both;
}

h2 {
   font-size: 1.5em;
   font-style: normal;
   font-weight: bold;
   margin: 0.5em 0em;
   clear: both;
   border-bottom: 0.1em #FFFF00 solid;
   box-shadow: 0em -0.05em #FF0000 inset,
               0em 0.05em #FF0000,
               0em 0.10em #000000;
}

h3 {
   font-size: 1em;
   font-style: oblique;
   font-weight: bold;
   margin-bottom: 0.5em;
   border-bottom: 0.05em #FFFF00 solid;
   box-shadow: 0em -0.05em #FF0000 inset,
               0em 0.05em #FF0000,
               0em 0.10em #000000;
}

strong {
   font-style: oblique;
   font-weight: bold;
}

a {
   color: #FFFF00;
   text-decoration: none;
}

a[href] {
   border-bottom: 0.1em #FFFF00 solid;
   box-shadow: 0em -0.075em #FF0000 inset,
               0em 0.075em #FF0000,
               0em 0.150em #000000;
}

small, .language, .navbar, .subnavbar {
   font-size: 0.75em;
   text-shadow: -0.075em -0.075em 0em #FF0000,
                 0.075em -0.075em 0em #FF0000,
                -0.075em  0.075em 0em #FF0000,
                 0.075em  0.075em 0em #FF0000,
                -0.075em  0.225em 0em #000000,
                 0.075em  0.225em 0em #000000;
}

.language {
   display: block;
   list-style: none;
   position: absolute;
   top: 0.5em;
   right: 1em;
}

.language li, .subnavbar li {
   display: inline;
}

.language li+li:before, .subnavbar li+li:before {
   content: "| ";
}

.footer {
   clear: both;
   margin: 0.75em 0em;
   text-align: center;
   border-top: 0.075em #FFFF00 solid;
   box-shadow: 0em -0.05em #FF0000,
               0em 0.05em #FF0000 inset,
               0em 0.125em #000000 inset;
}

.logo {
   font-size: 1em;
   text-align: center;
   margin: 0em -5em;
}

.logo img {
   width: 24em;
   height: 10.667em;
   vertical-align: middle;
}

.logo a img {
   width: 12em;
   height: 7.5em;
   vertical-align: middle;
   border: 0.1em #FF0000 solid;
   box-shadow: 0em 0.25em #000000;
   z-index: 1;
}

.logo a img:hover {
   z-index: 2;
   box-shadow: -0.2em -0.2em #FFFF00,
                0.2em -0.2em #FFFF00,
               -0.2em  0.2em #FFFF00,
                0.2em  0.2em #FFFF00,
               -0.3em -0.3em #FF0000,
                0.3em -0.3em #FF0000,
               -0.3em  0.3em #FF0000,
                0.3em  0.3em #FF0000,
               -0.3em  0.5em #000000,
                0.3em  0.5em #000000;
}

.soon {
   font-style: oblique;
}

.home {
   text-align: center;
}

.navhome, .navbar {
   display: block;
   list-style: none;
   text-align: center;
   margin: 0em;
}

.navhome {
   border-spacing: 0.25em;
}

.navbar {
   border-spacing: 0.1em;
}

.navhome li, .navbar li {
   display: inline;
   display: inline-block;
}

.navhome a, .navbar a {
   border: 0.1em #FF0000 solid;
   box-shadow: 0em 0.2em #000000;
   display: table-cell;
   vertical-align: bottom;
   text-align: center;
   padding-bottom: 0.5em;
   position: relative;
   z-index: 1;
}

.navhome a {
   width: 10.667em;
   height: 5.333em;
   background-size: 100% 100%;
   margin: 0.5em 0.5em;
}

.navbar a {
   width: 7.5em;
   height: 3.75em;
   background-size: 16em 8em;
   background-position: -2.5em -1.5em;
   margin: 0.25em 0.25em;
}

.navhome a:hover, .navbar a:hover {
   z-index: 2;
   box-shadow: -0.2em -0.2em #FFFF00,
                0.2em -0.2em #FFFF00,
               -0.2em  0.2em #FFFF00,
                0.2em  0.2em #FFFF00,
               -0.3em -0.3em #FF0000,
                0.3em -0.3em #FF0000,
               -0.3em  0.3em #FF0000,
                0.3em  0.3em #FF0000,
               -0.3em  0.5em #000000,
                0.3em  0.5em #000000;
}

#nav_home { background-image: url("nav_home.png"); }
#nav_story { background-image: url("nav_story.png"); }
#nav_gameplay { background-image: url("nav_gameplay.png"); }
#nav_modding { background-image: url("nav_modding.png"); }
#nav_gallery { background-image: url("nav_gallery.png"); }
#nav_moreinfo { background-image: url("nav_moreinfo.png"); }

.subnavbar {
   display: block;
   list-style: none;
   text-align: center;
}

.plot {
   text-align: center;
}

.plot img {
   width: 32em;
   height: 8em;
   border: 0.1em #FF0000 solid;
   box-shadow: 0em 0.2em #000000;
}

.gameplay {
   text-align: center;
}

.gameplay img {
   margin: 0em 0.5em;
   border: 0.1em #FF0000 solid;
   box-shadow: 0em 0.2em #000000;
}

dt {
   clear: left;
   margin: 0.5em 0em;
   font-style: oblique;
}

dd {
   padding-left: 6.7em;
   margin: 0.5em 0em;
}

dt img {
   float: left;
   width: 6em;
   height: 6em;
   margin-right: 0.5em;
   margin-bottom: 0.75em;
   border: 0.1em #FF0000 solid;
   box-shadow: 0em 0.2em #000000;
}

.modding {
   text-align: center;
}

.modding img {
   width: 16em;
   height: 10em;
   border: 0.1em #FF0000 solid;
   box-shadow: 0em 0.2em #000000;
}

.videos, .screenshots {
   display: block;
   list-style: none;
   text-align: center;
}

.videos li, .screenshots li {
   display: inline-block;
   margin: 0.375em 0.375em;
}

.videos a, .screenshots a {
   border: none;
   box-shadow: none;
}

.videos img, .screenshots img {
   border: 0.1em #FF0000 solid;
   box-shadow: 0em 0.2em #000000;
   width: 16em;
   height: 10em;
   position: relative;
   z-index: 1;
}

.videos a:hover img, .screenshots a:hover img {
   z-index: 2;
   box-shadow: -0.2em -0.2em #FFFF00,
                0.2em -0.2em #FFFF00,
               -0.2em  0.2em #FFFF00,
                0.2em  0.2em #FFFF00,
               -0.3em -0.3em #FF0000,
                0.3em -0.3em #FF0000,
               -0.3em  0.3em #FF0000,
                0.3em  0.3em #FF0000,
               -0.3em  0.5em #000000,
                0.3em  0.5em #000000;
}

.wallpapers {
   display: inline-block;
   text-align: center;
   vertical-align: top;
   min-width: 46%;
}

.wallpapers img {
   border: 0.1em #FF0000 solid;
   box-shadow: 0em 0.2em #000000;
   width: 16em;
   height: 10em;
}

.wallpapers ul {
   -moz-column-count: 2;
   -webkit-column-count: 2;
   column-count: 2;
   padding: 0em 1em;
}

.avatars {
   display: inline-block;
   text-align: center;
   vertical-align: top;
   min-width: 23%;
}

.avatars img {
   width: 6.25em;
   height: 6.25em;
}

.wallpapers h3, .avatars h3 {
   font-size: 1em;
}

.wallpapers ul, .avatars ul {
   list-style: none;
   margin: 0em auto;
}

.warning {
   text-align: center;
}

.windows {
   clear: left;
   float: left;
   margin-left: 2%;
}

.linux {
   clear: right;
   float: right;
   margin-right: 2%;
}

.windows, .linux {
   width: 46%;
   margin-bottom: 0.75em;
}

.windows ul, .linux ul {
   list-style: none;
}

/* Text-shadow isn't present in IE newer than IE10 :/ Not even sure if it'll
   work properly (I don't have IE around to test this) */
p, h1, h2, h3, dt, dd, li {
   zoom: 1;
   filter:
      dropshadow(color=#FF0000,offX=-1,offY=-1)
      dropshadow(color=#FF0000,offX=1,offY=-1)
      dropshadow(color=#FF0000,offX=-1,offY=1)
      dropshadow(color=#FF0000,offX=1,offY=1)
      dropshadow(color=#000000,offX=-1,offY=1)
      dropshadow(color=#000000,offX=1,offY=1);
   -ms-filter:
      dropshadow(color=#FF0000,offX=-1,offY=-1)
      dropshadow(color=#FF0000,offX=1,offY=-1)
      dropshadow(color=#FF0000,offX=-1,offY=1)
      dropshadow(color=#FF0000,offX=1,offY=1)
      dropshadow(color=#000000,offX=-1,offY=1)
      dropshadow(color=#000000,offX=1,offY=1);
}