/* Jomebrew site shell — landing page + About page.
   Colors sampled directly from the original index_01/02/03/04.gif files:
   banner/sidebar tint #BED8FF, content tint #D0E3FF, nav gradient #B8D2FA -> white. */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #FFFFFF;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

a:link { color: #0000FF; text-decoration: none; }
a:visited { color: #0000CC; text-decoration: none; }
a:hover { color: #666666; text-decoration: underline; }
a:active { text-decoration: none; }

.site-frame {
    max-width: 800px;
    margin: 10px auto;
    border: 1px solid #000000;
    background: #FFFFFF;
}

.banner {
    background: #BED8FF url('images/index_01.gif') repeat-x left top;
    background-size: auto 100%;
    min-height: 90px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}

.banner h1 {
    font-size: 30px;
    font-weight: bold;
    color: #0000FF;
    margin: 0;
}

.banner .tagline {
    font-size: 13px;
    color: #000000;
    align-self: flex-end;
}

nav.mainnav {
    background: linear-gradient(to right, #B8D2FA, #FFFFFF);
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    display: flex;
}

nav.mainnav a {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.5rem;
    border-right: 1px solid #000000;
    font-weight: bold;
    color: #000000;
}

nav.mainnav a:last-child { border-right: none; }
nav.mainnav a:hover { background: #E4EDFF; }

.layout {
    display: flex;
    flex-wrap: wrap;
}

aside.sidebar {
    background: #BED8FF;
    border-right: 1px solid #000000;
    width: 200px;
    flex-shrink: 0;
    padding: 1rem;
}

aside.sidebar h2 {
    font-size: 14px;
    margin: 0 0 0.4rem;
}

aside.sidebar hr {
    border: none;
    border-top: 1px solid #333333;
    margin: 0 0 0.75rem;
}

aside.sidebar div { margin-bottom: 0.6rem; }

main.content {
    background: #D0E3FF;
    flex: 1;
    min-width: 280px;
    padding: 1.25rem;
}

main.content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

main.content li {
    margin-bottom: 0.6rem;
    font-size: 14px;
}

main.content .new-tag {
    color: #A81616;
    font-weight: bold;
    font-size: 11px;
}

main.content p { font-size: 13px; }

footer.sitefoot {
    font-size: 0.8em;
    text-align: center;
    padding: 0.75rem;
    border-top: 1px solid #000000;
}

@media (max-width: 560px) {
    .layout { flex-direction: column; }
    aside.sidebar {
        width: auto;
        border-right: none;
        border-bottom: 1px solid #000000;
    }
    .banner h1 { font-size: 22px; }
}