/* regole di reset */
ul
{
    margin: 0;
    padding:0;
    list-style-type:none;
}

/*MENU PRINCIPALE*/
/* lista in orizzontale. inline-block è come inline, ma può avere altezza e larghezza. relative occorre per il sottomenu */
#menu li
{
    display:inline-block;
    position:relative;
}

/* menu. Cambiando center l'oriento a destra o sinistra */
#menu
{width:100%;
    background-image: linear-gradient(to top left, #531251 5%, #851f82 50%);
    border-radius:6px;
    text-align:center;
}

/* link menu. Cambiando 80px posso scrivere voci più lunghe */
li a
{
    display:block;
    padding:12px 20px;
    width:100px;
    color:#ffffff;
    font:bold 12px Arial;
    text-decoration:none;
    border-right:1px solid #731070;
    border-left:1px solid #731070;
}

/* link menu hover */
a:hover{color:#C8C8C8;}

/* SOTTOMENU PRINCIPALE */
#menu li .hidden
{
    display:block;
    position:absolute;
    top:100px;
    left:0;
    background-color:#ffffff;
    visibility:hidden;
    margin-left:-5px;
    border-right:none;
}

/* link sottomenu */
#menu li .hidden li a
{
    width:80px;
    border-right:none;
}

/* animazione per il passaggio sopra agli elementi del menu */
#menu li:hover .hidden{margin-top:-65px;visibility:visible;}

/* TRIGRAMMA */
/* stile e invisibilità */
.showMenu
{
    width:40px;
    border:2px solid #731070;
    border-radius: 10px 10px 10px 10px;
    margin:auto;
    color:#ffffff;
    text-align:center;
    font-size:30px;
    margin-bottom:10px;
    display:none;
    background-color:#851f82;
}

/* invisibilità checkbox
Il checkbox va nascosto in ogni caso ed il menu comparirà quando esso verrà selezionato tramite click sull’etichetta */
input[type=checkbox]{display:none;}

/* La tilde alt126 permette di selezionare tutti gli elementi B presenti in A; 
qui sta a significare che dà visibilità al menu quando il checkbox viene selezionato. */
input[type=checkbox]:checked ~ #menu{display:block;}


/* MEDIA QUERIES */
/* rendo il menù responsivo per adattarlo ai dispositivi più piccoli, fino ad una risoluzione massima di 768px */
@media only screen and (max-width: 768px) {
  
#menu{border-radius:0;text-align:center;display:none;}
  
/* rendo gli elementi dei menu elementi di blocco */  
ul li{display:block;}
  
/* imposto la larghezza massima per gli elementi dei menu e i links */  
#menu li .hidden li,#menu li .hidden li a, ul li,ul li a{padding-right:0;padding-left:0;width:100%;border-right:none;}
  
/* mostro il sottomenu solo al passaggio del mouse */   
#menu li .hidden li{display:none;}
#menu li:hover .hidden li{display:block;}  

/* resetto la posizione degli elementi del menu. static valore di default. Gli elementi sono mostrati in ordine, come appaiono nel flusso del documento */  
#menu li{position:static;}  
  
/* resetto la posizione del sottomenu e lo mostro */  
#menu li .hidden{position: static;visibility:visible;}
  
/* nessuna animazione al passaggio del mouse */  
#menu li:hover .hidden{margin:0;} 
  
/* colore di sfondo agli elementi del menu e del sottomenu */
#menu li{background-image: linear-gradient(to top left, #531251 5%, #851f82 50%);}
#menu li .hidden li{background-color:darkblue}  
  
/* mostro il pulsante del menu nella versione mobile*/
.showMenu{display:block;}