/* Responsive layout overrides for silug.org
 *
 * The page structure is three nested fixed-width tables:
 *   outer  width="730": left nav (160px) | content area (570px)
 *   inner  width="570": main text (420px) | right sidebar (160px)
 *   inner  width="425": innermost text wrapper
 *
 * bg.gif (solid red 0-159px, white 160px+) and redbar.png (2x2 red pixel)
 * have been replaced by CSS; their HTML references have been removed.
 */

/* ---- Body background (replaces bg.gif) ---- */
body {
    background-color: #fefefe;
}

/* ---- Left nav: explicit background replaces bg.gif alignment dependency ---- */
table[width="730"] > tbody > tr > td:first-child,
table[width="730"] > tr > td:first-child {
    background-color: #960019;
}

/* ---- Fluid outer wrapper (was fixed 730px) ---- */
table[width="730"] {
    width: 100% !important;
    max-width: 730px;
}

/* ---- Fluid inner tables ---- */
table[width="570"],
table[width="425"] {
    width: 100% !important;
}

/* ---- Responsive images ----
 * max-width prevents images overflowing narrow containers.
 * height:auto is NOT set here; HTML height attributes on decorative images
 * must be preserved. */
img {
    max-width: 100%;
}

/* Scale the banner header proportionally (560x85) on narrow viewports. */
img[width="560"] {
    height: auto;
}

/* ---- Horizontal dividers (replaces redbar.png) ---- */
hr.redbar {
    border: none;
    height: 2px;
    background-color: #960019;
    max-width: 375px;
    margin: 0 auto;
}

/* ---- Wrap long preformatted text (About page has an old Usenet post) ---- */
pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* -----------------------------------------------------------------------
 * Narrow viewports: stack the layout columns vertically.
 * ----------------------------------------------------------------------- */
@media screen and (max-width: 600px) {

    table[width="730"],
    table[width="730"] > tbody,
    table[width="570"],
    table[width="570"] > tbody {
        display: block;
        width: 100% !important;
    }

    table[width="730"] > tbody > tr,
    table[width="730"] > tr,
    table[width="570"] > tbody > tr,
    table[width="570"] > tr {
        display: block;
        width: 100%;
    }

    table[width="730"] > tbody > tr > td,
    table[width="730"] > tr > td,
    table[width="570"] > tbody > tr > td,
    table[width="570"] > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Hide the decorative empty first cell in the footer row when stacked. */
    table[width="730"] > tbody > tr:last-child > td:first-child,
    table[width="730"] > tr:last-child > td:first-child {
        display: none;
    }
}