// 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

// Orbit container
//-------------------------------------------------

div.orbit-wrapper
  width: 1px
  height: 1px
  position: relative
div.orbit
  width: 1px
  height: 1px
  position: relative
  overflow: hidden
  &.with-bullets
    margin-bottom: 40px
  .orbit-slide
    max-width: 100%
    position: absolute
    top: 0
    left: 0
  a.orbit-slide
    border: none
    line-height: 0
    display: none
  div.orbit-slide
    width: 100%
    height: 100%

// 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
    right: 10px
    +opacity(0.6)
    cursor: pointer
    z-index: 31
  span.rotator
    display: block
    width: 40px
    height: 40px
    position: absolute
    top: 0
    left: -20px
    background: image-url('orbit/rotator-black.png') no-repeat
    z-index: 3
    &.move
      left: 0
  span.mask
    display: block
    width: 20px
    height: 40px
    position: absolute
    top: 0
    right: 0
    z-index: 2
    overflow: hidden
    &.move
      width: 40px
      left: 0
      background: image-url('orbit/timer-black.png') repeat 0 0
  span.pause
    display: block
    width: 40px
    height: 40px
    position: absolute
    top: 0
    left: 0
    background: image-url('orbit/pause-black.png') no-repeat
    z-index: 4
    +opacity(0)
    &.active
      background: image-url('orbit/pause-black.png') no-repeat 0 -40px
  div.timer:hover span.pause, span.pause.active
    +opacity(1)

// Orbit captions
//-------------------------------------------------

.orbit-caption
  display: none
  +HelveticaFontStack
.orbit-wrapper .orbit-caption
  background: #000
  background: rgba(0,0,0,0.6)
  z-index: 30
  color: #fff
  text-align: center
  padding: 7px 0
  +font-size(13)
  position: absolute
  right: 0
  bottom: 0
  width: 100%

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

div.orbit-wrapper
  div.slider-nav
    display: block
    span
      width: 78px
      height: 100px
      text-indent: -99999px
      position: absolute
      z-index: 30
      top: 50%
      margin-top: -50px
      cursor: pointer
      &.right
        background: image-url('orbit/right-arrow.png')
        right: 0
      &.left
        background: image-url('orbit/left-arrow.png')
        left: 0

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

ul.orbit-bullets
  position: absolute
  z-index: 30
  list-style: none
  bottom: -40px
  left: 50%
  margin-left: -50px
  padding: 0
  li
    float: left
    margin-left: 5px
    cursor: pointer
    color: #999
    text-indent: -99999px
    background: image-url('orbit/bullets.jpg') no-repeat 4px 0
    width: 13px
    height: 12px
    overflow: hidden
    &.active
      color: #222
      background-position: -8px 0
    &.has-thumb
      background: none
      width: 100px
      height: 75px
    &.active
      &.has-thumb
        background-position: 0 0
        border-top: solid 2px $black

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

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

ul.orbit-bullets
  position: absolute
  z-index: 30
  list-style: none
  bottom: -50px
  left: 50%
  margin-left: -50px
  padding: 0
  li
    float: left
    margin-left: 5px
    cursor: pointer
    color: #999
    text-indent: -9999px
    background: image-url('orbit/bullets.jpg') no-repeat 4px 0
    width: 13px
    height: 12px
    overflow: hidden
    &.has-thumb
      background: none
      width: 100px
      height: 75px
    &.active
      color: #222
      background-position: -8px 0
      &.has-thumb
        background-position: 0 0
        border-top: 2px solid #000

// Correct timer in IE
.timer
  display: none !important
div.caption
  background: transparent
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)
  zoom: 1