/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	@media (min-width: 860px) and (max-width: 1024px)
	
	
	*/
	
	@media 
		only screen and (max-width: 860px),
		(min-device-width: 860px) and (max-device-width: 1000px) {
	
		/* Force table to not be like tables anymore */
		table.cardView, 
		table.cardView tbody, 
		table.cardView tr, 
		table.cardView td { 
			display: block; 
			float: left;
			clear: both;
			width: 100%;
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		table.cardView thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		table.cardView tr { border: 1px solid #ccc; }
		
		table.cardView td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%!important; 
		}
		
		table.cardView td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			font-weight: bold;
		}
		
		/* Label the data*/
		table.cardView td.product:before{content: "Product Type:";}
		table.cardView td.email:before{content : "E-mail Inquiries:";}
		table.cardView td.phone:before{content : "Phone Inquiries:";}
		
	} /* End Media Query */
		
	table.cardView tbody tr.odd td{
		background-color: #eee;
	}