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

/* Responsive Table Reset */
[data-table] {
    font-size: 12pt;
    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: 100%;
    }
}

@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: 1em 0;
        color: #333;
        border-collapse: collapse;
    }

        $this thead th,
        $this tfoot th {
            color: #777;
            /*background: rgba(0,0,0,.1);*/
        }

        $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,.03);*/
        }
}

/* 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: .5em 0;
        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: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: #777;
        /*background: rgba(0,0,0,.1);*/
        font-weight: 600;
        width: 100%;
    }
}