#+TITLE:       doc_reform defaults css
#+DESCRIPTION: documents - structuring, publishing in multiple formats & search
#+FILETAGS:    :doc_reform:output:xmls:css:
#+AUTHOR:      Ralph Amissah
#+EMAIL:       [[mailto:ralph.amissah@gmail.com][ralph.amissah@gmail.com]]
#+COPYRIGHT:   Copyright (C) 2015 - 2019 Ralph Amissah
#+LANGUAGE:    en
#+STARTUP:     indent content hideblocks hidestars
#+OPTIONS:     H:3 num:nil toc:t \n:nil @:t ::t |:t ^:nil _:nil -:t f:t *:t <:t
#+OPTIONS:     TeX:t LaTeX:t skip:nil d:nil todo:t pri:nil tags:not-in-toc
#+OPTIONS:     author:nil email:nil creator:nil timestamp:nil
#+PROPERTY:    header-args :padline no :exports code :cache no :noweb yes
#+EXPORT_SELECT_TAGS:  export
#+EXPORT_EXCLUDE_TAGS: noexport
#+TAGS: assert(a) class(c) debug(d) mixin(m) doc_reform(s) tangle(T) template(t) WEB(W) noexport(n)

- [[./doc_reform.org][doc_reform]]  [[./][org/]]
- [[./output_hub.org][output_hub]]

* 0. output css defaults                  :module:doc_reform:output_xmls_css:
** 0. module template

#+BEGIN_SRC d :tangle "../src/doc_reform/output/xmls_css.d"
/++
  default css settings
+/
module doc_reform.output.xmls_css;
template DocReformCss() {
  auto DocReformCss() {
    string _css_light_html_seg="
<<css_light_shared>>
<<css_light_html_seg>>
";
    string _css_dark_html_seg="
<<css_dark_shared>>
<<css_dark_html_seg>>
";
    string _css_light_html_scroll="
<<css_light_shared>>
<<css_light_html_scroll>>
";
    string _css_dark_html_scroll="
<<css_dark_shared>>
<<css_dark_html_scroll>>
";
    string _css_light_epub="
<<css_light_shared>>
<<css_light_epub>>
";
    string _css_dark_epub="
<<css_dark_shared>>
<<css_dark_epub>>
";
    struct _CSS {
      auto light() {
        struct _light {
          auto html_seg() {
            string _css = "/* DocReform css html seg stylesheet */\n" ~ _css_light_html_seg;
            return _css;
          }
          auto html_scroll() {
            string _css = "/* DocReform css html scroll stylesheet */\n" ~ _css_light_html_scroll;
            return _css;
          }
          auto epub() {
            string _css = "/* DocReform css epub stylesheet */\n" ~ _css_light_epub;
            return _css;
          }
        }
        return _light();
      }
      auto dark() {
        struct _dark {
          auto html_seg() {
            string _css = "/* DocReform css html seg stylesheet */\n" ~ _css_dark_html_seg;
            return _css;
          }
          auto html_scroll() {
            string _css = "/* DocReform css html scroll stylesheet */\n" ~ _css_dark_html_scroll;
            return _css;
          }
          auto epub() {
            string _css = "/* DocReform css epub stylesheet */\n" ~ _css_dark_epub;
            return _css;
          }
        }
        return _dark();
      }
      }
    return _CSS();
  }
}
#+END_SRC

** css light theme
*** html shared
**** general

#+name: css_light_shared
#+BEGIN_SRC css
  *{
    padding: 0px;
    margin: 0px;
  }
  body {
    height: 100vh;
    background-color: #FFFFFF;
  }
  body {
    color:#000000;
    background: #FFFFFF;
    background-color: #FFFFFF;
  }
#+END_SRC

**** link

#+name: css_light_shared
#+BEGIN_SRC css
  a:link {
    color: #003399;
    text-decoration: none;
  }
  a:visited {
    color: #003399;
    text-decoration: none;
  }
  a:hover {
    color: #000000;
    background-color: #F9F9AA;
  }
  a.lnkocn:link {
    color: #777777;
    text-decoration: none;
  }
  a.lnkocn:visited {
    color: #003399;
    text-decoration: none;
  }
  a:hover img {
    background-color: #FFFFFF;
  }
  a:active {
    color: #003399;
    text-decoration: underline;
  }
#+END_SRC

**** div

#+name: css_light_shared
#+BEGIN_SRC css
  div {
    margin-left: 0;
    margin-right: 0;
  }
  div.p {
    margin-left: 5%;
    margin-right: 1%;
  }
  div.substance {
    width: 100%;
    background-color: #FFFFFF;
  }
  div.ocn {
    width: 5%;
    float: right;
    top: 0;
    background-color: #FFFFFF;
  }
  div.endnote {
    width: 95%;
    background-color: #FFFFFFf;
  }
  div.toc {
    position: absolute;
    float: left;
    margin: 0;
    padding: 0;
    padding-top: 0.5em;
    border: 0;
    width: 13em;
    background-color: #EEEEEE;
    margin-right:1em;
  }
  div.summary {
    margin: 0;
    padding: 0;
    border-left: 13em solid #EEEEEE;
    padding-left: 1em;
    background-color: #EEEEEE;
  }
  div.content, div.main_column {
    margin: 0;
    padding: 0;
    border-left: 13em solid #FFFFFF;
    padding-left: 1em;
    padding-right: 1em;
  }
  div.content0, div.main_column0 {
    margin: 0;
    padding: 0;
    border-left: 0% solid #FFFFFF;
    padding-left: 5%;
  }
  div.scroll {
    margin: 0;
    padding: 0;
    padding-left: 1em;
    padding-right: 1em;
  }
  div.content:after {
    content:' ';
    clear:both;
    display:block;
    height:0;
    overflow:hidden
  }
  div.footer {
    clear:left;
    padding: 0.5em;
    font-size: 80%;
    margin: 0;
  }
  div.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  div.toc li ul a, li ul span.currentlink
  {
    font-weight: normal;
    font-size: 90%;
    padding-left: 2em;
    background-color: #EEEEEE;
  }
  div.toc a, span.currentlink{
    display:block;
    text-decoration: none;
    padding-left: 0.5em;
    color: #0000aa;
  }
  hr {
    width: 90%;
    margin-left: 5%;
    margin-right: 2em;
    margin-top: 1.8em;
    margin-bottom: 1.8em;
  }
  span.currentlink {
    text-decoration: none;
    background-color: #AAAAAA;
  }
  div.toc a:visited {
    color: #0000aa;
  }
  div.toc a:hover {
    color: #000000;
    background-color: #F9F9AA;
  }
  nav#toc ol {
    list-style-type: none;
  }
#+END_SRC

**** paragraphs headings blocks
***** misc

#+name: css_light_shared
#+BEGIN_SRC css
  .norm, .bold, .verse, .group, .block, .alt {
    line-height: 133%;
    margin-top: 12px;
    margin-bottom: 0px;
    padding-left: 0em;
    text-indent: 0em;
  }
  p, h0, h1, h2, h3, h4, h5, h6, h7, ul, li {
    display: block;
    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
    margin-left: 5%;
    margin-right: 2em;
  }
  p {
    font-size: 100%;
    font-weight: normal;
    line-height: 133%;
    text-align: justify;
    text-indent: 0mm;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
  }
#+END_SRC

#+name: css_light_shared
#+BEGIN_SRC css
  img { max-width: 100%; height: auto; }
#+END_SRC

***** code block

#+name: css_light_shared
#+BEGIN_SRC css
  pre {
    width: auto;
    display: block;
    clear: both;
    color: #555555;
  }
  p.code {
    border-style: none;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 5px #AAAAAA inset;
    margin-bottom: 1em;
    padding: 0.5em 1em;
    page-break-inside: avoid;
    word-wrap: break-word;
    font-family: inconsolata, \"liberation mono\", \"bitstream vera mono\", \"dejavu mono\", monaco, consolas, \"andale mono\", \"courier new\", \"courier 10 pitch\", courier, monospace;
    white-space: pre;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    background-color: #EEEEEE;
    color: #000000;
    font-size: 95%;
    line-height: 100%;
  }
#+END_SRC

***** paragraph general

#+name: css_light_shared
#+BEGIN_SRC css
  p.spaced { white-space: pre; }
  p.block {
    white-space: pre;
  }
  p.group { }
  p.alt { }
  p.verse {
    white-space: pre;
    margin-bottom: 6px;
  }
  p.caption {
    text-align: left;
    font-size: 80%;
    display: inline;
  }
  p.endnote {
    font-size: 96%;
    line-height: 120%;
    text-align: left;
    margin-right: 15mm;
  }
  p.endnote_indent {
    font-size: 96%;
    line-height: 120%;
    text-align: left;
    margin-left: 2em;
    margin-right: 15mm;
  }
  p.center {
    text-align: center;
  }
  p.bold {
    font-weight: bold;
  }
  p.bold_left {
    font-weight: bold;
    text-align: left;
  }
  p.centerbold {
    text-align: center;
    font-weight: bold;
  }
  p.em {
    font-weight: bold;
    font-style: normal;
    background: #FFF3b6;
  }
  p.small {
    font-size: 80%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 6px;
    text-align: left;
  }
  .tiny, .tiny_left, .tiny_right, .tiny_center {
    font-size: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #777777;
    margin-right: 6px;
    text-align: left;
  }
  p.tiny { }
  p.tiny_left {
    margin-left: 0px;
    margin-right: 0px;
    text-align: left;
  }
  p.tiny_right {
    margin-right: 1em;
    text-align: right;
  }
  p.tiny_center {
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
  }
  p.concordance_word {
    line-height: 150%;
    font-weight: bold;
    display: inline;
    margin-top: 4px;
    margin-bottom: 1px;
  }
  p.concordance_count {
    font-size: 80%;
    color: #777777;
    display: inline;
    margin-left: 0em;
  }
  p.concordance_object {
    font-size: 80%;
    line-height: 120%;
    text-align: left;
    margin-left: 3em;
    margin-top: 1px;
    margin-bottom: 3px;
  }
  p.book_index_lev1 {
    line-height: 100%;
    margin-top: 4px;
    margin-bottom: 1px;
  }
  p.book_index_lev2 {
    line-height: 100%;
    text-align: left;
    margin-left: 3em;
    margin-top: 1px;
    margin-bottom: 3px;
  }
  tt {
    font-family: inconsolata, \"liberation mono\", \"bitstream vera mono\", \"dejavu mono\", monaco, consolas, \"andale mono\", \"courier new\", \"courier 10 pitch\", courier, monospace;
    background-color: #EEEEEE;
    color: #000000;
  }
#+END_SRC

***** paragraph indent

#+name: css_light_shared
#+BEGIN_SRC css
  /* indent */
  p.norm { }
  p.i1 { padding-left: 1em; }
  p.i2 { padding-left: 2em; }
  p.i3 { padding-left: 3em; }
  p.i4 { padding-left: 4em; }
  p.i5 { padding-left: 5em; }
  p.i6 { padding-left: 6em; }
  p.i7 { padding-left: 7em; }
  p.i8 { padding-left: 8em; }
  p.i9 { padding-left: 9em; }
  /* hanging indent */
  p[indent=\"h0i0\"] {
    padding-left: 0em;
    text-indent:  0em;
  }
  p[indent=\"h0i1\"] {
    padding-left: 1em;
    text-indent: -1em;
  }
  p[indent=\"h0i2\"] {
    padding-left: 2em;
    text-indent: -2em;
  }
  p[indent=\"h0i3\"] {
    padding-left: 3em;
    text-indent: -3em;
  }
  p[indent=\"h0i4\"] {
    padding-left: 4em;
    text-indent: -4em;
  }
  p[indent=\"h0i5\"] {
    padding-left: 5em;
    text-indent: -5em;
  }
  p[indent=\"h0i6\"] {
    padding-left: 6em;
    text-indent: -6em;
  }
  p[indent=\"h0i7\"] {
    padding-left: 7em;
    text-indent: -7em;
  }
  p[indent=\"h0i8\"] {
    padding-left: 8em;
    text-indent: -8em;
  }
  p[indent=\"h0i9\"] {
    padding-left: 9em;
    text-indent: -9em;
  }
  p[indent=\"h1i0\"] {
    padding-left: 0em;
    text-indent:  1em;
  }
  p[indent=\"h1i1\"] {
    padding-left: 1em;
    text-indent:  0em;
  }
  p[indent=\"h1i2\"] {
    padding-left: 2em;
    text-indent: -1em;
  }
  p[indent=\"h1i3\"] {
    padding-left: 3em;
    text-indent: -2em;
  }
  p[indent=\"h1i4\"] {
    padding-left: 4em;
    text-indent: -3em;
  }
  p[indent=\"h1i5\"] {
    padding-left: 5em;
    text-indent: -4em;
  }
  p[indent=\"h1i6\"] {
    padding-left: 6em;
    text-indent: -5em;
  }
  p[indent=\"h1i7\"] {
    padding-left: 7em;
    text-indent: -6em;
  }
  p[indent=\"h1i8\"] {
    padding-left: 8em;
    text-indent: -7em;
  }
  p[indent=\"h1i9\"] {
    padding-left: 9em;
    text-indent: -8em;
  }
  p[indent=\"h2i0\"] {
    padding-left: 0em;
    text-indent:  2em;
  }
  p[indent=\"h2i1\"] {
    padding-left: 1em;
    text-indent:  1em;
  }
  p[indent=\"h2i2\"] {
    padding-left: 2em;
    text-indent:  0em;
  }
  p[indent=\"h2i3\"] {
    padding-left: 3em;
    text-indent: -1em;
  }
  p[indent=\"h2i4\"] {
    padding-left: 4em;
    text-indent: -2em;
  }
  p[indent=\"h2i5\"] {
    padding-left: 5em;
    text-indent: -3em;
  }
  p[indent=\"h2i6\"] {
    padding-left: 6em;
    text-indent: -4em;
  }
  p[indent=\"h2i7\"] {
    padding-left: 7em;
    text-indent: -5em;
  }
  p[indent=\"h2i8\"] {
    padding-left: 8em;
    text-indent: -6em;
  }
  p[indent=\"h2i9\"] {
    padding-left: 9em;
    text-indent: -7em;
  }
  p[indent=\"h3i0\"] {
    padding-left: 0em;
    text-indent:  3em;
  }
  p[indent=\"h3i1\"] {
    padding-left: 1em;
    text-indent:  2em;
  }
  p[indent=\"h3i2\"] {
    padding-left: 2em;
    text-indent:  1em;
  }
  p[indent=\"h3i3\"] {
    padding-left: 3em;
    text-indent:  0em;
  }
  p[indent=\"h3i4\"] {
    padding-left: 4em;
    text-indent: -1em;
  }
  p[indent=\"h3i5\"] {
    padding-left: 5em;
    text-indent: -2em;
  }
  p[indent=\"h3i6\"] {
    padding-left: 6em;
    text-indent: -3em;
  }
  p[indent=\"h3i7\"] {
    padding-left: 7em;
    text-indent: -4em;
  }
  p[indent=\"h3i8\"] {
    padding-left: 8em;
    text-indent: -5em;
  }
  p[indent=\"h3i9\"] {
    padding-left: 9em;
    text-indent: -6em;
  }
  p[indent=\"h4i0\"] {
    padding-left: 0em;
    text-indent:  4em;
  }
  p[indent=\"h4i1\"] {
    padding-left: 1em;
    text-indent:  3em;
  }
  p[indent=\"h4i2\"] {
    padding-left: 2em;
    text-indent:  2em;
  }
  p[indent=\"h4i3\"] {
    padding-left: 3em;
    text-indent:  1em;
  }
  p[indent=\"h4i4\"] {
    padding-left: 4em;
    text-indent:  0em;
  }
  p[indent=\"h4i5\"] {
    padding-left: 5em;
    text-indent: -1em;
  }
  p[indent=\"h4i6\"] {
    padding-left: 6em;
    text-indent: -2em;
  }
  p[indent=\"h4i7\"] {
    padding-left: 7em;
    text-indent: -3em;
  }
  p[indent=\"h4i8\"] {
    padding-left: 8em;
    text-indent: -4em;
  }
  p[indent=\"h4i9\"] {
    padding-left: 9em;
    text-indent: -5em;
  }
  p[indent=\"h5i0\"] {
    padding-left: 0em;
    text-indent:  5em;
  }
  p[indent=\"h5i1\"] {
    padding-left: 1em;
    text-indent:  4em;
  }
  p[indent=\"h5i2\"] {
    padding-left: 2em;
    text-indent:  3em;
  }
  p[indent=\"h5i3\"] {
    padding-left: 3em;
    text-indent:  2em;
  }
  p[indent=\"h5i4\"] {
    padding-left: 4em;
    text-indent:  1em;
  }
  p[indent=\"h5i5\"] {
    padding-left: 5em;
    text-indent:  0em;
  }
  p[indent=\"h5i6\"] {
    padding-left: 6em;
    text-indent: -1em;
  }
  p[indent=\"h5i7\"] {
    padding-left: 7em;
    text-indent: -2em;
  }
  p[indent=\"h5i8\"] {
    padding-left: 8em;
    text-indent: -3em;
  }
  p[indent=\"h5i9\"] {
    padding-left: 9em;
    text-indent: -4em;
  }
  p[indent=\"h6i0\"] {
    padding-left: 0em;
    text-indent:  6em;
  }
  p[indent=\"h6i1\"] {
    padding-left: 1em;
    text-indent:  5em;
  }
  p[indent=\"h6i2\"] {
    padding-left: 2em;
    text-indent:  4em;
  }
  p[indent=\"h6i3\"] {
    padding-left: 3em;
    text-indent:  3em;
  }
  p[indent=\"h6i4\"] {
    padding-left: 4em;
    text-indent:  2em;
  }
  p[indent=\"h6i5\"] {
    padding-left: 5em;
    text-indent:  1em;
  }
  p[indent=\"h6i6\"] {
    padding-left: 6em;
    text-indent:  0em;
  }
  p[indent=\"h6i7\"] {
    padding-left: 7em;
    text-indent: -1em;
  }
  p[indent=\"h6i8\"] {
    padding-left: 8em;
    text-indent: -2em;
  }
  p[indent=\"h6i9\"] {
    padding-left: 9em;
    text-indent: -3em;
  }
  p[indent=\"h7i0\"] {
    padding-left: 0em;
    text-indent:  7em;
  }
  p[indent=\"h7i1\"] {
    padding-left: 1em;
    text-indent:  6em;
  }
  p[indent=\"h7i2\"] {
    padding-left: 2em;
    text-indent:  5em;
  }
  p[indent=\"h7i3\"] {
    padding-left: 3em;
    text-indent:  4em;
  }
  p[indent=\"h7i4\"] {
    padding-left: 4em;
    text-indent:  3em;
  }
  p[indent=\"h7i5\"] {
    padding-left: 5em;
    text-indent:  2em;
  }
  p[indent=\"h7i6\"] {
    padding-left: 6em;
    text-indent:  1em;
  }
  p[indent=\"h7i7\"] {
    padding-left: 7em;
    text-indent:  0em;
  }
  p[indent=\"h7i8\"] {
    padding-left: 8em;
    text-indent: -1em;
  }
  p[indent=\"h7i9\"] {
    padding-left: 9em;
    text-indent: -2em;
  }
  p[indent=\"h8i0\"] {
    padding-left: 0em;
    text-indent:  8em;
  }
  p[indent=\"h8i1\"] {
    padding-left: 1em;
    text-indent:  7em;
  }
  p[indent=\"h8i2\"] {
    padding-left: 2em;
    text-indent:  6em;
  }
  p[indent=\"h8i3\"] {
    padding-left: 3em;
    text-indent:  5em;
  }
  p[indent=\"h8i4\"] {
    padding-left: 4em;
    text-indent:  4em;
  }
  p[indent=\"h8i5\"] {
    padding-left: 5em;
    text-indent:  3em;
  }
  p[indent=\"h8i6\"] {
    padding-left: 6em;
    text-indent:  2em;
  }
  p[indent=\"h8i7\"] {
    padding-left: 7em;
    text-indent:  1em;
  }
  p[indent=\"h8i8\"] {
    padding-left: 8em;
    text-indent:  0em;
  }
  p[indent=\"h8i9\"] {
    padding-left: 9em;
    text-indent: -1em;
  }
  p[indent=\"h9i0\"] {
    padding-left: 0em;
    text-indent:  9em;
  }
  p[indent=\"h9i1\"] {
    padding-left: 1em;
    text-indent:  8em;
  }
  p[indent=\"h9i2\"] {
    padding-left: 2em;
    text-indent:  7em;
  }
  p[indent=\"h9i3\"] {
    padding-left: 3em;
    text-indent:  6em;
  }
  p[indent=\"h9i4\"] {
    padding-left: 4em;
    text-indent:  5em;
  }
  p[indent=\"h9i5\"] {
    padding-left: 5em;
    text-indent:  4em;
  }
  p[indent=\"h9i6\"] {
    padding-left: 6em;
    text-indent:  3em;
  }
  p[indent=\"h9i7\"] {
    padding-left: 7em;
    text-indent:  2em;
  }
  p[indent=\"h9i8\"] {
    padding-left: 8em;
    text-indent:  1em;
  }
  p[indent=\"h9i9\"] {
    padding-left: 9em;
    text-indent:  0em;
  }
#+END_SRC

***** misc including tables & lists

#+name: css_light_shared
#+BEGIN_SRC css
  note { white-space: pre; }
  label.ocn {
    width: 2%;
    float: right;
    top: 0;
    font-size: 10px;
    margin-top: 0px;
    margin-bottom: 5px;
    color: #777777;
    margin-right: 5px;
    text-align: right;
    background-color: #FFFFFF;
  }
  table {
    display: block;
    margin-left: 5%;
    margin-right: 2em;
    background-color: #FFFFFF;
  }
  tr { }
  th,td {
    vertical-align: top;
    text-align: left;
  }
  th {
    font-weight: bold;
  }
  em {
    font-weight: bold;
    font-style: italic;
  }
  p.left,th.left,td.left {
    text-align: left;
  }
  p.small_left,th.small_left,td.small_left {
    text-align: left;
    font-size: 80%;
  }
  p.right,th.right,td.right {
    text-align: right;
  }
  ul, li {
    list-style-type: none;
    list-style: none;
    padding-left: 20px;
    font-weight: normal;
    line-height: 150%;
    text-align: left;
    text-indent: 0mm;
    margin-left: 1em;
    margin-right: 2em;
    margin-top: 3px;
    margin-bottom: 3px;
  }
  li {
    background: url(../image_sys/bullet_09.png) no-repeat 0px 6px;
  }
  ul {
  }
#+END_SRC

***** headings

#+name: css_light_shared
#+BEGIN_SRC css
  h0, h1, h2, h3, h4, h5, h6, h7 {
    font-weight: bold;
    line-height: 120%;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  h4.norm, h5.norm, h6.norm, h7.norm {
    margin-top: 10px;
    margin-bottom: 0px;
  }
  h0 { font-size: 125%; }
  h1 { font-size: 120%; }
  h2 { font-size: 115%; }
  h3 { font-size: 110%; }
  h4 { font-size: 105%; }
  h5 { font-size: 100%; }
  h6 { font-size: 100%; }
  h7 { font-size: 100%; }
  h0, h1, h2, h3, h4, h5, h6, h7 { text-shadow: .2em .2em .3em #808080; }
  h1.i { margin-left: 2em; }
  h2.i { margin-left: 3em; }
  h3.i { margin-left: 4em; }
  h4.i { margin-left: 5em; }
  h5.i { margin-left: 6em; }
  h6.i { margin-left: 7em; }
  h7.i { margin-left: 8em; }
  h8.i { margin-left: 9em; }
  h9.i { margin-left: 10em; }
  .toc {
    font-weight: normal;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  h0.toc {
    margin-left: 1em;
    font-size: 120%;
    line-height: 150%;
  }
  h1.toc {
    margin-left: 1em;
    font-size: 115%;
    line-height: 150%;
  }
  h2.toc {
    margin-left: 2em;
    font-size: 110%;
    line-height: 140%;
  }
  h3.toc {
    margin-left: 3em;
    font-size: 105%;
    line-height: 120%;
  }
  h4.toc {
    margin-left: 4em;
    font-size: 100%;
    line-height: 120%;
  }
  h5.toc {
    margin-left: 5em;
    font-size: 95%;
    line-height: 110%;
  }
  h6.toc {
    margin-left: 6em;
    font-size: 90%;
    line-height: 110%;
  }
  h7.toc {
    margin-left: 7em;
    font-size: 85%;
    line-height: 100%;
  }
  .subtoc {
    margin-right: 34%;
    font-weight: normal;
  }
  h5.subtoc {
    margin-left: 2em;
    font-size: 80%;
    margin-top: 2px;
    margin-bottom: 2px;
  }
  h6.subtoc {
    margin-left: 3em;
    font-size: 75%;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  h7.subtoc {
    margin-left: 4em;
    font-size: 70%;
    margin-top: 0px;
    margin-bottom: 0px;
  }
#+END_SRC

*** html seg
**** previous next

#+name: css_light_html_seg
#+BEGIN_SRC css
  .icon-bar {
    width: 100%;
    overflow: auto;
    margin: 0em 0em 0em;
  }
  .left-bar {
    width: 85%;
    float: left;
    display: inline;
    overflow: auto;
  }
  .toc-button {
    position: absolute;
    top: 8px;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #CCCCCC;
    fill: #333333;
    box-shadow: 0 2px 5px #AAAAAA inset;
  }
  .toc-button svg {
    position: relative;
    left: 25%;
    top: 25%;
    width: 150%;
    height: 150%;
  }
  .toc-button p {
    vertical-align: center;
    font-size: 120%;
  }
  .prev-next-button {
    position: absolute;
    top: 8px;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #CCCCCC;
    box-shadow: 0 2px 5px #AAAAAA inset;
  }
  .prev-next-button svg {
    position: relative;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
  }
  .menu {
    right: 6em;
   }
  .previous {
    right: 3em;
   }
  .next {
    right: 0em;
   }
  .arrow { fill: #333333; }
  .minitoc {
    line-height: 100%;
    font-size: 90%;
    margin-top: 6px;
    margin-bottom: 0px;
    padding-left: 0em;
    text-indent: 0em;
  }
#+END_SRC

**** flex

#+name: css_light_html_seg
#+BEGIN_SRC css
  /* flex */
  .flex-menu-bar {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    margin-left: 5%;
    margin-right: 2%;
    background-color: #FFFFFF;
  }
  .flex-menu-option {
    background-color:#FFFFFF;
    margin-right: 4px;
  }
  .flex-list {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    display: block;
    align-items: center;
    width: 100%;
    background-color: #FFFFFF;
  }
  .flex-list-item {
    background-color:#FFFFFF;
    margin: 4px;
  }
#+END_SRC

**** TODO grid

Consider what if anything should be used here

#+name: css_light_html_seg
#+BEGIN_SRC css
  /* grid */
  .wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
      \"headband\"
      \"doc_header\"
      \"doc_title\"
      \"doc_toc\"
      \"doc_prefix\"
      \"doc_intro\"
      \"doc_body\"
      \"doc_endnotes\"
      \"doc_glossary\"
      \"doc_biblio\"
      \"doc_bookindex\"
      \"doc_blurb\"
      \"doc_suffix\";
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
  }
  .delimit {
    border-style: none;
    border-color:#FFFFFF;
    padding: 10px;
  }
  .headband {
    grid-area: headband;
    background-color: #FFFFFF;
  }
  .doc_header {
    grid-area: doc_header;
  }
  .doc_title {
    grid-area: doc_title;
  }
  .doc_toc {
    grid-area: doc_toc;
  }
  .doc_prefix {
    grid-area: doc_prefix;
  }
  .doc_intro {
    grid-area: doc_intro;
  }
  .doc_body {
    grid-area: doc_body;
  }
  .doc_endnotes {
    grid-area: doc_endnotes;
  }
  .doc_glossary {
    grid-area: doc_glossary;
  }
  .doc_biblio {
    grid-area: doc_biblio;
  }
  .doc_bookindex {
    grid-area: doc_bookindex;
  }
  .doc_blurb {
    grid-area: doc_blurb;
  }
  .doc_suffix {
    grid-area: doc_suffix;
  }
  .nav-ul {
    list-style: none;
    float: left;
  }
  .nav-li {
    float: left;
    padding-right: 0.7em;
  }
  .nav-li a {
    text-decoration: none;
    color:#FFFFFF;
  }
  footer {
    background-color: #00704E;
  }
#+END_SRC

*** html scroll
**** flex

#+name: css_light_html_scroll
#+BEGIN_SRC css
  /* flex */
  .flex-menu-bar {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    margin-left: 5%;
    margin-right: 2%;
    background-color: #FFFFFF;
  }
  .flex-menu-option {
    background-color:#FFFFFF;
    margin-right: 4px;
  }
  .flex-list {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    display: block;
    align-items: center;
    width: 100%;
    background-color: #FFFFFF;
  }
  .flex-list-item {
    background-color:#FFFFFF;
    margin: 4px;
  }
#+END_SRC

**** grid

#+name: css_light_html_scroll
#+BEGIN_SRC css
  /* grid */
  .wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
      \"headband\"
      \"doc_header\"
      \"doc_title\"
      \"doc_toc\"
      \"doc_prefix\"
      \"doc_intro\"
      \"doc_body\"
      \"doc_endnotes\"
      \"doc_glossary\"
      \"doc_biblio\"
      \"doc_bookindex\"
      \"doc_blurb\"
      \"doc_suffix\";
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
  }
  .delimit {
    border-style: none;
    border-color:#FFFFFF;
    padding: 10px;
  }
  .headband {
    grid-area: headband;
    background-color: #FFFFFF;
  }
  .doc_header {
    grid-area: doc_header;
  }
  .doc_title {
    grid-area: doc_title;
  }
  .doc_toc {
    grid-area: doc_toc;
  }
  .doc_prefix {
    grid-area: doc_prefix;
  }
  .doc_intro {
    grid-area: doc_intro;
  }
  .doc_body {
    grid-area: doc_body;
  }
  .doc_endnotes {
    grid-area: doc_endnotes;
  }
  .doc_glossary {
    grid-area: doc_glossary;
  }
  .doc_biblio {
    grid-area: doc_biblio;
  }
  .doc_bookindex {
    grid-area: doc_bookindex;
  }
  .doc_blurb {
    grid-area: doc_blurb;
  }
  .doc_suffix {
    grid-area: doc_suffix;
  }
  .nav-ul {
    list-style: none;
    float: left;
  }
  .nav-li {
    float: left;
    padding-right: 0.7em;
  }
  .nav-li a {
    text-decoration: none;
    color:#FFFFFF;
  }
  footer {
    background-color: #00704E;
  }
#+END_SRC

*** epub xhtml

#+name: css_light_epub
#+BEGIN_SRC css
#+END_SRC

** css dark theme
*** html shared
**** general

#+name: css_dark_shared
#+BEGIN_SRC css
  *{
    padding: 0px;
    margin: 0px;
  }
  body {
    height: 100vh;
    background-color: #000000;
  }
  body {
    color: #CCCCCC;
    background: #000000;
    background-color: #000000;
  }
#+END_SRC

**** link

#+name: css_dark_shared
#+BEGIN_SRC css
  a:link {
    color: #FFFFFF;
    text-decoration: none;
  }
  a:visited {
    color: #999999;
    text-decoration: none;
  }
  a:hover {
    color: #000000;
    background-color: #555555;
  }
  a.lnkocn:link {
    color: #BBBBBB;
    text-decoration: none;
  }
  a.lnkocn:visited {
    color: #FFFFFF;
    text-decoration: none;
  }
  a:hover img {
    background-color: #000000;
  }
  a:active {
    color: #888888;
    text-decoration: underline;
  }
#+END_SRC

**** div

#+name: css_dark_shared
#+BEGIN_SRC css
  div {
    margin-left: 0;
    margin-right: 0;
  }
  div.p {
    margin-left: 5%;
    margin-right: 1%;
  }
  div.substance {
    width: 100%;
    background-color: #000000;
  }
  div.ocn {
    width: 5%;
    float: right;
    top: 0;
    background-color: #000000;
  }
  div.endnote {
    width: 95%;
    background-color: #0000000;
  }
  div.toc {
    position: absolute;
    float: left;
    margin: 0;
    padding: 0;
    padding-top: 0.5em;
    border: 0;
    width: 13em;
    background-color: #111111;
    margin-right:1em;
  }
  div.summary {
    margin: 0;
    padding: 0;
    border-left: 13em solid #111111;
    padding-left: 1em;
    background-color: #111111;
  }
  div.content, div.main_column {
    margin: 0;
    padding: 0;
    border-left: 13em solid #000000;
    padding-left: 1em;
    padding-right: 1em;
  }
  div.content0, div.main_column0 {
    margin: 0;
    padding: 0;
    border-left: 0% solid #000000;
    padding-left: 5%;
  }
  div.scroll {
    margin: 0;
    padding: 0;
    padding-left: 1em;
    padding-right: 1em;
  }
  div.content:after {
    content:' ';
    clear:both;
    display:block;
    height:0;
    overflow:hidden
  }
  div.footer {
    clear:left;
    padding: 0.5em;
    font-size: 80%;
    margin: 0;
  }
  div.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  div.toc li ul a, li ul span.currentlink
  {
    font-weight: normal;
    font-size: 90%;
    padding-left: 2em;
    background-color: #111111;
  }
  div.toc a, span.currentlink{
    display:block;
    text-decoration: none;
    padding-left: 0.5em;
    color: #FF00AA;
  }
  hr {
    width: 90%;
    margin-left: 5%;
    margin-right: 2em;
    margin-top: 1.8em;
    margin-bottom: 1.8em;
  }
  span.currentlink {
    text-decoration: none;
    background-color: #AAAAF9;
  }
  div.toc a:visited {
    color: #FF00AA;
  }
  div.toc a:hover {
    color: #CCCCCC;
    background-color: #F9F9AA;
  }
  nav#toc ol {
    list-style-type: none;
  }
#+END_SRC

**** paragraphs headings blocks
***** misc

#+name: css_dark_shared
#+BEGIN_SRC css
  .norm, .bold, .verse, .group, .block, .alt {
    line-height: 133%;
    margin-top: 12px;
    margin-bottom: 0px;
    padding-left: 0em;
    text-indent: 0em;
  }
  p, h0, h1, h2, h3, h4, h5, h6, h7, ul, li {
    display: block;
    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
    margin-left: 5%;
    margin-right: 2em;
  }
  p {
    font-size: 100%;
    font-weight: normal;
    line-height: 133%;
    text-align: justify;
    text-indent: 0mm;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
  }
#+END_SRC

#+name: css_dark_shared
#+BEGIN_SRC css
  img { max-width: 100%; height: auto; }
#+END_SRC

***** code block

#+name: css_dark_shared
#+BEGIN_SRC css
  pre {
    width: auto;
    display: block;
    clear: both;
    color: #555555;
  }
  p.code {
    border-style: none;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 5px #AAAAAA inset;
    margin-bottom: 1em;
    padding: 0.5em 1em;
    page-break-inside: avoid;
    word-wrap: break-word;
    font-family: inconsolata, \"liberation mono\", \"bitstream vera mono\", \"dejavu mono\", monaco, consolas, \"andale mono\", \"courier new\", \"courier 10 pitch\", courier, monospace;
    white-space: pre;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    background-color: #555555;
    color: #DDDDDD;
    font-size: 95%;
    line-height: 100%;
  }
#+END_SRC

***** paragraph general

#+name: css_dark_shared
#+BEGIN_SRC css
  p.spaced { white-space: pre; }
  p.block {
    white-space: pre;
  }
  p.group { }
  p.alt { }
  p.verse {
    white-space: pre;
    margin-bottom: 6px;
  }
  p.caption {
    text-align: left;
    font-size: 80%;
    display: inline;
  }
  p.endnote {
    font-size: 96%;
    line-height: 120%;
    text-align: left;
    margin-right: 15mm;
  }
  p.endnote_indent {
    font-size: 96%;
    line-height: 120%;
    text-align: left;
    margin-left: 2em;
    margin-right: 15mm;
  }
  p.center {
    text-align: center;
  }
  p.bold {
    font-weight: bold;
  }
  p.bold_left {
    font-weight: bold;
    text-align: left;
  }
  p.centerbold {
    text-align: center;
    font-weight: bold;
  }
  p.em {
    font-weight: bold;
    font-style: normal;
    background: #FFF3B6;
  }
  p.small {
    font-size: 80%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 6px;
    text-align: left;
  }
  .tiny, .tiny_left, .tiny_right, .tiny_center {
    font-size: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #EEEEEE;
    margin-right: 6px;
    text-align: left;
  }
  p.tiny { }
  p.tiny_left {
    margin-left: 0px;
    margin-right: 0px;
    text-align: left;
  }
  p.tiny_right {
    margin-right: 1em;
    text-align: right;
  }
  p.tiny_center {
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
  }
  p.concordance_word {
    line-height: 150%;
    font-weight: bold;
    display: inline;
    margin-top: 4px;
    margin-bottom: 1px;
  }
  p.concordance_count {
    font-size: 80%;
    color: #555555;
    display: inline;
    margin-left: 0em;
  }
  p.concordance_object {
    font-size: 80%;
    line-height: 120%;
    text-align: left;
    margin-left: 3em;
    margin-top: 1px;
    margin-bottom: 3px;
  }
  p.book_index_lev1 {
    line-height: 100%;
    margin-top: 4px;
    margin-bottom: 1px;
  }
  p.book_index_lev2 {
    line-height: 100%;
    text-align: left;
    margin-left: 3em;
    margin-top: 1px;
    margin-bottom: 3px;
  }
  tt {
    font-family: inconsolata, \"liberation mono\", \"bitstream vera mono\", \"dejavu mono\", monaco, consolas, \"andale mono\", \"courier new\", \"courier 10 pitch\", courier, monospace;
    background-color: #555555;
    color: #DDDDDD;
  }
#+END_SRC

***** paragraph indent

#+name: css_dark_shared
#+BEGIN_SRC css
  /* indent */
  p.norm { }
  p.i1 { padding-left: 1em; }
  p.i2 { padding-left: 2em; }
  p.i3 { padding-left: 3em; }
  p.i4 { padding-left: 4em; }
  p.i5 { padding-left: 5em; }
  p.i6 { padding-left: 6em; }
  p.i7 { padding-left: 7em; }
  p.i8 { padding-left: 8em; }
  p.i9 { padding-left: 9em; }
  /* hanging indent */
  p[indent=\"h0i0\"] {
    padding-left: 0em;
    text-indent:  0em;
  }
  p[indent=\"h0i1\"] {
    padding-left: 1em;
    text-indent: -1em;
  }
  p[indent=\"h0i2\"] {
    padding-left: 2em;
    text-indent: -2em;
  }
  p[indent=\"h0i3\"] {
    padding-left: 3em;
    text-indent: -3em;
  }
  p[indent=\"h0i4\"] {
    padding-left: 4em;
    text-indent: -4em;
  }
  p[indent=\"h0i5\"] {
    padding-left: 5em;
    text-indent: -5em;
  }
  p[indent=\"h0i6\"] {
    padding-left: 6em;
    text-indent: -6em;
  }
  p[indent=\"h0i7\"] {
    padding-left: 7em;
    text-indent: -7em;
  }
  p[indent=\"h0i8\"] {
    padding-left: 8em;
    text-indent: -8em;
  }
  p[indent=\"h0i9\"] {
    padding-left: 9em;
    text-indent: -9em;
  }
  p[indent=\"h1i0\"] {
    padding-left: 0em;
    text-indent:  1em;
  }
  p[indent=\"h1i1\"] {
    padding-left: 1em;
    text-indent:  0em;
  }
  p[indent=\"h1i2\"] {
    padding-left: 2em;
    text-indent: -1em;
  }
  p[indent=\"h1i3\"] {
    padding-left: 3em;
    text-indent: -2em;
  }
  p[indent=\"h1i4\"] {
    padding-left: 4em;
    text-indent: -3em;
  }
  p[indent=\"h1i5\"] {
    padding-left: 5em;
    text-indent: -4em;
  }
  p[indent=\"h1i6\"] {
    padding-left: 6em;
    text-indent: -5em;
  }
  p[indent=\"h1i7\"] {
    padding-left: 7em;
    text-indent: -6em;
  }
  p[indent=\"h1i8\"] {
    padding-left: 8em;
    text-indent: -7em;
  }
  p[indent=\"h1i9\"] {
    padding-left: 9em;
    text-indent: -8em;
  }
  p[indent=\"h2i0\"] {
    padding-left: 0em;
    text-indent:  2em;
  }
  p[indent=\"h2i1\"] {
    padding-left: 1em;
    text-indent:  1em;
  }
  p[indent=\"h2i2\"] {
    padding-left: 2em;
    text-indent:  0em;
  }
  p[indent=\"h2i3\"] {
    padding-left: 3em;
    text-indent: -1em;
  }
  p[indent=\"h2i4\"] {
    padding-left: 4em;
    text-indent: -2em;
  }
  p[indent=\"h2i5\"] {
    padding-left: 5em;
    text-indent: -3em;
  }
  p[indent=\"h2i6\"] {
    padding-left: 6em;
    text-indent: -4em;
  }
  p[indent=\"h2i7\"] {
    padding-left: 7em;
    text-indent: -5em;
  }
  p[indent=\"h2i8\"] {
    padding-left: 8em;
    text-indent: -6em;
  }
  p[indent=\"h2i9\"] {
    padding-left: 9em;
    text-indent: -7em;
  }
  p[indent=\"h3i0\"] {
    padding-left: 0em;
    text-indent:  3em;
  }
  p[indent=\"h3i1\"] {
    padding-left: 1em;
    text-indent:  2em;
  }
  p[indent=\"h3i2\"] {
    padding-left: 2em;
    text-indent:  1em;
  }
  p[indent=\"h3i3\"] {
    padding-left: 3em;
    text-indent:  0em;
  }
  p[indent=\"h3i4\"] {
    padding-left: 4em;
    text-indent: -1em;
  }
  p[indent=\"h3i5\"] {
    padding-left: 5em;
    text-indent: -2em;
  }
  p[indent=\"h3i6\"] {
    padding-left: 6em;
    text-indent: -3em;
  }
  p[indent=\"h3i7\"] {
    padding-left: 7em;
    text-indent: -4em;
  }
  p[indent=\"h3i8\"] {
    padding-left: 8em;
    text-indent: -5em;
  }
  p[indent=\"h3i9\"] {
    padding-left: 9em;
    text-indent: -6em;
  }
  p[indent=\"h4i0\"] {
    padding-left: 0em;
    text-indent:  4em;
  }
  p[indent=\"h4i1\"] {
    padding-left: 1em;
    text-indent:  3em;
  }
  p[indent=\"h4i2\"] {
    padding-left: 2em;
    text-indent:  2em;
  }
  p[indent=\"h4i3\"] {
    padding-left: 3em;
    text-indent:  1em;
  }
  p[indent=\"h4i4\"] {
    padding-left: 4em;
    text-indent:  0em;
  }
  p[indent=\"h4i5\"] {
    padding-left: 5em;
    text-indent: -1em;
  }
  p[indent=\"h4i6\"] {
    padding-left: 6em;
    text-indent: -2em;
  }
  p[indent=\"h4i7\"] {
    padding-left: 7em;
    text-indent: -3em;
  }
  p[indent=\"h4i8\"] {
    padding-left: 8em;
    text-indent: -4em;
  }
  p[indent=\"h4i9\"] {
    padding-left: 9em;
    text-indent: -5em;
  }
  p[indent=\"h5i0\"] {
    padding-left: 0em;
    text-indent:  5em;
  }
  p[indent=\"h5i1\"] {
    padding-left: 1em;
    text-indent:  4em;
  }
  p[indent=\"h5i2\"] {
    padding-left: 2em;
    text-indent:  3em;
  }
  p[indent=\"h5i3\"] {
    padding-left: 3em;
    text-indent:  2em;
  }
  p[indent=\"h5i4\"] {
    padding-left: 4em;
    text-indent:  1em;
  }
  p[indent=\"h5i5\"] {
    padding-left: 5em;
    text-indent:  0em;
  }
  p[indent=\"h5i6\"] {
    padding-left: 6em;
    text-indent: -1em;
  }
  p[indent=\"h5i7\"] {
    padding-left: 7em;
    text-indent: -2em;
  }
  p[indent=\"h5i8\"] {
    padding-left: 8em;
    text-indent: -3em;
  }
  p[indent=\"h5i9\"] {
    padding-left: 9em;
    text-indent: -4em;
  }
  p[indent=\"h6i0\"] {
    padding-left: 0em;
    text-indent:  6em;
  }
  p[indent=\"h6i1\"] {
    padding-left: 1em;
    text-indent:  5em;
  }
  p[indent=\"h6i2\"] {
    padding-left: 2em;
    text-indent:  4em;
  }
  p[indent=\"h6i3\"] {
    padding-left: 3em;
    text-indent:  3em;
  }
  p[indent=\"h6i4\"] {
    padding-left: 4em;
    text-indent:  2em;
  }
  p[indent=\"h6i5\"] {
    padding-left: 5em;
    text-indent:  1em;
  }
  p[indent=\"h6i6\"] {
    padding-left: 6em;
    text-indent:  0em;
  }
  p[indent=\"h6i7\"] {
    padding-left: 7em;
    text-indent: -1em;
  }
  p[indent=\"h6i8\"] {
    padding-left: 8em;
    text-indent: -2em;
  }
  p[indent=\"h6i9\"] {
    padding-left: 9em;
    text-indent: -3em;
  }
  p[indent=\"h7i0\"] {
    padding-left: 0em;
    text-indent:  7em;
  }
  p[indent=\"h7i1\"] {
    padding-left: 1em;
    text-indent:  6em;
  }
  p[indent=\"h7i2\"] {
    padding-left: 2em;
    text-indent:  5em;
  }
  p[indent=\"h7i3\"] {
    padding-left: 3em;
    text-indent:  4em;
  }
  p[indent=\"h7i4\"] {
    padding-left: 4em;
    text-indent:  3em;
  }
  p[indent=\"h7i5\"] {
    padding-left: 5em;
    text-indent:  2em;
  }
  p[indent=\"h7i6\"] {
    padding-left: 6em;
    text-indent:  1em;
  }
  p[indent=\"h7i7\"] {
    padding-left: 7em;
    text-indent:  0em;
  }
  p[indent=\"h7i8\"] {
    padding-left: 8em;
    text-indent: -1em;
  }
  p[indent=\"h7i9\"] {
    padding-left: 9em;
    text-indent: -2em;
  }
  p[indent=\"h8i0\"] {
    padding-left: 0em;
    text-indent:  8em;
  }
  p[indent=\"h8i1\"] {
    padding-left: 1em;
    text-indent:  7em;
  }
  p[indent=\"h8i2\"] {
    padding-left: 2em;
    text-indent:  6em;
  }
  p[indent=\"h8i3\"] {
    padding-left: 3em;
    text-indent:  5em;
  }
  p[indent=\"h8i4\"] {
    padding-left: 4em;
    text-indent:  4em;
  }
  p[indent=\"h8i5\"] {
    padding-left: 5em;
    text-indent:  3em;
  }
  p[indent=\"h8i6\"] {
    padding-left: 6em;
    text-indent:  2em;
  }
  p[indent=\"h8i7\"] {
    padding-left: 7em;
    text-indent:  1em;
  }
  p[indent=\"h8i8\"] {
    padding-left: 8em;
    text-indent:  0em;
  }
  p[indent=\"h8i9\"] {
    padding-left: 9em;
    text-indent: -1em;
  }
  p[indent=\"h9i0\"] {
    padding-left: 0em;
    text-indent:  9em;
  }
  p[indent=\"h9i1\"] {
    padding-left: 1em;
    text-indent:  8em;
  }
  p[indent=\"h9i2\"] {
    padding-left: 2em;
    text-indent:  7em;
  }
  p[indent=\"h9i3\"] {
    padding-left: 3em;
    text-indent:  6em;
  }
  p[indent=\"h9i4\"] {
    padding-left: 4em;
    text-indent:  5em;
  }
  p[indent=\"h9i5\"] {
    padding-left: 5em;
    text-indent:  4em;
  }
  p[indent=\"h9i6\"] {
    padding-left: 6em;
    text-indent:  3em;
  }
  p[indent=\"h9i7\"] {
    padding-left: 7em;
    text-indent:  2em;
  }
  p[indent=\"h9i8\"] {
    padding-left: 8em;
    text-indent:  1em;
  }
  p[indent=\"h9i9\"] {
    padding-left: 9em;
    text-indent:  0em;
  }
#+END_SRC

***** misc including tables & lists

#+name: css_dark_shared
#+BEGIN_SRC css
  note { white-space: pre; }
  label.ocn {
    width: 2%;
    float: right;
    top: 0;
    font-size: 10px;
    margin-top: 0px;
    margin-bottom: 5px;
    color: #CCCCCC;
    margin-right: 5px;
    text-align: right;
    background-color: #000000;
  }
  table {
    display: block;
    margin-left: 5%;
    margin-right: 2em;
    background-color: #000000;
  }
  tr { }
  th,td {
    vertical-align: top;
    text-align: left;
  }
  th {
    font-weight: bold;
  }
  em {
    font-weight: bold;
    font-style: italic;
  }
  p.left,th.left,td.left {
    text-align: left;
  }
  p.small_left,th.small_left,td.small_left {
    text-align: left;
    font-size: 80%;
  }
  p.right,th.right,td.right {
    text-align: right;
  }
  ul, li {
    list-style-type: none;
    list-style: none;
    padding-left: 20px;
    font-weight: normal;
    line-height: 150%;
    text-align: left;
    text-indent: 0mm;
    margin-left: 1em;
    margin-right: 2em;
    margin-top: 3px;
    margin-bottom: 3px;
  }
  li {
    background: url(../image_sys/bullet_09.png) no-repeat 0px 6px;
  }
  ul {
  }
#+END_SRC

***** headings

#+name: css_dark_shared
#+BEGIN_SRC css
  h0, h1, h2, h3, h4, h5, h6, h7 {
    font-weight: bold;
    line-height: 120%;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  h4.norm, h5.norm, h6.norm, h7.norm {
    margin-top: 10px;
    margin-bottom: 0px;
  }
  h0 { font-size: 125%; }
  h1 { font-size: 120%; }
  h2 { font-size: 115%; }
  h3 { font-size: 110%; }
  h4 { font-size: 105%; }
  h5 { font-size: 100%; }
  h6 { font-size: 100%; }
  h7 { font-size: 100%; }
  h0, h1, h2, h3, h4, h5, h6, h7 { text-shadow: .2em .2em .3em #999999; }
  h1.i { margin-left: 2em; }
  h2.i { margin-left: 3em; }
  h3.i { margin-left: 4em; }
  h4.i { margin-left: 5em; }
  h5.i { margin-left: 6em; }
  h6.i { margin-left: 7em; }
  h7.i { margin-left: 8em; }
  h8.i { margin-left: 9em; }
  h9.i { margin-left: 10em; }
  .toc {
    font-weight: normal;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  h0.toc {
    margin-left: 1em;
    font-size: 120%;
    line-height: 150%;
  }
  h1.toc {
    margin-left: 1em;
    font-size: 115%;
    line-height: 150%;
  }
  h2.toc {
    margin-left: 2em;
    font-size: 110%;
    line-height: 140%;
  }
  h3.toc {
    margin-left: 3em;
    font-size: 105%;
    line-height: 120%;
  }
  h4.toc {
    margin-left: 4em;
    font-size: 100%;
    line-height: 120%;
  }
  h5.toc {
    margin-left: 5em;
    font-size: 95%;
    line-height: 110%;
  }
  h6.toc {
    margin-left: 6em;
    font-size: 90%;
    line-height: 110%;
  }
  h7.toc {
    margin-left: 7em;
    font-size: 85%;
    line-height: 100%;
  }
  .subtoc {
    margin-right: 34%;
    font-weight: normal;
  }
  h5.subtoc {
    margin-left: 2em;
    font-size: 80%;
    margin-top: 2px;
    margin-bottom: 2px;
  }
  h6.subtoc {
    margin-left: 3em;
    font-size: 75%;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  h7.subtoc {
    margin-left: 4em;
    font-size: 70%;
    margin-top: 0px;
    margin-bottom: 0px;
  }
#+END_SRC

*** html seg
**** previous next

#+name: css_dark_html_seg
#+BEGIN_SRC css
  .icon-bar {
    width: 100%;
    overflow: auto;
    margin: 0em 0em 0em;
  }
  .left-bar {
    width: 85%;
    float: left;
    display: inline;
    overflow: auto;
  }
  .toc-button {
    position: absolute;
    top: 8px;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #555555;
    fill: #DDDDDD;
    box-shadow: 0 2px 5px #EEEEEE inset;
  }
  .toc-button svg {
    position: relative;
    left: 25%;
    top: 25%;
    width: 150%;
    height: 150%;
  }
  .toc-button p {
    vertical-align: center;
    font-size: 120%;
  }
  .prev-next-button {
    position: absolute;
    top: 8px;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #555555;
    box-shadow: 0 2px 5px #AAAAAA inset;
  }
  .prev-next-button svg {
    position: relative;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
  }
  .menu {
    right: 6em;
   }
  .previous {
    right: 3em;
   }
  .next {
    right: 0em;
   }
  .arrow { fill: #DDDDDD; }
  .minitoc {
    line-height: 100%;
    font-size: 90%;
    margin-top: 6px;
    margin-bottom: 0px;
    padding-left: 0em;
    text-indent: 0em;
  }
#+END_SRC

**** flex

#+name: css_dark_html_seg
#+BEGIN_SRC css
  /* flex */
  .flex-menu-bar {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    margin-left: 5%;
    margin-right: 2%;
    background-color: #000000;
  }
  .flex-menu-option {
    background-color: #000000;
    margin-right: 4px;
  }
  .flex-list {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    display: block;
    align-items: center;
    width: 100%;
    background-color: #000000;
  }
  .flex-list-item {
    background-color: #000000;
    margin: 4px;
  }
#+END_SRC

**** TODO grid

Consider what if anything should be used here

#+name: css_dark_html_seg
#+BEGIN_SRC css
  /* grid */
  .wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
      \"headband\"
      \"doc_header\"
      \"doc_title\"
      \"doc_toc\"
      \"doc_prefix\"
      \"doc_intro\"
      \"doc_body\"
      \"doc_endnotes\"
      \"doc_glossary\"
      \"doc_biblio\"
      \"doc_bookindex\"
      \"doc_blurb\"
      \"doc_suffix\";
    margin: 0px;
    padding: 0px;
    background-color: #000000;
  }
  .delimit {
    border-style: none;
    border-color: #000000;
    padding: 10px;
  }
  .headband {
    grid-area: headband;
    background-color: #000000;
  }
  .doc_header {
    grid-area: doc_header;
  }
  .doc_title {
    grid-area: doc_title;
  }
  .doc_toc {
    grid-area: doc_toc;
  }
  .doc_prefix {
    grid-area: doc_prefix;
  }
  .doc_intro {
    grid-area: doc_intro;
  }
  .doc_body {
    grid-area: doc_body;
  }
  .doc_endnotes {
    grid-area: doc_endnotes;
  }
  .doc_glossary {
    grid-area: doc_glossary;
  }
  .doc_biblio {
    grid-area: doc_biblio;
  }
  .doc_bookindex {
    grid-area: doc_bookindex;
  }
  .doc_blurb {
    grid-area: doc_blurb;
  }
  .doc_suffix {
    grid-area: doc_suffix;
  }
  .nav-ul {
    list-style: none;
    float: left;
  }
  .nav-li {
    float: left;
    padding-right: 0.7em;
  }
  .nav-li a {
    text-decoration: none;
    color: #000000;
  }
  footer {
    background-color: #FF704E;
  }
#+END_SRC

*** html scroll
**** flex

#+name: css_dark_html_scroll
#+BEGIN_SRC css
  /* flex */
  .flex-menu-bar {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    margin-left: 5%;
    margin-right: 2%;
    background-color: #000000;
  }
  .flex-menu-option {
    background-color: #000000;
    margin-right: 4px;
  }
  .flex-list {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    display: block;
    align-items: center;
    width: 100%;
    background-color: #000000;
  }
  .flex-list-item {
    background-color: #000000;
    margin: 4px;
  }
#+END_SRC

**** grid

#+name: css_dark_html_scroll
#+BEGIN_SRC css
  /* grid */
  .wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
      \"headband\"
      \"doc_header\"
      \"doc_title\"
      \"doc_toc\"
      \"doc_prefix\"
      \"doc_intro\"
      \"doc_body\"
      \"doc_endnotes\"
      \"doc_glossary\"
      \"doc_biblio\"
      \"doc_bookindex\"
      \"doc_blurb\"
      \"doc_suffix\";
    margin: 0px;
    padding: 0px;
    background-color: #000000;
  }
  .delimit {
    border-style: none;
    border-color: #000000;
    padding: 10px;
  }
  .headband {
    grid-area: headband;
    background-color: #000000;
  }
  .doc_header {
    grid-area: doc_header;
  }
  .doc_title {
    grid-area: doc_title;
  }
  .doc_toc {
    grid-area: doc_toc;
  }
  .doc_prefix {
    grid-area: doc_prefix;
  }
  .doc_intro {
    grid-area: doc_intro;
  }
  .doc_body {
    grid-area: doc_body;
  }
  .doc_endnotes {
    grid-area: doc_endnotes;
  }
  .doc_glossary {
    grid-area: doc_glossary;
  }
  .doc_biblio {
    grid-area: doc_biblio;
  }
  .doc_bookindex {
    grid-area: doc_bookindex;
  }
  .doc_blurb {
    grid-area: doc_blurb;
  }
  .doc_suffix {
    grid-area: doc_suffix;
  }
  .nav-ul {
    list-style: none;
    float: left;
  }
  .nav-li {
    float: left;
    padding-right: 0.7em;
  }
  .nav-li a {
    text-decoration: none;
    color: #000000;
  }
  footer {
    background-color: #FF704E;
  }
#+END_SRC

*** epub xhtml

#+name: css_dark_epub
#+BEGIN_SRC css
#+END_SRC

* __END__