body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background-color: #f6f6f6;
    margin: 0;
    padding-top: 75px;
}


.main-container {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,.25),inset 0 0 0 rgba(0,0,0,.1);
    margin-bottom: 0;
    padding: 10px 65px 10px 65px;
}

/*
 * BEGIN Navigation bar
 */
.navbar-default {
    background: #f6f6f6;
}

.navbar-nav {
    margin: 8.5px -15px
}

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 20px
    }
/* END Navigation bar */

/*
 * BEGIN Navigation bar branding
 */
.navbar-default .navbar-brand {
    padding: 12px 15px;
    color: #777;
    font-size: 23px;
    font-weight: 700;
    white-space: nowrap;
}

    .navbar-default .navbar-brand img {
        display: inline-block;
        margin-right: 2px;
        vertical-align: middle;
    }

    .navbar-default .navbar-brand span {
        vertical-align: middle;
    }
/* END Navigation bar branding */

/*
 * BEGIN Navigation menu toggle
 */
.navbar-default .navbar-toggle .icon-bar {
    transition: opacity .35s ease,-webkit-transform .35s ease;
    transition: transform .35s ease,opacity .35s ease;
    transition: transform .35s ease,opacity .35s ease,-webkit-transform .35s ease;
    width: 22px;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-default .navbar-toggle .top-bar {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -moz-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    -o-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
}

.navbar-default .navbar-toggle .middle-bar {
    opacity: 0;
}

.navbar-default .navbar-toggle .bottom-bar {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -moz-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    -o-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
}

.navbar-default .navbar-toggle.collapsed .bottom-bar, .navbar-default .navbar-toggle.collapsed .top-bar {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}

.navbar-default .navbar-toggle.collapsed .middle-bar {
    opacity: 1;
}
/*
 * END Navigation menu toggle
 */

/*
 * BEGIN Footer
 */
footer {
    display: block;
    font-size: 90%;
    margin: 50px 0 30px 0;
}

    footer a {
        color: #2071b8;
    }

    footer h3 {
        border-bottom: none;
        margin: 0 0 10px 0;
    }

    footer ul {
        margin: 0;
    }
/* END FOOTER */

/*
 * BEGIN Navigation buttons
 */
.navigation-button {
}

    .navigation-button .fa {
        padding: 15px;
        color: #d3d3d3;
        transition: all .5s ease;
    }

        .navigation-button .fa:focus, .navigation-button .fa:hover {
            text-decoration: none;
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform: scale(1.5);
        }

/* END Navigation buttons */

/*
 * BEGIN Social media links
 */
.social-links {
    margin-bottom: 8px;
}

    .social-links li:not(:last-of-type) {
        margin-right: 16px;
    }

    .social-links .fa,
    .social-links .fab,
    .social-links .fa-stack {
        color: #d3d3d3;
        transition: all .5s ease;
    }

        .social-links .fa:focus, .social-links .fa:hover,
        .social-links .fab:focus, .social-links .fab:hover,
        .social-links .fa-stack:focus, .social-links .fa-stack:hover {
            text-decoration: none;
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform: scale(1.5);
        }

.fa-twitter:hover, .fa-twitter-square:hover {
    color: #4099ff;
}

.fa-discord:hover, .fa-discord-square:hover {
    color: #738adB;
}

.fa-google-plus:hover, .fa-google-plus-square:hover {
    color: #d34836;
}

.fa-bitbucket:hover {
    color: #0052cc;
}

.fa-flickr:hover {
    color: #0063dc;
}

.fa-rss:hover {
    color: #fe9900;
}

.fa-patreon:hover {
    color: #f96853;
}
/* END Social media links */

@media (min-width:768px) {
    /*
     * BEGIN Footer
     */
    .footer-left, .footer-center, .footer-right {
        border-right: 1px solid #d2d2d2;
        min-height: 55px;
    }

    .footer-left {
        text-align: left;
    }

    .footer-center {
        text-align: center;
    }

    .footer-right {
        border-right: none;
        text-align: right;
    }
    /* END Footer */
}

@media (max-width:767px) {
    .main-container {
        padding: 0 25px;
        box-shadow: none;
    }

    /*
     * BEGIN Footer
     */
    footer {
        margin: 10px;
    }

    .footer-left, .footer-center, .footer-right {
        border-right: none;
        margin-top: 10px;
    }
    /* END Footer */

    /*
     * BEGIN Social media links
     */
    .social-links li:not(:last-child) {
        margin-right: 10px;
    }

    .social-links > li:first-child {
        padding-left: 0;
    }

    .social-links > li > a {
        display: inline-block;
        padding: .5em;
    }
    /* END Social media links */
}

/*
 * Bootstrap 3 hacks
 */
.img-fluid {
    max-width: 100%;
    height: auto;
}



/*
 *
 * RELEASE NOTES / RELEASE LIST
 *
 */

/* Stick the release list to the top of the page... */
/* TODO: height of the navigation bar should be a SCSS variable */
#release-list {
    position: sticky;
    top: 80px !important;
    height: calc(100vh - 80px);
}

/* ... unless width is smaller than md then unstick us from the top, restore our actual height and flow with the rest of the contents */
@media(max-width: 992px) {
    #release-list {
        position: relative;
        top: 0 !important;
        height: auto;
    }
}

/* Make the release list scrollable with a custom scrollbar look (see https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) */
#release-list {
    overflow-y: auto;
    max-height: calc(100vh - 80px);
}

    #release-list > .nav {
        max-height: calc(100vh - 200px);
    }

    #release-list::-webkit-scrollbar {
        width: 5px;
        background-color: #aaa; /* or add it to the track */
    }

    #release-list::-webkit-scrollbar-thumb {
        background: #555;
    }

/* Release list column is hidden by default and shown by 'visible-XXX' Bootstrap classes */
#release-list-navbar {
    display: none;
}

    /* 'Releases' heading offset */
    #release-list-navbar h4 {
        margin-left: 15px
    }

    /* Styling for a regular release */
    #release-list-navbar .nav > li a {
        display: block;
        padding: 8px 15px;
        color: #707070;
        border-left: 1px solid #ccc;
    }

        /* The 'beta' label to the right of a beta release */
        #release-list-navbar .nav > li a .label-beta {
            color: darkred;
            vertical-align: super;
            font-variant: small-caps;
        }

        /* Styling for a hovered release */
        #release-list-navbar .nav > li a:hover {
            background: none;
            color: #444;
            text-decoration: none !important;
            border-color: #0071bc
        }

        /* Styling for a focused release */
        #release-list-navbar .nav > li a:focus {
            background: none
        }

    /* Release text styling (active) */
    #release-list-navbar .nav .active > a {
        color: #0071bc !important;
        font-weight: bold
    }

    /* Active release highlight border */
    #release-list-navbar .nav .active a:before {
        content: "";
        position: absolute;
        top: 0px;
        left: -1px;
        height: 100%;
        border-left: 1px solid #0071bc;
    }

/* The inline release list shown as a dropdown */
.release-inline-list h4 {
    margin-top: 0
}

/*
 *
 * END (RELEASE NOTES / RELEASE LIST)
 *
 */



/*
 *
 * RELEASE NOTES / CONTENTS
 *
 */

/* The center column containing the actual release notes */
.release-notes-contents {
}

    /* Release notes title */
    .release-notes-contents h1 {
        margin-top: 0
    }

    /* Contains the release notes title, image and download links */
    .release-notes-contents header {
    }

        /* Contains the download links (at the bottom of the header above the main body */
        .release-notes-contents header .download-links {
            margin-top: 1rem
        }

            /* Undo Bootstrap styling */
            .release-notes-contents header .download-links li {
                border: 0;
                background-color: revert;
                padding: 0.35rem 1rem;
            }

            /* Give the platform icon + text a fixed width */
            .release-notes-contents header .download-links .platform {
                display: inline-block;
                width: 9rem;
            }

            /* Separate multiple platform releases with an '|' */
            .release-notes-contents header .download-links .links > a:not(:first-child):before {
                content: "|";
            }

    /* Contains the release notes body (rendered by CMS) */
    .release-notes-contents main {
        margin-top: 2rem;
    }

        /* BEGIN - Add a large invisible 'before' pseudo-element to each (section) header to fix scrollspy and intra-page links due to having a fixed top navigation */
        .release-notes-contents main h2::before, .release-notes-contents main h3::before, p a[name]::before {
            content: " ";
            visibility: hidden;
            display: block;
            pointer-events: none;
            padding-top: 50px;
            margin-top: -50px
        }

        .release-notes-contents main h2::before, .release-notes-contents main h3::before {
            padding-top: 70px
        }

        .release-notes-contents main h4 {
            margin-top: 30px
        }
        /* END - Add a large invisible 'before' pseudo-element to each (section) header to fix scrollspy and intra-page links due to having a fixed top navigation */

/*
 *
 * END (RELEASE NOTES / CONTENTS)
 *
 */



/*
 *
 * RELEASE NOTES / TABLE OF CONTENTS
 *
 */

/* Flow the table of contents with the text... */
/* TODO: Investigate affix when moving to Bootstrap 5 "soon"(TM) - https://enverday.com/2015/02/25/bootstrap-better-affix/ */
.release-notes-toc {
    position: static;
    top: 0
}

/* ... unless width is between sm and md in which case it will be sticky */
@media(min-width: 768px) and (max-width: 992px) {
    .release-notes-toc {
        position: fixed;
        top: 70px
    }
}

/* ... unless width is wider than md in which case it will be sticky */
@media(min-width: 992px) {
    .release-notes-toc {
        position: fixed;
        top: 70px;
    }
}

/* Table of contents block offset */
.release-notes-toc {
    padding-top: 15px;
    padding-bottom: 15px;
}

    /* Table of contents title offset */
    .release-notes-toc h4 {
        margin-top: 0;
        margin-left: 10px;
    }



    .release-notes-toc .nav li a {
        color: #707070;
    }

        .release-notes-toc .nav li a:focus {
            background-color: transparent
        }

    .release-notes-toc .nav li a {
        padding: 5px 10px
    }

        .release-notes-toc .nav li a:before {
            content: "§";
            color: #bbb;
            position: absolute;
            font-size: 16px;
            top: .45rem;
            left: 0;
            display: none
        }

        .release-notes-toc .nav li a:hover {
            background: none;
            color: #444
        }

            .release-notes-toc .nav li a:hover:before {
                font-weight: bold;
                display: block
            }


    .release-notes-toc .nav li.active > a {
        color: #0071bc;
        font-weight: bold
    }

        .release-notes-toc .nav li.active > a:before {
            color: #0071bc;
            display: block
        }

    .release-notes-toc .nav li.nav-h2 {
        margin-left: 1.25rem;
    }

    .release-notes-toc .nav li.nav-h3 {
        margin-left: 2.50rem;
    }

/*
 *
 * END (RELEASE NOTES / TABLE OF CONTENTS)
 *
 */