@import "mixins"
//@import "compass/css3/animation"
//@import "compass/css3/opacity"
//@import "compass/css3/box-shadow"

$jiffy: 0.28s
$jiffy: 0.14s

+keyframes(scroll-up)
  100%
    max-height: 200px
    margin-top: -400px
    overflow: hidden
    z-index: -1
    +box-shadow(rgba(0,0,0,0))
  50%
    max-height: 300px
    margin-top: -100px
    overflow: hidden
    z-index: -1
    +box-shadow(rgba(0,0,0,0))
  0%
    max-height: 500px
    overflow: hidden
    z-index: -1
    +box-shadow(rgba(0,0,0,0))

+keyframes(scroll-down)
  0%
    max-height: 200px
    margin-top: -400px
    overflow: hidden
    z-index: -1
    +box-shadow(rgba(0,0,0,0))
  100%
    max-height: 500px
    z-index: -1
    +box-shadow(rgba(0,0,0,0))

+keyframes(grow-down)
  0%
    max-height: 0px
    padding-top: 0px !important
    padding-bottom: 0px !important
    margin-top: 0px !important
    margin-bottom: 0px !important
    //+opacity(0.2)

  100%
    max-height: 500px

+keyframes(shrink-up)
  100%
    border: none
    max-height: 0px
    padding-top: 0px
    padding-bottom: 0px
    overflow: hidden
    +opacity(0.1)
  0%
    border: none
    max-height: 500px
    overflow: hidden

=shifting-up
  &:not(.show)
    +animation(scroll-up $jiffy forwards)
    overflow: hidden
  &.show
    +animation(scroll-down $jiffy*2)

=shrinking-up
  &:not(.show)
    +animation(shrink-up $jiffy forwards)
    overflow: hidden
  &.show
    +animation(grow-down $jiffy*2)
    overflow: hidden

dl.rbbt_tabs
  position: relative
  overflow: visible
  margin-top: 14px
  margin-bottom: 14px
  font-size: 0
  &:after
    content: ""
    clear: both
    display: block
  dt
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis

    margin: 8px
    margin-bottom: 0px
    width: calc(25% - 2*8px)

    cursor: pointer
    font-size: 14px
    padding: 1em
    display: inline-block
    min-width: 20%
    background: white
    &.active
      font-weight: bold
      border-bottom: none
      padding-bottom: calc(1em + 12px)
      margin-bottom: -13px
      z-index: 10
    border: 1px solid #D4D4D5
    &:not(.active):hover
      border: 1px solid darken(#D4D4D5,30)
  dd
    font-size: 14px
    margin: 0px 8px
    float: left
    overflow: visible
    overflow-y: auto
    min-width: calc(100% - 16px)
    padding: 1em
    background: white

    &:not(.show)
      +animation(shrink-up $jiffy forwards)

    &.show
      +animation(grow-down $jiffy*2)
      border: 1px solid #D4D4D5
      margin-bottom: 1em