Selected Stories or Essays, Letters, Speeches

by clayshannon

HTML

<h1 class="smallcaps">Selected Stories or Selected Essays, Letters, and Speeches / Historias Seleccionadas o Seleccionados Ensayos, Cartas y Discursos</h1>
<h2>by / por <span >Author Name</span></h2>

<p><em><span class="consolas">In </span><span class="english">English</span><span class="consolas"> and </span><span class="german"><strong>Spanish</strong></span></em><em><span class="consolas"> / En </span><span class="english">Inglés</span><span class="consolas"> y </span><span class="german"><strong>Español</strong></span></em></p>

<p class="smallfont">Translated by ? / Traducida por ?</p>

<hr/>
<h2>Table Of Contents for eBook (links, no page numbers)</h2>
<table border="1">
<tbody>
<tr>
<td>
<a href="#Bla1">First</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla2">Second</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla3">Third</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla4">Fourth</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla5">Fifth</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla6">Sixth</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla7">Seventh</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla8">Eighth</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla9">Ninth</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla10">Tenth</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla11">Eleventh</a>
</td>
</tr>
<tr>
<td>
<a href="#Bla12">Twelfth</a>
</td>
</tr>
</tbody>
</table>

<h2>Table Of Contents for print book (no links, but has page numbers)</h2>
<table border="1">
<tbody>
<tr>
<td>
<p>Story 1 / Cuenta 1</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Story 2 / Cuenta 2</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Story 3 / Cuenta 3</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Story 4 / Cuenta 4</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Story 5 / Cuenta 5</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Story 6 / Cuenta 6</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Story 7 / Cuenta 7</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Story 8 / Cuenta 8</p>
</td>
<td>
<p>page...

CSS

body {
    font-family:"Segoe UI", "Palatino Linotype", "Bookman Old Style", "Candara", "Calibri", "Consolas", serif;
    font-size: 1.2em;
}
section, aside, header, footer, nav, article, time {
    display: block;
}
h1 {
    font-family: "Lucida Sans", "Courier";
    text-shadow: -4px 4px 3px #999999;
}
h2 {
    font-family:"Segoe UI Light", "Consolas", sans-serif;    
}
h3 {
    font-family:"Lucida Sans", "Consolas", "Baskerville", "Palatino Linotype", sans-serif;    
}
.chapter {
    font-size: 2em;
    font-family:"Consolas";
    background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
table {
    background-color: rgb(255,248,220);
}
.smallcaps {
    font-variant: small-caps;
}
.smallfont {
    font-size: 0.6em;
}aside {
    color: cornsilk;
    font-family:'Bookman Old School', Candara, Calibri, 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: navy;
}
.tightvert {
    line-height: .5;
}
.english {
    font-family:"Segoe UI";
}
.spanish {
    font-family: Candara, "Bookman Old School";
    margin-left: 1em;
    margin-right: 1em;
}
.consolas {
    font-family:"Consolas";
}