// Table of Contents:
//
// Alerts
// Labels
// Tabs
// Pagination
// Lists
// Panels
// Nav
// Tooltips
// Video
// Microformats

// Alerts
//----------------------------------------------------------------------------------------------------

div.alert-box
  display: block
  padding: 6px 7px
  font-weight: bold
  +font-size(13)
  background: #eee
  border: 1px solid rgba(0,0,0,0.1)
  margin-bottom: 12px
  +border-radius(3px)
  text-shadow: 0 1px rgba(255,255,255,0.9)
  position: relative
  &.success
    background-color: #7fae00
    color: $white
    text-shadow: 0 -1px rgba(0,0,0,0.3)
  &.warning
    background-color: #c08c00
    color: $white
    text-shadow: 0 -1px rgba(0,0,0,0.3)
  &.error
    background-color: #c00000
    color: $white
    text-shadow: 0 -1px rgba(0,0,0,0.3)
  a.close
    color: $black
    position: absolute
    right: 4px
    top: 0
    +font-size(18)
    +opacity(0.2)
    padding: 4px
    &:hover, &:focus
      +opacity(0.4)



// Labels
//----------------------------------------------------------------------------------------------------
.label
  padding: 0px 4px 2px
  +font-size(11)
  font-weight: bold
  text-align: center
  text-decoration: none
  line-height: 1
  white-space: nowrap
  display: inline
  position: relative
  bottom: 1px
  color: $white
  background: $blue
  &.radius
    +border-radius(2px)
  &.round
    padding: 1px 7px 2px
    +border-radius(8px)
  // Colors
  &.blue
    background-color: $blue
  &.red
    background-color: $red
  &.green
    background-color: $green
  &.white
    background-color: #e9e9e9
    color: #333
  &.black
    background-color: $black



// Tabs
//----------------------------------------------------------------------------------------------------

dl.tabs
  display: block
  margin: 0 0 20px 0
  padding: 0
  height: 30px
  border-bottom: solid 1px #ddd
  dt
    display: block
    width: auto
    height: 30px
    padding: 0 9px 0 20px
    line-height: 30px
    float: left
    color: #999
    +font-size(11)
    text-transform: uppercase
    cursor: default
    &:first-child
      padding: 0 9px 0 0
  dd
    display: block
    width: auto
    height: 30px
    padding: 0
    float: left
    a
      display: block
      width: auto
      height: 29px
      padding: 0 9px
      line-height: 30px
      border: solid 1px #ddd
      margin: 0 -1px 0 0
      color: #555
      background: #eee
      &.active
        background: #fff
        border-width: 1px 1px 0 1px
        height: 30px

// Nice tabs
.nice
  &.tabs
    border-bottom: solid 1px #eee
    margin: 0 0 30px
    height: 43px
    dd
      a
        padding: 7px 18px 9px
        +font-size(15)
        color: #555
        background: none
        border: none
        &.active
          font-weight: bold
          color: #333
          background: #fff
          border-left: 1px solid #eee
          border-right: 1px solid #eee
          border-top: 1px solid #00a6fc
          margin: 0 10px
          position: relative
          top: -5px
      &:first-child
        a.active
          margin-left: 0

// Vertical tabs
dl.tabs.vertical
  height: auto
dl.tabs.vertical dt, dl.tabs.vertical dd, dl.nice.tabs.vertical dt, dl.nice.tabs.vertical dd
  float: none
  height: auto
dl.tabs.vertical dd a
  display: block
  width: auto
  height: auto
  padding: 15px 20px
  line-height: 1
  border: solid 0 #ccc
  border-width: 1px 1px 0
  margin: 0
  color: #555
  background: #eee
  +font-size(15)
  &.active
    height: auto
    margin: 0
    border-width: 1px 0 0
    background: $white

// Nice tabs vertical
.nice.tabs.vertical
  border-bottom: solid 1px #eee
  height: auto
  dd
    a
      padding: 15px 20px
      background: $white
      border: none
      border-left: 1px solid #eee
      border-right: 1px solid #eee
      border-top: 1px solid #eee
      &.active
        border: none
        background: $blue
        color: $white
        margin: 0
        position: static
        top: 0
        height: auto
    &:first-child
      margin-left: 0
dl.tabs.vertical
  height: auto
  dt, dd, dt
    float: none
    height: auto
dl.nice.tabs.vertical
  dd
    float: none
    height: auto

ul.tabs-content
  margin: 0
  display: block
  &>li
    display: none
    &.active
      display: block
      
dl.contained, dl.nice.contained
  margin-bottom: 0
dl.contained.tabs dd a
  padding: 0 14px
dl.nice.contained.tabs dd a
  padding: 7px 18px 9px
  
ul.contained.tabs-content
  padding: 0
  &>li
    padding: 20px
    border: solid 0 #ddd
    border-width: 0 1px 1px 1px
ul.nice.contained.tabs-content
  &>li
    border-color: #eee
  
// Pagination
//----------------------------------------------------------------------------------------------------

ul.pagination
  display: block
  height: 24px
  margin-left: -5px
  li
    float: left
    display: block
    height: 24px
    color: #999
    +font-size(15)
    margin-left: 5px
    a
      display: block
      padding: 6px 7px 4px
      color: #555
    &.current, &:hover, &:focus
      a
        border-bottom: solid 2px #00a6fc
        color: #141414
    &.unavailable
      a
        cursor: default
        color: #999
      &:hover, &:focus
        a
          border-bottom: none

// Lists
//----------------------------------------------------------------------------------------------------

ul.nice, ol.nice
  list-style: none
  margin: 0
  li
    padding-left: 13px
    position: relative
ul.nice li span.bullet, ol.nice li span.number
  position: absolute
  left: 0
  top: 0
  color: #ccc

// Panels
//----------------------------------------------------------------------------------------------------

div.panel 
  padding: 20px 20px 2px 20px
  background-color: #efefef
  +background-image(linear-gradient(#ffffff 0%, #f4f4f4 100%))
  +box-shadow(0 2px 5px rgba(0,0,0,0.15))
  margin: 0 0 20px 0
  
// Nav Bar with Dropdowns
//----------------------------------------------------------------------------------------------------

.nav-bar
  height: 45px
  background: #fff
  margin-top: 20px
  border: 1px solid #ddd
  &>li
    float: left
    display: block
    position: relative
    padding: 0
    margin: 0
    border-right: 1px solid #ddd
    line-height: 45px
    .flyout
      display: none
    &>a.main
      position: relative
      +font-size(15)
      padding: 0 20px
      display: block
      text-decoration: none
      border-right: 1px solid #ddd
    &>input
      margin: 0 16px
    ul
      margin-bottom: 0
    li
      line-height: 1.3
    &:hover
      .flyout
        display: block
      &>a.main
        color: #141414
        z-index: 2
        &:after
          border-top-color: #141414
    &.has-flyout
      &>a.main
        padding-right: 36px
        &:after
          content: ""
          width: 0
          height: 0 
          border-left: 4px solid transparent
          border-right: 4px solid transparent
          border-top: 4px solid #2a85e8
          display: block
          position: absolute
          right: 18px
          bottom: 20px
      &>a.flyout-toggle
        display: none
          
.flyout
  background: #fff
  margin: 0
  padding: 20px
  border: 1px solid #ddd
  position: absolute
  top: 45px
  left: -1px
  width: 400px
  z-index: 10
  &.small
    width: 200px
  &.large
    width: 600px
  &.right
    left: auto
    right: 0
  p:last-child
    margin-bottom: 0


// Sub Navs
//---------------------------------------------------------------------------------------------------
// http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na
dl.sub-nav
  display: block
  width: auto
  overflow: hidden
  margin: -4px 0 18px -9px
  padding-top: 4px
  dt, dd
    float: left
    display: inline
    margin-left: 9px
    margin-bottom: 4px
  dt
    color: #999
    font-weight: normal
  dd
    a
      text-decoration: none
      +border-radius(12px)
    &.active
      a
        background: $blue
        color: $white
        padding: 3px 9px


// Tooltips
//----------------------------------------------------------------------------------------------------

.has-tip
  border-bottom: dotted 1px #ccc
  cursor: help
  font-weight: bold
  color: #333
  &:hover
    border-bottom: dotted 1px #0593dc
    color: #0192dd
  &.opened
    color: #0192DD !important
    border-bottom: dotted 1px #0593DC !important
.tooltip
  display: block
  background: rgb(0,0,0)
  background: rgba(0,0,0,0.85)
  position: absolute
  color: #fff
  font-weight: bold
  +font-size(12)
  width: auto
  padding: 5px 9px 7px 8px
  z-index: 999
  &>.nub
    display: block
    width: 0
    height: 0
    border: solid 6px
    border-color: transparent transparent rgb(0,0,0) transparent
    border-color: transparent transparent rgba(0,0,0,0.85) transparent
    position: absolute
    top: -12px
    left: 10px
  &.top>.nub
    border-color: rgb(0,0,0) transparent transparent transparent
    border-color: rgba(0,0,0,0.85) transparent transparent transparent
    top: auto
    bottom: -12px
  &.left, .right, .left, .right
    float: none !important
  &.left>.nub
    border-color: transparent transparent transparent rgb(0,0,0)
    border-color: transparent transparent transparent rgba(0,0,0,0.85)
    right: -12px
    left: auto
  &.right>.nub
    border-color: transparent rgb(0,0,0) transparent transparent
    border-color: transparent rgba(0,0,0,0.85) transparent transparent
    right: auto
    left: -12px
  &.radius
    +border-radius(6px)
.tap-to-close
  display: block
  font-size: 10px
  font-size: 1.0rem
  color: #888
  font-weight: normal


// Video
//----------------------------------------------------------------------------------------------------
// Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.flex-video
  position: relative
  padding-top: 25px
  padding-bottom: 67.5%
  height: 0
  margin-bottom: 16px
  overflow: hidden
  &.widescreen
    padding-bottom: 57.25%
  &.vimeo
    padding-top: 0
  iframe, object, embed
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

// Microformats
//----------------------------------------------------------------------------------------------------

// hcard
ul.vcard
  display: inline-block
  margin: 0 0 12px 0
  border: 1px solid #ddd
  padding: 10px
  li
    margin: 0
    display: block
    &.fn
      font-weight: bold
      +font-size(15)

// vevent
p.vevent span.summary
  font-weight: bold
p.vevent abbr 
  cursor: default
  text-decoration: none
  font-weight: bold
  border: none
  padding: 0 1px