@font-face {
    font-family: "Liberation Sans";
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/LiberationSans-Regular.ttf');
}

@font-face {
    font-family: "Liberation Sans";
    font-weight: normal;
    font-style: italic;
    src: url('../fonts/LiberationSans-Italic.ttf');
}

@font-face {
    font-family: "Liberation Sans";
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/LiberationSans-Bold.ttf');
}

@font-face {
    font-family: "Liberation Sans";
    font-weight: bold;
    font-style: italic;
    src: url('../fonts/LiberationSans-BoldItalic.ttf');
}

@font-face {
    font-family: "Inconsolata";
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/Inconsolata-Regular.ttf');
}

@font-face {
    font-family: "Inconsolata";
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/Inconsolata-Bold.ttf');
}


:root {
    --active-crumb: black;
    --background: white;
    --blockquote: LightGray;
    --blockquote-left: #006f71;
    --crumb-separator: black;
    --figcaption: linen;
    --figure-shadow: DarkGray;
    --footer-text: white;
    --image-background: white;
    --mark: AntiqueWhite;
    --mark-text: black;
    --menu-text: white;
    --pagemenu-text: white;
    --bronze: #a27752;
    --teal: #006f71;
    --text: black;
}


@media (prefers-color-scheme: dark) {
    :root {
        --active-crumb: #c5c5c5;
        --background: black;
        --blockquote: #10191b;
        --crumb-separator: #c5c5c5;
        --figcaption: #10191b;
        --figure-shadow: #006f71;
        --footer-text: white;
        --image-background: linen;
        --mark: #006f71;
        --mark-text: white;
        --menu-text: white;
        --text: #c5c5c5;
    }

    a, a:visited {
        color: var(--bronze);
        text-decoration: underline;
    }

    a:active {
        color: magenta;
    }

    strong {
        color: gold;
        font-weight: bold;
    }
}


@media (prefers-color-scheme: light) {
    a, a:visited {
        color: blue;
        text-decoration: underline;
    }

    a:active {
        color: red;
    }
}


@media (min-width: 800px) {
    #main-footer {
        flex-direction: row;
    }

    #main-footer > div.copyright {
        padding-bottom: 0.2em;
        padding-left: 1em;
        padding-top: 0.2em;
        text-align: left;
    }

    #main-footer > div.footer-links {
        padding-bottom: 0.2em;
        padding-right: 1em;
        padding-top: 0.2em;
        text-align: right;
    }

    #main-footer > div.modified {
        padding-bottom: 0.2em;
        padding-top: 0.2em;
        text-align: center;
    }

    #main-menu li.menu-level-0 {
        float: left;
    }

    #main-menu ul.menu-level-1 {
        float: right;
    }

    #main-menu li.menu-level-1 {
        float: left;
    }

    details.menu-top[open] summary.menu-top {
        float: left;
    }
}


@media (max-width: 799px) {
    #main-footer {
        flex-direction: column;
    }

    #main-footer > div.copyright {
        padding-top: 0.2em;
        text-align: center;
    }

    #main-footer > div.footer-links {
        padding-bottom: 0.2em;
        text-align: center;
    }

    #main-footer > div.modified {
        text-align: center;
    }

    #main-menu li.menu-level-0 {
        float: left;
    }

    #main-menu ul.menu-level-1 {
        float: right;
    }

    #main-menu ul.menu-level-2 {
        padding-left: 2em;
    }
}


a.ia-link {
    font-size: 0.75em;
}

blockquote {
    background-color: var(--blockquote);
    border-left: 6px solid var(--blockquote-left) !important;
    padding-left: 1em;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    min-height: 100vh;
    padding: 0;
}

code, pre, kbd, samp, var {
    font-family: "Inconsolata", monospace;
    font-size: 1.05em;
    font-style: normal;
    line-height: 1.2;
}

code pre {
    padding-left: 1em;
    padding-top: 1em;
}

div.ccfoot {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

figcaption {
    background-color: var(--figcaption);
    margin: 5px;
    padding: 5px;
}

figure {
    box-shadow: 0 0 0.4em 0.5em var(--figure-shadow);
    display: block;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    padding: 5px;
    width: 80%;
}

figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

h1 {
    font-size: 2.75em;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.25em;
    margin-top: 0.25em;
    text-align: center;
}

h2 {
    font-size: 2.25em;
    font-weight: bold;
    line-height: 1;
}

h3 {
    font-size: 1.75em;
    font-weight: bold;
    line-height: 1;
}

h4 {
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1;
}

h5 {
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
}

h6 {
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

hr {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #555;
    margin-top: 20px;
}

html {
    background-color: var(--background);
    color: var(--text);
    font-family: "Liberation Sans", sans-serif;
    font-size: 1.25em;
    line-height: 1.5;
}

img {
    background-color: var(--image-background);
    border-style: solid;
    border-width: 1px;
}

main {
    margin-bottom: auto;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 1.5em;
}

mark {
    background-color: var(--mark);
    color: var(--mark-text);
    font-style: italic;
}

span.overline {
    text-decoration: overline;
}

summary.menu-top {
    padding: 14px 16px;
}

table {
    border-style: outset;
    border-width: 2px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 80%;
}

th, td {
    border-style: solid;
    border-width: 1px;
}

video.oer-video {
    max-width: 100%;
    width: 600px;
}


.center {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


#breadcrumbs {
    clear: both;
    margin-bottom: 10px;
}

#breadcrumbs a {
    text-decoration: none;
}

#breadcrumbs a:focus {
    text-decoration: underline;
}

#breadcrumbs a:hover {
    text-decoration: underline;
}

#breadcrumbs a.active {
    color: var(--active-crumb);
}

#breadcrumbs a.active:focus {
    text-decoration: none;
}

#breadcrumbs a.active:hover {
    text-decoration: none;
}

#breadcrumbs li {
    display: inline;
}

#breadcrumbs li+li:before {
    color: var(--crumb-separator);
    content: "\00a0/\00a0";
    padding: 0.2em;
}

#breadcrumbs ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    min-height: calc(100vh);
}

#main-footer {
    background-color: var(--teal);
    color: var(--footer-text);
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#main-footer a {
    color: var(--footer-text);
}

#main-footer a:visited {
    color: var(--footer-text);
}

#main-menu a.menu-directory {
    border-bottom-color: var(--menu-text);
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

#main-menu details.menu-top > summary {
    padding: 13px 16px;
}

#main-menu li a {
    color: var(--menu-text);
    display: inline-block;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
}

#main-menu li a:focus {
    background-color: var(--bronze);
}

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

#main-menu li.menu-level-1 details[open] summary {
    border-style: inset;
}

#main-menu li.menu-level-2 a {
    text-align: left;
    width: 100%;
}

#main-menu summary {
    color: var(--menu-text);
    padding: 14px 16px;
}

#main-menu summary::marker {
    content: "";
}

#main-menu ul {
    background-color: var(--teal);
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#main-menu ul summary:focus {
    background-color: var(--bronze);
}

#main-menu ul summary:hover {
    background-color: var(--bronze);
}

#main-menu-container {
    background-color: var(--teal);
    min-height: 60px;
}

#page-menu {
    margin-bottom: 1em;
    margin-left: 3em;
    margin-right: 3em;
    margin-top: 1em;
}

#page-menu a.next {
    background-color: var(--teal);
    color: var(--pagemenu-text);
    display: inline-block;
    font-weight: bold;
    line-height: 2em;
    margin-top: 1em;
    padding-left: 0.75em;
    position: relative;
    text-decoration: none;
}

#page-menu a.next:after {
    border-bottom: 1em solid transparent;
    border-left: 1em solid;
    border-top: 1em solid transparent;
    color: var(--teal);
    content: "";
    display: inline-block;
    position: absolute;
    right: -1em;
    top: 0
}

#page-menu a.previous {
    background-color: var(--teal);
    color: var(--pagemenu-text);
    display: inline-block;
    font-weight: bold;
    line-height: 2em;
    margin-top: 1em;
    padding-right: 0.75em;
    position: relative;
    text-decoration: none;
}

#page-menu a.previous:before {
    border-bottom: 1em transparent solid;
    border-right: 1em solid;
    border-top: 1em transparent solid;
    color: var(--teal);
    content: "";
    display: inline-block;
    left: -1em;
    position: absolute;
    top: 0;
}

#page-menu a.up {
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    background-color: var(--teal);
    color: var(--pagemenu-text);
    display: inline-block;
    font-weight: bold;
    line-height: 2em;
    margin-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    position: relative;
    text-decoration: none;
}

#page-menu li {
    display: inline;
}

#page-menu ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    list-style-type: none;
    padding: 0px;
    text-align: center;
}