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

th {
	background: #bababa;
	color: #4a4a4a;
	font-weight: 500;
}

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


/* 
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) {

		

		.table-responsive table,
		.table-responsive thead,
		.table-responsive tbody,
		.table-responsive tfoot,
		.table-responsive tr,
		.table-responsive th,
		.table-responsive td {
			display: block;
		}

			.table-responsive thead tr {
				position: absolute;
				top: -9999px;
				left: -9999px;
			}

			.table-responsive tfoot tr > th {
				position: absolute;
				top: -9999px;
				left: -9999px;
			}

		.table-responsive tr {
			border: 1px solid #ccc;
		}

		.table-responsive td {
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			white-space: normal;
			text-align: left;
			padding: 5px 10px 5px calc(50% + 10px);
		}

			.table-responsive td:before {
				content: attr(data-title);
				position: absolute;
				top: 1px;
				left: 1px;
				width: calc(50% - 20px);
				padding: 5px 10px;
				white-space: nowrap;
				text-align: left;
				font-weight: bold;
			}
	}