.nav{
   position:absolute;
   top:0;
   left:0;
   width:100vw;
   display:flex;
   justify-content: center;
   background-color: var(--colour-background-high);
}
.nav-content{
   display:flex;
   flex-direction: row;
   align-items: center;
   justify-content: stretch;
   width:100%;
   max-width:1200px;
   padding: 0 1em;
}
.nav-content .logo{
   background-color: var(--colour-hema-orange);
   padding:0 0.5em;
   height:100%;
   align-content: center;

}
.nav-content h1 a{
   padding: 0 1em;
   color:var(--colour-hema-orange) !important;
}
.nav-links{
   display:flex;
   flex-direction: row;
   justify-content: space-evenly;
   height:100%;
}
.nav-links a.nav-link{
   flex:1;
   align-self: center;
   justify-self: center;
   padding: 2em 1em;
   width:8em;
   text-align: center;
   color:var(--colour-foreground);
}
.nav-links a.nav-link:hover{
   color: var(--colour-hema-orange-variant);
   font-weight: bold;
}
.nav-links a.nav-link:active{
   color: var(--colour-hema-orange-variant-dark);
   font-weight: bold;
}
.nav-links a.nav-link.disabled{
   color:var(--colour-foreground-lowest);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* More-configurable styles */

/******** General ********/

/* Document body */

body {
   color: var(--colour-foreground);
   background-color: var(--colour-background);
   font-family: Arial, sans-serif;
   font-size: 10pt;
   width:100%;
   max-width:1200px;
   margin:auto;
   padding:96px 2em 400px 2em;
   /* padding-bottom: 400px; */
}
/* Horizontal rules */
hr {
   color: var(--colour-foreground-low);;
}
/* Document title */
h1 {
   font-size: 18pt;
   letter-spacing: 2px;
   /* border-bottom: 1px var(--colour-background-highest) solid; */
   padding-top: 5px;
   padding-bottom: 5px;
}
/* Main section headers */
h2 {
   font-size: 14pt;
   letter-spacing: 1px;
}
/* Sub-section headers */
h3, h3 a, h3 span {
   font-size: 12pt;
   font-weight: bold;
   color: var(--colour-foreground);;
}
/* Table displaying the properties of the schema components or the
   schema document itself */
table.properties th, table.properties th a {
   color: var(--colour-foreground);;
   background-color: var(--colour-background-accent); /* Pink */
}
table.properties td {
   background-color: var(--colour-background-high); /* Gray */
}


/******** Table of Contents Section ********/

/* Controls for switching between printing and viewing modes */
div#printerControls {
   color: var(--colour-foreground-secondary-low); /* Orange-brown */
}
/* Controls that can collapse or expand all XML Instance
   Representation and Schema Component Representation boxes */
div#globalControls {
    display:flex;
    flex-direction: column;
   border: 1px solid var(--colour-foreground-low);
   background-color: var(--colour-background-high);
   border-radius: 4px;
   padding:1em 2em;
   margin: 1em;
}
div.globalControlsRow{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
}
/* Controls that can collapse or expand all XML Instance
   Representation and Schema Component Representation boxes */
/* div#globalControls {
   padding: 10px;
   margin: 5px;
} */


/******** Schema Document Properties Section ********/

/* Table displaying the namespaces declared in the schema */
table.namespaces th {
   background-color: var(--colour-background-highest);
}
table.namespaces td {
   background-color: var(--colour-background-high);
}
/* Target namespace of the schema */
span.targetNS {
   color: var(--colour-foreground-accent);
   font-weight: bold;
}
table.namespaces tr td:nth-of-type(1) a{
    color:var(--colour-foreground);
}


/******** Schema Components' Sections ********/

/* Name of schema component */
.name {
   color: var(--colour-foreground-secondary); /* Orange */
}

/* Hierarchy table */
table.hierarchy {
   border: 2px solid var(--colour-foreground-lowest); /* Gray */
}

/* XML Instance Representation table */
div.sample div.contents {
   border: 2px dashed var(--colour-foreground);;
}

/* Schema Component Representation table */
div.schemaComponent div.contents {
   border: 2px var(--colour-foreground) solid;
}


/******** Glossary Section ********/

/* Glossary Terms */
.glossaryTerm {
   color: var(--colour-foreground-accent-low); /* Blue */
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Printer-version styles */

@media print {

/* Ensures that controls are hidden when printing */
div#printerControls {
   visibility: hidden;
}
div#globalControls {
   visibility: hidden;
}
#legend {
   display: none;
}
#legendTOC {
   display: none;
}
#glossary {
   display: none;
}
#glossaryTOC {
   display: none;
}

}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Base styles */

/******** General ********/

/* Unordered lists */
table.properties ul {
   margin-left: 0;
   margin-bottom: 0.5em;
   padding-left: 0;
}
table.properties li {
   margin-left:1.5em;
}
/* Tables */
table {
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 2px;
   margin-right: 2px;
}
table th, table td {
   font-size: 10pt;
   vertical-align: top;
   padding-top: 3px;
   padding-bottom: 3px;
   padding-left: 10px;
   padding-right: 10px;
}
table th {
   font-weight: bold;
   text-align: left;
}
/* Table displaying the properties of the schema components or the
   schema document itself */
table.properties {
   width: 90%;
}
table.properties th {
   width: 30%;
}
/* Boxes that can make its content appear and disappear*/
div.box {
   margin: 0.5em;
}
   /* Box caption */
div.box span.caption {
   font-weight: bold;
   margin-left:1em;
}
   /* Button to open and close the box */
div.box input.control {
   width: 2em;
   height: 2em;
   text-align: center;
   vertical-align: middle;
   font-size: 12pt;
   background-color: var(--colour-background-high);
   color: var(--colour-foreground);
   border-radius:4px;
   border-width: 1px;
}
   /* Box contents */
div.box div.contents {
   margin-top: 3px;
}


/******** Table of Contents Section ********/

/* Controls for switching between printing and viewing modes */
div#printerControls {
   white-space: nowrap;
   font-weight: bold;
   padding: 5px;
   margin: 5px;
}



/******** Schema Document Properties Section ********/

/* Table displaying the namespaces declared in the schema */
table.namespaces th {
}
table.namespaces td {
}
/* Target namespace of the schema */
span.targetNS {
}


/******** Schema Components' Sections ********/

/* Name of schema component */
.name {
}

/* Hierarchy table */
table.hierarchy {
   width: 90%;
}
table.hierarchy th {
   font-weight: normal;
   font-style: italic;
   width: 20%;
}
table.hierarchy th, table.hierarchy td {
   padding: 5px;
}

/* XML Instance Representation table */
div.sample {
   width: 90%;
}
div.sample div.contents {
   padding: 5px;
   font-family: Courier New, sans-serif;
   font-size: 10pt;
}
   /* Normal elements and attributes */
div.sample div.contents, div.sample div.contents a {
   color: var(--colour-foreground);;
}
   /* Group Headers */
div.sample div.contents .group, div.sample div.contents .group a {
   color: var(--colour-foreground-lowest);; /* Light gray */
}
   /* Type Information */
div.sample div.contents .type, div.sample div.contents .type a {
   color: var(--colour-foreground-lowest);; /* Light gray */
}
   /* Occurrence Information */
div.sample div.contents .occurs, div.sample div.contents .occurs a {
   color: var(--colour-foreground-lowest);; /* Light gray */
}
   /* Fixed values */
div.sample div.contents .fixed {
   color: var(--colour-foreground-tertiary); /* Green */
   font-weight: bold;
}
   /* Simple type constraints */
div.sample div.contents .constraint, div.sample div.contents .constraint a {
   color: var(--colour-foreground-lowest); /* Light gray */
}
   /* Elements and attributes inherited from base type */
div.sample div.contents .inherited, div.sample div.contents .inherited a {
   color: var(--colour-foreground-low); /* Dark gray */
}
   /* Elements and attributes added to or changed from base type */
div.sample div.contents .newFields {
   font-weight: bold;
}
   /* Other type of information */
div.sample div.contents .other, div.sample div.contents .other a {
   color: var(--colour-foreground-accent-high); /* Blue */
   font-style: italic;
}
   /* Link to open up window displaying documentation */
div.sample div.contents a.documentation {
   text-decoration: none;
   padding-left: 3px;
   padding-right: 3px;
   padding-top: 0px;
   padding-bottom: 0px;
   font-weight: bold;
   font-size: 11pt;
   background-color: #FFD;
   color: var(--colour-foreground-accent);
}
   /* Invert colors when hovering over link to open up window 
      displaying documentation */
/* div.sample div.contents a.documentation:hover {
   color: #FFD;
   background-color: var(--colour-foreground-accent);
} */

/* Schema Component Representation table */
/* div.schemaComponent {
   width: 90%;
} */
/* div.schemaComponent div.contents {
   font-family: Courier New, sans-serif;
   font-size: 10pt;
   padding: 5px;
} */
   /* Syntax characters */
/* div.schemaComponent div.contents {
   color: #00f; 
} */
   /* Element and attribute tags */
/* div.schemaComponent div.contents .scTag {
   color: #933; 
} */
   /* Element and attribute content */
div.schemaComponent div.contents .scContent, div.schemaComponent div.contents .scContent a {
   color: var(--colour-foreground);;
   font-weight: bold;
}
   /* Comments */
div.schemaComponent div.contents .comment {
   color: var(--colour-foreground-lowest); /* Light gray */
}

/******** Legend Section ********/

div#legend table, div#legend div {
   margin-bottom: 3px;
}
div#legend div.hint {
   color: var(--colour-foreground-lowest); /* Light gray */
   width: 90%;
   margin-left: 1em;
   margin-bottom: 2em;
}


/******** Glossary Section ********/

/* Glossary Terms */
.glossaryTerm {
   font-weight: bold;
}


/******** Footer ********/

.footer {
   font-size: 8pt;
}

a{
    color: var(--colour-foreground-accent);
    text-decoration: none;
}
a:visited{
    color: var(--colour-foreground-accent-low);
}

a.button{
    background:var(--colour-background-highest);
    color:var(--colour-foreground);
    border:1px solid var(--colour-foreground-lowest);
    border-radius:4px;
    padding:0.5em 1em;
    margin:0.5em;
}

a.button.button-primary{
    background:var(--colour-background-primary);
    color:var(--colour-foreground-onPrimary);
}
a.button.button-outline{
    background:none;
    border:1px solid var(--colour-foreground-low);
}
a.button.button-text{
    background:none;
    border:none;
}
a.button:hover{
   background:var(--colour-background-primary-high)!important;
}
a.button:active{
   border-color: var(--colour-background-highest)!important;
   background:var(--colour-background-primary-low)!important;
}
h1 a, h2 a, h3 a{
   color:var(--colour-background-primary);
}


/* Prism override */
pre[class*=language-]{
}
:not(pre)>code[class*=language-],pre[class*=language-]{
   background: var(--colour-code-background) !important;
   border: 1px solid var(--colour-background-high);
   border-radius: 4px;
}
:not(pre)>code[class*=language-]{
   /* padding:.1em;
   border-radius:.3em;
   white-space:normal */
}

.token.punctuation{
   color:var(--colour-code-text-low) !important;
}
.token.attr-value .token.punctuation:not(.attr-equals){
   color: var(--colour-code-str) !important;
}
.token.punctuation.attr-equals{
   color: var(--colour-code-text) !important;
}

code[class*=language-],pre[class*=language-]{
   color:var(--colour-code-text) !important;
}
.line-numbers .line-numbers-rows{
   border-right:1px solid var(--colour-code-text-low) !important;
}
.line-numbers-rows>span:before{
   color:var(--colour-code-text-low) !important;
}
.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{
   color:var(--colour-code-text-low) !important; 
}
.token.attr-name, .token.deleted, .token.namespace, .token.tag {
   color: var(--colour-code-tag) !important;
}
.token.attr-value, .token.char, .token.regex, .token.string, .token.variable{
   color: var(--colour-code-str) !important;
}






/* -------------- */




:root{
   --colour-hema-orange:#E75302;
   --colour-hema-orange-variant:#e48552;
   --colour-hema-orange-variant-dark:#743310;
   
   --colour-background-primary-low:var(--colour-hema-orange-variant-dark);
   --colour-background-primary:var(--colour-hema-orange);
   --colour-background-primary-high:var(--colour-hema-orange-variant);
   --colour-foreground-onPrimary: #FFF;

   --colour-background: #FFF;
   --colour-background-high: #EEE;
   --colour-background-highest: #CCC;
   --colour-background-accent: #F99;

   --colour-foreground-lowest: #999;
   --colour-foreground-low: #666;
   --colour-foreground: #222;

   --colour-foreground-accent-low: #036;
   --colour-foreground-accent: #06C;
   --colour-foreground-accent-high: #369;

   --colour-foreground-secondary-low: #963;
   --colour-foreground-secondary: #F93;
   --colour-foreground-secondary-high: #F93;

   --colour-foreground-tertiary-low: #063;
   --colour-foreground-tertiary: #063;
   --colour-foreground-tertiary-high: #063;


   --colour-code-text: #444;
   --colour-code-text-low: #777;
   --colour-code-tag: #0064b6;
   --colour-code-str: #ce5d00;
   --colour-code-background: #e1e1e1;
}

@media (prefers-color-scheme: dark) {:root{
   --colour-background: #222;
   --colour-background-high: #333;
   --colour-background-highest: #444;
   --colour-background-accent: #944;

   --colour-foreground-lowest: #666;
   --colour-foreground-low: #999;
   --colour-foreground: #DDD;

   --colour-foreground-accent-low: rgb(73, 102, 145);
   --colour-foreground-accent: #3c8fd3;
   --colour-foreground-accent-high: #369;

   --colour-foreground-secondary-low: #963;
   --colour-foreground-secondary: #F93;
   --colour-foreground-secondary-high: #F93;

   --colour-foreground-tertiary-low: #063;
   --colour-foreground-tertiary: #063;
   --colour-foreground-tertiary-high: #063;

   --colour-code-text: #ccc;
   --colour-code-text-low: #999;
   --colour-code-tag: #569cd6;
   --colour-code-str: #d08142;
   --colour-code-background: #1e1e1e;
}}