/** =========================================================
    GLOBAL
    ========================================================= **/

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 40px auto;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;

    color: #333;

    background: #006600 url('images/body-bg.png') repeat-x;
}


/** =========================================================
    ELEMENT DEFAULTS
    ========================================================= **/

table {
    width: 100%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;

    text-align: left;
}

th,
td {
    padding: 5px 10px;
}

th {
    color: #fff;

    border-top: 3px solid #004400;

    background-color: #006600;
}

td {
    border-bottom: 1px solid #f4f4f4;
}

code,
blockquote {
    display: block;

    border-left: 5px solid #ddd;

    padding: 10px;

    margin-bottom: 20px;
}

blockquote p {
    font-style: italic;

    font-family: Georgia, "Times New Roman", Times, serif;

    margin: 0;

    height: 1%;
}

p {
    line-height: 1.9em;

    margin-bottom: 20px;
}

a {
    color: #1A601A;
}

a:hover {
    color: #333;
}

a:focus {
    outline: none;
}

fieldset {
    display: block;

    border: none;

    border-top: 1px solid #e0e0e0;
}

fieldset legend {
    font-weight: bold;

    font-size: 13px;

    padding-right: 10px;

    color: #222;
}

fieldset form {
    padding-top: 15px;
}

fieldset p label {
    float: left;

    width: 150px;

    font-family: Arial, Helvetica, sans-serif;
}

fieldset form input,
fieldset form select,
fieldset form textarea {
    padding: 5px;

    color: #333333;

    font-size: 13px;

    font-family: Arial, Helvetica, sans-serif;

    border: 1px solid #ddd;
}

fieldset form input.formbutton {
    margin-left: 150px;

    background: #006600;

    border: none;

    border-bottom: 3px solid #004400;

    color: #ffffff;

    font-weight: bold;

    padding: 5px 10px;

    font-size: 13px;
}


/** =========================================================
    HEADINGS
    ========================================================= **/

h1 {
    font-size: 45px;
}

h2 {
    color: #2f2f2f;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 30px;

    font-weight: bold;

    letter-spacing: -2px;

    padding: 0 0 5px;

    margin: 0;
}

h3 {
    color: #001400;

    font-size: 20px;

    padding-bottom: 10px;
}

h4 {
    padding-bottom: 10px;

    font-size: 15px;

    color: #006600;
}

h5 {
    padding-bottom: 10px;

    font-size: 13px;

    color: #666666;
}

ul,
ol {
    margin: 0 0 35px 35px;
}

li {
    padding-bottom: 5px;
}


/** =========================================================
    WRAPPER
    ========================================================= **/

div#wrapper-outer {
    width: 940px;

    margin: 0 auto;

    background: #fff url('images/wrapper-top.jpg')
        no-repeat scroll top left;
}

div#wrapper {
    width: 920px;

    margin: 0 auto;

    padding: 10px 10px 40px;

    background: transparent url('images/footer.jpg')
        no-repeat scroll bottom center;
}


/** =========================================================
    SITENAME
    ========================================================= **/

div#sitename h1 {
    color: #549FC7;

    font-size: 48px;

    font-weight: bold;

    letter-spacing: -5px;

    margin: 0;

    padding: 25px 10px 35px 15px;
}

div#sitename h1 a,
div#sitename h1 a:hover {
    color: #004300;

    font-family: Georgia, "Times New Roman", Times, serif;

    font-weight: normal;

    letter-spacing: -1px;

    text-decoration: none;
}


/** =========================================================
    NAV
    ========================================================= **/

div#nav {
    background: #006600 url('images/nav-bg.jpg')
        repeat-x scroll top left;

    height: 40px;
}

div#nav ul {
    margin: 0;

    padding: 0;

    list-style: none;

    float: left;

    border-right: 1px solid #09232F;
}

div#nav ul li {
    float: left;

    padding-bottom: 0;

    display: block;
}

div#nav ul li a,
div#nav ul li a:visited,
div#nav ul li a:active,
div#nav ul li a:link {
    color: #fff;

    display: block;

    float: left;

    text-decoration: none;

    font-size: 10px;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-weight: bold;

    cursor: pointer;

    text-transform: uppercase;
}

div#nav ul li.current a {
    color: #0D570C;

    background: transparent url('images/item-right.jpg')
        no-repeat scroll top right;
}

div#nav ul li.current a span,
div#nav ul li.current a:visited span,
div#nav ul li.current a:hover span,
div#nav ul li.current a:active span,
div#nav ul li.current a:link span {
    background: transparent url('images/item-left.jpg')
        no-repeat scroll top left;

    border: none;

    padding: 18px 15px 16px;
}

div#nav ul li.current a {
    margin-top: -6px;
}

div#nav ul li a span {
    padding: 14px 15px 14px;

    border-right: 1px solid #126F11;

    border-left: 1px solid #072C07;

    display: block;

    float: left;

    background: transparent none;
}

div#nav ul li a:hover span {
    background: transparent url('images/nav-bg-hover.jpg')
        repeat-x scroll top left;
}


/** =========================================================
    IMMAGINI CONTENUTO
    ========================================================= **/

#content img {
    padding: 5px;

    border: 0px solid #000000;
}


/** =========================================================
    BODY
    ========================================================= **/

div#body {
    padding: 10px 5px;

    /*
       SFONDO ORIGINALE
    */

    background: #fff url('images/content-bg.jpg')
        repeat-x scroll top left;

    width: 100%;

    box-sizing: border-box;
}


/** =========================================================
    VECCHIA SIDEBAR
    ========================================================= **/

/*
   La sidebar vuota non deve più occupare spazio.
*/

div#sidebar {
    display: none !important;
}


/** =========================================================
    COLONNE
    ========================================================= **/

div.column-left {
    float: none;

    margin-right: 0;
}

div.column-right {
    float: none;

    width: 100%;

    margin: 0;

    background: #f2feed;

    box-sizing: border-box;
}


/** =========================================================
    CONTENT
    ========================================================= **/

div#content {
    width: 100%;

    float: none;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /*
       Verde chiarissimo originale.
    */

    background: #f2feed;
}


/** =========================================================
    TITOLO RICERCA
    ========================================================= **/

div#content h2 {
    text-align: center;

    margin: 0 0 15px 0;
}


/** =========================================================
    CONTENITORE RICERCA
    ========================================================= **/

div#news-search {

    width: 100%;

    margin: 0;

    padding: 0;

    /*
       Le due colonne sono affiancate.
    */

    display: flex;

    align-items: flex-start;

    /*
       Necessario per il comportamento sticky.
    */

    position: relative;

    box-sizing: border-box;

}


/** =========================================================
    COLONNA ANNO
    ========================================================= **/

div#anno-column {

    /*
       Larghezza originale.
    */

    width: 84px;

    min-width: 84px;

    max-width: 84px;


    /*
       IMPORTANTISSIMO:

       sticky rispetto alla finestra/browser.
    */

    position: -webkit-sticky;

    position: sticky;

    top: 0;


    /*
       Rimane in alto a sinistra.
    */

    align-self: flex-start;


    /*
       Aspetto.
    */

    box-sizing: border-box;

    padding: 5px 8px;

    border: 2px solid #000000;

    background: #FFFEC4;


    /*
       Deve rimanere sopra le news.
    */

    z-index: 9999;

    flex-shrink: 0;


    /*
       Evita che il testo venga compresso.
    */

    white-space: normal;
}


/** =========================================================
    COLONNA NEWS
    ========================================================= **/

div#news-column {

    /*
       Tutto lo spazio restante.
    */

    flex: 1;

    width: auto;

    min-width: 0;


    box-sizing: border-box;

    padding: 5px 10px;

    vertical-align: top;

    text-align: left;


    /*
       Sfondo originale.
    */

    background: #f2feed;
}


/** =========================================================
    SFONDO CONTENUTO
    ========================================================= **/

div#content,
div#news-search,
div#news-column {

    background-color: #f2feed;
}


/*
   Il riquadro Anno deve rimanere giallo.
*/

div#anno-column {

    background-color: #FFFEC4;
}


/** =========================================================
    FOOTER
    ========================================================= **/

div#footer {
    background: #004E00;

    padding: 20px 20px;

    color: #fff;

    border-bottom: 2px solid #001200;
}

div#footer p {
    color: #fff;

    margin: 0;

    font-size: 11px;

    width: 50%;
}

div#footer p.left {
    float: left;
}

div#footer p.right {
    float: right;

    text-align: right;
}

div#footer p a {
    color: #fff;

    font-weight: bold;

    text-decoration: none;

    border-bottom: 1px solid #fff;
}

div#footer p a:hover {
    background-color: #006600;
}


/** =========================================================
    CLEAR FIX
    ========================================================= **/

.clear:after {
    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0;
}

.clear {
    display: inline-block;
}

.clear {
    display: block;
}


/** =========================================================
    TABLET
    ========================================================= **/

@media screen and (max-width: 960px) {

    body {
        margin: 20px auto;
    }

    div#wrapper-outer {
        width: 100%;
    }

    div#wrapper {
        width: 100%;

        box-sizing: border-box;
    }

    div#body {
        width: 100%;
    }

    div#content {
        width: 100%;
    }

}


/** =========================================================
    MOBILE
    ========================================================= **/

@media screen and (max-width: 600px) {

    body {
        margin: 0;

        background: #ffffff;
    }

    div#wrapper-outer {
        width: 100%;

        margin: 0;

        background: #ffffff;
    }

    div#wrapper {
        width: 100%;

        margin: 0;

        padding: 5px 5px 30px;

        box-sizing: border-box;

        background: #ffffff;
    }

    div#body {
        width: 100%;

        padding: 10px 2px;

        background: #fff url('images/content-bg.jpg')
            repeat-x scroll top left;
    }

    div#content {
        width: 100%;

        padding: 0;

        margin: 0;

        background: #f2feed;
    }


    /** =====================================================
        TESTATA MOBILE
        ===================================================== **/

    div#sitename h1 {

        padding: 15px 5px 20px;

        font-size: 24px;

        letter-spacing: -1px;
    }

    div#sitename h1 img {

        width: 70px;

        height: 70px;
    }

    div#sitename h1 span {

        font-size: 21px !important;
    }


    /** =====================================================
        MENU MOBILE
        ===================================================== **/

    div#nav {

        height: auto;

        min-height: 40px;
    }

    div#nav ul {

        float: none;

        width: 100%;
    }

    div#nav ul li {

        float: none;

        display: block;

        width: 100%;
    }

    div#nav ul li a {

        float: none;

        width: 100%;

        text-align: center;
    }

    div#nav ul li a span {

        float: none;

        display: block;

        width: 100%;

        box-sizing: border-box;
    }


    /** =====================================================
        RICERCA MOBILE
        ===================================================== **/

    div#news-search {

        display: flex;

        align-items: flex-start;

        width: 100%;
    }


    div#anno-column {

        width: 84px;

        min-width: 84px;

        max-width: 84px;

        position: -webkit-sticky;

        position: sticky;

        top: 0;

        align-self: flex-start;

        padding: 5px 6px;

        background: #FFFEC4;

        z-index: 9999;
    }


    div#news-column {

        flex: 1;

        min-width: 0;

        padding: 5px;

        background: #f2feed;
    }


    /** =====================================================
        FOOTER MOBILE
        ===================================================== **/

    div#footer {

        padding: 15px 10px;

        text-align: center;
    }

    div#footer p {

        width: 100%;

        margin-bottom: 8px;
    }

    div#footer p.left,
    div#footer p.right {

        float: none;

        text-align: center;
    }

}


/** =========================================================
    PRINT
    ========================================================= **/

@media print {

    body {

        margin: 0;

        background: #ffffff;

        color: #000000;
    }

    div#wrapper-outer,
    div#wrapper {

        width: 100%;

        margin: 0;

        padding: 0;

        background: #ffffff;
    }

    div#nav {

        display: none;
    }

    div#sidebar {

        display: none !important;
    }

    div#body {

        width: 100%;

        padding: 0;
    }

    div#content {

        width: 100%;

        background: #ffffff;
    }

    div#anno-column {

        position: static;

        background: #FFFEC4;
    }

    div#news-column {

        background: #ffffff;
    }

    div#footer {

        background: #ffffff;

        color: #000000;

        border-top: 1px solid #000000;
    }

    div#footer p,
    div#footer p a {

        color: #000000;
    }

}