body { margin: 0; padding: 0; font-family: sans-serif; }
table { border-collapse: collapse; }
input[type="text"] { padding: 2px 2px 3px 2px; }

.link1 a:visited, .link1 a:link { color: lightyellow; text-decoration: none; }
.link1 a:hover { color: red; text-decoration: underline; }

.outer { display: grid; grid-template-areas:
    "header header"
    "nav section"
    "footer footer"; grid-template-rows: auto 1fr auto; grid-template-columns: 320px 1fr; height: 100vh; }

header, nav, section, footer { }
.head { grid-area: header; background-color: steelblue; padding: 0.2rem 0.5rem; }
  .head table { width: 100%; }
  .head td:nth-child(1) { color: white; }
  .head td:nth-child(2) { font-size: 200%; color: white; }
  .head td:nth-child(3) { text-align: right; }

.nav { grid-area: nav; background-color: ghostwhite; overflow-y: auto; padding: 3px; }
  .nav ul { margin: 0; padding: 0; }
  .nav li { list-style: none; margin: 0; cursor: pointer; font-family: monospace; font-size: 90%; }
.sel-block { background-color: PowderBlue; }

.sect { grid-area: section; background-color: slategray; overflow: auto; }
.busy-outer { padding: 1rem; margin: 2rem auto auto auto; text-align: center; border: 1px solid darkred; background-color: snow; width: 30rem; font-size: 150%; color: darkred; }
.char-tab { margin: 1rem auto auto auto; text-align: center; background-color: white; }
  .char-tab th { }
  .char-tab td { }
  .char-tab th, .char-tab td { padding: 0.2rem 0.5rem; min-width: 4rem; border: 1px solid gray; }
  .char-tab td { }
    .char-tab td div:nth-child(1) { font-size: 300%; }
    .char-tab td div:nth-child(2) { font-size: 90%; font-family: monospace; padding-top: 2px; }
.no-glyph { background-color: gainsboro; }
.ctl { background-color: lightcyan; }
.surrog { background-color: mistyrose; }
.no-glyph, .ctl { color: slategray; }
.trunc { text-align: center; color: yellow; }

.foot { grid-area: footer; background-color: steelblue; padding: 0.2rem 0.5rem; }
  .foot td:nth-child(1) { color: whitesmoke; }
  .foot td:nth-child(2) { color: white; padding-left: 0.6rem; }
  .foot td:nth-child(3) { color: white; padding-left: 2rem; }
  .foot td:nth-child(4) { color: gainsboro; padding-left: 2rem; font-family: Verdana,sans-serif; font-size: 85%; }
.down-btn { padding: 0.2rem 1rem; }