/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 999px) {

	/* Force table to not be like tables anymore */
	table.results, table.results thead, table.results tbody, table.results th, table.results td, table.results tr { 
		display: block; 
	}
/* Hide table headers (but not display: none;, for accessibility) */
	table.results thead tr, table.results th{
	position: absolute;
	top: -9999px;
	left: -9999px;
	display: none;
	}
	
	table.results tr { border: 1px solid #ccc; }
	
	table.results td {
	/* Behave  like a "row" */
	border: none;
	border-bottom: 1px solid #eee;
	position: relative;
	/* [disabled]padding-left: 50%; */
	text-align: center;
	width: auto;
	}
	
	table.results td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}