@import url(../../workshop.css);

.thumbwrapper { /* wrapper around a single thumbnail */
  float: left;
  margin: 10px;
  width: 133px; /* same as max thumbnail width */
  height: 155px; /* max thumbnail height plus space for caption */
}

.thumbnail { /* wrapper around the image in a thumbnail */
  text-align: center;
}
.prev .thumbnail { 
  text-align: left;
}
.next .thumbnail { 
  text-align: right;
}

.prev, .next { /* .prev and .next together add up to less then 100% */
  max-width: 48%;
}

.thumbnail a, .thumbnail img { /* the image itself */
  max-width: 100%;
  width: auto;
  height: auto;
}

.caption, .name { /* this is for text below thumbnails and images */
  line-height: 130%;
  text-align: center;
  padding: 0px 4px;
}

.thumbnail .name { /* this is only for text below thumbnails, not full images */
  font-size: 0.8em;
  /*
  white-space: nowrap;
  overflow: hidden;
  */
}

.thumbs { /* the area all the thumbnails reside in */
  margin: 2%;
}

.imagepage { /* wrapper around most of the body of an image page */
  /* To centre a div, you need to specify its width, as well as specifying
   * "auto" left and right margins.
   */
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

.fullimage { /* the full image areas, including the caption */
  text-align: center;
  border: 0;
  width: 800px;
  max-width: 100%;
  margin: 10px 0;
}

.fullimage a, .fullimage img { /* the image itself */
  max-width: 100%;
  width: auto;
  height: auto;
}

.spacer { /* needed to clean the flow before and after floating thumbnails */
  clear: both;
}

.prev { /* link from an image page to the previous image */
  float: left;
  margin-left: 0 !important;
}

.next { /* link from an image page to the previous image */
  float: right;
  margin-right: 0 !important;
}

a img {
  /* Browsers often have built-in rules that apply a border for "a img".
   * Override that here. */
  border: 0px;
}

address { /* the footer of all pages */
  float: right;
  width: 90%;
  margin: 2%;
  font-size: 0.8em;
  color: #203643;
  font-style: normal;
  text-align: right;
}