/* ========================================
                   VARIABLES
	======================================== */
:root {
	--font-body: georgia, times, "times new roman", serif;
	--font-header: "century gothic", sans-serif;
	--font-monospace: "courier new", monospace;
	--unit: 5px;
	--color-page-background: #e0e0e0;
	--color-background: #fcfcf6;
	--color-accent-main: #c00;
	--color-accent-main-dark: #900;
	--color-accent-dark: #343430;
	--color-accent-med-dark: #a1a19b;
	--color-accent-med: #f1f1eb;
	--color-accent-light: #fcfcf6;
	--photo-border: #e3dcd6;
	--photo-border-width: calc(var(--unit) * 3);
	--color-links: #00c;
}

@media only screen and (max-width: 900px) {
	:root {
		--width-full: 100%;
		--width-contents: 100%;
	}
	
	html {
		font: 1.25em/150% var(--font-body);
	}
	
	a {
		line-height: 200%;
	}
	
	#main-menu {
		background: var(--color-accent-main) url("/pictures/banner.png") no-repeat left top;
		height: auto;
		width: var(--width-full);
	}
	
	#main-menu ul {
		background: var(--color-accent-main) url("/pictures/banner.png") no-repeat left top;
		height: auto;
		margin: 0 auto;
		padding: calc(var(--unit) * 20) 0 0;
	}

	#main-menu li a {
		border-radius: 0;
		color: #fff;
		text-decoration: none;
		float: none;
		margin: 0;
		padding: calc(var(--unit) * 3);
		width: var(--width-full);
	}

	#main-menu li {
		list-style: none;
	}

	#main-menu li.menu-item {
		display: none;
	}

	#main-menu li.menu-home {
		line-height: 150%;
		padding: 0;
		text-align: center;
		width: calc(var(--width-full) / 2);
	}

	#main-menu li.menu-toggle {
		display: inline-block;
		line-height: 150%;
		padding: 0;
		position: absolute;
		text-align: center;
		top: calc(var(--unit) * 20);
		right: 0;
		width: calc(var(--width-full) / 2);
	}

	#main-menu.extended ul li {
		display: block;
	}
	
	#table-of-contents, figure.sidebar {
		float: none;
	}
	
	.table-wrapper {
		overflow-x: auto;
	}
}

@media only screen and (max-width: 1200px) and (min-width: 900px) {
	:root {
		--width-full: 100%;
		--width-contents: 100%;
	}
	
	.table-wrapper {
		overflow-x: auto;
	}
}

@media only screen and (min-width: 1200px) {
	:root {
		--width-full: 1200px;
		--width-contents: 660px;
		--width-sidebar: 540px;
	}
	
	#table-of-contents, figure.sidebar {
		float: right;
	}
}

@media only screen and (min-width: 900px) {
	html {
		font: 1em/150% var(--font-body);
	}
	
	#main-menu {
		background: var(--color-accent-main) url("/pictures/banner.png") no-repeat right top;
		list-style: none;
		height: 2rem;
		padding: calc(var(--unit) * 20) 0 0;
		width: var(--width-full);
	}

	#main-menu ul {
		margin: 0;
		padding: 0 calc(var(--unit) * 5);
	}

	#main-menu li {
		list-style: none;
	}

	#main-menu li a {
		color: #fff;
		border-radius: 0.25em 0.25em 0 0;
		display: block;
		float: left;
		line-height: 2rem;
		padding: 0 calc(var(--unit) * 2);
		text-decoration: none;
	}

	#main-menu li a:hover {
		background-color: var(--color-accent-main-dark);
	}

	#main-menu li.menu-toggle {
		display: none;
	}

	#main-menu abbr {
		text-decoration: none;
	}
}


/* ========================================
           GENERAL ELEMENT SETTINGS
   ======================================== */
html {
	background-color: var(--color-page-background);
	color: #000;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
}

a {
	color: var(--color-links);
}

blockquote, span[lang], a[lang] {
	font-style: italic;
}

h2 span[lang], h3 span[lang], h4 span[lang], #table-of-contents span[lang], #section span[lang], #leadphoto span[lang], blockquote em, blockquote i, caption em, caption i {
	font-style: normal;
}

dt {
	margin-top: calc(var(--unit) * 2);
	font-weight: bold;
}

h1, h2, h3, h4 {
	font-family: var(--font-header);
}

img {
	display: block;
}

nav {
	font-family: var(--font-header);
}


/* ========================================
                HEADER SECTION
	======================================== */
header {
	margin: 0 auto;
	width: var(--width-full);
}


/* BREADCRUMBS */
header nav#breadcrumbs {
	background-color: var(--color-background);
	clear: both;
	font-family: var(--font-header);
	font-size: 1rem;
	list-style: none;
	padding: 0 calc(var(--unit) * 5);
	width: calc(var(--width-full) - calc(var(--unit) * 10));
}

header nav#breadcrumbs ol {
	margin: 0;
	padding: 0;
}

header nav#breadcrumbs li {
	display: inline;
	line-height: 2rem;
}

header nav#breadcrumbs li::after {
	content: " >";
}

header nav#breadcrumbs li:last-child::after {
	content: "";
}


/* ========================================
                 MAIN SECTION
	======================================== */
main {
	background-color: var(--color-background);
	margin: 0 auto;
	padding: 0 calc(var(--unit) * 5) calc(var(--unit) * 3);
	width: calc(var(--width-full) - calc(var(--unit) * 10));
}

/* Prevent floated contents from overflowing */
main::after {
	content: "";
	clear: both;
	display: table;
}


/* ARTICLE HEADER */
#header {
	border-bottom: 1px solid var(--color-accent-main);
}

#header h1 {
	font-size: 1.75rem;
	margin: 0;
	padding: calc(var(--unit) * 3) 0 var(--unit);
}

#header p.byline {
	color: var(--accent-main-dark);
	font-family: var(--font-header);
	font-size: 0.9rem;
	margin: 0 0 calc(var(--unit) / 2);
}


/* TABLE OF CONTENTS */
#table-of-contents {
	padding: 0 0 0 calc(var(--unit) * 5);
	width: calc(var(--width-sidebar) - calc(var(--unit) * 20));
}

#table-of-contents h2 {
	margin-top: calc(var(--unit) * 6);
}

#table-of-contents ol {
	list-style: none;
	counter-reset: item;
	margin: 0;
	padding: calc(var(--unit) * 3) 0;
}

#table-of-contents ol > li {
	display: table;
	counter-increment: item;
}

#table-of-contents ol > li:before {
	content: counters(item, ".") ". ";
	display: table-cell;
	padding-right: var(--unit);
	text-align: right;
	width: calc(var(--unit) * 6);
}

#table-of-contents li ol {
	padding: 0 0 calc(var(--unit) * 2);
}


/* ========================================
               CONTENTS STYLING
	======================================== */
article :is(h2, h3, h4, p, dl) {
	max-width: var(--width-contents);
}

article p {
	margin: calc(var(--unit) * 3) 0;
}

article :is(ul, ol) {
	padding-left: calc(var(--unit) * 8);
	max-width: calc(var(--width-contents) - calc(var(--unit) * 8));
}

article h2 {
	font-size: 1.5rem;
}

article h3 {
	font-size: 1.25rem;
}

article h4 {
	font-size: 1rem;
}

article :is(h2, h3, h4) {
	margin: calc(var(--unit) * 6) 0 calc(var(--unit) * -2);
	padding: 0;
}

article :is(h2+h3, h3+h4) {
	margin: calc(var(--unit) * 3) 0 calc(var(--unit) * -2);
}

#main-contents > p:first-child {
	margin-top: calc(var(--unit) * 6);
}


/* TABLES */
article table {
	border-collapse: collapse;
	empty-cells: show;
	font-family: var(--font-header);
	font-size: 0.9rem;
	margin: calc(var(--unit) * 3) 0;
}

article tbody td[colspan] {
	text-align: center;
}

article tbody td[colspan] li {
	list-style: none;
	margin: 0;
	text-align: center;
}

article tbody :is(td ul, th ul) {
	margin: 0;
	padding: 0;
}

article tbody :is(td dd, td li, th dd, th li) {
	margin: 0 0 0 calc(var(--unit) * 3);
	padding: 0;
}

article :is(td, th) {
	border: 1px solid var(--color-accent-dark);
	min-width: calc(var(--unit) * 4);
	padding: 3px;
	text-align: left;
}

article th {
	background-color: var(--color-accent-med);
}

article td {
	background-color: var(--color-accent-light);
}

article tbody tr:first-child th:only-child {
	background-color: var(--color-accent-med);
	color: #000;
	text-align: center;
}

article :is(tbody.data td, tbody.total td, tfoot.data td) {
	text-align: right;
}

article :is(tbody.data td.text, tbody.total td.text, tfoot.data td.text) {
	text-align: left;
}

article caption {
	caption-side: bottom;
	font-family: var(--font-header);
	font-style: italic;
	text-align: left;
}

article tbody.data td ul {
	list-style: none;
}

article tbody.data td li {
	margin: 0;
}

article tbody.total :is(th, td) {
	background-color: var(--color-accent-light);
	border: 0;
}

article td.total {
	font-weight: bold;
}

article thead :is(th, th[colspan]) {
	background-color: var(--color-accent-dark);
	border: 1px solid var(--color-accent-dark);
	color: #fff;
	padding: 2px;
	text-align: center;
}

article span.verttext {
	display: inline-block;
	writing-mode: vertical-rl;
}

article thead :is(a, a:visited) {
	color: #ccf;
}

article :is(table, thead, tbody, tfoot, colgroup) {
	border: 2px solid var(--color-accent-dark);
}

article td :is(dl, dt) {
	margin-bottom: 0;
	margin-top: 0;
}


/* DOCUMENT */
.document {
	background-image: url("/pictures/document-background.jpg");
	padding: calc(var(--unit) * 3) calc(var(--unit) * 5);
	margin: calc(var(--unit) * 3) 0;
	width: calc(var(--width-contents) - calc(var(--unit) * 10));
}

.document.printed, .document.printed :is(h2, h3, h4, table) {
	font-family: var(--font-body) ! important;
}

.document.typed, .document.typed :is(table, h2, h3, h4)  {
	font-family: var(--font-monospace) ! important;
	font-size: 100%;
	font-weight: normal;
}

.document.typed h2 {
	text-decoration: underline;
	text-transform: uppercase;
}

.document.typed h3 {
	text-transform: uppercase;
}

.document.typed h4 {
	text-decoration: underline;
}


.document.typed em, .document.typed strong {
	font-style: normal;
	text-transform: uppercase;
}

.document.typed strong {
	text-decoration: underline;
}


.document th, .document td {
	color: #000 ! important;
	background-color: transparent ! important;
}

.document.typed th {
	font-weight: normal ! important;
	text-transform: uppercase;
}


.document span[lang] {
	font-style: normal;
}


/* NOTES */
.note, .reference-source {
	font-size: 0.8rem;
	vertical-align: text-bottom;
	position: relative;
}

.note::before {
	content: "[note:";
}

.reference-source::before {
	content: "[";
}

.note::after, .reference-source::after {
	content: "]";
}


/* FIGURES */
figure {
	margin: calc(var(--unit) * 3) 0;
	max-width: var(--width-contents);
}

figcaption {
	font-style: italic;
	margin: 0;
	padding: var(--unit) 0;
}

figcaption :is(dl, ol, ul, p) {
	max-width: 100%;
	margin: 0 0 var(--unit);
}

figure.picture img {
	border: var(--photo-border-width) solid var(--photo-border);
	box-shadow: 2px 2px var(--color-accent-med-dark);
	clip-path: unset ! important;
	margin-bottom: 2px;
}

figure.sidebar {
	clear: both;
	width: 440px;
}

figure.sidebar.picture div {
	height: auto ! important;
	width: auto ! important;
}

figure.inline.graphic img {
	position: absolute;
}

figure.inline.picture figcaption {
	margin-top: calc(var(--unit) * 6);
}

th figure, td figure {
	margin: 0;
}

th figcaption, td figcaption {
	padding: 0;
}


/* OOBS */
.oob-group dl {
	margin: 0 0 2px;
}

.oob-group dt {
	margin: 0;
}

.oob-group dd {
	font-size: 1rem;
	font-style: italic;
	margin: 0;
}

.oob-group li {
	list-style: disc;
}

/* KSTN */
.kstn ul {
	margin: 0;
	padding: 0;
}

ul.kstn-group {
	list-style: none;
	margin-left: calc(var(--unit) * 5);
}

.kstn-unit li.kstn-unit {
	margin-left: calc(var(--unit) * 5);
}

.kstn-unit-name {
	font-weight: bold;
}

.kstn-person li, .kstn-equipment li {
	list-style: disc;
	margin-left: calc(var(--unit) * 10);
}

li:is(.kstn-person-note, .kstn-equipment-note) {
	font-style: italic;
	list-style: none;
	margin-left: calc(var(--unit) * 5);
}

li:is(.kstn-unit, .kstn-person, .kstn-equipment) {
	list-style: none;
	margin-bottom: calc(var(--unit) * 2);
}

.kstn-person-details, .kstn-equipment-details {
	display: flex;
}

.kstn-count {
	display: inline-block;
	padding: 0 var(--unit) 0 0;
	text-align: right;
	width: calc(var(--unit) * 4);
}

.kstn-person-title, .kstn-person-rank, .kstn-equipment-type {
	display: inline-block;
	padding: 0 var(--unit) 0 0;
}


/* TIMELINES */
.timeline td, .timeline th {
	text-align: left;
}


/* LINK LISTS */
.linklist {
	width: var(--width-contents);
}

.linklist dt a {
	color: var(--color-links);
	font-family: var(--font-header);
	text-decoration: none;
}

.linklist dd {
	margin: 0;
	padding: 0 0 calc(var(--unit) * 2);
}


.hoverinfo {
	background-color: var(--color-accent-light);
	border: 1px solid var(--color-accent-dark);
	color: #000;
	display: none;
	font-size: 90%;
	font-weight: normal;
	left: calc(var(--unit) * 2);
	min-width: calc(var(--unit) * 50);
	padding: var(--unit);
	position: absolute;
	text-align: left;
	top: calc(var(--unit) * 3);
	z-index: 1;
}

article span.hoverinfo :is(a, a:visited), article thead .hoverinfo :is(a, a:visited) {
	color: var(--color-links);
}

.dictionary_term {
	border-bottom: 1px dotted var(--color-accent-main);
	cursor: help;
	position: relative;
}

.dictionary_term:hover .hoverinfo, .note:hover .hoverinfo {
	display: inline-block;
}


/* WORDLIST */
.wordlist .term {
	font-weight: normal;
	margin: calc(var(--unit) * 5) 0 0;
}

.wordlist .term .word {
	font-size: 1.25rem;
	font-weight: bold;
}

.wordlist .term .word-abbreviation {
	display: block;
}

.wordlist .translation, .wordlist .reference {
	font-style: italic;
	margin: var(--unit) 0 0;
}

.wordlist .definition {
	margin: var(--unit) 0 0;
}

.wordlist .definition p {
	margin: var(--unit) 0 0;
}


/* ========================================
                FOOTER SECTION
	======================================== */
footer {
	background-color: var(--color-background);
	border-top: 4px solid var(--color-accent-main);
	clear: both;
	margin: 0 auto;
	padding: 0 calc(var(--unit) * 5);
	width: calc(var(--width-full) - calc(var(--unit) * 10));
}

footer p {
	margin: 0;
	padding: calc(var(--unit) * 1) 0;
}