/**
 * Responsive tables with element()
 * Pros: No markup changes, works with normal table markup, no content duplication
 * Cons: element() is only implemented in Firefox :(
 */

@media (max-width: 600px) {
	table, tr, td, th, thead, tbody {
		display: block;
	}

	thead {
		float: left;
		margin-left: -99in;
	}

		tbody tr {
			margin: .2em 0;
			padding-left: 4em;
		}

		td::before {
		    content: '';
		    float: left;
		    margin-left: -4em;
		    height: 2em;
		    width: 4em;
		}

		td:nth-child(1)::before {
			background: -moz-element(#header0) no-repeat;
			background: element(#header0) no-repeat;
		}
		td:nth-child(2)::before {
			background: -moz-element(#header1) no-repeat;
			background: element(#header1) no-repeat;
		}
		td:nth-child(3)::before {
			background: -moz-element(#header2) no-repeat;
			background: element(#header2) no-repeat;
		}
		td:nth-child(4)::before {
			background: -moz-element(#header3) no-repeat;
			background: element(#header3) no-repeat;
		}
		td:nth-child(5)::before {
			background: -moz-element(#header4) no-repeat;
			background: element(#header4) no-repeat;
		}

		th {
			text-align: left;
		}

		td:not(:first-child) {
			border-top: none;
		}
}

/* Just styling after this */
body {
	font: 150%/1.6 Helvetica Neue, sans-serif;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

	td, th {
		padding: 0 .3em;
	}

	td {
		border: 1px solid rgba(0,0,0,.1);
	}