/* ----------------------------------------------------------------------------------------------
    Questo codice non è mobile-first, quindi le dichiarazioni iniziali
    si riferiscono a Tablet e desktop
------------------------------------------------------------------------------------------------- */

/* Contenitore del logo e del menu ------ */
header {
 max-width: 100%;
 margin: 0px auto;
 padding: 0 0 0 0; /* distanza dai bordi: alto, destro, basso, sinistro */
 background: url(images/banner.png);
 border-top: 0px solid #6688bb;
 /*box-shadow: 1px 1px 2px 2px #333333; */
}
/* div che contiene il logo ------------------------ */
#banner {
 max-width:1040px;
 width:100%;
 /*min-height: 100px; */
 margin: auto;
 padding: 0 0 0 0;  /* distanza dai bordi: alto, destro, basso, sinistro */
 background: none;
}

/* div che contiene il logo ------------------------ */
#logo {
 max-width: 100%;
 height: 100px;
 background:url(images/logo.png);
 background-position: center ;
 background-size:contain;
 background-repeat:no-repeat;
}

/* div che contiene lo slogan ------------------------ */
#slogan {
 max-width: 100%;
 height: 100px;
 background:url(images/slogan.png);
 background-position: center ;
 background-size:contain;
 background-repeat:no-repeat;
}

/* div che contiene la barra del menu ------------- */
.container {
    max-width:1040px;
    width:100%;
    margin: 0 auto;
    padding: 2px 0 0 0;
    background: none;
    border-top: none;                  /* colore della linea che compare sopra il menu principale */
    border-bottom: 1px solid #6688bb;  /* colore della linea che compare sotto il menu principale */
}
/* Attributi dell'intestazione del menu che compare quando si rimpicciolisce lo schermo e la tendina e' ancora chiusa */
.toggleMenu {
    display:  none;
    background-color: none;      /* sfondo dell'intestazione del menu a tendina quando la tendina e' chiusa */
    color: #aaaaaa;              /* colore della scritta dell'intestazione del menu */
    /* min-height: 40px; */
    font-size: 1em;              /* grandezza della scritta menu */
    width: 200px;                /* larghezza della casella che incornicia la scritta menu */
    height: 30px;                /* altezza della casella che incornicia la scritta menu */
    margin: 5px 0px 5px 5px;     /* distanza del bordo della casella verso l'esterno: alto, destro, basso, sinistro */
    padding: 3px 0px 0px 20px;   /* distanza della scritta dai bordi: alto, destro, basso, sinistro */
    border: 1px solid #aaaaaa;
    border-radius:5px;      
    cursor: pointer;
}
/* ----- Attributi del menu quando e' esteso -------------------------- */
.nav {
   list-style: none;
   *zoom: 1;
   max-width: 100%;
   min-height: 25px;
   padding: 0px 0px 0px 7px;  /* distanza del testo dai bordi: alto, destro, basso, sinistro */
   margin: 0 ;
   background-color: none;    /* colore sfondo del menu esteso */
   font-size: 0.9em;          /* grandezza del testo del menu esteso */
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 200px;      /* larghezza della casella del submenu che compare passando sopra il mouse */
}
.nav a {
    padding: 3px 25px 0px 0px; /* distanza tra un testo e l'altro del menu esteso (sopra,destra,sotto,sinistra)*/
    color:#aaaaaa;             /* colore del testo del menu esteso */
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}
.nav > li > .parent {
    /*background-image: url("images/downArrow.png");  freccia al lato della voce del menu esteso che contiene sottomenu */
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;    /* consente di visualizzare il menu esteso nei tablet e desktop */
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;       /* consente di visualizzare il submenu del menu esteso nei tablet e desktop */
    color: #202020;       /* colore del testo del submenu quando il menu e' esteso*/
    background-image: url("images/sfondohome.jpg"); /* sfondo del submenu quando il menu e' esteso */
    height: 32px;         /* altezza delle celle del submenu quando il menu e' esteso */
    padding: 4px;         /* distanza dai bordi delle celle del submenu quando il menu e' esteso */
    position: relative;
    z-index:100;
    border: none;
    border-radius:3px;
    box-shadow: 0px 0px 10px 2px #333333;
}
.nav li li li a {
    background:#999999;  /* colore dello sfondo del submenu di secondo livello */
    z-index:200;
    border-top: none;
}
.nav a:hover {color: #6688bb;}        /* colore del testo del menu quando si passa sopra con il mouse */
.nav ul li a:hover {color: #6688bb;}  /* colore del testo sel submenu quando si passa sopra con il mouse */


/* ------------------------------------------------------------------------------------------

    Da qui in poi cominciano le dichiarazioni riguardanti il mobile - telefonino

--------------------------------------------------------------------------------------------- 
*/
@media screen and (max-width: 600px) {
    header {
        height: auto;
        background: none;
    }

/* div che contiene il logo ------------------------ */
#logo {
 height: 70px;
 /*
 background:url(images/logo.png);
 background-position: center ;
 background-size:contain;
 background-repeat:no-repeat;
*/
}
/* div che contiene lo slogan ------------------------ */
#slogan {
 height: 25px;
 background:url(images/slogan2.png);
 background-position: center ;
 background-size:contain;
 background-repeat:no-repeat;
}

    .active {
        display: block;
    }
    .nav a {
    padding: 10px 15px;  /* distanza dai bordi delle celle del menu a tendina nel mobile */
    }
    .nav > li {
        float: none;
        border-top: 1px solid #aaaaaa;  /* colore della barra tra un link e l'altro nel menu a tendina nel mobile */
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
   .nav li li a {
        color: #202020;       /* colore del testo del submenu quando il menu e' per mobile */
        background: #aaaaaa;  /* colore dello sfondo del submenu quando il menu e' per mobile */
        height: 40px;         /* altezza delle celle del submenu */
        padding: 10px;        /* distanza dai bordi delle celle del submenu */
        box-shadow: none;
        border-bottom: 1px solid #777777 ;   /* colore della barra tra un link e l'altro del submenu */
    }
   .nav li li li a {
        color: #202020;       /* colore del testo del submenu di secondo livello quando il menu e' per mobile */
        background: #777777;  /* colore dello sfondo del submenu di secondo livello quando il menu e' per mobile */
        height: 40px;         /* altezza delle celle del submenu di secondo livello */
        padding: 10px;        /* distanza dai bordi delle celle del submenu di secondo livello */
        box-shadow: none;
        border-bottom: 1px solid #aaaaaa ;  /* colore della barra tra un link e l'altro del submenu di secondo livello */
    }

}