@import "./reset.sass"
@import "./typo.scss"
@import "./functions.sass"

$w1: #fff

$k1: #000
$k2: #303030

$g1: #F5F5F5
$g2: #eee
$g3: #E0E0E0
$g4: #C2C2C2
$g5: #7F7F7F
$g6: #3e3e3e

$b1: #38A5E9
$b2: #0F8FDD
$b3: #2F4D7B

$r1: #E93838
$r2: #fbb

$orange: #ff9900


html
  min-width: 700px
  height: 100%
  overflow-y: scroll
  background: image-url('bhf/small_ajax_loader.gif') no-repeat -300px -300px, image-url('bhf/small_ajax_loader_h.gif') no-repeat -300px -300px, $k2

body
  min-width: 960px
  min-height: 100%
  -webkit-font-smoothing: antialiased
  -moz-font-smoothing: antialiased
  -o-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

a
  text-decoration: none
  color: inherit
  &:focus,
  &:active
    outline: 0

header
  display: block
  overflow: hidden
  clear: both
  padding: 0 20px
  h1
    float: right
    height: 83px
    overflow: hidden
    a
      padding: 16px 24px 0 0
      display: block
    img
      display: block
      height: 50px
  nav
    padding-top: 25px
    .shrink_space
      li
        margin-right: 5px
        a
          padding-left: 19px
          padding-right: 19px
    li
      float: left
      font-weight: bold
      margin-right: 20px
      margin-bottom: 10px
      &.active
        a
          background: $g2
          +box-shadow(0, 1, 4)
          color: $g6
          &:hover
            background: $w1
            color: $b2
            border-color: $w1
      a
        text-decoration: none
        display: block
        padding: 5px 23px
        color: $g2
        &:hover
          background: $b1
          color: $w1
          +box-shadow(0, 1, 4)
        &:active
          background: $b2

.content_box
  margin: 10px 20px 20px 20px
.dl
  .dt
    display: inline-block
    min-width: 200px
    color: $g5
  a
    text-decoration: underline
  .text
    white-space: pre

.default_table
  width: 100%
  td, th
    padding: 2px 5px
  thead
    th
      background: $g6
      color: $g4
      text-align: left
  tr
    &:hover
      td
        background: $g2
  tbody
    td
      border-bottom: 1px solid $g2
      &.no_content
        border-color: transparent
        background: transparent


.font_size_bigger
  font-size: 1.2em


.quick_edit_holder,
#main
  display: table-cell
  overflow: hidden
  background: $g2
  box-sizing: border-box
  +box-shadow(0, 1, 4, rgba($k1, 0.5))
.quick_edit_helper,
#main
  > h3
    padding: 9px 20px
    background: $g3


#area_select
  -webkit-appearance: none
  -moz-appearance: none
  -ms-appearance: none
  appearance: none
  outline: 0
  border: 0
  float: right
  padding: 4px
  border-radius: 0
  width: 34px
  color: white
  text-indent: -300px
  margin-top: 32px
  font-size: 15px
  cursor: pointer
  background-color: transparent
  background-position: -393px 0



#content
  display: table
  width: 100%
  box-sizing: border-box
  form
    border-spacing: 20px
  h2,
  h3
    color: $g6
  h6
    color: $g6
  .quick_edit_holder
    &.collapsed
      width: 50px
      max-width: auto
      background: rgb(197, 197, 197)
      .quick_edit_helper
        display: none

    overflow-x: auto
    position: relative
    max-width: 400px
    width: 400px
    vertical-align: top
    padding: 0
    form
      padding: 10px 20px
      margin-left: 0
      padding-bottom: 10px
    .node,
    .input,
    .label
      display: block
    .input
      padding-top: 0
      min-height: 31px

    textarea
      width: 300px
      height: 100px

    .group
      margin-top: 0
      margin-bottom: 10px
      margin-left: 14px
      padding: 0
      button
        border: none
        background-color: transparent
        color: inherit
        font: inherit
        margin: 0
        float: left
        cursor: pointer
        padding: 6px 20px
        &:focus
          outline: 0
        &.save_and_next
          border-left: 1px solid $b2
          text-indent: -9999px
          background-position: -140px -40px
          width: 40px
          height: 40px
          &:focus,
          &:hover
            background-position: -140px -90px


    .quick_edit_helper > a
      &.cancel,
      &.open
        float: right
        margin-top: 10px
        margin-right: 10px
      &.cancel:hover
        background: $r1
      &.save
        margin-right: 16px

table.data_table
  margin-bottom: 40px
  width: 100%
  caption
    overflow: hidden
    height: 28px
    -moz-box-sizing: content-box
    padding: 10px 20px 10px 20px
    background: $g3
    text-align: left
    h4,
    .info
      display: inline-block
      padding-bottom: 20px
    h4
      color: $g6
    .info
      margin: 0 20px 0 10px
      min-width: 290px
      white-space: nowrap
      font-size: 12px
      font-style: normal
      text-transform: uppercase
      color: $g5
      strong
        color: $g6
    form
      display: inline-block
    .create
      float: right

  td:first-child
    padding-left: 17px
  th:first-child
    padding-left: 20px

  thead
    th
      padding: 4px 0
      padding-left: 3px
      text-align: left
      white-space: nowrap
      color: $g5
      &.primary_key
        text-transform: uppercase
      &.sorted
        & a:after,
        &.desc:hover a:after
          content: ' ▲'
        &:hover a:after,
        &.desc a:after
          content: ' ▼'
        a:after
          color: $g4
        &:hover a:after
          color: $b1
        a
          color: $b1
  th,
  td
    &.drag
      padding-left: 0px

  tbody
    td
      border-bottom: 1px solid $g3
      &.has_many,
      &.has_and_belongs_to_many,
      &.text,
      &.primary_key.key_long
        max-width: 200px
        white-space: nowrap
        overflow: hidden
        a
          -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(70%,rgba($k1,1)), color-stop(95%,rgba($w1,0)))
      &.primary_key.key_long
        max-width: 50px
        &:hover
          max-width: none
          a
            -webkit-mask-image: none
      &.no_entries
        text-align: center
        text-transform: uppercase
        padding: 10px 0
        color: $g5
        a
          font-weight: bold
          display: inline
    a
      display: block
      padding: 5px 3px
      &.icon
        padding: 0
        margin-right: 5px
        display: inline-block
        text-align: left

    .handle
      display: block


    tr
      &.animate td
        +transition-duration(.3)
        +transition-delay(.28)
      &:hover,
      &.live_edit
        td
          background: $b1
          border-bottom-color: $b1
          color: $w1
          .duplicate
            background-position: -348px -50px
            &:hover
              background-position: -348px -100px
          .edit
            background-position: 0 -50px
            &:hover
              background-position: 0 -100px
          .toggle
            background-position: -448px -50px
            &:hover
              background-position: -448px -100px
            &.h_true
              background-position: -448px -200px
              &:hover
                background-position: -448px -250px
          .delete
            background-position: -50px -50px
            &:hover
              background-position: -50px -100px
          .handle
            background-position: -98px -50px
            &:hover
              background-position: -98px -100px
          .duplicate,
          .edit,
          .toggle,
          .toggle.h_true,
          .delete
            &.clicked
              background: image-url('bhf/small_ajax_loader_h.gif') no-repeat center center
      &.live_edit td
        background: $b2
        border-bottom-color: $b2
      &.background_delete td
        background: $r1
        border-bottom-color: $r1
      &.dragged
        td
          opacity: 0.4
          background-color: gray

  thead
    th.drag
      width: 24px
  tfoot
    .custom_footer_td
      text-align: right
      padding-right: 20px
    td
      padding-top: 10px
      &:first-child
        padding-left: 20px
  thead,
  tbody
    .primary_key,
    .number
      padding-right: 10px
      text-align: right
    .primary_key
      padding-left: 10px
      width: 30px
    .action
      padding-right: 15px
      width: 54px
      text-align: right
      &.wider
        width: 88px
  tbody
    .primary_key
      color: $g5

.icon
  text-indent: -9999px
  display: inline-block
  width: 20px
  height: 20px
  background: image-url('bhf/pictos.png') no-repeat
  &.toggle,
  &.duplicate,
  &.edit,
  &.delete
    &.clicked
      background: image-url('bhf/small_ajax_loader.gif') no-repeat center center
  &.duplicate
    width: 24px
    background-position: -348px 0
  &.delete
    background-position: -50px 0
  &.toggle
    width: 24px
    background-position: -448px 0
    &.h_true
      background-position: -448px -150px
  &.handle
    background-position: -98px 0
    cursor: move


.default_input
  border: 1px solid transparent
  background: $w1
  +border-radius(2)
  padding: 2px 5px 2px 5px
  width: 300px
  +box-model
  min-height: 32px
  margin: 0
  margin-bottom: 4px
  &:focus
    outline: 0
    +transition-duration(1)
    box-shadow: 0 1px 12px $b2
    -moz-box-shadow: 0 1px 12px $b2
    border-color: $b2

.preview_image
  @extend .default_input
  vertical-align: middle
  padding: 2px
  width: auto
  max-width: 400px
  max-height: 200px

.thumbnail_image
  @extend .preview_image
  max-width: 32px
  max-height: 32px

.popped_image
  height: 250px
  position: absolute

.search
  input[type="text"]
    @extend .default_input
    width: 200px
    min-height: 20px
    padding-top: 5px

.quick_edit_holder
  .error_explanation
    margin-top: -10px
    margin-left: -20px
    margin-right: -20px

form
  .node
    display: table-row
    &.primary_key
      .label
        text-transform: uppercase
    &.static
      .input
        padding-top: 5px
  .input,
  .label
    display: table-cell
    vertical-align: top
  .label
    width: 200px
    padding-top: 5px
    p,
    label
      display: block
      color: $g6
    .field_with_errors
      color: $r1
  .select_input
    .quick_edit.js_edit_field,
    .qe_delete.js_delete
      margin-left: 10px
    .plus_button
      margin-left: 20px
    .icon.edit
      position: relative
      top: -2px
      background-position: 0 -150px
      &.live_edit,
      &:hover
        background-position: 0 -200px

  .input
    input[type="file"]
      display: block
      padding: 3px 0 6px 0
    input[type="password"],
    input[type="text"],
    .uploaded_image,
    .uploaded_file,
    textarea
      @extend .default_input
    input[name*="headline"],
    input[name*="title"],
    input[name*="name"]
      font-size: 18px
      width: 500px
      margin-top: -4px
      .quick_edit_holder &
        width: 320px
        margin-top: 0px

    textarea
      width: 500px
      height: 200px
      line-height: 20px
      &.wysiwyg
        height: 400px
    .errors
      color: $r1
    .field_with_errors
      input
        border-color: $r1
    [disabled]
      background: $g4 !important
    input[type="submit"],
    input[type="password"],
    input[type="text"],
    select,
    textarea,
    .uploaded_image,
    .uploaded_file,
    .mooeditable-container,
    .wmd-button-row,
    .map_canvas
      margin-left: -6px
    input[type="file"]
      margin-left: -5px
    select
      font-size: 16px
      margin-top: 5px
    input[type="checkbox"]
      margin-top: 9px
    .multiple_field,
    .array_fields
      display: block
    .uploaded_file,
    .uploaded_image
      padding: 2px
      width: auto
      max-width: 400px
      max-height: 200px
      margin-bottom: 5px
      display: block
    .uploaded_file
      overflow: hidden
      padding: 7px 5px 8px 7px
      background: $g5
      color: $w1
      &:hover
        background: $w1
        color: $b1
    .warning
      font-weight: bold

  input[type="submit"]
    margin-right: 20px
  input[type="submit"].alt_button
    background: $w1
    color: $g5
    font-weight: normal
    +transition-duration(0)
    &:active,
    &:hover
      color: $w1
  .cancel
    color: $g5
    &:hover
      color: $r1
  .info
    font-style: italic
    font-size: 12px
    color: $g6
    a
      text-decoration: underline

  .error_explanation
    h5
      padding: 10px 20px
      background: $r1
      color: $w1
      font-weight: normal
    ul
      padding: 5px 20px
      background: $w1
      list-style: square
      li
        margin: 0 20px
        padding: 5px 0
        color: $r1
    label
      color: $k1
      cursor: pointer
      display: block
      &:hover
        color: $r1

.qe_button
  text-decoration: none
  background: white
  padding: 3px 6px
  border-radius: 4px
  display: inline-block
  margin-bottom: 8px
  &:hover
    color: white
    background-color: $b1
  &.live_edit
    color: white
    background-color: $b2
    border-color: $b2
  &.animate
    +transition-duration(.3)
  &.plus_button
    font-size: 20px
    font-weight: bold
    padding: 0 8px 6px 8px
    line-height: 20px
    cursor: pointer

.default_form_align
  margin-left: -6px

a
  &[href='null'],
  &[href='']
    opacity: 0.3
    pointer-events: none

.relation
  margin-left: -6px
  input
    margin-right: 5px
  li:hover
    .qe_delete
      opacity: 1
      //+transition-duration(0.5)
  .qe_delete
    opacity: 0

.qe_delete
  font-size: 20px
  font-weight: bold
  padding: 0 8px 6px 8px
  line-height: 20px
  &:hover
    color: $r1

.ninja_file_field_holder
  position: relative
.ninja_file_field
  position: absolute
  height: 100%
  width: 100%
  background: transparent
  opacity: 0
  z-index: 1
  left: 0
  top: 0

footer
  padding: 20px 0 60px 0
  text-align: center
  color: gray
  font-size: 12px
  line-height: 20px
  a
    text-decoration: none
    &:hover
      text-decoration: underline


input[type="submit"],
.button
  &.disabled
    opacity: 0.4
  cursor: pointer
  display: inline-block
  padding: 6px 20px
  margin: 20px 0 0
  background: $b1
  color: $w1
  font-weight: bold
  font-size: 18px
  text-decoration: none
  border: 0
  +border-radius(5)
  +transition-duration(0.3)
  +transition-property(background)
  &:hover
    background: $b2
  &:focus,
  &:active
    outline: 0
    background: $b2
  &:active
    background: darken($b2, 5%)


input[type="submit"].alt_button,
.alt_button
  &.disabled
    opacity: 0.4
  display: inline-block
  padding: 12px 50px
  +border-radius(4)
  text-decoration: none
  font-size: 13px
  cursor: pointer
  background: $g5
  padding: 5px 10px
  color: $w1
  border: 0
  +transition-duration(0.3)
  &.selected,
  &:hover
    background: $b1
    text-decoration: none
  &:active
    background: darken($b2, 5%)
  &:focus
    outline: 0

#flash_massages
  position: fixed
  z-index: 100
  +transition-duration(0.6)
  bottom: -45px
  opacity: 0
  width: 100%
  font-size: 1.2em
  &.show
    bottom: 0
    opacity: 1
  ul
    display: block
    padding: 15px 20px 15px 20px
    border: 1px solid $b1
    background: $b1
    color: $w1


.pagination
  .gap
    display: inline
    padding: 0 8px
  a, span, em
    @extend .alt_button

  span
    color: $g4
    cursor: default
    &:hover
      background: $g5
      border-color: $g5
  .page_number
    background: transparent
    color: $g6
    border-color: $g4
    &:hover
      color: $w1

  em
    font-style: normal
    font-weight: bold
    cursor: default
    background: $g6

.basic_info_list
  font-size: 20px
  font-weight: bold
  line-height: 40px
  color: $g6
  li
    padding-left: 10px
    border-top: 1px solid $g4
    +transition-duration
    &:first-child
      border: none
    &:hover
      +transition-duration(0)
      color: $b2
      a
        +transition-duration(0)
    &:hover,
    &:hover + li
      border-color: $b1
    a
      +transition-duration
      display: block


@media (max-width: 960px)
  table.data_table caption .info
    display: none
  .default_columns
    thead th:nth-last-child(2),
    tbody td:nth-last-child(2),
    thead th:nth-last-child(3),
    tbody td:nth-last-child(3)
      display: none


.mappin
  .map_canvas
    @extend .default_input
    height: 350px
    width: 500px


// MooEditable

@import "MooEditable.scss"

.mooeditable-container
  @extend .default_input
  background: white
  border: 1px solid $g4
  .toolbar-separator
    background: $g4
  .mooeditable-ui-toolbar
    +border-radius(2)
    margin-top: 2px
  button
    background: white !important
    padding: 2px 4px 4px 4px !important
    &:hover
      background: $g4 !important


.datepicker
  position: absolute
  width: 172px
  padding: 5px 10px
  background: $g2
  border: 1px solid $g4
  +border-radius(2)
  color: $b3
  margin-top: -2px
  .header
    position: relative
    margin-bottom: 5px
    padding-bottom: 5px
    border-bottom: 1px solid $g4
    .title
      padding-top: 3px
      text-align: center
      margin: 0 18px 0 18px
    .previous, .next, .closeButton
      position: absolute
      cursor: pointer
      overflow: hidden
      width: 12px
      top: 2px
      font-weight: bold
      &:hover
        color: $b2
    .previous
      left: 4px
    .next
      right: 4px
    .closeButton
      display: none
      right: 0px
      top: 0px
  .titles
    font-weight: bold
    font-size: 12px
    .title.day
      color: $g4
  .body
    position: relative
    top: 0px
    width: 170px
    height: 156px
    overflow: hidden
    > div
      margin-top: 2px
      margin-left: 2px

  .time
    position: relative
    width: 100%
    height: 100%
    .hour, .separator, .minutes
      position: absolute
    .hour,
    .minutes
      left: 23px
      font-size: 26px
      height: 48px
      width: 40px
      color: $g6
      text-align: center
      @extend .default_input
    .separator
      width: 10px
      font-size: 34px
      left: 78px
    .minutes
      left: 103px
    .ok
      position: absolute
      cursor: pointer
      top: 46px
      left: 15px
      width: 134px
      @extend .alt_button
      font-size: 20px !important
  .days
    .day
      float: left
      text-align: center
      overflow: hidden
      width: 23px
      margin: 0 1px 1px 0
      color: $g6
    .day0
      margin-right: 0
    .week5 .day
      margin-bottom: 0
    .week .day
      cursor: pointer
      &:hover
        +box-shadow(0, 0, 1, $b2)
        background-color: $w1
        color: $b2
        +border-radius(2)

    .otherMonth
      color: $g5
    .selected
      +border-radius(2)
      background-color: $b2
      color: $w1
      +box-shadow(0, 0, 1, $w1)
  .months
    .month
      float: left
      cursor: pointer
      text-align: center
      margin-top: 2px
      padding-top: 3px
      padding-bottom: 3px
      width: 55px
      overflow: hidden
      margin: 0 1px 1px 0
    .month3, .month6, .month9, .month12
      margin-right: 0
    .month10, .month11, .month12
      margin-bottom: 0
    .month:hover
      +box-shadow(0, 0, 1, $b2)
      background-color: $w1
      color: $b2
    .selected
      background-color: $b2
      color: $w1
      +box-shadow(0, 0, 1, $w1)
  .years
    .year
      float: left
      cursor: pointer
      text-align: center
      margin-top: 2px
      padding-top: 3px
      padding-bottom: 3px
      width: 32px
      font-size: 12px
      overflow: hidden
      margin: 0 1px 1px 0
    .year4, .year9, .year14, .year19
      margin-right: 0
    .year15, .year16, .year17, .year18, .year19
      margin-bottom: 0
    .year:hover
      +box-shadow(0, 0, 1, $b2)
      background-color: $w1
      color: $b2
    .selected
      background-color: $b2
      color: $w1
      +box-shadow(0, 0, 1, $w1)
  .unavailable
    background: none !important
    color: $r2 !important
    cursor: default !important

.quick_edit_template
  display: none !important

.hide
  display: none !important
.float_left
  float: left
.float_right
  float: right
.clear
  clear: both
.animate
  +transition-duration

#ajax_holder
  text-indent: -9999px
  height: 60px
  opacity: 0
  width: 120px
  margin-left: -60px
  position: fixed
  top: -50px
  left: 50%
  z-index: 4000
  +border-bottom-radius(4)
  background: $b1 image-url('bhf/ajax_loader.gif') no-repeat center 16px
  +box-shadow(0, 3, 8, #333)
  +transition-duration(0.6)
  &.loading
    height: 100px
    opacity: 1
    top: -4px
  &.failure
    background-image: none
    width: auto
    opacity: 1
    top: 0
    text-indent: 0px
    +transition-duration(0)
    height: auto
    color: white
    padding: 20px
    marign-left: -120px
    font-weight: bold



.wmd-preview,
.wmd-output
  @extend .default_input
  width: 700px
  margin: 0 -6px 0 -6px
  background-color: $w1
  padding: 3px 5px 2px 5px
  margin-bottom: 10px
  line-height: 22px

.wmd-panel
  width: 700px !important

.wmd-preview
  img
    display: block
  ul,
  ol
    padding-left: 30px
  ul,
  ol,
  h1, h2, h3, h4, h5, h6,
  p
    padding-bottom: 10px
  a
    text-decoration: underline
    color: $b2
    font-weight: bold

.preview_switch
  padding-right: 6px
  span
    float: right
    margin-left: 10px
    cursor: pointer
    &.active
      color: $b2

.wmd-output
  font-size: 12px
  line-height: 16px
  background: $g6
  color: $w1
  code
    font-family: Monaco,Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Courier New",Courier,monospace
    white-space: pre-wrap

.wmd-button-row
  width: 700px
  background: $w1
  padding: 6px 5px 1px 5px
  @extend .default_input
  margin-bottom: 5px
#main .wmd_editor
  height: 400px
  width: 700px


.wmd-spacer
  width: 1px
  height: 20px
  margin-left: 14px
  position: absolute
  background-color: Silver
  display: inline-block
  list-style: none

.wmd-button
  width: 20px
  height: 20px
  margin-left: 5px
  margin-right: 5px
  position: relative
  background-image: image-url('bhf/wmd-buttons.png')
  background-repeat: no-repeat
  display: inline-block
  list-style: none
  border: 1px solid transparent
  &:hover
    border-color: $g4
  &:active
    border-color: $b2

.wmd-spacer
  width: 1px
  height: 20px
  margin-left: 7px
  margin-right: 7px
  position: relative
  background-color: $g4
  display: inline-block
  list-style: none

.wmd-button-row
  .wmd-bold-button
    background-position: 0px 0px
  .wmd-italic-button
    background-position: -20px 0
  .wmd-link-button
    background-position: -40px 0
  .wmd-quote-button
    background-position: -60px 0
  .wmd-code-button
    background-position: -80px 0
  .wmd-image-button
    background-position: -100px 0
  .wmd-olist-button
    background-position: -120px 0
  .wmd-ulist-button
    background-position: -140px 0
  .wmd-heading-button
    background-position: -160px 0
  .wmd-hr-button
    background-position: -180px 0
  .wmd-undo-button
    background-position: -200px 0
  .wmd-redo-button
    background-position: -220px 0
  .wmd-help-button
    background-position: -240px 0

.wmd-prompt-background
  background-color: $k1

.wmd-prompt-dialog
  border: 1px solid $g5
  background-color: $g1
  > div
    font-size: 0.8em
    font-family: arial, helvetica, sans-serif
  > form
    input[type="text"]
      border: 0
      color: black
    input[type="button"]
      border: 0
      font-size: 0.8em
      font-weight: bold



.translation_missing
  color: $r1 !important


@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5)
  .icon
    background-image: image-url('bhf/pictos_2x.png')
    background-size: 510px 280px