@import reset
@import typo
@import functions

$w1: #fff
$w2: #F1F1F1
$k1: #000
$b1: #38A5E9
$r1: #E93838
$b2: #0F8FDD
$g1: #7F7F7F
$g2: #ccc
$g3: #424242

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, #303030

body
  min-width: 960px
  min-height: 100%
  //+box-inner-shadow(0, 0, 8,#000)
  -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
          +text-shadow(#fff)
          +bg-gradient(#eaeaea, #D5D5D5)
          +box-shadow(0, 1, 4)
          color: #3e3e3e
          &:hover
            +bg-gradient(#FFFFFF, #FFFFFF)
            color: $b2
            border-color: #FFFFFF
            +text-shadow(#fff)
      a
        text-decoration: none
        display: block
        padding: 5px 23px
        color: #EAEAEA
        +text-shadow(#000, -1)
        &:hover
          +bg-gradient($b1, $b2)
          color: $w1
          +box-shadow(0, 1, 4)
          +text-shadow(#0068B3)
        &:active
          +bg-gradient($b2, $b1)
          +text-shadow(#0068B3, -1)
            
.preview_image
  @extend .default_input
  vertical-align: middle
  padding: 2px
  width: auto
  max-width: 400px
  max-height: 200px

.content_box
  margin: 10px 20px 20px 20px
.dl
  +text-shadow(#fff)
  .dt
    display: inline-block
    min-width: 200px
    color: $g1
  a
    text-decoration: underline
  .text
    white-space: pre

.default_table
  width: 100%
  td, th
    padding: 2px 5px
  thead
    th
      background: #3E3E3E
      color: #C2C2C2
      text-align: left
  tr
    &:hover
      td
        background: #E0E0E0
  tbody
    td
      border-bottom: 1px solid #E0E0E0
      &.no_content
        border-color: transparent
        background: transparent
.font_size_bigger
  font-size: 1.2em
    

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




#content
  display: table
  width: 100%
  box-sizing: border-box
  form
    border-spacing: 20px
  h2,
  h3
    +text-shadow(#fff)
    color: #3e3e3e
  h6
    color: $g3
    +text-shadow(#fff)
  .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: 20px
      padding: 0
      button
        border: none
        background: none
        color: inherit
        font: inherit
        text-shadow: inherit
        margin: 0
        float: left
        cursor: pointer
        padding: 6px 20px
        &:focus
          outline: 0
        &.save
          &:hover
            color: darken($b2, 15%)
        &.save_and_next
          border-left: 1px solid $b2
          text-indent: -9999px
          background: image-url('bhf/pictos.png') no-repeat -140px -40px
          width: 40px
          &:focus,
          &:hover
            background-position: -140px -90px
        

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

table.data_table
  margin-bottom: 40px
  width: 100%
  caption
    overflow: hidden
    height: 28px
    -moz-box-sizing: content-box
    padding: 10px 10px 10px 20px
    background: #DBDBDB
    text-align: left
    h4,
    .info
      display: inline-block
      +text-shadow(#fff)
      padding-bottom: 20px
    h4
      color: #3E3E3E
    .info
      margin: 0 20px 0 10px
      min-width: 290px
      text-transform: uppercase
      font-size: 12px
      color: $g1
      white-space: nowrap
      strong
        color: #3E3E3E
    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
      background: #3E3E3E
      +text-shadow(#000, -1)
      color: #C2C2C2
      &.primary_key
        text-transform: uppercase
      &.sorted
        background: #000
        & a:after,
        &.desc:hover a:after
          content: ' ▲'
        &:hover a:after,
        &.desc a:after
          content: ' ▼'
        a
          color: #FFFFFF
          +text-shadow

  th,
  td
    &.drag
      padding-left: 0px

  tbody
    td
      border-bottom: 1px solid #E0E0E0
      &.has_many,
      &.has_and_belongs_to_many,
      &.text
        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)))
          
      &.no_entries
        text-align: center
        text-transform: uppercase
        padding: 10px 0
        color: $g1
        a
          font-weight: bold
          display: inline
    a
      display: block
      padding: 5px 3px
      &.duplicate,
      &.edit,
      &.delete
        padding: 0
        margin-right: 5px
        display: inline-block

    .handle
      display: block
    

    tr
      &.animate td
        +transition-duration(.3)
        +transition-delay(.28)
      &:hover,
      &.live_edit
        td
          +bg-gradient($b1, $b2)
          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
          .delete
            background-position: -50px -50px
            &:hover
              background-position: -50px -100px
          .handle
            background-position: -98px -50px
            &:hover
              background-position: -98px -100px
          .duplicate,
          .edit,
          .delete
            &.clicked
              background: image-url('bhf/small_ajax_loader_h.gif') no-repeat center center
      &.live_edit td
        +bg-gradient($b2, $b1)
        border-bottom-color: $b2
      &.dragged
        td
          opacity: 0.4
          background-color: gray

  thead
    th.drag
      width: 24px
  tfoot
    td
      padding-top: 10px
  thead,
  tbody
    .primary_key,
    .number
      padding-right: 10px
      text-align: right
    .primary_key
      padding-left: 10px
      width: 30px
    .action
      width: 54px
      &.wider
        width: 88px
  tbody
    .primary_key
      color: #999

.icon
  text-indent: -9999px
  display: inline-block
  width: 20px
  height: 20px
  background: image-url('bhf/pictos.png') no-repeat
  &.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
  &.handle
    background-position: -98px 0
    cursor: move

.default_input
  border: 1px solid transparent
  background: #FFF
  +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

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

form
  .node
    display: table-row
    &.primary_key
      .label
        text-transform: uppercase
    &.static
      .input
        padding-top: 5px
    //
      &.string,
      &.number,
      &.text,
      &.password
        .input,
        .label
          padding-top: 0
        .label
          label
            padding-top: 5px
  .input,
  .label
    display: table-cell
    vertical-align: top
  .label
    width: 200px
    padding-top: 5px
    p,
    label
      display: block
      color: $g3
      +text-shadow(#fff)
    .field_with_errors
      color: $r1
  .input
    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: $g2 !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: #999
      color: #fff
      &:hover
        background: #fff
        color: $b1
    .warning
      font-weight: bold
  .add_field,
  .relation .quick_edit
    color: $b1
    text-decoration: none
    border: 2px solid $b1
    background: white
    padding: 3px 4px
    border-radius: 4px
    margin-left: -6px
    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)
      +transition-delay(.28)
  .add_field
    font-size: 20px
    font-weight: bold
    padding: 0 8px 6px 8px
    line-height: 20px
    cursor: pointer
  .relation
    li
      &:hover
        .delete
          opacity: 1
          +transition-duration(0.5)
      .delete
        opacity: 0
        font-size: 20px
        font-weight: bold
        padding: 0 8px 6px 8px
        line-height: 20px
        &:hover
          color: $r1
      
  .cancel
    margin-left: 20px
    color: $g1
    &:hover
      color: $g3
      text-decoration: underline
  .info
    font-style: italic
    font-size: 12px
    color: $g3
    +text-shadow(#fff)
    a
      text-decoration: underline
      
  .error_explanation
    margin-left: 20px
    label
      color: $r1
      cursor: pointer
      display: block
      &:hover
        color: #ff9900


footer
  padding: 20px 0
  +text-shadow(#000, -1)
  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: #fff
  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: #666
  padding: 5px 10px
  color: $w1
  border: 0
  +text-shadow(#444, -1)
  +transition-duration(0.3)
  &:hover
    background: $b1
    text-decoration: none
  &:active
    background: darken($b2, 5%)
  &:focus
    outline: 0

#flash_massages
  display: block
  padding: 5px 20px
  margin: -45px 0 10px 0
  border: 1px solid $b1
  +bg-gradient($b1, $b2)
  color: $w1
  +text-shadow(#0068B3)
  overflow: hidden
  height: 100%
  +transition-duration(0.6)
  +transition-delay
  opacity: 0
  &.show
    opacity: 1
    margin-top: 0px


.pagination
  .gap
    display: inline
    padding: 0 8px
  a, span, em
    @extend .alt_button
  
  span
    color: gray
    cursor: default
    &:hover
      background: #666
      border-color: #999
  .page_number
    background: transparent
    color: #3E3E3E
    border-color: #B7B7B7
    +text-shadow(#fff)
    &:hover
      color: #fff
      +text-shadow(#999)
      
  em
    font-style: normal
    font-weight: bold
    cursor: default
    background: #B1B1B1

.basic_info_list
  font-size: 20px
  font-weight: bold
  line-height: 40px
  color: $g3
  +text-shadow(#fff)
  li
    padding-left: 10px
    border-top: 1px solid $g2
    +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: 800px)


@media (max-width: 960px)
  .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

.mooeditable-container
  @extend .default_input
  background: white
  border: 1px solid #BBB
  .toolbar-separator
    background: $g2
  .mooeditable-ui-toolbar
    +border-radius(2)
    margin-top: 2px
  button
    background: white !important
    padding: 2px 4px 4px 4px !important
    &:hover
      background: $g2 !important
      
      
.datepicker
  position: absolute
  width: 172px
  padding: 5px 10px
  background: #E5E5E5
  border: 1px solid #C1C2DC
  +border-radius(2)
  +text-shadow(#fff)
  color: #535b6f
  margin-top: -2px
  .header
    position: relative
    margin-bottom: 5px
    padding-bottom: 5px
    border-bottom: 1px solid #C1C2DC
    .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: #2F4D7B
    .previous
      left: 4px
    .next
      right: 4px
    .closeButton
      display: none
      right: 0px
      top: 0px
  .titles
    font-weight: bold
    font-size: 12px
    .title.day
      color: #535b6f
  .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: 15px
      font-size: 26px
      height: 48px
      width: 40px
      font-weight: bold
      color: $g3
      text-align: center
      @extend .default_input
    .separator
      width: 10px
      font-size: 34px
      left: 76px
    .minutes
      left: 95px
    .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: #262626
    .day0
      margin-right: 0
    .week5 .day
      margin-bottom: 0
    .week .day
      cursor: pointer
      &:hover
        +box-shadow(0, 0, 1, #2F4D7B)
        background-color: #fff
        color: #2F4D7B
        +text-shadow(#ccc)
        +border-radius(2)
        
    .otherMonth
      color: #aaa
    .selected
      +border-radius(2)
      background-color: #2F4D7B
      color: #fff
      +text-shadow(#000)
      +box-shadow(0, 0, 1, #fff)
  .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, #2F4D7B)
      background-color: #fff
      color: #2F4D7B
      +text-shadow(#ccc)
    .selected
      background-color: #2F4D7B
      color: #fff
      +text-shadow(#000)
      +box-shadow(0, 0, 1, #fff)
  .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, #2F4D7B)
      background-color: #fff
      color: #2F4D7B
      +text-shadow(#ccc)
    .selected
      background-color: #2F4D7B
      color: #fff
      +text-shadow(#000)
      +box-shadow(0, 0, 1, #fff)
  .unavailable
    background: none !important
    color: #fbb !important
    cursor: default !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, 1, 4)
  +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: #F5F5F5
  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: $g3
  color: $w2
  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: $g2


.wmd-spacer
  width: 1px
  height: 20px
  margin-left: 7px
  margin-right: 7px
  position: relative
  background-color: $g2
  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: #000

.wmd-prompt-dialog
  border: 1px solid #999999
  background-color: #F5F5F5
  > 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: 377px 152px
  #content
    .quick_edit_holder
      .group
        button
          &.save_and_next
            background-image: image-url('bhf/pictos_2x.png')
            background-size: 377px 152px