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

* css.rb

#+HEADER: :tangle "../lib/sisu/css.rb"
#+BEGIN_SRC ruby
#<<sisu_document_header>>
module SiSU_Style
  require_relative 'se'                                 # se.rb
  require_relative 'html_parts'                         # html_parts.rb
  class CSS_HeadInfo
    def initialize(md,ft='html')
      @md,@ft=md,ft
      @env=SiSU_Env::InfoEnv.new('',md)
      @fn_css ||=SiSU_Env::CSS_Default.new
      @o_str ||=SiSU_Env::ProcessingSettings.new(md).output_dir_structure
      css_copy
    end
    def stylesheet
      def css_path
        SiSU_Env::CSS_Stylesheet.new(@md)
      end
      def css_embed_content
        @css_embed_content ||=SiSU_Style::CSS.new
      end
      def css_embed?
        if @ft=='html' \
        && @o_str.dump_or_redirect?
          true
        else
          false
        end
      end
      def css_embed(css)
        <<-WOK
          <style TYPE="text/css">
          #{css}
          </style>
        WOK
      end
      def css_action
        css=case @ft
        when 'html'
          css=css_embed_content.html
          css_embed(css)
        when 'xhtml'
          css_path.xhtml
        when 'xml_sax'
          css_path.xml_sax
        when 'xml_dom'
          css_path.xml_dom
        when 'xml_docbook'
          css_path.xml_docbook
        else
          css_embed_content.html
        end
      end
      def css_head
        (css_embed?) \
        ? css_action
        : "#{css_path.html}#{css_path.html_seg}"
      end
      def css_head_seg
        (css_embed?) \
        ? css_action
        : css_path.html_seg
      end
      def css_head_xml
        css_action
      end
      self
    end
    def css_copy
      if @o_str.dump_or_redirect?
        css=SiSU_Style::CSS.new
        if @o_str.dump?
          css_pth="#{@md.opt.opt_act[:dump][:inst]}/#{@env.path.style}"
        elsif @o_str.redirect?
          css_pth="#{@md.opt.opt_act[:redirect][:inst]}/#{@md.fnb}/#{@env.path.style}"
        end
        FileUtils::mkdir_p(css_pth) unless FileTest.directory?(css_pth)
        case @ft
        when 'html'
          style=File.new("#{css_pth}/#{@fn_css.html}",'w')
          style << css.html
          style.close
        when 'xhtml'
          style=File.new("#{css_pth}/#{@fn_css.xhtml}",'w')
          style << css.xhtml
          style.close
        when 'xml_sax'
          style=File.new("#{css_pth}/#{@fn_css.xml_sax}",'w')
          style << css.xml_sax
          style.close
        when 'xml_dom'
          style=File.new("#{css_pth}/#{@fn_css.xml_dom}",'w')
          style << css.xml_dom
          style.close
          css_path.xml_dom
        when 'xml_docbook'
          style=File.new("#{css_pth}/#{@fn_css.xml_docbook}",'w')
          style << css.xml_docbook
          style.close
          css_path.xml_docbook
        end
      end
    end
  end
  class CSS
    include SiSU_Parts_HTML
    def fonts
      the_font.set_fonts
    end
    def html_tables                               #stylesheet for css table_pages
<<WOK
/* SiSU table output stylesheet */
  body {
    color: black;
    background: #{the_color.white};
  }
  p {
    display: block;
    line-height: 1.5;
    font-family: #{the_font.set_fonts};
  }
  a:link {
    color: #{the_color.blue_ink};
    text-decoration: none;
  }
  a:visited {
    color: #{the_color.blue_ink};
    text-decoration: none;
    /* background-color: #{the_color.blue_tinge}; */
  }
  a:hover {
    color: #{the_color.black};
    text-decoration: underline;
    background-color: #{the_color.yellow_light};
  }
  a:active {
    color: #{the_color.blue_ink};
    text-decoration: underline;
  }
WOK
    end
    def harvest
      <<WOK
/* SiSU harvest css default stylesheet */
  body {
    color: black;
    background: #ffffff;
    background-color: #ffffff;
  }
  a:link {
    color: #003399;
    text-decoration: none;
  }
  a:visited {
    color: #003399;
    text-decoration: none;
  }
  a:hover {
    color: #000000;
    background-color: #f9f9aa;
  }
  a:hover img {
    background-color: #ffffff;
  }
  a:active {
    color: #003399;
    text-decoration: underline;
  }

  .norm, .bold {
    line-height: 150%;
    margin-left: 1em;
    margin-right: 2em;
    margin-top: 10px;
    margin-bottom: 0px;
    text-indent: 0mm;
  }
  p, h0, h1, h2, h3, h4, h5, h6, h7 {
    display: block;
    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
    font-size: 100%;
    font-weight: normal;
    line-height: 150%;
    /* text-align: justify; */
    margin-left: 1em;
    text-indent: 0mm;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 6px;
    text-align: left;
  }
  h1 {
    font-size: 120%;
    font-weight: bold;
    color: white;
    background: #000088;
    margin-left: 0em;
  }
  p.work {
    font-size: 80%;
    margin-left: 5em;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 6px;
    text-align: left;
  }
  p.author {
    font-size: 100%;
    margin-left: 2em;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 6px;
    text-align: left;
  }
  p.publication {
    font-size: 80%;
    margin-left: 4em;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 6px;
    text-align: left;
  }
  p.letter {
    font-weight: bold;
    font-size: 60%;
    margin-left: 1em;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 6px;
    text-align: left;
    color: white;
    background: #880000;
  }
  p.lev0 {
    font-size: 120%;
    margin-left: 1em;
    color: white;
    background: #000000;
  }

  p.lev1 {
    font-size: 110%;
    margin-left: 2em;
    color: white;
    background: #444444;
  }

  p.lev2 {
    font-size: 100%;
    margin-left: 3em;
    background: #888888;
  }

  p.lev3 {
    font-size: 90%;
    margin-left: 4em;
    background: #bbbbbb;
  }

  p.lev4 {
    font-size: 80%;
    margin-left: 5em;
    background: #eeeeee;
  }

  p.lev5 {
    font-size: 80%;
    margin-left: 6em;
  }
WOK
    end
    def html                                      #stylesheet for css html pages== html.css
<<WOK
/* SiSU css default stylesheet */
  body {
    color: black;
    background: #ffffff;
    background-color: #ffffff;
  }
/*
    table {
      margin-left: 5%;
      display: block;
    }
    tr {
      display: block;
    }
    th,td {
      display: inline;
      vertical-align: top;
    }
,*/
  a:link {
    color: #003399;
    text-decoration: none;
  }
  a:visited {
    color: #003399;
    text-decoration: none;
  }
  a:hover {
    color: #000000;
    background-color: #f9f9aa;
  }
  a:hover img {
    background-color: #ffffff;
  }
  a:active {
    color: #003399;
    text-decoration: underline;
  }
  a.lnkocn:link {
    color: #777777;
    text-decoration: none;
  }
  a.lnkocn:visited {
    color: #555555;
    text-decoration: none;
  }
  div {
    margin-left: 0;
    margin-right: 0;
  }
  div.p {
    margin-left: 5%;
    margin-right: 1%;
  }

  #top_band {
    position: absolute;
    top: 0;
    bottom: 80px;
    width: 100%;
  }
  #top_band_search {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-left: 75%;
    width: 20%;
  }
  #column_left {
    position: absolute;
    top: 80px;
    left: 0;
    margin-left: 1%;
    width: 20%;
  }
  #column_center {
    position: absolute;
    top: 80px;
    margin-left: 20%;
    width: 55%;
  }
  #column_right {
    position: absolute;
    top: 80px;
    right: 0px;
    margin-left: 75%;
    width: 25%;
  }
  #pane_major {
    position: absolute;
    top: 0px;
    left: 0;
    margin-left: 0;
    width: 80%;
  }
  #pane_minor {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-left: 75%;
    width: 20%;
    background-color: #aaaaaa;
  }

  .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 {
    display: block;
    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
    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;
  }

  /* 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.h0i0 {
    padding-left: 0em;
    text-indent:  0em;
  }
  p.h0i1 {
    padding-left: 1em;
    text-indent: -1em;
  }
  p.h0i2 {
    padding-left: 2em;
    text-indent: -2em;
  }
  p.h0i3 {
    padding-left: 3em;
    text-indent: -3em;
  }
  p.h0i4 {
    padding-left: 4em;
    text-indent: -4em;
  }
  p.h0i5 {
    padding-left: 5em;
    text-indent: -5em;
  }
  p.h0i6 {
    padding-left: 6em;
    text-indent: -6em;
  }
  p.h0i7 {
    padding-left: 7em;
    text-indent: -7em;
  }
  p.h0i8 {
    padding-left: 8em;
    text-indent: -8em;
  }
  p.h0i9 {
    padding-left: 9em;
    text-indent: -9em;
  }

  p.h1i0 {
    padding-left: 0em;
    text-indent:  1em;
  }
  p.h1i1 {
    padding-left: 1em;
    text-indent:  0em;
  }
  p.h1i2 {
    padding-left: 2em;
    text-indent: -1em;
  }
  p.h1i3 {
    padding-left: 3em;
    text-indent: -2em;
  }
  p.h1i4 {
    padding-left: 4em;
    text-indent: -3em;
  }
  p.h1i5 {
    padding-left: 5em;
    text-indent: -4em;
  }
  p.h1i6 {
    padding-left: 6em;
    text-indent: -5em;
  }
  p.h1i7 {
    padding-left: 7em;
    text-indent: -6em;
  }
  p.h1i8 {
    padding-left: 8em;
    text-indent: -7em;
  }
  p.h1i9 {
    padding-left: 9em;
    text-indent: -8em;
  }

  p.h2i0 {
    padding-left: 0em;
    text-indent:  2em;
  }
  p.h2i1 {
    padding-left: 1em;
    text-indent:  1em;
  }
  p.h2i2 {
    padding-left: 2em;
    text-indent:  0em;
  }
  p.h2i3 {
    padding-left: 3em;
    text-indent: -1em;
  }
  p.h2i4 {
    padding-left: 4em;
    text-indent: -2em;
  }
  p.h2i5 {
    padding-left: 5em;
    text-indent: -3em;
  }
  p.h2i6 {
    padding-left: 6em;
    text-indent: -4em;
  }
  p.h2i7 {
    padding-left: 7em;
    text-indent: -5em;
  }
  p.h2i8 {
    padding-left: 8em;
    text-indent: -6em;
  }
  p.h2i9 {
    padding-left: 9em;
    text-indent: -7em;
  }

  p.h3i0 {
    padding-left: 0em;
    text-indent:  3em;
  }
  p.h3i1 {
    padding-left: 1em;
    text-indent:  2em;
  }
  p.h3i2 {
    padding-left: 2em;
    text-indent:  1em;
  }
  p.h3i3 {
    padding-left: 3em;
    text-indent:  0em;
  }
  p.h3i4 {
    padding-left: 4em;
    text-indent: -1em;
  }
  p.h3i5 {
    padding-left: 5em;
    text-indent: -2em;
  }
  p.h3i6 {
    padding-left: 6em;
    text-indent: -3em;
  }
  p.h3i7 {
    padding-left: 7em;
    text-indent: -4em;
  }
  p.h3i8 {
    padding-left: 8em;
    text-indent: -5em;
  }
  p.h3i9 {
    padding-left: 9em;
    text-indent: -6em;
  }

  p.h4i0 {
    padding-left: 0em;
    text-indent:  4em;
  }
  p.h4i1 {
    padding-left: 1em;
    text-indent:  3em;
  }
  p.h4i2 {
    padding-left: 2em;
    text-indent:  2em;
  }
  p.h4i3 {
    padding-left: 3em;
    text-indent:  1em;
  }
  p.h4i4 {
    padding-left: 4em;
    text-indent:  0em;
  }
  p.h4i5 {
    padding-left: 5em;
    text-indent: -1em;
  }
  p.h4i6 {
    padding-left: 6em;
    text-indent: -2em;
  }
  p.h4i7 {
    padding-left: 7em;
    text-indent: -3em;
  }
  p.h4i8 {
    padding-left: 8em;
    text-indent: -4em;
  }
  p.h4i9 {
    padding-left: 9em;
    text-indent: -5em;
  }

  p.h5i0 {
    padding-left: 0em;
    text-indent:  5em;
  }
  p.h5i1 {
    padding-left: 1em;
    text-indent:  4em;
  }
  p.h5i2 {
    padding-left: 2em;
    text-indent:  3em;
  }
  p.h5i3 {
    padding-left: 3em;
    text-indent:  2em;
  }
  p.h5i4 {
    padding-left: 4em;
    text-indent:  1em;
  }
  p.h5i5 {
    padding-left: 5em;
    text-indent:  0em;
  }
  p.h5i6 {
    padding-left: 6em;
    text-indent: -1em;
  }
  p.h5i7 {
    padding-left: 7em;
    text-indent: -2em;
  }
  p.h5i8 {
    padding-left: 8em;
    text-indent: -3em;
  }
  p.h5i9 {
    padding-left: 9em;
    text-indent: -4em;
  }

  p.h6i0 {
    padding-left: 0em;
    text-indent:  6em;
  }
  p.h6i1 {
    padding-left: 1em;
    text-indent:  5em;
  }
  p.h6i2 {
    padding-left: 2em;
    text-indent:  4em;
  }
  p.h6i3 {
    padding-left: 3em;
    text-indent:  3em;
  }
  p.h6i4 {
    padding-left: 4em;
    text-indent:  2em;
  }
  p.h6i5 {
    padding-left: 5em;
    text-indent:  1em;
  }
  p.h6i6 {
    padding-left: 6em;
    text-indent:  0em;
  }
  p.h6i7 {
    padding-left: 7em;
    text-indent: -1em;
  }
  p.h6i8 {
    padding-left: 8em;
    text-indent: -2em;
  }
  p.h6i9 {
    padding-left: 9em;
    text-indent: -3em;
  }

  p.h7i0 {
    padding-left: 0em;
    text-indent:  7em;
  }
  p.h7i1 {
    padding-left: 1em;
    text-indent:  6em;
  }
  p.h7i2 {
    padding-left: 2em;
    text-indent:  5em;
  }
  p.h7i3 {
    padding-left: 3em;
    text-indent:  4em;
  }
  p.h7i4 {
    padding-left: 4em;
    text-indent:  3em;
  }
  p.h7i5 {
    padding-left: 5em;
    text-indent:  2em;
  }
  p.h7i6 {
    padding-left: 6em;
    text-indent:  1em;
  }
  p.h7i7 {
    padding-left: 7em;
    text-indent:  0em;
  }
  p.h7i8 {
    padding-left: 8em;
    text-indent: -1em;
  }
  p.h7i9 {
    padding-left: 9em;
    text-indent: -2em;
  }

  p.h8i0 {
    padding-left: 0em;
    text-indent:  8em;
  }
  p.h8i1 {
    padding-left: 1em;
    text-indent:  7em;
  }
  p.h8i2 {
    padding-left: 2em;
    text-indent:  6em;
  }
  p.h8i3 {
    padding-left: 3em;
    text-indent:  5em;
  }
  p.h8i4 {
    padding-left: 4em;
    text-indent:  4em;
  }
  p.h8i5 {
    padding-left: 5em;
    text-indent:  3em;
  }
  p.h8i6 {
    padding-left: 6em;
    text-indent:  2em;
  }
  p.h8i7 {
    padding-left: 7em;
    text-indent:  1em;
  }
  p.h8i8 {
    padding-left: 8em;
    text-indent:  0em;
  }
  p.h8i9 {
    padding-left: 9em;
    text-indent: -1em;
  }

  p.h9i0 {
    padding-left: 0em;
    text-indent:  9em;
  }
  p.h9i1 {
    padding-left: 1em;
    text-indent:  8em;
  }
  p.h9i2 {
    padding-left: 2em;
    text-indent:  7em;
  }
  p.h9i3 {
    padding-left: 3em;
    text-indent:  6em;
  }
  p.h9i4 {
    padding-left: 4em;
    text-indent:  5em;
  }
  p.h9i5 {
    padding-left: 5em;
    text-indent:  4em;
  }
  p.h9i6 {
    padding-left: 6em;
    text-indent:  3em;
  }
  p.h9i7 {
    padding-left: 7em;
    text-indent:  2em;
  }
  p.h9i8 {
    padding-left: 8em;
    text-indent:  1em;
  }
  p.h9i9 {
    padding-left: 9em;
    text-indent:  0em;
  }

  p.it0 {
    margin-left: 0em;
    margin-top: 6px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it1 {
    margin-left: 1em;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it2 {
    margin-left: 2em;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it3 {
    margin-left: 3em;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it4 {
    margin-left: 4em;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it5 {
    margin-left: 5em;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it6 {
    margin-left: 6em;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it7 {
    margin-left: 7em;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it8 {
    margin-left: 8em;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
  }
  p.it9 {
    margin-left: 9em;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 100%;
  }

  p.block { }

  p.group { }

  p.alt { }

  p.verse {
    margin-bottom: 6px;
  }

  p.code {
    font-family: inconsolata, andale mono, courier new, courier, monospace;
    font-size: 90%;
    text-align: left;
    background-color: #eeeeee;
  }

  p.caption {
    text-align: left;
    font-size: 80%;
    display: inline;
  }

  p.endnote {
    font-size: 96%;
    line-height: 120%;
    text-align: left;
    margin-right: 15mm;
  }
  p.endnote_indent {
    font-size: 96%;
    line-height: 120%;
    text-align: left;
    margin-left: 2em;
    margin-right: 15mm;
  }

  p.center {
    text-align: center;
  }
  p.bold {
    font-weight: bold;
  }
  p.bold_left {
    font-weight: bold;
    text-align: left;
  }
  p.centerbold {
    text-align: center;
    font-weight: bold;
  }
  p.em {
    font-weight: bold;
    font-style: normal;
    background: #fff3b6;
  }

  p.small {
    font-size: 80%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 6px;
    text-align: left;
  }

  .tiny, .tiny_left, .tiny_right, .tiny_center {
    font-size: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #777777;
    margin-right: 6px;
    text-align: left;
  }
  p.tiny { }
  p.tiny_left {
    margin-left: 0px;
    margin-right: 0px;
    text-align: left;
  }
  p.tiny_right {
    margin-right: 1em;
    text-align: right;
  }
  p.tiny_center {
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
  }

  p.pane, p.pane_title, p.pane_blurb, p.pane_link, p.pane_indent {
    font-size: 80%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2mm;
    margin-right: 4px;
    text-align: left;
  }
  p.pane { }
  p.pane_title {
    font-weight: bold;
    margin-bottom: 0px;
  }
  p.pane_blurb {
    font-size: 10px;
    margin-bottom: 0px;
  }
  p.pane_link {
    font-size: 10px;
    margin-bottom: 0px;
    margin-left: 4mm;
  }
  p.pane_indent {
    font-size: 10px;
    margin-bottom: 0px;
    margin-left: 4mm;
  }

  p.concordance_word {
    line-height: 150%;
    font-weight: bold;
    display: inline;
    margin-top: 4px;
    margin-bottom: 1px;
  }
  p.concordance_count {
    font-size: 80%;
    color: #777777;
    display: inline;
    margin-left: 0em;
  }
  p.concordance_object {
    font-size: 80%;
    line-height: 120%;
    text-align: left;
    margin-left: 3em;
    margin-top: 1px;
    margin-bottom: 3px;
  }
  p.book_index_lev1 {
    line-height: 100%;
    margin-top: 4px;
    margin-bottom: 1px;
  }
  p.book_index_lev2 {
    line-height: 100%;
    text-align: left;
    margin-left: 3em;
    margin-top: 1px;
    margin-bottom: 3px;
  }

  p.quickref {
    font-size: 10px;
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #777777;
    margin-right: 5px;
    text-align: left;
  }
  p.bigref {
    font-size: 11px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #777777;
    margin-right: 5px;
    text-align: center;
  }

  p.letter {
    font-weight: bold;
    font-size: 80%;
    margin-left: 0em;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 6px;
    text-align: left;
    color: white;
    background: #880000;
  }

  tt {
    font-family: inconsolata, andale mono, courier new, courier, monospace;
    background-color: #eeeeee;
  }

  label.ocn {
    width: 2%;
    float: right;
    top: 0;
    font-size: 10px;
    margin-top: 0px;
    margin-bottom: 5px;
    color: #777777;
    margin-right: 5px;
    text-align: right;
    background-color: #ffffff;
  }

  table { }
  tr { }
  th,td {
    vertical-align: top;
    text-align: left;
  }
  th {
    font-weight: bold;
  }

  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;
  }

  #horizontal_links {
    background: #eeeeee;
    margin-left: 5%;
    margin-right: 5%;
  }
  #horizontal {
    margin: 0;
    padding: 0 0 0 10px;
    border-top: 1px solid #000077;
    border-bottom: 1px solid #000077;
  }
  #horizontal li {
    margin: 0 0 0 0;
    padding: 0 16px 0 0;
    display: inline;
    list-style-type: none;
    text-align: left;
    background: none;
  }
  #horizontal a {
    line-height: 12px;
    margin: 0 0 0 0;
    text-decoration: none;
    color: #000077;
  }
  #horizontal a.active, #horizontal a:hover {
    border-bottom: 2px solid #777777;
    padding-bottom: 2px;
    color: #000077;
  }
  #horizontal a:hover {
    color: #000077;
  }

  #document_versions {
    position: absolute;
    top: 10mm;
    right: 2%;
    width: 12%;
    float: right;
  }

  #vertical_links {
    position: absolute;
    top: 10mm;
    right: 0px;
    width: 20%;
    background: #dddddd;
    float: right;
  }
  #vertical {
    padding: 0 12px 0px 0px;
    margin-left: 2%;
    margin-right: 2%;
  }
  #vertical li {
    display: block;
    list-style-type: none;
  }
  #vertical a {
    line-height: 12px;
    text-decoration: none;
    color: #000077;
  }
  #vertical a.active, #vertical a:hover {
    border-bottom: 2px solid #777777;
    padding-bottom: 2px;
    color: #000077;
  }

  ul, li {
    list-style-type: none;
    list-style: none;
    padding-left: 20px;
    display: block;
    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
    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 {
  }
  li.bullet { margin-left: 1em; }
  li.i1 { margin-left: 2em; }
  li.i2 { margin-left: 3em; }
  li.i3 { margin-left: 4em; }
  li.i4 { margin-left: 5em; }
  li.i5 { margin-left: 6em; }
  li.i6 { margin-left: 7em; }
  li.i7 { margin-left: 8em; }
  li.i8 { margin-left: 9em; }
  li.i9 { margin-left: 10em; }

  li.doc, li.ref, li.refcenter {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    font-size: 8px;
    font-style: normal;
    text-align: left;
  }
  li.doc {
    background: url(../image_sys/bullet_09.png) no-repeat 0px 6px;
    padding-left: 16px;
    margin-left: 10px;
    margin-right: 0px;
  }
  li.ref {
    background: none;
    padding-left: 0;
    margin-left: 0;
    color: #777777;
  }
  li.refcenter {
    background: url(../image_sys/bullet_09.png) no-repeat 0px 6px;
    padding-left: 20px;
    margin-left: 10%;
    font-size: 9px;
    color: #777777;
    text-align: center;
  }
  li.refbold {
    list-style-type: none;
    padding-left: 16px;
    margin-left: 0;
    margin-right: 10mm;
    font-weight: bold;
  }

  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;
  }
  h1.center, h2.center, h3.center, h4.center, h5.center, h6.center, h7.center {
    text-align: center;
  }
  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%; }

  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;}
  h1.top_band {
    display: inline;
    text-align: left;
    margin-top: 0;
    margin-left: 4mm;
    text-indent: 0mm;
    font-weight: bold;
    font-size: 120%;
  }
  h2.top_band_tiny {
    font-size: 10px;
    font-weight: normal;
    margin-top: 0px;
    margin-left: 4mm;
    text-indent: 0mm;
    margin-bottom: 0px;
    color: #777777;
    margin-left: 140px;
    margin-right: 0px;
    text-align: left;
  }

  p.top_band {
    display: inline;
    text-align: left;
    margin-top: 0;
    margin-left: 140px;
    text-indent: 0mm;
    font-weight: bold;
    font-size: 120%;
  }
  p.top_band_tiny {
    font-size: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #777777;
    margin-left: 140px;
    margin-right: 0px;
    text-align: left;
  }
  p.top_band_image {
    float: left;
    display: inline;
    text-align: left;
    margin-top: 0;
    margin-left: 1mm;
    text-indent: 0mm;
    margin-right: 1mm;
  }

  .banner, .subbanner {
    font-weight: bold;
    text-align: center;
    margin-left: 10mm;
    margin-right: 15mm;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  h1.banner {
    font-size: 120%;
  }
  h1.subbanner {
    font-size: 115%;
  }
  h2.banner {
    font-size: 110%;
  }
  h3.banner {
    color: #990000;
    font-size: 105%;
  }
  h4.banner {
    color: #ff0000;
    font-size: 100%;
  }
  h5.banner {
  }
  h6.banner {
  }
  h7.banner {
  }

  .toc {
    font-weight: normal;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  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%;
  }

  .microtoc {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  h1.microtoc {
    margin-left: 0mm;
    font-size: 115%;
  }
  h2.microtoc {
    margin-left: 5mm;
    font-size: 110%;
  }
  h3.microtoc {
    margin-left: 10mm;
    font-size: 105%;
  }
  h4.microtoc {
    margin-left: 15mm;
    font-weight: normal;
    font-size: 100%;
  }
  h5.microtoc {
    margin-left: 20mm;
    font-weight: normal;
    font-size: 95%;
  }
  h6.microtoc {
    margin-left: 25mm;
    font-weight: normal;
    font-size: 90%;
  }
  h7.microtoc {
    margin-left: 30mm;
    font-weight: normal;
    font-size: 85%;
  }

  .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;
  }

  div.substance {
    width: 100%;
    background-color: #ffffff;
  }
  div.ocn {
    width: 5%;
    float: right;
    top: 0;
    background-color: #ffffff;
  }
  div.endnote {
    width: 95%;
    background-color: #fffffff;
  }
  div.toc {
    position: absolute;
    float: left;
    margin: 0;
    padding: 0;
    padding-top: 0.5em;
    border: 0;
    width: 13em;
    background-color: #eeeeee;
    margin-right:1em;
  }
  div.summary {
    margin: 0;
    padding: 0;
    border-left: 13em solid #eeeeee;
    padding-left: 1em;
    background-color: #eeeeee;
  }
  div.content, div.main_column {
    margin: 0;
    padding: 0;
    border-left: 13em solid #ffffff;
    padding-left: 1em;
    padding-right: 1em;
  }
  div.content0, div.main_column0 {
    margin: 0;
    padding: 0;
    border-left: 0% solid #ffffff;
    padding-left: 5%;
  }
  div.scroll {
    margin: 0;
    padding: 0;
    padding-left: 1em;
    padding-right: 1em;
  }
  div.content:after {
    content:' ';
    clear:both;
    display:block;
    height:0;
    overflow:hidden
  }
  div.footer {
    clear:left;
    padding: 0.5em;
    font-size: 80%;
    margin: 0;
  }
  div.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  div.toc li ul a, li ul span.currentlink
  {
    font-weight: normal;
    font-size: 90%;
    padding-left: 2em;
    background-color: #eeeeee;
  }
  div.toc a, span.currentlink{
    display:block;
    text-decoration: none;
    padding-left: 0.5em;
    color: #0000aa;
  }
  hr {
    width: 90%;
  }

  span.currentlink {
    text-decoration: none;
    background-color: #aaaaf9;
  }

  div.toc a:visited {
    color: #0000aa;
  }
  div.toc a:hover {
    color: #000000;
    background-color: #f9f9aa;
  }

  .minitoc {
    font-weight: normal;
    margin-top: 2px;
    margin-bottom: 2px;
  }
  h1.minitoc, h2.minitoc, h3.minitoc {
    margin-left: 0em;
    font-weight: bold;
    text-align: left;
    font-size: 90%;
    margin-top: 4px;
    margin-bottom: 4px;
  }
  h4.minitoc {
    margin-left: 0em;
    font-size: 90%;
  }
  h5.minitoc {
    margin-left: 1em;
    font-size: 85%;
  }
  h6.minitoc {
    margin-left: 2em;
    font-size: 85%;
  }
  h7.minitoc {
    margin-left: 3em;
    font-size: 80%;
  }
  h0.minitoc {
    margin-left: 0em;
    font-size: 90%;
  }

  h1.c, h2.c, h3.c, h4.c, h5.c, h6.c, h7.c, p.c {
    text-align: center
  }
  h1.red, h2.red, h3.red, h4.red, h5.red, h6.red, h7.red {
    text-align: center;
    color: #ff0000;
    margin-left: 5mm;
    text-indent: 5mm;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-right: 15mm;
  }
  h1.ruby, h2.ruby, h3.ruby, h4.ruby, h5.ruby, h6.ruby, h7.ruby {
    text-align: center;
    color: #990000;
    margin-left: 5mm;
    text-indent: 5mm;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-right: 15mm;
  }
WOK
    end
    def homepage                                  #stylesheet for index, home page
<<WOK
  body {color: black; background: #{the_color.white}; margin:10px 10px 0px 10px; padding:0px;}
  p { line-height: 1.5 }
  a:link      {color: #{the_color.blue_ink};   text-decoration: none; }
  a:visited       {color: #{the_color.blue_ink};   text-decoration: none; }
  a:hover {color: #{the_color.black}; text-decoration: underline; background-color: #{the_color.yellow_light};}
  a:active {color: #{the_color.blue_ink}; text-decoration: underline;}
  #banner {
    background:#{the_color.white};
  }
  #column_left {
    width:25%;
    float:left;
    background:#b9d4dd;
    padding-bottom:10px;
  }
  #column_center {
    width:55%;
    float:left;
    background:#{the_color.white};
    padding-bottom:10px;
  }
  #column_right {
    width:20%;
    float:left;
    background:#b9d4dd;
    padding-bottom:10px;
  }
  p,h1,pre {
    font-family: #{the_font.set_fonts};
    margin:0px 10px 10px 10px;
  }
  h1 {
    font-size:14px;
    padding-top:10px;
  }
  #column_right p { font-size:12px}
  #banner h1 { margin:0px; padding:10px}
WOK
    end
    def xhtml                                     #stylesheet for xhtml
<<WOK
/* SiSU css xhtml & sax.xml default style */
    document {
      display: block;
      margin-left: 0mm;
      margin-right: 0mm;
    }
    head {
      display: block;
      margin-bottom: 20px;
      background-color: #dddddd;
    }
    metadata {
      display: block;
    }
    meta {
      display: inline;
      line-height: 1;
      font-size: 10px;
      color: #990000;
      margin-right: 2mm;
      margin-top: 0px;
      margin-bottom: 0px;

    }
    data,md {
      display: inline;
      line-height: 1;
      font-size: 10px;
      color: #000099;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    source_control {
      display: block;
    }
    dc {
      display: block;
      font-family: #{the_font.set_fonts};
      color: blue;
      background-color: #dddddd;
      font-weight: normal;
      text-align: justify;
      font-size: xx-small;
      line-height: 120%;
      margin-left: 5%;
      margin-right: 5mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    sc {
      display: inline;
      color: green;
    }
    keywords,copyright {
      display: block;
      font-family: #{the_font.set_fonts};
      color: red;
      background-color: #dddddd;
      font-weight: normal;
      text-align: justify;
      font-size: xx-small;
      line-height: 120%;
      margin-left: 5%;
      margin-right: 5mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    table {
      margin-left: 5%;
      display: block;
    }
    tr {
      display: block;
    }
    th,td {
      display: inline;
    }
    body {
      color: black;
      background: #ffffff;
    }
    a:link {
      color: #003399;
      text-decoration: none;
    }
    a:visited {
      color: #003399;
      text-decoration: none;
      /* background-color: #e3ecef; */
    }
    a:hover {
      color: #000000;
      text-decoration: underline;
      background-color: #fff3b6;
    }
    a:hover IMG {
      background-color: #ffffff;
    }
    a:active {
      color: #003399;
      text-decoration: underline;
    }
    object {
      display: block;
      margin-left: 2mm;
      margin-right: 2mm;
      margin-top: 4px;
      margin-bottom: 8px;
    }
    text,text[class|="norm"] {
      display: block;
      font-family: #{the_font.set_fonts};
      text-align: justify;
      font-weight: normal;
      font-size: 100%;
      line-height: 150%;
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 2px;
      margin-bottom: 0px;
    }
    text[class|="h1"] {
      font-size: 120%;
      font-weight: bold;
      text-align: left;
      line-height: 120%;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    text[class|="h2"] {
      font-weight: bold;
      font-size: 110%;
      text-align: left;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    text[class|="h3"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="h4"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="h5"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="h6"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="h7"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="indent0"] {
      padding-left: 10%;
    }
    text[class|="indent1"] {
      padding-left: 15%;
    }
    text[class|="indent2"] {
      padding-left: 20%;
    }
    text[class|="indent3"] {
      padding-left: 25%;
    }
    text[class|="indent4"] {
      padding-left: 30%;
    }
    text[class|="indent5"] {
      padding-left: 35%;
    }
    text[class|="indent6"] {
      padding-left: 40%;
    }
    text[class|="indent7"] {
      padding-left: 45%;
    }
    text[class|="indent8"] {
      padding-left: 50%;
    }
    text[class|="indent9"] {
      padding-left: 55%;
    }

    text[class|="hang0_indent0"] {
      padding-left: 10%;
      text-indent:   0%;
    }
    text[class|="hang0_indent1"] {
      padding-left: 15%;
      text-indent:  -5%;
    }
    text[class|="hang0_indent2"] {
      padding-left: 20%;
      text-indent: -10%;
    }
    text[class|="hang0_indent3"] {
      padding-left: 25%;
      text-indent: -15%;
    }
    text[class|="hang0_indent4"] {
      padding-left: 30%;
      text-indent: -20%;
    }
    text[class|="hang0_indent5"] {
      padding-left: 35%;
      text-indent: -25%;
    }
    text[class|="hang0_indent6"] {
      padding-left: 40%;
      text-indent: -30%;
    }
    text[class|="hang0_indent7"] {
      padding-left: 45%;
      text-indent: -35%;
    }
    text[class|="hang0_indent8"] {
      padding-left: 50%;
      text-indent: -40%;
    }
    text[class|="hang0_indent9"] {
      padding-left: 55%;
      text-indent: -45%;
    }

    text[class|="hang1_indent0"] {
      padding-left: 10%;
      text-indent:   5%;
    }
    text[class|="hang1_indent1"] {
      padding-left: 15%;
      text-indent:   0%;
    }
    text[class|="hang1_indent2"] {
      padding-left: 20%;
      text-indent:  -5%;
    }
    text[class|="hang1_indent3"] {
      padding-left: 25%;
      text-indent: -10%;
    }
    text[class|="hang1_indent4"] {
      padding-left: 30%;
      text-indent: -15%;
    }
    text[class|="hang1_indent5"] {
      padding-left: 35%;
      text-indent: -20%;
    }
    text[class|="hang1_indent6"] {
      padding-left: 40%;
      text-indent: -25%;
    }
    text[class|="hang1_indent7"] {
      padding-left: 45%;
      text-indent: -30%;
    }
    text[class|="hang1_indent8"] {
      padding-left: 50%;
      text-indent: -35%;
    }
    text[class|="hang1_indent9"] {
      padding-left: 55%;
      text-indent: -40%;
    }

    text[class|="hang2_indent0"] {
      padding-left: 10%;
      text-indent:  10%;
    }
    text[class|="hang2_indent1"] {
      padding-left: 15%;
      text-indent:   5%;
    }
    text[class|="hang2_indent2"] {
      padding-left: 20%;
      text-indent:   0%;
    }
    text[class|="hang2_indent3"] {
      padding-left: 25%;
      text-indent:  -5%;
    }
    text[class|="hang2_indent4"] {
      padding-left: 30%;
      text-indent: -10%;
    }
    text[class|="hang2_indent5"] {
      padding-left: 35%;
      text-indent: -15%;
    }
    text[class|="hang2_indent6"] {
      padding-left: 40%;
      text-indent: -20%;
    }
    text[class|="hang2_indent7"] {
      padding-left: 45%;
      text-indent: -25%;
    }
    text[class|="hang2_indent8"] {
      padding-left: 50%;
      text-indent: -30%;
    }
    text[class|="hang2_indent9"] {
      padding-left: 55%;
      text-indent: -35%;
    }

    text[class|="hang3_indent0"] {
      padding-left: 10%;
      text-indent:  15%;
    }
    text[class|="hang3_indent1"] {
      padding-left: 15%;
      text-indent:  10%;
    }
    text[class|="hang3_indent2"] {
      padding-left: 20%;
      text-indent:   5%;
    }
    text[class|="hang3_indent3"] {
      padding-left: 25%;
      text-indent:   0%;
    }
    text[class|="hang3_indent4"] {
      padding-left: 30%;
      text-indent:  -5%;
    }
    text[class|="hang3_indent5"] {
      padding-left: 35%;
      text-indent: -10%;
    }
    text[class|="hang3_indent6"] {
      padding-left: 40%;
      text-indent: -15%;
    }
    text[class|="hang3_indent7"] {
      padding-left: 45%;
      text-indent: -20%;
    }
    text[class|="hang3_indent8"] {
      padding-left: 50%;
      text-indent: -25%;
    }
    text[class|="hang3_indent9"] {
      padding-left: 55%;
      text-indent: -30%;
    }

    text[class|="hang4_indent0"] {
      padding-left: 10%;
      text-indent:  20%;
    }
    text[class|="hang4_indent1"] {
      padding-left: 15%;
      text-indent:  15%;
    }
    text[class|="hang4_indent2"] {
      padding-left: 20%;
      text-indent:  10%;
    }
    text[class|="hang4_indent3"] {
      padding-left: 25%;
      text-indent:   5%;
    }
    text[class|="hang4_indent4"] {
      padding-left: 30%;
      text-indent:   0%;
    }
    text[class|="hang4_indent5"] {
      padding-left: 35%;
      text-indent:  -5%;
    }
    text[class|="hang4_indent6"] {
      padding-left: 40%;
      text-indent: -10%;
    }
    text[class|="hang4_indent7"] {
      padding-left: 45%;
      text-indent: -15%;
    }
    text[class|="hang4_indent8"] {
      padding-left: 50%;
      text-indent: -20%;
    }
    text[class|="hang4_indent9"] {
      padding-left: 55%;
      text-indent: -25%;
    }

    text[class|="hang5_indent0"] {
      padding-left: 10%;
      text-indent:  25%;
    }
    text[class|="hang5_indent1"] {
      padding-left: 15%;
      text-indent:  20%;
    }
    text[class|="hang5_indent2"] {
      padding-left: 20%;
      text-indent:  15%;
    }
    text[class|="hang5_indent3"] {
      padding-left: 25%;
      text-indent:  10%;
    }
    text[class|="hang5_indent4"] {
      padding-left: 30%;
      text-indent:   5%;
    }
    text[class|="hang5_indent5"] {
      padding-left: 35%;
      text-indent:   0%;
    }
    text[class|="hang5_indent6"] {
      padding-left: 40%;
      text-indent:  -5%;
    }
    text[class|="hang5_indent7"] {
      padding-left: 45%;
      text-indent: -10%;
    }
    text[class|="hang5_indent8"] {
      padding-left: 50%;
      text-indent: -15%;
    }
    text[class|="hang5_indent9"] {
      padding-left: 55%;
      text-indent: -20%;
    }

    text[class|="hang6_indent0"] {
      padding-left: 10%;
      text-indent:  30%;
    }
    text[class|="hang6_indent1"] {
      padding-left: 15%;
      text-indent:  25%;
    }
    text[class|="hang6_indent2"] {
      padding-left: 20%;
      text-indent:  20%;
    }
    text[class|="hang6_indent3"] {
      padding-left: 25%;
      text-indent:  15%;
    }
    text[class|="hang6_indent4"] {
      padding-left: 30%;
      text-indent:  10%;
    }
    text[class|="hang6_indent5"] {
      padding-left: 35%;
      text-indent:   5%;
    }
    text[class|="hang6_indent6"] {
      padding-left: 40%;
      text-indent:   0%;
    }
    text[class|="hang6_indent7"] {
      padding-left: 45%;
      text-indent:  -5%;
    }
    text[class|="hang6_indent8"] {
      padding-left: 50%;
      text-indent: -10%;
    }
    text[class|="hang6_indent9"] {
      padding-left: 55%;
      text-indent: -15%;
    }

    text[class|="hang7_indent0"] {
      padding-left: 10%;
      text-indent:  35%;
    }
    text[class|="hang7_indent1"] {
      padding-left: 15%;
      text-indent:  30%;
    }
    text[class|="hang7_indent2"] {
      padding-left: 20%;
      text-indent:  25%;
    }
    text[class|="hang7_indent3"] {
      padding-left: 25%;
      text-indent:  20%;
    }
    text[class|="hang7_indent4"] {
      padding-left: 30%;
      text-indent:  15%;
    }
    text[class|="hang7_indent5"] {
      padding-left: 35%;
      text-indent:  10%;
    }
    text[class|="hang7_indent6"] {
      padding-left: 40%;
      text-indent:   5%;
    }
    text[class|="hang7_indent7"] {
      padding-left: 45%;
      text-indent:   0%;
    }
    text[class|="hang7_indent8"] {
      padding-left: 50%;
      text-indent:  -5%;
    }
    text[class|="hang7_indent9"] {
      padding-left: 55%;
      text-indent: -10%;
    }

    text[class|="hang8_indent0"] {
      padding-left: 10%;
      text-indent:  40%;
    }
    text[class|="hang8_indent1"] {
      padding-left: 15%;
      text-indent:  35%;
    }
    text[class|="hang8_indent2"] {
      padding-left: 20%;
      text-indent:  30%;
    }
    text[class|="hang8_indent3"] {
      padding-left: 25%;
      text-indent:  25%;
    }
    text[class|="hang8_indent4"] {
      padding-left: 30%;
      text-indent:  20%;
    }
    text[class|="hang8_indent5"] {
      padding-left: 35%;
      text-indent:  15%;
    }
    text[class|="hang8_indent6"] {
      padding-left: 40%;
      text-indent:  10%;
    }
    text[class|="hang8_indent7"] {
      padding-left: 45%;
      text-indent:   5%;
    }
    text[class|="hang8_indent8"] {
      padding-left: 50%;
      text-indent:   0%;
    }
    text[class|="hang8_indent9"] {
      padding-left: 55%;
      text-indent:  -5%;
    }

    text[class|="hang9_indent0"] {
      padding-left: 10%;
      text-indent:  45%;
    }
    text[class|="hang9_indent1"] {
      padding-left: 15%;
      text-indent:  40%;
    }
    text[class|="hang9_indent2"] {
      padding-left: 20%;
      text-indent:  35%;
    }
    text[class|="hang9_indent3"] {
      padding-left: 25%;
      text-indent:  30%;
    }
    text[class|="hang9_indent4"] {
      padding-left: 30%;
      text-indent:  25%;
    }
    text[class|="hang9_indent5"] {
      padding-left: 35%;
      text-indent:  20%;
    }
    text[class|="hang9_indent6"] {
      padding-left: 40%;
      text-indent:  15%;
    }
    text[class|="hang9_indent7"] {
      padding-left: 45%;
      text-indent:  10%;
    }
    text[class|="hang9_indent8"] {
      padding-left: 50%;
      text-indent:   5%;
    }
    text[class|="hang9_indent9"] {
      padding-left: 55%;
      text-indent:   0%;
    }

    text[class|="indent_bullet"] {
      text-indent: 0%;
    }
    text[class|="indent_bullet0"] {
      text-indent: 0%;
    }
    text[class|="indent_bullet1"] {
      text-indent: 10%;
    }
    text[class|="indent_bullet2"] {
      text-indent: 15%;
    }
    text[class|="indent_bullet3"] {
      text-indent: 20%;
    }
    text[class|="indent_bullet4"] {
      text-indent: 25%;
    }
    text[class|="indent_bullet5"] {
      text-indent: 30%;
    }
    text[class|="indent_bullet6"] {
      text-indent: 35%;
    }
    text[class|="indent_bullet7"] {
      text-indent: 40%;
    }
    text[class|="indent_bullet8"] {
      text-indent: 45%;
    }
    text[class|="indent_bullet9"] {
      text-indent: 50%;
    }
    text[class|="verse"], text[class|="block"], text[class|="group"], text[class|="code"] {
      text-align: left;
    }
    ocn {
      display: block;
      text-align: right;
      vertical-align: super;
      color: #990000;
      font-size: xx-small;
      margin-right: 0mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    named {
      display: block;
      margin-right: 0mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    endnote {
      display: block;
      font-size: small;
      font-family: #{the_font.set_fonts};
      font-weight: normal;
      line-height: 150%;
      text-align: justify;
      margin-left: 10%;
      margin-right: 5%;
      margin-top: 4px;
      margin-bottom: 0px;
    }
    endnote_indent {
      display: block;
      font-size: small;
      font-family: #{the_font.set_fonts};
      font-weight: normal;
      line-height: 150%;
      text-align: justify;
      margin-left: 15%;
      margin-right: 5%;
      margin-top: 4px;
      margin-bottom: 0px;
    }
    en {
      font-size: xx-small;
      vertical-align: super;
    }
    i { font-style: italic; }
    b { font-style: bold; }
    u { text-decoration: underline; }
    br { display: block; }

    text[class|="table"] {
      display: table;
      /* display: block; */
      text-align: left;
    }

    table {
      margin-left: 0%;
      display: block;
      /* display: table; */
      width: 100%;
    }
    tr {
      display: block;
      /* display: table-row; */
    }
    th, td {
      display: table-cell;
      /* display: inline; */
      vertical-align: top;
    }
    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;
    }

    .svg_outer {
      display: block;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      padding-top: 0;
      text-align: left;
    }
    .svg_inner {
      display: block;
      text-align: center;
    }
WOK
    end
    def xml_sax                                   #stylesheet for xml sax
      xhtml
    end
    def xml_dom                                   #sylesheet for xml dom, work on, starts from copy of css_xhtml
<<WOK
/* SiSU css dom.xml default style */
    document {
      display: block;
      margin-left: 0mm;
      margin-right: 0mm;
    }
    head {
      display: block;
      margin-bottom: 20px;
      background-color: #dddddd;
    }
    header {
      display: block;
    }
    meta {
      display: inline;
      line-height: 1;
      font-size: 10px;
      color: #990000;
      margin-right: 2mm;
      margin-top: 0px;
      margin-bottom: 0px;

    }
    md {
      display: inline;
      line-height: 1;
      font-size: 10px;
      color: #000099;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    source_control {
      display: block;
    }
    dc {
      display: block;
      font-family: #{the_font.set_fonts};
      color: blue;
      background-color: #dddddd;
      font-weight: normal;
      text-align: justify;
      font-size: xx-small;
      line-height: 120%;
      margin-left: 5%;
      margin-right: 5mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    sc {
      display: inline;
      color: green;
    }
    keywords,copyright {
      display: block;
      font-family: #{the_font.set_fonts};
      color: red;
      background-color: #dddddd;
      font-weight: normal;
      text-align: justify;
      font-size: xx-small;
      line-height: 120%;
      margin-left: 5%;
      margin-right: 5mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    body {
      color: black;
      background: #ffffff;
    }
    a:link {
      color: #003399;
      text-decoration: none;
    }
    a:visited {
      color: #003399;
      text-decoration: none;
      /* background-color: #e3ecef; */
    }
    a:hover {
      color: #000000;
      text-decoration: underline;
      background-color: #fff3b6;
    }
    a:hover IMG {
      background-color: #ffffff;
    }
    a:active {
      color: #003399;
      text-decoration: underline;
    }
    object {
      display: block;
      margin-left: 2mm;
      margin-right: 2mm;
      margin-top: 4px;
      margin-bottom: 8px;
    }
    heading {
      font-weight: bold;
    }
    contents {
      font-weight: normal;
    }
    text {
      display: block;
      font-family: #{the_font.set_fonts};
      text-align: justify;
      font-size: 100%;
      line-height: 150%;
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 2px;
      margin-bottom: 0px;
    }
    text[class|="norm"] {
      font-weight: normal;
    }
    text[class|="h1"] {
      font-size: 120%;
      font-weight: bold;
      text-align: left;
      line-height: 120%;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    text[class|="h2"] {
      font-weight: bold;
      font-size: 110%;
      text-align: left;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    text[class|="h3"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="h4"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="h5"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="h6"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="h7"] {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    text[class|="indent0"] {
      padding-left: 10%;
    }
    text[class|="indent1"] {
      padding-left: 15%;
    }
    text[class|="indent2"] {
      padding-left: 20%;
    }
    text[class|="indent3"] {
      padding-left: 25%;
    }
    text[class|="indent4"] {
      padding-left: 30%;
    }
    text[class|="indent5"] {
      padding-left: 35%;
    }
    text[class|="indent6"] {
      padding-left: 40%;
    }
    text[class|="indent7"] {
      padding-left: 45%;
    }
    text[class|="indent8"] {
      padding-left: 50%;
    }
    text[class|="indent9"] {
      padding-left: 55%;
    }

    text[class|="hang0_indent0"] {
      padding-left: 10%;
      text-indent:   0%;
    }
    text[class|="hang0_indent1"] {
      padding-left: 15%;
      text-indent:  -5%;
    }
    text[class|="hang0_indent2"] {
      padding-left: 20%;
      text-indent: -10%;
    }
    text[class|="hang0_indent3"] {
      padding-left: 25%;
      text-indent: -15%;
    }
    text[class|="hang0_indent4"] {
      padding-left: 30%;
      text-indent: -20%;
    }
    text[class|="hang0_indent5"] {
      padding-left: 35%;
      text-indent: -25%;
    }
    text[class|="hang0_indent6"] {
      padding-left: 40%;
      text-indent: -30%;
    }
    text[class|="hang0_indent7"] {
      padding-left: 45%;
      text-indent: -35%;
    }
    text[class|="hang0_indent8"] {
      padding-left: 50%;
      text-indent: -40%;
    }
    text[class|="hang0_indent9"] {
      padding-left: 55%;
      text-indent: -45%;
    }

    text[class|="hang1_indent0"] {
      padding-left: 10%;
      text-indent:   5%;
    }
    text[class|="hang1_indent1"] {
      padding-left: 15%;
      text-indent:   0%;
    }
    text[class|="hang1_indent2"] {
      padding-left: 20%;
      text-indent:  -5%;
    }
    text[class|="hang1_indent3"] {
      padding-left: 25%;
      text-indent: -10%;
    }
    text[class|="hang1_indent4"] {
      padding-left: 30%;
      text-indent: -15%;
    }
    text[class|="hang1_indent5"] {
      padding-left: 35%;
      text-indent: -20%;
    }
    text[class|="hang1_indent6"] {
      padding-left: 40%;
      text-indent: -25%;
    }
    text[class|="hang1_indent7"] {
      padding-left: 45%;
      text-indent: -30%;
    }
    text[class|="hang1_indent8"] {
      padding-left: 50%;
      text-indent: -35%;
    }
    text[class|="hang1_indent9"] {
      padding-left: 55%;
      text-indent: -40%;
    }

    text[class|="hang2_indent0"] {
      padding-left: 10%;
      text-indent:  10%;
    }
    text[class|="hang2_indent1"] {
      padding-left: 15%;
      text-indent:   5%;
    }
    text[class|="hang2_indent2"] {
      padding-left: 20%;
      text-indent:   0%;
    }
    text[class|="hang2_indent3"] {
      padding-left: 25%;
      text-indent:  -5%;
    }
    text[class|="hang2_indent4"] {
      padding-left: 30%;
      text-indent: -10%;
    }
    text[class|="hang2_indent5"] {
      padding-left: 35%;
      text-indent: -15%;
    }
    text[class|="hang2_indent6"] {
      padding-left: 40%;
      text-indent: -20%;
    }
    text[class|="hang2_indent7"] {
      padding-left: 45%;
      text-indent: -25%;
    }
    text[class|="hang2_indent8"] {
      padding-left: 50%;
      text-indent: -30%;
    }
    text[class|="hang2_indent9"] {
      padding-left: 55%;
      text-indent: -35%;
    }

    text[class|="hang3_indent0"] {
      padding-left: 10%;
      text-indent:  15%;
    }
    text[class|="hang3_indent1"] {
      padding-left: 15%;
      text-indent:  10%;
    }
    text[class|="hang3_indent2"] {
      padding-left: 20%;
      text-indent:   5%;
    }
    text[class|="hang3_indent3"] {
      padding-left: 25%;
      text-indent:   0%;
    }
    text[class|="hang3_indent4"] {
      padding-left: 30%;
      text-indent:  -5%;
    }
    text[class|="hang3_indent5"] {
      padding-left: 35%;
      text-indent: -10%;
    }
    text[class|="hang3_indent6"] {
      padding-left: 40%;
      text-indent: -15%;
    }
    text[class|="hang3_indent7"] {
      padding-left: 45%;
      text-indent: -20%;
    }
    text[class|="hang3_indent8"] {
      padding-left: 50%;
      text-indent: -25%;
    }
    text[class|="hang3_indent9"] {
      padding-left: 55%;
      text-indent: -30%;
    }

    text[class|="hang4_indent0"] {
      padding-left: 10%;
      text-indent:  20%;
    }
    text[class|="hang4_indent1"] {
      padding-left: 15%;
      text-indent:  15%;
    }
    text[class|="hang4_indent2"] {
      padding-left: 20%;
      text-indent:  10%;
    }
    text[class|="hang4_indent3"] {
      padding-left: 25%;
      text-indent:   5%;
    }
    text[class|="hang4_indent4"] {
      padding-left: 30%;
      text-indent:   0%;
    }
    text[class|="hang4_indent5"] {
      padding-left: 35%;
      text-indent:  -5%;
    }
    text[class|="hang4_indent6"] {
      padding-left: 40%;
      text-indent: -10%;
    }
    text[class|="hang4_indent7"] {
      padding-left: 45%;
      text-indent: -15%;
    }
    text[class|="hang4_indent8"] {
      padding-left: 50%;
      text-indent: -20%;
    }
    text[class|="hang4_indent9"] {
      padding-left: 55%;
      text-indent: -25%;
    }

    text[class|="hang5_indent0"] {
      padding-left: 10%;
      text-indent:  25%;
    }
    text[class|="hang5_indent1"] {
      padding-left: 15%;
      text-indent:  20%;
    }
    text[class|="hang5_indent2"] {
      padding-left: 20%;
      text-indent:  15%;
    }
    text[class|="hang5_indent3"] {
      padding-left: 25%;
      text-indent:  10%;
    }
    text[class|="hang5_indent4"] {
      padding-left: 30%;
      text-indent:   5%;
    }
    text[class|="hang5_indent5"] {
      padding-left: 35%;
      text-indent:   0%;
    }
    text[class|="hang5_indent6"] {
      padding-left: 40%;
      text-indent:  -5%;
    }
    text[class|="hang5_indent7"] {
      padding-left: 45%;
      text-indent: -10%;
    }
    text[class|="hang5_indent8"] {
      padding-left: 50%;
      text-indent: -15%;
    }
    text[class|="hang5_indent9"] {
      padding-left: 55%;
      text-indent: -20%;
    }

    text[class|="hang6_indent0"] {
      padding-left: 10%;
      text-indent:  30%;
    }
    text[class|="hang6_indent1"] {
      padding-left: 15%;
      text-indent:  25%;
    }
    text[class|="hang6_indent2"] {
      padding-left: 20%;
      text-indent:  20%;
    }
    text[class|="hang6_indent3"] {
      padding-left: 25%;
      text-indent:  15%;
    }
    text[class|="hang6_indent4"] {
      padding-left: 30%;
      text-indent:  10%;
    }
    text[class|="hang6_indent5"] {
      padding-left: 35%;
      text-indent:   5%;
    }
    text[class|="hang6_indent6"] {
      padding-left: 40%;
      text-indent:   0%;
    }
    text[class|="hang6_indent7"] {
      padding-left: 45%;
      text-indent:  -5%;
    }
    text[class|="hang6_indent8"] {
      padding-left: 50%;
      text-indent: -10%;
    }
    text[class|="hang6_indent9"] {
      padding-left: 55%;
      text-indent: -15%;
    }

    text[class|="hang7_indent0"] {
      padding-left: 10%;
      text-indent:  35%;
    }
    text[class|="hang7_indent1"] {
      padding-left: 15%;
      text-indent:  30%;
    }
    text[class|="hang7_indent2"] {
      padding-left: 20%;
      text-indent:  25%;
    }
    text[class|="hang7_indent3"] {
      padding-left: 25%;
      text-indent:  20%;
    }
    text[class|="hang7_indent4"] {
      padding-left: 30%;
      text-indent:  15%;
    }
    text[class|="hang7_indent5"] {
      padding-left: 35%;
      text-indent:  10%;
    }
    text[class|="hang7_indent6"] {
      padding-left: 40%;
      text-indent:   5%;
    }
    text[class|="hang7_indent7"] {
      padding-left: 45%;
      text-indent:   0%;
    }
    text[class|="hang7_indent8"] {
      padding-left: 50%;
      text-indent:  -5%;
    }
    text[class|="hang7_indent9"] {
      padding-left: 55%;
      text-indent: -10%;
    }

    text[class|="hang8_indent0"] {
      padding-left: 10%;
      text-indent:  40%;
    }
    text[class|="hang8_indent1"] {
      padding-left: 15%;
      text-indent:  35%;
    }
    text[class|="hang8_indent2"] {
      padding-left: 20%;
      text-indent:  30%;
    }
    text[class|="hang8_indent3"] {
      padding-left: 25%;
      text-indent:  25%;
    }
    text[class|="hang8_indent4"] {
      padding-left: 30%;
      text-indent:  20%;
    }
    text[class|="hang8_indent5"] {
      padding-left: 35%;
      text-indent:  15%;
    }
    text[class|="hang8_indent6"] {
      padding-left: 40%;
      text-indent:  10%;
    }
    text[class|="hang8_indent7"] {
      padding-left: 45%;
      text-indent:   5%;
    }
    text[class|="hang8_indent8"] {
      padding-left: 50%;
      text-indent:   0%;
    }
    text[class|="hang8_indent9"] {
      padding-left: 55%;
      text-indent:  -5%;
    }

    text[class|="hang9_indent0"] {
      padding-left: 10%;
      text-indent:  45%;
    }
    text[class|="hang9_indent1"] {
      padding-left: 15%;
      text-indent:  40%;
    }
    text[class|="hang9_indent2"] {
      padding-left: 20%;
      text-indent:  35%;
    }
    text[class|="hang9_indent3"] {
      padding-left: 25%;
      text-indent:  30%;
    }
    text[class|="hang9_indent4"] {
      padding-left: 30%;
      text-indent:  25%;
    }
    text[class|="hang9_indent5"] {
      padding-left: 35%;
      text-indent:  20%;
    }
    text[class|="hang9_indent6"] {
      padding-left: 40%;
      text-indent:  15%;
    }
    text[class|="hang9_indent7"] {
      padding-left: 45%;
      text-indent:  10%;
    }
    text[class|="hang9_indent8"] {
      padding-left: 50%;
      text-indent:   5%;
    }
    text[class|="hang9_indent9"] {
      padding-left: 55%;
      text-indent:   0%;
    }

    text[class|="indent_bullet"] {
      text-indent: 0%;
    }
    text[class|="indent_bullet0"] {
      text-indent: 0%;
    }
    text[class|="indent_bullet1"] {
      padding-left: 10%;
    }
    text[class|="indent_bullet2"] {
      padding-left: 15%;
    }
    text[class|="indent_bullet3"] {
      padding-left: 20%;
    }
    text[class|="indent_bullet4"] {
      padding-left: 25%;
    }
    text[class|="indent_bullet5"] {
      padding-left: 30%;
    }
    text[class|="indent_bullet6"] {
      padding-left: 35%;
    }
    text[class|="indent_bullet7"] {
      padding-left: 40%;
    }
    text[class|="indent_bullet8"] {
      padding-left: 45%;
    }
    text[class|="indent_bullet9"] {
      padding-left: 50%;
    }
    text[class|="verse"], text[class|="block"], text[class|="group"], text[class|="code"] {
      text-align: left;
    }
    table {
      margin-left: 5%;
      display: block;
    }
    tr {
      display: block;
    }
    th, td {
      display: inline;
    }
    nametag {
      display: none;
    }
    number {
      padding-right: 4px;
    }
    ocn {
      font-weight: normal;
      display: block;
      text-align: right;
      vertical-align: super;
      color: #990000;
      font-size: xx-small;
      margin-right: 0mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    endnote {
      display: block;
      font-size: small;
      font-family: #{the_font.set_fonts};
      font-weight: normal;
      line-height: 150%;
      text-align: justify;
      margin-left: 10%;
      margin-right: 5%;
      margin-top: 4px;
      margin-bottom: 0px;
    }
    endnote_indent {
      display: block;
      font-size: small;
      font-family: #{the_font.set_fonts};
      font-weight: normal;
      line-height: 150%;
      text-align: justify;
      margin-left: 15%;
      margin-right: 5%;
      margin-top: 4px;
      margin-bottom: 0px;
    }
    en {
      font-size: xx-small;
      vertical-align: super;
    }
    i { font-style: italic; }
    b { font-style: bold; }
    u { text-decoration: underline; }
    br { display: block; }
WOK
    end
    def xml_docbook                               #stylesheet for docbook
<<WOK
/* SiSU css docbook.xml default style */
    book {
      display: block;
      margin-left: 0mm;
      margin-right: 0mm;
    }
    bookinfo {
      display: block;
      margin-bottom: 20px;
      background-color: #dddddd;
    }
    source_control {
      display: block;
    }
    dc,sc {
      display: block;
      font-family: #{the_font.set_fonts};
      color: blue;
      background-color: #dddddd;
      font-weight: normal;
      text-align: justify;
      font-size: xx-small;
      line-height: 120%;
      margin-left: 5%;
      margin-right: 5mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    sc {
      color: green;
    }
    keywords,copyright {
      display: block;
      font-family: #{the_font.set_fonts};
      color: red;
      background-color: #dddddd;
      font-weight: normal;
      text-align: justify;
      font-size: xx-small;
      line-height: 120%;
      margin-left: 5%;
      margin-right: 5mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    body {
      color: black;
      background: #ffffff;
    }
    a:link {
      color: #003399;
      text-decoration: none;
    }
    a:visited {
      color: #003399;
      text-decoration: none;
      /* background-color: #e3ecef; */
    }
    a:hover {
      color: #000000;
      text-decoration: underline;
      background-color: #fff3b6;
    }
    a:hover IMG {
      background-color: #ffffff;
    }
    a:active {
      color: #003399;
      text-decoration: underline;
    }
    object {
      display: block;
      margin-left: 2mm;
      margin-right: 2mm;
      margin-top: 4px;
      margin-bottom: 8px;
    }
    part {
      display: block;
      /* font-weight: bold; */
    }
    contents {
      font-weight: normal;
    }
    para {
      display: block;
      font-family: #{the_font.set_fonts};
      /* font-weight: normal; */
      text-align: justify;
      font-size: 100%;
      line-height: 150%;
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 2px;
      margin-bottom: 0px;
    }
    para.verse, para.block, para.group, para.code {
      text-align: left;
    }
    para.norm {
      font-family: #{the_font.set_fonts};
      font-weight: normal;
    }
    para.h1, title {
      display: block;
      font-family: #{the_font.set_fonts};
      font-size: 120%;
      font-weight: bold;
      text-align: left;
      line-height: 120%;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    para.h2 {
      font-weight: bold;
      font-size: 110%;
      text-align: left;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    para.h3 {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    para.h4 {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    para.h5 {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    para.h6 {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    para.h7 {
      font-size: 110%;
      font-weight: bold;
      text-align: left;
    }
    table {
      margin-left: 5%;
      display: block;
    }
    tr {
      display: block;
    }
    th, td {
      display: inline;
    }
    nametag {
      display: none;
    }
    number {
      padding-right: 4px;
    }
    ocn {
      font-weight: normal;
      display: block;
      text-align: right;
      vertical-align: super;
      color: #990000;
      font-size: xx-small;
      margin-right: 0mm;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    endnote {
      display: block;
      font-size: small;
      font-family: #{the_font.set_fonts};
      font-weight: normal;
      line-height: 150%;
      text-align: justify;
      margin-left: 10%;
      margin-right: 5%;
      margin-top: 4px;
      margin-bottom: 0px;
    }
    endnote_indent {
      display: block;
      font-size: small;
      font-family: #{the_font.set_fonts};
      font-weight: normal;
      line-height: 150%;
      text-align: justify;
      margin-left: 15%;
      margin-right: 5%;
      margin-top: 4px;
      margin-bottom: 0px;
    }
    en {
      font-size: xx-small;
      vertical-align: super;
    }
    i { font-style: italic; }
    b { font-style: bold; }
    u { text-decoration: underline; }
    br { display: block; }
WOK
    end
    def css_xhtml_p                               #stylesheet for ...
<<WOK
    body {
      color: black;
      background: #ffffff;
    }
    a:link {
      color: #003399;
      text-decoration: none;
    }
    a:visited {
      color: #003399;
      text-decoration: none;
      /* background-color: #e3ecef; */
    }
    a:hover {
      color: #000000;
      text-decoration: underline;
      background-color: #fff3b6;
    }
    a:hover IMG {
      background-color: #ffffff;
    }
    a:active {
      color: #003399;
      text-decoration: underline;
    }
    object {
      display: block;
      margin-top: 3px;
      margin-bottom: 3px;
      margin-right: 5mm;
    }
    p {
      display: block;
      font-family: #{the_font.set_fonts};
      font-size: 100%;
      font-weight: normal;
      line-height: 150%;
      text-align: justify;
      margin-left: 10mm;
      margin-top: 3px;
      margin-bottom: 0px;
      margin-right: 5mm
    }
    p.norm { }
    p.endnote {
      font-size: 100%;
      margin-left: 20%;
      text-indent: 5%
    }
    p.endnote_indent {
      font-size: 100%;
      margin-left: 25%;
      text-indent: 5%
    }
    p.h1 {
      font-family: #{the_font.set_fonts};
      font-weight: bold;
      line-height: 120%;
      margin-left: 10mm;
      margin-right: 10mm;
      text-align: left;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    p.h2 {
      font-weight: bold;
      font-size: 110%;
      margin-left: 10mm;
      margin-right: 15mm;
      text-align: left;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    p.h3 {
      font-size: 150%;
      font-weight: bold;
      text-align: left;
    }
    p.h4 {
      font-size: 150%;
      font-weight: bold;
      text-align: left;
    }
    p.h5 {
      font-size: 150%;
      font-weight: bold;
      text-align: left;
    }
    p.h6 {
      font-size: 150%;
      font-weight: bold;
      text-align: left;
    }
    p.h7 {
      font-size: 150%;
      font-weight: bold;
      text-align: left;
    }
    ocn {
      display: block;
      text-align: right;
      vertical-align: super;
      color: #990000;
      font-size: xx-small;
      margin-top: 0px;
      margin-bottom: 6px;
    }
    en {
      font-size: xx-small;
      vertical-align: super;
    }
    i { font-style: italic; }
    b { font-style: bold; }
    u { text-decoration: underline; }
    br { display: block; }
WOK
    end
  end
end
__END__
#+END_SRC

* document header

#+NAME: sisu_document_header
#+BEGIN_SRC text
encoding: utf-8
- Name: SiSU

  - Description: documents, structuring, processing, publishing, search
    css

  - Author: Ralph Amissah
    <ralph.amissah@gmail.com>

  - Copyright: (C) 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006,
    2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2019,
    2020, 2021, Ralph Amissah,
    All Rights Reserved.

  - License: GPL 3 or later:

    SiSU, a framework for document structuring, publishing and search

    Copyright (C) Ralph Amissah

    This program is free software: you can redistribute it and/or modify it
    under the terms of the GNU General Public License as published by the Free
    Software Foundation, either version 3 of the License, or (at your option)
    any later version.

    This program is distributed in the hope that it will be useful, but WITHOUT
    ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
    FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
    more details.

    You should have received a copy of the GNU General Public License along with
    this program. If not, see <http://www.gnu.org/licenses/>.

    If you have Internet connection, the latest version of the GPL should be
    available at these locations:
    <http://www.fsf.org/licensing/licenses/gpl.html>
    <http://www.gnu.org/licenses/gpl.html>

    <http://www.sisudoc.org/sisu/en/manifest/gpl.fsf.html>

  - SiSU uses:
    - Standard SiSU markup syntax,
    - Standard SiSU meta-markup syntax, and the
    - Standard SiSU object citation numbering and system

  - Homepages:
    <http://www.sisudoc.org>

  - Git
    <https://git.sisudoc.org/projects/>
    <https://git.sisudoc.org/projects/?p=software/sisu.git;a=summary>
    <https://git.sisudoc.org/projects/?p=markup/sisu-markup-samples.git;a=summary>
#+END_SRC