@import "_mixins/all"

$left-width: 250px

html, body
  min-height: 100%

.application
  width: 100%
  overflow: hidden

// ouch. ember injects additional divs that somehow don't inherit the actual dimensions
.application, .application > div
  width: 100%
  min-height: 100%

.application > div
  overflow-x: auto

#top
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 40px
  z-index: 1000

#page
  position: relative
  @include display-box
  @include box-orient(horizontal)
  @include box-align(stretch)
  width: 100%
  min-height: 100%
  margin-top: 40px

#left, #right
  @include box-flex(0)
  position: relative
  min-height: 100%

#left
  min-width: 250px
  max-width: 380px
  width: -webkit-calc(100% - 1000px)
  padding: 0 0 110px 0
  background-color: $color-bg-left
  border-right: 1px solid $color-border-normal
  @include box-shadow(transparent 0 0 0 0, $color-border-normal 0 1px 8px 0, transparent 0 0 0 0, transparent 0 0 0 0)

@media screen and (max-width: 980px)
  #left
    max-width: 300px

#main
  @include box-flex(4)
  position: relative
  overflow: hidden
  min-width: 630px
  padding: 20px 40px 80px 30px

#right
  width: 205px
  padding: 11px 20px 80px 20px
  background-color: $color-bg-right
  border-left: 1px solid $color-border-normal

@media screen and (max-width: 1400px)
  #left .duration_label
    display: inline-block
    width: 11px
    height: 14px
    margin-right: 1px
    text-indent: -200px
    overflow: hidden
    background: inline-image('ui/clock.png') no-repeat 0px 3px

@media screen and (max-width: 1310px)
  #left .finished_at_label
    display: none