/* Components used on main.html */
body
{
    font-family:sans-serif;
    background-color:#CCC;
    margin-top:7px;
    overflow-y:scroll;
}

.grid-root
{
    display:grid;
    grid-template-areas:
    "left content right"
    "footer footer footer";

    grid-template-columns:1fr minmax(auto, 1280px) 1fr;
    grid-template-rows:auto auto;
    grid-gap:14px 8px;
    max-width:1920px;
    margin-left: auto;
    margin-right: auto;
    justify-items:center;
}

.grid-root.expanded
{
    grid-template-areas:
    "content"
    "footer";
    grid-template-columns:auto;
    max-width:100vw;
}

.grid-root.expanded #content
{
    box-sizing:border-box;
    width:98vw;
    margin-left: 1vw;
    margin-right: 1vw;
}

#low-res-shortcuts { display:none; background-color:#00A; }

.sidebar { min-width:255px; max-width:255px; margin-left:8px; margin-right:8px; }
#sidebar-left { grid-area: left; justify-self:end; }
#sidebar-right { grid-area: right; justify-self:start; }
#content { grid-area: content; margin-bottom: 0px; justify-self:center; width:100%; padding-top:14px;}

#content h1 { margin-bottom:0px; }

#expand-contract {
    padding:0px;
    border:0;
    width:24px;
    height:14px;
    background:#F0F0F0;
    color:#666;
    float:right;
    position:relative;
    top:-14px;
}

.fv-grid #expand-contract
{
    grid-area: expand;
    justify-self:end;
    left:0px;
}

#expand-contract:hover
{
    cursor:pointer;
    color:#000;
}

.block
{
    padding:14px 8px 14px 8px;
    margin-bottom:7px;
    background:#F0F0F0;
    border:1px solid #000;
}

.sidebar h2, .sidebar h3 {
    margin:0; margin-bottom:7px;
    border-bottom:1px solid #000;
}
.sidebar h2 { font-size:14pt; }
.sidebar h3 { font-size:10pt; padding-top:7px; }

.sidebar .block a {
    display:block;
    padding-top:1px;
    padding-bottom:1px;
}

.sidebar #featured { margin-bottom:7px; }
.sidebar #featured.block a { display:inline; }
.sidebar .block a + a { border-top:1px dashed #AAA; }
.sidebar #featured.block a + a { border-top:0; }

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

.sidebar .block a:hover { background-color:#98C9C9; }

#logo-area { margin-bottom:0; }

@media (min-width: 1500px)
{
    #logo-area
    {
        grid-area: logo;
        margin-bottom:-24px;
    }
}

@media (max-width: 1024px)
{
    .low-res-hidden { display:none; }
}

@media (min-width: 1025px)
{
    .low-res-break { display:none; }
}

.sidebar a[target=_blank]::after
{
    background-image:url("/static/chrome/external_link.png");
    background-repeat:no-repeat;
    background-position:top left;
    padding-left:12px;
    margin-left:2px;
    content:"";
}

@media (max-width: 1100px) { .sidebar, #content { font-size:smaller; } }

#logo:hover { background-color:transparent; }

#featured a.nohover:hover { background:none; }
#featured > a
{
    border-top:1px dashed #AAA;
    margin:0;
    text-align:left;
}

#letters
{
    width:100%;
    display:grid;
    grid-template-columns: repeat(9, 11%);
    font-size:21px;
    border-bottom:1px dashed #AAA;
    padding-bottom:7px;
}
#letters-select { display:none; /* Low-res only */ }
#letters a { border-top:0px; }

#search-form
{
    display:flex;
    width:100%;
    column-gap:4px;
    margin-top:2px;
    margin-bottom:2px;
    border-top:1px dashed #AAA;
    border-bottom:1px dashed #AAA;
    padding-top:2px;
    padding-bottom:2px;
    font-size:10pt;
}

#search-form input { max-width:70%; flex:1; }

#top-links a:hover, #social a:hover { background-color:inherit; text-decoration:none; }
#top-links
{
    margin-bottom:14px;
    background-color:#00A;
}
#top-links a
{
    color:#FF5;
    font-size:28px;
    display:flex;
    justify-content:flex-start;
    height:28px;
    line-height:28px;
}
#top-links a:nth-child(even) .key { background-color:#AAA; }
#top-links a:nth-child(odd) .key { background-color:#0AA; }
#top-links a:visited { color:#FF5; }
#top-links a:hover { text-decoration:none; }
#top-links a .key
{
    text-align:center;
    margin:auto;
    color:#000;
    flex:0 0 48px;
    margin-left:16px;
    height:28px;
}
#top-links a .text
{
    flex:1;
    margin-left:16px;
    height:28px;
}

#top-links a#top-link { display:none; }
@media (max-width:999px)
{
    /* Reveal top of page link on mobile and shrink to make room */
    #top-links a#top-link { display:flex; }
    #top-links a {font-size:21px;}
}

#wozzt-block h2 { margin-bottom:0; }
#social
{
    text-align:center;
    border-bottom:1px solid #000;
    height:24px;
    margin-bottom:7px;
    padding-top:3px;
    padding-bottom:5px;
}
#social a
{
    display:inline-block;
    width:24px;
    height:24px;
    border-top:0px;
}
#social a::after
{
    margin:0;
    padding:0;
    content:"";
}
#social img { max-width:24px; max-height:24px; }


#footer
{
    grid-area: footer;
    text-align: center;
    font-size: 10pt;
}

.file-meta
{
    position:relative;
    top:-16px;
    margin-top:16px;
}