@charset "utf-8";
/* 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-color: darkblue;
	border-radius: 6px;
	text-align: center;
}

/* link menu. Cambiando 80px posso scrivere voci più lunghe */
li a{
	display: inline-table;
	color: #fff;
	font: bold 12px Arial;
	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
	width: 100%;
	padding-top: 10px;
	padding-right: 6px;
	padding-bottom: 10px;
	padding-left: 6px;
	margin-right: 6px;
	margin-left: 6px;
}

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

/* SOTTOMENU PRINCIPALE */
#menu li .hidden{display:block;position:absolute;top:100px;left:0;background-color:darkblue;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: 1px solid black;
	margin: auto;
	color: black;
	text-align: center;
	font-size: 30px;
	margin-bottom: 10px;
	display: none
}

/* 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
}

.immag-centr {
	background-color: #4C96D3;
	overflow: visible;
	border: thin solid #33C;
}
.container {
	width: 95%;
	max-width: 1280px;/* Può essere utile assegnare una larghezza massima per impedire che questo layout diventi troppo largo su un monitor di grandi dimensioni. Mantiene la lunghezza della riga più leggibile. IE6 non rispetta questa dichiarazione. */
	min-width: 360px;/* Può essere utile assegnare una larghezza minima per impedire che questo layout diventi troppo stretto. Mantiene la lunghezza della riga più leggibile nelle colonne laterali. IE6 non rispetta questa dichiarazione. */
	background-color: #FFC;
	margin: 0 auto; /* Il valore automatico sui lati, abbinato alla larghezza, produce un layout centrato. Non è necessario se impostate la larghezza del .container su 100%. */
	text-align: center;
	border: thin solid #FF3;
}
.responsive {
	width: 60%;
	height: auto;
}
.bordo {
	border: thin solid #5F584E;
   	}
.container-sx {
	padding-left: 5px;
	font-size: 18px;
	text-align: left;
	margin-right: 5px;
}

.table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 60%;
	border: 1px solid #ddd;
	background-color: #FFC;
	text-align: center;
}

th, td {
	text-align: left;
	padding-top: 1px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
}

tr:nth-child(even){
	background-color: #FFFFCC
}
.pie-pagina {
	height: 35px;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.carattRosso {
	font-family: "Comic Sans MS", cursive;
	font-size: 16px;
	color: #C00;
	font-weight: bold;
	text-decoration: none;
}

/* 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-color: #00008B
}

#menu li .hidden li{
	background-color: darkblue;
	border: thin solid #FFF;
}  
  
/* mostro il pulsante del menu nella versione mobile*/
.showMenu{display:block}  
  
}