* { 
	margin: 0; 
	padding: 0; 
}
body { 
	font-size:100%;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#contenitore {
	width:95%;
	margin: 30px auto; /* 30px */
}
p {
	margin: 20px 0;  /* 20px */
}
/*********		STILE GENERICO TABELLA  	**********/
table { 
width: 100%; 
border-collapse: collapse; /* collapse */
text-align: left; /* Allineamento del testo nella casella */
}
th { 
background: #bbbbbb; /* #333 colore dello sfondo intestazione */
color: black; /* Colore delle scritte dell'intestazione */
font-weight: bold; 
}
td, th { 
padding: 10px; /* Altezza casella intestazione */
border: 0px solid #BBBBBB;  /* #fff colore del bordo delle tabelle */
}
tr:nth-of-type(odd){				
background:rgba(0,0,241,241,241); /*  Colore dello sfondo della descrizione articolo - righe dispari */
}
tr:nth-of-type(even){					
background:rgba(255,255,255, 0.2); /*  Colore dello sfondo della descrizione articolo - righe pari  */
}
a{
text-decoration:none;
color:#36F;   /* #36F */
line-height:50px;  /* margine inferiore della cella 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 #000; }  /* #666 */
		
td { 
position: relative;		/* Creiamo lo spazio per l'intestazione  */
padding-left: 50%;  /* 50% */
border:1;
}
		
td:before { 	
position: absolute;			/* Creiamo le altre celle per la descrizione */
top: 8px;
left: 0px;
width: 40%;  /* 40%*/
font-weight:bold; 
}
		
/*td:nth-of-type(1):before { content: "Foto"; }*/				/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */
/*td:nth-of-type(2):before { content: "Descrizione"; }
td:nth-of-type(3):before { content: "Codice"; }
td:nth-of-type(4):before { content: "Prezzo"; }*/
/* td:nth-of-type(5):before { content: "Email"; }
td:nth-of-type(6):before { content: "Utente"; }*/
	
}	

@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 #bbbbbb;  /* #666 colore del bordo casella quando si stringe*/
padding-top:20px;}
		
td { 
position: relative;		   /* Creiamo lo spazio per l'intestazione  */ 
line-height:50px; 
border:1;                 /* misura del bordo di divisione */
}
		
td:before { 	
position: absolute;			/* Creiamo le altre celle per la descrizione */
top: 0px;
left: 8px;                  /* distanza delle scritte da SX */
width: 100%;  
font-weight:bold;
line-height:0px;
top:3px;                   /* distanza dall'alto delle scritte della cella */

}
		
/*td:nth-of-type(1):before { content: "Foto"; }	*/			/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */
/*td:nth-of-type(2):before { content: "Descrizione"; }*/
td:nth-of-type(3):before { content: "Codice"; }
td:nth-of-type(4):before { content: "Prezzo"; }
/* td:nth-of-type(5):before { content: "Email"; }
td:nth-of-type(6):before { content: "Utente"; }*/
	
}