#table-of-contents {
    position: fixed;
    top: 0;
    left: 0;
    width: $toc-width;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    background: $color-background-dark;
    z-index: 200;

    // Table of Contents Header
    h2 {
        color: $color-text-invert;
        background-color: $color-primary;
        text-align: center;
        padding: 1em;
        display: block;
        font-size: 1rem;
        z-index: 200;
    }

    // Links to Headers
    a {
        display: block;
        position: relative;
        line-height: 1.5em;
        font-size: 0.9rem;
        color: $color-text-shadow;

        &:hover{
            background-color: $color-background-med;
            cursor:pointer;
        }
    }

    .close-sidebar {
        display: none;
    }

    // ToC Items
    li {
        list-style: none;
        margin-left: 0px;
    }

    // Reduce margins
    ul {
        margin-bottom: 0;
    }

    // Identation of headings
    li {
        // First level Headings
        a{ padding: 0.4em 1.6em; }
        ul li {
            // Second level Headings
            a{ padding: 0.4em 2.4em; }
            ul li {
                // Third
                a { padding:0.4em 3.0em; }
                ul li {
                    // Fourth
                    a { padding:0.4em 3.6em; }
                }
            }
        }
    }
    // Do not display tags in the ToC
    .tag {
        display: none;
    }

    @media (max-width: 768px) {
        display: none;
        width: 60%;
        box-shadow: -25px 0px 10px 32px $black;

        &:target {
            display: block;
        }

        .close-sidebar {
            color: $color-text-invert;
            display: block;
            margin-left: 10px;
            float: right;
            &:hover {
                background-color: $color-primary;
            }
        }
    }
}









// Additionnal things to order

ul.nav li ul li {
    display: none;
}

ul.nav li ul li ul li {
    display: none;
}

ul.nav li.active ul li {
    display: inline;
}

ul.nav li.active ul li ul li {
    display: inline;
}

ul.nav li.active ul li a {
    background-color: #E3E3E3;
    color: #8099B0;
    border-right:solid 1px #c9c9c9 !important;
}

ul.nav li.active ul li.active a {
    background-color: #C9C9C9;
    color: black !important;
    font-weight: bold !important;
}

ul.nav li.active ul li.active ul li.active a {
    color: black !important;
    font-weight: bold !important;
    display: block !important;
}

ul.nav li.active ul li.active ul li a {
    color: #808080 !important;
    font-weight: normal !important;
    display: block !important;
}

ul.nav li.active ul li ul li a {
    display: none !important;
}

ul.nav li ul li ul li ul li {
    display: none !important;
}

ul.nav li.active > a {
    border-bottom:solid 1px #c9c9c9 !important;
    border-right:solid 1px #c9c9c9 !important;
}

ul.nav li.active a {
    color: gray !important;
    font-weight:bold;
    background-color: white;
    border-right:solid 0px white !important;
}

ul.nav > li.active > a {
    color: black !important;
}

#toggle-sidebar {
    display: none;
}






li {
    &.divide-top {
        border-top:solid 1px #404040;
    }

    &.divide-bottom {
        border-bottom:solid 1px #404040;
    }

    &.current {
        background:#e3e3e3;

        a {
            color: gray;
            border-right: solid 1px #c9c9c9;
            padding: 0.4045em 2.427em;
            &:hover{
                background: #d6d6d6;
            }
        }
    }

    a {
        // padding:0.4045em 1.618em;
        position:relative;
        border:none;
        padding-left:1.618em -4px;
    }

    &.on a:hover {
        background: #fcfcfc;
    }
    &.current>a:hover{
        background: #fcfcfc;
    }
}



li.current ul{
    display:block;
}


.local-toc li ul{
    display:block;
}


li ul li a{
    margin-bottom:0;
    color:#b3b3b3;
    font-weight:normal;
}


@media (max-width: 768px) {
    #copyright, #postamble {
        display: none;
    }

    #toggle-sidebar {
        display: block;
        margin-bottom: 1.6em;
        padding: 1.0em;
        text-align: center;

        h2 {
            position:fixed;
            width:100%;
            left:0;
            top:0;
            color: $color-text-invert;
            background-color: $color-primary;
            text-align: center;
            padding: 1em;
            display: block;
            font-size: 1rem;
            z-index: 20;
        }
    }
}