/* CSS for hoylen.com photo albums index page */

@import url(album.css);

h1 {
 border-bottom: thin solid #555;
}

/* Description */

div.desc {
 margin: 2ex 0em;
}

/* Thumbnails */

div.thumbnails {
 margin: 30px 0;
 padding: 40px 20px;
 text-align: center; /* for non-compliant CSS browsers */
 background: #000;
}

/*
<div class="thumbnails">
  <span class="thumb">
    <a href="sample.html" title="untitled">
      <img src="thumbnails/sample.jpg" alt="untitled" />
    </a>
  </span>
  ...
</div>
*/

div.thumbnails span.thumb {
 display: inline-block;
 vertical-align: middle;
 margin: 0;
 border: 0;
 padding: 10px;
 min-width: 170px; /* = thumbnail_width + 2*padding */
}

div.thumbnails a {
 background: inherit;
 color: #6cf;
 text-decoration: none;
}
div.thumbnails a:hover {
 background: inherit;
 color: #f90;
 text-decoration: underline;
}

div.thumbnails a img {
 margin: 0;
 border: 5px #fff solid;
 padding: 0;

 /* The rest is used when thumbnail image is missing */
 min-width: 100px;
 min-height: 100px;
 background: black;
 color: #666;
 font-size: smaller;
}
div.thumbnails a img:hover {
 border: 5px #f90 solid;
 background: black;
 color: white;
}

@media print {
 div.thumbnails {
  background: inherit;
 }
 div.thumbnails a img {
  border: 5px #ccc solid;
 }
}

/* EOF */