/* EQCSS Required - http://elementqueries.com for info */

/* Responsive Table Reset */
[data-table] {
    font-size: 10.5pt;
    width: 100%;
}
@element [data-table] and (max-width: 500px) {
$this,
$this caption,
$this thead,
$this tbody,
$this tfoot,
$this tr,
$this th,
$this td {
     display: block;
     width: 97%;
 }
}
@element [data-table] and (min-width: 500px) {
$this { display: table; width: 100%; }
$this caption { display: table-caption; width: auto; }
$this thead { display: table-header-group; width: auto; }
$this tbody { display: table-row-group; width: auto; }
$this tfoot { display: table-footer-group; width: auto; }
$this tr { display: table-row; width: auto; }
$this th,
$this td { display: table-cell; width: auto; }
}

/* Default Table Theme */
@element [data-table] {
$this {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0em 0;
    color: #333;
    border-collapse: collapse;
    padding: 2em .5em 1em;
}
$this thead th,
$this tfoot th {
     color: #fff;
     background: #0484c2;
    white-space: nowrap;
 }
$this caption {
     padding: .5em;
 }
$this th,
$this td {
     padding: .5em;
     background: white;
     border: 1px solid #aaa;
 }
$this tbody tr:nth-of-type(even) {
     background: rgba(0,0,0,.05);
 }
}

/* Grid Table Layout */
@element [data-table^=col-] and (max-width: 500px) {
$this thead {
    display: none;
}
$this tr:after {
     content: '';
     display: block;
     clear: both;
 }
$this[data-table$=-one] td { width: 100%; }
$this[data-table$=-two] td { width: 50%; }
$this[data-table$=-three] td { width: 33.33%; }
$this[data-table$=-four] td { width: 25%; }
$this[data-table$=-five] td {width: 20%; }
$this[data-table$=-six] td { width: 16.66%; }
$this td {
     float: left;
     line-height: 1.4;
     padding: .75em;
     text-align: center;
     position: relative;
 }
$this td:nth-of-type(n+2) {
     padding-bottom: 17.5pt;
 }
$this td:after {
     content: attr(data-heading);
     display: block;
     width: 100%;
     position: absolute;
     bottom: 5pt;
     left: 0;
     font-size: 10pt;
     line-height: 1.2;
     color: #999;
 }
$this td.wrap-text {
     white-space: normal;
 }
$this td:first-of-type:after {
     display: none;
 }
$this td:nth-of-type(n+2) {
     border-top: none;
 }
$this[data-table$=-two] td:nth-of-type(n+2):nth-of-type(odd),
$this[data-table$=-three] td:nth-of-type(n+2):nth-of-type(3n),
$this[data-table$=-three] td:nth-of-type(n+2):nth-of-type(3n+1),
$this[data-table$=-four] td:nth-of-type(n+2),
$this[data-table$=-five] td:nth-of-type(n+2),
$this[data-table$=-six] td:nth-of-type(n+2) {
     border-left-color: transparent;
 }
$this[data-table$=-four] td:nth-of-type(4n+2),
$this[data-table$=-five] td:nth-of-type(5n+2),
$this[data-table$=-six] td:nth-of-type(6n+2) {
     border-left-color: #aaa;
 }
$this td:first-of-type {
     color: #fff;
     background: #0484c2;
     font-weight: 400;
     width: 100%;
    text-align: center;
 }
}