:root {
    --accent-color: #005a9c;
    --light-accent-color: #f0f8ff;
    --heading-text: #005a9c;
    --table-border: 2px solid var(--heading-text);
    --table-header-border: 1px solid lightgray;
    --font-monospace: 'Courier New', Courier, monospace;
    --code-color: #b22222;
}

body {  
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    line-height: 1.5;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 25%;
    overflow: auto;
    padding-left: 1.5em;
}

/* Body Header Styles */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-text);
}
h2,h3,h4,h5,h6 {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

h1 { font-size: x-large; font-weight: bold;}
h2 { font-size: large; font-weight: bold;}
h3 { font-size: medium; font-weight: bold;}
h4 { font-size: medium; font-weight: normal;}

/* Tables */
table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: var(--table-border);
    margin-bottom: 1rem;
}
th, td {
    padding: 0.75rem;
    text-wrap-mode: wrap;
    text-wrap: pretty;
}
td > p:first-child {
    margin-block-start: 0;
}

td > p:last-child {
    margin-block-end: 0;
}
td > ul:first-child {
    margin-block-start: 0;
}

thead th {
    border-bottom: var(--table-header-border);
}

tbody th {
    border-right: var(--table-header-border);
    width: 10rem;
    vertical-align: top;
}

tbody tr:nth-child(odd) {
    background-color: var(--light-accent-color);
}

code {
    display: inline-block;
    font-family: var(--font-monospace);
    font-size: 0.875em;
    color: var(--code-color);
}
/* Links as inline blocks to remove trailing whitespace */
a {
    display: inline-block;
}
/* Links to Ontology Entities */
a.entity, a.entity:visited {
    font-family: var(--font-monospace);
    font-size: 0.875em;
    color: var(--code-color);
}

/* Mermaid diagrams */
.mermaid {
    margin-bottom: 1rem;
}

/* Blockquotes */
blockquote {
    margin-left: 1rem;
    border-left: 1rem solid var(--accent-color);
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    background-color: var(--light-accent-color);
}

/* Definition Lists */
dl {
    display: grid;
    grid-template-columns: auto 1fr;
}
dd {
    margin: 0 0 0 0.5rem;
}
/* pyLODE Annotations */
.sup-c {
    color: orange;
}

.sup-op {
    color: navy;
}

.sup-dp {
    color: green;
}

.sup-ap {
    color: darkred;
}

/* Navigation font styles */

nav > .h2, .h3, .h4, .h5, .h6 {
    font-size: 1rem;
}

.h2 {
    font-weight: bold;
    padding-left: 0.5em;
}

.h3 {
    padding-left: 0.75em;
}
.h4, .h5, .h6 {
    padding-left: 1.0em;
    font-size: 95%;
}

main {
    padding-left: calc(25% + 3em)
}

/* Navigation link style */
nav a, a:visited {
    color: inherit;
    text-decoration: none;
}

nav a:hover {
    border-bottom: 2px solid var(--accent-color);
    background-color: var(--light-accent-color);
}

/* Numbering in navigation */
nav { counter-reset: nh2;}
nav .h2 { counter-reset: nh3 }
nav .h3 { counter-reset: nh4 }
nav .h4 { counter-reset: nh5;}
nav .h2 > a::before {
    counter-increment: nh2;
    content: counter(nh2) " ";
}
nav .h3 > a::before {
    counter-increment: nh3;
    content: counter(nh2) "." counter(nh3) " ";
}
nav .h4 > a::before {
    counter-increment: nh4;
    content: counter(nh2) "." counter(nh3) "." counter(nh4) " ";
}

/* Numbering in body */
main { counter-reset: bh2;}
main h2 { counter-reset: bh3; }
main h3 { counter-reset: bh4; }

main h2::before {
    counter-increment: bh2;
    content: counter(bh2) " ";
}
main h3::before {
    counter-increment: bh3;
    content: counter(bh2) "." counter(bh3) " ";
}
main h4::before {
    counter-increment: bh4;
    content: counter(bh2) "." counter(bh3) "." counter(bh4) " ";
}