@import compass
@import 'colors'

$header-color: lighten(gray, 20%)
.ui-widget-header
  +border-top-radius(2px)
  background-color: $bonsai
  padding: 0 0 1px 0

.ui-helper-hidden-accessible
  display: none

.ui-helper-clearfix:before, .ui-helper-clearfix:after
  content: ""
  display: table

.ui-helper-clearfix:after
  clear: both

.ui-helper-clearfix
  zoom: 1

.ui-state-default
  background: lighten(gray, 40%)
  a
    +single-text-shadow(white, 0px, 1px, 0px)
    color: gray

.ui-state-hover
  background: lighten(gray, 50%)

.ui-state-active
  background: white
  a
    color: darken(gray, 40%)

// tabs
.ui-tabs
  +border-top-radius(4px)
  position: relative
  padding: 1px
  zoom: 1
  background: $header-color

  ul.ui-tabs-nav
    margin: 0
    padding: 1.3em .4em 0
    boder-width: 0 0 1px 0
    display: block

    li.ui-state-default
      +border-top-radius(4px)
      background-color: transparent
      border-color: gray
      list-style: none
      float: left
      position: relative
      top: 1px
      margin: 1px .4em 0 0
      padding: 0
      white-space: nowrap
      font-size: 1.1em
      &:hover
        background-color: rgba(255, 255, 255, 0.8)

      a
        float: left
        padding: .5em 1em
        text-decoration: none
        font-weight: bold

    li.ui-tabs-selected
      font-weight: bold
      border-bottom: none
      background-color: white

  .ui-tabs-panel
    display: block
    border-width: 0
    padding: 1em 1.4em
    background: white

  .ui-tabs-hide
    display: none !important

// datepicker
.ui-datepicker
  +border-radius(2px)
  width: 17em
  padding: 0
  display: none
  background: white
  border: 1px solid lighten(gray, 30%)
  position: relative

  .ui-datepicker-header
    background: $bonsai
    +background-image(linear-gradient(lighten($bonsai,  5%) 20%, $bonsai 40%, darken($bonsai, 5%) 80%) )
    position: relative
    padding: 8px 0
    font-weight: bold
    font-size: 15px

  .ui-datepicker-prev,
  .ui-datepicker-next
    //+border-radius(50%)
    top: 6px
    width: 20px
    height: 20px
    cursor: pointer
    position: absolute
    z-index: 10000
    span
      font-family: "fontello" !important
      font-style: normal !important
      font-weight: normal !important
      font-variant: normal !important
      text-transform: none !important
      speak: none
      line-height: 1
      -webkit-font-smoothing: antialiased
      -moz-osx-font-smoothing: grayscale
      color: white
      font-size: 22px
      text-indent: initial
    &:hover
      background-color: rgba(255, 255, 255, 0.4)

  .ui-datepicker-prev
    left: 2px
    span.ui-icon:before
      content: '\e81e'
  .ui-datepicker-next
    right: 6px
    span:before
      content: '\e81f'

  //.ui-datepicker-prev span, .ui-datepicker-next span
    display: block
    position: absolute
    left: 50%
    margin-left: -8px
    top: 50%
    margin-top: -8px

  //.ui-datepicker-prev-hover, .ui-datepicker-next-hover
    background: none
    opacity: 0.7

  .ui-datepicker-title
    margin: 0 5px
    line-height: 20px
    text-align: center
    color: white

  .ui-datepicker-title select
    font-size: 1em
    margin: 1px 0

  select.ui-datepicker-month-year
    width: 100%
  select.ui-datepicker-month, select.ui-datepicker-year
    width: 49%

  table
    width: 100%
    font-size: .9em
    border-collapse: collapse
    margin: 0 0 .2em
    border-top: 1px solid $dark
  tr
    border: none
  th
    padding: .5em .3em
    text-align: center
    font-weight: bold
    background: lighten($gray, 10%)
    color: #efefef
    border: 0
  td
    border: 0
    padding: 1px
    background-color: #FFF !important

    a
      +border-radius(2px)
      border: 0
      padding: 1px
      font-weight: bold !important
      background: #FFF !important
      border: none !important
      text-align: center !important
      color: #484A4C !important
      width: 20px
      display: block

    a.ui-state-highlight
      background-color: #484A4C !important
      color: #FFF !important
    a.ui-state-active
      background-color: $bonsai !important
      color: #FFF !important
      font-weight: bold !important
    a.ui-state-hover
      background-color: lighten(#484A4C, 30%) !important
      color: white !important
      text-decoration: none

  .ui-datepicker-buttonpane
    background-image: none
    margin: .7em 0 0 0
    padding: 0 .2em
    border-left: 0
    border-right: 0
    border-bottom: 0
  .ui-datepicker-buttonpane
    button
      float: right
      margin: .5em .2em .4em
      cursor: pointer
      padding: .2em .6em .3em .6em
      width: auto
      overflow: visible
  .ui-datepicker-buttonpane
    button.ui-datepicker-current
      float:left


// dialog
$radius: 8px
.ui-dialog
  +border-top-radius($radius)
  +box-shadow(0px 0px 8px black)
  z-index: 2000 !important
  //border: 1px solid $dark

  h1
    display: none

  .ui-dialog-titlebar
    +border-top-radius($radius)

    background-color: darken(yellowGreen, 3%)
    +background-image(linear-gradient(lighten($green,  5%), yellowGreen) )
    padding: 0.7em 1em
    color: white
    position: relative
    min-height: 18px

    .ui-dialog-title
      font-weight: bold
      font-size: 1.5em

    .ui-dialog-titlebar-close
      background: transparent
      //text-indent: -9999em
      position: absolute
      top: 0.6em
      right: 0.6em
      width: 20px
      height: 20px
      border: none
      display: block

      font-family: "fontello" !important
      font-style: normal !important
      font-weight: normal !important
      font-variant: normal !important
      text-transform: none !important
      speak: none
      line-height: 1
      -webkit-font-smoothing: antialiased
      -moz-osx-font-smoothing: grayscale
      color: white
      font-size: 20px
      padding: 0px
      &:hover
        opacity: 0.7

    .ui-dialog-titlebar-close:before
      content: '\e80a'

    //.ui-dialog-titlebar-close
  .ui-dialog-content
    padding: 10px

// autocomplete
.ui-autocomplete
  list-style: none
  padding: 2px
  display: block
  outline: none
  position: absolute
  top: 0
  cursor: default
  margin-top: -3px
  padding: 0
  background-color: white
  max-width: 400px
  border: 1px solid lighten(gray, 20%)

  .ui-menu-item
    a
      padding: 5px 6px
      text-decoration: none
      display: block
      border-bottom: 1px solid #f4f4f4
    a.ui-state-active, a.ui-state-focus
      background-color: $bonsai
      color: white

// overlay
.ui-widget-overlay
  background: rgba(0, 0, 0, 0.5) !important
  position: fixed
  top: 0px
  width: 100%
  height: 100%

.ui-front
  z-index: 100

.ui-button
  border: none


@import plugins/buttons
@import colors

label .popover
  font-weight: normal
  text-align: left !important


.ui-datepicker-trigger
  font-family: "fontello" !important
  font-style: normal !important
  font-weight: normal !important
  font-variant: normal !important
  text-transform: none !important
  speak: none
  line-height: 1
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  font-size: 20px
  height: 28px
  width: 30px
  padding: 0px
  color: $dark
  vertical-align: top

.ui-datepicker-trigger:before
  content: '\e823'

