/* figure-divs and their supporters */
div.figure {
padding: 10px; 
margin: 0.67em auto; /* needed to support centering of almost-full-width figures */
border: thin solid silver;
}
div.figure img { width: 100%; }
div.figure p { /* the default "legend" style, as opposed to "caption" */
font-family: verdana, arial, sans-serif;
font-size: smaller;
padding-left: 1%;
padding-right: 1%;
line-height: 1.1;
margin: 0.25em auto 0 auto;
}
div.figure p.caption { text-align: center; }
/* "caption" for short phrases; "legend" (default) is for continuous prose */
.full { width: 90%; padding: 10px; margin: 0.67em auto; }
/* "full" should be unnecessary, but this responds to the box model bugs in IE */
.half { width: 50%; padding: 10px; margin: 0.5em 0.67em; }
.third { width: 33%; padding: 10px; margin: 0.5em 0.67em; }
.quarter { width: 25%; border: none; padding: 5px; margin: 0.25em 0.5em; }
.fifth { width: 20%; border: none; padding: 5px; margin: 0.25em 1%; }
.right { float: right; margin-left: 2%; }
.left { float: left; margin-right: 2%; }
/* end figure-divs */
/* span.lorem { color: silver; }
 */
/* example 1 - no caption 20%
<p><img class="fifth right" style="max-width: 600px; max-height: 326px; min-width: 3em;" src="http://rjohara.net/images/coins/rjo-55.jpg" border="1" alt="[Image: An electrum twelfth-stater from early Lydia, ca. 600 BC]" title="An electrum twelfth-stater from ancient Lydia, about 600 BC." /></p>
*/
/* example 2
<div class="figure full" style="max-width: 600px; min-width: 7em;">
<img style="max-width: 600px; max-height: 326px;" src="http://rjohara.net/images/coins/rjo-55.jpg" border="1" alt="[Image: An electrum twelfth-stater from early Lydia, ca. 600 BC]" title="An electrum twelfth-stater from ancient Lydia, about 600 BC." />
*/