/* The following uses as many different images of shadows as there are
   different sizes of images. The shadow is shown as the background
   image for an img element. The shadow is 24px wider and taller than
   the image it is the shadow for. This works only as long as the
   sizes of images are known.
*/

div.thumb img {padding: 6px 18px 18px 6px; background-repeat: no-repeat;
  background-position: bottom right}

img[width="100"]               {background-image: url(images/sh-100-19.png)}
img[height="100"]              {background-image: url(images/sh-100-100.png)}

img[width="100"][height="5"]   {background-image: url(images/sh-100-5.png)}
img[width="100"][height="13"]  {background-image: url(images/sh-100-13.png)}
img[width="100"][height="19"]  {background-image: url(images/sh-100-19.png)}
img[width="100"][height="38"]  {background-image: url(images/sh-100-38.png)}
img[width="100"][height="50"]  {background-image: url(images/sh-100-50.png)}
img[width="100"][height="53"]  {background-image: url(images/sh-100-53.png)}
img[width="100"][height="56"]  {background-image: url(images/sh-100-56.png)}
img[width="100"][height="60"]  {background-image: url(images/sh-100-60.png)}
img[width="100"][height="62"]  {background-image: url(images/sh-100-62.png)}
img[width="100"][height="65"]  {background-image: url(images/sh-100-65.png)}
img[width="100"][height="66"]  {background-image: url(images/sh-100-66.png)}
img[width="100"][height="67"]  {background-image: url(images/sh-100-67.png)}
img[width="100"][height="68"]  {background-image: url(images/sh-100-68.png)}
img[width="100"][height="69"]  {background-image: url(images/sh-100-69.png)}
img[width="100"][height="70"]  {background-image: url(images/sh-100-70.png)}
img[width="100"][height="71"]  {background-image: url(images/sh-100-71.png)}
img[width="100"][height="72"]  {background-image: url(images/sh-100-72.png)}
img[width="100"][height="73"]  {background-image: url(images/sh-100-73.png)}
img[width="100"][height="74"]  {background-image: url(images/sh-100-74.png)}
img[width="100"][height="75"]  {background-image: url(images/sh-100-75.png)}
img[width="100"][height="77"]  {background-image: url(images/sh-100-77.png)}
img[width="100"][height="78"]  {background-image: url(images/sh-100-78.png)}
img[width="100"][height="82"]  {background-image: url(images/sh-100-82.png)}
img[width="100"][height="86"]  {background-image: url(images/sh-100-86.png)}
img[width="100"][height="88"]  {background-image: url(images/sh-100-88.png)}
img[width="100"][height="92"]  {background-image: url(images/sh-100-92.png)}
img[width="100"][height="95"]  {background-image: url(images/sh-100-95.png)}
img[width="19"][height="100"]  {background-image: url(images/sh-19-100.png)}
img[width="23"][height="100"]  {background-image: url(images/sh-23-100.png)}
img[width="29"][height="100"]  {background-image: url(images/sh-29-100.png)}
img[width="46"][height="100"]  {background-image: url(images/sh-46-100.png)}
img[width="56"][height="100"]  {background-image: url(images/sh-56-100.png)}
img[width="57"][height="100"]  {background-image: url(images/sh-57-100.png)}
img[width="60"][height="100"]  {background-image: url(images/sh-60-100.png)}
img[width="63"][height="100"]  {background-image: url(images/sh-63-100.png)}
img[width="64"][height="100"]  {background-image: url(images/sh-64-100.png)}
img[width="65"][height="100"]  {background-image: url(images/sh-65-100.png)}
img[width="66"][height="100"]  {background-image: url(images/sh-66-100.png)}
img[width="67"][height="100"]  {background-image: url(images/sh-67-100.png)}
img[width="68"][height="100"]  {background-image: url(images/sh-68-100.png)}
img[width="69"][height="100"]  {background-image: url(images/sh-69-100.png)}
img[width="73"][height="100"]  {background-image: url(images/sh-73-100.png)}
img[width="74"][height="100"]  {background-image: url(images/sh-74-100.png)}
img[width="76"][height="100"]  {background-image: url(images/sh-76-100.png)}
img[width="82"][height="100"]  {background-image: url(images/sh-82-100.png)}
img[width="83"][height="100"]  {background-image: url(images/sh-83-100.png)}
img[width="86"][height="100"]  {background-image: url(images/sh-86-100.png)}
img[width="87"][height="100"]  {background-image: url(images/sh-87-100.png)}
img[width="93"][height="100"]  {background-image: url(images/sh-93-100.png)}
img[width="94"][height="100"]  {background-image: url(images/sh-94-100.png)}
img[width="96"][height="100"]  {background-image: url(images/sh-96-100.png)}
img[width="100"][height="100"] {background-image: url(images/sh-100-100.png)}

/* If 'box-shadow' is supported, the above can be done more efficiently: */
@supports (box-shadow: 6px 6px 12px #333) {
  div.thumb img {padding: 0; margin: 6px 18px 18px 6px}
  img[width][height] {background: none; box-shadow: 6px 6px 12px #333}
}

/* The thumbnails page has body.index, the photo pages body.photo */

html {margin: 0}
body {background: url(images/redtriangle.png) top left no-repeat white;
  color: black; margin: 0; padding: 1em;
  font: medium/1.3 Adobe Garamond Pro, Garamond, Palatino, serif}
body.index {padding: 1em 0.5em}
body.photo {text-align: center}
div.thumb {min-width: 150px; width: 13em; text-align: center;
  /* The following line doesn't yet work in Mozilla 1.7.3 or Firefox 1.5.0.5 */
  display: inline-block; vertical-align: top;
  /* Therefore, we use this one instead */
  float: left; height: 17em; overflow: hidden; text-overflow: ellipsis;
  position: relative;
  line-height: 1.1; margin: 0 0.5em 1em 0.5em}
div.thumb::after {content: " "; position: absolute; bottom: 0; height: 2em;
  left: 0; right: 0;
  background: linear-gradient(hsla(0,0%,100%,0.0), hsla(0,0%,100%,1.0))}
p {margin: 0}
h3 {margin: 0}

/* If flexbox is supported, we can put the h3 below the thumbnail */
div.thumb {display: flex; flex-direction: column}
.imgwrap {order: -1}

img {border: none; vertical-align: text-top; max-width: 100%}
h1 {padding: 0.5em 2em; color: rgb(199, 0, 0); text-align: center;
  font: 300%/1 Brush Script MT, Brush Script Std, Apple Chancery, Slogan, 
    Brushstroke, Coronet, Textile, Marker Felt, cursive}
body.index h1 {margin: 0 0 1em 0}
body.photo h1 {margin: 0}
.thumb .num, .thumb .place, .thumb .date, .thumb .rdf, .sep {display: none}
address {clear: both; margin-top: 2em; text-align: left; color: red}
dt {display: compact}
dd {margin-top: 0.2em; margin-left: 4em}
/*
div.series {border: thin solid rgb(199, 0, 0); clear: both}
div.series::after {display: block; content: ""; clear: both}
*/
div.series {clear: both}
h2 {text-align: center; padding: 0.5em; border-top: thin solid;
  font-weight: normal; color: #888; clear: both}
div.preamble + h2 {border-top: none; padding-top: 0}
ul {text-align: center; padding-left: 0}
li {display: inline}
li::before {content: "\A0\A0\2022\A0\A0"}
li:first-child::before {content: ""}
/*
a:link {text-decoration: underline}
a:visited {color: #888; text-decoration: underline}
*/

.nav {float: left; margin-top: 1em; font: x-large/1.3 FreeSerif, serif}
a[rel=meta] {float: right}
p.desc {font-style: italic; margin-top: 1em}
table {margin: 1em auto; border-spacing: 0; border-collapse: collapse}
tr {border-bottom: thin solid}
th {text-align: right; padding: 0.2em 0.5em 0.1em 0}
td {text-align: left; padding: 0.2em 0 0.1em 0.5em}

/* The preamble. It may have alternatives (translations) */
div.preamble {margin: 1em 1em 3em 1em; border-bottom: thin solid #888; 
  padding-bottom: 1em; text-align: justify; hyphens: auto}
div.preamble:after {content: " "; display: block; line-height: 0;
  clear: both}
div.preamble p + p {text-indent: 2em}
div.alternatives {display: table; width: 100%; table-layout: fixed;
  border-spacing: 0; border-collapse: collapse; margin: 1em 0}
div.alternatives > div {display: table-cell; vertical-align: baseline;
  border-left: 2em solid white}
div.alternatives > div:first-child {border-left: none}
div.preamble ul {text-align: center; padding-left: 1em}
div.preamble li {display: list-item; list-style-position: inside}
div.preamble li::before {content: ""; content: none}
div.preamble p.mtb {margin-top: 1.2em; text-indent: 0}
div.preamble h3 {display: run-in; margin-top: 0.6em; text-align: left}
div.preamble h3:after {content: " "}
div.preamble h3 + p {margin-top: 0.6em}
div.preamble th {text-align: left}

div.preamble blockquote {columns: 25em}

sup {line-height: 0.5}

@media print {

  a.nav {display: none}
  a:link, a:visited {color: inherit}
  h1 {padding-top: 0}
  body {padding: 0}

}