header.top-menu
  height: 90px
  background-color: transparent
  background-repeat: no-repeat, no-repeat
  background-position: left bottom, right bottom
  background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
  color: $green
  padding-left: 48px
  padding-right: 52px
  .top-menu-logo
    @media #{$small-only}
      display: none
  .menu-content
    background-color: white
    background-repeat: repeat-x
    background-position: center bottom
    background-image: image-url('theme1/button-bar-middle.png')
    //min-height: 61px
    height: 100%
    section
      height: 52px
      line-height: 48px
      &.main-buttons
        float: left
        @media #{$medium-up}
          padding-left: 14px
      &.extra-info
        float: right
        .supplier-info-row
          float: right
          clear: right
          line-height: 27px
          padding-right: 7px
        .table-number
          display: inline-block
          //text-transform: lowercase
        .supplier-name
          display: inline-block
        .supplier-orders-placed-count
          display: inline-block
          margin-right: 15px
        .supplier-orders-in-process-count
          display: inline-block
  .menu-list-item
    margin-left: 20px
    cursor: pointer
    border: 0.08em solid #eee
    padding: 5px
    border-radius: 0.1em
    display: inline-block
    line-height: 1em
    margin-top: 10px
    color: #999
    &.active
      color: $current-color
      border-color: $current-color
      &.callout
        color: #f70
        border-color: #f70
    @media #{$medium-only}
      margin-left: 8px
    @media #{$small-only}
      margin-left: 5px
.orders-placed-count-icon
  @extend .fa
  @extend .fa-clock-o
  @extend .fa-lg
  margin-left: 3px
.orders-in-process-count-icon
  @extend .fa
  @extend .fa-check
  @extend .fa-lg
  margin-left: 3px