@import url(reset.css);

/* Standard setup */
body, html
{
   background-color: #cdcdaa;
   color:            black;
   margin:           0;
   padding:          0;
   font-family:      Verdana, Arial, sans-serif;
   font-size:        10pt;
   line-height:      120%;
}

/* Basic paragraph */
p 
{
   margin-bottom:    0.5em;
}

textarea
{
   width:            99%;
   height:           20em;
}

textarea.small
{
   height:           3em;
}

h1
{
   font-family:     "Trebuchet MS", sans-serif;
   font-size:       160%;
   font-weight:     bold;
   margin-top:      1em;
   margin-bottom:   0.8em;
}

h2
{
   font-family:     "Trebuchet MS", sans-serif;
   font-size:       140%;
   font-weight:     bold;
   margin-top:      0.8em;
   margin-bottom:   0.6em;
   clear:           left;
}

h3
{
   font-family:     "Trebuchet MS", sans-serif;
   font-size:       120%;
   font-weight:     bold;
   margin-top:      0.6em;
   margin-bottom:   0.4em;
}

h4
{
   font-family:     "Trebuchet MS", sans-serif;
   font-size:       110%;
   font-weight:     bold;
   margin-top:      0.4em;
   margin-bottom:   0.2em;
}

strong 
{
   font-weight:     bold !important;
}

a:link
{
   color:           #0000ff;
   text-decoration: underline;
}

a:active
{
   color:           #ff0000;
}

a:visited
{
   color:           #800080;
}

a:hover
{
   text-decoration: none;
}

select, input
{
   margin:           0.2em;
}

table
{
   border-collapse:  collapse;
   border:           0;
}

th
{
   background:       #cdcdaa;
   font-weight:      bold;
}

td, th
{
   padding:          0.2em;
   border:           0;
   vertical-align:   top;
}

strong
{
   font-weight:      bold;
}

pre
{
   font-family:      monospace;
}

img
{
   max-width:95%;
   height:auto;
}

#logo
{
   font-size:        200%;
   font-weight:      bold;
   position:         relative;
   top:              0.2em;
   margin-left:	     0.25em;
   float:            left;
   clear:            left;
}

#logo > a > img, img.icon
{
   margin:           0;
   padding:          0;
   box-shadow:       none;
}

#header
{
   background:       #cdcdaa;
   margin-top:       1em;
   height:           2.5em;
   border-radius:    0.25em;
   z-index:          5;
   margin-left:      0em;
   margin-right:     0.5em;
   padding:          0.25em 0.5em 0.25em 0.5em;
   box-shadow:       0.25em 0.25em 0.25em #888;
   clear:            both;
}

#menubox
{
   float:            left;
   z-index:          5;
}

.menu-list ul.submenu-list
{
   position:         absolute;
   padding:          0.25em;
   top:              2em;
   width:            12em;
   z-index:          6;
   background:       #cdcdaa;
   display:          none;
   float:            left;
   box-shadow:       0.25em 0.25em 0.5em #888;
   border-radius:    0.25em;
}

.menu-list li:hover ul.submenu-list
{
   display:          block;
}

#userbox
{
   min-width:        20em;
   min-height:       3.25em;
   text-align:       center;
   margin:           1em 0.5em 1em 0em;
   float:            right;
   clear:            right;
   background-color: #cdcdaa;
   border-radius:	   0.25em;
   padding:          1em 1em 1em 1em;
   box-shadow:       0.25em 0.25em 0.25em #888;
}

#menubox a.regular
{
   float:            left;
   font-weight:      bold;
   border-right:     1px solid black;
   margin-left:      0.25em;
   margin-top:       0.5em;
   padding:          0.1em 0.25em 0em 0.25em;
   min-width:        6em;
   text-align:       center;
   height:           1.5em;
}

#searchbox
{
   float:            right;
   text-align:       right;
   padding-top:      0.2em;
   padding-right:    0.2em;
}

#searchbox input[type=text]
{
   width:            10em;
}

.backlink
{
   margin-bottom:    1em;
}

.letters
{
   text-align:       center;
   margin-bottom:    1em;
}

.pagination
{
   font-size:        80%;
   text-align:       right;
   margin-top:       0.3em;
   margin-bottom:    0.3em;
}

.gameslist 
{
   width:            100%;
}

.gameslist tr.even
{
}

.gameslist tr.odd
{
   background:       #e5e7be;
}

.gameslist tr:hover
{
   background:       #ecedcf;
}

.gameslist th a
{
   color:            #000;
}

.gameslist td, .gameslist th, .userstable td, .userstable th
{
   border:           1px solid;
}

.gameslist td.gametitle
{
   white-space:      nowrap;
}

.form
{
   width:            100%;
}

.form tr
{
   vertical-align:   top;
}

.form td
{
   vertical-align:   top;
}

.submissions tr
{
   vertical-align:   top;
}

.submissions th, .submissions td
{
   border:           1px solid;
}

#wrapper
{
   margin:           1em auto 1em auto;
   padding:          0.5em;
   background-color: #ffffeb;
   max-width:        80em;
}

#locator ul
{
   margin:           0;
   padding:          0;
   list-style-type:  none;
}

#locator li
{
   display:          inline;
   padding:          0;
   margin:           0;
}

#locator li:before
{
   content:          "> ";
}

#locator li:first-child:before
{
   content:          "";
}

#actions.small
{
   font-size:        60%;
}

#solved
{
   clear:            left;
   padding-top:      1em;
}

.right-justified dl
{
   padding:          0.5em;
}

.right-justified dt
{
   float:            left;
   clear:            left;
   width:            11em;
   text-align:       right;
   font-weight:      bold;
   margin:           0 0.5em 0.5em 0;

}

.right-justified dd
{
   margin:           0 0 0.5em 0em;
   float:            left;
}

div#details > .right-justified dd
{
   width:            18em;
}

div.box-body > .right-justified dd
{
   width:            19em;
}

.right-justified ul
{
   padding:          0.25em;
   margin:           0;
   list-style-type:  none;
}

.subtitle
{
   font-size:        120%;
   font-weight:      normal;
   margin-top:       0;
}

.box-images, .box-rating, .box-comments, .box
{
   padding:          0.5em;
   margin-top:       0.5em;
   margin-bottom:    1em;
   border-radius:    0.25em;
   background-color: #cdcdaa;
   border-bottom-style: none;
   box-shadow:       0.25em 0.25em 0.25em #888;
}

.box-header h2
{
   padding:          0;
   padding-left:     0.2em;
   margin:           0;
}

.box-body-images, .box-body-comments, .box-body-rating, .box-body, .box
{
   padding:          0.5em;
   overflow:         auto;
}

.box-body-images, .box-body-comments
{
   max-height:       20em;
}

.box-body img
{
   margin-left:	     auto;
   margin-right:     auto;
}

.box-body-rating
{
   height:           7em;
}

.box h3
{
   padding-top:      0.5em;
}

#current-image
{
   text-align:       center;
}

ul
{
   list-style-type:  disc;
   margin:           1.12em 0;
   margin-left:      1em;
}

.horizontal-list, .menu-list, .button-list
{
   list-style-type:  none;
   margin:           0em;
   padding-top:      0em;
}

h2 ul.horizontal-list
{
   display:          inline;
}

.button-list
{
   margin-left:      2em;
}

.horizontal-list li, .menu-list li, .button-list li
{
   list-style-type:  none;
   display:          inline;
   min-width:        6em;
}

.comma li:before
{
   content:          ", ";
}

.horizontal-list li:first-child:before
{
   content:          "";
}

.menu-list li 
{
   position:         relative;
   float:            left;
}

.button-list li
{
   float:            left;
   padding:          1.25em 0 0 0.5em;
}

.vertical-list, .submenu-list
{
   list-style-type:  none;
   margin:           0;
   padding:          0;
}

.vertical-list li, .submenu-list li
{
   display:          list-item;
}

.submenu-list li
{
   padding:          0.5em;
}

.images
{
   text-align:       center;
   padding-top:      1em;
   padding-bottom:   1em;
   display:          inline-block;
   width:            100%;
}

#thumb1
{
   float:            left;
   clear:            left;
   vertical-align:   middle;
   text-align:       center;
   width:            45%;
}

#thumb2
{
   float:            right;
   clear:            right;
   vertical-align:   middle;
   text-align:       center;
   width:            45%;
   height:           100%;
}

.opener
{
   cursor:           pointer;
}

.opener span
{
   font-family:      monospace;
}

#related p, #related ul, #related li
{
   display:          inline;
}

#actions
{
   margin-top:       0.5em;
   clear:            left;
}

#related-content a
{
   border:           1px solid #000;
   background:       #c0c0c0;
   color:            #000;
   text-decoration:  none;
   padding:          0.2em;
   box-shadow:       0.25em 0.25em 0.5em #888;
   margin-left:      0.25em;
   border-radius: 0.3em 0.3em 0.3em 0.3em;
}

#related-content a:hover
{
   text-decoration:  underline;
}

#resources li
{
   padding-bottom:   0.5em;
}

#debug
{
   width: 100%;
   height: 20em;
   overflow: auto;
   border:  1px solid;
   margin-top: 20px;
}

.left
{
   margin:     0.5em;
   width:      52%;
   min-height: 45em;
   float:      left;
   clear:      left;
}

.right
{
   margin:     0.5em;
   min-width:  10em;
   width:      42%;
   float:      right;
}

.right-minimal
{
   margin:     0.5em;
   min-width:  10em;
   float:      right;
}

#leftcol
{
   margin:     0.5em;
   width:      52%;
   min-height: 45em;
   float:      left;
   clear:      left;
}

#rightcol
{
   margin:     0.5em;
   min-width:  10em;
   width:      42%;
   float:      right;
}

.small-rule
{
   width:      75%;
   /* Fix for weird Mozilla and WebKit behaviour */
   margin:     0 auto;
   margin-top: 1em;
   margin-bottom:1em;
}

.review-body
{
   clear: left;
}

.imagecomment
{
   font-style: italic;
   text-align: center;
}

img
{
   margin: 0.75em;
   box-shadow:	0.25em 0.25em 0.25em #888;
}

blockquote
{
   font-style: italic;
   margin: 0.5em 1em 2em 2em;
   padding-top: 1em;
}
 
blockquote p:first-child:before
{
   content: '\201C';
   font-family: serif;
   font-size: 3em;
   margin-left: -0.6em;
   vertical-align: bottom;
}

blockquote p:first-child:after
{
   content: '\201D';
   font-family: serif;
   font-size: 3em;
   margin-right: -0.4em;
   float: right;
   vertical-align: bottom;
}
 
blockquote[cite]:after
{
   content: attr(cite);
   font-weight: bold;
   font-style: normal;
   float: right;
}

.container
{
   display:grid;
   gap:1em;
   margin-bottom:1em;
}

.threecols
{
   grid-template-columns: auto auto auto;
}

.twocols
{
   grid-template-columns: auto auto;
}

.container h1, .container h2
{
   /*background-color:#99997f;*/
   background-color: #cdcdaa;
   padding:.2em;
   margin:0;
}

.container .box
{
   display:flex;
   flex-direction:column;
   justify-content:stretch;
   padding:0;
   margin:0;
   background-color:transparent;
   border:1px solid #cdcdaa;
}

.container .box-body
{
   padding:0.5em;
}

.morelink
{
   margin-top:auto;
   margin-bottom:.2em;
   margin-right:.2em;
   align-self:flex-end;
}

@media (max-width:800px) {
    #logo
    {
       position:         static;
       text-align:       center;
       float:            none;
       clear:            both;
    }
    #userbox
    {
       margin-top:       1em;
       float:            none;
       clear:            both;
    }
    #header
    {
       height:           auto;
    }
    #menubox
    {
       float:            none;
    }
    .menu-list ul.submenu-list
    {
       float:            none;
    }
    #searchbox
    {
       float:            none;
       text-align:       center;
    }
    .right-justified dt
    {
       width:            5em;
    }
    .left
    {
       width:      auto;
       float:      none;
       clear:      both;
    }
    .right
    {
       width:      auto;
       float:      none;
       clear:      both;
       margin-top: 7em;
    }
    .right-minimal
    {
       float:      none;
       clear:      both;
    }
    #leftcol
    {
       width:      auto;
       float:      none;
       clear:      both;
    }
    #rightcol
    {
       width:      auto;
       float:      none;
       clear:      both;
    }
    form td
    {
       display:    block;
    }
    table.gameslist th
    {
       display:    none;
    }
    table.gameslist tr
    {
       display:block;
       margin-bottom:1em;
    }
    table.gameslist td
    {
       display:    block;
       border:     0;
    }
    table.gameslist td.gametitle
    {
       font-size:120%;
       font-weight:bold;
       white-space:normal;
    }
}

@media (max-width:640px) {
    .threecols
    {
       grid-template-columns: auto auto;
    }
}

@media (max-width:480px) {
    .threecols, .twocols
    {
       grid-template-columns: auto;
    }
}