@import includes/settings
@import includes/mixins
@import includes/colors
/* Table of Content */
/* :: Buttons */
/* :: Notices/Alerts */
/* :: tabs */
/* :: Pagination */
/* :: Lists */
/* :: Panels */

/* Buttons */
.button
  background: $blue
  display: inline-block
  text-align: center
  padding: 9px 34px 11px
  color: $white
  text-decoration: none
  font-weight: bold
  +HelveticaFontStack
  line-height: 1
  position: relative
  cursor: pointer
  border: none
  &.nice
    background-color: $blue
    +background-image(linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 100%))
    +box-shadow(0 1px 0 rgba(255,255,255,0.5) inset)
    text-shadow: 0 -1px 1px rgba(0,0,0,0.28)
    border: solid 1px darken($blue, 7%)
    +transition-property(background-color)
    +transition-duration(.15s)
    +transition-timing-function(ease-in-out)
  &.radius
    +border-radius(3px)
  &.round
    +border-radius(1000px)
  &.full-width
    width: 100%
    padding-left: 0 !important
    padding-right: 0 !important
    text-align: center
  &.left-align
    text-align: left
    text-indent: 12px
  &:active
    //currently blank

input[type=submit].button
  -webkit-appearance: none

/* Sizes */
.button
  &.small
    +font-size(11)
    padding: 8px 20px 10px
    width: auto
  &.medium
    +font-size(13)
    width: auto
  &.large
    +font-size(18)
    padding: 11px 48px 13px
    width: auto
/* Colors */
.button
  &.blue
    background-color: $blue
  &.red
    background-color: $red
  &.white
    background-color: #e9e9e9
    color: #333
  &.black
    background-color: $black
/* Nice Colors */
.nice
  &.button
    &.blue
      border: solid 1px darken($blue, 7%)
    &.red
      border: solid 1px darken($red, 7%)
    &.white
      border: solid 1px darken($white, 14%)
      text-shadow: none !important
    &.black
      border: solid 1px darken($black, 7%)
/* Hovers */
.button
  &:hover
    background-color: darken($blue, 5%)
    color: #fff
  &.blue
    &:hover
      background-color: darken($blue, 5%)
  &.red
    &:hover
      background-color: darken($red, 5%)
  &.white
    &:hover
      background-color: darken($white, 12%)
      color: #333
  &.black
    &:hover
      background-color: darken($black, 5%)

/* Disabled */
.button.disabled, .button[disabled]
  +opacity(0.6)
  cursor: default

/* 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: 0px
    +font-size(18)
    +opacity(0.2)
    padding: 4px
    &:hover
      +opacity(0.4)

/* Tabs */
dl.tabs
  display: block
  margin: 0 0 20px
  padding: 0
  height: 30px
  border-bottom: solid 1px #ddd
  dt
    display: block
    width: auto
    height: 30px
    padding: 0px 9px 0px 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 0px 1px
        height: 30px
.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
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 0px #ccc
  border-width: 1px 1px 0px
  margin: 0
  color: #555
  background: #eee
  +font-size(15)
  &.active
    height: auto
    margin: 0
    border-width: 1px 0px 0px
    background: $white
.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: 0px
        height: auto
    &:first-child
      margin-left: 0
dl.tabs.vertical
  height: auto
  dt,

ul.tabs-content
  margin: 0
  display: block
  &>li
    display: none
    &.active
      display: block
      
dl.contained, dl.nice.contained
  margin-bottom: 0px
dl.contained.tabs dd a
  padding: 0px 14px
dl.nice.contained.tabs dd a
  padding: 7px 18px 9px
  
ul.contained.tabs-content
  padding: 0
  li
    padding: 20px
    border: solid 0px #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
      a
        border-bottom: solid 2px #00a6fc
        color: #141414
    &.unavailable
      a
        cursor: default
        color: #999
      &:hover
        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: 0px
  top: 0px
  color: #ccc

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