
.centered
  .row
    max-width: 1024px
  .main
    margin: auto
    max-width: 1024px
    padding-left: 0 !important
    padding-right: 0 !important
    padding-top: 30px !important
    overflow-y: auto

.main,
.profile-view
  position: relative
  width: 100%
  min-height: 100vh

#auth, #not-found, #simple
  #top
    top: 0

#not-found #main
  padding: 100px 50px 0 50px

#left, #right, .wrapper-main
  position: relative

#left
  padding: 0 0 110px 0
  background-color: $white
  border-right: 2px solid #f2f2f2

.duration_label
  display: inline-block
  height: 11px
  line-height: 13px
  text-indent: 14px
  margin-right: 1px
  overflow: hidden
  background: inline-image('ui/clock.svg') no-repeat 0px 0px
  background-size: contain

#main
  position: relative
  padding: 1.8em $column-gutter/2 5em

.wrapper
  overflow: hidden
.wrapper.non-centered
  #main,
  #left
    margin-bottom: -99999px
    padding-bottom: 100034px


@media #{$large-up}

  #left, #right, .wrapper-main
    min-height: 100vh

  #left
    width: grid-calc(6, 24)
    float: left
    margin-left: -100%
    max-width: 325px

  .non-centered .wrapper-main
    width: grid-calc(18, 24)
    float: left
    margin-left: grid-calc(6, 24)
    overflow: visible

  .centered .wrapper-main
    max-width: 1024px
    margin-left: auto
    margin-right: auto

@media #{$xlarge-up}
  #left
    width: grid-calc(7, 36)
  .non-centered .wrapper-main
    width: grid-calc(29, 36)
    margin-left: grid-calc(7, 36)

@media #{$xxlarge-up}
  #left
    width: grid-calc(6, 36)
  .non-centered .wrapper-main
    width: grid-calc(30, 36)
    margin-left: grid-calc(6, 36)

@media screen and (min-width: 2200px)
  #left
    width: grid-calc(5, 36)
  .non-centered .wrapper-main
    width: grid-calc(31, 36)
    margin-left: grid-calc(5, 36)


.travis-lint
  background-color: $travis-lint-bg
  width: 100%
  color: $travis-lint-color
  margin: 10px 0 36px 0
  p
    padding: 10px
    font-weight: bold
    margin: 0
  a
    margin-left: 5px

