@import "elements/variables";

@import "elements/barometre";
@import "elements/introduction";

@import "elements/editorial-content";
@import "elements/other-articles";
@import "elements/newsletter";

/*BAROMETRE DES TPE*/
.barometre{
  table{
    display: block;
    @media(max-width: @screen-xs-max){
      thead, tbody, th, td, tr {display: block;}
    }
    a{color: @black33;}
    th{background-color: @greyf0;
      @media(min-width: 768px){border: 1px solid @greydd;}
    }
    tr{
      border: 1px solid #ccc;
      @media(min-width: 768px){
        display: table-row;
        &:nth-child(2n+2) td{background-color: @greyf0;border-color: @greydd}
      }
      th, td{
        text-align: center;vertical-align: middle;
        @media(max-width: @screen-xs-max){
          &:nth-child(2n+2){background-color: @greyf0;}
        }
      }
      th{text-transform: uppercase;}
      td{
        border: none;border-bottom: 1px solid #eee;position: relative;padding-left: 51%;white-space: normal;text-align:left;
        &.text-center{text-align: center}
        @media(min-width: 768px){padding-left: 8px;position: inherit;border: 1px solid @greydd;
        }
        &:before {position: absolute;top: 6px;left: 6px;width: 45%;padding-right: 10px;white-space: nowrap;text-align:left;font-family: 'open_sansbold';content: attr(data-title);
          @media(min-width: 768px){content: ''}
        }
      }
      &:hover{
        td{cursor: default;background-color: @greycc;}
      }
    }
    thead{
      @media(min-width: 768px){display: table-header-group;}
      tr {position: absolute;top: -9999px;left: -9999px;
        @media(min-width: 768px){position: relative;left: 0;top: 0;}
      }
    }
    @media(min-width: 768px){
      tbody{display: table-row-group;}
    }
  }
}

.other-articles ul {
  @media (min-width: @screen-sm) {
    .content-columns(2; @grid-gutter-width);
  }
}