/*
#contenitore {
	width:95%;
	margin: 50px auto;
}
p {
	margin: 20px 0; 
}
*/

/*********		STILE GENERICO TABELLA  	**********/
table { 
width: 100%; 
border-collapse: collapse; 
text-align: center; 
}
th { 
background: #2957a3; 
color: white; 
font-weight: bold; 
}
td, th { 
padding: 4px; 
border: 1px solid #fff; 
}
tr:nth-of-type(odd){				/*  Righe celesti dispari */
background:rgba(41,87,163, 0.3);
}
tr:nth-of-type(even){					/*  Righe bianche pari */
background:rgba(255,255,255, 1);
}
a{
text-decoration:none;
color: #cc0000;
font-weight:bold;
/*line-height:50px;*/
}

/*********		MEDIA QUERY  	**********/	
@media only screen and (min-width: 481px) and (max-width: 767px){
		
table, thead, tbody, th, td, tr { 			/* Forza la tabella a non essere più una tabella */
display: block; 
}
		
thead tr { 						/* Nascondiamo l'intestazione della tabella thead */
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #666; }
		
td { 
position: relative;		/* Creiamo lo spazio per l'intestazione  */
padding-left: 50%; 
border:0;
}
		
td:before { 	
position: absolute;			/* Creiamo le altre celle per la descrizione */
top: 8px;
left: 20px;
width: 40%;  
font-weight:bold;
}
		
td:nth-of-type(1):before { content: "PROG."; }				/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */
td:nth-of-type(2):before { content: "PERIODO"; }
td:nth-of-type(3):before { content: "DENOMINAZIONE"; }
td:nth-of-type(4):before { content: "LINK WEB"; }
td:nth-of-type(5):before { content: "CONVENZIONE"; }
	
}	

@media only screen and (min-width: 320px) and (max-width: 480px){	

table, thead, tbody, th, td, tr { 			/* Forza la tabella a non essere più una tabella */
display: block; 
}
		
thead tr { 						/* Nascondiamo l'intestazione della tabella thead */
position: absolute;
top: -9999px;
left: -9999px;
}
tr { 
border: 1px solid #666; 
padding-top:20px;}
		
td { 
position: relative;		/* Creiamo lo spazio per l'intestazione  */ 
line-height:50px;
border:0;
}
		
td:before { 	
position: absolute;			/* Creiamo le altre celle per la descrizione */
top: 0px;
left: 0px;
width: 100%;  
font-weight:bold;
line-height:0px;
top:5px;

}
		
td:nth-of-type(1):before { content: "PROG."; }				/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */
td:nth-of-type(2):before { content: "PERIODO"; }
td:nth-of-type(3):before { content: "DENOMINAZIONE"; }
td:nth-of-type(4):before { content: "LINK WEB"; }
td:nth-of-type(5):before { content: "CONVENZIONE"; }
	
}