/*  added for Responsive TABLES */

/* 
	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: 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; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			/* Behave  like a "row" */
			border: none !important;
			border-bottom: 1px solid #eee !important; 
			position: relative !important;
			padding-left: 50% !important; 
		}
		
		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;
		}
		
		tr.liteg {
		background:#c9dbc7!important;	
		}
		td.note {
		color:#F60!important;
		text-transform:capitalize!important;	
		}
		/*
		Label the data
		*/
		td:nth-of-type(1):before { content: "Place of Interest"; }
		td:nth-of-type(2):before { content: "Location"; }
		td:nth-of-type(3):before { content: "Country"; }
	}


@media screen and (min-width: 700px)  {	

	.rows thead { 
		display: block; 
		padding: 0 0 1.5em 0; 
		margin: 0 0 1em 0; 
	}

	.rows thead tr { border-bottom: 1px solid #ddd; }
	.rows #fruit { text-indent: -999em; }
	
	.rows tr { 
		border-bottom: none !important; 
		padding: 0; 
	}
	
	.rows tbody tr:nth-of-type(even) { 
		background-color: #eee !important;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

	.rows th, 
	.rows td {
		width: 20% !important;
		height: 2em !important;
		float: left;
		text-align: center;
		padding: 0.3em 0;
	}
	
	.rows tbody td:nth-of-type(n) {
		background: none !important;
		border: none;
	}

	.rows td:nth-of-type(n):before { content: ""; }
	
}