verbatim.css

:root {
    --bg: #000;
    --text: #fff;
    --textlo:rgb(210, 210, 200, 0.6);
    --texta: rgba(255, 255, 255, 0.5);
    --bglo: rgb(66, 66, 66);
    --link:rgb(210, 255, 200, 0.6);
    --bghi: #003300;
    --bg2: rgb(102, 102, 102);
    --text2: rgb(33, 33, 33);
    --bgmark: #006600;
    /*
    --bgloa: rgba(255, 255, 255, 0.35);
    --textlo: #666;
    --textinv: #000;
    --bg2a: rgba(102, 102, 102, 0.8);
    --text2hi: #fff;
    --text2inv: #fff;
    --bg3: #f0f0f0;
    --text3: #666;
    */
}
* {
    box-sizing: border-box;
}
html,
body {
    min-height: 100vh;
}


/* default sizing */

input,
button,
table,
td,
code,
dd {
    font-size: inherit;
    font-family: inherit;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

table.table {
    border: 1px solid var(--bghi);
}

table.table td {
    border-bottom: 1px dotted var(--bghi);
    padding: 0;
}

table.table caption {
    background-color: var(--bghi);
    font-weight: bold;
    padding: 0.2em 1em;
}

select::-ms-expand {
    display: none;
}

select {
    /* A reset of styles, including removing the default dropdown arrow */
    /* appearance: none; */
    /* Additional resets for further consistency */
    background-color: transparent;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    border: 2px solid var(--link);
    border-radius: 0.25em;
    padding: 0.25em 0.5em;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}


/* form redesign */

::placeholder {
    color: var(--textlo);
    font-style: italic;
}

label.radio {
    cursor: pointer;
}

input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 0.7em;
    height: 0.7em;
}

button {
    font-family: inherit;
    /* For all browsers */
    font-size: 100%;
    /* For all browsers */
    line-height: 1.15;
    /* For all browsers */
    margin: 0;
    /* Firefox and Safari have margin */
    overflow: visible;
    /* Edge hides overflow */
    text-transform: none;
    /* Firefox inherits text-transform */
    -webkit-appearance: button;
    /* Safari otherwise prevents some styles */
}

button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring {
    outline: none;
}

button,
.button {
    border: 2px solid var(--bglo);
    border-radius: 0.25em;
    background: var(--bg2);
    color: var(--bglo);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    padding: 0.2em 0.5em;
    cursor: pointer;
}

button:hover,
.button:hover {
    border-color: var(--bg);
    color: var(--link);
}

input#cts {
    width: 22em;
}


/*
input[type=radio] {
    accent-color: var(--link);
}
*/


/* layout 
#all
    #header
    #content
    #footer

*/

#all {
    min-height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#content {
    flex-grow: 4;
    position: relative;
    padding: 0 0 5rem 0;
}

@media (min-width: 992px) {
    body {
        font-size: 14px;
    }
    /*
    .container {
        max-width: 900px;
    }
    */
}

@media (min-width: 1200px) {
    body {
        font-size: 16px;
    }
    /*
    .container {
        max-width: 1100px;
    }
    */
}

@media (min-width: 1500px) {
    body {
        font-size: 18px;
    }
    .container {
        max-width: 1400px;
    }
}


/* centering content for default */

#content .container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


/* align left the reader to sho page */

.tlg #content .container {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
}

#footer {
    width: 100%;
    background-color: var(--bg2);
    color: var(--text2);
}

body {
    font-family: sans-serif;
    background-color: var(--bglo);
    color: var(--text);
    margin: 0;
    padding: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


/* Global layout */

html,
body {
    height: 100%;
    position: relative;
}

body {
    overflow-y: scroll;
}


/* */

div.banner {
    position: relative;
}

div.banner img.banner {
    display: block;
    width: 100%;
}

div.banner .moto,
div.banner .titles {
}

div.banner .titles {
    /* position: absolute; */
    padding: 1vw 2vw 1vw 2vw;
    position: relative;
}

div.banner .title {
    font-size: 3vw;
    font-weight: bold;
    line-height: 100%;
}

div.banner .titlesub {
    font-size: 2.5vw;
    font-style: italic;
}

div.banner .moto {
    font-size: 2.2vw;
    line-height: 100%;
    font-weight: bold;
    bottom: 1vw;
    right: 1vw;
    padding: 0.5ex 1em;
}

#header {
    background-color: var(--bglo);
    color: var(--textlo);
    text-shadow: var(--bg) 1px 1px 5px;
}

#page {
    position: relative;
    margin: 2rem 2rem;
}

#aside {
    background-color: var(--bg3);
    color: var(--text3);
    padding: 1rem 0 1rem 1rem;
}


/*
main article {
    width: 100%;
}
#main {
    background-color: var(--bg);
    color: var(--text);
    position: relative;
}

#main>header {
    padding: 1rem;
    background-color: var(--link);
    color: var(--bg);
    position: relative;
    position: -webkit-sticky;
    position: sticky;
}

#main>header h1 {
    margin: 0;
}

.tlg article {
    padding: 0;
}

main>article.text {
    padding: 3vw;
}
*/


/** simple tags */

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 16px;
    height: 60px;
    font-variant: small-caps;
    font-weight: bold;
}

#tabs form {
    text-align: center;
    padding: 0 1ex;
}

#tabsep {
    border-color: transparent;
    margin: 1em 0 1em 0;
}

nav.tabs {
    background-color: var(--bg2);
    color: var(--text2);
    display: flex;
    justify-content: space-around;
    padding: 0.5em 1em 0 1em;
}

nav.tabs a,
nav.tabs {
    color: var(--text2);
}

input[type=radio] {
    border: 2px solid var(--text2);
}

input[type=radio]:checked {
    border-color: var(--bg);
    background-color: var(--link);
}

nav.tabs a.tab {
    display: flex;
    justify-content: center;
    text-decoration: none;
    padding: 0.2rem 0.5rem 0.7rem 0.5rem;
    text-align: center;
    width: 100%;
}

a.tab > span {
    text-align: center;
}

nav.tabs form.selected,
nav.tabs a.tab.selected,
nav.tabs a.tab:hover {
    background-color: var(--bglo);
    color: var(--text);
    text-decoration: none;
}

nav.tabs form.selected input[type=radio] {
    border-color: var(--bg2);
}

nav.tabs form.selected input[type=radio]:checked {
    border-color: var(--bg2);
}

form.qform div {
    white-space: nowrap;
    text-align: center;
}

textarea:focus,
input:focus {
    outline: none;
}


/*
form.qform input.q {
    width: 25ex;
    border: none;
    padding: 4px 1ex 3px 1ex;
}
*/

#logos {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

#logos>* {
    display: block;
    text-align: center;
    width: 100%;
    padding: 1rem;
}

#logos>* img {
    display: inline-block;
    height: 80px;
}

#logos>*:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.kwict {
    padding-left: 15em;
}

.kwicl {
    width: 30em;
    display: inline-block;
    text-align: right;
    padding-right: 0.5em;
}

mark {
    background-color: var(--bgmark);
    color: var(--text);
    padding: 0 1ex;
}

p {
    text-indent: 2rem;
    margin: 0;
}

div.lg {
    margin: 1rem 0 1rem 2rem;
}

div.lg div.l {
    margin: 0;
}


/* biblio */

span.editor {
    color: var(--link);
}


/* doc.php */

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul ul {
    margin-left: 1rem;
}

nav a {
    text-decoration: none;
}

.ed1page,
.ed2page,
.noteref,
.pb,
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

span.pb[data-page]::before,
span.lb::before {
    white-space: pre;
    content: '\A';
}

p>span.lb:first-child::before,
div.l>span.lb:first-child::before {
    content: '';
}

span.lb[data-line]::after,
span.lb.rule[data-line]::before {
    box-sizing: border-box;
    text-indent: 0;
    font-size: 0.7rem;
    font-weight: normal;
    display: inline-block;
    content: attr(data-line) " ";
    width: 2rem;
    padding-left: 1ex;
    color: var(--textlo);
}

/*
span.pb[data-line]::before {
    display: block;
    content: ' ';
}
*/


span.lb[data-line]:target::after {
    background-color: var(--link);
    color: #000;
}

html {
    scroll-padding-top: 120px;
}

nav.toc,
div.toc {
    background-color: var(--bg3);
    color: var(--bg2);
    padding: 1em 0 10vh 0;
}

nav>a,
div.toc>a {
    display: block;
    text-align: left;
    text-decoration: none;
    color: var(--bg2);
}

div.toc a {
    padding: 0.1rem 0.2rem 0.1rem 0;
    display: block;
}

nav.bibl>a {
    padding: 0.1rem 0.1rem 0.1rem 0.5rem;
    text-indent: -1.5rem;
    padding-left: 2rem;
}

nav>a.selected,
nav>a:hover,
div.toc a:hover {
    background-color: var(--bg);
    color: var(--text);
    text-decoration: none;
}

div.toc a.selected {
    background-color: var(--bg);
    color: var(--text);
}

div.toc a.selected:hover {
    color: var(--link);
}

a small {
    color: var(--text);
}

.text.doc {
    width: 40em;
    background-color: var(--bg);
    color: var(--text);
    position: relative;
    padding: 1rem;
}

header.opus {
    background-color: var(--bg3);
    padding: 1rem 0.5rem 0.7rem 0.5rem;
}

header.doc {
    padding: 0;
    margin: 0;
    background-color: var(--bglo);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

header.doc > * {
    padding: 0.5rem 0;
}

header.doc > div {
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
    min-height: 3rem;
    color: var(--text);
}

header.doc section {
    margin: 0;
}

a.prevnext {
    padding: 0rem 0.5rem;
    font-size: 2.5rem;
    line-height: 110%;
    width: 3rem;
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
}

a.prevnext.next {
    text-align: right;
    justify-content: flex-end;
}

a.prevnext>* {
    /*
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    */
}

a.prevnext:hover {
    background-color: var(--bg);
}

footer.doc {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

footer.doc a.prevnext:hover {
    background-color: var(--bg3);
}

footer.doc>* {
    width: 100%;
}

footer.doc a.next {
    text-align: right;
    display: block;
}

div.text {
    background-color: var(--bg);
    padding: 5rem 0 5rem 1em;
}


/* generated title */

#navs nav>h2,
div.doc>h1 {
    background-color: var(--bg2);
    color: var(--bg);
    margin: 0;
    padding: 0.5rem 2rem;
    text-align: center;
    font-size: 85%;
    font-weight: 500;
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
}


/** for anchor links */

h1.title * {
    color: inherit;
}

h1 {
    text-align: center;
    color: var(--link);
}

h1 a {
    color: inherit;
    text-decoration: none;
}

div.reader {
    position: relative;
    display: flex;
}

.reader .toc {
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow: auto;
    min-width: 10rem;
}

.reader .doc {
    flex-shrink: 0;
}

.reader #pagimage {
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
}

.reader #pagimage>div {
    flex-grow: 5;
}

#pagimage header {
    display: flex;
    background-color: var(--bg3);
    text-align: center;
}

#pagimage header > div {
    padding: 0.5rem 1rem;
}

#pagimage header > .prev,
#pagimage header > .next {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0.5rem;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--link);
    cursor: pointer;
}

header > .prev:hover,
header > .next:hover {
    background-color: var(--bg);
}

#viewcont>img {
    width: 50px;
}

.viewer-move {
    display: block !important;
    width: auto !important;
}

.viewer-backdrop {
    background-color: var(--bg2);
    /* background-color: rgba(0, 0, 0, 50%); */
}


/*
.viewer-fixed {
    background-color: transparent;
}
*/

.viewer-title a {
    color: var(--bg) !important;
}

.viewer-title a::after {
    background-color: transparent !important;
}

div.reader div.prev,
div.reader div.next {
    width: 5rem;
}

div.reader div.prev a,
div.reader div.next a {
    display: table-cell;
    vertical-align: middle;
    font-size: 10rem;
    text-decoration: none;
    color: #ccc;
    height: 100%;
    position: fixed;
}

div.reader div.prev a:hover,
div.reader div.next a:hover {
    background-color: #fff;
}


/** Concordance */

div.conc {
    background-color: var(--bg);
}

div.conc header {
    padding: 1rem;
}

h4.doc {
    margin: 0.5rem 0;
    font-weight: normal;
}

h4.doc a {
    display: block;
    padding: 0 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--link);
}

h4.doc a * {
    color: inherit;
}

h4.doc a:hover {
    background-color: var(--link);
    color: var(--bg);
}


/* white ?
.doc a:hover {
    color: var(--text2hi);
}
*/


/** table of words */

table.freqs {
    margin-top: 3vw;
    background-color: var(--bg);
}

td.cts {
    white-space: nowrap;
}

td.no,
td.nb {
    text-align: right;
    font-size: 85%;
    color: var(--textlo);
    padding-right: 3px;
}

td.cts a,
td.orth a,
td.lem a {
    display: block;
    text-decoration: none;
    padding: 0.2em 0.5em;
}

td.orth a:hover,
td.lem a:hover {
    color: var(--bg);
    background-color: var(--link);
}


/** Static texts */

.container>article,
article.table,
article.text {
    margin-top: 3vw;
    padding: 3vw;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bg);
}

article.text {
    max-width: 80ex;
}

article.table table {
    margin-left: auto;
    margin-right: auto;
}

article.text p {
    text-align: justify;
}

section.footnotes {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

hr.footnotes {
    width: 15%;
    text-align: left;
    text-align: -moz-left;
    margin-right: auto;
    margin-left: 0;
}

.note:target::after {
    display: inline-block;
    content: "☞";
    font-size: 16px;
    position: absolute;
    top: 0;
    left: -16px;
}

.note:target {
    background-color: #FFFFEE;
}

.note {
    line-height: 1.25;
    font-size: 90%;
    margin: 1px 0 1rem 0;
    clear: both;
}

blockquote {
    margin: 0.5rem 0rem 0.5rem 2rem;
}

blockquote.lemma {
    padding: 0;
    margin: 0;
}

.note p {
    margin: 0;
    line-height: inherit;
    text-indent: 1rem;
    text-indent: 1rem;
}

.note p.noindent,
.note p.autofirst {
    text-indent: 0;
}

p.note {
    text-indent: 0;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.notes-abc,
.notes-123,
.notes-misc {
    margin-top: 0.5rem;
}

.note-page {
    font-size: 0.8rem;
}

.note-margin-left {
    float: left;
    margin-left: -2rem;
    margin-right: 0.5rem;
}

a.noteref {
    font-size: 60%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.4em;
}

a.noteref sup {
    font-size: 100%;
}

a.noteref,
a.noteback {
    font-family: sans-serif;
    text-decoration: none;
    border-bottom: none;
    font-style: normal;
    font-variant: normal;
    padding-right: .1em;
    /* note sep */
}

a.noteback {
    font-size: 85%;
}

a.external {
    color: var(--link3);
    text-indent: 0;
}

a.external:hover::after {
    content: ' ';
    display: inline-block;
    position: absolute;
    background-color: var(--bg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: top 20% left 0;
    padding-right: 1.2ex;
    background-image: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9" class="icon_svg-stroke" stroke="%239c652e" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
}

/* viewer override */

.viewer-width::before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
    background-size: 280px;
    color: transparent;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    width: 20px;
}

.viewer-width::before {
    background-position: -180px 0;
    content: "Image width";
}

.viewer-reset::before {
    background-position: -200px 0;
    content: "Image height";
}

label.head {
    font-weight: bold;
}