table h2 {
	padding: 1ex 0;
	margin: 0;
	text-align: center;
}
tr.alt td {
	font-size: 70%;
	padding-left: 0.5em;
}

.units {
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 auto;
	white-space: nowrap;

	th, td {
		border: 0;
		padding: 0 0.2em;
		background: transparent;
		text-align: left;
	}

	tr th:first-child {
		padding-left: 0;
	}

	thead th, tfoot th {
		font-size: 70%;
		font-weight: normal;
	}

	td.unit {
		& {
			padding-right: 0;
		}
		& + td.unit {
			padding-left: 0;
		}
	}

	.val {
		white-space: nowrap;
		text-align: right;
	}
}

.unit-composed {
	font-size: 70%;
}
td .unit-jump,
.hurt .unit-splash {
	position: absolute;
}
td .unit-massive {
	float: right;
	width: 0;
}
td.hurtrel {
	padding-left: 1em;
}
td.unit-shield,
td.hurtrel {
	font-size: 70%;
}
.unit-detect::before {
	content: '!';
	font-size: 70%;
	vertical-align: super;
}
.unit-jump {
	margin-left: -.2em;
}
.unit-magic {
	padding-left: 0.5em;
}
.magic-opt:before {
	content: '(';
	position: absolute;
	margin-left: -0.33em;
}
.magic-opt:after {
	content: ')';
}
.magic-perma {
	font-variant: small-caps;
}

.legend {
	dt {
		float: none;
		text-align: left;
		margin-top: 1ex;
		font-weight: bold;
	}
	dd:before {
		content: '• ';
	}
	dd {
		text-indent: -1em;
		margin-left: 1em;
	}

	& {
		display: table-cell;
		min-width: 20em;
		text-align: left;
	}
}
.units {
	float: left;
	padding-bottom: 1em;
	margin-right: 2em;

	@media (max-width: 52em) {
		thead th:first-child,
		tbody .cat {
			position: absolute;
			visibility: hidden;
		}
	}
}
@media (max-width: 48em) {
	.units {
		& {
			width: auto;
		}
		th, td {
			vertical-align: top;
		}
		td {
			height: 2em;
		}

		td:nth-child(2) {
			white-space: normal;
			padding: 0;
		}

		tr.sub td:nth-child(2),
		.cat,
		.unit-speed,
		.hurtrel,
		.unit-pop, .unit-type,
		.unit-shield,
		.unit-gas {
			padding: 0;
			position: absolute;
			margin-top: 3.2ex;
			margin-top: 1rem;
			min-width: 4em;
			text-align: right;
			margin-left: -4.3em;
			font-size: 70%;
		}
		th.unit-attr {
			position: absolute;
		}
		.unit-type {
			text-align: left;
			margin-left: 0;
		}
		.unit-speed {
			margin-left: -6em;
		}
		.alt {
			thead th:first-child,
			.cat,
			.unit-speed,
			.hurtrel,
			.unit-pop, .unit-type,
			.unit-shield,
			.gas {
				margin-top: 2ex;
			}
		}
		.cat {
			margin-top: -2ex;
			margin-left: 0;
			text-align: left;
		}

		thead th:first-child {
			margin-left: 0.5em;
		}
		thead th:first-child,
		th.unit-speed,
		th.hurtrel,
		th.unit-shield,
		th.gas {
			margin-top: 2.2ex;
		}
	}
}

.units tbody tr:hover:not(.race) {
	background: #EEE;
}
.unit-gas {
	color: #040;
}
.unit-min, .unit-min a:not(:hover) {
	color: #004;
}
.unit-supply {
	color: #080;
}
.unit-o {color: #C08} /* organic */
.unit-u {color: #44C} /* mechanic */
.unit-p {color: #0A8} /* psionic */
.unit-composed {
	color: #C88;
}
.unit-air {
	color: #08C;
}
.unit-x {color: #888}
.unit-s {color: #890}
.unit-m {color: #C70}
.unit-l {color: #D22}
.unit-h {color: #804}
.magic-opt:before,
.magic-opt:after {
	color: #000;
}
.hurtrel, .units .hurtrel {
	color: #778;
}
tbody .unit-shield {
	color: #64A;
}
.unit-pdd {
	color: #A8C;
}
.unit-splash {
	color: #4A0;
}
.hurt-a {
	color: #036;
}
.hurt-g {
	color: #063;
}
.unit-massive {
	color: #D88;
}
.unit-detect::before {
	color: #0A8;
}
.unit-jump {
	color: #8A4;
}
body .magic-perma {
	        text-decoration-color: #8C0;
	   -moz-text-decoration-color: #8C0;
	-webkit-text-decoration-color: #8C0;
}

.s-dark {
	.units tbody tr:hover:not(.race) {
		background: #222;
	}
	.unit-gas {
		color: #AC9;
	}
	.unit-min, .unit-min a:not(:hover) {
		color: #ABC;
	}
	.unit-supply {
		color: #8C6;
	}
	.unit-o {color: #C5A} /* organic */
	.unit-u {color: #66B} /* mechanic */
	.unit-p {color: #0A8} /* psionic */
	.unit-composed {
		color: #A44;
	}
	.unit-air {
		color: #4AC;
	}
	.unit-x {color: #666}
	.unit-s {color: #AC6}
	.unit-m {color: #C70}
	.unit-l {color: #C44}
	.unit-h {color: #C06}
	.magic-opt:before,
	.magic-opt:after {
		color: #CCC;
	}
	.hurtrel, .units .hurtrel {
		color: #887;
	}
	tbody .unit-shield {
		color: #88A;
	}
	.unit-pdd {
		color: #A8C;
	}
	.unit-splash {
		color: #4A0;
	}
	.hurt-a {
		color: #8AC;
	}
	.hurt-g {
		color: #8CA;
	}
	.unit-massive {
		color: #844;
	}
	.unit-detect::before {
		color: #0A8;
	}
	.unit-jump {
		color: #780;
	}
	body .magic-perma {
				text-decoration-color: #460;
		   -moz-text-decoration-color: #460;
		-webkit-text-decoration-color: #460;
	}
}

.s-mono {
	.unit-min {color: #000}
	.unit-gas {color: #888}

	.unit-o {color: #888}
	.unit-u {color: #444}
	.unit-p {color: #666}
	.unit-supply {color: #888}

	// distinctions significant in bonus damage
	.unit-air {color: #AAA}
	.unit-x {color: #000; text-shadow: #888 0 0 .1em}
	.unit-s {color: #888}
	.unit-m {color: #444}
	.unit-l {color: #222}
	.unit-h {color: #000}

	tbody .unit-shield {
		color: #888;
	}
	.unit-pdd {
		color: #666;
	}
	.unit-splash {
		color: #444;
	}
	.hurt-a {
		color: #000;
	}
	.hurt-g {
		color: #000;
	}
	.unit-massive {
		color: #444;
	}
	.unit-detect::before {
		color: #888;
	}
	.unit-jump {
		color: #222;
	}
}