-*- mode: org -*-
#+TITLE:       sisudoc spine (doc_reform) defaults css
#+DESCRIPTION: documents - structuring, publishing in multiple formats & search
#+FILETAGS:    :spine:output:xmls:css:
#+AUTHOR:      Ralph Amissah
#+EMAIL:       [[mailto:ralph.amissah@gmail.com][ralph.amissah@gmail.com]]
#+COPYRIGHT:   Copyright (C) 2015 - 2024 Ralph Amissah
#+LANGUAGE:    en
#+STARTUP:     content hideblocks hidestars noindent entitiespretty
#+PROPERTY:    header-args  :exports code
#+PROPERTY:    header-args+ :noweb yes
#+PROPERTY:    header-args+ :results no
#+PROPERTY:    header-args+ :cache no
#+PROPERTY:    header-args+ :padline no
#+PROPERTY:    header-args+ :mkdirp yes
#+OPTIONS:     H:3 num:nil toc:t \n:t ::t |:t ^:nil -:t f:t *:t

- [[./doc-reform.org][doc-reform.org]]  [[./][org/]]
- [[./output_hub.org][output_hub]]

* output css defaults :module:spine:output_xmls_css:
** _module template_

#+HEADER: :tangle "../src/sisudoc/io_out/xmls_css.d"
#+HEADER: :noweb yes
#+BEGIN_SRC d
<<doc_header_including_copyright_and_license>>
/++
  default css settings
+/
module sisudoc.io_out.xmls_css;
@safe:
template spineCss() {
  import std.format;
  auto spineCss(M)(M doc_matters) {
<<css_insert_shared_insert_variable_indent_values>>
<<css_insert_shared_insert_variable_ocn_color_values>>
    string _css_light_html_seg = format(q"┃
<<css_light_shared_html_general>>
<<css_light_shared_link>>
<<css_light_shared_div>>
<<css_light_shared_paragraphs_headings_blocks_misc>>
<<css_light_shared_img>>
<<css_light_shared_code_block>>
<<css_light_shared_paragraph_general>>
<<css_light_shared_paragraph_indent>>
<<css_light_shared_misc_tables_lists>>
<<css_light_shared_headings>>
<<css_shared_search_form>>
<<css_light_html_seg_previous_next>>
<<css_light_html_seg_flex>>
<<css_light_html_seg_grid>>
┃",
    _color_ocn_light,
    _css_indent,
    _color_ocn_light,
);
    string _css_dark_html_seg = format(q"┃
<<css_dark_shared_html_general>>
<<css_dark_shared_link>>
<<css_dark_shared_div>>
<<css_dark_shared_paragraphs_headings_blocks_misc>>
<<css_dark_shared_img>>
<<css_dark_shared_block_code>>
<<css_dark_shared_paragraph_general>>
<<css_dark_shared_paragraph_indent>>
<<css_dark_shared_misc_tables_lists>>
<<css_dark_shared_headings>>
<<css_shared_search_form>>
<<css_dark_html_seg_previous_next>>
<<css_dark_html_seg_flex>>
<<css_dark_html_seg_grid>>
┃",
    _color_ocn_dark,
    _css_indent,
    _color_ocn_dark,
);
    string _css_light_html_scroll = format(q"┃
<<css_light_shared_html_general>>
<<css_light_shared_link>>
<<css_light_shared_div>>
<<css_light_shared_paragraphs_headings_blocks_misc>>
<<css_light_shared_img>>
<<css_light_shared_code_block>>
<<css_light_shared_paragraph_general>>
<<css_light_shared_paragraph_indent>>
<<css_light_shared_misc_tables_lists>>
<<css_light_shared_headings>>
<<css_shared_search_form>>
<<css_light_html_scroll_flex>>
<<css_light_html_scroll_grid>>
┃",
    _color_ocn_light,
    _css_indent,
    _color_ocn_light,
);
    string _css_dark_html_scroll = format(q"┃
<<css_dark_shared_html_general>>
<<css_dark_shared_link>>
<<css_dark_shared_div>>
<<css_dark_shared_paragraphs_headings_blocks_misc>>
<<css_dark_shared_img>>
<<css_dark_shared_block_code>>
<<css_dark_shared_paragraph_general>>
<<css_dark_shared_paragraph_indent>>
<<css_dark_shared_misc_tables_lists>>
<<css_dark_shared_headings>>
<<css_shared_search_form>>
<<css_dark_html_scroll_flex>>
<<css_dark_html_scroll_grid>>
┃",
    _color_ocn_dark,
    _css_indent,
    _color_ocn_dark,
);
    string _css_light_epub = format(q"┃
<<css_light_shared_html_general>>
<<css_light_shared_link>>
<<css_light_shared_div>>
<<css_light_shared_paragraphs_headings_blocks_misc>>
<<css_light_shared_img>>
<<css_light_shared_code_block>>
<<css_light_shared_paragraph_general>>
<<css_light_shared_paragraph_indent>>
<<css_light_shared_misc_tables_lists>>
<<css_light_shared_headings>>
<<css_shared_search_form>>
<<css_light_epub>>
┃",
    _color_ocn_light,
    _css_indent,
    _color_ocn_light,
);
    string _css_dark_epub = format(q"┃
<<css_dark_shared_html_general>>
<<css_dark_shared_link>>
<<css_dark_shared_div>>
<<css_dark_shared_paragraphs_headings_blocks_misc>>
<<css_dark_shared_img>>
<<css_dark_shared_block_code>>
<<css_dark_shared_paragraph_general>>
<<css_dark_shared_paragraph_indent>>
<<css_dark_shared_misc_tables_lists>>
<<css_dark_shared_headings>>
<<css_shared_search_form>>
<<css_dark_epub>>
┃",
    _color_ocn_dark,
    _css_indent,
    _color_ocn_dark,
);
    auto css_() {
      struct _CSS {
        string html_seg    = "/* spine css html seg stylesheet */\n";
        string html_scroll = "/* spine css html scroll stylesheet */\n";
        string epub        = "/* spine css epub stylesheet */\n";
      }
      return _CSS();
    }
    auto css = css_();
    if (doc_matters.opt.action.css_theme_default) {
      css.html_seg    ~= _css_light_html_seg;
      css.html_scroll ~= _css_light_html_scroll;
      css.epub        ~= _css_light_epub;
    } else {
      css.html_seg    ~= _css_dark_html_seg;
      css.html_scroll ~= _css_dark_html_scroll;
      css.epub        ~= _css_dark_epub;
    }
    return css;
  }
}
#+END_SRC

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

- if base size is 16px, 62.5% is 10px
  1rem   = 10px
  1.6rem = 16px

#+NAME: css_light_shared_html_general
#+BEGIN_SRC css
html {
  font-size                : 62.5%%;
}
,*{
  padding                  : 0px;
  margin                   : 0px;
}
body {
  height                   : 100vh;
  font-size                : 1.6rem;
  background-color         : #FFFFFF;
  color                    : #000000;
  background               : #FFFFFF;
  background-color         : #FFFFFF;
}
#+END_SRC

**** link

#+NAME: css_light_shared_link
#+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                    : %s;
  text-decoration          : none;
}
a.lnkocn:visited {
  color                    : #32CD32;
  text-decoration          : none;
}
a.lnkocn:hover {
  color                    : #777777;
  font-size                : 1.8rem;
}
a.lnkicon:link {
  text-decoration          : none;
}
a.lnkicon:visited {
  text-decoration          : none;
}
a.lnkicon:hover {
  font-size                : 160%%;
}
a:hover img {
  background-color         : #FFFFFF;
}
a:active {
  color                    : #003399;
  text-decoration          : underline;
}
input {
  color                    : #000000;
  background-color         : #FFFFFF;
}
#+END_SRC

**** div

#+NAME: css_light_shared_div
#+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         : #FFFFFF;
}
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                : 1.4rem;
  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                : 1.5rem;
  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_paragraphs_headings_blocks_misc
#+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                : 1.6rem;
  font-weight              : normal;
  line-height              : 133%%;
  text-align               : justify;
  text-indent              : 0mm;
  margin-top               : 0.8em;
  margin-bottom            : 0.8em;
}
#+END_SRC

***** img

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

***** code block

#+NAME: css_light_shared_code_block
#+BEGIN_SRC css
pre {
  width                    : auto;
  display                  : block;
  clear                    : both;
  color                    : #555555;
}
pre.codeline {
  display                  : table;
  clear                    : both;
  table-layout             : fixed;
  margin-left              : 5%%;
  margin-right             : 5%%;
  width                    : 90%%;
  white-space              : pre-wrap;
  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                : 1.5rem;
  line-height              : 100%%;
}
pre.codeline::before {
  counter-reset            : linenum;
}
pre.codeline span.tr {
  display                  : table-row;
  counter-increment        : linenum;
}
pre.codeline span.th {
  display                  : table-cell;
  user-select              : none;
  -moz-user-select         : none;
  -webkit-user-select      : none;
  padding                  : 0.5em 0.5em;
  /* background-color         : #666666; */
}
pre.codeline span.th::before {
  content                  : counter(linenum) ".";
  color                    : #999999;
  text-align               : right;
  display                  : block;
}
pre.codeline span.th {
  width                    : 4em;
}
pre.codeline code {
  display                  : table-cell;
}
p.code {
  border-style             : none;
}
#+END_SRC

***** paragraph general

#+NAME: css_light_shared_paragraph_general
#+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                : 1.4rem;
  display                  : inline;
}
p.endnote {
  font-size                : 1.55rem;
  line-height              : 120%%;
  text-align               : left;
  margin-right             : 15mm;
  padding-left             : 1em;
  text-indent              : -1em;
}
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;
}
.small, .small_center {
  font-size                : 1.4rem;
  margin-top               : 0px;
  margin-bottom            : 0px;
  margin-right             : 6px;
}
p.small {
  text-align               : left;
}
p.small_center {
  margin-left              : 0px;
  margin-right             : 0px;
  text-align               : center;
}
.tiny, .tiny_left, .tiny_right, .tiny_center {
  font-size                : 1.2rem;
  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.icons, .icons_center {
  font-size                : 100%%;
  margin-top               : 0px;
  margin-bottom            : 0px;
  margin-right             : 6px;
}
p.icons {
  text-align               : left;
}
p.concordance_word {
  line-height              : 150%%;
  font-weight              : bold;
  display                  : inline;
  margin-top               : 4px;
  margin-bottom            : 1px;
}
p.concordance_count {
  font-size                : 1.4rem;
  color                    : #777777;
  display                  : inline;
  margin-left              : 0em;
}
p.concordance_object {
  font-size                : 1.4rem;
  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_paragraph_indent
#+BEGIN_SRC css
%s
#+END_SRC

***** misc including tables & lists

#+NAME: css_light_shared_misc_tables_lists
#+BEGIN_SRC css
note { white-space         : pre; }
label.ocn {
  width                    : 2%%;
  float                    : right;
  top                      : 0;
  font-size                : 1.4rem;
  margin-top               : 0px;
  margin-bottom            : 6px;
  margin-right             : 6px;
  text-align               : right;
  color                    : %s;
  -khtml-user-select       : none;
  -moz-user-select         : none;
  -ms-user-select          : none;
  -o-user-select           : none;
  -webkit-user-select      : none;
  user-select              : none;
}
table {
  display                  : block;
  margin-left              : 5%%;
  margin-right             : 2em;
  background-color         : inherit;
}
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                : 1.4rem;
}
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_headings
#+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             : 1.85rem; }
h1 { font-size             : 1.8rem; }
h2 { font-size             : 1.75rem; }
h3 { font-size             : 1.7rem; }
h4 { font-size             : 1.65rem; }
h5 { font-size             : 1.6rem; }
h6 { font-size             : 1.55rem; }
h7 { font-size             : 1.5rem; }
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                : 1.85rem;
  line-height              : 150%%;
}
h1.toc {
  margin-left              : 1em;
  font-size                : 1.8rem;
  line-height              : 150%%;
}
h2.toc {
  margin-left              : 2em;
  font-size                : 1.75rem;
  line-height              : 140%%;
}
h3.toc {
  margin-left              : 3em;
  font-size                : 1.7rem;
  line-height              : 120%%;
}
h4.toc {
  margin-left              : 4em;
  font-size                : 1.65rem;
  line-height              : 120%%;
}
h5.toc {
  margin-left              : 5em;
  font-size                : 1.6rem;
  line-height              : 110%%;
}
h6.toc {
  margin-left              : 6em;
  font-size                : 1.55rem;
  line-height              : 110%%;
}
h7.toc {
  margin-left              : 7em;
  font-size                : 1.5rem;
  line-height              : 100%%;
}
.subtoc {
  margin-right             : 34%%;
  font-weight              : normal;
}
h5.subtoc {
  margin-left              : 2em;
  font-size                : 1.45rem;
  margin-top               : 2px;
  margin-bottom            : 2px;
}
h6.subtoc {
  margin-left              : 3em;
  font-size                : 1.4rem;
  margin-top               : 0px;
  margin-bottom            : 0px;
}
h7.subtoc {
  margin-left              : 4em;
  font-size                : 1.35rem;
  margin-top               : 0px;
  margin-bottom            : 0px;
}
#+END_SRC

*** html seg
**** previous next

#+NAME: css_light_html_seg_previous_next
#+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                    : 3em;
  height                   : 3em;
  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                : 1.8rem;
}
.prev-next-button {
  position                 : absolute;
  top                      : 8px;
  width                    : 3em;
  height                   : 3em;
  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                    : 8em;
 }
.previous {
  right                    : 4em;
 }
.next {
  right                    : 0em;
 }
.arrow {
  fill                     : #333333;
}
.minitoc {
  line-height              : 120%%;
  font-size                : 1.6rem;
  margin-top               : 6px;
  margin-bottom            : 0px;
  padding-left             : 0em;
  text-indent              : 0em;
  -khtml-user-select       : none;
  -moz-user-select         : none;
  -ms-user-select          : none;
  -o-user-select           : none;
  -webkit-user-select      : none;
  user-select              : none;
}
#+END_SRC

**** flex

#+NAME: css_light_html_seg_flex
#+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_grid
#+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_flex
#+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_grid
#+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_html_general
#+BEGIN_SRC css
html {
}
,*{
  padding                  : 0px;
  margin                   : 0px;
}
body {
  height                   : 100vh;
  background-color         : #000000;
  color                    : #CCCCCC;
  background               : #000000;
  background-color         : #000000;
}
#+END_SRC

**** link

#+NAME: css_dark_shared_link
#+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                    : %s;
  text-decoration          : none;
}
a.lnkocn:visited {
  color                    : #9ACD32;
  text-decoration          : none;
}
a.lnkocn:hover {
  color                    : #BBBBBB;
  font-size                : 1.8rem;
}
a.lnkicon:link {
  text-decoration          : none;
}
a.lnkicon:visited {
  text-decoration          : none;
}
a.lnkicon:hover {
  color                    : #BBBBBB;
  font-size                : 120%%;
}
a:hover img {
  background-color         : #000000;
}
a:active {
  color                    : #888888;
  text-decoration          : underline;
}
input {
  color                    : #FFFFFF;
  background-color         : #777777;
}
#+END_SRC

**** div

#+NAME: css_dark_shared_div
#+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         : #000000;
}
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                : 1.4rem;
  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                : 1.5rem;
  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_paragraphs_headings_blocks_misc
#+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                : 1.6rem;
  font-weight              : normal;
  line-height              : 133%%;
  text-align               : justify;
  text-indent              : 0mm;
  margin-top               : 0.8em;
  margin-bottom            : 0.8em;
}
#+END_SRC

***** img

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

***** code block

#+NAME: css_dark_shared_block_code
#+BEGIN_SRC css
pre {
  width                    : auto;
  display                  : block;
  clear                    : both;
  color                    : #555555;
}
pre.codeline {
  display                  : table;
  clear                    : both;
  table-layout             : fixed;
  margin-left              : 5%%;
  margin-right             : 5%%;
  width                    : 90%%;
  white-space              : pre-wrap;
  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                : 1.5rem;
  line-height              : 100%%;
}
pre.codeline::before {
  counter-reset            : linenum;
}
pre.codeline span.tr {
  display                  : table-row;
  counter-increment        : linenum;
}
pre.codeline span.th {
  display                  : table-cell;
  user-select              : none;
  -moz-user-select         : none;
  -webkit-user-select      : none;
  padding                  : 0.5em 0.5em;
}
pre.codeline span.th::before {
  content                  : counter(linenum) ".";
  color                    : #999999;
  text-align               : right;
  display                  : block;
}
pre.codeline span.th {
  width                    : 4em;
}
pre.codeline code {
  display                  : table-cell;
}
p.code {
  border-style             : none;
}
#+END_SRC

***** paragraph general

#+NAME: css_dark_shared_paragraph_general
#+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                : 1.4rem;
  display                  : inline;
}
p.endnote {
  font-size                : 1.5rem;
  line-height              : 120%%;
  text-align               : left;
  margin-right             : 15mm;
  padding-left             : 1em;
  text-indent              : -1em;
}
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;
}
.small, .small_center {
  font-size                : 1.4rem;
  margin-top               : 0px;
  margin-bottom            : 0px;
  margin-right             : 6px;
}
p.small {
  text-align               : left;
}
p.small_center {
  margin-left              : 0px;
  margin-right             : 0px;
  text-align               : center;
}
.tiny, .tiny_left, .tiny_right, .tiny_center {
  font-size                : 1.35rem;
  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                : 1.4rem;
  color                    : #555555;
  display                  : inline;
  margin-left              : 0em;
}
p.concordance_object {
  font-size                : 1.4rem;
  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_paragraph_indent
#+BEGIN_SRC css
%s
#+END_SRC

***** misc including tables & lists

#+NAME: css_dark_shared_misc_tables_lists
#+BEGIN_SRC css
note { white-space         : pre; }
label.ocn {
  width                    : 2%%;
  float                    : right;
  top                      : 0;
  font-size                : 1.4rem;
  margin-top               : 0px;
  margin-bottom            : 6px;
  margin-right             : 6px;
  text-align               : right;
  color                    : %s;
  -khtml-user-select       : none;
  -moz-user-select         : none;
  -ms-user-select          : none;
  -o-user-select           : none;
  -webkit-user-select      : none;
  user-select              : none;
}
table {
  display                  : block;
  margin-left              : 5%%;
  margin-right             : 2em;
  background-color         : inherit;
}
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                : 1.4rem;
}
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               : (../image_sys/bullet_09.png) no-repeat 0px 6px;
}
ul { }
#+END_SRC

***** headings

#+NAME: css_dark_shared_headings
#+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             : 1.9rem; }
h1 { font-size             : 1.8rem; }
h2 { font-size             : 1.75rem; }
h3 { font-size             : 1.7rem; }
h4 { font-size             : 1.65rem; }
h5 { font-size             : 1.6rem; }
h6 { font-size             : 1.55rem; }
h7 { font-size             : 1.5rem; }
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                : 1.8rem;
  line-height              : 150%%;
}
h1.toc {
  margin-left              : 1em;
  font-size                : 1.75rem;
  line-height              : 150%%;
}
h2.toc {
  margin-left              : 2em;
  font-size                : 1.7rem;
  line-height              : 140%%;
}
h3.toc {
  margin-left              : 3em;
  font-size                : 1.65rem;
  line-height              : 120%%;
}
h4.toc {
  margin-left              : 4em;
  font-size                : 1.6rem;
  line-height              : 120%%;
}
h5.toc {
  margin-left              : 5em;
  font-size                : 1.5rem;
  line-height              : 110%%;
}
h6.toc {
  margin-left              : 6em;
  font-size                : 1.5rem;
  line-height              : 110%%;
}
h7.toc {
  margin-left              : 7em;
  font-size                : 1.45rem;
  line-height              : 100%%;
}
.subtoc {
  margin-right             : 34%%;
  font-weight              : normal;
}
h5.subtoc {
  margin-left              : 2em;
  font-size                : 1.4rem;
  margin-top               : 2px;
  margin-bottom            : 2px;
}
h6.subtoc {
  margin-left              : 3em;
  font-size                : 1.35;
  margin-top               : 0px;
  margin-bottom            : 0px;
}
h7.subtoc {
  margin-left              : 4em;
  font-size                : 1.3rem;
  margin-top               : 0px;
  margin-bottom            : 0px;
}
#+END_SRC

*** html seg
**** previous next

#+NAME: css_dark_html_seg_previous_next
#+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                    : 3em;
  height                   : 3em;
  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                : 1.8rem;
}
.prev-next-button {
  position                 : absolute;
  top                      : 8px;
  width                    : 3em;
  height                   : 3em;
  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                    : 8em;
 }
.previous {
  right                    : 4em;
 }
.next {
  right                    : 0em;
 }
.arrow {
   fill                    : #DDDDDD;
}
.minitoc {
  line-height              : 120%%;
  font-size                : 1.6rem;
  margin-top               : 6px;
  margin-bottom            : 0px;
  padding-left             : 0em;
  text-indent              : 0em;
  -khtml-user-select       : none;
  -moz-user-select         : none;
  -ms-user-select          : none;
  -o-user-select           : none;
  -webkit-user-select      : none;
  user-select              : none;
}
#+END_SRC

**** flex

#+NAME: css_dark_html_seg_flex
#+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_grid
#+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_flex
#+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_grid
#+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

*** form search

#+NAME: css_shared_search_form
#+BEGIN_SRC css
input, select, textarea {
  font-size                : 2.2rem;
}
input[type="text"] {
  font-size                : 1.8rem;
  line-height              : 120%%;
}
button[type="submit"] {
  font-size                : 1.8rem;
  line-height              : 120%%;
}
p.form {
  font-size                : 2.2rem;
  line-height              : 150%%;
}
#+END_SRC

*** epub xhtml

#+NAME: css_dark_epub
#+BEGIN_SRC css
#+END_SRC

** variables
*** ocn (visible or hidden)

#+NAME: css_insert_shared_insert_variable_ocn_color_values
#+BEGIN_SRC css
string _color_ocn_light  = (doc_matters.opt.action.ocn_hidden) ? "#FFFFFF" : "#777777";
string _color_ocn_dark   = (doc_matters.opt.action.ocn_hidden) ? "#000000" : "#BBBBBB";
#+END_SRC

*** indent levels
#+NAME: css_insert_shared_insert_variable_indent_values
#+BEGIN_SRC css
  string _css_indent = format(q"┃
/* 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

* document header including copyright & license

#+NAME: doc_header_including_copyright_and_license
#+HEADER: :noweb yes
#+BEGIN_SRC emacs-lisp
<<./sisudoc_spine_version_info_and_doc_header_including_copyright_and_license.org:spine_doc_header_including_copyright_and_license()>>
#+END_SRC

* __END__