Collected Stories, Essays, Etc. Starting Point

by clayshannon

HTML

<h1 class="smallcaps">Eight Tales of Poe / Ocho Cuentos de Poe</h1>
<h2>by / por <span >Edgar Allan Poe</span></h2>

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

<p class="smallfont">Translated by / Traducida por Carmen Torres Calderón de Pinillos 1920</p>

<hr/>
<h2>Table Of Contents</h2>
<table border="1">
<tbody>
<tr>
<td>
    <a href="#EAPCask">The Cask of Amontillado / EL BARRIL DE AMONTILLADO</a>
</td>
</tr>
<tr>
<td>
    <a href="#EAPGoldbug">The Gold-Bug / EL ESCARABAJO DE ORO</a>
</td>
</tr>
<tr>
<td>
    <a href="#EAPUsher">The Fall of the House of Usher / LA RUINA DE LA CASA DE ÚSHER</a>
</td>
</tr>
<tr>
<td>
<a href="#EAPLigeia">Ligeia</a>
</td>
</tr>
<tr>
<td>
    <a href="#EAPMask">The Mask of the Red Death / LA MÁSCARA DE LA MUERTE ROJA</a>
</td>
</tr>
<tr>
<td>
    <a href="#EAPMorgue">The Murders in the Rue Morgue / EL CRIMEN DE LA RUE MORGUE</a>
</td>
</tr>
<tr>
<td>
    <a href="#EAPCat">The Black Cat / EL GATO NEGRO</a>
</td>
</tr>
<tr>
<td>
    <a href="#EAPDescent">A Descent into the Maelström / UN DESCENSO POR EL MAELSTRÖM</a>
</td>
</tr>
</tbody>
</table>

<section>
<p class="chapter"><a id="EAPCask"></a>The Cask of Amontillado / <span class="spanish"><strong>EL BARRIL DE AMONTILLADO</strong></span></p>

<p>The thousand injuries of Fortunato I had borne as I best could, but 
when he ventured upon insult, I vowed revenge.  You, who so well know 
the nature of my soul, will not suppose, however, that I gave utterance 
    to a threat.  <em>At length</em> I would be avenged; this was a point 
definitely settled--but the very definitiveness with which it was 
resolved, precluded the idea of risk.  I must not only punish, but 
punish with impunity.  A wrong is unredressed when...

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;
    font-size: 3em;
}
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;
}
.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";
}