.chapter { border-bottom: 2px solid black; margin-bottom: 1em; margin-top: 2em; margin-left: 2em; }
.chapter p { text-indent: 1em; }

.note { cursor: help; /* try to hint not to click */
        border: 1px solid blue; background-color: white; color: black;
        padding-left:.25em; padding-right: .25em /* a larger target */ }

.note .foot { display: none; /* normally do not show (foot) inside (note) */ }

.note:hover .foot { display: block; /* but do show it when mouse pointer is over it */
                    border-top: 1px solid blue; border-left: 1px solid blue; background-color: white; color: black;
                    font-size: x-small; font-family: sans-serif;
                    float: right; margin:0px;
                    padding: 1em;
                    position: fixed;
                    right: 0px; bottom: 0px;
                    width: 66%; height: auto; }

.para { text-indent: 1em; display: block; /* fake paragraphs; (note) is inline and block containers like <p></p> can't appear inline, so Tidy messes them up */ }

.chapterhead {text-align: center; text-transform: uppercase; font-variant: small-caps; }

.transcendent { color: white; font-family: fantasy; background-color: black; font-variant: small-caps; font-style: oblique}

#leftcontent { font-size: 12pt;
               margin: 0em; margin-left: 1em; padding: 0em;
               position: fixed; left:0px; top:0px;
               overflow: auto; height: 99%; width: 24%;

               border-right: 1px solid black;
               border-bottom: 1px dotted green;
             }

#leftcontent ol { font-family: sans-serif;
           margin: 0em;
           padding: 0em;
         }

#leftcontent li {
                  margin-left: 2em; margin-right: 1em; padding-bottom: .25em;
         }

#centercontent {
  margin-left: 25%;
     margin-right:25%;
  }

#rightcontent {
  position: absolute;
  right:0px;
  top:0px;
  width:25%;
  }