Roughing It

by clayshannon

HTML

<h1>Roughing It</h1>

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">Annotated, with <span class="sam">C</span><span class="arkansas">o</span><span class="higbie">l</span><span class="bemis">o</span><span class="other">r</span><span class="other2">i</span><span class="gov">z</span><span class="slade">e</span><span class="street">d</span> Dialogue</aside>

<p>TO CALVIN H. HIGBIE, Of California, an Honest Man, a Genial Comrade, and a Steadfast Friend. THIS BOOK IS INSCRIBED By the Author, In Memory of the Curious Time When We Two WERE MILLIONAIRES FOR TEN DAYS.</p>

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">Although the events it contains spans six years -- beginning with the first year of the American Civil War in 1861 and continuing through 1867 -- <em>Roughing It</em> was not available to the public until several years after the events described therein -- it was finally published in 1872, appearing after Twain's first full-length book <em>The Innocents Abroad</em> in 1869 and before <em>The Adventures of Tom Sawyer</em> in 1876. So as to the events described in them, <em>Roughing It</em> was chronologically the first of his 'travel books', but it appeard after <em>The Innocents Abroad</em>. Later came <em>A Tramp Abroad</em> and finally <em>Following the Equator</em></aside>

<h2>Dialog Colorization Scheme</h2>

<p>This is Sam Clemens as the narrator</p>
<p class="sam">This is Sam Clemens speaking</p>
<p class="higbie">This is Calvin Higbie speaking</p>
<p class="bemis">This is Bemis speaking</p>
<p class="gov">This is Governor Nye speaking</p>
<p class="irish">This is 'The Irish Brigade' speaking</p>
<p class="slade">This is Slade speaking</p>
<p class="street">This is Street speaking</p>
<p class="brigham">This is Brigham speaking</p>
<p class="harris">This is Harris speaking</p>
<p class="coljack">This is Colonel Jack speaking</p>
<p class="oliphant">This is Oliphant speaking</p>
<p class="arkansas">This is...

CSS

body {
    font-family:"Segoe UI", "Bookman Old Style", "Candara", "Calibri", "Consolas", sans-serif;
    font-size: 1.2em;
    background-color: black;
    color: white;
}
h1 {
    font-family:"Lucida Sans", "Consolas", sans-serif;
    color: chocolate;
    font-size: 3em;
}
h2 {
    font-family:"Courier", "Consolas", sans-serif;
    color: gold;
}
h3 {
    font-family:"Lucida Sans", "Consolas", sans-serif;
    color: azure;
}
table {
    background-color: cornsilk;
}
aside {
    color: cornsilk;
    font-family:'Bookman Old School', Candara, Calibri, sans-serif;
}
aside p:last-child {
    margin-bottom:0;
}
.chapter {
    font-size: 2em;
    color: gold;
    font-family:"Consolas";
}
.sam {
    color: skyblue;
}
.others {
    color: moccasin;
}
.others2 {
    color: chocolate;
}
.oliphant {
    color: aquamarine;
}
.bemis {
    color: yellow;
}
.slade {
    color: brown;
}
.higbie {
    color: lightgreen;
}
.irish {
    color: green;
}
.street {
    color: aqua;
}
.brigham {
    color: olive;
}
.harris {
    color: khaki;
}
.gov {
    color: silver;
}
.arkansas {
    color: greenyellow;
}
.lady {
    color: deeppink;
}
.clagett {
    color: crimson;
}
.minister {
    color: lawngreen;
}
.coljack {
    color: burlywood;
}
.scotty {
    color: darkorange;
}
.smith {
    color: sandybrown;
}
.johnson {
    color: palevioletred;
}
.ballou {
    color: red;
}
.ned {
   color: aqua;
}
.noakes {
    color: khaki;
}
.blaine {
    color: dodgerblue;
}
.baker {
    color: gold;
}
.quartz {
    color: goldenrod;
}
.fish {
    color: salmon;
}
.markiss {
    color: olivedrab;
}
.wiegand {
    color: yellowgreen;
}
.mormon {
    font-family: 'Comic Sans';
}
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:...