html, body {
    font-family: "Open Sans", sans-serif;
    color: #333;
}

@media only screen {
    /* Light theme */
    .light .sidebar {
        border-right: 1px solid rgba(0, 0, 0, 0.07);
        background-color: #fafafa;
        color: #364149;
    }
    .light .page-wrapper {
        background: none repeat scroll 0 0 #FFF;
    }
    .light .chapter li .active,
    .light .chapter li a:hover {
        /* Animate color change */
        color: #008cff;
    }
    .light .menu-bar,
    .light .nav-chapters {
        color: #CCC;
    }
    .light .chapter li a,
    .light .menu-bar i:hover,
    .light .nav-chapters:hover {
        /* Animate color change */
        color: #333;
    }
    .light .content a {
        color: #4183c4;
    }
    /* Theme changer */
    .light .theme-popup {
        background: #fafafa;
        border: 1px solid #ccc;
    }
    .light .theme-popup .theme:hover {
        background-color: #e6e6e6;
    }

    /* Coal theme */
    .coal {
        color: #98a3ad;
        background-color: #141617;
    }
    .coal .sidebar {
        background-color: #292c2f;
        color: #a1adb8;
    }
    .coal .chapter li .active,
    .coal .chapter li a:hover {
        /* Animate color change */
        color: #3473ad;
    }
    .coal .menu-bar,
    .coal .nav-chapters {
        color: #43484d;
    }
    .coal .chapter li a,
    .coal .menu-bar i:hover,
    .coal .nav-chapters:hover {
        color: #b3c0cc;
    }
    .coal .content a {
        color: #2b79a2;
    }
    /* Theme changer */
    .coal .theme-popup {
        background: #141617;
        border: 1px solid #43484d;
    }
    .coal .theme-popup .theme:hover {
        background-color: #1f2124;
    }
    /* Dark blue colored theme */
    .navy {
        background-color: #161923;
        color: #bcbdd0;
    }
    .navy .sidebar {
        background-color: #282d3f;
        color: #c8c9db;
    }
    .navy .chapter li .active,
    .navy .chapter li a:hover {
        /* Animate color change */
        color: #2b79a2;
    }
    .navy .menu-bar,
    .navy .nav-chapters {
        color: #737480;
    }
    .navy .chapter li a,
    .navy .menu-bar i:hover,
    .navy .nav-chapters:hover {
        color: #b7b9cc;
    }
    .navy .content a {
        color: #2b79a2;
    }
    /* Theme changer */
    .navy .theme-popup {
        background: #161923;
        border: 1px solid #737480;
    }
    .navy .theme-popup .theme:hover {
        background-color: #282e40;
    }
    /* Rust theme */
    .rust {
        background-color: #e1e1db;
        color: #262625;
    }
    .rust .sidebar {
        background-color: #3b2e2a;
        color: #c8c9db;
    }
    .rust .chapter li .active,
    .rust .chapter li a:hover {
        /* Animate color change */
        color: #e69f67;
    }
    .rust .menu-bar,
    .rust .nav-chapters {
        color: #737480;
    }
    .rust .chapter li a {
        color: #bfbfba;
    }
    .rust .menu-bar i:hover,
    .rust .nav-chapters:hover {
        color: #262625;
    }
    .rust .content a {
        color: #2b79a2;
    }
    /* Theme changer */
    .rust .theme-popup {
        background: #e1e1db;
        border: 1px solid #b38f6b;
    }
    .rust .theme-popup .theme:hover {
        background-color: #99908a;
    }
    .sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        overflow-y: auto;
        padding: 10px 10px;
        font-size: 14px;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;

        /* Animation: slide away */
        -webkit-transition: left 0.5s; /* Safari */
        -o-transition: left 0.5s; /* Opera */
        -moz-transition: left 0.5s; /* Mozilla Firefox */
        transition: left 0.5s;
    }

    .page-wrapper {
        position: absolute;
        overflow-y: auto;
        left: 315px;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;

        min-height: 100%;

        /* Animation: slide away */
        -webkit-transition: left 0.5s; /* Safari */
        -o-transition: left 0.5s; /* Opera */
        -moz-transition: left 0.5s; /* Mozilla Firefox */
        transition: left 0.5s;
    }

    .page {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;

        padding-right: 15px;
        overflow-y: auto;
    }

    .content {
        margin-left: auto;
        margin-right:auto;
        max-width: 750px;
        padding-bottom: 50px;
    }

    .chapter {
        list-style: none outside none;
        padding-left: 0;
        line-height: 30px;
    }

    .section {
        list-style: none outside none;
        padding-left: 20px;
        line-height: 40px;
    }

    .section li {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .chapter li a {
        padding: 5px 0;
        text-decoration: none;
    }

    .chapter li a:hover {
        text-decoration: none;
    }

    .chapter .affix {

    }

    .chapter .spacer {
        width: 100%;
        height: 3px;
        background-color: #f4f4f4;
        margin: 10px 0px;
    }

    .menu-bar {
        position: relative;
        height: 50px;
    }

    .menu-bar i {
        position: relative;
        margin: 0 10px;
        z-index: 10;
        line-height: 50px;
        -webkit-transition: color 0.5s; /* Safari */
        -o-transition: color 0.5s; /* Opera */
        -moz-transition: color 0.5s; /* Mozilla Firefox */
        transition: color 0.5s;
    }

    .menu-bar .left-buttons {
        float: left;
    }

    .menu-bar .right-buttons {
        float: right;
    }

    .menu-bar i:hover {
        cursor: pointer;
    }

    .menu-title {
        display: inline-block;
        font-weight: 200;
        font-size: 20px;
        line-height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        margin: 0;

        opacity: 0;
        -webkit-transition: opacity 0.5s ease-in-out; /* Safari */
        -o-transition: opacity 0.5s ease-in-out; /* Opera */
        -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */
        transition: opacity 0.5s ease-in-out;
    }

    .menu-bar:hover .menu-title {
        opacity: 1;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    /* Content */

    .content a {
        text-decoration: none;
    }

    .content a:hover {
        text-decoration: underline;
    }

    /* Nav icons */
    .nav-chapters {
        font-size: 40px;
        text-align: center;
        text-decoration: none;

        position: absolute;
        top: 50px; /* Height of menu-bar */
        bottom: 0;
        margin: 0;
        max-width: 150px;
        min-width: 90px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;

        -webkit-transition: color 0.5s; /* Safari */
        -o-transition: color 0.5s; /* Opera */
        -moz-transition: color 0.5s; /* Mozilla Firefox */
        transition: color 0.5s;
    }

    .mobile-nav-chapters { display: none; }

    .nav-chapters:hover {
        text-decoration: none;
    }

    .previous {
        left: 0;
    }

    .next {
        right: 0;
    }


    /* Theme Popup */
    .theme-popup {
        position: fixed;
        left: -40px;

        border-radius: 4px;

        font-size: 0.7em;
    }

    .theme-popup .theme {
        margin: 0;
        padding: 2px 10px;
        line-height: 25px;
        white-space: nowrap;
    }
}


@media only screen and (max-width: 1060px) {
    .sidebar {
        left: -300px;
    }
    .page-wrapper {
        left: 15px;
        padding-right: 15px;
    }
}

/* Fix the navigation arrows that collapsed with the text on smaller screens */

@media only screen and (max-width: 1250px) {
    /* Light theme */
    .light .mobile-nav-chapters {
        background-color: #E0E0E0;
        color: #999;
    }
    .light .mobile-nav-chapters i:hover {
        color: #333;
    }
    /* Coal theme */
    .coal .mobile-nav-chapters {
        background-color: #212426;
        color: #43484d;
    }
    .coal .mobile-nav-chapters i:hover {
        color: #b3c0cc;
    }
    /* Navy theme */
    .navy .mobile-nav-chapters {
        background-color: #242838;
        color: #737480;
    }
    .navy .mobile-nav-chapters i:hover {
        color: #b7b9cc;
    }
    /* Rust theme */
    .rust .mobile-nav-chapters {
        background-color: #4d413d;
        color: #737480;
    }
    .rust .mobile-nav-chapters i:hover {
        color: #b7b9cc;
    }
    .nav-chapters {
        display: none;
    }

    .mobile-nav-chapters {
        font-size: 40px;
        text-align: center;
        text-decoration: none;

        max-width: 150px;
        min-width: 90px;

        justify-content: center;
        align-content: center;

        position: relative;
        display: inline-block;
        margin-bottom: 50px;

        border-radius: 5px;
    }

    .next {
        float: right;
    }

    .previous {
        float: left;
    }
}

@media only print {
    .sidebar, .menu-bar, .nav-chapters, .mobile-nav-chapters {
      display: none;
    }

    .page-wrapper {
      left: 0;
    }

    .content {
      max-width: 100%;
    }

    code {
      background-color: #666666;
      border-radius: 5px;

      /* Force background to be printed in Chrome */
      -webkit-print-color-adjust: exact;
    }

    a, a:visited, a:active, a:hover {
      color: #4183c4;
      text-decoration: none;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-inside: avoid;
        page-break-after: avoid;
        /*break-after: avoid;*/
    }

    pre, code {
        page-break-inside: avoid;
        white-space: pre-wrap;       /* CSS 3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }
}