table.rwd-table {
	/*width: 750px;*/
	width: 100%;
	border-collapse: collapse;
	margin: 50px auto;
}

table.rwd-table tr th {
	font-size: 16px;
	padding: 10px;
}
table.rwd-table tr td {
	font-size: 13px;
	padding: 5px;
}

/* Zebra striping */
tr.rwd-table:nth-of-type(odd) {
	background: #eee;
}

th.rwd-table {
	background: #3498db;
	color: white;
	font-weight: bold;
}

td.rwd-table, th.rwd-table {
	padding: 10px;
	border: 1px solid #ccc;
	text-align: left;
	font-size: 18px;
}

/* 
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.rwd-table {
		width: 100%;
	}

	/* Force table to not be like tables anymore */
	table.rwd-table, thead.rwd-table, tbody.rwd-table, th.rwd-table, td.rwd-table,
		tr.rwd-table {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead.rwd-table tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	tr.rwd-table {
		border: 1px solid #ccc;
	}
	td.rwd-table {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50% !important;
	}
	td.rwd-table: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 */
		content: attr(data-column);
		color: #000;
		font-weight: bold;
	}
}