/************************************************************************************
TABULAR DATA (see also style-x-x-x.css) same padding used so they align
*************************************************************************************/

/* 
Generic Styling, for Desktops/Laptops 
*/
table.responsive { 
	width: 100%; 
	border-collapse: collapse; 
}
/* Zebra striping */
.responsive tr:nth-of-type(odd) { 
	background: #eee; 
}

.responsive tr:nth-of-type(even) { 
	background: #fff; 
}

.no-zebra-striping tr:nth-of-type(odd) { 
	background: none; 
}

.responsive th { 
	background: #333; 
	color: white; 
	font-weight: bold; 
}
.responsive td, .responsive th { 
	padding: 6px; 
	border: 1px solid #ccc; 
	text-align: left; 
}

.borderless td, .borderless th { 
	border: none; 
}

.underline-headings th {
	background: #fff; 
	color: black;
	border-bottom: 1px solid #ccc;
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

	/* Force table to not be like tables anymore */

	table.responsive ,
	.responsive thead, 
	.responsive tbody, 
	.responsive th, 
	.responsive td, 
	.responsive tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.responsive thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.responsive tr { border: 1px solid #ccc; }
	
	.responsive td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}

	.borderless td, .borderless tr { 
		border-style: none;
	}
	
	.responsive 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;
	}
	
	/*
	Label the data
	*/
	.responsive td:before { content: attr(data-label); }

	.tabular-wrap th { 
		clear: left;
		float: left;
		display: block;
		margin-top: 0.5em;
		margin-bottom: 0;
		width: 100%;
	}
	.tabular-wrap td {
		float: left;
		padding: 0.35em 0.5em;	
		margin: 2px 0 15px 10px;
		text-align:left;
	}

	.data-bold th {
		font-weight: normal;
		text-align:left;	
	}

	.data-bold td {
		font-weight: bold;
	}
	
}