@import compass
@import ./constants
html
  background-image: $wood
  background-color: $background-brown
body
  padding-left: $side-spacing
  padding-right: $side-spacing
  //background-image: image-url('textures/wood6.png')
  background-color: transparent
  .home-panel
    margin-left: 20px
    margin-right: 20px
    margin-top: 16px
    +box-shadow(#000 10px 10px 16px)
    background-color: rgba(240, 240, 240, 0.6)
    +border-radius(10px)
    .home-header
      padding-top: 14px
      padding-bottom: 8px
      text-align: center
      //background-color: #eee
      //+border-top-radius(10px)
      //+opacity(0.7)
      min-height: 100px
    .home-center
      padding: 10px
      text-align: center
      background-color: black
    .home-footer
      //background-color: #eee
      //+border-bottom-radius(10px)
      //+opacity(0.7)
      min-height: 42px
      .home-footer-content
        margin-top: 5px
        margin-left: auto
        margin-right: auto
        width: 262px
        text-align: center
        a
          +user-button
          float: none
          display: none
          width: 34px
          height: 34px
          &.active
            display: inline-block
          span
            display: block
            width: 28px
            height: 26px
            background-repeat: no-repeat
            background-position: center center
            margin: 4px auto auto auto
          &.home-list-link
            span
              background-image: image-url('icons/list.png')
          &.home-menu-link
            span
              background-image: image-url('icons/menu.png')
  //padding-top: 50px
  .navbar-fixed-top
    margin-left: -$side-spacing
    margin-right: -$side-spacing
    margin-bottom: 3px
  .page-header
    margin-top: 4px
    margin-bottom: 6px
    padding-bottom: 0
  .order-product-count
    width: 30px
    text-align: right
    margin-bottom: 0
  .order-count-cell
    white-space: nowrap
  .page-header
  #top-navigation-list
    .locale
      padding-left: 30px
      background-repeat: no-repeat
      background-position: 15px center
      &.locale-en
        background-image: image-url('flags/flag-en.png')
      &.locale-nl
        background-image: image-url('flags/flag-nl.png')
#list-needs-help-button
  button
    margin-left: 5px
  i
    padding-left: 5px
#list-needs-payment-button
  button
    margin-left: 5px
  i
    padding-left: 5px
.user-top-button
  +user-button 
  span
    display: block
    width: 28px
    height: 28px
    background-position: center center
    background-repeat: no-repeat
.top-button-bar
  +button-bar
  height: 90px
  .button-bar-content
    padding-top: 10px
    .supplier-name
      float: right
      margin-right: 8px
    .table-number
      float: right
    #show-active-list
      span
        background-image: image-url('icons/list.png')
    #place-order-on-list
      span
        background-image: image-url('icons/menu.png')
    #list-needs-payment-button
      span
        background-image: image-url('icons/needs-payment.png')
      &.active
        span
          background-image: image-url('icons/needs-payment-active.png')
    #list-needs-help-button
      span
        background-image: image-url('icons/needs-help.png')
      &.active
        span
          background-image: image-url('icons/needs-help-active.png')