/*----Responsive table custom css----*/

table.cart th, #main-content table.cart th, table.cart td, #main-content table.cart td, table.cart tr, #main-content table.cart tr, #content-area table tr, #content-area table td, #content-area table th { max-width: 100%; }

table { 
width: 100%;
  border-collapse: collapse !important; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee !important; 
}

td, th { 
  padding: 6px !important; 
  border: 1px solid #ccc !important; 
  text-align: left ; 
}

td.eight { width: 80%;}
td.twenty { width: 20%;}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/

td a { color: #D3114B !important; }

.sixty { width: 60%; }
.twenty { width: 20%; }
.fourty { width: 40%; }

@media all and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block !important; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}
	
tr { border: 1px solid #ccc !important; }
td, th { 
  border: none !important; text-align: center;
}

td.sixty { width: 100%;}
td.twenty { width: 100%;}
		
	td:before { 
		/* Now like a table header */
		position: absolute !important;
		/* Top/left values mimic padding */
		top: 6px !important;
		left: 6px !important;
		width: 45% !important; 
		padding-right: 10px !important; 
		white-space: nowrap !important;
	}
	

}

/*@media only screen and (max-width: 760px) { 

.sixty { width: 50% !important; }
.twenty { width: 25% !important; }
.fourty { width: 25% !important; }
}*/