html, css and related markup

6 files changed, 267 insertions, 390 deletions

diff --git a/lib/sisu/v0/css.rb b/lib/sisu/v0/css.rb
index 52de3351..f4dfc15f 100644
--- a/lib/sisu/v0/css.rb
+++ b/lib/sisu/v0/css.rb
@@ -107,6 +107,7 @@ WOK
   body {
     color: black;
     background: "#ffffff";
+    background-color: "#ffffff";
   }
 /*
     table {
@@ -128,9 +129,12 @@ WOK
     color: #003399;
     text-decoration: none;
   }
-/*
   a:hover {
     color: #000000;
+    background-color: #f9f9aa;
+  }
+/*
+  a:hover {
     border-bottom: 2px solid #777777;
     background-color: #fff3b6;
   }
@@ -150,6 +154,7 @@ WOK
     margin-left: 5%;
     margin-right: 1%;
   }
+
   #top_band {
     position: absolute;
     top: 0;
@@ -197,7 +202,16 @@ WOK
     margin-left: 75%;
     width: 20%;
   }
-  ul, li, p {
+
+  .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 {
     display: block;
     font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
     font-size: 100%;
@@ -205,15 +219,12 @@ WOK
     line-height: 150%;
     text-align: justify;
     margin-left: 1em;
+    margin-right: 2em;
     text-indent: 0mm;
     margin-top: 3px;
     margin-bottom: 3px;
-    /* margin-bottom:0; */
-    margin-right: 2em;
-    /* width: 90%; */
-  }
-  p.norm {
   }
+  p.norm { }
   p.i1 {margin-left: 2em;}
   p.i2 {margin-left: 3em;}
   p.i3 {margin-left: 4em;}
@@ -223,40 +234,33 @@ WOK
   p.i7 {margin-left: 8em;}
   p.i8 {margin-left: 9em;}
   p.i9 {margin-left: 10em;}
+
   p.code {
     font-family: inconsolata, andale mono, courier new, courier, monospace;
     font-size: 90%;
     text-align: left;
   }
+
   p.caption {
     text-align: left;
     font-size: 80%;
     display: inline;
   }
+
   p.endnote {
-    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
     font-size: 96%;
-    font-weight: normal;
     line-height: 120%;
     text-align: left;
-    margin-left: 1em;
-    text-indent: 0mm;
-    margin-top: 3px;
-    margin-bottom: 3px;
     margin-right: 15mm;
   }
   p.endnote_indent {
-    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
     font-size: 96%;
-    font-weight: normal;
     line-height: 120%;
     text-align: left;
     margin-left: 2em;
-    text-indent: 0mm;
-    margin-top: 3px;
-    margin-bottom: 3px;
     margin-right: 15mm;
   }
+
   p.center {
     text-align: center;
   }
@@ -272,25 +276,7 @@ WOK
     font-style: normal;
     background: #fff3b6;
   }
-  p.ocn, p.paranum {
-    font-size: 10px;
-    margin-top: 0px;
-    float: right;
-    width: 5%;
-    margin-bottom: 5px;
-    color: #777777;
-    margin-right: 5px;
-    text-align: right;
-  }
-  p.ocn_off, p.no_paranum {
-    display: none;
-    font-size: 10px;
-    margin-top: 0px;
-    margin-bottom: 5px;
-    color: #777777;
-    margin-right: 5px;
-    text-align: right;
-  }
+
   p.small {
     font-size: 80%;
     margin-top: 0px;
@@ -298,7 +284,8 @@ WOK
     margin-right: 6px;
     text-align: left;
   }
-  p.tiny {
+
+  p.tiny, p.tiny_left, p.tiny_right, p.tiny_center {
     font-size: 10px;
     margin-top: 0px;
     margin-bottom: 0px;
@@ -306,33 +293,23 @@ WOK
     margin-right: 6px;
     text-align: left;
   }
+  p.tiny { }
   p.tiny_left {
-    font-size: 10px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    color: #777777;
     margin-left: 0px;
     margin-right: 0px;
     text-align: left;
   }
   p.tiny_right {
-    font-size: 10px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    color: #777777;
-    margin-right: 5mm;
+    margin-right: 1em;
     text-align: right;
   }
   p.tiny_center {
-    font-size: 10px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    color: #777777;
     margin-left: 0px;
     margin-right: 0px;
     text-align: center;
   }
-  p.pane {
+
+  p.pane, p.pane_title, p.pane_blurb, p.pane_link, p.pane_indent {
     font-size: 80%;
     margin-top: 0px;
     margin-bottom: 0px;
@@ -340,39 +317,26 @@ WOK
     margin-right: 4px;
     text-align: left;
   }
+  p.pane { }
   p.pane_title {
     font-weight: bold;
-    font-size: 80%;
-    margin-top: 0px;
     margin-bottom: 0px;
-    margin-left: 2mm;
-    margin-right: 4px;
-    text-align: left;
   }
   p.pane_blurb {
     font-size: 10px;
-    margin-top: 0px;
     margin-bottom: 0px;
-    margin-left: 2mm;
-    margin-right: 4px;
-    text-align: left;
   }
   p.pane_link {
     font-size: 10px;
-    margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 4mm;
-    margin-right: 4px;
-    text-align: left;
   }
   p.pane_indent {
     font-size: 10px;
-    margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 4mm;
-    margin-right: 4px;
-    text-align: left;
   }
+
   p.concordance_word {
     line-height: 150%;
     font-weight: bold;
@@ -384,19 +348,17 @@ WOK
     font-size: 80%;
     color: #777777;
     display: inline;
-    margin-left: 0mm;
-    text-indent: 0mm;
+    margin-left: 0em;
   }
   p.concordance_object {
     font-size: 80%;
-    font-weight: normal;
     line-height: 120%;
     text-align: left;
-    margin-left: 15mm;
-    text-indent: 0mm;
+    margin-left: 3em;
     margin-top: 1px;
     margin-bottom: 3px;
   }
+
   p.quickref {
     font-size: 10px;
     font-style: italic;
@@ -416,6 +378,19 @@ WOK
     text-align: center;
   }
 
+  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 { }
@@ -431,76 +406,6 @@ WOK
     text-align: right;
   }
 
-  h0, h1, h2, h3, h4, h5, h6 {
-    display: block;
-    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
-    font-weight: bold;
-    line-height: 120%;
-    margin-left: 5mm;
-    margin-right: 5mm;
-    text-align: left;
-    margin-top: 20px;
-    margin-bottom: 10px;
-  }
-  h1.center, h2.center, h3.center, h4.center, h5.center, h6.center {
-    text-align: center;
-  }
-
-  ul {
-    list-style: none;
-  }
-  ul.horizontal {
-    list-style: none;
-  }
-  ul.vertical {
-    list-style: none;
-  }
-
-  li {
-    background: url(../image/bullet_09.png) no-repeat 0px 6px;
-    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;
-    margin-left: 1em;
-    text-indent: 0mm;
-    margin-top: 3px;
-    margin-bottom: 3px;
-    margin-right: 10mm;
-  }
-  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;
-  }
-
   #horizontal_links {
     background: #eeeeee;
     margin-left: 5%;
@@ -534,6 +439,7 @@ WOK
   #horizontal a:hover {
     color: #000077;
   }
+
   #document_versions {
     position: absolute;
     top: 10mm;
@@ -541,6 +447,7 @@ WOK
     width: 12%;
     float: right;
   }
+
   #vertical_links {
     position: absolute;
     top: 10mm;
@@ -550,22 +457,10 @@ WOK
     float: right;
   }
   #vertical {
-    /* background: none; */
     padding: 0 12px 0px 0px;
-    /* border-top: 2px solid #000077; */
-    /* border-bottom: 2px solid #000077; */
-    /* margin-left: 33%; */
     margin-left: 2%;
     margin-right: 2%;
   }
-/*
-  #vertical {
-    padding: 0 12px 0px 0px;
-    border-top: 2px solid #000077;
-    border-bottom: 2px solid #000077;
-    margin-left: 33%;
-    margin-right: 33%;
-  } */
   #vertical li {
     display: block;
     list-style-type: none;
@@ -581,10 +476,40 @@ WOK
     color: #000077;
   }
 
-  li.doc {
+  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/bullet_09.png) no-repeat 0px 6px;
-    padding-left: 16px;
-    margin-left: 10px;
+  }
+
+  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;
@@ -592,72 +517,65 @@ WOK
     font-style: normal;
     text-align: left;
   }
+  li.doc {
+    background: url(../image/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;
-    margin-top: 0px;
-    margin-bottom: 0px;
     color: #777777;
-    font-size: 8px;
-    font-style: normal;
-    text-align: left;
   }
   li.refcenter {
     background: url(../image/bullet_09.png) no-repeat 0px 6px;
-    background: none;
     padding-left: 20px;
     margin-left: 10%;
     font-size: 9px;
-    margin-top: 0px;
-    margin-bottom: 0px;
     color: #777777;
     text-align: center;
   }
   li.refbold {
-    background: url(../image/bullet_09.png) no-repeat 0px 6px;
+    list-style-type: none;
     padding-left: 16px;
     margin-left: 0;
-    margin-top: 0px;
-    margin-bottom: 0px;
     margin-right: 10mm;
-    font-size: 8px;
     font-weight: bold;
-    text-align: left;
   }
 
-  h1 {
-    font-size: 120%;
-    margin-top: 20px;
-  }
-  h2 {
-    font-size: 115%;
-    margin-top: 20px;
-  }
-  h3 {
-    font-size: 110%;
-    margin-top: 20px;
-  }
-  h4 {
-    font-size: 105%;
-  }
-  h5 {
-    font-size: 100%;
-  }
-  h6 {
-    font-size: 100%;
-  }
-  h0 {
-    font-size: 80%;
-  }
-  h1.norm, h2.norm, h3.norm {
-    font-size: 110%;
-    margin-left: 1em;
-    margin-right: 15mm;
+  h0, h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    line-height: 120%;
     text-align: left;
     margin-top: 20px;
     margin-bottom: 10px;
   }
+  h4.norm, h5.norm, h6.norm {
+    margin-top: 10px;
+    margin-bottom: 0px;
+  }
+  h1.center, h2.center, h3.center, h4.center, h5.center, h6.center {
+    text-align: center;
+  }
+  h1 { font-size: 120%; }
+  h2 { font-size: 115%; }
+  h3 { font-size: 110%; }
+  h4 { font-size: 105%; }
+  h5 { font-size: 100%; }
+  h6 { font-size: 100%; }
+  h0 { font-size: 80%; }
+
+  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;
@@ -708,202 +626,137 @@ WOK
     margin-right: 1mm;
   }
 
-  h4.norm, h5.norm, h6.norm {
-    font-size: 100%;
-    margin-left: 10mm;
-    margin-right: 15mm;
-    text-align: left;
-    margin-top: 10px;
-    margin-bottom: 0px;
-  }
-
-  h1.i {margin-left: 10mm;}
-  h2.i {margin-left: 15mm;}
-  h3.i {margin-left: 20mm;}
-  h4.i {margin-left: 25mm;}
-  h5.i {margin-left: 30mm;}
-  h6.i {margin-left: 35mm;}
-  h7.i {margin-left: 40mm;}
-  h8.i {margin-left: 45mm;}
-  h9.i {margin-left: 50mm;}
-
-  h1.banner {
+  .banner, .subbanner {
     font-weight: bold;
     text-align: center;
-    font-size: 120%;
     margin-left: 10mm;
     margin-right: 15mm;
     margin-top: 20px;
     margin-bottom: 10px;
   }
+  h1.banner {
+    font-size: 120%;
+  }
   h1.subbanner {
-    font-weight: bold;
-    text-align: center;
     font-size: 115%;
-    margin-left: 10mm;
-    margin-right: 15mm;
-    margin-top: 20px;
-    margin-bottom: 10px;
   }
   h2.banner {
-    font-weight: bold;
-    text-align: center;
     font-size: 110%;
-    margin-left: 10mm;
-    margin-right: 15mm;
-    margin-top: 20px;
-    margin-bottom: 10px;
   }
   h3.banner {
-    font-weight: bold;
-    text-align: center;
     color: #990000;
     font-size: 105%;
-    margin-left: 10mm;
-    margin-right: 15mm;
-    margin-top: 20px;
-    margin-bottom: 10px;
   }
   h4.banner {
-    font-weight: bold;
-    text-align: center;
     color: #ff0000;
     font-size: 100%;
-    margin-left: 10mm;
-    margin-right: 15mm;
-    margin-top: 20px;
-    margin-bottom: 10px;
   }
   h5.banner {
-    font-weight: bold;
   }
   h6.banner {
-    font-weight: bold;
   }
 
-  h1.toc {
-    margin-left: 10mm;
-    font-size: 115%;
+  .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: 15mm;
+    margin-left: 2em;
     font-size: 110%;
-    margin-top: 6px;
-    margin-bottom: 6px;
     line-height: 140%;
   }
   h3.toc {
-    margin-left: 20mm;
+    margin-left: 3em;
     font-size: 105%;
-    margin-top: 6px;
-    margin-bottom: 6px;
     line-height: 120%;
   }
   h4.toc {
-    margin-left: 25mm;
-    font-weight: normal;
+    margin-left: 4em;
     font-size: 100%;
-    margin-top: 6px;
-    margin-bottom: 6px;
     line-height: 120%;
   }
   h5.toc {
-    margin-left: 30mm;
-    font-weight: normal;
+    margin-left: 5em;
     font-size: 95%;
-    margin-top: 6px;
-    margin-bottom: 6px;
     line-height: 110%;
   }
   h6.toc {
-    margin-left: 35mm;
-    font-weight: normal;
+    margin-left: 6em;
     font-size: 90%;
-    margin-top: 6px;
-    margin-bottom: 6px;
     line-height: 110%;
   }
 
+  .microtoc {
+    margin-top: 2px;
+    margin-bottom: 2px;
+  }
+
   h1.microtoc {
     margin-left: 0mm;
     font-size: 115%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
   h2.microtoc {
     margin-left: 5mm;
     font-size: 110%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
   h3.microtoc {
     margin-left: 10mm;
     font-size: 105%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
   h4.microtoc {
     margin-left: 15mm;
     font-weight: normal;
     font-size: 100%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
   h5.microtoc {
     margin-left: 20mm;
     font-weight: normal;
     font-size: 95%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
   h6.microtoc {
     margin-left: 25mm;
     font-weight: normal;
     font-size: 90%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
-  h5.subtoc {
-    margin-left: 2em;
+
+  .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;
-    margin-right: 34%;
-    font-weight: normal;
     font-size: 75%;
     margin-top: 0px;
     margin-bottom: 0px;
   }
 
-div.substance {
+  div.substance {
     width: 100%;
     background-color: #ffffff;
-}
-div.ocn {
+  }
+  div.ocn {
     width: 5%;
     float: right;
     top: 0;
     background-color: #ffffff;
-}
-div.endnote {
+  }
+  div.endnote {
     width: 95%;
     background-color: #fffffff;
-}
-/*
-body {
-    font-size: 90%;
-    font-family: verdana, arial, sans-serif;
-}
-*/
-div.toc {
+  }
+  div.toc {
     position: absolute;
     float: left;
     margin: 0;
@@ -913,56 +766,65 @@ div.toc {
     width: 13em;
     background-color: #eeeeee;
     margin-right:1em;
-}
-div.content {
+  }
+  div.content {
     margin: 0;
     padding: 0;
     border-left: 13em solid #ffffff;
     padding-left: 1em;
-}
-div.content:after {
+  }
+  div.content:after {
     content:' ';
     clear:both;
     display:block;
     height:0;
     overflow:hidden
-}
-div.footer {
+  }
+  div.footer {
     clear:left;
     padding: 0.5em;
     font-size: 80%;
     margin: 0;
-}
-div.toc ul {
+  }
+  div.toc ul {
     list-style: none;
     padding: 0;
     margin: 0;
-}
-div.toc li ul a, li ul span.currentlink
-{
+  }
+  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{
+  }
+  div.toc a, span.currentlink{
     display:block;
     text-decoration: none;
     padding-left: 0.5em;
     color: #0000aa;
-}
-span.currentlink {
+  }
+
+  span.currentlink {
     text-decoration: none;
     background-color: #aaaaf9;
-}
-div.toc a:visited {
+  }
+
+  div.toc a:visited {
     color: #0000aa;
-}
-div.toc a:hover {
+  }
+  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: 0mm;
+    margin-left: 0em;
     font-weight: bold;
     text-align: left;
     font-size: 90%;
@@ -970,26 +832,18 @@ div.toc a:hover {
     margin-bottom: 4px;
   }
   h4.minitoc {
-    margin-left: 0mm;
-    font-weight: normal;
+    margin-left: 0em;
     font-size: 90%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
   h5.minitoc {
-    margin-left: 2mm;
-    font-weight: normal;
+    margin-left: 1em;
     font-size: 85%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
   h6.minitoc {
-    margin-left: 4mm;
-    font-weight: normal;
+    margin-left: 2em;
     font-size: 85%;
-    margin-top: 2px;
-    margin-bottom: 2px;
   }
+
   h1.c, h2.c, h3.c, h4.c, h5.c, h6.c, p.c {
     text-align: center
   }
@@ -1147,8 +1001,7 @@ WOK
       margin-top: 2px;
       margin-bottom: 0px;
     }
-    p.norm {
-    }
+    p.norm { }
     p.h1 {
       font-family: #{fonts};
       font-size: 120%;
@@ -2095,8 +1948,7 @@ WOK
       margin-bottom: 0px;
       margin-right: 5mm
     }
-    p.norm {
-    }
+    p.norm { }
     p.endnote {
       font-size: 100%;
       margin-left: 20%;
diff --git a/lib/sisu/v0/html_format.rb b/lib/sisu/v0/html_format.rb
index 5e261649..8b6fc28a 100644
--- a/lib/sisu/v0/html_format.rb
+++ b/lib/sisu/v0/html_format.rb
@@ -78,19 +78,15 @@ module SiSU_HTML_Format
       or @skin_no_ocn
         ocn_class='ocn_off'
         @paranum.gsub(/^(\d+|)$/,
-        %{  <p class="#{ocn_class}">
-    &nbsp;
-  </p>})
+        %{<label class="#{ocn_class}">&nbsp;</label>})
       else
         ocn_class='ocn'
         @paranum.gsub(/^(\d+|)$/,
-        %{  <p class="#{ocn_class}">
-    \\1
-  </p>})
+        %{<label class="#{ocn_class}"><a name="#@paranum">\\1</a></label>})
       end
     end
     def name
-      %{<a name="#@paranum" />}
+      %{<a name="#@paranum"></a>}
     end
     def id #w3c? "tidy" complains about numbers as identifiers ! annoying
       %{id="o#@paranum"}
@@ -414,7 +410,8 @@ WOK
     end
     def links_guide_vertical_open #???
       url=(defined? @vz.url_hp) && @vz.url_hp =~/^http:\/\/\S+$/ ? @vz.url_hp : @vz.url_home
-      %{<div id="vertical_links">
+      %{
+<div id="vertical_links">
   <ul id="vertical">
   <li class="refbold">
     <a href="#{url}" #{@vz.js_home}>
@@ -433,7 +430,8 @@ WOK
     end
     def links_guide_horizontal_open #???
       url=(defined? @vz.url_hp) && @vz.url_hp =~/^http:\/\/\S+$/ ? @vz.url_hp : @vz.url_home
-      %{<div id="horizontal_links">
+      %{
+<div id="horizontal_links">
   <ul id="horizontal">
   <li class="refbold">
     <a href="#{url}" #{@vz.js_home}>
@@ -475,7 +473,8 @@ WOK
     </a>
   </li>
   </ul>
-</div>}
+</div>
+}
       end
       %{ #{insert}
 <!- quick ref -!>}
@@ -577,7 +576,7 @@ WOK
 <a name="stop" id="stop"></a>
 <a name="credits"></a>}
     end
-    def scroll_tail
+    def scroll_tail #debug
       nav=scroll_head_navigation_band
       %{#{nav}
 #{@vz.credits_splash}
@@ -587,7 +586,8 @@ WOK
 <a name="end" id="end"></a>
 <a name="finish" id="finish"></a>
 <a name="stop" id="stop"></a>
-<a name="credits"></a>}
+<a name="credits"></a>
+</div></div>}
     end
     def seg_navigation_tail #this is a bug area, look up and "tidy"
       #nav=scroll_head_navigation_band
@@ -879,7 +879,9 @@ WOK
 <a name="end" id="end"></a>
 <a name="finish" id="finish"></a>
 <a name="stop" id="stop"></a>
-<a name="credits" id="credits"></a></div>}
+<a name="credits" id="credits"></a>
+</div>
+}
     end
     def navigation_band(segtocband,seg_table_top_control) #change name to navigaion_band_banner
       %{<table summary="segment navigation band with banner" bgcolor=#{@vz.color_band1} width="100%"><tr>
@@ -896,18 +898,21 @@ WOK
 #{seg_table_top_control}}
     end
     def navigation_band_bottom(segtocband,seg_table_top_control) #change name to navigaion_band_bannerless
-      %{<div class="substance">
+      %{
+<div class="substance">
 <p class="content">
-<table summary="segment navigation band" bgcolor=#{@vz.color_band1} width="100%"><tr>
-<td width="70%" align="center">
-  #{doc_types}
-</td>
-<td width="30%" align="right">
-  #{segtocband}
-</td></tr>
-</table>
-#{seg_table_top_control}
-</p></div>}
+  <table summary="segment navigation band" bgcolor=#{@vz.color_band1} width="100%"><tr>
+  <td width="70%" align="center">
+    #{doc_types}
+  </td>
+  <td width="30%" align="right">
+    #{segtocband}
+  </td></tr>
+  </table>
+  #{seg_table_top_control}
+</p>
+</div>
+}
     end
     def endnote_mark
 %{<p class="center" id="endnotes">
@@ -951,9 +956,10 @@ WOK
     def para_form_css(tag,attrib)                                                    # regular paragraphs shaped here
       ul=ulc=''
       ul,ulc="<ul>\n  ","\n  </ul>" if @tag =~/li/
-      %{<div class="substance">
+      %{
+<div class="substance">
   #{@p_num.ocn_display}
-#{ul}<#{tag} class="#{attrib}" #{@p_num.id}>#{@p_num.name}
+  #{ul}<#{tag} class="#{attrib}" #{@p_num.id}>
     #@parablock
   </#{tag}>#{ulc}
 </div>
@@ -986,10 +992,11 @@ WOK
   </div>'
     end
     def no_paranum
-      %{<div class="substance">
-<p class="ocn">&nbsp;</p>
-<p class="norm">
-  #@one #@two
+      %{
+<div class="substance">
+  <label class="ocn">&nbsp;</label>
+  <p class="norm">
+    #@one #@two
   </p>
 </div>
 }
diff --git a/lib/sisu/v0/html_format_css.rb b/lib/sisu/v0/html_format_css.rb
index 106157ba..1573d107 100644
--- a/lib/sisu/v0/html_format_css.rb
+++ b/lib/sisu/v0/html_format_css.rb
@@ -162,22 +162,25 @@ module SiSU_HTML_Format_type
       @vz=SiSU_Env::Get_init.instance.skin
     end
     def endnote_body
-      %{<div class="substance">
-<p class="ocn">&nbsp;</p>
-<p class="endnote">
+      %{
+<div class="substance">
+  <label class="ocn">&nbsp;</label>
+  <p class="endnote">
   #@one
   </p>
 </div>
 }
     end
     def header_normal
-      %{<div class="substance">
+      %{
+<div class="substance">
   #{@p_num.ocn_display}
   <#@tag class="#@class" #{@p_num.id}>#{@p_num.name}
     #@headname
     #@parablock
   </#@tag>
-</div>}
+</div>
+}
     end
     def heading_body
       @tag,@class='p','norm'
@@ -261,29 +264,36 @@ module SiSU_HTML_Format_type
     def navigation_toc_lev6
     end
     def endnote_body_seg_tail #FIX
-      %{<div class="endnote">
+      %{
+<div class="endnote">
   <p class="endnote">
     #@one
   </p>
-</div>}
+</div>
+}
     end
     def endnote_body_seg_tail_indent
-      %{<div class="endnote">
+      %{
+<div class="endnote">
   <p class="endnote_indent">
     #@one
   </p>
-</div>}
+</div>
+}
     end
     def endnote_seg_body(fn='')  #FIX                                                #url construction keep within single line... BUG WATCH 200408
       fn='doc' if fn.empty? #you may wish to reconsider, sends to 'doc' where no segment info
-      %{<div class="endnote">
+      %{
+<div class="endnote">
   <p class="endnote">
     #@one#{@md.fnl[:pre]}#{fn}#{@md.fnl[:mid]}#{@md.sfx}#{@md.fnl[:post]}#@two#@three
   </p>
-</div>}
+</div>
+}
     end
     def title_header
-      %{<div class="substance">
+      %{
+<div class="substance">
   #@two
 <#@tag class="#@class">
     #@one
@@ -304,12 +314,14 @@ module SiSU_HTML_Format_type
       title_header
     end
     def title_header4
-      %{<div class="substance">
-  <p class="ocn">&nbsp;</p>
+      %{
+<div class="substance">
+  <label class="ocn">&nbsp;</label>
   <h4 class="banner">
     #@one
   </h4>
-</div>}
+</div>
+}
     end
     def subtoc_lev
       one=if @one \
@@ -340,22 +352,26 @@ module SiSU_HTML_Format_type
     end
     #% para sisu
     def header4
-      %{<div class="substance">
+      %{
+<div class="substance">
 #{@p_num.ocn_display}
   <h1 class="norm" #{@p_num.id}>#{@p_num.name}
     #@format
     #@parablock
   </h1>
-</div>}
+</div>
+}
     end
     def header_sub
       @parablock.gsub!(/(?:#{Mx[:en_a_o]}|#{Mx[:en_b_o]}).+?(?:#{Mx[:en_a_c]}|#{Mx[:en_b_c]})\s*/m,' ')
-      %{<div class="substance">
+      %{
+<div class="substance">
     #{@p_num.ocn_display}
   <#@tag class="#@class" #{@p_num.id}>#{@p_num.name} #{@headname}
     #{@parablock}
   </#@tag>
-</div>}
+</div>
+}
     end
     def header5
       @tag,@class='p','bold'
diff --git a/lib/sisu/v0/html_segments.rb b/lib/sisu/v0/html_segments.rb
index e632c835..5b7ede63 100644
--- a/lib/sisu/v0/html_segments.rb
+++ b/lib/sisu/v0/html_segments.rb
@@ -193,7 +193,7 @@ module SiSU_HTML_seg
           end
         end
       end
-      @@seg[:main] << '</div>'
+      @@seg[:main] << "\n</div>\n"
       data
     end
     def header_art(para)
@@ -353,7 +353,7 @@ module SiSU_HTML_seg
         end
         if @sto and @sto.format=~/4:\S+/
           para.gsub!(/^\s*4:\S+\s*|<:[-_\w\d]?(-.+?-)?>|4~!.+/m,'')              #sort seg headers
-          @@seg[:main] << '<div class="content">'
+          @@seg[:main] <<  %{\n<div class="content">\n}
           @@seg[:main] << para
           @@seg[:main] << @@seg_subtoc[@@get_hash_fn]                       #% insertion of sub-toc
         else
@@ -368,6 +368,7 @@ module SiSU_HTML_seg
         @@seg[:tail] << format_head_seg.endnote_mark
         @@seg[:tail] << @@seg_endnotes[@@get_hash_fn] #endnotes deposited at end of individual segments ||@|EXTRACTION OF ENDNOTES|
       end
+      #@@seg[:tail] << '</div><table summary="whitespace"><tr><td>&nbsp;</td></tr></table>'
       ads=SiSU_HTML_promo::Ad.new(@md)
       @@seg[:credits] << format_head_seg.credit << ads.div.close << ads.display << format_head_seg.html_close
     end
@@ -378,7 +379,7 @@ module SiSU_HTML_seg
         if type !~/endnote/
           filename_seg << @@minitoc << @@seg[:main]
         else
-          filename_seg << @@seg[:header_endnotes] << @@minitoc  << '<div class="content">' << @@seg[:endnote_all]
+          filename_seg << @@seg[:header_endnotes] << @@minitoc  << %{\n<div class="content">\n} << @@seg[:endnote_all]
         end
         filename_seg << @@seg[:tail] << @@seg[:tocband_bannerless] << @@seg[:credits]
         filename_seg.flatten!.compact!
diff --git a/lib/sisu/v0/html_table.rb b/lib/sisu/v0/html_table.rb
index ffba4b0b..24721835 100644
--- a/lib/sisu/v0/html_table.rb
+++ b/lib/sisu/v0/html_table.rb
@@ -67,17 +67,18 @@ module SiSU_HTML_table
       @one,@parablock,@vz=one,one,SiSU_Env::Get_init.instance.skin
     end
     def table_head(inf)
-      %{<div class="substance">
-<p class="ocn">
-  #{inf}
-</p>
+      %{
+<div class="substance">
+<label class="ocn">#{inf}</label>
 <p class="norm" id="o#{inf}"><a name="#{inf}"></a>
 <table summary="normal text css" width="100%" border="0" bgcolor="white" cellpadding="2" align="center">}
     end
     def table_end(tablefoot='')
       %{</p>
 #{tablefoot}
-</div><div class="substance">}
+</div>
+<div class="substance">
+}
     end
     def table_row(inf,h=false)
       bold=if h; '<b>'
diff --git a/lib/sisu/v0/shared_html_lite.rb b/lib/sisu/v0/shared_html_lite.rb
index a4e40685..21315d0f 100644
--- a/lib/sisu/v0/shared_html_lite.rb
+++ b/lib/sisu/v0/shared_html_lite.rb
@@ -184,7 +184,7 @@ GSUB
       %{<p class="norm" align="left"><font #{@vz.font_small} #{@vz.font_color} #{@vz.font_face}>}
     end
     def ocn
-      %{#{@tab*1}<p class="ocn">#@ocn</p>} << "\n"
+      %{#{@tab*1}<span class="ocn">#@ocn</span>} << "\n"
     end
    def html_table # get rid of use html_table
       @new_content=[]