/*********		STILE GENERICO TABELLA  	**********/

table { 

width: 100%; 

border-collapse: collapse; 

text-align: center;
text-transform:uppercase !important;

}

th { 

background: #fff; 

/*color: white; */

font-weight: 200;

text-align:center;

}

td, th { 

padding: 10px; 

border: 1px solid #fff; 

}

tr:nth-of-type(even){				/*  Righe giallo scuro dispari */

background:rgba(255,255,255, 0.8);

}

tr:nth-of-type(odd){					/*  Righe giallo chiaro pari */

background-color:#E0EEEC;

}





/*********		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: ""; }				/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */

td:nth-of-type(2):before { content: "GEN"; }

td:nth-of-type(3):before { content: "FEB"; }

td:nth-of-type(4):before { content: "MAR"; }

td:nth-of-type(5):before { content: "APR"; }

td:nth-of-type(6):before { content: "MAG"; }

td:nth-of-type(7):before { content: "GIU"; }

td:nth-of-type(8):before { content: "LUG"; }

td:nth-of-type(9):before { content: "AGO"; }

td:nth-of-type(10):before { content: "SET"; }

td:nth-of-type(11):before { content: "OTT"; }

td:nth-of-type(12):before { content: "NOV"; }

td:nth-of-type(13):before { content: "DIC"; }

	

}	



@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: ""; }				/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */

td:nth-of-type(2):before { content: "GEN"; }

td:nth-of-type(3):before { content: "FEB"; }

td:nth-of-type(4):before { content: "MAR"; }

td:nth-of-type(5):before { content: "APR"; }

td:nth-of-type(6):before { content: "MAG"; }

td:nth-of-type(7):before { content: "GIU"; }

td:nth-of-type(8):before { content: "LUG"; }

td:nth-of-type(9):before { content: "AGO"; }

td:nth-of-type(10):before { content: "SET"; }

td:nth-of-type(11):before { content: "OTT"; }

td:nth-of-type(12):before { content: "NOV"; }

td:nth-of-type(13):before { content: "DIC"; }

	

}