BODY {
    font-family: Arial, Helvetica, sans-serif;
}

/**
 * Main menu styles
 */

.mainmenu {
    border: 1px solid black;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 18em;
    padding-top: 0px;
    padding-bottom: .5em;
    padding-left: .5em;
    padding-right: .5em;
    background: #444;
    color: #eee;
    height: 100%;
    overflow: auto;
    font-size: 90%;
}

.mainmenu a:link {
    color: #2ff;
}

.mainmenu a:visited {
    color: #0cd;
}

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

.mainmenu table tr td {
    padding: .2em;
}

.mainmenu-regular {
    background: linear-gradient(#444, #222);
}

.mainmenu-regular:hover {
    background: linear-gradient(#555, #333);
}

.mainmenu-current {
    background: linear-gradient(#555, #777);
}

.mainmenu-spacer {
    width: .7em;
    margin: 0px;
    padding: 0px;
    background-size: 100% 100%;
}

.mainmenu-icon-cell-line-lvl0 {
    background-image: url("/inc/line_updown-lvl0.svg");
}

.mainmenu-icon-cell-mid-lvl0 {
    background-image: url("/inc/line_updownright-lvl0.svg");
}

.mainmenu-icon-cell-last-lvl0 {
    background-image: url("/inc/line_upright-lvl0.svg");
}

.mainmenu-icon-cell-line-lvl1 {
    background-image: url("/inc/line_updown-lvl1.svg");
}

.mainmenu-icon-cell-mid-lvl1 {
    background-image: url("/inc/line_updownright-lvl1.svg");
}

.mainmenu-icon-cell-last-lvl1 {
    background-image: url("/inc/line_upright-lvl1.svg");
}

.mainmenu-icon-cell-line-lvl2 {
    background-image: url("/inc/line_updown-lvl2.svg");
}

.mainmenu-icon-cell-mid-lvl2 {
    background-image: url("/inc/line_updownright-lvl2.svg");
}

.mainmenu-icon-cell-last-lvl2 {
    background-image: url("/inc/line_upright-lvl2.svg");
}

.mainmenu-header {
    padding-top: 1.3em;
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-weight: bold;
    font-size: larger;
}

.mainmenu-control-button {
    position: absolute;
    right: .2em;
    top: .2em;
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
}

.mainmenu-external {
    width: .7em;
    height: .7em;
}

/**
 * Main area container
 */

.mainarea {
    margin-left: 18em;
    margin-bottom: 3.5em;
}

/**
 * Header styles
 */

.header {
    background-color: #f2f2f2;
    padding: .5em;
    border-bottom: 2px solid silver;
    margin-bottom: 1em;
    width: 100%;
}

.header-image-cell {
    vertical-align: top;
}

.header-image-cell img {
    padding: .5em;
}

.header-data-cell {
    width: 100%;
}

/**
 * Content styles
 */

.content {
    max-width: 80em;
}

/**
 * Application menu styles
 */

.appmenu {
    margin-left: 2em;
    font-weight: bold;
    position: relative;
    top: -1em;
    width: 100%;
}

.appmenu-item {
    position: relative;
}

.appmenu-spacer {
    padding-left: .3em;
    padding-right: .3em;
}

.appmenu-sublinks {
    position: absolute;
    left: 1em;
    top: 1.2em;
    border-left: 2px solid black;
    padding-left: .4em;
}

/**
 * Breadcrumbs
 */

.breadcrumbs {
    position: fixed;
    bottom: .3em;
    font-size: smaller;
    background: #eee;
    padding: .4em;
    border: 1px solid black;
}

/**
 * Changelog
 */

.lastupdated {
    font-size: smaller;
    font-style: italic;
    margin-bottom: 1em;
}

.changelog {
    margin-left: 2.5em;
    padding-left: .5em;
    font-size: smaller;
    border-left: .4em solid green;
}

.changelog_heading {
    font-weight: bold;
}

.changelog ul, .changelog_extra ul {
    margin-top: .1em;
    margin-bottom: .4em;
}

.changelog_extra {
    display: none;
}

.changelog_extra_button {
    padding-bottom: 1em;
}

/**
 * Toggles
 */

.togglebutton {
    width: 1em;
    padding-right: .3em;
}

/**
 * Contact page customizations
 */


.contact-table th {
    vertical-align: top;
    text-align: right;
    padding-right: .3em;
    padding-bottom: .7em;
}

.contact-table td {
    vertical-align: top;
    text-align: left;
    padding-bottom: .7em;
}

/**
 * Heading fixes - I like 'em smaller than the usual default
 * renderings.  Essentially just scaling them back by one "level"
 * sizewise, as per https://www.w3schools.com/tags/tag_hn.asp
 * (In practice I rarely go below two levels, just defining three
 * here.)
 */

h1 {
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
}
h2 {
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
}
h3 {
    font-size: 1em;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
}

/**
 * Table class I may want to reuse
 */

.apoctable {
    border-collapse: collapse;
}

.apoctable td {
    border: 1px solid silver;
}

.apoctable td, .apoctable th {
    padding-right: .5em;
    padding-left: .5em;
    padding-bottom: .2em;
}

.apoctable tr.oddrow {
    background: #eee;
}

/**
 * Other page elements
 */

pre {
	background-color: #f2f2f2;
	margin-left: 2em;
	margin-right: 2em;
	padding: 5px;
	border: 1px solid silver;
}

tt {
    background-color: #f2f2f2;
    padding: .2em;
}

ul > li, ol > li {
    padding-bottom: 0.7em;
}

.changelog > ul > li, .changelog_extra > ul > li {
    padding-bottom: 0;
}

.compact li {
    padding-bottom: 0;
}

.centered {
    text-align: center;
}

.indent {
	margin-left: 3em;
}

.good {
	color: green;
}

.ok {
	color: olive;
}

.bad {
	color: red;
}

.unknown {
	color: gray;
}

.smalltext {
	font-size: 0.70em;
}

.clickable {
	cursor: pointer;
}

.footnote {
    font-size: smaller;
    margin-left: 2em;
}

.aside {
    font-size: smaller;
    font-style: italic;
}