/*
  AnythingSlider v1.8+ Default theme
  By Chris Coyier: http://css-tricks.com
  with major improvements by Doug Neiner: http://pixelgraphics.us/
  based on work by Remy Sharp: http://jqueryfordesigners.com/
*/

/*
=====================================================================
  COMMON SLIDER STYLING
=====================================================================
*/

/* Overall Wrapper */
.anythingSlider {
  position: relative;
}

  /* anythingSlider viewport window */
  .anythingSlider .anythingWindow {
    position: relative;
    overflow: hidden;
  }

    /* anythingSlider base (UL element) */
    .anythingSlider .anythingWindow .anythingBase {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
    }

      /* --- Slider Modes --- */

      /* horizontal mode */
      .anythingBase .panel {
        float: left;
        padding: 0;
        list-style: none;
      }

      /* vertical mode */
      .anythingBase .vertical .panel {
        float: none;
      }

      /* fade mode */
      .anythingBase .fade .panel {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }

      /* fade mode active page - visible & on top */
      .anythingBase .fade .activePage {
        z-index: 0;
      }

/*
 ==================================
 Slide Content
 ==================================
 */
.slide-content {
  position: relative;
  text-align: center;
}

.slide-content .html-slide {
  text-align: left;
  padding: 20px;
}

.slide-content img {
  margin: 0 auto;
}

/* Resize Contents = YES */
/* basically whenever "slide-content" has an inline style */
.slide-content[style] img {
  max-height: 100%;
}

.anythingSlider-modern .panel .caption-bottom {
  position: absolute;
  bottom: 0;
  padding: 5px;
  width: 100%;
  background-color: rgba(0,0,0,0.3);
  color: #fff;
}


/*
======================================================================
CONTROLS / THUMBNAV
======================================================================
*/
.anythingSlider .anythingControls {
  display: none !important;   /* hide for now */
  width: 100%;
  overflow: hidden;
  display: none;
  background-color: rgba(0,0,0,0.2);
}

.anythingSlider-modern .anythingControls ul {
  margin: 0;
  float: left;
}

.anythingSlider-modern .anythingControls ul li {
  display: block;
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
  list-style: none;
  line-height: normal;
}

.anythingSlider-modern .anythingControls ul li:last-child {
  margin-right: 0;
}

.anythingSlider-modern .anythingControls a {
  display: block;
  text-decoration: none;
  text-align: center;
  border-radius: 3px;
  background-color: rgba(0,0,0,0.2);
  color: #fff;
}

.anythingSlider-modern .anythingControls a span {
  display: block;
  width: 100%;
  padding: 1px 5px;
}

/* Navigation current & hovered button, active state */
.anythingSlider-modern .anythingControls a.cur,
.anythingSlider-modern .anythingControls a:hover {
  background-color: rgba(0,0,0,0.5);
}

/* Autoplay Start/Stop button */
.anythingSlider-modern .anythingControls .start-stop {
  display: block;
  float: right;
  text-align: center;
  text-decoration: none;
}

/* start-stop button, stopped, active state */
.anythingSlider-modern .anythingControls a.start-stop {
  background-color: #080;
  color: #fff;
}
/* start-stop button, playing, active state */
.anythingSlider-modern .anythingControls a.start-stop.playing {
  background-color: #d00;
  color: #fff;
}
/* start-stop button, active slider hovered text color (when visible) */
.anythingSlider-modern .start-stop:hover,
.anythingSlider-modern .start-stop.hover {
  color: #ccc;
}

/* navigationSize window */
.anythingSlider-modern .anythingControls .anythingNavWindow {
  overflow: hidden;
  float: left;
}

/*
======================================================================
  BACK / FORWARD ARROW
======================================================================
*/
.anythingSlider-modern .arrow {
  position: absolute;
  width: 35px;
  height: 56px;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.5);
  opacity: 0.3;

  /* vertically center */
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

/* reveal arrows when you hover the slider */
.anythingSlider-modern.anythingSlider-hovered .arrow {
  opacity: 1;
}

.anythingSlider-modern .arrow a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  background-image: url(arrows-modern.png);
  background-repeat: no-repeat;
}

/* back arrow */
.anythingSlider-modern .back { left: 5px; }
.anythingSlider-modern .back a { background-position: 0 3px; }

.anythingSlider-modern .back a:hover,
.anythingSlider-modern .back a.hover {
  /* background-position: 0 -50px; */
}

/* forward arrow */
.anythingSlider-modern .forward { right: 5px; }
.anythingSlider-modern .forward a { background-position: 100% 3px; }

.anythingSlider-modern .forward a:hover,
.anythingSlider-modern .forward a.hover {
  /* background-position: 100% -50px; */
}


/* Navigation arrow text; indent moved to span inside "a", for IE7;
  apparently, a negative text-indent on an "a" link moves the link as well as the text */
.anythingSlider .arrow span {
  display: block;
  visibility: hidden;
}
/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
.anythingSlider .arrow.disabled {
  display: none;
}

/***********************
  RTL STYLING
 ***********************/
/* slider autoplay right-to-left, reverse order of nav links to look better */
.anythingSlider.rtl .anythingWindow {
  direction: ltr;
  unicode-bidi: bidi-override;
}
.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
.anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */

/* probably not necessary, but added just in case */
.anythingSlider,
.anythingSlider .anythingWindow,
.anythingSlider .anythingControls ul a,
.anythingSlider .arrow,
.anythingSlider .start-stop {
  transition-duration: 0;
  -o-transition-duration: 0;
  -moz-transition-duration: 0;
  -webkit-transition-duration: 0;
}


/***********************
  IE8 AND OLDER STYLING
 ***********************/

/* Navigation Arrows */
.as-oldie .anythingSlider-modern .arrow {
  top: 30%;
}
.as-oldie .anythingSlider-modern .arrow a {
  margin: 0;
}

/* margin between nav buttons just looks better */
.as-oldie .anythingSlider-modern .anythingControls li {
  margin-left: 3px;
}

/* When using the navigationSize option, the side margins need to be zero
  None of the navigation panels look good in IE7 now =( */
.as-oldie .anythingSlider-modern .anythingControls a {
  margin: 0;
}
.as-oldie .anythingSlider-modern .anythingNavWindow {
  margin: 0 2px;
}
.as-oldie .anythingSlider-modern .anythingNavWindow li {
  padding: 3px 0 0 0;
}
