
/* Default (Screen: body and toc (left side)) */
body {
    font-family: "Helvetica Neue", "Verdana", "Helvetica", "Arial", sans-serif;
    max-width: 800px;
    margin: auto;
    margin-left: 240px;
    padding: 1em;
}
div.column {
    /* Pandoc uses "top", no option/attribute so far supported to change this */
    vertical-align: middle;
}

#TOC {
    font-size: small;
    background-color: #dbe4ed;
    padding: 1em;
    padding-left: 0em;
    left: 0;
    top: 0;
    width: 220px;
    height: 100%;
    z-index: 99999;
    position: fixed;
}
#TOC ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#TOC ul li {
    display: block;
    padding: 2px 10px;
}
#TOC ul li a {
    color: #000;
    text-decoration: none;
}
#TOC ul li a:hover {
    background-color: #555;
    color: white;
}
#TOC ul li ul {
    display: none;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999999;
    position: fixed;
}
#TOC ul li:hover ul {
    display: block;
}
#TOC ul li ul li a {
    width: 100%;
}
#TOC ul li ul li a:hover {background-color: #a1a1a1}
.home-btn {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 12px;
    padding: 5px 11px;
    background-color: #ff7;
    border: 1px solid;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


/* Small screen: just body, toc at top (nav bar), do not show drop downs (this is typical a tablet with touch) */
@media screen and (max-width: 1024px) {
    body {
        margin-left: initial;
        margin-top: 60px;
    }
    /* allow columns to re-align */
    div.column {
        width: initial;
    }
    #TOC {
        width: 100%;
        height: auto;
    }
    #TOC ul li {
        float: left;
    }
    #TOC ul li ul li {
        float: none;
    }
    #TOC ul li ul {
        display: none;
    }
    #TOC ul li:hover ul {
        display: none;
    }
}


/* Really small screen: TOC just inline block with links to sections */
@media screen and (max-width: 400px) {
    body {
        font-size: small;
        margin-top: 0px;
    }
    #TOC {
        font-size: smaller;
        line-height: 1.6;
        position: revert;
        width: auto;
        margin-bottom: 26px;
    }
    #TOC ul li {
        text-align: left;
        float: none;
    }
    #TOC ul li ul {
        display: none;
    }
    #TOC ul li:hover ul {
        display: none;
    }
    .home-btn {
        margin: 7px;
        padding: 3px 7px;
    }
}


/* Print: just max-width body, no toc */
@media print {
    body {
        font-size: x-small;
        max-width: initial;
        margin-left: initial;
    }
    #TOC {
        display: none;
    }
    .home-btn {
        display: none;
    }
}


/* Code, Pre, Blockquotes: Use some nice settings */
code {
    font-family: "Courier New", "Courier", monospace;
    background-color: #f2f2f2;
}
h1 code, h2 code, h3 code, h4 code, nav code, .bsp code,
.tldr code, .bib code, .outcomes code, .quizzes code, .challenges code {
    background-color: inherit;
}

pre {
    padding: 0.5em 0.7em;
    border: 1px dashed #555;
    background-color: #f2f2f2;
    overflow-x: auto;
}

img {
    max-width: 100%;
    height: auto;
}

blockquote {
    margin: 2em 2em 2em 1em;
    padding: 0 .75em 0 1.25em;
    border-left: 1px solid #555;
    font-style: italic;
}


/* Headers: Use some nice settings */
section.level1 {
    border-top: 1px solid #ddd;
}
section.level2 {
    border-bottom: 1px solid #ddd;
    margin-top: 2em;
    margin-bottom: 1.25em;
}

h1 {
    font-size: 2.0em;
    font-weight: bold;
    color: #4070a0;
    text-align: left;
    margin-bottom: 1em;
    margin-top: 1.25em;
}

h2 {
    font-size: 1.4em;
    font-weight: bold;
    color: #4070a0;
    text-align: left;
    margin-bottom: 1em;
    margin-top: 1.25em;
}

h3 {
    font-size: 1.2em;
    font-weight: bold;
    color: #4070a0;
    text-align: left;
    margin-bottom: 1em;
}

h4 {
    font-size: 1.0em;
    color: #4070a0;
    text-align: left;
}

h1 a, h2 a, h3 a, h4 a {
    text-decoration: none;
    color: #4070a0;
}

a {
    color: #4070a0;
}


/* nicer tables */
th {
    background-color: #555;
    color: white;
}
tr:nth-child(even) {background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
tr {vertical-align: top;}
th, td {
    border-bottom: 1px solid #ddd;
}


/* Pandoc: title information */
.title {
    font-size: 2.0em;
    font-weight: bold;
    color: #4070a0;
    text-align: left;
}
.subtitle {
    font-weight: normal;
    font-size: 1.0em;
    color: #4070a0;
    text-align: left;
}
.author {
    font-weight: normal;
    font-size: 1.0em;
    color: #000000;
    text-align: left;
}
.date {
    font-weight: normal;
    font-size: 1.0em;
    color: #000000;
    text-align: left;
}


/* Definitions to match corresponding TeX macros and Lua filters */
.center {
    align-content: center;
    text-align: center;
}
.notes {
}
.alert {
    color: #ff3333;
}
.bsp {
    padding: 0.05cm;
    border-width: 0.05cm;
    border-style: solid;
    border-color: #ddd;
    background-color: #ddd;
    border-radius: 25px;
    float: right;
}
.cbox {
    padding: 0.2cm;
    border-width: 0.1cm;
    border-style: solid;
    border-color: #4070a0;
    background-color: #f2f2f2;
    margin: auto;
    width: 40%;
    text-align: center;
    overflow: auto;
}
.blueArrow {
    color: #4070a0;
    font-family: "Courier New", "Courier", monospace;
    font-weight: bold;
}
.origin {
    background-color: #ededed;
    font-size: 0.8em;
}


/* use some colors to increase readability */
.tldr {
    background: #d9e9d5;
    padding: 12px;
    margin: 4px 0px 26px 0px;
}
.bib {
    background: #dbe4ed;
    padding: 12px;
    margin: 4px 0px 26px 0px;
}
.outcomes {
    background: #dbe4ed;
    padding: 12px;
    margin: 4px 0px 26px 0px;
}
.quizzes {
    background: #d9e9d5;
    padding: 12px;
    margin: 4px 0px 26px 0px;
}
.challenges {
    background: #ebe4d6;
    padding: 12px;
    margin: 4px 0px 26px 0px;
}
h1.tldr, h1.bib, h1.outcomes, h1.quizzes, h1.challenges {
    padding: 0px;
}


/* Allow ShowMe Button to toggle visibility of selected content */
.expandable {
    display: none;
    background: #ddd;
}
.toggle-btn {
    padding: 5px 11px;
    background-color: #ff7;
    border: 1px solid;
    border-radius: 3px;
}
input[id^=toggle] { display: none; }
input[id^=toggle]:checked + .expandable { display: block; border: 1px solid black; }


/* Definitions for a "no JavaScript" alert/message box */
.noJsAlert {
    padding: 20px;
    background-color: #f44336; /* Red */
    color: white;
    margin-bottom: 15px;
}
