@import reset
@import typo
@import functions

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

html
  min-width: 700px
  height: 100%
  overflow-y: scroll
  background: url(small_ajax_loader.gif) no-repeat -300px -300px, url(small_ajax_loader_h.gif) no-repeat -300px -300px, #303030 url(bg.png)
  

body
  min-width: 960px
  min-height: 100%
  +box-inner-shadow(0, 0, 8,#000)

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
  nav
    padding-top: 25px
    li
      float: left
      font-weight: bold
      margin-right: 20px
      &.active
        a
          +text-shadow(#fff, -1)
          +bg-gradient(#D5D5D5, #FFFFFF)
          +box-shadow(0, 1, 4)
          color: #414756
          &:hover
            +bg-gradient(#FFFFFF, #D5D5D5)
            border-color: #FFFFFF
            +text-shadow(#fff)
            color: #414756
            +box-inner-shadow(0, 0, 3, #fff)
      a
        text-decoration: none
        display: block
        padding: 5px 23px
        border: 1px solid transparent
        color: #EAEAEA
        +text-shadow(#000, -1)
        &:hover
          +bg-gradient($b1, $b2)
          color: $w1
          border-color: $b1
          +box-shadow(0, 1, 4)
          +text-shadow(#0068B3)
        &:active
          +bg-gradient($b2, $b1)
          +text-shadow(#0068B3, -1)
            

#content
  display: table
  width: 100%
  box-sizing: border-box
  margin-top: -20px
  border-spacing: 20px
  h2,
  h3
    +text-shadow(#fff)
  h6
    color: $g3
    +text-shadow(#fff)
    
.quick_edit_holder,
#main
  display: table-cell
  overflow: hidden
  background: #EAEAEA
  border: 3px solid #FFFFFF
  box-sizing: border-box
  padding: 10px 20px
  +box-shadow(0, 1, 4, rgba($k1, 0.5))

#main_form
  // TODO: wtf css?
  margin-left: -20px
    


#content
  .quick_edit_holder
    +transition-duration(0.3)
    +transition-delay(0.2)
    overflow-x: auto
    position: relative
    max-width: 400px
    width: 400px
    vertical-align: top
    form
      margin-left: 0
      padding-bottom: 10px
    .node,
    .input,
    .label
      display: block
    .input
      padding-top: 0
      min-height: 31px
    
    textarea
      width: 300px
      height: 100px
    
    .group
      padding: 0
      &:active
        .save
          border-right: 1px solid rgba(#fff, 0.4)
        .save_and_next
          border-left: 1px solid $b2
        
      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
          border-right: 1px solid $b2
          &.create
            border-right: none
          &:focus
            color: $b2
            text-shadow: 0 0px 3px #fff
        &.save_and_next
          border-left: 1px solid rgba(#fff, 0.3)
          text-indent: -9999px
          background: url(pictos.png) no-repeat -140px -40px
          width: 40px
          &:focus,
          &:hover
            background-position: -140px -90px
        

    > button
      //
        &.save,
        &.save_and_next
          margin-left: -6px
          padding: 6px 25px
          font-size: 13px
        
      &.cancel,
      &.open
        float: right
        margin-top: 0
      &.cancel
        margin-right: -10px
      &.open
        margin-right: 10px
      &.save
        margin-right: 16px

table
  margin-top: 20px
  margin-bottom: 40px
  width: 100%
  caption
    overflow: hidden
    height: 28px
    -moz-box-sizing: content-box
    padding: 10px 10px 10px 20px
    +border-top-radius(4)
    +box-shadow(0, 1, 4, #ccc)
    background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), color-stop(50%, #CCCCCC), color-stop(51%, #DCDCDC), to(#DCDCDC))
    background-size: 0 2px
    text-align: left
    h4,
    .info
      display: inline-block
      +text-shadow(#fff)
      padding-bottom: 20px
    h4
      color: #3E3E3E
    .info
      margin: 0 20px 0 10px
      width: 290px
      text-transform: uppercase
      font-size: 12px
      color: $g1
      white-space: nowrap
    form
      display: inline-block
    .create
      float: right

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

  td,
  th
    &:first-child
      +border-left-radius(4)
    &:last-child
      +border-right-radius(4)
  thead
    th
      padding: 4px 0
      padding-left: 3px
      text-align: left
      border-top: 1px solid #C6C6C6
      border-bottom: 1px solid #1B1B1B
      white-space: nowrap
      background: #3E3E3E
      +text-shadow(#000, -1)
      color: #C2C2C2
      &.primary_key
        text-transform: uppercase
      &.sorted
        +box-inner-shadow(0, -15, 50, #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-top: 1px solid #FFFFFF
      border-bottom: 1px solid #C6C6C6
      &.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
      &.edit,
      &.delete
        padding: 0
        margin-right: 5px
        display: inline-block
        text-indent: -9999px
        width: 20px
        height: 20px
        background: url(pictos.png) no-repeat
        &.clicked
          background: url(small_ajax_loader.gif) no-repeat center center
      &.edit
        &:active
          background-position: 0 -101px
      &.delete
        background-position: -50px 0
        &:active
          background-position: -50px -101px

    .handle
      background: url(pictos.png) no-repeat -94px 0
      cursor: move
      display: block
    

    tr      
      &:hover td,
      &.live_edit td
        +bg-gradient($b1, $b2)
        color: $w1
        box-shadow: inset 0 1px 0 $b2, inset 0 2px 0 rgba(#fff, 0.4)
        border-color: #EAEAEA
        .edit
          background-position: 0 -50px
          &:hover
            background-position: 0 -100px
        .delete
          background-position: -50px -50px
          &:hover
            background-position: -50px -100px
        .handle
          background-position: -94px -50px
          &:hover
            background-position: -94px -100px
        .edit,
        .delete
          &.clicked
            background: url(small_ajax_loader_h.gif) no-repeat center center
      &.live_edit td
        +bg-gradient($b2, $b1)
        box-shadow: inset 0 -1px 0 $b2, inset 0 -2px 0 rgba(#fff, 0.4)
      &.dragged
        td
          opacity: 0.4
          background-color: gray

  thead
    th.drag
      width: 24px

  tfoot
    td
      padding-top: 10px
      border-top: 1px solid #FFFFFF

  thead,
  tbody
    .primary_key,
    .number
      padding-right: 10px
      text-align: right
    .primary_key
      padding-left: 10px
      width: 30px
    .action
      width: 54px


.default_input
  border: 1px solid #BBB
  background: #FFF
  +border-radius(2)
  +box-shadow(0, 1, 0, #FFFFFF)
  padding: 3px 5px 2px 5px
  width: 300px
  &: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

form
  .node
    display: table-row
    &.string,
    &.number,
    &.text,
    &.password
      .input,
      .label
        padding-top: 0
      .label
        label
          padding-top: 5px
    .label
      p,
      label
        display: block
        color: $g3
        +text-shadow(#fff)
      width: 200px
      .field_with_errors
        color: red
    &.primary_key
      .label
        text-transform: uppercase
    .input,
    .label
      padding-top: 5px
      vertical-align: top
      display: table-cell
    .input
      input[type="password"],
      input[type="text"],
      .uploaded_image,
      .uploaded_file,
      textarea
        @extend .default_input
      textarea
        width: 500px
        height: 200px
        line-height: 20px
        &.wysiwyg
          height: 400px
      .errors
        color: red
      .field_with_errors
        input
          border-color: red
      [disabled]
        background: $g2 !important
      input[type="submit"],
      input[type="password"],
      input[type="text"],
      select,
      textarea,
      .uploaded_image,
      .uploaded_file,
      .mooeditable-container
        margin-left: -6px
      input[type="file"]
        margin-left: -5px
      select
        font-size: 16px
      .multiple_fields.template,
      .array_fields
        display: block
      .add_field
        display: block
        font-size: 20px
        font-weight: bold
        width: 30px
        margin-left: -8px
        cursor: pointer
        text-align: center
        color: $k1 !important
        text-decoration: none !important
        &:hover
          color: $b1 !important
      .uploaded_file,
      .uploaded_image
        padding: 2px
        width: auto
        max-width: 400px
        max-height: 200px
        margin-bottom: 5px
        display: block
      .warning
        font-weight: bold
      .quick_edit
        text-decoration: underline
        color: $b2
        
      .uploaded_file
        padding: 7px 5px 8px 7px
        background: #999
        color: #fff
        &:hover
          background: #fff
          color: $b1
      .relation
        li
          &:hover
            .delete
              opacity: 1
              +transition-duration(0.5)
          .delete
            opacity: 0
            &:hover
              color: $b1
        
    .cancel
      margin-left: 20px
      color: $g1
      &:hover
        color: $g3
        text-decoration: underline
    .info
      font-style: italic
      font-size: 12px
      color: $g3
      +text-shadow(#fff)
      
  .error_explanation
    margin-left: 20px
    label
      color: red
      cursor: pointer
      display: block
      &:hover
        color: #ff9900


footer
  padding-bottom: 20px
  +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
  cursor: pointer
  display: inline-block
  padding: 6px 20px
  border: 1px solid $b2
  margin: 20px 0 0
  background: $b1
  color: #fff
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
  font-weight: bold
  font-size: 18px
  text-decoration: none
  +border-radius(5)
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.5), inset 0 12px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -12px 25px rgba(0, 0, 0, 0.3)
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.5), inset 0 18px 5px rgba(255, 255, 255, 0.2), inset 0 10px 10px rgba(255, 255, 255, 0.25), inset 0 -12px 25px rgba(0, 0, 0, 0.3)
  +transition-duration(0.3)
  +transition-property(background)
  &:hover
    background: $b2
  &:focus,
  &:active
    outline: 0
    background: $b2
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4)
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4), inset 0 -1px rgba(255, 255, 255, 0.5), inset 0 -18px rgba(255, 255, 255, 0.1), inset 0 -10px 10px rgba(255, 255, 255, 0.25), inset 0 -12px 25px rgba(0, 0, 0, 0.3)
    


input[type="submit"].alt_button,
.alt_button
  display: inline-block
  padding: 12px 50px
  +border-radius(4)
  text-decoration: none
  border: 1px solid gray
  font-size: 13px
  cursor: pointer
  background: #666
  padding: 5px 10px
  box-shadow: inset 0 1px 0 rgba(#AAABAA, 0.7), inset 0 -10px 20px rgba(#333, 0.6)
  color: $w1
  +text-shadow(#444, -1)
  &:hover
    border-color: $b2
    box-shadow: inset 0 1px 0 rgba(#fff, 0.4), inset 0 -10px 20px rgba(#333, 0.4)
    background: $b1    
  &:active
    box-shadow: inset 0 -1px 0 rgba(#fff, 0.4), inset 0 10px 20px rgba(#333, 0.4)
    +text-shadow(#444)
  &:focus
    outline: 0
    +transition-duration(1)
    +transition-property(box-shadow)
    box-shadow: 0 1px 12px $b2

#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
  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)
    box-shadow: inset 0 1px 0 rgba(#fff, 0.4), inset 0 -10px 10px rgba(#333, 0.1)
    &: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


// 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
    box-shadow: none
    &:hover
      background: $g2 !important
      
      
// Datepicker TODO: style div.datepicker

.datepicker
  position: absolute
  width: 172px
  padding: 5px 10px
  background: #E5E5E5
  border: 1px solid #C1C2DC
  +box-inner-shadow(0, 1, 0, #fff)
  +border-radius(2)
  +text-shadow(#fff)
  color: #535b6f
  .header
    position: relative
    margin-bottom: 5px
    padding-bottom: 5px
    border-bottom: 1px solid #C1C2DC
    +box-shadow(0, 1, 0, #fff)
    .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
      color: #535B6F
      background: #fff
      width: 50px
      font-size: 32px
      position: absolute
      top: 10px
      text-align: center
      padding: 2px
    .hour,
    .minutes
      +box-shadow(0, 0, 1, #2F4D7B)
      +text-shadow(#ccc)
      margin-top: 8px
      border: none
      left: 15px
    .separator
      background: transparent
      border: 0px
      width: 10px
      left: 76px
    .minutes
      left: 95px
    .ok
      +box-shadow(0, 0, 1, #2F4D7B)
      +text-shadow(#ccc)
      color: #535B6F
      background: #fff
      position: absolute
      border: none
      cursor: pointer
      top: 73px
      left: 15px
      width: 134px
      padding: 4px 0
      font-size: 16px
      &:hover,
      &:focus,
      &:active
        background-color: #2F4D7B
        color: #fff
        +text-shadow(#000)
        +box-shadow(0, 0, 1, #fff)
  .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)
        
    .otherMonth
      color: #aaa
    .selected
      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
  
  
#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: url(ajax_loader.gif) no-repeat center 16px, -webkit-gradient(linear, left top, left bottom, from($b1), to($b2))
  border: 1px solid $b1
  +box-shadow(0, 1, 4)
  +transition-duration(0.6)
  &.loading
    height: 100px
    opacity: 1
    top: -4px
    
    
    
  
#wmd-button-bar 
  width: 100%
  background: $w1
  padding: 0 10px 4px 0
  margin: 0 -6px 4px -6px
  @extend .default_input
#wmd-input 
  height: 400px
  width: 100%

#wmd-preview,
#wmd-output 
  @extend .default_input
  margin: 0 -6px 0 -6px
  background-color: #F5F5F5
  padding: 3px 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
  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 
  position: relative 
  margin-left: 5px
  margin-right: 5px
  margin-bottom: 5px
  margin-top: 10px
  padding: 0px  
  height: 20px


.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: absolute
  background-image: url(wmd-buttons.png)
  background-repeat: no-repeat
  background-position: 0px 0px
  display: inline-block 
  list-style: none
  > a
    width: 20px 
    height: 20px 
    margin-left: 5px
    margin-right: 5px
    position: absolute
    display: inline-block 

// TODO: style this properly

#wmd-button-bar
  #wmd-bold-button
    left: 0px
    background-position: 0px 0
  #wmd-italic-button
    left: 25px
    background-position: -20px 0
  #wmd-spacer1
    left: 50px
  #wmd-link-button
    left: 75px
    background-position: -40px 0
  #wmd-quote-button
    left: 100px
    background-position: -60px 0
  #wmd-code-button
    left: 125px
    background-position: -80px 0
  #wmd-image-button
    left: 150px
    background-position: -100px 0
  #wmd-spacer2
    left: 175px
  #wmd-olist-button
    left: 200px
    background-position: -120px 0
  #wmd-ulist-button
    left: 225px
    background-position: -140px 0
  #wmd-heading-button
    left: 250px
    background-position: -160px 0
  #wmd-hr-button
    left: 275px
    background-position: -180px 0
  #wmd-spacer3
    left: 300px
  #wmd-undo-button
    left: 325px
    background-position: -200px 0
  #wmd-redo-button
    left: 350px
    background-position: -220px 0
  #wmd-help-button
    right: 0px
    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: 1px solid #999999
      color: black
  > form
    input[type="button"]
      border: 1px solid #888888
      font-size: 0.8em
      font-weight: bold


// TODO: bigger ration buttons


// TODO: remove me
.translation_missing
  color: red !important