/*  -----------------------------------------------
    Style Sheet:
      /css/common/slideshow.css
    -----------------------------------------------  */


/*  Alternate Images SlideShow
    -----------------------------------------------
    Has hidden navigation (not present JS turned off)
    ----------------------------------------------- */
    
    /* If the navigation buttons are present, make space for them on the left and right of the slideshow container. */
    #alternateImages.hasNav {
      position: relative;
      padding: 0 12px 0 18px;
    }
    #alternateImages .nav h1,
    #alternateImages .nav h2,
    #alternateImages .nav h3,
    #alternateImages .nav h4,
    #alternateImages .nav h5,
    #alternateImages .nav h6 {
      position: absolute;
      top: -9999px;
    }
    #alternateImages ul,
    #alternateImages li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #alternateImages li {
      display: block;
      float: left;
      overflow: hidden;
      padding-right: 7px;
    }
    
    .scriptable #alternateImages .nav a {
      position: absolute;
      top: 0;
      background-color: #F3FAED;
      height: 60px;
      width: 10px;
      border: 1px solid #D6D6D6;
      text-indent: -9999px;
      overflow: hidden;
    }
    .scriptable #alternateImages .nav .disabled a {
      background-color: #F4F4F4 !important;
      cursor: default;
    }
    .scriptable #alternateImages .nav .next a {
      right: 0;
      background: url(/img/ui/icon/triangle/next.gif) no-repeat 50% 50%;
    }
    .scriptable #alternateImages .nav a:hover {
      background-color: #D8E4CF;
    }
    .scriptable #alternateImages .nav .next.disabled a {
      background-image: url(/img/ui/icon/triangle/next-disabled.gif);
    }
    .scriptable #alternateImages .nav .previous a {
      left: 0;
      background: url(/img/ui/icon/triangle/previous.gif) no-repeat 50% 50%;
    }
    .scriptable #alternateImages .nav .previous.disabled a {
      background-image: url(/img/ui/icon/triangle/previous-disabled.gif);
    }
    #alternateImages img {
      border-width: 0;
    }
    .scriptable #alternateImages img {
      cursor: pointer;
    }
    
    /* If JS is active, only show the small images. Otherwise only show the big images. */
    #alternateImages img {
      position: absolute;
      left: -9999px;
    }
    #alternateImages img.large,
    .scriptable #alternateImages img {
      position: static;
      left: auto;
    }
    .scriptable #alternateImages img.large {
      position: absolute;
      left: -9999px;
    }


/*  Contained Slide Show
    -----------------------------------------------
    1) Has persistant navigation (even with JS turned off)
    2) Has a thick border around it (to separate it from the content around it)
    ----------------------------------------------- */
    .containedSlideShow {
      position: relative;
      padding: 0 0 86px 0;
      background-color: #E1E1E2;
      width: 464px;
      margin-bottom: 10px;
    }
    .containedSlideShow h2 {
      border: 0;
      margin-bottom: 0;
      padding-bottom: 10px;
    }
    .containedSlideShow .items {
      position: absolute;
      left: 27px;
      padding-left: 0;
      margin: 0;
      border-width: 0 2px 0 3px;
      border-style: solid;
      border-color: #E1E1E2;
    }
    .containedSlideShow .items li {
      float: left;
      display: block;
      border-width: 3px 1px 3px 0;
      border-style: solid;
      border-color: #E1E1E2;
      overflow: hidden;
    }
    .containedSlideShow .items li a {
      display: block;
      border-width: 1px;
      border-style: solid;
      width: 78px;
      height: 78px;
      overflow: hidden;
    }
    .containedSlideShow .items li a span {
      display: block;
      position: absolute;
      left: -9999px;
    }
    .containedSlideShow .items li a:link,
    .containedSlideShow .items li a:visited {
      border-color: #FFFFFF;
    }
    .containedSlideShow .items li a:hover,
    .containedSlideShow .items li a:active {
      border-color: #909B39;
    }
    .containedSlideShow .items li a img {
      border-width: 0;
    }
    .containedSlideShow .nav h1,
    .containedSlideShow .nav h2,
    .containedSlideShow .nav h3,
    .containedSlideShow .nav h4,
    .containedSlideShow .nav h5,
    .containedSlideShow .nav h6 {
      margin: 0;
      padding: 0;
      height: 1px;
      width: 1px;
      overflow: hidden;
      position: absolute;
      left: -9999px;
    }
    .containedSlideShow .nav ul {
      position: absolute;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .containedSlideShow .nav li {
      margin: 0;
      padding: 0;
      display: block;
      height: 37px;
      background: url(/img/ui/background/bevel/left.gif) no-repeat 0 0;
      float: left;
    }
    .containedSlideShow .nav li.hover {
      background-position: 0 -37px;
    }
    .containedSlideShow .nav li.active {
      background-position: 0 -74px;
    }
    .containedSlideShow .nav a,
    .containedSlideShow .nav span {
      display: block;
    }
    .containedSlideShow .nav a {
      background: url(/img/ui/background/bevel/right.gif) no-repeat 100% 0;
      height: 26px;
      padding: 11px 8px 0 8px;
    }
    .containedSlideShow .nav li.hover a {
      background-position: 100% -37px;
    }
    .containedSlideShow .nav li.active a {
      background-position: 100% -74px;
    }
    .containedSlideShow .nav span {
      font-size: 11px;
      line-height: 15px;
      color: #404040;
      font-weight: bold;
    }
    .containedSlideShow .nav a:hover,
    .containedSlideShow .nav a:active {
      text-decoration: none;
    }
    .containedSlideShow .nav li.next {
      position: absolute;
      right: -434px;
    }
    .containedSlideShow .nav li a,
    .containedSlideShow .nav li span.outer {
      padding: 37px 7px 0 7px;
      height: 49px;
    }
    .containedSlideShow .nav li a span,
    .containedSlideShow .nav li span span {
      text-indent: -9999px;
      overflow: hidden;
      height: 50px;
      width: 16px;
    }
    .containedSlideShow .nav li a {
      cursor: pointer;
    }
    .containedSlideShow .nav li.disabled a {
      cursor: default;
    }
    .containedSlideShow .nav li.next {
      background-image: url(/img/ui/background/bevel-tall-next/right.gif);
      background-position: 100% 0;
      height: 86px;
    }
    .containedSlideShow .nav li.next:hover {
      background-position: 100% -86px;
    }
    .containedSlideShow .nav li.next:active {
      background-position: 100% -172px;
    }
    .containedSlideShow .nav li.previous {
      background-image: url(/img/ui/background/bevel-tall-previous/left.gif);
      background-position: 0 0;
      height: 86px;
    }
    .containedSlideShow .nav li.previous:hover {
      background-position: 0 -86px;
    }
    .containedSlideShow .nav li.previous:active {
      background-position: 0 -172px;
    }
    .containedSlideShow .nav li.next a,
    .containedSlideShow .nav li.next span {
      background: url(/img/ui/background/bevel-tall-next/left.gif) no-repeat 0 0;
    }
    .containedSlideShow .nav li.previous a,
    .containedSlideShow .nav li.previous span {
      background: url(/img/ui/background/bevel-tall-previous/right.gif) no-repeat 100% 0;
    }
    .containedSlideShow .nav li.next:hover a {
      background-position: 0 -86px;
    }
    .containedSlideShow .nav li.next:active a {
      background-position: 0 -172px;
    }
    .containedSlideShow .nav li.previous:hover a {
      background-position: 100% -86px;
    }
    .containedSlideShow .nav li.previous:active a {
      background-position: 100% -172px;
    }
    .containedSlideShow .nav li.next a span,
    .containedSlideShow .nav li.next span span {
      background-image: url(/img/ui/icon/double-arrow/next.png);
      background-repeat: no-repeat;
      height: 11px;
    }
    .containedSlideShow .nav li.previous a span,
    .containedSlideShow .nav li.previous span span {
      background-image: url(/img/ui/icon/double-arrow/previous.png);
      background-repeat: no-repeat;
      height: 11px;
    }
    .containedSlideShow .nav li.disabled a span,
    .containedSlideShow .nav li.disabled span span {
      background-position: 0 -11px;
    }
    .containedSlideShow .nav li span.progress {
      display: block;
      position: absolute;
      left: 7px;
      top: 11px;
      background-image: url(/img/ui/working.gif);
      background-repeat: no-repeat;
      width: 16px;
      height: 16px;
    }