:root {
	--main-background-color: white;
	--table-odd-row-background-color: #f8f8f8;
	--table-hover-background-color: #d0d0d0;
	--table-heading-background-color: #f0f0f0;
	--table-special-background-color: #ffffc0;
	
	--topmenu-background-color: #404040;
	--topmenu-hover-background-color: #606060;
	--submenu-background-color: #707070;
	--submenu-hover-background-color: #909090;
	--topmenu-border-color: #808080;
	--topmenu-item-color: #f0f0f0;
	
	--main-logo-color: #000040;
	--dusrm-logo-color: #206060;
}

body {
	background-color: var(--main-background-color);
	margin: 0;
	font-size: 1em;
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.content {
	padding: 10px 5% 10px 5%;	
}

/* Various standard classes */

.last-update-note {
	font-size: 0.6em;
}

.tinyfont {
	font-size: 0.6em;
}

.smallfont {
	font-size: 0.8em;
}

.bigfont {
	font-size: 1.13em;
}

.largefont {
	font-size: 1.5em;
}

.hugefont {
	font-size: 2em;
}

.centertext {
	text-align: center;
}

.indent {
	margin-left: 40px;
}

.noinfo {
	text-align: center;
}

.main-link {
	color: var(--main-logo-color);
	font-family: "Verdana", Arial, Helvetica, sans-serif;
}

.main-link a {
	color: var(--main-logo-color);
	text-decoration: none;
	font-family: "Verdana", Arial, Helvetica, sans-serif;
}

.dusrm-link {
	color: var(--dusrm-logo-color);
	font-family: "Verdana", Arial, Helvetica, sans-serif;
}

.dusrm-link a {
	color: var(--dusrm-logo-color);
	text-decoration: none;
	font-family: "Verdana", Arial, Helvetica, sans-serif;
}

.image-separator {
	width: 20px;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 768px) {
	.desktop-only {
		visibility: hidden;
		display: none;
	}
}

/* Blank table for centered entries */

.plain-center-table {
	border: 0;
	border-spacing: 0;
}

.plain-center-table td, .plain-center-table th {
	padding: 4px;
	text-align: center;
	vertical-align: bottom;
}

/* Table of Designations */

.designation-table {
	border-collapse: collapse;
	width: 100%;
}

.designation-table td, .designation-table th {
	font-size: 0.8em;
	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 td { 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: 1em;
}

@media (max-width: 768px) {
	.designation-table th {
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 0.8em;
	}
}

/* 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: 0.8em;
}

/* 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 { }
.remove-row-highlighting td {
	font-size: 100%;
}

/* 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); }
}

#topbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
	z-index: 1000;
	background-color: var(--topmenu-background-color);
	color: var(--topmenu-item-color);
	border-bottom-color: var(--topmenu-border-color);
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
