/* ------------------------------------------------------------- */
/* tables (tables.less)                                          */
/* ------------------------------------------------------------- */

//----------------------------------------------------------------------------
//
//  tables
//
//----------------------------------------------------------------------------
//  description: for all kind of tables in #content
//
//  contents:
//  - TABLE
//  - CELLS (TD & TH)
//    - Data format
//    - Headings (within TD & TH)
//    - Links (within TD & TH)
//    - Images within cells
//    - Description & labels within cells
//    - TD
//    - TH
//    - TR (Table row)
//  - thead
//  - tbody
//  - tfoot
//  - caption
//  - headings (print style)
//  - colgroup & cols
//    - dimensions for table colums (col)
//  - table list
//  - table plain
//  - table horizontal
//  - table dialog
//  - table class test
//  - dimensions (classes) for tables
//  - links
//  - headings
//  - subtotals
//
//  - tables in requirement specs
//  - tables with divs
//  - list with paragraphs
//----------------------------------------------------------------------------



// ----------------------------------------------------------------------------
//
// TABLE
//
// ----------------------------------------------------------------------------
//
table {
  //font-size: @font-size-base ;
  table-layout: auto ;
  border-spacing: 1px ;


  //--------------------------------------
  //  CELLS (TD & TH)
  //--------------------------------------
  td,
  th {
    text-align: left ;
    vertical-align: top ;
    //font-size: @font-size-smaller ;
    font-weight: normal ;


    // -----------------------
    //  Data Format
    // -----------------------
    &.right             { text-align:      right  !important ; }
    &.center            { text-align:      center !important ;
      input             { float:           none   !important ; }
    }
    &.numeric           { text-align:      right  !important ; }
    &.numeric-centered  { text-align:      center !important ; }
    &.date              { text-align:      right  !important ; }
    // PENDENT: wo eingesetzt
    &.button            { text-align:      center !important ; }
    &.img               { text-align:      center !important ; }
    &.top               { vertical-align:  top    !important ; }
    // see also div.longdesc in main.css
    // PENDENT: mixin und variablen erstellen
    &.long-desc,
    &.long-description,
    &.longdesc,
    &.longdescription,
    div.description {
      font-size: 80% ;
      color: @t-cell-label-text ;
    }
    &.highlight { background-color: @t-row-zebra-bg-highlight ; }
    div.numeric           { text-align:      right  !important ; }

    // -----------------------
    //  Headings (within TD & TH)
    // -----------------------
    // PENDENT: ueberpruefen
    h3,
    h4 {
      margin: 0 !important ;
      padding: 0.8em 0 0.2em 0 !important ;
    }

    // -----------------------
    //  Links (within TD & TH)
    // -----------------------
    &> a { display: block ; }

    // -----------------------
    //  Images Within Cells
    // -----------------------
    img {
      display:        inline ;
      vertical-align: top    ;
    }
    &+a img,
    &+img { float:    left   ; }
    &~a img,
    &~img { float:    right  ; }

    img.row-icon {
      cursor: pointer;
      display: block;
      max-width: 16px;
      max-height: 16px;
    }

    // -----------------------
    //  Description & Labels Within Cells
    // -----------------------
    div.description {
      float:     none ;
      clear:     both ;
    }
    & > input,
    & > select {
      & + div.description { margin-top: 0.4em ; }
    }

    span {
      // simulates th in horizontal tables
      &.label {
        display:              block ;
        padding:              0 0 0.5em 0 ;
        color:                @t-cell-th-text-color ;
      }
      &.below {
        //clear: both ;
        overflow:             hidden ;
        display:              block ;
        input {
          margin:             0.6em 0 0 0 !important ;
          &[type="checkbox"]{ padding: 0.6em 0.6em 0 0 ;}
        }
      }
      &.above {
        //clear: both ;
        overflow: hidden ;
        display: block ;
        margin-bottom: 0.4em ;
        padding: 0.3em 0.3em 0 0 !important ;
      }
    }

    // -----------------------
    //  Form Element Within Cells
    // -----------------------

    // if a .below class follows directly after a td/th
    & + input.below {
      margin: 0 !important;
    }

    input,
    select {
      //float: left ;
      &.below {
        display: block ;
        clear: left ;
        float: none ;
        overflow: hidden ;
        // PENDENT: anschauen! vor allem button customer information -> Lieferadresse
        margin: 0.3em 0 0 0 ;
      }
    }

    textarea {
      margin: -0.14em -0.0em ;
    }

  }
  //  /th, td


  //--------------------------------------
  //  TH (TABLE HEADER CELLS)
  //--------------------------------------
  th {
    white-space: normal !important ;
    // Header text vertically centered
    &.vmiddle {
      vertical-align: middle;
    }
  }

  //--------------------------------------
  //  TD (TABLE DATA)
  //--------------------------------------
  td {
    color: @t-cell-text-color;
  }


  //--------------------------------------
  //  TR (TABLE ROW)
  //--------------------------------------
  tr {
    //  if header-cell is in the same row as a caption-header-cell (th.caption)
    &.header-caption th {
      vertical-align: bottom ;
    }
    &.separator {
      // standard separator is below
      th, td {
        padding-bottom: 3.0em ;
      }
      &.below {
        th, td {
          padding-bottom: 3.0em ;
        }
      }
      &.above {
        th, td {
          padding-top   : 3.0em ;
          padding-bottom: 0   ; // override .separator
        }
      }
    }

    // -----------------------
    //  SUB-TOTALS
    // -----------------------
    //  PENDENT: ggf. obsolete
    &.total-sub {
      height: 2.0em ;

      td {
        border-top: 1px solid @table-border-color ;
        border-bottom: 2px solid @table-border-color ;
        font-weight: bold ;
        color: @t-cell-text-color ;
      }
    }
    td.listsubtotal {
      height: 2.0em ;
      border-top: 1px solid @table-border-color ;
      border-bottom: 2px solid @table-border-color ;
      font-weight: bold ;
      color: @t-cell-text-color ;
    }
    td.listtotal {
      height: 2.0em ;
      border-top: 1px solid @table-border-color ;
      border-bottom: 2px solid @table-border-color ;
      font-weight: bold ;
      color: @t-cell-text-color ;
    }

    // -----------------------
    //  HEADINGS (alternativ version [print style])
    // -----------------------
    // PENDENT: ueberpruefen
    &.heading th {
      font-size: 120% ;
      border-top: 1px @table-border-color solid ;
    }


  } // /tr



  //--------------------------------------
  //  CAPTION
  //--------------------------------------

  //  this must be placed here
  //  otherwise th.caption will be overridden if placed above
  caption,
  th.caption {
    .mx-h3-caption ; //   mixin
    white-space:       nowrap ;
    //  addition with smaller font-size
    small { font-size : @font-size-small ; }
  }



  //--------------------------------------
  //  THEAD
  //--------------------------------------
  thead {
    th {
      .mx-thead-th ; //  mixin

      a {
        img {
          vertical-align: middle ;
          padding: 0 ;
          margin: 0 ;
        }
      }
    }
  }


  //--------------------------------------
  //  TBODY
  //--------------------------------------

  tbody {
    tr {
      //  common cells within tbody
      td {  }
      th {  }
    }
  }


  //--------------------------------------
  //  TFOOT
  //--------------------------------------
  tfoot {
    tr {
      th,
      td {
        vertical-align: middle ;
        border-bottom: @table-border-color 2px solid ;
        height: 1.8em ;
        padding-top: 0.6em !important;
        padding-bottom: 0.6em !important;
      }
      td {
        font-weight: bold ;
        color: @t-cell-foot-text ;
      }
      th {
        font-weight: normal ;
        color: @t-cell-foot-text ;
       }
      //  if more than one row in tfoot first row has other properties
      &:first {
        td,
        th { border-top: @table-border-color 2px solid ; }
      }
      // sometimes last row of a table with some links or buttons under a designated row
      &.blank {
          border: none !important ;
        th,
        td {
          border: none !important ;
        }
      }
    } //  /tr
    // this is just for expecption (eg. form in price-rules)
    // tfoot.blank
    &.blank {
      tr {
          border: none !important ;
          &:first-child {
            th, td { border-top: 1px solid @table-border-color !important ; }
          }
        th,
        td {
          border: none !important ;
        }
      }
    } // /tfoot.blank
  } //  /tfoot



  //--------------------------------------
  //  COLGROUP & COLS
  //--------------------------------------

  colgroup {

    //  table columns
    //  only for background-color and width
    //  PENDENT: funktioniert text-ausrichtung?
    col {
      &.right     { text-align: right  ; }
      &.center    { text-align: center ; }
      &.long-desc { font-size:  70%    ; }

      // -----------------------
      //  width of columns (dimensions)
      // -----------------------
      &.wi-smallest    { width: (@tcol-wi-smallest    ) ; }
      &.wi-verysmall   { width: (@tcol-wi-verysmall   ) ; }
      &.wi-small       { width: (@tcol-wi-small       ) ; }
      &.wi-mediumsmall { width: (@tcol-wi-mediumsmall ) ; }
      &.wi-normal      { width: (@tcol-wi-normal      ) ; }
      &.wi-lightwide   { width: (@tcol-wi-lightwide   ) ; }
      &.wi-wide        { width: (@tcol-wi-wide        ) ; }
      &.wi-wider       { width: (@tcol-wi-wider       ) ; }
      &.wi-verywide    { width: (@tcol-wi-verywide    ) ; }
    }


  }




  //--------------------------------------
  //  STANDARD KIVITENDO TABLES
  //--------------------------------------

  &.tbl-horizontal,
  &.tbl-plain,
  &.tbl-list,
  &.tbl-list-plain {
    margin-bottom: 0.6em ;
    border-collapse: collapse ;
    border: none ;

    tr td {
      &>span {
        //padding: 0.3em 0.3em 0.6em 0.3em ;
        padding: 0.3em 0.3em 0.6em 0 ;
      }
    }
  }





  //--------------------------------------
  //  TABLE HORIZONTAL
  //--------------------------------------

  &.tbl-horizontal {

    th,
    td {
      background: none ;
      padding-top: 0.3em ;
      padding-right: 0.2em ;
      padding-bottom: 0.2em ;
      padding-left: 0.3em ;

      // adjust form elements in this table type
      &>input[type="checkbox"],
      &>input[type="radio"] {
        margin: 0 0.3em 0.2em 0 !important ;
      }
      &>input,
      &>select {
        margin: -0.3em 1px 0 0 ;
        // if there are further form elements within a table cell separated with a linebreak br
        &.addition { margin-top: 0.3em !important ; }
      }

      // in some cases labels can be placed within the same cell as the form element
      // best is to have it above the element
      // PENDENT: plazierung in less-dateien, ggf. ueberfluessig
      .label-above {
        display: block ;
        clear: both ;
        overflow: hidden ;
        margin-top: -0.5em ; // pendent: ansehen
        //height: 1.8em ; // pendent: besser loesen, gefaellt mir nicht
      }
      &.single-col {
        padding-top: 0 ;
        padding-bottom: 0 ;
      }

      // form labels within table cells
      //label {
        //color: @t-cell-th-text-color ;
        //cursor: pointer ;
        //padding-top: 0.3em;
      //}

    } // /td /th

    th {
      color: @t-cell-th-text-color ;
      //vertical-align: top ;
      h4{
        margin: 0 ;
        padding: 0 ;
      }
    } // /th

    td {
      // 2nd to x column with plain data
      // no form elements inside the cell
      //color: @t-cell-data-text;
      &.data {
        //padding: 0.4363em 0.3em 0.4363em @padding-databoxes-left ;
      }

      & > span {
        padding: 0 ;
        margin:  0 ;
        &.wi-smallest    { width: (@input-wi-smallest    ) ; }
        &.wi-verysmall   { width: (@input-wi-verysmall   ) ; }
        &.wi-small       { width: (@input-wi-small       ) ; }
        &.wi-mediumsmall { width: (@input-wi-mediumsmall ) ; }
        &.wi-normal      { width: (@input-wi-normal      ) ; }
        &.wi-lightwide   { width: (@input-wi-lightwide   ) ; }
        &.wi-wide        { width: (@input-wi-wide        ) ; }
        &.wi-wider       { width: (@input-wi-wider       ) !important ; }
        &.wi-verywide    { width: (@input-wi-verywide    ) ; }

        &.data,
        &.plain-data {
          //padding:        0.1em 0.3em 0.1em @padding-databoxes-left ;
          margin-top:    -0.2em ;
          display:        block ;
        }
        &.label {
          color:          @t-cell-th-text-color ;
          padding:        0 0.3em 0.5em 0 !important ;
          //display:        block ;
        }
        &.button-inline {
          margin:         0 !important ;
          padding:        0.3em 0 0 0 ;
          clear:          both ;
          display:        inline-block ;
          vertical-align: middle ;

          input.button,
          input[type="button"],
          button,
          a.button {
            float:        left ;
            margin:       0 0.3em 0 0 !important ;
          }
        }

        // special select-element
        &.customer_vendor_picker {
          padding:         0 !important ;
          margin:          0 !important ;
          display:        inline-block ;
        }
        &.project_picker {
          margin:        -0.3em 0 0 0 ;
        }
        // area input element
        &.area-input {
          padding:        0 !important ;
          margin:        -0.3em 1px 0 0 !important ;
        }
      } // / > span

      &>div.data { padding: 0.1363em 0 ; }
      // pendent: braucht es das?
      // pendent: span nicht td
      .plus1 {
        display: inline-block ;
        padding: 0 ;
      }
      & > .condensed {
        padding: 0 !important ;
        margin: 0 ;
        input, select {
          margin-top: 0.2em ;
        }
      }

      &>span.wi-small-wide { margin: 0 24px 0 0 ; display: block ; }
    }

    // exception: thead in horizontal table
    // Caption!
    thead th {
//      padding: 0.5em 0.4em 0.5em 0.3em ;
//      font-weight: normal ;
//      font-size: @h3-size ;
//      color: @base-heading-color ;
      .mx-h3-caption ;
      border: none ;
    }


    // zebra effect
    // pendent: klasse .zebra hier wahrscheinlich kaum eingsetzt
    &.zebra {
      tbody {
        tr:nth-child(odd){
          background-color: @t-row-zebra-bg-odd ;
          th { background-color: @t-row-zebra-bg-odd  ; }
        }
        tr:nth-child(even){
          background-color: @t-row-zebra-bg-even ;
          th { background-color: @t-row-zebra-bg-even ; }
        }
      }
    } // /.zebra

    // checkered (bordered) table
    &.checkered {
      border-collapse: collapse ;
      tbody {
        tr {
          background-color: @table-bg-accent ;
          //th { background-color: #fff ; }
          td, th {
            border-color:   @table-border-color ;
            border-width:   1px ;
            border-style:   solid ;
            padding:         0.3em 0.6em ;
          }
        }
      } // /tbody
    } // /.checkered

    //PENDENT: ueberpruefen
    &.expanded {
      th.caption { padding-top: 1.2em ; padding-bottom: 0.6em ; }
    }

  } // /.tbl-horizontal





  //--------------------------------------
  //  LIST TABLES
  //--------------------------------------

  &.tbl-plain,
  &.tbl-list,
  &.tbl-list-plain {
    tbody td a {
      display: inline-block !important ;
    }
  }





  //--------------------------------------
  //  TABLE LIST (VERTICAL)
  //--------------------------------------
  //  table with zebra effect
  //  this table has at least a thead and a tbody
  //  optional a tfoot for totals
  &.tbl-list {
    border-spacing:       1px ;
    border-collapse:      collapse ;
    margin:               0 0 1.0em 0 ;

    & > caption { margin: 0.1em 0 0.0em 0 ; }
    td,
    th {
      padding:            0.2em 0.4em ;
      white-space:        normal ;
      vertical-align:     middle ;
    }
    th {  }
    td {  }

    // space left from window border
    & > thead > tr th:first-child,
    & > tbody > tr th:first-child,
    & > tfoot > tr td:first-child {
        padding-left:     0.8em !important ;
    }

    thead {
      display: table-header-group;

      tr {
        height:  2.2em ;
        th {
          .mx-thead-th ; // mixin
          &.nowrap { white-space: nowrap !important ; }

          & > a {
            display: block ;
            &:link,
            &:visited {
              color:              @t-cell-head-text-accent ;
              text-decoration:    underline ;
            }
            &:hover {
              color:              @t-cell-head-text-accent ;
              text-decoration:    underline ;
            }
            &:active,
            &:focus {
              color:              @t-cell-head-text-accent ;
              text-decoration:    underline ;
            }
          } // /a
          label {
              color:              @t-cell-head-text-accent ;
              //text-decoration:  none ;
              &:hover {
                //color:          @t-cell-head-text-accent ;
                text-decoration:  underline ;
              }
          }
        } // /th
      } // tr
      &.links-condensed {
        tr th a { display: inline ; }
      }
    } // /thead

    tbody {
      border-bottom:        @table-border-color 1px solid ;
      display:              table-row-group;

      // zebra effect
      tr:nth-child(odd)                  { background-color:   @t-row-zebra-bg-odd      ; }
      tr:nth-child(even)                 { background-color:   @t-row-zebra-bg-even     ; }

      tr:nth-child(odd).listrow_ok       { background-color:   @base-ok-bg              ; }
      tr:nth-child(even).listrow_ok      { background-color:   @base-ok-bg-lighter      ; }

      tr:nth-child(odd).listrow_error    { background-color:   @base-error-bg           ; }
      tr:nth-child(even).listrow_error   { background-color:   @base-error-bg-lighter   ; }

      // using a darker color variant here because the light one is almost invisible
      tr:nth-child(odd).listrow_info     { background-color:   @base-info-bg-darker     ; }
      tr:nth-child(even).listrow_info    { background-color:   @base-info-bg-dark       ; }

      tr:nth-child(odd).listrow_warning  { background-color:   @base-warning-bg         ; }
      tr:nth-child(even).listrow_warning { background-color:   @base-warning-bg-lighter ; }

      // pendent: funktioniert nicht
      & > tr:last-child > td {
        border-bottom:      1px @table-border-color solid !important ;
        //padding-left:     0.8em !important;
      }
      tr:hover {            background-color:   @t-row-zebra-bg-hover ; }

      // zebra effect using manually set classes (overrides automatic from above)
      tr.listrow0         { background-color:   @t-row-zebra-bg-odd      !important ; }
      tr.listrow1         { background-color:   @t-row-zebra-bg-even     !important ; }
      tr.listrow_ok0      { background-color:   @base-ok-bg              !important ; }
      tr.listrow_ok1      { background-color:   @base-ok-bg-lighter      !important ; }
      tr.listrow_error0   { background-color:   @base-error-bg           !important ; }
      tr.listrow_error1   { background-color:   @base-error-bg-lighter   !important ; }
      // using a darker color variant here because the light one is almost invisible
      tr.listrow_info0    { background-color:   @base-info-bg-darker     !important ; }
      tr.listrow_info1    { background-color:   @base-info-bg-dark       !important ; }
      tr.listrow_warning0 { background-color:   @base-warning-bg         !important ; }
      tr.listrow_warning1 { background-color:   @base-warning-bg-lighter !important ; }

      td, th {
        color:              @table-list-zebra-text-color ;
      }
    } // /tbody

    tfoot {
      display: table-footer-group;

      tr {
        th,
        td { }
      }
    } // /tfoot

  } // /.tbl-list





  //--------------------------------------
  //  TABLE PLAIN
  //--------------------------------------
  //  simple table without zebra effect

  &.tbl-list-plain,
  &.tbl-plain {
    caption,
    th.caption {
      font-size:  120% !important ;
      margin:     0;
      padding:    0.6em 0 0.2em 0;
    }

    thead,
    tbody {
      th,
      td { padding: 3px 0.3em 4px 0.3em !important ; }
    }
    thead {
      th {
        .mx-thead-th ; // mixin
      }
    }

    tr {
      th,
      td { padding: 0.3em inherit 0.3em 0.3em ; }
      td { }
      th { }
    }
    // kompakt
    &.condensed {
      caption { padding-left: 0 ; }
      td, th {
        padding: 0.1em 7px 0.1em 1px ;
      }
    }
    // liniert
    &.lined {
      tr {
        border-bottom: 1px @table-border-color solid ;
        & > th,
        & > th {
          vertical-align: middle !important ;
        }
      }
    }

  } // /.tbl-plain


  &.tbl-list-plain {
    thead th {
      border-top:    1px @table-border-color solid !important ;
      border-bottom: 1px @table-border-color solid ;
      font-weight:   bold ;
    }
    tbody {
      td,
      th { border-bottom: 1px @table-border-color solid ; }
    }
  }// /.tbl-list-plain





  //--------------------------------------
  //  TABLE DIALOG
  //--------------------------------------

  //  table within div-dialogs
  &.tbl-dialog {
    th,
    td {
      background-color: @gray-verylight ;
    }
    th {
      color: @t-cell-head-text ;
      font-size: @font-size-base ;
      vertical-align: top ;
    }
  }


  //--------------------------------------
  //  CLEAR-TABLE WITH NO FLOATING
  //--------------------------------------
  &.clear {
    float: none ;
    clear: both ;
  }



  //--------------------------------------
  //  TABLE CLASS TEST
  //--------------------------------------
  //  use this class for reviewing your table html

  &.test,
  &.test-plain {

    th {
      background-color: #b3b3b3 ;
      color: @t-cell-text-color ;
      font-weight: normal ;

      &.caption {
        background-color: #b3b3b3 ;
      }
    }
    td {
      background-color: #cfcdd2 ;

      &.longdesc,
      &.longdescription,
      &.long-desc,
      &.long-description {
        border: 1px solid green !important ;
      }
    }

    table {
      border: 1px #0000ff solid ;
      border-collapse: collapse ;

      td, th {
        border: 1px #c20d18 dotted !important ;
      }
    }

  } // /.test

  &.test {
    //border: 1px @table-border-color solid ;
    //background-color: #bfd2ad ;

    th {
      border: 1px @gray-dark solid !important ;
      background-color: #b3b3b3 ;
      color: #000 ;
      font-weight: normal ;

      &.caption {
        background-color: @table-caption-bg ;
        //border: 1px solid red !important ;
      }
    }
    td {
      border: 1px #000 solid ;
      background-color: #cfcdd2 ;

      &.longdesc,
      &.longdescription,
      &.long-desc,
      &.long-description {
        border: 1px solid green !important ;
      }
    }

    table {
      border: 2px #0000ff solid ;
      border-collapse: collapse ;

      td, th {
        border: 1px #c20d18 dotted !important ;
      }
    }

  } // /.test


}
//  /table



//--------------------------------------
// TABLE & COLS DIMENSIONS
//--------------------------------------

table,
table colgroup col {

  &.wi-smallest    { width: @tcol-wi-smallest     ; }
  &.wi-verysmall   { width: @tcol-wi-verysmall    ; }
  &.wi-small       { width: @tcol-wi-small        ; }
  &.wi-mediumsmall { width: @tcol-wi-mediumsmall  ; }
  &.wi-normal      { width: @tcol-wi-normal       ; }
  &.wi-lightwide   { width: @tcol-wi-lightwide    ; }
  &.wi-wide        { width: @tcol-wi-wide         ; }
  &.wi-wider       { width: @tcol-wi-wider        ; }
  &.wi-verywide    { width: @tcol-wi-verywide     ; }

  &.wi-small-small           { width: @tcol-wi-small + @tcol-wi-small ; }
  &.wi-small-mediumsmall     { width: @tcol-wi-small + @tcol-wi-mediumsmall ; }
  &.wi-small-normal          { width: @tcol-wi-small + @tcol-wi-normal ; }
  &.wi-small-lightwide       { width: @tcol-wi-small + @tcol-wi-lightwide ; }
  // pendent: noch genauer anschauen, sollte eigentlich nur für horizontale tabellen vorgesehen sein
  &.wi-small-wide            { width: @tcol-wi-small + @tcol-wi-wide + ( @diff-input-select )  ; }
  //&.wi-small-wide            { width: 460px ; }
  &.wi-small-wider           { width: @tcol-wi-small + @tcol-wi-wider ; }
  &.wi-small-verywide        { width: @tcol-wi-small + @tcol-wi-verywide ; }

  &.wi-mediumsmall-small       { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
  &.wi-mediumsmall-mediumsmall { width: @tcol-wi-mediumsmall + @tcol-wi-mediumsmall ; }
  &.wi-mediumsmall-normal      { width: @tcol-wi-mediumsmall + @tcol-wi-normal ; }
  &.wi-mediumsmall-lightwide   { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
  &.wi-mediumsmall-wide        { width: @tcol-wi-mediumsmall + @tcol-wi-wide ; }
  &.wi-mediumsmall-wider       { width: @tcol-wi-mediumsmall + @tcol-wi-wider ; }
  &.wi-mediumsmall-verywide    { width: @tcol-wi-mediumsmall + @tcol-wi-verywide ; }

  &.wi-normal-small       { width: @tcol-wi-normal + @tcol-wi-small ; }
  &.wi-normal-mediumsmall { width: @tcol-wi-normal + @tcol-wi-mediumsmall ; }
  &.wi-normal-normal      { width: @tcol-wi-normal + @tcol-wi-normal ; }
  &.wi-normal-lightwide   { width: @tcol-wi-normal + @tcol-wi-lightwide ; }
  &.wi-normal-wide        { width: @tcol-wi-normal + @tcol-wi-wide ; }
  &.wi-normal-wider       { width: @tcol-wi-normal + @tcol-wi-wider ; }
  &.wi-normal-verywide    { width: @tcol-wi-normal + @tcol-wi-verywide ; }

  &.wi-lightwide-small       { width: @tcol-wi-lightwide + @tcol-wi-small ; }
  &.wi-lightwide-mediumsmall { width: @tcol-wi-lightwide + @tcol-wi-mediumsmall ; }
  &.wi-lightwide-normal      { width: @tcol-wi-lightwide + @tcol-wi-normal ; }
  &.wi-lightwide-lightwide   { width: @tcol-wi-lightwide + @tcol-wi-lightwide ; }
  &.wi-lightwide-wide        { width: @tcol-wi-lightwide + @tcol-wi-wide ; }
  &.wi-lightwide-wider       { width: @tcol-wi-lightwide + @tcol-wi-wider ; }
  &.wi-lightwide-verywide    { width: @tcol-wi-lightwide + @tcol-wi-verywide ; }

}

table {
  &.width-full,
  &.full-width,
  &.wi-full { width: 100% ; }

  //  moderate width with padding on the right side
  &.width-moderate,
  &.moderate-width,
  &.wi-moderate {
    width: auto ;
    td,
    th {
      // PENDENT: vielleicht in pixeln angeben, statt in ems (siehe tbl-plain)
      padding-left: 0.6em ;
      padding-right: 1.2em ;
    }
  }
}



//--------------------------------------
//  LIST-TABLES IN WRAPPERS
//--------------------------------------
// creates a border on the left & right side of the table
div.wrapper,
div.cols {
  table.tbl-list tr {
    border-left: 1px solid @table-border-color ;
    border-right: 1px solid @table-border-color ;
  }
}

//--------------------------------------
//  LIST-TABLES NOT IN WRAPPERS
//--------------------------------------
#content .ui-tabs-panel > table.tbl-list caption {
  //margin-left: @margin-from-panel-left - 0.2em ;
  margin-left: 0.3em ;
}
#content {
  .ui-tabs-panel > table.tbl-list caption {
    //margin-left: @margin-from-panel-left - 0.2em ;
    margin-left: 0.3em ;
  }

  & > table.tbl-plain,
  & > table.tbl-list-plain {
    margin-top: 1.0em ;
  }
}


// --------------------------------------
// SORT SYMBOLS
// --------------------------------------

span.sort {
  display: inline-block ;
  height: 100% ;
  vertical-align: top;
  padding-top: 6px;
}
span.sort_symbol {
  display: inline-block ;
  width: 10px ;
  padding: 0 ;
  margin: 0 10px 0 0 ;
  a {
    display: block ;
    width: 8px ;
    height: 8px ;
    font-size: 7pt ;
    padding: 0 0 3px 0 ;
    margin: 0 ;
    text-align: center ;
    clear: both ;
    float: none ;
    vertical-align: top ;
    &.ascending {
      border-top:    1px @table-border-color solid ;
      border-right:  1px @table-border-color solid ;
      border-left:   1px @table-border-color solid ;
    }
    &.descending {
      border-right:  1px @table-border-color solid ;
      border-bottom: 1px @table-border-color solid ;
      border-left:   1px @table-border-color solid ;
    }
    &.active {
       //background-color: #000000 ;
       color: #ffffff ;
    }
    &:link,
    &:visited{
      color: @base-light ;
    }
  }
}





//--------------------------------------
// SPECIFIX TABLES (#REPORT_TABLE)
//--------------------------------------
// Ueberpruefen
table#report_table_id.tbl-list {
  & > tbody > tr > td { vertical-align: top ; }
}



//  Benutzerdefinierte Tabellen-Angaben
//  Diese uebersteuern alle Anweisungen aus tables.less
//  Es dürfen nur Tabellen mit Zusatzklassen oder mit IDs uebersteuert werden.
//  Uebersteuern Sie nur wenige, bestehende Elemente, um ein einheitliches
//  Design zu gewaehrleisten
//  Diese Datei wird am Schluss von tables.less includiert.

table{

    //  Zusatzklasse zur Tabelle (Beispiel)
    //  Betreff: xyz
    //  Autor: hanspeter.schlaepfer@revamp-it.ch
    &.meine-tabellen-klasse {

    }

    //  Tabelle mit spezieller ID (Beispiel)
    //  Betreff: xyz
    //  Autor: hanspeter.schlaepfer@revamp-it.ch
    &#meine-spezielle-tabelle {

    }


    //  Tabelle mit Konten-Uebersicht (Kontoplan)
    //  Betreff: Kontoplan
    //  Autor: hanspeter.schlaepfer@revamp-it.ch
    &#konten-plan {
        tbody tr{
            td:first-child {
                text-align: right !important;
            }
            &.heading td {
                font-size: @font-size-large;
                border-top: 1px #999 solid;
            }
        }
        tr:first-child {
             &.heading td {
                border: none;
            }
        }
    }


// PENDENT: genauer anschauen

  &#eurtable {
    border-collapse: collapse;
    width: 100%;
  }

  tr.category {
    //  background set via jquery
  }

  tr.chart {
    border: 0;
  }

  td.chartname {
    padding-left: 50px;
  }

  tr.chartrow {
    font-size: 75%;
  }

  .guv_row_background {
    background:#f0f0f0;
  }

  .tr_error {
    background-color: #ffc9c9;
  }


}