header.top-menu
  // Fixed styling rules copied from foundation top-menu fixed
  width: 100%
  #{$default-float}: 0
  position: fixed
  top: 0
  z-index: 99

  background-image: image-url('theme1/wall-bg.jpg')
  height: $top-menu-height
  .top-menu-bar
    color: $green
    height: $top-menu-height
    background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
    background-color: transparent
    background-repeat: no-repeat, no-repeat
    background-position: left bottom, right bottom
    padding-left: 48px
    padding-right: 52px
  .top-menu-logo
    &.with-list
      @media #{$small-only}
        display: none
    &.without-list
      margin-left: 6px
    img
      margin-top: -6px
  .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: 44px
      line-height: 40px
      &.main-buttons
        float: left
        font-size: 1.2em
        @media #{$medium-up}
          padding-left: 14px
  .extra-info
    position: absolute
    top: 0
    right: 0
    color: white
    .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: 6px
    color: #999
    &.active
      color: $current-color
      border-color: $current-color
      &.callout
        color: $active-color
        border-color: $active-color
    @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