html {
  height: 100%;
}
body {
  min-height: 100%;
}

body {
    font-family: 'Verdana', 'Open Sans', sans-serif;
    font-size: 13px;
    background-color: black;
    color: #ccc;
    text-align: left;
}

img {
    outline: none;
    border: none;
}

body * {
    box-sizing: border-box;
}

a {
    color: #ffe28b;
    transition: color 0.1s linear;
}
a:hover {
    color: red;
}

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

div.horizontal-bar {
    display: block;
    background: url('/images/bar.gif') top left repeat-x;
    height: 8px;
    width: 984px;
    margin: 0 8px 0 8px;
    clear: both;
}

div.vertical-bar {

}

img.main-logo {
    width: 240px;
    vertical-align: middle;
}

section {
    width: 1000px;
    margin: auto;
    background: url('/assets/images/section_bg.png') top left repeat-y;
}

header {
    width: 1000px;
    margin: auto;
    position: relative;
    /*
    height: 40px;
    background: url('/assets/images/section_bg.png') top left repeat-y; 
    */
}

header > nav {
    display: block;
}

header >  nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header > nav > ul > li {
    display: inline-block;
    vertical-align: bottom;
}

header > nav > ul > li > a {
    outline: none;
    display: inline-block;
    font-size: 14px;
    padding: 8px;
}

header > nav > ul > li:first-child > a {
    padding: 0;
}

header > nav > ul > li.gog {
    float: right;
}
header > nav > ul > li.gog > a {
    padding: 0;
}
header > nav > ul > li.gog > a > img {
    height: 37px;
}


header > nav > ul > li.active {
    background-image: url('/assets/images/arrow.png');
    background-size: 12px 6px;
    background-position: bottom center;
    background-repeat: no-repeat;
}

header > nav > ul > li > ul {
    position: absolute;
    top: 100%;
    left: 8px;
    display: block;
    width: calc(100% - 16px);
    min-height: 50px;
    padding: 15px;

    background: #003366;
    /*
    background: -moz-linear-gradient(top, #003366 90%, rgba(0,51,102,0) 100%);
    background: -webkit-linear-gradient(top, #003366 90%,rgba(0,51,102,0) 100%);
    background: linear-gradient(to bottom, #003366 90%,rgba(0,51,102,0) 100%);
    */
    z-index: 9999;
    list-style-type: none;
    display: none;
}

header > nav > ul > li > ul.games {
    font-size: 0.9em;
}



header > nav > ul > li > ul > li {
    display: inline-block;
    width: 24%;
    vertical-align: top;
}

header > nav > ul > li > ul > li > ul {
    margin-bottom: 1em;
}

header > nav > ul > li > ul > li > h3 {
    font-weight: normal;
    color: #ffe28b;
}

header > nav > ul > li > ul > li > ul {
    padding: 0 0 0 15px;
}


header > nav > ul > li.active > ul {

}


ul.breadcrumbs {
    list-style-type: none;
    margin: 0 0 1em 0;
    padding: 0em 0.5em 0.5em 0;
    font-weight: bold;
    color: #ffe28b;
}

ul.breadcrumbs li {
    display: inline;
}

ul.breadcrumbs li:after {
    content: " \00BB";
}

ul.breadcrumbs li:last-child:after {
    content: "";
}

section > div#left-column {
    float: left;
    width: 190px;
    min-height: 100px;
    padding: 4px 3px 6px 12px;
}

section > div#left-column > hr,
section > div#right-column > hr {
    display: block;
    width: 262px;
    height: 11px;
    margin: 20px auto 20px auto;
    background: url('/images/maxbar.png') top left no-repeat;
}

section > div#center-column {
    float: left;
    width: 662px; /*620px;*/
    /*min-height: 2900px;*/
    /*min-height: 100%;*/
    padding: 10px 10px 20px 14px;
    // background: url('/assets/images/center_column_bg.png') top right repeat-y;
    border: none; /* 2px solid #666; */
    margin:  4px 4px 6px 12px;
}

section > div#center-column img {
    max-width: 100%;
}

section > div#right-column {
    float: left;
    width: 322px; /*380px;*/
    min-height: 100px;
    /* padding: 4px 12px 6px 3px; */
    padding: 14px 22px 16px 3px;
}

footer {
    clear: both;
    width: 1000px;
    margin: auto;
    font-size: 10px;
    padding: 10px 0;
    text-align: justify;
}

footer > ul {
    display: block;
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
    clear: both;
    overflow: auto;
}

footer > ul > li {
    box-sizing: border-box; 
    font-size: 1.3em;
    display: inline-block;
    padding: 0 1em 0 0;
    text-align: left;
    float: left;
}

footer > ul > li:last-child {
    width: 60%;
    text-align: right;
    float: right;
    padding: 0;
}

/* cute menues based on uls */
section > div#left-column > ul,
section > div#right-column > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 2px solid #666;
}


section > div#left-column > ul li,
section > div#right-column > ul li {
    font-size: 14px;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid #2f2a36;
}

section > div#left-column > ul li:first-child,
section > div#right-column > ul li:first-child {
    font-size: 16px;
    border: 0;
    color: #f90;
    background: url('/images/bg2back_s.jpg') top left repeat;
    border-bottom: 2px solid #666;
}

section > div#left-column > ul li.active,
section > div#right-column > ul li.active {
    font-style: italic;
}

section > div#left-column > ul.single li:last-child,
section > div#right-column > ul.single li:last-child {
    font-weight: normal;
    font-size: 10px;
    text-align: center;
    padding: 2px 2px 10px 2px;
    border: 0;
}

section > div#left-column > ul.single li:last-child a,
section > div#right-column > ul.single li:last-child a {
    font-weight: bold;
}

section > div#right-column > ul.single.all-small li:not(:first-child) {
    font-size: 0.9em;
    font-weight: normal;
    padding: 10px;
    text-align: left;
}

section > div#center-column hr {
    display: block;
    height: 8px;
    width: 100%;
    clear: both;
    background: url('/images/bar2s_hs.gif') top left repeat-x;
}

/* gallery ul */
ul.gallery {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.gallery > li {
    display: inline-block;
    width: 30%;
    /* float: left; */
    text-align: center;
    padding: 10px 0 10px 0;
}

/* frillers */

div.clear {clear: both;}

h1.headline {
    color: #ccc;
    font-size: 1.3em;
    padding: 4px;
    border: 2px solid #666;
    background: url('/images/bg2back_s.jpg') top left repeat;

}

h1 {font-size: 1.4em;}
h2 {font-size: 1.3em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1.0em;}

/* special 66c headings */
h2,h3,h4,h5,h6 {
    color: #66c;
}



h1.magic-headline {
    font-size: 1.1em;
}

h2.magic-headline {
    font-size: 1.2em;
}

h3.magic-headline {
    font-size: 1.3em;
}

/* image layout */
body.image {
    height: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}

body.image header,
body.image footer {
    padding: 1em;
    text-align: center;
}

body.image article {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

body.image article img {
    margin: 0 0 -15px -4px;
    max-width: 100%;
    max-height: 100%;
}

body.image aside {
    vertical-align: top;
    display: inline-block;
}

/* error layout */
div.error_500 {
    width: 80%;
    color: magenta;
}


/* index lists */

ul.index-list {
    list-style-type: none;
    padding: 0;
}

ul.index-list li {
    font-weight: bold;
}

ul.index-list li span.date {
    color: #f90;
    font-size: 0.8em;
}

/* index articles */

article.news {
    margin: 1em 0 1em 0;
}

article.news h2 {
    color: #66c;
    font-weight: bold;
}

article.news h3 {
    color: #66c;
    font-weight: normal;
    font-size: 0.8em;
    margin: 1px 0 1em 1px;
}


/* legacy bbcode for index */
.ctaBbcodeFloatRight {
    float: right;
    margin: 0 0 1em 0.5em;
}

.ctaBbcodeFloatLeft {
    float: left;
    margin: 0 0.5em 1em 0;
}

/* downloads page */

body.download h1, body.download h2, body.download h3, body.download h4 {
    color: inherit;
}

body.download {
    margin: 0;
    min-height: auto;
}

body.download a {
    text-decoration: none;
}

body.download div.block {
    margin: auto;
    width: 700px;
    max-width: 100%;
    border: 2px solid #333;
    background-color: #222;
    overflow: auto;
    font-size: 0.9em;
}

body.download div.block > div:nth-child(3) {
    padding: 0.5em 1em;
    text-align: justify;
}

body.download div.block > div:nth-child(2) {
    text-align: center;
    background-color: #444;
    width: 20%;
    height: 80px;
    padding: 1em;
    float: right;
    border-radius: 0 0 0 15px;
    margin: 0 0 0 1em;
}

body.download div.block > div:nth-child(1) {
    text-align: center;
    background-color: #555;
    width: 20%;
    height: 80px;
    padding: 1em;
    float: right;
}

body.download div.block span {
    color: #f90;
    font-size: 2em;
    display: block;
}

body.download header {
    border-radius: 15px 15px 0 0;
    width: 700px;
    max-width: 100%;
    background: #333;
    border: 2px solid #333;
    text-align: center;
    margin: 5em auto 1em auto;
}

body.download header ul {
    list-style-type: none;
    margin: 0;
    padding: 1em;
    display: block;
}

body.download header ul li {
    display: inline;
}

body.download header ul li:after {
    content: " |";
}

body.download header ul li:first-child:after,
body.download header ul li:last-child:after {
    content: "";
}

body.download header > ul.ads {
    background-color: #030;
}

body.download header ul.ads li:after {
    content: "";
}

body.download header ul.ads li img {
    width: 126px;
    height: 36px;
}

body.download header ul.ads li:last-child {
    display: block;
    font-size: 0.8em;
}

body.download footer {
    border-radius: 0 0 15px 15px;
    margin: 1em auto;
    width: 700px;
    max-width: 100%;
    background: #333;
    border: 2px solid #333;
    padding: 8px 16px;
    font-size: 1em;
}


/* inline download page */

.download-block {
    margin: 1em 0 1em 0;
    overflow: hidden;
}

.download-block > div > span {
    color: #f90;
    font-size: 2em;
    display: block;
}

.download-block > div:nth-child(1) {
    width: 50%;
    text-align: center;
    padding: 2em 0 2em 0;
    float: left;
    background-color: #333;
}

.download-block > div:nth-child(2) {
    width: 50%;
    text-align: center;
    padding: 2em 0 2em 0;
    float: right;
    background-color: #444;
}

.download-block > div:nth-child(3) {
    padding: 1em 2em 0em 2em;
    background-color: transparent;
    clear: both;
}

/* pagination */
.legacy-pagination {
    list-style-type: none;
    display: block;
    text-align: center;
    margin: auto;
    padding: 0;
}

.legacy-pagination li {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    background: #ccc;
    padding:3px 5px;
    color: black;
}


.legacy-pagination li a {
    color: black;
}

.legacy-pagination li.active,
.legacy-pagination li:hover {
    background-color: #033;
}

.legacy-pagination li.active a,
.legacy-pagination li:hover a {
    color: gold;
}

.legacy-pagination li:first-child,
.legacy-pagination li:first-child:hover {
    background-color: transparent;
    color: #ccc;
}

.index-subsections {
    list-style-type: none;
    display: block;
    overflow: auto;
    margin: 0;
    padding: 0;
}

section > div#right-column > ul.index-subsections li.active {
    font-style: normal;
    background-color: #7f0000;
}


.features {
    position: relative;
    overflow: auto;
    border-radius: 10px;
    background-color: #036;
    padding: 0;
    margin: 5px 0 5px 0;
    color: black;
}

.features > .zone {
    margin: 12px auto 10px auto;
}      

.features > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}  

.features > ul > li {
    position: relative;
    display: inline-block;
    float: left;
    padding: 12px 10px 11px 20px;
    margin: 0 0 0 -10px;
    border-radius: 0 10px 0 0;
    max-height: 40px;
}

.features > ul > li a {
    color: #ffe28b;
    font-size: 1.1em;
    text-shadow: 1px 1px #000;
}

.features > ul > li a:hover {
    color: white;
}

.features > ul > li:last-child a {
    color: #ffe28b; text-shadow: 1px 1px rgba(0,0,0,0.5);
} 

.features > ul > li:nth-child(1) {background-color: /*#d88200*/ #66c; /*background-image: url('https://c.tenor.com/VbezPY1TRaMAAAAM/fire-flames.gif'); */ background-size: cover; z-index: 10; overflow: hidden; padding: 3px 8px 3px 15px;}
.features > ul > li:nth-child(1) img {height: 35px;}

.features > ul > li:nth-child(2) {background-color: /*#744600*/ #5b9dcc; z-index: 9; }
.features > ul > li:nth-child(3) {background-color: /*#854f00*/ #447fa9; z-index: 8; }
.features > ul > li:nth-child(4) {background-color: /*#995b00*/ #376d95; z-index: 7; }
.features > ul > li:nth-child(5) {background-color: /*#a86500*/ #225276; z-index: 6; }
.features > ul > li:nth-child(6) {background-color: /*#ba7000*/ #113b5b; z-index: 5; }
.features > ul > li:nth-child(7) {background-color: /*#d88200*/ #032a47; z-index: 4; }
.features > ul > li:nth-child(8) {background-color: /*#d88200*/ #011829; z-index: 3; }
.features > ul > li:nth-child(9) {float: right; margin: 0 10px 0 0; padding: 10px 10px 5px 20px; background-color: #036; color: #aaa; text-shadow: 1px 1px rgba(0,0,0,0.2); z-index: 1; }


.features .gog {
    position: absolute;
    right: 15px;
    bottom: 0;
}

.features .gog img {
    width: 35px;
}


/* random sylvus + montressor walkthrough fixes */
    /* header fonts to white */
    td[bgcolor="#4D6486"],
    td[bgcolor="#669999"] {
        color: white;
    }

    .style1 {
        color: #ff0;
        font-weight: bold;
    }




/* account settings form */
form.account {
    font-size: 13px;
}

.button,
form.account input[type="submit"] {
    color: white !important;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 10px 15px;
    text-transform: uppercase;
    color: white;
    text-shadow: rgba(0, 0, 0, .4) 1px 1px 1px;
    border-color: #1f1f1f;
    border-bottom-color: #1f1f1f66;
    border-style: none none solid;
    border-width: 0 0 3px;
    background-color: #33C3F0;
    font-size: 16px;
    white-space: normal;
}

.button:hover,
form.account input[type="submit"]:hover {
    color: white !important;
    background-color: #1EAEDB;
}

/* top link */
.to-the-moon-block,
.back-to-earth-block {
    position: fixed;
    bottom: 65px;
    left: 15px;
    width: 45px;
    height: 45px;
    border-radius: 4px;
    background-color: #376D95;
    padding: 4px 0px;
    text-align: center;
    border-bottom: 2px solid #225276;
}

.back-to-earth-block {
    bottom: 10px;
}

.to-the-moon-block a,
.back-to-earth-block a {
    font-size: 2em;
    color: #ffe28b;
    font-weight: bold;
    text-decoration: none !important;
}

@media screen and (max-width: 600px) {

    body.download div.block > div:nth-child(3) {
        width: 100%;
        overflow: auto;
        text-align: center;
    }
    
    body.download div.block > div:nth-child(1),
    body.download div.block > div:nth-child(2) {
        width: 50%;
        border-radius: 0;
        margin: 0;
    }
}


hr.xmas-only {
    display: none !important;
    margin: -10px 0 10px 0;
}



/* CHRISTMAS STUFF  (remove this to disable -->

hr.xmas-only {display: block !important;}

section {
    background: url(/assets/images/section_bg_xmas.png) top left repeat-y;
}

div.horizontal-bar {
    background: url(/images/bar_xmas.gif) top left repeat-x;
}

section > div#center-column {
    border: 0;
    background: url(/assets/images/center_column_bg_xmas_wide.png) top right repeat-y;
}

section > div#center-column hr {
    background: url(/images/bar2s_hs_xmas.gif) top left repeat-x;
}

<-- remove this to disable) END CHRISTMAS STUFF */