/* CSS for jQuery Orbit Plugin 1.4.0
 * Maintained for Foundation. foundation.zurb.com
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
*/

  /* Container ---------------------- */

  .orbit-wrapper { width: 1px; height: 1px; position: relative; }

  .orbit { width: 1px; height: 1px; position: relative; overflow: hidden; margin-bottom: ms(1);

    &.with-bullets { margin-bottom: 40px; }

    .orbit-slide { max-width: 100%; position: absolute; top: 0; #{$defaultFloat}: 0; }
    a.orbit-slide { border: none; line-height: 0; display: none; }
    div.orbit-slide { width: 100%; height: 100%; @include opacity(0); }
  }

  /* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */

  /* Timer ---------------------- */

  div.orbit-wrapper  {
    div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; #{$defaultOpposite}: 10px; opacity: .6; cursor: pointer; z-index: 31; }
    span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; #{$defaultFloat}: -20px; background: image-url("foundation/orbit/rotator-black.png") no-repeat; z-index: 3;
      &.move { #{$defaultFloat}: 0 }
    }
    span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; #{$defaultOpposite}: 0; z-index: 2; overflow: hidden;
      &.move { width: 40px; #{$defaultFloat}: 0; background: image-url("foundation/orbit/timer-black.png") repeat 0 0; }
    }
    span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; #{$defaultFloat}: 0; background: image-url("foundation/orbit/pause-black.png") no-repeat; z-index: 4; opacity: 0;
      &.active { background: image-url("foundation/orbit/pause-black.png") no-repeat 0 -40px; }
    }
    div.timer:hover span.pause, span.pause.active { opacity: 1 }
  }

  /* Captions ---------------------- */

  .orbit-caption { display: none; font-family: inherit; }
  .orbit-wrapper .orbit-caption { background: $orbitCaptionBgColorOldBrowser; background: $orbitCaptionBgColor; z-index: 30; color: $orbitCaptionFontColor; text-align: center; padding: 7px 0; font-size: ms(0) - 1; position: absolute; #{$defaultOpposite}: 0; bottom: 0; width: 100%; }

  /* Directional Nav ---------------------- */

  div.orbit-wrapper {
    div.slider-nav { display: block; }
    div.slider-nav span { width: 39px; height: 50px; text-indent: -9999px; position: absolute; z-index: 30; top: 50%; margin-top: -25px; cursor: pointer; }
    div.slider-nav span.#{$defaultOpposite} { background: image-url("foundation/orbit/#{$defaultOpposite}-arrow.png"); background-size: 100%; #{$defaultOpposite}: 0; }
    div.slider-nav span.#{$defaultFloat} { background: image-url("foundation/orbit/#{$defaultFloat}-arrow.png"); background-size: 100%; #{$defaultFloat}: 0; }
  }

  .lt-ie9 {
    div.orbit-wrapper {
      div.slider-nav span.#{$defaultOpposite} { background: image-url("foundation/orbit/#{$defaultOpposite}-arrow-small.png"); }
      div.slider-nav span.#{$defaultFloat} { background: image-url("foundation/orbit/#{$defaultFloat}-arrow-small.png"); }
    }
  }

  /* Bullet Nav ---------------------- */

  ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -40px; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -50px; padding: 0;
    li { float: $defaultFloat; margin-#{$defaultFloat}: 5px; cursor: pointer; color: $orbitBulletNavColor; text-indent: -9999px; background: image-url("foundation/orbit/bullets.jpg") no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden;
      &.active { color: $orbitBulletNavColorActive; background-position: -8px 0; }
      &.has-thumb { background: none; width: 100px; height: 75px; }
      &.active.has-thumb { background-position: 0 0; border-top: $orbitHasThumbBorderWidth $orbitHasThumbBorderStyle $orbitHasThumbBorderColor; }
    }
  }

  /* Orbit Slide Counter */
  .orbit-slide-counter { position: absolute; bottom: 0; z-index: 99; background: $orbitSlideNumBgColor; color: $orbitSlideNumFontColor; padding: $orbitSlideNumPadding; }

  /* Fluid Layout ---------------------- */

  div.orbit img.fluid-placeholder { visibility: hidden; position: static; display: block; width: 100%; }
  div.orbit, div.orbit-wrapper { width: 100% !important; }

  /* Correct timer in IE */
  .lt-ie9 .timer { display: none !important; }
  .lt-ie9 div.caption { background: $orbitCaptionBgColorOldBrowser; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }

// Allow slides to be stacked on mobile devices
@media only screen and (max-width: $screenSmall - 1) {
  div.orbit.orbit-stack-on-small img.fluid-placeholder {
    visibility:visible;
  }
  div.orbit.orbit-stack-on-small .orbit-slide {
    position:static;
    margin-bottom:10px;
  }
}