:root {
	--main-background-color: white;
	--table-odd-row-background-color: #f8f8f8;
	--table-hover-background-color: #d0d0d0;
	--table-heading-background-color: #f0f0f0;
}

body {
	background-color: var(--main-background-color);
	margin: 0;
	min-height: 100vh;
	x-font-size: 1em;
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.content {
	padding: 10px 5% 10px 5%;
}

/* Table of Designations */

.designation-table {
	border-collapse: collapse;
	width: 100%;
}

.designation-table td, .designation-table th {
	font-size: 80%;
	border: 1px solid;
	padding: 6px;
	border-color: #c0c0c0;
}

.designation-table tr:nth-child(odd) { background-color: var(--table-odd-row-background-color); }

@media (hover: hover) {
	.designation-table tr:hover { background-color: var(--table-hover-background-color); }
}

.designation-table th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: var(--designation-table-heading-background-color);
	color: white;
	border-color: black;
	font-size: 100%;
}

/* Image reference table */

.image-ref-table {
	border-collapse: collapse;
	margin: auto;
}

.image-ref-table img {
	max-width: 100%;
}

.image-ref-table td {
	border: none;
	padding: 2px;
}

.image-ref-table tr { text-align: center; }

.image-ref-table tr:nth-child(2) {
	text-align: right;
	font-size: 80%;
}

/* removing the highlighting of table rows (for tables within a table cell */

.remove-row-highlighting tr:nth-child(odd) { background-color: transparent; }
.remove-row-highlighting tr:hover { }

/* Generic table */

.generic-table  {
	border-collapse: collapse;
	margin: auto;
}

.generic-table td, .generic-table th {
	border: 1px solid;
	padding: 6px;
	border-color: #c0c0c0;
}

.generic-table th {
	background-color: var(--table-heading-background-color);
}

.hover-table tr:nth-child(odd) { background-color: var(--table-odd-row-background-color); }

@media (hover: hover) {
	.hover-table tr:hover { background-color: var(--table-hover-background-color); }
}