/* 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:90%;
    /* SFONDO BARRA MENU*/
/*background: #333333;*/
background: black url(blockdefault.gif) center center repeat-x;
/*background-color:rgb(6, 6, 21);*/
border-radius:6px;text-align:left}

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

/* link menu hover */
a:hover{color:#C8C8C8;
    background:black url(blockactive.gif) center center repeat-x}

/* SOTTOMENU PRINCIPALE */
#menu li .hidden{display:block;position:absolute;top:104px;left:0;background-color:rgb(71, 71, 71);visibility:hidden;margin-left:0px;border-right:none}

/* link sottomenu */
#menu li .hidden li a{width:150px;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:1px solid black;margin:auto;color:black;text-align:center;font-size:30px;margin-bottom:10px;
display:none;position:fixed;left:10px;top:10px}

/* 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 1024px */
@media only screen and (max-width: 1024px) {

#menu{width:30%;border-radius:0;text-align:center;position:fixed;left: 10px;top: 50px;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-color:#000000}
#menu li .hidden li{background-color: rgb(71, 71, 71)}  
  
/* mostro il pulsante del menu nella versione mobile*/
.showMenu{display:block}  
  
}