@font-face
{
	font-family: 'Classic Console';
	src: url('/static/fonts/clacon.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face
{
    /* http://int10h.org/oldschool-pc-fonts/readme/ */
	font-family: 'cp437';
	src: url('/static/fonts/Px437_IBM_EGA8.ttf');
	font-weight: normal;
	font-style: normal;
}

a
{
    text-decoration:none;
}

a:hover
{
    text-decoration:underline;
}

a:visited
{
    color:#00F;
}

a[target=_blank]
{
    padding-right:16px;
    background:url("/static/images/external_link.png");
    background-position:right;
    background-repeat:no-repeat;
}

a.noext[target=_blank]
{
    padding-right:0;
    background:none;
}

a.broken
{
    text-decoration:line-through;
    color:#F00;
}

.b
{
    font-weight:bold;
}

body
{
    font-family:sans-serif;
    background:#CCC;
    max-width:95%;
    margin:auto;
    overflow-y:scroll;
}

.col
{
    display:inline-block;
    vertical-align:top;
    overflow:auto;
}

.inline
{
    display:inline;
}

.hidden
{
    visibility:hidden;
}

.i
{
    font-style:oblique;
}

.jsLink
{
	cursor:pointer;
	color:#00F;
}

.l
{
    text-align:left;
}

.c
{
    text-align:center;
    margin:auto;
}

.r
{
    text-align:right;
}

.img-set
{
    display:block;
    text-align:center;
    margin:auto;
}

.img-set img
{
    border:1px solid #000;
}

.img-c
{
    display:block;
    margin:auto;
    text-align:center;
}

img.fit
{
    max-width:100%;
}

.dos
{
    font-family:"Classic Console";
    font-size:16pt;
}

.mono
{
    font-family:monospace;
}

.plaintext
{
    white-space:pre-wrap;
}

.fl
{
    float:left;
}

.fr
{
    float:right;
}

.sub
{
    font-size:smaller;
}

h1, h2, h3
{
    margin:0;
    margin-bottom:0.5em;
}

.debug
{
    background:#FAA;
}

#environment
{
    height:2px;
    width:100%;
    margin:0;
    overflow:hidden;
    text-align:center;
    border-top:2px solid #FF0;
}

section
{
}

.selected, #file-tabs ul li.selected
{
    background:#619F9F;
}

table
{
    border-collapse:collapse;
}

table td, table th
{
    border:1px solid #000;
}

header
{
    margin:auto;
    flex:0 0 100%;
}

nav
{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    height:70px;
}

nav div
{
    text-align:center;
    font-size:28px;
    flex:1;
    font-family:"cp437";
}

.nav-link
{
    padding:0.5em;
    width:100%;
    border-radius:20px;
}

.nav-link .key
{
    text-align:center;
    margin:auto;
    display:inline-block;
    width:1.5em;
    color:#000;
}

.nav-link:nth-child(even) .key { background-color:#AAA; }
.nav-link:nth-child(odd) .key { background-color:#0AA; }

.nav-link a
{
    color:#FF5;
    background-color:#00A;
    display:inline-block;
    padding:4px;
    width:80%;
}

.nav-link a:hover
{
    text-decoration:none;
}

@media (min-width: 10px)
{
    #logo
    {
        background-image:url("/static/images/logos/museum_of_zzt_logo_nocat.png");
        background-repeat:no-repeat;
        background-position:left bottom;
        background-size:contain;
        height:70px;
        display:block;
        position:relative;
    }
}

@media (min-width: 1600px)
{
    #logo
    {
        background-image:url("/static/images/logos/museum_of_zzt_logo_wide_v2.png");
        background-repeat:no-repeat;
        background-position:left bottom;
        background-size:contain;
        height:100px;
        display:block;
        position:relative;
        top:30px;
    }
}

.sidebar
{
    /*min-width:200px;*/
    width:15%;
    /*flex-grow:1;*/
}

.sidebar h1
{
    text-align:center;
}

.sidebar h2
{
    margin-top:0.5em;
    margin-bottom:0;
}

#sidebar-right
{
    order:3;
}

.social
{
    text-align:center;
}

.social a[target=_blank]
{
    padding-right:0px;
    background:none;
    display:inline-block;
    width:24px;
    height:24px;
}


.social img
{
    max-width:24px;
    max-height:24px;
}

#content
{
    order:2;
    width:60%;
    /*flex-grow:2;

    min-width:50%;
    max-width:50%;*/

}

.flex-container
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
}

.block
{
    padding:0.5em;
    margin:0.5em 0 0.5em 0;
    background:#F0F0F0;
    border:1px solid #000;
}

footer
{
    text-align:center;
    font-size:smaller;
}

.toggle
{
    display:none;
}

.toggle.selected
{
    display:inline;
}
/* Left sidebar */
#sidebar-left
{
    order:1;
    text-align:center;
}

#featured
{

}

#featured img
{
    width:80%;
}

.worlds-block form
{
    margin:1em 0 1em 0;
}

#letters
{
    width:100%;
    text-align:center;
    margin:auto;
}

#letters a
{
    font-family:monospace;
    display:inline-block;
    width:8%;
    margin-bottom:0.25em;
    text-decoration:none;
    font-size:larger;
}

#letters a:hover
{
    background:#CCC;
}

input[name=q]
{
    max-width:80%;
    border:1px solid #000;
}

#search-button
{
    background:#CCC;
    margin-top:2px;
}
/* End Left sidebar */

.pages
{
    text-align:center;
    margin:auto;
    width:90%;
    padding:1em;
}

.pages .sub + .sub
{
    padding-top:2px;
}

/* File blocks */
.file-block
{
    width:100%;
    border:1px solid #000;
    margin-bottom:1em;
    display:flex;
    flex-wrap:wrap;
}

.file-screen img
{
    max-width:100%;
}

.file-screen
{
    margin:auto;
    flex:0 0 auto;
    min-width:240px;
    max-width:240px;
    cursor:zoom-in;
}

.file-block > div
{
    padding:0.5em;
}

.file-info
{
    min-height:175px;
    flex:1 1 30%;
}

.file-info div
{
    display:inline-block;
    min-width:100px;
}

.file-info span:hover
{
    cursor: help;
}

.file-details
{
    padding:0.25em;
    max-width:100%;
}

div.file-links, div.file-details, div.file-meta
{
    flex-basis:100%;
    min-height:auto;
    height:auto;
    padding:0.25em;
    border-top:1px solid #000;
    display:flex;
    justify-content: space-around;
    text-align:center;
}

div.file-meta
{
    border-bottom:1px solid #000;
}

div.file-meta div
{
    flex:1 0 15%;
}

div.file-links div
{

}

div.file-links ul, div.file-details ul
{
    margin:0;
}

.file-links li
{
    display:inline-block;
    width:19%;
    text-align:center;
}

div.file-details ul
{
    padding-left:0px;
}

.file-details li
{
    display:inline-block;
    font-family:monospace;
    margin-left:1.5em;
}

.featured-reviews
{
    max-width:30%;
    text-align:right;
}

.featured-description
{
    padding:0;
    flex:0 1 100%;
}

.featured-description > div
{
    padding:1em;
}
/* End File blocks */

/* List View */
#list-table
{
    width:100%;
}
#list-table td
{
    height:2em;
    padding-left:4px;
}

#list-table td.title { width:25%; }
#list-table td.author { width:25%; }
#list-table td.genre { width:20%; }
#list-table td.size { width:10%; }
#list-table td.rating { width:5%; text-align:center; }
#list-table td.files { width:5%; text-align:center; }
#list-table td.wiki { width:5%; text-align:center; }
/* End List View */

/* Gallery View */
.gallery
{
    display:flex;
    text-align:center;
    flex-wrap:wrap;
    justify-content:center;
}

.gallery-wide
{
    display:flex;
    text-align:center;
    flex:0 1 100%;
    overflow:auto;
    padding:0.25em;
    flex-wrap:wrap;
    justify-content:center;
    max-height:265px;
}

.gallery-block
{
    margin:0 0.25em 1em 0.25em;
    border:1px solid #000;
    /*flex:1 1 240px;*/
    text-align:center;
    max-width:480px;
    min-width:240px;
}

.gallery-block > div
{
    max-width:240px;
}
/* End Gallery View */

/* File viewing */
#file-area
{
    display:flex;
    flex-wrap:wrap;
}

#details, #play-area
{
    min-width:482px;
    max-width:100%;
    min-height:350px;
    max-height:700px;
    border:1px solid #000;
    border-top:0;
    padding:0.25em;
    overflow:auto;
    clear:both;
    font-family:monospace;
    margin:auto;
    margin-bottom:1em;
    display:flex;
    align-items:stretch;
}

#details
{
    position:relative;
    width:100%;
}

#overlay
{
    height:2em;
    position:absolute;
    font-size:14px;
    line-height:14px;
    top:0.25em;
    left:0.25em;
    /*width:21em;*/
}

#details[data-format=szt] #overlay
{
    background-color:rgba(128, 128, 128, 0.5);
    opacity:50%;
}

#play-area
{
    /*min-height:400px;*/
}

#play-area iframe
{
    margin:auto;
}

#details[data-format=zzt] { align-items:center; }
#details[data-format=txt] { align-items:stretch; }
#details[data-format=img] { align-items:center; }
#details[data-format=audio] { align-items:center; }
#details[data-format=video] { align-items:center; }
#details[data-format=szt] { display:block; }
#details[data-format=szt] canvas { max-width:none; }

#details img, #details canvas
{
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
    border:1px solid #AAA;
}

#details img.charset
{
    background:#000;
}

#lower-ui
{
    width:100%;
    height:300px;
    display:flex;
    align-items:stretch;
}

#file-list
{
    border:1px solid #000;
    border-right:none;
    overflow-x:none;
    overflow-y:auto;
    font-family:monospace;
    flex:1;
}

#file-list li.zip-content
{
    display:none;
}

#file-list ul, #file-list ol
{
    margin:0;
    padding:0;
    list-style:none;
}

#file-list ul li
{
    padding-left:0.5em;
    padding-right:0.5em;
}

#file-list ul li:hover
{
    cursor:pointer;
    background:#98C9C9;
}

.board
{
    border-top:1px dotted #000;
}

.board div
{
    display:inline;
}

.board div[name=board_idx]
{
    width:4ch;
    float:left;
}

#file-list ul li ol li.code-match
{
    padding-left:6ch;
}

#file-list ul li ol /* ZZT Boards */
{
    background:#FFF;
    display:flex;
    flex-direction:column;
}

#file-list ul li ol li /* ZZT Boards */
{
    text-align:left;
}

#world-canvas
{
    min-width:480px;
    min-height:350px;
    background:#000;
}

#tab-area
{
    padding:0.5em;
    border:1px solid #000;
    overflow:none;
    font-family:monospace;
    flex:2;
}

#file-tabs
{
    height:1em;
}

#file-tabs ul
{
    padding:0;
    margin:-0.5em;
    margin-bottom:0.5em;
    border-bottom:1px solid #000;
    display:flex;
}

#file-tabs ul li
{
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;
    background:#CCC;
    flex:4;
    border-right:1px solid #000;
}


#file-tabs ul li:hover
{
    text-decoration:underline;
    cursor:pointer;
}

#file-tabs ul li[name=help]
{
    flex:1;
    border-right:0;
}

#file-data
{
    height:98%;
    margin-top:3px;
}

#world-info, #board-info, #element-info, #stat-info, #preferences
{
    height:98%;
    overflow:auto;
}

.color-swatch
{
    width:8px;
    height:14px;
    background:url("/static/images/colors.png");
    background-position:32px 28px top;
    background-repeat:no-repeat;
    display:inline-block;
}

table.fv
{
    margin:0.25em;
}

table.fv td
{
    padding-left:0.5em;
    padding-right:0.5em;
}

table.fv tr td:nth-child(odd)
{
    text-align:right;
    border-right:0;
    width:auto;
}

table.fv tr td:nth-child(even)
{
    text-align:left;
    border-left:0;
}

table.fv .exit
{
    width:1.5em;
}

input[name=code-search]
{
    width:10em;
}

#code-search-submit
{
    margin-left:1em;
}
/* End file viewing */

/* Reviews */
div.file-meta + .review
{
    border-top:0;
}

.review, .review-post
{
    margin:auto auto 1em;
}

.review-meta
{
    margin-bottom:1em;
}

.review article
{
    margin-bottom:1em;
}

/* End Reviews */

/* Ascii */
#ascii-table
{
    width:100%;
}
#ascii-table td, #ascii-table th
{
    text-align:center;
    min-width:8%;
    padding:2px;
}

#ascii-table img
{
    background:#000;
}
/* End Ascii */

/* Staff */
.checklist
{
    display:inline-block;
    vertical-align:top;
    height:150px;
    overflow:auto;
    min-width:300px;
    border:1px solid #000;
    background:#DDD;
}

.field div.checklist label
{
    width:100%;
    font-size:10pt;
    border-bottom:1px solid #000;
    font-weight:400;
}
/* End Staff */

/* Article Globals */
#plain-text-article
{
    padding:0;
    margin:0;
    border:0;
    font-family:sans-serif;
    background:#F0F0F0;
    width:100%;
    min-height:50vh;
    resize:none;
    color:#000;
}
/* End Article Globals */

/* Directory Listings */
.directory
{
    width:100%;
    margin:auto;
}

.directory .column
{
    border:1px solid #000;
    display:inline-block;
    width:24%;
    vertical-align:top;
}

.directory .column .header
{
    background:#000;
    color:#F0F0F0;
    text-align:center;
    font-weight:bold;
}

.directory .column .row
{
    padding-left:0.5em;
}

.directory .column div
{
    border-top:1px solid #000;
}

.cp437
{
    /*font-family: 'Classic Console';*/
    font-family: 'cp437';
    font-size:16px;
    line-height:14px;
    /*
    color:#FFF;
    background:#000;
    */

}

.cl-hyperlink /* ZZT Hyperlink for Closer Looks */
{
    font-family: 'cp437';
    background-image:url("/static/images/hyperlink.png");
    background-color:#0000AA;
    background-repeat:no-repeat;
    color:#FFF;
    padding-left:40px;
    padding-right:16px;
    background-position:16px;
    width:auto;
    display:inline;
}

/* ZZT-OOP Syntax */
code
{
    display:block;
    width:42ch;
    color:#839496;
    background-color:#002b36;
    font-size:larger;
    padding:1ch 2ch 1ch 2ch;
    white-space:pre;
    margin-left:0.2em;
}

code .highlight
{
    background:#FFD700;
    color:#000;
}

code.inline
{
    width:auto;
    padding:0.1em;
}

code .blue, code .command
{
    color:#268bd2;
}

code .green, code .comment
{
    color:#859900;
}

code .cyan, code .reserved
{
    color:#2aa198;
}

code .red, code .name
{
    color:#dc322f;
}

code .magenta, code .hyperlink
{
    color:#d33682;
}

code .purple, code .center
{
    color:#6c71c4;
}

code .yellow, code .go, code .try
{
    color:#b58900;
}

code .orange, code .label
{
    color:#cb4b16;
}

/* End ZZT-OOP Syntax */

/* Content Warnings */
.content-warning
{
    background:#CFF;
    display:flex;
    align-items:center;
    padding:0.25em 1em 0.25em 1em;
    max-width:75%;
    margin:auto;
    border:1px dashed #000;
    margin-bottom:1em;
}

.content-warning .img
{;
    flex:0 0 150px;
    height:50px;
    padding:1em;
}

.content-warning .text
{
    flex:1;
    font-size:smaller;
}

.content-warning .text p
{
    margin-top:0.25em;
    margin-bottom:0.25em;
}

.content-warning .text b.heading
{
    font-size:larger;
    letter-spacing:0.5em;
    text-align:center;
    display:block;
    width:100%;
}
/* End Content Warnings */

/* Worlds of ZZT plug */
.patreon-plug
{
    font-family:monospace;
    font-size:14px;
    line-height:14px;
    color:#FFFF55;
    background:#000;
    padding:14px 8px;
    max-width:320px;
    margin:0.25em auto 0.25em auto;
    border:2px solid #0000AA;
}

.patreon-plug .heading
{
    color:#FFFFFF;
}

.patreon-plug .heading span
{
    color:#0000AA;
}

.patreon-plug a
{
    color:#55FF55;
    text-align:center;
    width:100%;
    display:block;
    padding-right:0;
    background:none;
    text-decoration:underline;
}
/* End Worlds of ZZT plug */

figcaption
{
    text-align:center;
}

/* MadTom's Pick CSS hotfixes */
article.featured-game a.screen
{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:160px;
    margin:0.25em auto 0.25em auto;
    text-align:center;
}

article.featured-game p.score
{
    text-align:center;
    font-size:2em;
}
/* End MadTom's Pick CSS hotfixes */