/**
 * DigitalMZX Archive Gen5
 * Codename: FREESTYLE
 * Production CSS File
 *
 * Title: "Midnight Moon" [Dark Blue and Gold]
 * Authors: MZXGiant and CJA
 * Modified by: Lachesis
 *
 * Deployment 01-Mar-2010 by MZXGiant AT GMail DOT Com
 *
 * This and all archive code is for use by DigitalMZX only. Any other usage must be pursued via the author.
 **/

body, html {
    margin: 0;
    padding: 0;
    background: url('bg.png');
    color: #ffffff;
    overflow: auto;
}

a { color: #ffffff; }
a.litLinks {
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #ffffff;
    text-decoration: none;
    /*border-bottom: 1px solid #6889ad;*/
}
a.litLinks:hover { background-color: #4c9559; }
a.logout { background-color: #836db2; }
a.adminLinks { /* Inherits litLinks normally */
	background-color: #2c5078;
}

.hidden { display: none; }




/* ---------- PRIMARY CONTAINER ELEMENTS ---------- */
#outerContainer { /* Overall container */
    width: 1024px;
    margin: 0 auto;
}
#topContainer {
    height: 120px;
    width: 1024px;
}
#sidebarContainer {
    float: left;
    width: 335px;
    position: relative;
}
#mainContainer {
    float: left;
    width: 680px;
    margin-left: 8px;
    margin-bottom: 50px;
}



/* ---------- SUBCONTAINER VISUAL ELEMENTS ---------- */
#mainContainer .content {
    border: 3px solid black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
    background-color: #5f84ad;
    font-family: Arial;
    font-size: 12px;
}

#mainContainer .twoByRight {
    float: right;
    width: 49.4%;
}
#mainContainer .twoByLeft {
    float: left;
    width: 49.4%;
}

#mainContainer .contentHeader {
    padding: 3px;
    letter-spacing: 2px;
    /* color: #2c5078; */
    color: #ffffff;
    background-color: #dfae62;
    height: 24px;
    vertical-align: center;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 20px;
    display: block;
    border: 1px solid #b8873d;
    text-align: center;
}



/* ---------- SIDEBAR ---------- */
#sidebarContainer .content {
    background-color: #46617f;
    border: 2px solid black;
    font-family: Arial;
    font-size: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
}
#sidebarContainer .contentHeader {
    padding: 3px;
    letter-spacing: 2px;
    color: #2c5078;
    background-color: #dfae62;
    height: 20px;
    vertical-align: center;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 18px;
    display: block;
    border: 1px solid #b8873d;
}



/* ---------- Other divs and headers ---------- */
.gameTitle {
    text-align: center;
    font-family: Trebuchet, serif;
    text-decoration: underline;
    font-size: 32px;
    /* color: #ffffff; */
    padding: 5px;
    color: #2c5078;
    background-color: #dfae62;
    width: 670px;
    vertical-align: center;
    font-family: Tahoma, Helvetica, sans-serif;
    border: 1px solid #b8873d;
}




/* ---------- Specific content panes ---------- */

/* Refer to Rain Clouds for the full list of content panes */

/* DOWNLOAD MZX */
.content#mzxDownload {
    text-align: center;
}
.content#mzxDownload a {
    margin: 8px;
}



/* GAME SHOWCASE */
.content#showcase {
    padding: 1px;
    /*position: fixed;
    bottom: 5px;*/
    width: 329px;
}
.content#showcase table {
    border-spacing: 0px 6px;
    width: 100%;
}
.content#showcase table th {
    text-align: left;
    background-color: #dfae62;
    border-right: 1px solid #b8873d; 
    border-bottom: 1px solid #b8873d;
    color: #2c5078;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 5px;
}
.content#showcase table td {
    border-bottom: 1px solid #b8873d;
    padding-left: 4px;
}
.content#showcase table tr {
    margin-top: 2px;
    margin-bottom: 2px;
}



/* FEATURED GAME */
.content#featured {
    height: 125px;
}
.content#featured .screenshot {
    width: 160px;
    height: 88px;
    float: left;
    border: 1px solid black;
}
.content#featured .noScreenshot {
    height: 52px;
    text-align: center;
    padding-top: 36px;
}
.content#featured .info {
    display: inline-block;
    width: 120px;
    height: 70px;
    /*float: left;*/
    padding: 10px 15px 0px 15px; /*top right bottom left*/
}
.content#featured .info p {
    display: block;
}
.content#featured .review {
    width: 45%;
    height: 84px;
    float: right;
    margin: 2px 0px; /*top-down, right-left*/
    padding: 3px 6px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    background-color: #577ba4;
    overflow: hidden;
    font-size: 11px;
}
.content#featured .review.author {
    display: block;
    font-style: italic;
}
.content#featured .review.author:after {
    content: " said:";
}
.content#featured .review#text { }



/* SEARCH BOX */
.content#search {
    padding: 10px 0px;
    text-align: center;
}
.content#search select { /* For input box in search window */
    display: inline;
    background-color: #fff;
    font-size: 15px;
}
.content#search input {
    display: inline;
}
.content#search #text { }
.content#search #submit { }




/* ---------- TABLES ---------- */
.highlightRow td { background-color: #56516f; }
.smallTable { width: 100%; }
.smallTable thead th
{
    font-weight: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #e7c083;
    color: #2c5078;
    text-align: left;
    padding-top: 2px;
    padding-bottom: 2px;
}
.smallTable tr:hover { background-color: #4c9559; }
.smallTable td
{
    vertical-align: center;
    font-weight: normal;
    font-family: Arial;
    font-size: 10px;
}

/* "Rolodex" display for first-letter browsing widget */
.rolodex {
    margin: 0;
    padding: 0;
    display: block;
}
.rolodex li
{
    font-size: 11px;
    display: inline;
    padding-right: 2px;
    padding-left: 2px;
    border-left: 1px solid #6889ad;
    /*border-bottom: 1px solid #6889ad;*/
}
.rolodex a
{
    color: #ffffff;
    text-decoration: none;
}
.rolodex li:hover { background-color: #4c9559; }
.rolodex li.first { border-left: none; }

/* Large [content-pane] table */
.largeTable { width: 100%; }
/* TODO: FINISH THIS */

#sortable th { cursor: pointer; }




/* ---------- SCREENSHOT CONTAINER ---------- */
#logo {
    float: left;
    width: 275px;
    height: 81px;
    position: relative;
    top: 20px;
    left: 30px;
    background: url('logonew.png') no-repeat;
}

.imgArch {
    width: 64px;
    height: 64px;
    display: inline-block;
    position: relative;
}
.imgArch#a1 { background: url('arch/windows32.png') no-repeat; }
.imgArch#a2 { background: url('arch/windows64.png') no-repeat; }
.imgArch#a3 { background: url('arch/dos.png') no-repeat; }
.imgArch#a4 { background: url('arch/osx.png') no-repeat; }
.imgArch#a5 { background: url('arch/ubuntu32.png') no-repeat; }
.imgArch#a6 { background: url('arch/ubuntu64.png') no-repeat; }
.imgArch#a99 { background: url('arch/source.png') no-repeat; }

#titlescreen {
    padding-top: 3px;
    text-align: center;
}
#titlescreen img {
    width: 320px;
    height: 175px;
}

#screenshots { position: relative; }
#screenshots .container {
    width: 640px;
    height: 350px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
#screenshots .slides {
    position: absolute;
    top: 0;
    left: 0;
}
#screenshots .slides div {
    position: absolute;
    top: 0;
    width: 640px;
    display: none;
}
#screenshots .previous {
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    position: absolute;
    left: 0px;
    top: 135px;
}
#screenshots .next {
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    position: absolute;
    right: 0px;
    top: 135px;
}

/* ---------- REVIEWS ---------- */
.rawRating {
    display: inline-block;
    position: relative;
    bottom: 3px;
    padding-left: 10px;
}

/* Reviews */
.noratings {
    margin: 15px;
    padding: 15px;
    background-color: #46617f;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
}
.review {
    position: relative;
    margin-top: 12px;
    margin-bottom: 12px;
}
.review .control {
    margin-bottom: 2px;
    margin-left: 4px;
}
.review .control:before {
    content: "(";
}
.review .control:after {
    content: ")";
}
.review #author {
    padding: 3px 0px 2px 10px; /* top right down left */
    text-align: left;
    font-style: italic;
}
.review #modified {
    float: right;
    font-size: 8px;
    font-style: italic;
}
.review #body {
    padding: 2px;
    background-color: #577ba4;
    text-align: left;
}
.review #rating {
    position: absolute;
    top: 0px;
    right: 0px;
}



/* ---------- USER INFORMATION CONTAINER ---------- */
#loginInfo {
    min-width: 400px;
    height: 100px;
    float: right;
    vertical-align: center;
    margin: 10px 20px 10px 0px; /* top right down left */
    border: 1px solid #ffffff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #111111;
}
#loginInfo img#userAvatar {
    height: 100px;
    float: left;
    margin: 0;
    padding: 0px;
    padding-right: 10px;
}
#loginInfo img#userRank {
    float: right;
    padding: 10px 10px 0px 0px; /* top right down left */
}
#loginInfo h1 {
    display: inline;
    margin: 0;
    padding: 0;
    padding-top: 12px;
    color: #ffffff;
    font-family: Verdana;
    font-weight: normal;
    font-size: 18px;
}
#loginInfo h2 {
    display: inline;
    margin: 0;
    padding: 5px 0px; /* top-down, right-left */
    color: #ffffff;
    font-family: Verdana;
    font-weight: normal;
    font-size: 14px;
}
#loginInfo div { }
#loginInfo form {
    padding-top: 30px;
}