.go-to-orders-list
  display: inline-block
  margin-right: 7px
  span
    @extend .fa-lg
.section-title
  font-size: 24px
  padding: 4px 0px
.section-manage-tables
  margin: -40px 6px 4px 6px
  min-width: 470px
  text-align: right
  .section-edit-title-field
    display: inline-block
    width: 120px
  .section-edit-width-field
    display: inline-block
    width: 52px
  .section-edit-height-field
    display: inline-block
    width: 52px
  #section-action-list
    text-align: left
.section-tables-container
  $section-border: 1px solid black
  border-left: $section-border
  border-right: $section-border
  border-bottom: $section-border
  border: $section-border
  position: relative
  padding: 0
  height: 400px
  &.editing
    background-color: rgba(240, 138, 36, 0.5)
  .section-element-container, .section-area-container
    cursor: pointer
  //background-image: image-url('textures/wood4.jpg')
  //background-color: rgba(0,0,0,0.4)
  .section-table
    position: absolute
    cursor: pointer
    background-color: #ccc
    //TODO remove width and height for ember control
    height: 60px
    width: 60px
    background-repeat: no-repeat
    box-shadow: 2px 2px 4px #888888
    color: black
    border-radius: 3px
    display: table
    .status-icons
      // float: right
      // width: 16px
      position: absolute
      margin-top: -18px
      right: 0
      min-width: 60px
      .needs_help, .needs_payment, .occupied, .active_order
        display: none
        float: right
        @extend .fa
      .needs_help
        @extend .fa-bell
      .needs_payment
        @extend .fa-money
      .active_order
        @extend .fa-coffee
    &.occupied
      background-color: #ffa
    &.needs_help
      background-color: #7f7
      .status-icons .needs_help
        display: inline-block
    &.needs_payment
      // background-image: image-url('icons/needs-payment.png')
      // background-position: 40px 2px
      .status-icons .needs_payment
        display: inline-block
    &.active_order
      .active_order
        display: block
      .status-icons .active_order
        display: inline-block
      //background-color: #f77
    &.right-half
      .table-actions
        right: 100%
        left: initial
    a
      color: black
      &:hover
        text-decoration: none
    //background-image: image-url('icons/section-table.png')
    .table-link
      margin-top: -45px
    .table-number
      color: black
      //position: absolute
      display: table-cell
      //top: 0
      //line-height: 44px
      width: 100%
      height: 100%
      font-size: 30px
      text-align: center
      vertical-align: middle

    .action-button-container
      margin-right: -20px
    .table-actions
      display: none
      position: absolute
      z-index: 247
      left: 100%
      top: 0
      width: 140px
      text-align: center
      background-color: white
      border: 1px solid #aaa
      padding-bottom: 10px
      .title
        background-color: #aaa
      .table-action-row
        margin-top: 10px
        &.total
          font-size: 1.2em
          font-weight: bold
      .order-display
        &.active
          .post-display
            margin-left: 10px
            @extend .fa
            @extend .fa-check
    .table-settings
      width: 200px
      height: 30px
      position: absolute
      top: -30px
      select
        width: 92px
  //&.section-tables-active

  //&.section-tables-manage
    .section-table
      cursor: move
  //&.section-tables-inactive
    .section-table
      position: relative
      margin-top: 10px
      margin-bottom: 30px
      float: left
      margin-right: 30px
// INDEX

table
  td
    &.table-info
      .table-count
        &:after
          content: " - "
.go-to-tables-view.hide
  display: inline-block

ul#table-actions-list
  list-style: none
  margin: 0