$color1: #0c1550
$color2: #1a2363
$color3: #f7f8e6
$border-color: #cdcdcd

body
  line-height: 140%
  color: #333
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif
  background: #cccccb
  
#kuhsaft-wrapper
  //background: #e9e9e9 url(/images/kuhsaft/wrapper-bg.png) repeat-x left 100px

.hidden
  display: none

.cms-header
  background: url(/images/kuhsaft/header-bg.jpg)
  border-bottom: 1px solid #7c7a7f
  +min-height(200px)

.page-tree-breadcrumb
  margin-bottom: 20px
  background: url(/images/kuhsaft/pages-breadcrumb-icon.png) no-repeat left 5px
  padding-left: 18px
  
  a
    background: url(/images/kuhsaft/page-tree-breadcrumb-arrow.png) no-repeat right center
    padding-right: 15px
    
  a:last-child
    background: transparent
    
.cms-module-nav
  +horizontal-list(0px)
  +float_right
  border:
    top: 1px solid #7c7a7f
    right: 1px solid #7c7a7f
  margin-top: -61px
  
  a
    background: $color1
    padding: 10px 15px
    line-height: 40px
    border-left: 1px solid #ccc
    +link-colors(#fff, #fff, #fff, #fff, #fff)
  
  li
    height: 40px
    
  li.current
    border-left: 1px solid #7c7a7f
    height: 41px
    a
      background: #cccccb url(/images/kuhsaft/module-nav-tab-bg.png) repeat-x
      border-left: 1px solid #e6e6e6
      +text-shadow(#efefef, 0px, 1px, 0px)
      +link-colors($color1, $color2, $color1, $color1, $color1)

.cms-content-container
  +single-box-shadow(#666, 0px, 2px, 8px)
  margin: 20px
  width: 960px

.language-tabs
  border:
    top: 1px solid #cfcfcf
    bottom: 1px solid #cfcfcf
  background: #e3e3e3 url(/images/kuhsaft/tab-bg.png) repeat-x
  height: 40px
  
  li
    width: 100px
    height: 40px
    text-align: center
    text-transform: uppercase
    font-weight: bold
    border:
      right: 1px solid #cfcfcf
    +float_left
    
  a
    display: block
    width: 99px
    height: 100%
    line-height: 40px
    border-right: 1px solid #f0f0f0
    +text-shadow(#fff, 0px, 1px, 0px)

  .current
    background: #f8f8f8
    height: 41px

.cms-content
  background: #f8f8f8
  padding: 35px

.box-container
  border:
    left: 1px solid $border-color
    right: 1px solid $border-color
    bottom: 1px solid $border-color

.box
  border-top: 1px solid $border-color
  padding: 15px 25px
  color: #7a7a7a

.lightened-box
  background: #f0f0f0
  +text-shadow(#fff, 0px, 1px, 0px)
  @extend .box
  
.darkened-box
  background: #d5d5d5
  +text-shadow(#efefef, 0px, 1px, 0px)
  @extend .box
  padding: 10px 25px
  
.colored-box
  background: $color3
  @extend .box

.draggable-box 
  position: relative

.draggable-box.colored-box
  background: $color3 url(/images/kuhsaft/page-part-draggable-area.png) no-repeat top right

h1
  font-size: 36px
  font-weight: bold
  line-height: 46px
  margin: 10px 0px 20px 0px
  color: $color1
  padding-left: 36px
  
  span
    color: #858592
  
.new-page
  background: url(/images/kuhsaft/page-new-icon.png) no-repeat left 3px
  
.edit-page
  background: url(/images/kuhsaft/page-edit-icon.png) no-repeat left 7px
  
a
  text-decoration: none
  +link-colors($color1, $color2, $color1, $color1, $color2)
  
.clear
  clear: both

.clearfix
  +clearfix

.list
  border-top: 1px solid #444
  li
    border-bottom: 1px solid #444
    
.publish-information
  input[type="radio"], label
    +float_left
    
.grid-3, .grid-5, .grid-2
  +float_left
  
.grid-3
  width: 180px
  
.grid-5
  width: 300px

.grid-2
  width: 120px
    
.page-part-helpers
  background: #e3e5c5
  padding: 3px 6px
  border: 
    top: 1px solid #d2d3b9
    left: 1px solid #d2d3b9
    right: 1px solid #fefff4
    bottom: 1px solid #fefff4
  +border-radius(3px)

.page-part-destroy
  font-size: 12px
  width: 180px
  padding-left: 15px
  +float_left
  
  input, label
    +float_left

.page-part-tags
  +float_left
  width: 626px
  
  input
    width: 612px
    
.dimmed
  background: #d5d5d5

=nested-branch($depth)
  $start-color: #f3f3f3
  $stop-color: #e3e3e3
  $calc-depth: $depth - 1
  $padded-depth: (20px * $depth)
  
  background: darken($stop-color, $calc-depth*12.5%)
  padding: 4px 4px 4px $padded-depth
  border-top: 1px solid darken(#fff, 3%+($calc-depth*10%))
  border-bottom: 1px solid darken($stop-color, 10% + ($calc-depth*10%))
  +linear-gradient(color-stops(darken($start-color, $calc-depth*12.5%), darken($stop-color, $calc-depth*12.5%)))
  +text-shadow(darken(#fff, $calc-depth*10%), 0px, 1px, 0px)

li
  .branch
    +nested-branch(1)

  li
    .branch
      +nested-branch(2)

    li
      .branch
        +nested-branch(3)

      li
        .branch
          +nested-branch(4)

.icon
  +float_right
  
.to-translate
  color: #666
  
ul.pages-root
  width: 560px
  border: 1px solid #b2b2b2
  border-bottom: 0px
    
.asset-pic
  width: 102px
  height: 160px
  overflow: hidden
  text-align: center
  font-size: 11px
  margin-right: 10px
  +float_left
  
  a 
    display: block
  
  input.string
    width: 96px
    margin-top: 3px
  
  .thumb
    border: 1px solid #ccc
    display: block
    height: 100px
    width: 100px
    
.fixed-width-image
  img
    max-width: 100%

.icon
  +hide-text
  +float_right
  display: block
  height: 22px
  padding: 0px 4px
  border:
    left: 1px solid #b2b2b2

.icon.add-child-page
  background: url(/images/kuhsaft/add-child-page.png) no-repeat center center
  width: 28px
  border-right: 0px

.icon.delete
  background: url(/images/kuhsaft/delete.png) no-repeat center center
  width: 22px
  border-left: 0px

.drag-handler
  width: 140px
  height: 60px
  position: absolute
  right: 0px
  top: 0px
  cursor: pointer

.destroy-handler  
  text-align: right
  width: 100px
  position: absolute
  right: 140px
  top: 0px
  padding-top: 10px
  
.will-drag
  border: 1px solid #666
  +single-box-shadow(rgba(0,0,0,0.2), 0px, 5px, 20px)
  
.container
  width: 960px