/* Overlay responsive per le vecchie pagine a tabelle a larghezza fissa.
   Non riscrive il layout: lo rende solo utilizzabile da mobile. */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    table,
    tbody,
    tr,
    td {
        display: block !important;
        width: 100% !important;
    }

    table[width],
    td[width],
    th[width] {
        width: 100% !important;
    }

    td {
        padding: 0 !important;
    }

    /* celle-spaziatrici (larghezza 1-10px, spesso con gif trasparenti):
       non hanno senso impilate come blocchi a piena larghezza */
    td[width="1"],
    td[width="2"],
    td[width="4"],
    td[width="5"],
    td[width="8"],
    td[width="10"] {
        display: none !important;
    }

    /* menu a tendina "cssplay" (menu_drop.css) usato in molte pagine: barra fissa a 750px */
    .menu {
        width: 100% !important;
    }

    /* layout a 3 colonne "YAML" (layout_3col_abb.css e varianti basemod_*):
       impila le colonne invece di affiancarle */
    #nav,
    #nav_main,
    #col1,
    #col2,
    #col3,
    #main {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* contenitore esterno del layout YAML (basemod.css): il min-width:756px
       impedisce a tutta la pagina di restringersi sotto quella soglia */
    #page_margins,
    #page {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* su mobile porta il contenuto prima dei menu (che nell'HTML sorgente
       vengono sempre per primi), senza toccare le pagine */
    #main {
        display: flex !important;
        flex-direction: column !important;
    }
    #col2,
    #col3,
    #contenuto {
        order: 1 !important;
    }
    #nav,
    #col1 {
        order: 2 !important;
    }
}