html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
a, a:visited, a:hover, a:active {
    color: inherit;
}

.ignored-chunk {
}

/* We should be able to use flex for this, but browsers don't seem to handle scrolling
 * usably with flexbox: browser back just doesn't seem to work.  So, this is done an
 * old, ugly way. */
.left {
    float: left;
    position: fixed;
    background-color: #E0E0E0;
    height: 100%;
    width: 300px;
    /*
    min-width: 200px;
    max-width: 300px;
    */
    display: inline-block;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px 0 10px 0;
}
.right {
    box-sizing: border-box;
    padding: 10px;
}
body.hide-index .left {
    display: none;
}
body:not(.hide-index) .right {
    margin-left: 300px; /* 300 for .left width + 10px for padding */
}

body.hide-index .right {
/*    padding-left: 10px;*/
}

.left > .section {
    font-size: 20px;
    color: #FFFFFF;
    background-color: #000000;
    padding: 5px 10px 5px 10px;
    margin: 10px 0 10px 0;
}

.left > .index-link {
    display: block;
    padding: 0 10px 0 10px;
}
.disasm {
    table-layout: fixed;
    width: 100%;

    /* We should be trying to wrap everywhere we need to.  If some corner cases are missed, don't let one
     * long line add a horizontal scrollbar to the whole output. */
    overflow: hidden;
}

.disasm thead th:nth-child(1) {
    width: 100px;
}

.disasm .section {
    background-color: #000000;
    color: #FFFFFF;
    padding: 5px 10px 5px 10px;
}

.disasm thead th:nth-child(2) {
    width: 300px;
/*    background-color: #FF00FF;*/
    padding: 0 10px 0 10px;
/*    width: 20%;
    max-width: 50px;    */
}
.disasm thead th:nth-child(3) {
}
.disasm thead th:nth-child(4) {
}
.disasm tr td.col1 {
    max-width: 400px;
}

.highlighted {
    background-color: #F8EEC8;
}
.disasm .symbol-type-data { color: #008080; }
.disasm .symbol-type-code { color: #4040FF; }
.disasm .symbol-type-ram { color: #404000; }
.disasm .symbol-type-local { color: #808080; }
.disasm .constant { color: #FF00FF; }
.disasm .comment, .disasm .block-comment { color: #008000; }

.disasm .symbol-type-ram { background-color: #EEE; }

.disasm .block-comment {
    font-size: 20px;
    margin: 20px 0 20px 0;
    display: inline-block;
    max-width: 600px;
    white-space: pre-line;
}
.addr-address, .addr-segment {
    color: #606060;
}

.index-link, .symbol-reference {
    text-decoration: none;
}
/* This applies to code both in the disassembly view and xrefs. */
.code {
    white-space: pre;
}
.disasm .code {
    padding-left: 100px;
}
.struct-type, .enum-value, .addr-address, .addr-segment, .label, .data, .code {
    font-family: consolas;
}
@keyframes flash {
    0% {
        background-color: #FFFF00;
    }
    100% {
        background-color: #FFFFFF;
    }
}

.click-flash {
    animation-name: flash;
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

#hover {
    z-index: 1;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 400px;
    height: 400px;
}

.disasm .selected {
    background: #00C0C0;
}
#hover .xref-addr {
    text-decoration: none;
}
#hover .hover-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
}
#hover .hover-header {
    display: flex;
    box-sizing: border-box;
    padding: 2px 5px;
    background-color: #000000;
}
#hover .hover-symbol {
    flex: 1;
    min-width: 0;    
    overflow: hidden; /* https://css-tricks.com/flexbox-truncated-text/ */
    color: #FFFFFF;
    font-family: consolas;
}
#hover .hover-close-button {
}
#hover .hover-xref-header {
    padding: 15px 5px 5px 5px;
}
#hover .hover-comment {
    padding: 5px;
    white-space: pre-wrap;
}
#hover .hover-xref-list {
    font-family: consolas;
    font-size: 12px;
}
#hover .xref-entry {
    /* These are handled specially, since they can partially contain links in the code
     * snippets but we actually want the xrefs to go to the place containing the snippet.
     * It would be nicer to replace those links so these links work normally, but this
     * isn't done right now. */
    cursor: pointer;
}
#hover .xref-snippet {
    white-space: pre;
}