#page-wrap {
width:60%;
margin: 15px auto 0px;	
}
table { 
width: 100%; 
border-collapse: collapse;
}
tr:nth-of-type(odd) { 
background: #eee; 
}
th {
text-align:center; 
background: #333; 
color: white; 
font-weight: normal;
padding: 3px;
font-size: 16px;
}
td { 
padding: 3px; 
border: 1px solid #ccc; 
text-align: left; 
font-size: 16px;
}	
@media only screen and (max-width: 470px){
#page-wrap {
width:80%;
margin: 5px auto;
}
th {
font-size: 0.8rem;
}
td { 
font-size: 0.8rem;
}}			
@media only screen and (max-width: 240px){
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}		
tr { border: 1px solid #ccc; }		
td { 
border: none;
border-bottom: 1px solid #eee; 
position: relative;			
}		
td:before { 			
position: absolute;			
left: 6px;
width: 50%; 
padding-right: 10px; 
white-space: nowrap;
}		
td:nth-of-type(1):before { content: ""; }
td:nth-of-type(2):before { content: ""; 
}}