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

@media only screen {
    .sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        overflow-y: auto;
        border-right: 1px solid rgba(0, 0, 0, 0.07);
        padding: 10px 10px;
        font-size: 14px;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        background-color: #fafafa;
        color: #364149;

        /* 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;
        background: none repeat scroll 0 0 #FFF;
        -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 {
        color: #AAA;
    }

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

    .chapter li .active {
        color: #008cff;
    }

    .chapter li a:hover {
        /* Animate color change */
        color: #008cff;
        text-decoration: none;
    }

    .chapter .affix {

    }

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

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

    .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 .right-buttons {
        float: right;
    }

    .menu-bar :hover {
        /* Animate color change */
        color: #333;
    }

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

    .menu-title {
        color: #7E7E7E;
        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 {
        color: #7E7E7E;
        opacity: 1;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    /* Content */

    .content a {
        color: #4183c4;
        text-decoration: none;
    }

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

    /* Nav icons */
    .nav-chapters {
        color: #CCC;
        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 {
        color: #333;
        text-decoration: none;
    }

    .previous {
        left: 0;
    }

    .next {
        right: 0;
    }
}


@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) {
    .nav-chapters {
        display: none;
    }

    .mobile-nav-chapters {
        color: #CCC;
        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;
        background-color: #E0E0E0;
        color: #999;
    }

    .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+ */
    }
}