/* Basic Elements */
a { text-decoration:none; }
a:hover { text-decoration:underline; }
a:visited { color:#00F; }

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

a[href^="https://www.digitalmzx.com"]
{
    padding-left:12px;
    background:url("/static/chrome/mzx-smiley.png"), url("/static/chrome/external_link.png");
    background-position:center left, top right;
    background-repeat:no-repeat;
}

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

a.nohover:hover { background-color:transparent; }
a.noul, a.noul:hover { text-decoration:none; }
a.broken { text-decoration:line-through; color:#F00; }
a.restricted { color:#F00; }
a.unlocked { color:#080; }
a.il { font-style:italic; }

blockquote
{
    font-family:serif;
    font-style:oblique;
    text-align:justify;
    padding:0.5em;
    border:3px double #000;
    background:#DEF;
}

blockquote::first-letter
{
    margin-left:1em;
    font-size:x-large;
}

blockquote footer
{
    text-align:right;
    font-style:normal;
}

figure { text-align:center; }
figure figcaption { font-family:"cp437"; }

figure.zzt-figure
{
    width:480px;
    padding:14px 8px 0px 8px;
    background:#0AA;
    margin:auto;
    color:#FFF;
    font-family:"cp437";
    border:1px solid #000;
}

figure.zzt-figure figcaption { padding-top:7px; padding-bottom:7px; }
figure.zzt-figure figcaption a { color:#FF5; }

h1 {margin-top:0;}

hr { height:14px; border:0px; background-image:url("/static/chrome/hr-center.png"); }

img:not(.screenshot-thumb) { max-width:100%; }

p { margin:14px auto 14px auto; }

pre { margin:0; white-space: pre-wrap; }

table
{
    border-collapse:collapse;
    box-sizing:border-box;
    margin-top:14px;
    margin-bottom:14px;
    width:100%;
    max-width:100%;
    overflow-x:auto;
}

th
{
    box-sizing:border-box;
    background-color:#619F9F;
    border:1px solid #000;
    padding:7px 4px 7px 4px;
}

td
{
    box-sizing:border-box;
    border:1px solid #000;
    padding:7px 4px 7px 4px;
}

input, select, textarea
{
    border:1px solid #000;
    background:#FFF;
    font-size:larger;
}

@media (max-width: 1024px)
{
    input, select, textarea { font-size:medium; }
}
/* End Basic Elements */

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

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

.cp437 { font-family: "cp437"; }
pre.cp437 { line-height:14px;}
.mono { font-family: "monospace";}
/* End Fonts */

/* Site specific pseudo-elements */
.cut-heading:hover { cursor:pointer; }
.cut-wrapper.cut-open { display:block; }
.cut-wrapper.cut-closed { display:none; }

.keyword { font-family:"cp437", monospace; font-size:16pt; }

.spoiler, .spoiler a
{
    color:transparent;
    cursor:pointer;
    background-image:url('/static/chrome/spoiler-bg.png');
}

.spoiler img, .spoiler code, .spoiler p a { visibility:hidden; }
.spoiler.revealed { color:#000; background-image:none; }
.spoiler.revealed a { color:#00F; }
.spoiler.revealed img, .spoiler.revealed code, .spoiler.revealed p a { visibility:visible; }

.content-warning, .sticky-note
{
    background:#DEF;
    display:flex;
    align-items:center;
    padding:0.25em 1em 0.25em 1em;
    max-width:500px;
    margin:auto;
    border:1px dashed #000;
    margin-bottom:1em;
}

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

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

.content-warning .text b.heading, .sticky-note .text b.heading
{
    font-size:larger;
    letter-spacing:0.25em;
    text-align:center;
    display:block;
    width:100%;
}

.patreon-plug
{
    font-family:cp437;
    font-size:16px;
    color:#FF5;
    background:#000;
    padding:14px 8px;
    width:320px;
    margin:7px auto 7px auto;
    border:2px solid #00A;
}
.patreon-plug .heading { color:#FFF; }
.patreon-plug .heading span { color:#00A; }
.patreon-plug a
{
    color:#5F5;
    text-align:center;
    width:100%;
    display:block;
    padding-right:0;
    background:none;
    text-decoration:underline;
}
/* End site specific pseudo-elements */

/* Utility Classes */
/* Display/Visibility */
.none { display: none; }
.inline { display: inline; }
.hidden { visibility: hidden; }
.mobile-only { display:none; }

/* Text Formatting */
.b { font-weight: bold; }
.i { font-style: oblique; }
.caps { text-transform: uppercase; }
.smaller { font-size: smaller; }
.larger { font-size: larger; }
.sub { font-size:medium; font-weight:normal; }

/* Positioning */
.fl { float:left; }
.fr { float:right; }
.l { text-align:left; }
.c { text-align:center; margin:auto; }
.r { text-align:right; }

/* Etc */
.basic-border { border:1px solid #000; }
.bulletless { list-style:none; }
.debug { background:#F00; }
.faded { opacity:0.6 }
.fit-height { height: calc(100vh - 44px ); align-self:start; }
.jsLink { cursor:pointer; color:#00F; }
.no-margin { margin:0; }
.zoomed { cursor:zoom-out; width:auto; }

/* Flex Shortcuts */
.flex-container { display:flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-break { flex:0 0 100%; }
.flex-container.justify-space-between { justify-content: space-between; }
.flex-container.justify-center { justify-content: center; }
.flex-container.align-center { align-items:center; }
/* End Utility Classes */

/* Generic Structures */
.screenshot-thumb { width:240px; display:block; }
.screenshot-thumb.zoomed { width:auto; height:auto; max-width:100%; }
.screenshot-thumb:hover { cursor:zoom-in; }

@media (max-width: 1650px)
{
    /* Front page only at this resolution */
    #fp-new-files-grid .gallery-block > .screenshot-thumb:not(.zoomed) { width:120px; }
}

@media (max-width: 1100px)
{
    .gallery-block > .screenshot-thumb:not(.zoomed) { width:120px; }
}
/* End Generic Structures */


/* Generic Model Directories */
.guide-words
{
    display:flex;
    justify-content:space-between;
    max-width:100%;
    margin:auto;
    border-bottom:1px solid #000;
    font-style:oblique;
}

.guide-words.bottom
{
    border-bottom:0px;
    border-top:1px solid #000;
    margin-top:4px;
}
/* End Generic Model Directories */

/* 4-Column Directories */
.directory
{
    display:flex;
    justify-content:space-between;
    margin-top:14px;
    gap:8px;
}

.directory .column { flex:1; }
.directory .row { padding-left:1em; }
.column > .header { border-top:1px solid #000; }

.column .header
{
    background:#619F9F;
    text-align:center;
    font-weight:bold;
    border-top:2px solid #000;
    border-bottom:2px solid #000;
}

.column .row + .row { border-top:1px dotted #000; }
.column .header + .row { border-top:0px; }
.column .row:last-child { border-bottom:1px dotted #000; }
.column .row:hover { background:#98C9C9; }
/* End 4-Column Directories */
/* End Specific Structures */

/* Forms */
.scrolling-checklist label { display:block; }
.scrolling-checklist label + label {  border-top: 1px dotted #000; }
.scrolling-checklist label.selected { background:#619F9F;}
.scrolling-checklist label:hover { background:#98C9C9; }

.checklist-header
{
    font-weight:bold;
    background:#619F9F;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding-left:3.5ch;
}

.scrolling-checklist .checklist-header:first-child { border-top:0px; }
/* End Forms */

/* File Structures */
/* Frontpage Galleries */
.gallery-list
{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:center;
    margin:14px auto 14px auto;
}

.gallery-list.scrolling
{
    padding:14px 8px 14px 8px;
    overflow:auto;
    border-top:1px dashed #000;
    border-bottom:1px dashed #000;
    max-height:546px;
}

#fp-file-frame
{
    display:grid;
    grid-template-areas:
    "left-heading right-heading"
    "content content"
    "left-link right-link";
}

#fp-file-frame > h2 + h2 { grid-area:right-heading; text-align:right; }
#fp-file-frame .gallery-list
{
    grid-area:content;
    margin:0;
    padding:0;
}

#fp-file-frame .gallery-list > .col
{
    flex:1;
    display:flex;
    flex-wrap:wrap;
}

#fp-file-frame .gallery-list > .col + .col
{
    justify-content:flex-end;
    border-left:1px dashed #AAA;
}

#fp-file-frame .view-more { grid-area:left-link; }
#fp-file-frame .view-more + .view-more { grid-area:right-link }

@media (max-width: 1610px)
{
    #fp-file-frame .gallery-frame > .model-block .preview-image.thumbnail
    {
        width:160px;
    }

    #fp-file-frame .gallery-frame > .model-block
    {
        max-width:180px;
    }
}

#mobile-fp-file-frame { display:none; }
/* End Frontpage Galleries */

/* File Viewer */
.fv-grid /* Applied to center content element */
{
    display:grid;
    grid-template-areas:
    "expand expand expand"
    "header header header"
    "prefix prefix prefix"
    "display display display"
    "zip-name tabs tabs"
    "file-list analysis analysis";

    grid-template-columns:1.5fr 2fr auto;
    grid-template-rows:repeat(5, auto) 1fr;
    min-height:858px; /* With padding this is 900px of space */
    height:calc(100vh - 42px);
    /* Padding is a hacky temp fix for column hiding button */
    padding-top:0px;
}

.fv-grid .file-meta
{
    grid-area: header;
    margin-top:0px;
}

.file-header {
    /*grid-area: header;*/
    display:flex;
    margin-bottom:3px;
}

#alt-file-listing
{
    max-width:25%;
    margin-left:16px;
}

.file-links
{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding-top:3px;
    padding-bottom:3px;
    font-weight:bold;
    grid-area: links;
    width:100%;
}

.file-data
{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    text-align:center;
    grid-area:data;
    border-bottom:1px solid #000;
    padding-top:3px;
    padding-bottom:3px;
    gap:4px;
}

.file-data > div
{
    flex:1;
}

/* TODO: This could be better genercized probably */
.file-data + .review { border-top:0px; }
.file-data + #fv-main { border-top:0px; }

#fv-prefix
{
    grid-area:prefix;
    max-width:750px;
    margin:auto;
    font-family:cp437;
}

#fv-main
{
    grid-area: display;
    border:1px solid #000;
    padding:7px 4px 7px 4px;
    margin-bottom:14px;
    max-height:728px;
    overflow:auto;
    resize:vertical;
}

#fv-main .output
{
    display:none
}

#fv-main .output.active
{
    display:block;
}

#fv-main #canvas-envelope.output.active
{
    display:grid;
}

#zip-name
{
    grid-area:zip-name;
    text-align:center;
    border:1px solid #000;
    border-bottom:0px;
    background:#AAA;
}

#file-tabs
{
    grid-area: tabs;
    display:flex;
    text-align:center;
    justify-items:stretch;
    border-top:1px solid #000;
    border-right:1px solid #000;
    overflow-x:auto;
}
#file-tabs div
{
    border-bottom:0px;
    border-left:0px;
    background:#AAA;
    flex:3;
}

#file-tabs div:hover, #zip-name:hover
{
    cursor:pointer;
    background:#98C9C9;
    text-decoration:underline;
}

#file-tabs div + div
{
    border-left:1px solid #000;
}

#file-tabs div[name=help]
{
    flex:1;
}

#file-list
{
    grid-area: file-list;
    border:1px solid #000;
    font-family:mono;
    overflow:auto;
    max-height:100%;
}

#file-list .selected
{
    background-color:#619F9F;
}

#file-list li:hover
{
    /* (Preview, List of files) */
    cursor:pointer;
    background:#98C9C9;
}

#file-list ul /* (Preview, List of files) */
{
    margin:0px;
    padding:0px;
    overflow:auto;
    height:100%;
}

#file-list ul li /* (Preview, List of files) */
{
    list-style:none;
    border-bottom:1px dashed #000;
    padding-left:8px;
    padding-right:8px;

}

#file-list ul li.selected
{
    text-align:center;
    font-weight:bold;
}

#file-list ol /* (List of boards in ZZT file) */
{
    text-align:left;
    font-weight:normal;

    list-style:none;
    margin-left:8px;
    margin-right:8px;
    padding:0px;
    background:#FFF;

}

#file-list ol li { border-bottom:1px dotted #000; } /* (List of boards in ZZT file) */

li.board div  { display:inline-block; } /* Board numbers and names */

#analysis
{
    grid-area: analysis;
    border:1px solid #000;
    border-left:0px;
    padding:7px 4px 7px 4px;
    font-family:mono;
    overflow:auto;
}

#analysis table
{
    padding:0px;
    margin:0;
}

#analysis table td
{
    background:#FFF;
    padding:0px 0px 0px 1ch;
}

#analysis table th
{
    padding:0px 1ch 0px 1ch;
}

#analysis .zip-info-table td, #analysis .zip-info-table th
{
    padding-left:8px;
    padding-right:8px;
}

#analysis #zip-comment
{
    width:81ch;
}

#analysis .fv
{
    margin-bottom:7px;
}

#analysis .fv-hidden, #analysis .fv-hidden-row
{
    display:none;
}

#file-tabs .selected, #zip-name.selected { background:#619F9F; }
#analysis .toggle { display:none; }
#file-list ul li.code-match { padding-left:3ch; }

#analysis #search-table input
{
    margin-top:2px; /* TODO: This could be done better */
}

#preferences .field
{
    display:flex;
    padding: 7px 0px 7px 0px;
    font-size:medium;
    font-weight:bold;
    font-family:sans-serif;
}

#preferences .field + .field
{
    border-top: 1px dashed #000;
}

#preferences label
{
    flex:1 1 20%;
}

#preferences input, #preferences select
{
    flex:1 1;
}

/* File Viewer Extension Based Formatting */
#fv-main #canvas-envelope
{
    justify-content:center;
    grid-template-areas:
    "left canvas right";
    grid-template-columns:auto minmax(480px, auto) auto;
}

@media (max-width: 1024px)
{
    #fv-main #canvas-envelope
    {
        grid-template-areas:
        "left right"
        "canvas canvas";
        grid-template-columns:auto auto;
    }
}

#fv-left-sidebar
{
    font-family:cp437;
    grid-area:left;
    font-size:medium;
    line-height:14px;
    z-index:3;
    visibility:hidden;
}


#fv-left-sidebar #overlay
{
    position: absolute;
    background-color:rgba(204, 204, 204, 0.7);
    padding:7px 4px 7px 4px;
}


.color-swatch
{
    height:2em;
    background-image:url("/static/images/colors.png");
    width:8px;
    height:14px;
    margin:auto;
    display:inline-block;
}

#fv-right-sidebar
{
    grid-area:right;
    z-index:1;
}

#world-canvas
{
    grid-area:canvas;
    align-self:center;
    z-index:2;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#image-envelope, #preview-envelope {
    height:100%;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
}

#preview-envelope p
{
    max-width:640px;
    text-align:justify;
}

#fv-image, #fv-preview { border:1px solid #AAA;}

.preview-image-link { font-style:italic; } /* Overview link in File Viewer */
#text-body { font-family:cp437; }
#doc-header { color:#F00; text-align:center;}
/* End File Viewer Extension Based Formatting */
/* End File Viewer */

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

code.inline { 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; }
code .char:hover { cursor:help; }

code.zzt-oop
{
    min-width:42ch;
    max-width:fit-content;
    background-image:url("/static/chrome/long-code-divider.png");
    background-position:44ch; /* +2 for padding */
    background-repeat:repeat-y;
}

code.super-zzt-oop
{
    min-width:30ch;
    max-width:fit-content;
    background-image:url("/static/chrome/long-code-divider.png");
    background-position:32ch; /* +2 for padding */
    background-repeat:repeat-y;
}

code.cheat {
    font-family:cp437;
    background:#000;
    color:#FFF;
    font-size:medium;
    line-height:14px;
}

#oop-wrapper.zzt-scroll { margin:0; }
#oop-wrapper.zzt-scroll code
{
    background:transparent;
    color:#FF5;
    padding:0;
    font-size:16px;
    line-height:14px;
    margin-left:32px;
    font-family:"cp437";
    overflow:auto;
    width:356px;
    height:210px;
}

#oop-wrapper.zzt-scroll code::before, #oop-wrapper.zzt-scroll code::after { content:"  •    •    •    •    •    •    •    •    •\A"; }
/* End ZZT-OOP Syntax */

/* Hotfixes */
/* Screenshots in MTP reviews */
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.closer-look img { max-width:640px; } /* Stretched screenshots in old CLs */

/* End Hotfixes */

/* Livestream (960x540) */
@media (max-width:1529px) {article.livestream iframe[src^="https://www.youtube.com"] { width:480px; height:270px; }}
/*@media (max-width:1469px) {article.livestream iframe[src^="https://www.youtube.com"] { width:800px; height:450px; }}
@media (max-width:1369px) {article.livestream iframe[src^="https://www.youtube.com"] { width:800px; height:450px; }}*/

/* Comics */
#comics-nav
{
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    border-top:1px solid #000;
    margin-top:7px;
    padding-top:7px;
}
/* End Comics */

/* Paginator */
.paginator-block
{
    text-align:center;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    font-family:cp437;
    font-size:14pt;
    max-width:750px;
}

select[name=page-selector]
{
    text-align:right;
    width:7ch;
    font-family:cp437;
    font-size:14pt;
}

.paginator-block .page-range
{
    display:flex;
    flex-wrap:wrap;
    flex:1;
}

.paginator-block .page-range .page-first { flex: 0 0 20%; }
.paginator-block .page-range .page-last { flex: 0 0 20%; }
.paginator-block .page-range .page-prev { flex: 0 0 10%; }
.paginator-block .page-range .page-next { flex: 0 0 10%; }
.paginator-block .page-range > div.page-info { flex: 1; }

.page-links
{
    flex:0 0 100%;
    display:flex;
    flex-wrap:wrap;
}

.page-links .page-number-link { flex:0 0 10%; }
.paginator-block .selected { background:#619F9F; }
.paginator-block .page-links a:hover {background:#98C9C9;}

.view-links, .roulette-links
{
    font-family:cp437;
    font-size:larger;
    margin:auto;
    text-align:center;
    margin-top:4px;
}

.sort-methods
{
    margin:auto;
    margin-top:4px;
    text-align:center;
    font-family:cp437;
    font-size:larger;
}

.sort-methods select { font-family:cp437; }

.modify-query
{
    margin-top:4px;
    text-align:center;
    font-family:cp437;
    font-size:larger;
}
/* End Paginator */

.itch-badge
{
    height:64px;
    margin:7px 4px 7px 4px;
}

/* Review Blocks */
.review-block
{
    padding:14px 8px 14px 8px;
    margin-bottom:14px;
    margin-top:14px;
    border:1px solid #000;
}

.review-block h2 { margin-top:0; margin-bottom:0; }
/* End Review Blocks */

/* Newer Zoom for thumbnails */
img.zoomable.thumbnail:hover { cursor:zoom-in; }
img.zoomable.zoomed:hover { cursor:zoom-out; }
/* End Newer Zoom for thumbnails */

#no-results
{
    margin:14px auto 14px auto;
    font-family:cp437;
    font-size:20pt;
    text-align:center;
}

.series-range .gallery
{
    max-width:15%;
    text-align:center;
}

.series-range .gallery-frame .screenshot-thumb
{
    max-width:100%;
    max-height:100px;
}

.data-table
{
    font-family:monospace;
    font-size:12pt;
}

.data-table textarea
{
    box-sizing:border-box;
    height:5em;
    width:100%;
    font-size:smaller;
}

/* Page breadcrumbs and controls UNIMPLEMENTED AS OF AUG 1 2022 */
#crumbs
{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-left:-8px;
    margin-right:-8px;
    margin-top:-14px;
    border-bottom:1px dashed #AAA;
    min-height:20px;
    grid-area:crumbs;
}


#page-breadcrumbs
{
    flex:9;
    padding-left:8px;
    font-family:cp437;

}

#page-breadcrumbs a:first-child
{
    color:#F0F;
}

#page-breadcrumbs a
{

}

#page-errata
{
    flex:1;
    padding-right:1px;
    margin-top:1px;
    text-align:right;
}
/* End page breadcrumbs and controls */