0.3.2 css themes, --dark & --light (default)

3 files changed, 1487 insertions, 106 deletions

diff --git a/org/doc_reform.org b/org/doc_reform.org
index ab437f9..be82dc2 100644
--- a/org/doc_reform.org
+++ b/org/doc_reform.org
@@ -24,7 +24,7 @@ struct Version {
   int minor;
   int patch;
 }
-enum ver = Version(0, 3, 1);
+enum ver = Version(0, 3, 2);
 #+END_SRC
 
 ** compilation restrictions (supported compilers)
@@ -245,12 +245,14 @@ bool[string] opts = [
   "abstraction"        : false,
   "assertions"         : false,
   "concordance"        : false,
+  "dark"               : false,
   "debug"              : false,
   "digest"             : false,
   "epub"               : false,
   "html"               : false,
   "html-seg"           : false,
   "html-scroll"        : false,
+  "light"              : false,
   "manifest"           : false,
   "ocn"                : true,
   "parallelise"        : true,
@@ -278,6 +280,8 @@ bool[string] opts = [
   "section_blurb"      : true,
   "backmatter"         : true,
   "skip-output"        : false,
+  "theme-dark"         : false,
+  "theme-light"        : false,
   "workon"             : false,
 ];
 string[string] settings = [
@@ -291,12 +295,14 @@ auto helpInfo = getopt(args,
   "abstraction",        "--abstraction document abstraction ",                                      &opts["abstraction"],
   "assert",             "--assert set optional assertions on",                                      &opts["assertions"],
   "concordance",        "--concordance file for document",                                          &opts["concordance"],
+  "dark",               "--dark alternative dark theme",                                            &opts["dark"],
   "debug",              "--debug",                                                                  &opts["debug"],
   "digest",             "--digest hash digest for each object",                                     &opts["digest"],
   "epub",               "--epub process epub output",                                               &opts["epub"],
   "html",               "--html process html output",                                               &opts["html"],
   "html-seg",           "--html-seg process html output",                                           &opts["html-seg"],
   "html-scroll",        "--html-seg process html output",                                           &opts["html-scroll"],
+  "light",              "--light default light theme",                                              &opts["light"],
   "manifest",           "--manifest process manifest output",                                       &opts["manifest"],
   "ocn",                "--ocn object cite numbers (default)",                                      &opts["ocn"],
   "parallelise",        "--parallelise parallelisation",                                            &opts["parallelise"],
@@ -326,6 +332,8 @@ auto helpInfo = getopt(args,
   "section-blurb",      "--section-blurb process document blurb (default)",                         &opts["section_blurb"],
   "backmatter",         "--section-backmatter process document backmatter (default)",               &opts["backmatter"],
   "skip-output",        "--skip-output",                                                            &opts["skip-output"],
+  "theme-dark",         "--theme-dark alternative dark theme",                                      &opts["theme-dark"],
+  "theme-light",        "--theme-light default light theme",                                        &opts["theme-light"],
   "workon",             "--workon (reserved for some matters under development & testing)",         &opts["workon"],
   "output-dir",         "--output-dir=[dir path]",                                                  &settings["output-dir"],
   "site-config-dir",    "--site-config-dir=[dir path]",                                             &settings["site-config-dir"],
@@ -349,6 +357,17 @@ struct OptActions {
   auto concordance() {
     return opts["concordance"];
   }
+  auto css_theme_default() {
+    bool _is_light;
+    if (opts["light"] || opts["theme-light"]) {
+      _is_light = true;
+    } else if (opts["dark"] || opts["theme-dark"]) {
+      _is_light = false;
+    } else {
+      _is_light = true;
+    }
+    return _is_light;
+  }
   auto debug_do() {
     return opts["debug"];
   }
diff --git a/org/output_xmls.org b/org/output_xmls.org
index ab0536d..5a39bfd 100644
--- a/org/output_xmls.org
+++ b/org/output_xmls.org
@@ -675,13 +675,13 @@ string lev4_heading_subtoc(M,O)(
   lev4_subtoc ~= "  <div class=\"nav\">\n";
   foreach (subtoc; obj.tags.lev4_subtoc) {
     if (auto m = subtoc.match(rgx.inline_link_subtoc)) {
-      auto indent = m.captures[1].to!string;
+      auto indent = (m.captures[1].to!int - 3).to!string; // css assumptions based on use of em for left margin & indent
       auto text = m.captures[2].to!string;
       text = font_face(text);
       auto link = m.captures[3].to!string;
       lev4_subtoc ~= subtoc.replaceFirst(rgx.inline_link_subtoc,
         format(q"¶    <p class="minitoc" indent="h%si%s">
-      <a href="%s">%s</a>
+      ۰ <a href="%s">%s</a>
     </p>
 ¶",
           indent,
@@ -1296,7 +1296,7 @@ auto code(M,O)(
   if (!(obj.metainfo.identifier.empty)) {
     o = format(q"¶  <div class="substance">
   <label class="ocn"><a href="#%s" class="lnkocn">%s</a></label>
-  <p class="%s" id="%s">%s</p>
+  <pre><p class="%s" id="%s">%s</p></pre>
 </div>¶",
       obj.metainfo.identifier,
       (obj.metainfo.object_number.empty) ? "" : obj.metainfo.identifier,
@@ -1306,7 +1306,7 @@ auto code(M,O)(
     );
   } else {
     o = format(q"¶  <div class="substance">
-  <p class="%s">%s</p>
+  <pre><p class="%s">%s</p></pre>
 </div>¶",
       obj.metainfo.is_a,
       _txt
@@ -1958,9 +1958,13 @@ void css(M)(
       (pth_html.css).mkdirRecurse;
     }
     auto f = File(pth_html.fn_seg_css, "w");
-    f.writeln(css.html_seg_css);
+    (doc_matters.opt.action.css_theme_default)
+    ? f.writeln(css.light.html_seg)
+    : f.writeln(css.dark.html_seg);
     f = File(pth_html.fn_scroll_css, "w");
-    f.writeln(css.html_scroll_css);
+    (doc_matters.opt.action.css_theme_default)
+    ? f.writeln(css.light.html_scroll)
+    : f.writeln(css.dark.html_scroll);
   } catch (ErrnoException ex) {
     // Handle error
   }
@@ -2867,14 +2871,18 @@ void epub3_write_output_files(M,D,E,Mt,Mic,Otnx,Otn,Oc)(
       { /+ debug +/
         if (doc_matters.opt.action.debug_do) {
           fn_dbg = pth_epub3.dbg_fn_oebps_css(doc_matters.src.filename);
-          File(fn_dbg, "w").writeln(css.epub_css);
+          (doc_matters.opt.action.css_theme_default)
+          ? File(fn_dbg, "w").writeln(css.light.epub)
+          : File(fn_dbg, "w").writeln(css.dark.epub);
         }
       }
       fn = pth_epub3.fn_oebps_css(doc_matters.src.filename);
       auto zip_arc_member_file = new ArchiveMember();
       zip_arc_member_file.name = fn;
       auto zip_data = new OutBuffer();
-      zip_data.write(css.epub_css.dup);
+      (doc_matters.opt.action.css_theme_default)
+      ? zip_data.write(css.light.epub.dup)
+      : zip_data.write(css.dark.epub.dup);
       zip_arc_member_file.expandedData = zip_data.toBytes();
       zip.addMember(zip_arc_member_file);
       createZipFile!()(fn_epub, zip.build());
diff --git a/org/output_xmls_css.org b/org/output_xmls_css.org
index b95d0d9..6793a22 100644
--- a/org/output_xmls_css.org
+++ b/org/output_xmls_css.org
@@ -26,42 +26,76 @@
 module doc_reform.output.xmls_css;
 template DocReformCss() {
   auto DocReformCss() {
-    string _css_html_seg="
-<<css_shared>>
-<<css_html_seg>>
+    string _css_light_html_seg="
+<<css_light_shared>>
+<<css_light_html_seg>>
 ";
-    string _css_html_scroll="
-<<css_shared>>
-<<css_html_scroll>>
+    string _css_dark_html_seg="
+<<css_dark_shared>>
+<<css_dark_html_seg>>
 ";
-    string _css_epub="
-<<css_shared>>
-<<css_epub>>
+    string _css_light_html_scroll="
+<<css_light_shared>>
+<<css_light_html_scroll>>
 ";
-    struct _css {
-      auto html_seg_css() {
-        string _css = "/* DocReform css html seg stylesheet */\n" ~ _css_html_seg;
-        return _css;
+    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 html_scroll_css() {
-        string _css = "/* DocReform css html scroll stylesheet */\n" ~ _css_html_scroll;
-        return _css;
+      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();
       }
-      auto epub_css() {
-        string _css = "/* DocReform css epub stylesheet */\n" ~ _css_epub;
-        return _css;
       }
-    }
-    return _css();
+    return _CSS();
   }
 }
 #+END_SRC
 
-** css
+** css light theme
 *** html shared
 **** general
 
-#+name: css_shared
+#+name: css_light_shared
 #+BEGIN_SRC css
   *{
     padding: 0px;
@@ -69,18 +103,18 @@ template DocReformCss() {
   }
   body {
     height: 100vh;
-    background-color: #ffffff;
+    background-color: #FFFFFF;
   }
   body {
-    color: black;
-    background: #ffffff;
-    background-color: #ffffff;
+    color:#000000;
+    background: #FFFFFF;
+    background-color: #FFFFFF;
   }
 #+END_SRC
 
 **** link
 
-#+name: css_shared
+#+name: css_light_shared
 #+BEGIN_SRC css
   a:link {
     color: #003399;
@@ -92,14 +126,18 @@ template DocReformCss() {
   }
   a:hover {
     color: #000000;
-    background-color: #f9f9aa;
+    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;
+    background-color: #FFFFFF;
   }
   a:active {
     color: #003399;
@@ -109,7 +147,7 @@ template DocReformCss() {
 
 **** div
 
-#+name: css_shared
+#+name: css_light_shared
 #+BEGIN_SRC css
   div {
     margin-left: 0;
@@ -121,17 +159,17 @@ template DocReformCss() {
   }
   div.substance {
     width: 100%;
-    background-color: #ffffff;
+    background-color: #FFFFFF;
   }
   div.ocn {
     width: 5%;
     float: right;
     top: 0;
-    background-color: #ffffff;
+    background-color: #FFFFFF;
   }
   div.endnote {
     width: 95%;
-    background-color: #fffffff;
+    background-color: #FFFFFFf;
   }
   div.toc {
     position: absolute;
@@ -141,27 +179,27 @@ template DocReformCss() {
     padding-top: 0.5em;
     border: 0;
     width: 13em;
-    background-color: #eeeeee;
+    background-color: #EEEEEE;
     margin-right:1em;
   }
   div.summary {
     margin: 0;
     padding: 0;
-    border-left: 13em solid #eeeeee;
+    border-left: 13em solid #EEEEEE;
     padding-left: 1em;
-    background-color: #eeeeee;
+    background-color: #EEEEEE;
   }
   div.content, div.main_column {
     margin: 0;
     padding: 0;
-    border-left: 13em solid #ffffff;
+    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;
+    border-left: 0% solid #FFFFFF;
     padding-left: 5%;
   }
   div.scroll {
@@ -193,7 +231,7 @@ template DocReformCss() {
     font-weight: normal;
     font-size: 90%;
     padding-left: 2em;
-    background-color: #eeeeee;
+    background-color: #EEEEEE;
   }
   div.toc a, span.currentlink{
     display:block;
@@ -203,19 +241,21 @@ template DocReformCss() {
   }
   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;
+    background-color: #AAAAAA;
   }
   div.toc a:visited {
     color: #0000aa;
   }
   div.toc a:hover {
     color: #000000;
-    background-color: #f9f9aa;
+    background-color: #F9F9AA;
   }
   nav#toc ol {
     list-style-type: none;
@@ -225,42 +265,71 @@ template DocReformCss() {
 **** paragraphs headings blocks
 ***** misc
 
-#+name: css_shared
+#+name: css_light_shared
 #+BEGIN_SRC css
   .norm, .bold, .verse, .group, .block, .alt {
     line-height: 133%;
-    margin-left: 0em;
-    margin-right: 2em;
     margin-top: 12px;
     margin-bottom: 0px;
     padding-left: 0em;
     text-indent: 0em;
   }
-  p, h0, h1, h2, h3, h4, h5, h6, h7 {
+  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;
-    margin-left: 0em;
-    margin-right: 2em;
     text-indent: 0mm;
     margin-top: 0.8em;
     margin-bottom: 0.8em;
   }
 #+END_SRC
 
-#+name: css_shared
+#+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_shared
+#+name: css_light_shared
 #+BEGIN_SRC css
-  /* spaced */
   p.spaced { white-space: pre; }
   p.block {
     white-space: pre;
@@ -271,15 +340,6 @@ template DocReformCss() {
     white-space: pre;
     margin-bottom: 6px;
   }
-  p.code {
-    font-family: inconsolata, andale mono, courier new, courier, monospace;
-    font-size: 90%;
-    text-align: left;
-    background-color: #eeeeee;
-    white-space: pre;
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
   p.caption {
     text-align: left;
     font-size: 80%;
@@ -315,7 +375,7 @@ template DocReformCss() {
   p.em {
     font-weight: bold;
     font-style: normal;
-    background: #fff3b6;
+    background: #FFF3b6;
   }
   p.small {
     font-size: 80%;
@@ -381,14 +441,15 @@ template DocReformCss() {
     margin-bottom: 3px;
   }
   tt {
-    font-family: inconsolata, andale mono, courier new, courier, monospace;
-    background-color: #eeeeee;
+    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_shared
+#+name: css_light_shared
 #+BEGIN_SRC css
   /* indent */
   p.norm { }
@@ -806,7 +867,7 @@ template DocReformCss() {
 
 ***** misc including tables & lists
 
-#+name: css_shared
+#+name: css_light_shared
 #+BEGIN_SRC css
   note { white-space: pre; }
   label.ocn {
@@ -819,9 +880,14 @@ template DocReformCss() {
     color: #777777;
     margin-right: 5px;
     text-align: right;
-    background-color: #ffffff;
+    background-color: #FFFFFF;
+  }
+  table {
+    display: block;
+    margin-left: 5%;
+    margin-right: 2em;
+    background-color: #FFFFFF;
   }
-  table { }
   tr { }
   th,td {
     vertical-align: top;
@@ -848,8 +914,1275 @@ template DocReformCss() {
     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;
@@ -868,7 +2201,7 @@ template DocReformCss() {
 
 ***** headings
 
-#+name: css_shared
+#+name: css_dark_shared
 #+BEGIN_SRC css
   h0, h1, h2, h3, h4, h5, h6, h7 {
     font-weight: bold;
@@ -889,7 +2222,7 @@ template DocReformCss() {
   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 gray; }
+  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; }
@@ -971,7 +2304,7 @@ template DocReformCss() {
 *** html seg
 **** previous next
 
-#+name: css_html_seg
+#+name: css_dark_html_seg
 #+BEGIN_SRC css
   .icon-bar {
     width: 100%;
@@ -990,7 +2323,9 @@ template DocReformCss() {
     width: 2em;
     height: 2em;
     border-radius: 50%;
-    background: #cccccc;
+    background: #555555;
+    fill: #DDDDDD;
+    box-shadow: 0 2px 5px #EEEEEE inset;
   }
   .toc-button svg {
     position: relative;
@@ -1009,7 +2344,8 @@ template DocReformCss() {
     width: 2em;
     height: 2em;
     border-radius: 50%;
-    background: #cccccc;
+    background: #555555;
+    box-shadow: 0 2px 5px #AAAAAA inset;
   }
   .prev-next-button svg {
     position: relative;
@@ -1027,12 +2363,20 @@ template DocReformCss() {
   .next {
     right: 0em;
    }
-  .arrow { fill: #333333; }
+  .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_html_seg
+#+name: css_dark_html_seg
 #+BEGIN_SRC css
   /* flex */
   .flex-menu-bar {
@@ -1042,11 +2386,13 @@ template DocReformCss() {
     -webkit-align-items: center;
     align-items: center;
     width: 100%;
-    background-color: #ffffff;
+    margin-left: 5%;
+    margin-right: 2%;
+    background-color: #000000;
   }
   .flex-menu-option {
-    background-color: white;
-    margin: 8px;
+    background-color: #000000;
+    margin-right: 4px;
   }
   .flex-list {
     display: -webkit-flex;
@@ -1055,10 +2401,10 @@ template DocReformCss() {
     display: block;
     align-items: center;
     width: 100%;
-    background-color: #ffffff;
+    background-color: #000000;
   }
   .flex-list-item {
-    background-color: white;
+    background-color: #000000;
     margin: 4px;
   }
 #+END_SRC
@@ -1067,7 +2413,7 @@ template DocReformCss() {
 
 Consider what if anything should be used here
 
-#+name: css_html_seg
+#+name: css_dark_html_seg
 #+BEGIN_SRC css
   /* grid */
   .wrapper {
@@ -1089,16 +2435,16 @@ Consider what if anything should be used here
       \"doc_suffix\";
     margin: 0px;
     padding: 0px;
-    background-color: #ffffff;
+    background-color: #000000;
   }
   .delimit {
     border-style: none;
-    border-color: white;
+    border-color: #000000;
     padding: 10px;
   }
   .headband {
     grid-area: headband;
-    background-color: #ffffff;
+    background-color: #000000;
   }
   .doc_header {
     grid-area: doc_header;
@@ -1146,17 +2492,17 @@ Consider what if anything should be used here
   }
   .nav-li a {
     text-decoration: none;
-    color: white;
+    color: #000000;
   }
   footer {
-    background-color: #00704e;
+    background-color: #FF704E;
   }
 #+END_SRC
 
 *** html scroll
 **** flex
 
-#+name: css_html_scroll
+#+name: css_dark_html_scroll
 #+BEGIN_SRC css
   /* flex */
   .flex-menu-bar {
@@ -1166,11 +2512,13 @@ Consider what if anything should be used here
     -webkit-align-items: center;
     align-items: center;
     width: 100%;
-    background-color: #ffffff;
+    margin-left: 5%;
+    margin-right: 2%;
+    background-color: #000000;
   }
   .flex-menu-option {
-    background-color: white;
-    margin: 8px;
+    background-color: #000000;
+    margin-right: 4px;
   }
   .flex-list {
     display: -webkit-flex;
@@ -1179,17 +2527,17 @@ Consider what if anything should be used here
     display: block;
     align-items: center;
     width: 100%;
-    background-color: #ffffff;
+    background-color: #000000;
   }
   .flex-list-item {
-    background-color: white;
+    background-color: #000000;
     margin: 4px;
   }
 #+END_SRC
 
 **** grid
 
-#+name: css_html_scroll
+#+name: css_dark_html_scroll
 #+BEGIN_SRC css
   /* grid */
   .wrapper {
@@ -1211,16 +2559,16 @@ Consider what if anything should be used here
       \"doc_suffix\";
     margin: 0px;
     padding: 0px;
-    background-color: #ffffff;
+    background-color: #000000;
   }
   .delimit {
     border-style: none;
-    border-color: white;
+    border-color: #000000;
     padding: 10px;
   }
   .headband {
     grid-area: headband;
-    background-color: #ffffff;
+    background-color: #000000;
   }
   .doc_header {
     grid-area: doc_header;
@@ -1268,11 +2616,17 @@ Consider what if anything should be used here
   }
   .nav-li a {
     text-decoration: none;
-    color: white;
+    color: #000000;
   }
   footer {
-    background-color: #00704e;
+    background-color: #FF704E;
   }
 #+END_SRC
 
+*** epub xhtml
+
+#+name: css_dark_epub
+#+BEGIN_SRC css
+#+END_SRC
+
 * __END__