@import url("colorscheme.css");
@import url("extrabits.css");


/* TABLE OF CONTENTS*/
/*
* Normalize.css - line 50
* Basic Layout  - line 100
* Lists         - line 400
* Breadcrumbs   - line 450
* Headers       - line 500
* Search Widget - line 600
* Nav Sidebar   - line 1000
* Tables        - line 1100
* Printing      - line 1200
* Little Tweaks - line 1300
*/
































/* ------------ NORMALIZE.CSS ------------ */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {line-height: 1.15; -webkit-text-size-adjust: 100%;}
body {margin: 0;}
main {display: block;}
h1 {font-size: 2em; margin: 0.67em 0;}
hr {box-sizing: content-box; height: 0; overflow: visible;}
pre {font-family: monospace, monospace; font-size: 1em;}
a {background-color: transparent;}
abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong {font-weight: bolder;}
code, kbd, samp {font-family: monospace, monospace; font-size: 1em;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}
details {display: block;}
summary {display: list-item;}
template {display: none;}
[hidden] {display: none;}














/* ------------ Basic Layout ------------ */
* {
    box-sizing: border-box;
}
::selection {
    color: var(--basecolor);
    background: var(--accentcolor);
}
html {
    font-size: 14px !important;
    scroll-behavior: auto;
}
@media (min-width: 31.25rem) {
    html {
        font-size: 16px !important;
    }
}
body {
    font-family:  Roboto,  sans-serif;
    font-size: inherit;
    line-height: 1.4;
    color: var(--textcolor);
    background-color: var(--basecolor);
    overflow-wrap: break-word;
}

/*Serif font for main text, excluding headers*/
main {
    font-family: Merriweather, 'Roboto Slab', serif;
}
main h1, main h2, main h3, main h4, main h5, main h6, main hgroup {
    font-family: Roboto,  sans-serif;
}

ol, ul, dl, pre, address, blockquote, table,
div, hr, form, fieldset, noscript .table-wrapper, noscript .table-wrapper-wide {
    margin-top: 0;
}
p {
    margin-top: 1em;
    margin-bottom: 1em;
}
a {
    color: var(--accentcolor);
    text-decoration: none;
}
a:not([class]) {
    text-decoration: underline;
}
a:not([class]):hover {
    background-color: var(--feedbackcolor);
}
code {
    font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
    font-size: small;
}
figure, pre {
    margin: 0;
}
li {
    margin: 0.25em 0;
}
img {
    max-width: 100%;
    height: auto;
}
hr {
    height: 1px;
    padding: 0;
    margin: 2rem 0;
    background-color: var(--bordercolor);
    border: 0;
}
.side-bar {
    z-index: 0;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--boxcolor);;
}
@media (min-width: 80rem) {
    .side-bar {
        flex-wrap: nowrap;
        position: fixed;
        width: 248px;
        height: 100%;
        flex-direction: column;
        border-right: 1px solid var(--bordercolor);
        align-items: flex-end;
    }
}
@media (min-width: 80rem) {
    .main {
        margin-left: 248px;
    }
}
@media (min-width: 50rem) {
    main > *:not(.table-wrapper-wide):not(.full-width) {
        max-width: 800px;
    }
}
.main-content-wrap {
    padding: 1rem;
    padding-bottom: 5rem;
    overflow-x: auto;
}
@media (min-width: 50rem) {
    .main-content-wrap {
        padding: 2rem;
    }
}
.main-header {
    z-index: 0;
    display: none;
    background-color: var(--boxcolor);;
}
@media (min-width: 80rem) {
    .main-header {
        display: flex;
        justify-content: space-between;
        height: 60px;
        background-color: var(--basecolor);;
        border-bottom: 1px solid var(--bordercolor);
    }
}
.main-header.nav-open {
    display: block;
}
@media (min-width: 80rem) {
    .main-header.nav-open {
        display: flex;
    }
}
.site-nav,
.site-header,
.site-footer {
    width: 100%;
}
.site-nav {
    display: none;
}
.site-nav.nav-open {
    display: block;
}
@media (min-width: 80rem) {
    .site-nav {
        display: block;
        padding-top: 3rem;
        padding-bottom: 1rem;
        overflow-y: auto;
        flex: 1 1 auto;
    }
}
.site-header {
    display: flex;
    min-height: 60px;
    align-items: center;
}
@media (min-width: 80rem) {
    .site-header {
        height: 60px;
        max-height: 60px;
        border-bottom: 1px solid var(--bordercolor);
    }
}
.site-title {
    padding-right: 1rem;
    padding-left: 1rem;
    flex-grow: 1;
    display: flex;
    height: 100%;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--titlecolor);
    font-size: 18px !important;
}
@media (min-width: 80rem) {
    .site-title {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}
@media (min-width: 31.25rem) {
    .site-title {
        font-size: 24px !important;
        line-height: 1.25;
    }
}
@media (min-width: 80rem) {
    .site-title {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}
.site-button {
    display: flex;
    height: 100%;
    padding: 1rem;
    align-items: center;
}
@media (min-width: 80rem) {
    .site-header .site-button {
        display: none;
    }
}
.site-title:hover {
    background-image: linear-gradient(-90deg, var(--feedbackcolor) 0%, var(--feedbackcolor) 70%, #0000 100%);
}
body {
    overflow-y: scroll;
}
.site-footer {
    padding-right: 1rem;
    padding-left: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #959396;
    font-size: 11px !important;
}
@media (min-width: 80rem) {
    .site-footer {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}
@media (min-width: 31.25rem) {
    .site-footer {
        font-size: 12px !important;
    }
}
@media (min-width: 80rem) {
    .site-footer {
        position: static;
        justify-self: end;
    }
}
.icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accentcolor);;
}
main {
    line-height: 1.45;
}
main ol, main ul, main dl, main>pre, main address, main blockquote, main .table-wrapper, main .table-wrapper-wide {
    margin-top: 0.5em;
}
main a {
    overflow: hidden;
    text-overflow: ellipsis;
}














































/* ------------ Lists ------------ */
/*
88     88 .dP"Y8 888888 .dP"Y8        db    88b 88 8888b.      888888 88  88 88 88b 88  dP""b8 .dP"Y8 
88     88 `Ybo."   88   `Ybo."       dPYb   88Yb88  8I  Yb       88   88  88 88 88Yb88 dP   `" `Ybo." 
88  .o 88 o.`Y8b   88   o.`Y8b      dP__Yb  88 Y88  8I  dY       88   888888 88 88 Y88 Yb  "88 o.`Y8b 
88ood8 88 8bodP'   88   8bodP'     dP""""Yb 88  Y8 8888Y"        88   88  88 88 88  Y8  YboodP 8bodP' 
*/
main ul,
main ol {
    padding-left: 1.5em;
}
main li .highlight {
    margin-top: 0.25rem;
}
main .task-list {
    padding-left: 0;
}
main .task-list-item {
    display: flex;
    align-items: center;
}
main .task-list-item::before {
    content: "";
}
main .task-list-item-checkbox {
    margin-right: 0.6em;
}
main hr + * {
    margin-top: 0;
}
main dl {
}
main dt {
    font-weight: bold;
}
main dt::after {
    content: ":";
}
main dd {
    margin-bottom: 0.5rem;
    font-size: 90%;
}








/* ------------ Breadcrumbs ------------ */
.breadcrumb-nav-list {
    padding-left: 0;
    margin-bottom: 0.75rem;
    list-style: none;
}
.breadcrumb-nav-list-item {
    display: table-cell;
    font-size: 11px !important;
}
@media (min-width: 31.25rem) {
    .breadcrumb-nav-list-item {
        font-size: 12px !important;
    }
}
.breadcrumb-nav-list-item::before {
    display: none;
}
.breadcrumb-nav-list-item::after {
    display: inline-block;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    color: #959396;
    content: "/";
}
.breadcrumb-nav-list-item:last-child::after {
    content: "";
}






















/* ------------ Headers ------------ */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.25;
    color: var(--titlecolor);
}
main h1, main h2, main h3, main h4, main h5, main h6 {
    position: relative;
    margin-top: 1.5em;
    margin-bottom: 0.25em;
    display: flow-root;
}
main h1 + h2, main h2 + h3, main h3 + h4, main h4 + h5, main h5 + h6,
main h1 + p, main h2 + p, main h3 + p, main h4 + p, main h5 + p, main h6 + p  {
    margin-top: 0em;
}
main h1:first-of-type {
    margin-top: 0.5em;
}
h1 {
    font-size: 225% !important;
    font-weight: 900;
    text-align: center;
}
h2 {
    font-size: 185% !important;
    font-weight: 800;
    border-bottom: 1px solid var(--bordercolor);
}
h3 {
    font-size: 140% !important;
    font-weight: 600;
}
h4 {
    font-size: 120% !important;
    font-weight: 600;
}
h5 {
    font-size: 100% !important;
    font-weight: 500;
}
h6 {
    font-size: 100% !important;
    font-weight: 500;
}

/*p in hgroup after h1: treat as subtitle*/
hgroup p {
    text-align: center;
    margin-top: -0.5rem !important;
    font-size: 20px !important;
    font-weight: bold;
    line-height: 1;
}

main .anchor-heading {
    position: absolute;
    right: -0.5rem;
    width: 1.5rem;
    padding-right: 0.25rem;
    padding-left: 0.25rem;
    overflow: visible;
    font-size: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
@media (min-width: 80rem) {
    main .anchor-heading {
        right: auto;
        left: -1.5rem;
    }
}
main .anchor-heading svg, main .anchor-heading span {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: var(--accentcolor);;
    visibility: hidden;
}
main .anchor-heading:hover svg, main .anchor-heading:hover span,
anchor-heading:focus svg, anchor-heading:focus span,
main h1:hover > .anchor-heading span,
main h2:hover > .anchor-heading span,
main h3:hover > .anchor-heading span,
main h4:hover > .anchor-heading span,
main h5:hover > .anchor-heading span,
main h6:hover > .anchor-heading span {
    visibility: visible;
}










/* ------------ Search Widget ------------ */
.search {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    height: 4rem;
    padding: 0.5rem;
    transition: padding linear 200ms;
}
@media (min-width: 80rem) {
    .search {
        position: relative !important;
        width: auto !important;
        height: 100% !important;
        padding: 0;
        transition: none;
    }
}
.search-input-wrap {
    position: relative;
    z-index: 1;
    height: 3rem;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: height linear 200ms;
}
@media (min-width: 80rem) {
    .search-input-wrap {
        position: absolute;
        width: 100%;
        max-width: 536px;
        height: 100% !important;
        border-radius: 0;
        box-shadow: none;
        transition: width ease 400ms;
    }
}
.search-input {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-top: 0.5rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 2.5rem;
    font-size: 16px;
    background-color: var(--basecolor);;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
}
@media (min-width: 80rem) {
    .search-input {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 3.5rem;
        font-size: 14px;
        background-color: var(--basecolor);;
        transition: padding-left linear 200ms;
    }
}
.search-input:focus {
    outline: 0;
}
.search-input:focus + .search-label .search-icon {
    color: var(--accentcolor);;
}
.search-label {
    position: absolute;
    display: flex;
    height: 100%;
    padding-left: 1rem;
}
@media (min-width: 80rem) {
    .search-label {
        padding-left: 2rem;
        transition: padding-left linear 200ms;
    }
}
.search-label .search-icon {
    width: 1.2rem;
    height: 1.2rem;
    align-self: center;
    color: #959396;
}
.search-results {
    position: absolute;
    left: 0;
    display: none;
    width: 100%;
    max-height: calc(100% - 4rem);
    overflow-y: auto;
    background-color: var(--basecolor);;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
}
@media (min-width: 80rem) {
    .search-results {
        top: 100%;
        width: 536px;
        max-height: calc(100vh - 200%) !important;
    }
}
.search-results-list {
    padding-left: 0;
    margin-bottom: 0.25rem;
    list-style: none;
    font-size: 14px !important;
}
@media (min-width: 31.25rem) {
    .search-results-list {
        font-size: 16px !important;
    }
}
@media (min-width: 80rem) {
    .search-results-list {
        font-size: 12px !important;
    }
}
@media (min-width: 80rem) and (min-width: 31.25rem) {
    .search-results-list {
        font-size: 14px !important;
    }
}
.search-results-list-item {
    padding: 0;
    margin: 0;
}
.search-result {
    display: block;
    padding-top: 0.25rem;
    padding-right: 0.75rem;
    padding-bottom: 0.25rem;
    padding-left: 0.75rem;
}
.search-result:hover,
.search-result.active {
    background-color: #ebedf5;
}
.search-result-title {
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
@media (min-width: 31.25rem) {
    .search-result-title {
        display: inline-block;
        width: 40%;
        padding-right: 0.5rem;
        vertical-align: top;
    }
}
.search-result-doc {
    display: flex;
    align-items: center;
    word-wrap: break-word;
}
.search-result-doc.search-result-doc-parent {
    opacity: 0.5;
    font-size: 12px !important;
}
@media (min-width: 31.25rem) {
    .search-result-doc.search-result-doc-parent {
        font-size: 14px !important;
    }
}
@media (min-width: 80rem) {
    .search-result-doc.search-result-doc-parent {
        font-size: 11px !important;
    }
}
@media (min-width: 80rem) and (min-width: 31.25rem) {
    .search-result-doc.search-result-doc-parent {
        font-size: 12px !important;
    }
}
.search-result-doc .search-result-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    color: var(--accentcolor);;
    flex-shrink: 0;
}
.search-result-doc .search-result-doc-title {
    overflow: auto;
}
.search-result-section {
    margin-left: 1.5rem;
    word-wrap: break-word;
}
.search-result-rel-url {
    display: block;
    margin-left: 1.5rem;
    overflow: hidden;
    color: #959396;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px !important;
}
@media (min-width: 31.25rem) {
    .search-result-rel-url {
        font-size: 10px !important;
    }
}
.search-result-previews {
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    margin-left: 0.5rem;
    color: #959396;
    word-wrap: break-word;
    border-left: 1px solid;
    border-left-color: var(--bordercolor);
    font-size: 11px !important;
}
@media (min-width: 31.25rem) {
    .search-result-previews {
        font-size: 12px !important;
    }
}
@media (min-width: 31.25rem) {
    .search-result-previews {
        display: inline-block;
        width: 60%;
        padding-left: 0.5rem;
        margin-left: 0;
        vertical-align: top;
    }
}
.search-result-preview + .search-result-preview {
    margin-top: 0.25rem;
}
.search-result-highlight {
    font-weight: bold;
}
.search-no-result {
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 12px !important;
}
@media (min-width: 31.25rem) {
    .search-no-result {
        font-size: 14px !important;
    }
}
.search-button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--basecolor);;
    border: 1px solid rgba(114, 83, 237, 0.3);
    border-radius: 1.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
    align-items: center;
    justify-content: center;
}
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity ease 400ms, width 0s 400ms, height 0s 400ms;
}
.search-active .search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}
.search-active .search-input-wrap {
    height: 4rem;
    border-radius: 0;
}
@media (min-width: 80rem) {
    .search-active .search-input-wrap {
        width: 536px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
    }
}
.search-active .search-input {
    background-color: var(--basecolor);;
}
@media (min-width: 80rem) {
    .search-active .search-input {
        padding-left: 2.3rem;
    }
}
@media (min-width: 80rem) {
    .search-active .search-label {
        padding-left: 0.6rem;
    }
}
.search-active .search-results {
    display: block;
}
.search-active .search-overlay {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity ease 400ms, width 0s, height 0s;
}
@media (min-width: 80rem) {
    .search-active .main {
        position: fixed;
        right: 0;
        left: 0;
    }
}
.search-active .main-header {
    padding-top: 4rem;
}
@media (min-width: 80rem) {
    .search-active .main-header {
        padding-top: 0;
    }
}




































































/* ------------ Navigation Menu ------------ */
/*Mobile and desktop font sizes*/
.site-nav {font-size: 16px !important;}
@media (min-width: 80rem) {.site-nav {font-size: 14px !important;}}

.site-nav summary {
    padding: 0.5em;
    line-height: 1;
    transform: scaleX(-1);
}
.site-nav summary > .nav-list-link {
    padding: 0.5em;
    margin: -0.5em;
    width: calc(100% - 2rem);
    background-color: var(--boxcolor);
    position: absolute;
    right: 0.5em;
    transform: scaleX(-1); /*Double flip puts marker on RHS*/
}
/*Give the marker a bit less space on desktop mode.*/
@media (min-width: 80rem) {.site-nav summary > .nav-list-link {width: calc(100% - 1.25rem);}}

.nav-list {
    padding: 0 0 0 1em;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-list .nav-list-item {
    position: relative;
    margin: 0;
}
.nav-list .nav-list-item > .nav-list-link {
    display: block;
    padding: 0.5em;
}

/*Style active links and mouse-overs*/
.nav-list .nav-list-item .nav-list-link.active {
    font-weight: 600;
    text-decoration: none;
}
.site-nav summary:hover, .site-nav summary.active {
    background-color: var(--feedbackcolor);
}
.nav-list .nav-list-item .nav-list-link:hover,
.nav-list .nav-list-item .nav-list-link.active {
    background-image: linear-gradient(-90deg, var(--feedbackcolor) 0%, var(--feedbackcolor) 70%, #0000 100%);
}
.nav-list-link:hover {
    text-decoration: underline;
}

/*Recursive lists are not the accent color, imitating the original JTD styling.*/
.nav-list-item .nav-list .nav-list-link {
    color: var(--textcolor);
}











































/* ------------ Tables ------------ */
/*
  _______    _     _           
 |__   __|  | |   | |          
    | | __ _| |__ | | ___  ___ 
    | |/ _` | '_ \| |/ _ \/ __|
    | | (_| | |_) | |  __/\__ \
    |_|\__,_|_.__/|_|\___||___/
*/

@media screen {
    .table-wrapper {
        display: block;
        width: auto;
        margin-bottom: 1.5rem;
        overflow-x: auto;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
        margin-right: -1rem;
        margin-left: -1rem;
        padding: 1rem;
    }
    .table-wrapper-wide {
        display: block;
        width: calc(100% + 2rem);
        margin-bottom: 1.5rem;
        overflow-x: auto;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
        margin-right: 0rem;
        margin-left: -1rem;
        padding: 1rem 2rem;
    }
    @media (min-width: 50rem) {
        .table-wrapper-wide {
            width: calc(100% + 4rem);
            margin-left: -2rem;
        }
    }
}


.table-wrapper table {
    width: 100%;
    max-width: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
}
th,
td {
    vertical-align: top;
    border: 1px solid var(--bordercolor);
    padding: 0.4em;
}
thead,
tfoot {
    background: var(--boxcolor);
}








































/* ------------ Printing ------------ */
/*  ██████╗ ██████╗ ██╗███╗   ██╗████████╗██╗███╗   ██╗ ██████╗ 
    ██╔══██╗██╔══██╗██║████╗  ██║╚══██╔══╝██║████╗  ██║██╔════╝ 
    ██████╔╝██████╔╝██║██╔██╗ ██║   ██║   ██║██╔██╗ ██║██║  ███╗
    ██╔═══╝ ██╔══██╗██║██║╚██╗██║   ██║   ██║██║╚██╗██║██║   ██║
    ██║     ██║  ██║██║██║ ╚████║   ██║   ██║██║ ╚████║╚██████╔╝
    ╚═╝     ╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝╚═╝  ╚═══╝ ╚═════╝ */

@media print {
    .site-footer,.site-header,
    .site-button,
    #edit-this-page,
    #back-to-top,
    .site-nav,
    .main-header {
        display: none !important;
    }
    .side-bar {
        width: 100%;
        height: auto;
        border-right: 0 !important;
    }
    .site-header {
        border-bottom: 1px solid var(--bordercolor);
    }
    .site-title {
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    .text-small {
        font-size: 8pt !important;
    }
    .main {
        max-width: none;
        margin-left: 0;
    }
    body {
        background-color: #0000;
        color: black;
        /*column-count: 2;
        -webkit-column-count: 2;
        -moz-column-count: 2;*/
    }
    pre, code, .highlighter-rouge{
        background-color: #0000;
    }
    .pagebreak {
        page-break-after: always;
        margin: 0; height: 0; padding: 0;
    }
    .pagebreak + * {
        margin-top: 0;
    }
    tr {
        padding: 0.1rem 0.4rem;
    }
}











































/* ------------ My Tweaks and Additions ------------ */


/*Make the blockquotes look more quotular.*/
main blockquote {
    border-left: 1px solid var(--bordercolor);
    padding: 0em 0em 0em 0.8em;
}
main blockquote cite{
    text-align: right;
    display: block;
    font-size: smaller;
}





/*Details and Summary*/
main summary {
    cursor: pointer;
}
main details {
    border: 1px solid var(--bordercolor); 
    border-radius: 8px;
    display: flow-root;
    margin-bottom: 1em;
}
main summary {
    font-weight: bold;
    padding: 0.5em;
    background-color: var(--boxcolor);
    border-radius: 8px;
}
main details > * {
    margin-left: 0.5em;
    margin-right: 0.5em;
}
main details > summary {
    margin: 0;
}



/*My attempt at a tufte style sidenote css*/
/*Little more than tweaking tufte to use an <aside>*/
/*A class is also included with similar styling. Use <aside> for semantic purposes. Use the class for things which you just want to shove to the side.*/
aside {
    font-size: .9rem;
    font-style: italic;
    padding: 1rem;

    background-color: var(--basecolor);
    border-radius: 1.5rem;
    border-left: 3px solid var(--bordercolor); 
    border-right: 3px solid var(--bordercolor); 
}
/*And this shoves the aside off into the sidebar on a wide-enough screen*/
@media (min-width: 64rem) {
    aside, .aside-like {
        float: right;
        clear: right;
        margin-right:max(-2rem, 100% - 800px - 28rem);
        width: min(20rem, 100% - 800px + 1rem);
        margin-top: -6rem;
        margin-bottom: 6rem;
    }
}


/*TOC in sidebar has smaller sublists*/
/*TWo versions. One for markdown TOC (built into JTD), one for jekyll TOC extension.*/
#sidebar-TOC ul ul,
#sidebar-TOC ol ol,
#markdown-toc ul,
#markdown-toc ol {
    font-size: smaller;
}

/*Smaller footnotes*/
.footnotes {
    font-size: small;
    border-top: 1px solid var(--bordercolor);
}


/*Extra bits to make the date work.*/
.date-header {
    text-align: right;
    font-size: 10px;
}


/*A note for future reference:
The following snippet can make an element in main cling to the side of the window. 
margin-right: min(-1rem, -1 * (100vw - (100% + 20rem)) );
*/



/*styled figcaption*/
main figure {
    background-color: var(--boxcolor);
}
figcaption {
    text-align: center;
    font-size: small;
    font-style: italic;
}


/*Custom sidebar header and footer are hidden in mobile layout*/
@media (max-width: 80rem) {
    .site-footer, .sidebar-header {
        display: none;
    }
}



/*Highlighting and borders on highlighted code blocks*/
main div.highlighter-rouge {
    border: 1px solid var(--bordercolor);
    overflow-x: auto;
}
main .highlighter-rouge {
    background-color: var(--boxcolor);
}
main .highlighter-rouge div.highlight {
    padding: 0.75rem;
}

/*Border color on fieldset*/
main fieldset { 
    border: 1px solid var(--bordercolor);
}



@import url("kineticgraphs.css");