.docs {
    $toc-width: 320px;

    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;

    @media (max-width: 991px) {
        font-size: 16px;
    }

    p {
        margin-bottom: .8em;

        img {
            max-width: 100%;
        }
    }

    pre {
        margin: 15px 0;
        word-wrap: normal;

        code {
            overflow: auto;
            white-space: pre;
        }
    }
    .row {
        margin: 0px;
    }

    /*
     * Used to style the platform logos in xml references. Uses the mark element
     * because we hijack the markdown highlight syntax using js (e.g. ==android==).
     * See www/static/js/docs.js
     */
    mark {
        display: inline-block;
        height:30px;
        background-color: #ffffff;
    }

    mark.logo {
        background-image:url('{{ site.baseurl }}/static/img/platform-logos-all-sprite.svg');
        width:35px;
        background-size: 385px 35px;
    }

    mark.android    { background-position: 0 }
    mark.ios        { background-position: 10%; }
    mark.windows    { background-position: 20%; }
    mark.blackberry { background-position: 30%; }
    mark.ubuntu     { background-position: 40%; }
    mark.firefox    { background-position: 50%; }
    mark.webos      { background-position: 60%; }
    mark.fireos     { background-position: 70%; }
    mark.osx        { background-position: 80.8%; }
    mark.browser    { background-position: 92.2%; }

    .sub-header {
        color: #6d6d6d;
        font-size: 9pt;
        display: block;
        min-width: 120px;
        font-weight: 300;
    }

    .site-toc-title {
        font-weight: 300;
        font-size: 22px;
        text-transform: uppercase;
    }

    /* outer ToC for the site */
    .site-toc-container {
        position: fixed;
        top: 50px;
        left: 0;
        height: calc(100% - 50px);
        width: $toc-width;
        overflow-y: scroll;
        overflow-x: hidden;
        background: $gray-85;

        .site-toc {
            padding: 10px 15px;

            li {
                list-style: none;
            }

            > li {
                font-size: 16px;
                padding-top: 0.05em;
                line-height: 30px;
                a {
                    color: white;
                    display: block;
                    padding: 0 50%;
                    margin: 0 -50%;

                    &.this-page {
                        font-weight: bold;
                        background-color: $brand-primary-darker;
                    }
                }
            }
            .toc-section-heading {
                font-size: 18px;
                font-weight: 600;
                text-transform: uppercase;
                margin: 0.3em 0em 0.3em 0em;
                display: block;
                color: $brand-primary;
            }

            /* NOTE: this is not a mistake; .site-toc gets nested inside itself */
            .site-toc {
                padding: 0 0 0 10px;

                .toc-section-heading {
                    font-size: 16px;
                    font-weight: 600;
                    text-transform: none;
                }
            }
        }

        // Only the top level table of contents
        > .site-toc {
            > li {
                margin-bottom: 1rem;
            }
        }
    }

    .page-content-container {
        margin-left: $toc-width;
        width: calc(100% - #{$toc-width});

        @media (max-width: 991px) {
            margin-left: 0;
            width: 100%;
        }

        .page-content {
            width: 960px;
            max-width: 100%;
            margin: 0 auto 50px;
            padding: 0 50px;

            @media (max-width: 991px) {
                padding: 0 15px;
            }

            .header-link {
                position: relative;
                left: 0.5em;
                opacity: 0;
                font-size: 0.7em;

                transition: opacity 0.2s ease-in-out 0.1s;
            }
            h1:hover .header-link,
            h2:hover .header-link,
            h3:hover .header-link,
            h4:hover .header-link,
            h5:hover .header-link,
            h6:hover .header-link {
                opacity: 1;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #2C7185;
            }
            h1 {
                font-size: 42px;
                font-weight: 300;
            }
            h2 {
                color: #D60C3F;
                font-size: 30px;
                font-weight: 300;
            }
            h3 {
                font-size: 22px;
            }
            h3, h4, h5, h6 {
                font-weight: 600;
            }
            h4 {
                margin-top: 20px;
            }
            h5 {
                margin-top: 16px;
            }
        }
    }

    /* inner ToC for the page */
    .page-toc ul {
        padding: 0px;
    }
    .page-toc ul > li {
        padding: 0.05em 0em 0.05em 1em;
        font-size: 14px;
        font-weight: 300;
    }
    .page-toc ul > li.toc-active {
        font-weight: bold;
    }

    /* Quick fix to remove redundant TOC entries */
    .page-toc li:first-of-type {
        display: none;
    }

    /* header above page content */
    .content-header {
        text-align: right;
        margin-top: 22px;

        /* this trick sets spacing _between_ items in .content-header, but _not inside_ them */
        word-spacing: 0.3em;
        * {
            word-spacing: 0em;
        }

        .alert {
            text-align: left;
        }
        .dropdown, .edit {
            margin-top: 0.3em;
            margin-bottom: 0.3em;
            display: inline-block;
        }
        .edit {
            line-height: 32px;
        }
        .dropdown.toc-dropdown {
            text-align: center;
            width: 100%;
            button {
                width: 100%;
            }
        }
        .dropdown {
            .dropdown-menu {
                left: inherit;
                right: 0;
            }
            .selected {
                font-weight: bold;
                font-style: italic;
            }
            button.dropdown-toggle {
                border-radius: 4px;
                background-color: rgb(214, 214, 214);
                &:hover {
                    background-color: rgb(191, 191, 191);
                }
            }
        }
    }
    .alert.alert-warning.alert-dismissible {
        margin-top: 15px;
    }

    /* missing page highlight */
    .missing-page {
        color: gray !important;
    }

    table {
        @extend .table;
        @extend .table-bordered;
        margin: 20px 0;
    }

    .docs-alert {
        margin-top: 22px;
    }

    /* Formatting for compatibility table on plugin docs page */
    .compat {
        td {
            text-align: center;
            border-width: 2px;
            border-style: solid;
            border-color: white;
            padding:2px;
        }
        th {
            text-align: center;
        }

        /* Not compataible (pink with X) */
        .n::before {
            margin-right: 5px;
            content: "\2718";
        }
        .n {
            background-color: pink;
            margin-right: 5px;
        }

        /* Is compataible (green with check) */
        .y::before {
            margin-right: 5px;
            content: "\2714";
        }
        .y {
            background-color: lightgreen;
        }

        /* Partially compataible */
        .p {
            background-color: khaki;
        }
    }

    .hooks {
        td[data-col="description"] {
            text-align: left;
            vertical-align: middle;
        }
        td[rowspan="2"], th[colspan="3"], td[data-col="code"] {
            text-align: center;
            vertical-align: middle;
        }
        td[data-col="description"] {
            text-align: left;
            vertical-align: middle;
        }
    }

    /* Styling for the /docs/language/version/index.html pages */
    .home {
        h1 {
            border-bottom: 1px solid #919395;
            font-size: 37px !important;
        }
        h2 {
            padding: 0px;
            display: block;
            font-size: 27px !important;
        }
        .summary {
            font-size: 14px;
            height: 60px;
            display: inline-block;
        }
        ul {
            margin: 0px;
            padding: 0px;
        }
        ul li {
            display: inline-block;
            vertical-align: top;
            list-style: none;
            margin: 0px 15px;
            width: 250px;
        }
    }

    /* Styling for old /docs/language/version/index.html pages */
    #old-home {
        h1 {
            border-bottom: 1px solid #919395;
            padding-bottom: 20px;
            margin: 30px 0px;
        }
        h2 {
            font-weight: normal;
            margin: 0px 0px 10px 0px;
            padding: 0px;
            display: block;
            font-size: 18px;
            color: #266172;
        }
        h2:after {
            content: '';
        }
        span {
            font-size: 14px;
        }
        ul {
            float: left;
            margin: 0px;
            padding: 0px;
        }
        ul li {
            float: left;
            list-style: none;
            margin-bottom: 20px;
            padding: 0px 20px;
            width: 240px;
            height: 120px;
        }
    }

    footer {
        font-size: 14px;
    }
}

@media (max-width: $screen-sm-max) {
    .header-link {
        opacity: 1 !important;
    }
}

/* Workaround for the spacing on the Russian /docs/ru/version/index.html pages */
html[lang="ru"] .docs .home .summary {
    height: 100px;
}
html[lang="ru"] .docs #old-home ul li {
    height: 160px;
}