/**
 * DigitalMZX Archive Gen5
 * Codename: FREESTYLE
 * Production CSS File
 *
 * Title: "Rain Clouds"
 * Author: Lachesis
 *
 * This and all archive code is for use by DigitalMZX only. Any other usage must be pursued via the author.
 **/

body, html
{
  height: 100%;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background-color: #282e3c;
}

a { color: #ffffff; }
a.profilelink
{
  color: #7fbb7f;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}
a.profilelink:hover
{
  color: #aaffaa;
}
a.litLinks {
    display: block;
    vertical-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #ffffff;
    text-decoration: none;
}
a.litLinks:hover { background-color: #4c9559; }
a.logout { background-color: #58627b; }
a.adminLinks { /* Inherits litLinks normally */
    background-color: #58627b;
}
.hidden { display: none; }

pre br { display: none; }


/* ---------- PRIMARY CONTAINER ELEMENTS ---------- */
#outerContainer /* Overall container */
{
  width: 864px;
  margin: auto;
}
#topContainer
{
  display: block;
  width: 100%;
  height: 140px;
/*  margin-right: 15px;*/
}
#bottomContainer
{
  margin: 0px;
  display: block;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
#sidebarContainer
{
  width: 180px;
  display: inline-block;
  flex-shrink: 0;
  flex-grow: 0;
}
#mainContainer
{
  width: 672px;
  display: inline-block;
  margin-bottom: 12px;
  padding-left: 1%;

  /* lol ie6 */
  _position: absolute;
  _top: 140px;
  _left: 192px;
}

/* Normal layout bounds. */
@media screen and (min-width: 1080px)
{
  #topContainer, #bottomContainer
  {
    max-width: 1440px;
    margin: auto;
  }
  #outerContainer
  {
    min-width: 864px;
    max-width: 1440px;
    width: 95%;
  }
  #mainContainer
  {
    width: 100%;
    _width: 672px;
  }
  #sidebarContainer
  {
    width: 336px;
    _width: 180px;
  }
}

/* Small layout search panel, navigation. */
@media screen and (max-width: 1079px)
{
  #searchBox { flex-wrap: wrap; }
  #searchText { width: 100%; }
  #searchSelect { order: 1; }
  #searchSubmit { order: 2; }

  #navigation #navigationBox { padding-left: 0px; padding-right: 0px; }
  #navigation #navigationBox li a { padding-left: 8px; padding-right: 8px; }

  .rolodex li a { padding-left: 5px; padding-right: 4px; }
}



/* ----- Fonts ----- */

p, #gameSummary, .review #body
{
  line-height: 130%;
}

.content
{
  font-family: Arial, sans-serif;
  position: relative;
}

.contentHeader
{
  font-family: Tahoma, Helvetica, sans-serif;
/*  font-weight: bold;*/
  letter-spacing: 1.5px;
}

.smallTable, #navigation
{
  font-family: Verdana, Arial, sans-serif;
}

.rolodex
{
  font-family: mzxfont, "Lucida Console", Monaco, monospace;
  font-size: 14px;
}

#loginInfo
{
  font-family: Verdana, Arial, sans-serif;
}


/* ---------- TOP ---------- */
#topContainer .content
{
  margin-bottom: 10px;
  padding: 5px;
  border: 3px solid #555d7b;
  border-radius: 5px;
  -moz-border-radius: 5px;
  /*background-color: #58627b;*/
  background-color: #555d7b;
/*  font-family: Arial;*/
/*  font-size: 12px;*/
  font-size: medium;
}

/* ---------- MAIN ---------- */
#mainContainer .content
{
  margin-bottom: 10px;
  padding: 5px;
  border: 3px solid #555d7b;
  border-radius: 5px;
  -moz-border-radius: 5px;
  /*background-color: #58627b;*/
  background-color: #555d7b;
/*  font-family: Arial;*/
 /* font-size: 14px;*/
  font-size: medium;
}
#mainContainer .twoByRight
{
  float: right;
  width: 49.4%;
  _width: 320px;
}
#mainContainer .twoByLeft
{
  float: left;
  width: 49.4%;
  _width: 320px;
}
.twoByLeft .smallTable th:first-of-type { width: 70%; }

#mainContainer .contentHeader {
    height: 24px;
    display: block;
    padding: 3px;
    /* background-color: #909daf; */
    border: 1px solid #647280;
    background-color: #8c97bf;
    color: #ffffff;
    vertical-align: center;
    text-align: center;
/*    font-size: 20px;*/
    font-size: x-large;
}

/* ---------- SIDEBAR ---------- */
#sidebarContainer .content {
    margin-bottom: 10px;
    padding: 5px;
    border: 2px solid #505a70;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #505a70;
/*    font-family: Arial;*/
/*    font-size: 14px;*/
    font-size: medium;
}
#sidebarContainer .contentHeader {
    height: 20px;
    display: block;
    padding: 3px;
    padding-left: 6px;
    border: 1px solid #687880;
    /*background-color: #8e98ae;*/
    background-color: #8a92be;
    color: #fff;
    vertical-align: center;
    font-family: Tahoma, Helvetica, sans-serif;
/*    font-size: 16px;*/
    font-size: large;
  font-weight: normal;
 letter-spacing: normal;
}

/* ---------- Other divs and headers -------- */
.gameTitle {
    width: auto;
    vertical-align: center;
    padding: 5px;
    border: 1px solid #687880;
    /*background-color: #909daf;*/
    background-color: #8c97bf;
    color: #fff;
    text-align: center;
    font-family: Trebuchet, serif;
    font-family: Tahoma, Helvetica, sans-serif;
    text-decoration: underline;
    /*font-size: 32px;    */
  font-size: xx-large;
}





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

/* IDs listed for reference */
.content#network { }
.content#browse { }
.content#search { }
.content#pending { }
.content#error { }

/* Front page */
.content#topDownloads { }
.content#intro { }
.content#recentReviews { }
.content#recentlyAdded { }
.content#recentlyAdded .smallTable th:first-of-type { width: 70%; }

/* Search */
.content#searchResult { }

/* Showcase */
.content#gameSummary { }
.content#reviews { }
.content#recordMgmt { }
.content#resourceActions { }

/* DOWNLOAD MZX */
.content#mzxDownload {
    text-align: center;
}
.content#mzxDownload .contentHeader
{
  letter-spacing: normal;
}

.content#mzxDownloadLink
{
  padding: 0px;
  text-align: center;
  background-color: #373;
  border-color: #373;
}

.content#mzxDownloadLink:hover
{
  background-color: #494;
  border-color: #494;
}

.content#mzxDownloadLink a.rss
{
  top: 7px;
}

.content#mzxDownloadLink a.mainlink
{
  display: inline-block;
  padding: 6px 0px;
  width: 100%;
  height: 100%;
  text-decoration: none;
/*  font-size: 20px;*/
  font-size: x-large;
/*  font-family: Tahoma, Helvetica, sans-serif;*/
  font-weight: bold;
}

/* GAME SHOWCASE */
.content#showcase {
    padding: 1px;
    /*position: fixed;
    bottom: 5px;
    width: 329px;*/
}
.content#showcase div.controls {
    text-align: center;
}
.content#showcase table {
    border-spacing: 0px 4px;
/*    font-size: 1.1em;*/
    width: 100%;
}
.content#showcase table th {
    text-align: left;
    background-color: #7c8498;
    border-right: 1px solid #687080;
    border-bottom: 1px solid #687080;
    color: #dde;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 5px;
}
.content#showcase table td {
    /* border-bottom: 1px solid #687080; */
    padding-left: 4px;
}
.content#showcase table tr {
    margin-top: 0px;
    margin-bottom: 0px;
}
.content#showcase .addButton {
    float: right;
}
.content#showcase #mzxreq {
}
.content#showcase .gameversion {
    font-weight: bold;
}
.content#showcase .gamemzxver {
    font-weight: bold;
}
.content#showcase ul {
    list-style-type: none;
}
.content#showcase li {
    margin: 3px;
}
.content#showcase li.important {
    border-radius: 6px;
    padding: 5px;
    margin: 2px;
    background-color: #363650;
    font-weight: bold;
/*    font-size: 1.5em;*/
 font-size: x-large;
}
.content#showcase li.important a {
    word-break: break-all;
    display: inline-block;
    width: 90%;
}
.content#showcase li.arrow:before {
    content: "\25BA";
    padding-right: 5px;
    font-size: .3em;
}
.content#showcase a {
    text-decoration: none;
}
.content#showcase a:hover {
    color: #fca;
}

/* FEATURED GAME */
.content#featured
{
  min-height: 125px;
  text-align: center;
}

.content#featured .contentHeader
{
  text-align: left;
}

.content#featured .screenshot
{
  display: block;
  width: 320px;
  _width: 160px;
  max-width: 100%;
  max-height: 175px;
  overflow: hidden;
  margin: 5px 0px;
  border: 1px solid black;
}

.content#featured .noscreenshot /* Should be used with .screenshot */
{
  display: block;
  height: 52px;
  text-align: center;
  padding-top: 40%;
}

.content#featured .info
{
  display: inline-block;
  max-width: 100%;
  padding: 0px;
}

.content#featured .info p
{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content#featured .info.title  { }
.content#featured .info.author { }
.content#featured .info.rating { }



.pageDescription {
    display: block;
    text-align: center;
    /*font-size: 14px;*/
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
}

.pageSelector {
    display: block;
    margin-bottom: 1px;
    text-align: center;    
}
.pageSelector:before {
    content: "Page: ";
}
.pageSelector .pageLink {
    display: inline-block;
    padding: 1px 2px;
    text-decoration: none;
}
.pageSelector .pageLink#currentPageLink {
    font-weight: bold;
}
.pageSelector .pageLink:hover {
    background-color: #4c9559;
}

/* ON-LINE HELP */
.content#helpPane { }
/* See onlinehelp.css for the help window's styles */

ul#helpNav {
    display: inline;
}

ul#helpNav li {
    display: inline;
    margin: 1px;
    list-style-type: none;
}
ul#helpNav li a {
    background-color: #333;
    border-color: #333;
    border-radius: 2px 2px;
    -moz-border-radius: 2px 2px;
    padding: 1px 3px;
    color: #FFF;
    text-decoration: none;
}
ul#helpNav li a:hover {
    background-color: #666;
    border-color: #666;
}
#helpSearchForm, #helpSearchForm input {
    display: inline;
    margin: 1px;
}

/* GAME SCREENSHOTS */
.content#gameScreenshots {
/*    padding-left: 18px;*/
}

/* SEARCH BOX */
.content#search
{
  padding: 10px;
}



/* ---------- TABLES ---------- */
.highlightRow { background-color: #56516f; }
.smallTable
{
  width: 100%;
  border-collapse: collapse;
  margin-top: 1px;
  margin-bottom: 8px;
}
.smallTable thead th
{
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
  border-right: 1px solid #687080;
  border-bottom: 1px solid #687080;
  background-color: #7c8498;
  color: #dde;
  text-align: left;
  font-weight: normal;
/*    font-family: Tahoma, Helvetica, sans-serif;*/
    /*font-size: 12px;*/
  font-size: small;
}
/* Special config for sortable headers. */
th.sortable
{
  position: relative;
  white-space: nowrap;
}
th.sortable .sortspacer
{
  display: inline-block;
  width: 32px;
}
th.sortable .sortbuttons
{
  display: inline-block;
  position: absolute;
  right: 2px;
}
th.sortable .sortbutton
{
  margin: 0px;
  color: #000;
  text-decoration: none;
}

.smallTable tr
{
  height: 20px;
}

.smallTable tr:hover { background-color: #4c9559; }
.smallTable td
{
  padding-left: 2px;
  padding-right: 2px;
  vertical-align: center;
  font-weight: normal;
/*    font-family: Arial;*/
    /*font-size: 13px;*/
  font-size: small;
}

/* "Rolodex" display for first-letter browsing widget */
.rolodex
{
  display: block;
  margin: 0;
  margin-bottom: 8px;
  padding: 0;
  text-align: center;
  word-break: break-all;
}
.rolodex li
{
  display: inline-block;
  _display: inline;
/*  border-left: 1px solid #58627b;*/
  list-style-type: none;
}
.rolodex li.first
{
  border-left: none;
}
.rolodex li:hover
{
  background-color: #4c9559;
}
.rolodex a
{
  display: block;
  _display: inline;
  padding: 2px 7px; /* top-down, left-right */
  color: #ffffff;
  text-decoration: none;
}

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

.noreviews
{
  color: #aac;
}



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

/* Reviews */
.ratingbutton
{
  border-radius: 4px;
  -moz-border-radius: 4px;
  background-color: #4c5268;
  margin: 5px 15px;
}
.ratingbutton:hover
{
  background-color: #4c9559;
}
.ratingbutton.big
{
  margin: 15px;
}
.ratingbutton .ratingbuttonlink
{
  padding: 5px;
  display: block;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
}
.ratingbutton.big .ratingbuttonlink
{
  padding: 15px;
}

/* Review */
.review {
    position: relative;
    margin-top: 12px;
    margin-bottom: 12px;
}
.review .control {
    display: inline;
    position: relative;
    top: 5px;
    margin-left: 6px;
    padding: 2px 8px; /* top-down, right-left */
    border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #606c88;
    color: #ccd;
    text-decoration: none;
}
.review .control:hover {
    background-color: #485070;
}
.review .anchor {
}
.review .author {
    display: block;
    position: relative;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 2px;
    text-align: left;
    font-style: italic;
}
.review .modified {
    float: right;
    padding-bottom: 1px;
    color: #ddd;
    text-align: left;
/*    font-size: 8px;*/
  font-size: small;
    font-style: italic;
}
.review .body {
    padding: 12px 6px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    background-color: #606c88;
    text-align: left;
}
.review .rating {
    position: absolute;
    top: 0px;
    right: 0px;
}
/* Highlighted Review */
.review.highlight {
    padding: 4px;
    border: 3px solid #70404c;
    border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #804e54;
}
.review.highlight .control {
    background-color: #885c60;
}
.review.highlight .control:hover {
    background-color: #604048;
}
.review.highlight .body {
    background-color: #885c60;
}
.review.highlight .rating {
    top: 4px;
    right: 4px;
}



/* ---------- USER INFORMATION CONTAINER ---------- */
#loginInfo
{
  min-width: 400px;
  height: 80px;
  float: right;
  vertical-align: center;
  margin: 5px 0px 5px 0px; /* top right down left */
  background-color: #557;
  border: 3px solid #557;
  border-radius: 5px;
  -moz-border-radius: 5px;
}
#loginInfo img#userAvatar
{
  height: 80px;
  float: left;
  margin: 0;
  padding: 0px;
  padding-right: 10px;
}
#loginInfo img#userRank
{
  float: right;
  padding: 5px 5px 0px 0px; /* top right down left */
}
#loginInfo h1
{
  display: inline-block;
  margin: 0;
  padding: 0;
  padding-top: 6px;
  color: #eef;
  font-weight: normal;
  font-size: 16px;
}
/* not used anymore- was the email address... */
#loginInfo h2
{
  display: inline;
  margin: 0;
  padding: 5px 0px; /* top-down, right-left */
  color: #eef;
  font-weight: normal;
  font-size: 14px;
}
#loginInfo div { }

#styleForm
{
  padding-top: 16px;
  padding-right: 5px;
}
#styleSelectLabel
{
  font-size: 12px;
}



/* ---------- NAVIGATION CONTAINER ---------- */
#navigation
{
  display: block;
  clear: both;
  width: 100%;
}
#navigationBox
{
  width: auto;
  height: 32px;
  padding: 0px 8px;
  border-bottom: 5px solid #557;
  margin: 0px;
  display: block;
  display: flex;
  flex-flow: row nowrap;
}
#navigationBox li
{
  _display: inline;
  height: 37px;
  border-radius: 3px 3px 0px 0px;
  margin: 0px 2px;

  list-style-type: none;
  text-align: center;
  vertical-align: middle;
  flex-grow: 0;
  flex-shrink: 0;
}
#navigationBox li.current
{
  background-color: #557;
}
#navigationBox li:hover
{
  background-color: #596;
}
#navigationBox li.user
{
  height: 30px;
  border-radius: 5px 5px 3px 3px;
  margin-bottom: 2px;
  background-color: #855;
}
#navigationBox li.user:hover
{
  background-color: #c66;
}
#navigationBox li.spacer
{
  width: 100%;
  _width: 0px;
  flex-grow: 10;
  flex-shrink: 10;
  background-color: transparent;
}
#navigationBox li a
{
  display: block;
  padding: 5px 10px 10px;
  font-weight: bold;
  font-size: small;
  text-decoration: none;
}



/* ---------- FOOTER ---------- */

#footer
{
  margin: 5px 5px 15px;
  color: #99a;
  text-align: center;
}

#footer hr
{
  margin-bottom: 15px;
  border: 1px solid #445;
}