/* Copyright (c) Design Matrix, 2004-2012, all rights reserved.
   http://www.designmatrix.com
   Style sheet for slideshow.
*/

/* Thumbnail images */
#thumbs {
  /* MSIE needs height: 104px for JavaScript Navigation thumb. */
  height: 104px;
  /* Center left and right */
  margin-right: auto; margin-left: auto;
}

/* Class for a singe thumbnail image. Used by writethumbs() in slideshow.js */
.thumb {
  border: 1px solid #000000;
  background: #FFFFFF;
  cursor: pointer;
  margin: 1px;
}

#buttonform {
  border: 0px solid black;
  text-align: center;
  font-size: 80%;
  padding-top: 10px;

}

.centered {
  text-align: center;
}

#screen {
  /*
     Width should be width of column - (2 * border), e.g.
     width: 560px; height: 240px; border: 10px solid red;
     MSIE needs height of highest image + 4px.
  */
  width: 100%; height: 264px;
  border: 0px solid red;
  text-align: center;
  /*
  width: 580px; height: 260px;
  border: 1px solid black;
  border-top: 3px solid #888888;
  border-right: 3px solid #EEEEEE;
  border-left: 3px solid #888888;
  border-bottom: 3px solid #EEEEEE;
  background: #7F7F7F; // 50% grey
  background: #000000;

  opacity effects border and background too.
  opacity: 0.5;
  */
}      

#slideimg {
  /* border: only applies to the cover image; others get slideborder from
     slideshow.js.
     Also cursor: only applies to the cover image; others changed dynamically
     with onmouseover and onmouseout via slideshow.js.
  cursor: pointer;
  */
  border: 16px solid black;
  color: black;
}

/* *** Added for Terry O'Shea.  *** */
/* Override ../slideshow/slideshow.css for the cover image */
#slideimg {border: 1px solid #DDDDDD;}
#screen {
  /* Because of its box model bug MSIE 6 needs more than
     maxslideheight + (2 * slideborder); at least 3 pixels.
  height: 277px;
  */
  height: 402px; /* maxslideheight + (2 * border) */
  border-top: 0px solid #000000;
  margin-bottom: 10px;
}
#buttonform {margin-top: 0px;} /* For MSIE 6 of course */


/* MSIE 6 doesn't support this. Only works the first time on Firefox and
 * Chrome
*/
.buttons:hover {
   color: red;
}

#slidecaption {
  font-weight: bold;
  /* 1.25em akes it smaller on MSIE 6! */
  font-size: 1.25em;
  font-size: 125%;
  margin-bottom: 5px;
}
/*
  Why don't these work?
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  @media screen and (max-width: 320px) and (max-width: 480px) {
  @media handheld {

  This works for all devices with width under 480px
  @media only screen and (max-width: 480px;) {
*/
@media only screen and (max-width: 480px;) {

  #slidecaption {
    font-size: 90%;
  }
  #slideimg {
    /*
    width: 50%;
    height: 50%;
    */
  }
}

.credit {
  font-weight: normal;
  /* .8 * 125% for slidecaption = 100%  normal */
  font-size: .8em;
}