/**
HTML:
  <div class="slideshow-thumbnails">
    <ul>
      <li><a class="slideshow-thumbnails-active" /></li>
      <li><a class="slideshow-thumbnails-inactive" /></li>
      ...
      <li><a class="slideshow-thumbnails-inactive" /></li>
    </ul>
  </div>
  
Notes:
  Customize the active / inactive classes to affect the thumbnails animation.
  Use the !important keyword to override FX without affecting performance.
*/

.slideshow-page7-thumbnails {
  bottom: -88px;
  height: 88px;
  left: 0;
  position: absolute;
  width: 100%;
  overflow: hidden;
}
.slideshow-page7-thumbnails * {
  margin: 0;
  padding: 0;
}
.slideshow-page7-thumbnails ul {
  position: absolute;
  padding: 0 !important;
}
.slideshow-page7-thumbnails li {
  float: left;
  list-style: none;
  list-style-type: none !important;
  list-style-position: outside !important;

  height: 88px;
}
.slideshow-page7-thumbnails a {
  display: block;
  float: left;
  overflow: hidden;
  padding: 8px;
  margin: 1px;
  width: 100px;
  height: 70px;
}
.slideshow-page7-thumbnails a:hover {
  background-color: #000000 !important;
  opacity: 1 !important;
}
.slideshow-page7-thumbnails img {
  display: block;
}
.slideshow-page7-thumbnails a img {
  margin-top: 0;
}
.slideshow-page7-thumbnails-hidden {
  background-color: #FFF;
  opacity: 0;
}
.slideshow-page7-thumbnails-inactive {
  background-color: #662624;
  opacity: .5;
}
.slideshow-page7-thumbnails-active {
  background-color: #CC6600;
  opacity: 1;
}
.slideshow-page7-thumbnails {
	height: 680px;
	right: auto;
	left: -118px;
	/*top: -1px;*/
	top: 0;
	width: 118px;
}

.slideshow-page7-thumbnails ul {
	height: 1144px;
	width: 118px;
}

.slideshow-page7 {
	right: -118px
}