body {
        margin: 0;
        padding: 0;
        font: 12pt 'segoe ui', tahoma, sans-serif
    }

    div.header {
        height: 30px;
        padding: 8px;
        background: gainsboro;
    }

    div.left {
        float: left;
        width: 300px;
        height: calc(100vh - 46px);
        overflow-y: scroll;
    }

    div.filter {
        float: left;
        width: 292px;
    }

    /** Topic Search **/

    div.search {
        position: fixed;
        left: calc(50% + 50px);
    }


    div.copy {
        float: left;
        left: 0px;
    }

    div.resultbox {
        pointer-events: none;
        position: fixed;
        width: 100%;
        padding-left: 150px;
        padding-top: 5px;
    }

    div.result {
        display: none;
        pointer-events: auto;
        margin: auto;
        width: calc(100vw - 340px);
        max-width: 600px;
        height: 300px;
        border: 1px solid whitesmoke;
        border-radius: 4px;
        box-shadow: 2px 2px 16px gainsboro;
        background: white;
        padding: 5pt;
        overflow-y: auto;
    }

    div.result>table {
        width: 100%;
        border-collapse: collapse;
    }

    div.result td {
        padding: 5pt;
    }

    div.result tr:nth-child(odd) {
        background: ghostwhite;
    }

    iframe.main {
        float: right;
        width: calc(100vw - 320px);
        height: calc(100vh - 46px);
        border: 0;
    }

    input.input {
        width: 280px;
        height: 24px;
        padding: 2px;
        border: 0;
        border-radius: 2px;
        background: whitesmoke;
    }

    input.input:focus {
        outline: none;
        background: white;

    }

    input.copy {
        width: 100px;
        padding: 4px 0 5px 0;
        border: none;
        border-radius: 2px;
        border: 0;
        background: whitesmoke;
        cursor: pointer;
        color: dimgray;
    }

    input.copy:hover {
        background: white;
    }

    input.check {
        vertical-align: middle;
        height: 24px;
        width: 24px;
        margin: 0;
    }

    /** Index Pane **/

    h1 {
        margin: 5pt 10pt;
        font-size: 110%;
        color: steelblue
    }

    ul {
        margin: 5pt 0
    }

    ul.chapter {
        border-top: 1px solid gainsboro;
        margin-top: 5pt;
        margin-bottom: -2pt;
        padding-top: 5pt;
    }

    ul.chapter>a {
        color: steelblue;
    }


    li {
        margin-left: 15pt;
        list-style-type: none;
    }

    a,
    a:visited {
        color: #567;
        text-decoration: none;
    }

    a:hover {
        color: #456;
        text-decoration: underline;
    }