/* A definition box contains a definition which is "popped up" to
 * present it when the user clicks on a `glossref` link in the
 * ordinance. It has the structure:
 *
 *      <aside id="dfn_box">
 *          <div id="dfn_wrapper">
 *              <header><h1>the term being defined</h1></header>
 *              <div id="dfn_content><the definition></div>
 *              <footer>navigation links</footer>
 *          </div>
 *      </aside>
 */
#dfn_box {
    width: 70%;
    padding: 0;
    border: 10px solid #898;
    margin: 0 auto;
    background-color: rgba(245, 255, 245, 0.9);
    border-radius: 2em;
    position: fixed;
}
#dfn_wrapper {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 2em;
    box-sizing: border-box;
    background-clip: border-box;
    background-color: transparent;
}
@media (prefers-color-scheme: dark) {
    #dfn_wrapper * { color: black; }
}
#dfn_wrapper > header {
    padding: 0.5em 0;
    margin: 0;
    border-bottom: solid black 2px;
}
#dfn_wrapper > header h1 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 
                "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
                "Cantarell", "Fira Sans","Droid Sans",
                "Helvetica Neue", sans-serif;
    font-size: 1em;
    font-weight: bold;
    font-style: normal;
    text-align: center;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: 0;
}
#dfn_content {
    margin: 0;
    padding: 1em 2em;
}
#dfn_content :first-child {
    margin-top: 0;
    padding-top: 0;
}
#dfn_content :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
#dfn_wrapper footer {
    padding: 0.5em 0;
    margin: 0;
    border-top: solid black 2px;
}
#dfn_wrapper footer li { 
    list-style: none;
    display: block;
    text-align: center;
    margin: 0;
}
#dfn_wrapper footer a { 
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 
                "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
                "Cantarell", "Fira Sans","Droid Sans",
                "Helvetica Neue", sans-serif;
    color: #008;
}
@media (prefers-color-scheme: dark) {
    #dfn_wrapper footer a:hover { 
    color: #ddf;
    }
}
#dfn_content a.glossref {
    color: #0a0;
}
#dfn_content a.glossref:hover {
    background-color: #dfd;
}