@import compass
@import 'colors'

ul#usersettings
  +border-radius
  padding: 0px
  height: 29px
  margin-top: 5px
  display: inline-block
  float: right
  background: rgba(0,0,0, 0.55)

  font-size: 90%
  font-weight: bold

  li
    list-style: none
    margin: 0px
    padding: 0px
    float: left
    a
      vertical-align: middle
      display: block
      padding: 7px 10px
      color: white
      text-decoration: none
      &:hover
        text-decoration: underline

#head
  background-color: #333
  .top-bar li > a
    font-size: 14px
    &:hover
      text-decoration: none

// Breabcrumbs
#topbar
  //height: 32px
  background: lighten(gray, 45%)
  vertical-align: middle
  box-shadow: 0 2px 3px rgba(0,0,0,0.3)
  border-bottom: none
  padding: 0px 30px

$headHeight: 50px
#head2
  color: #F7F7F7
  height: $headHeight
  img
    float: left
    max-height: $headHeight
    margin: 0px

  overflow: hidden
  .span6
    height: $headHeight

  h3.organisation
    font-weight: normal
    margin-top: ($headHeight/2 - 20px)
    display: inline-block
    margin-left: 10px

.bonsai-header
  background-color: darken(yellowGreen, 3%)
  +background-image(linear-gradient(lighten($green,  5%), yellowGreen) )
  +text-shadow(1px 1px 0 darken($green, 15%))

.red-header
  background-color: darken(red, 3%)
  +background-image(linear-gradient(lighten($red,  5%), red) )
  +text-shadow(1px 1px 0 darken($red, 15%))

.white-header
  color: $dark !important
  background-color: darken(white, 3%)
  +background-image(linear-gradient(darken(white,  5%), darken(white,  20%) 80%) )
  border-bottom: 1px solid $grayLight
  +text-shadow(1px 1px 0 darken(white, 15%))

$blueHeader: lighten($blue, 10%)
.blue-header
  background-color: $blueHeader
  +background-image(linear-gradient(lighten($blueHeader,  17%), $blueHeader) )
  +text-shadow(1px 1px 0 darken($blue, 15%))

.violet-header
  background-color: $violet
  +background-image(linear-gradient(lighten($violet,  10%), $violet) )
  +text-shadow(1px 1px 0 darken($violet, 15%))

.orange-header
  background-color: $orange
  +background-image(linear-gradient(lighten($orange,  10%), $orange) )
  +text-shadow(1px 1px 0 darken($orange, 15%))

$darkHeader: darken($dark, 10%)
.dark-header
  background-color: $darkHeader
  +background-image(linear-gradient(lighten($darkHeader, 15%), $darkHeader 70%) )
  +text-shadow(1px 1px 0 darken($darkHeader, 15%))
