/* vim: ts=4 sw=4 et: */

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#page {
    min-width: 240px;
    margin: 0;
    padding: 0;
}

#page-head,
#page-body,
#page-foot {
    clear: both;
    margin: 0;
    padding: 0;
}

#page-body {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 666px) 1fr;
    gap: 0;
    margin: 0 1em;
}

#page-main, #page-side {
    border-width: 0;
}

#page-side {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    max-width: 200px;
    padding-right: 2em;
}

#page-main {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
}



@media screen and (max-width: 550px) {
    #page-body {
        display: block;
    }

    #page-main,
    #page-side {
        width: auto;
        max-width: none;
        padding-right: 0;
    }

    #page-side ul {
        column-count: 2;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -o-column-count: 2;
        -ms-column-count: 2;
    }
}

@media screen and (max-width: 490px) {
    #page-side ul {
        column-count: auto;
        -moz-column-count: auto;
        -webkit-column-count: auto;
        -o-column-count: auto;
        -ms-column-count: auto;
    }
}

.footnote {
    position: relative;
}

.footnote .dagger {
    /*margin-left: -0.1em;*/
    /*width: 0;*/
    display: inline-block;
    color: #0000C0;
    font-weight: bolder;
    font-size: 100%;
    position: relative;
    top: -0.3em;
}

.footnote .dagger:hover + .content {
    display: block; /* Show the content on hover */
}

.footnote .content {
    display: none; /* Initially hide the content */
    position: absolute;
    top: 1.5em; /* Adjust vertical positioning */
    left: 0; /* Adjust horizontal positioning */
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    white-space: normal;
    z-index: 10; /* Ensure it appears on top */
}