Starting Point for New Books

by clayshannon

HTML

<h1 style="color: gold;">Replace this with the Title of the Book</h1>

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">Annotated, with <span class="skyblue">C</span><span class="violet">o</span><span class="roja">l</span><span class="choctypus">o</span><span class="man1">r</span><span class="amarillo">i</span><span class="lightgreen">z</span><span class="darkorange">e</span><span class="lady2">d</span> Dialogue</aside>

<hr/>
<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">
<em>This book (replace with title)</em> was written ... bla bla bla
</aside>

<hr/>
<table border="1" style="background-color:black" >
    <caption><caption><span class="darkorange">C</span><span class="violet">o</span><span class="gold">l</span><span class="lightgreen">o</span><span class="man1">r</span><span class="silver">-</span><span class="sam">C</span><span class="man2">o</span><span class="crowd">d</span><span class="lady1">e</span><span class="lady2">d</span>    Dialog Table</caption> Dialog Table</caption>
<tbody>
<tr>
<td>
This is Samuel L. Clemens narrating
</td>
</tr>
<tr>
<td>
<span class="sam">This is Sam Clemens speaking</span>
</td>
</tr>
<tr>
<td>
<span class="darkorange">This is a [replace - key character] speaking</span>
</td>
</tr>
<tr>
<td>
<span class="violet">This is [replace] speaking</span>
</td>
</tr>
<tr>
<td>
<span class="gold">This is gold speaking</span>
</td>
</tr>
<tr>
<td>
<span class="lightgreen">This is lightgreen speaking</span>
</td>
</tr>
<tr>
<td>
<span class="man1">This is an unnamed man speaking</span>
</td>
</tr>
<tr>
<td>
<span class="man2">This is a second unnamed man speaking</span>
</td>
</tr>
<tr>
<td>
<span class="lady1">This is an unnamed woman speaking</span>
</td>
</tr>
<tr>
<td>
<span class="lady2">This is another unnamed woman speaking</span>
</td>
</tr>
<tr>
<td>
<span class="crowd">This is a member of a crowd or audience speaking</span>
</td>
</tr>
<tr>
<td>
<span class="silver">This is silver...

CSS

body {
    font-family:"Segoe UI", "Bookman Old Style", "Candara", "Calibri", "Consolas", sans-serif;
    font-size: 1.2em;
    background-color: black;
    color: white;
}
section, aside, header, footer, nav, article, time {
    display: block;
}
h1 {
    font-family: "Lucida Sans", "Courier";
}
h2 {
    font-family:"Courier", "Consolas", sans-serif;
    color: rgb(255,215,0);
}
h3 {
    font-family:"Lucida Sans", "Consolas", sans-serif;
    color: teal;
}
table {
    background-color: rgb(255,248,220);
}
.chapter {
    font-size: 2em;
    color: rgb(255,215,0);
    font-family:"Consolas";
}
aside {
    color: cornsilk;
    font-family:'Bookman Old School', Candara, Calibri, sans-serif;
}
aside p:last-child {
    margin-bottom:0;
}
span:hover {
    position:relative;
    cursor:pointer;
}
span[title]:hover:after {
    content: attr(title);
    background:yellow;
    padding: 4px 8px;
    color: #000;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    white-space: nowrap;
}
.marginalize {
    margin-left: 5em;
    margin-right: 5em;
    color: antiquewhite;
}
.tightvert {
    line-height: .5;
}
a {
  color: green;
}
.r {
   color: hsl(0, 100%, 50%);
}
.o {
   color: hsl(30, 100%, 50%);
}
.y {
   color: hsl(60, 100%, 50%);
}
.g {
   color: hsl(120, 100%, 50%);
}
.b {
   color: hsl(240, 100%, 70%);
}
.i {
   color: hsl(280, 100%, 60%);
}
.v {
   color: hsl(300, 100%, 50%);
}
.sam {
    color: rgb(135,206,255);
}
.darkorange {
    color: rgb(255,140,0);
}
.violet {
    color: rgb(238,130,238);
}
.gold {
    color: rgb(255,215,0);
}
.lightgreen {
    color: rgb(124,252,0);
}
.man1 {
    color: rgb(240,230,140);
}
.man2 {
    color: rgb(218,165,32);
}
.lady1 {
    color: rgb(255,192,203);
}
.lady2 {
    color: rgb(255,105,180);
}
.crowd {
    color: rgb(32,178,170);
}
.palegreen {
    color: rgb(152,251,152);
}
.roja {
    color: red;
}
.choctypus, .choc {
    color: rgb(210,105,30);
}
.orange {
    color: rgb(255,165,0);
}
.amarillo {
    color:...