@import "_mixins/all"

$left-width: 250px

@mixin display-flex
  display: -webkit-flex
  display: flex

@mixin flex($grow, $shrink, $size)
  -webkit-flex: $grow $shrink $size
  flex:         $grow $shrink $size

html, body
  height: 100%

.application
  width: 100%
  min-height: 100%
  margin-top: 40px
  display: -webkit-box
  @include display-flex
  display: -moz-box

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

#left, #right
  position: relative
  min-height: 100%
  -moz-box-flex: 0
  -webkit-box-flex: 0

#left
  @include flex(1, 1, 30%)
  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 flex(1, 1, 70%)
  -moz-box-flex: 4
  -webkit-box-flex: 4
  position: relative
  min-width: 630px
  padding: 20px 40px 80px 30px

#right
  @include flex(1, 1, 0)
  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

@media screen and (max-width: 1310px)
  table#builds .committer
    display: none