/*! Tablesaw - v3.0.0-beta.1 - 2016-09-19
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2016 Filament Group; Licensed MIT */

table.tablesaw {
    empty-cells: show;
    max-width: 100%;
    width: 100%;
}

.tablesaw {
    border-collapse: collapse;
    width: 100%;
}

/* Structure */

.tablesaw {
    border: 0;
    padding: 0;
}

.tablesaw th,
.tablesaw td {
    /*box-sizing: border-box;
    padding: .5em .7em;*/
}

.tablesaw thead tr:first-child th {
    padding-top: .9em;
    padding-bottom: .7em;
}

/* Table rows have a gray bottom stroke by default */

.tablesaw-stack tbody tr {
    border-bottom: 1px solid #dfdfdf;
}

.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
    display: none;
}

/* Mobile first styles: Begin with the stacked presentation at narrow widths */

@media only all {
    /* Show the table cells as a block level element */
    .tablesaw-stack td,
    .tablesaw-stack th {
        text-align: left;
        display: block;
    }

    .tablesaw-stack tr {
        clear: both;
        display: table-row;
    }

    /* Make the label elements a percentage width */
    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: block;
        padding: 0 .5em 0 .5em;
        width: 30%;
        float: left;
    }

    /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
    .tablesaw-stack th .tablesaw-cell-label-top,
    .tablesaw-stack td .tablesaw-cell-label-top {
        display: block;
        padding: .4em 0;
        margin: .4em 0;
    }

    .tablesaw-cell-label {
        display: block;
    }

    /* Avoid double strokes when stacked */
    .tablesaw-stack tbody th.group {
        margin-top: -1px;
    }

    /* Avoid double strokes when stacked */
    .tablesaw-stack th.group b.tablesaw-cell-label {
        display: none !important;
    }
}

@media (max-width: 800px) {
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        font-size: 10px;
    }
}

@media (max-width: 599px) {
    .tablesaw-stack tbody tr:nth-child(odd) {
        background: rgba(0, 0, 0, 0.063)
    }

    .tablesaw-stack tbody tr:nth-child(odd) {
        background: rgba(0, 0, 0, 0.063)
    }

    .tablesaw-stack tbody tr:nth-child(even) {
        background: rgba(0, 0, 0, 0.13)
    }

    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: none;
    }

    .tablesaw-stack tbody td,
    .tablesaw-stack tbody th {
        border: none;
        clear: left;
        float: left;
        width: 98% !important;
        text-align: left !important;
    }

    .tablesaw-cell-label {
        vertical-align: top;
    }

    .tablesaw-cell-content {
        width: 65%;
        display: block;
        float: left;
    }

    .tablesaw-cell-content div,
    table td .audio-formatter-field-wrapper{
        text-align: left;
    }

    .tablesaw-stack td:empty,
    .tablesaw-stack th:empty {
        display: none;
    }

    .views-field-field-thai .tablesaw-cell-content p,
    .quiz-results-table .thai-lesson-word a {
        font-size: 300%;
        margin: 0;
    }

    .views-field-field-basic-media-field .tablesaw-cell-content audio,
    .quiz-results-table .tablesaw-cell-content audio {
        width: 90%;
    }

    .tablesaw-stack td.views-field-field-basic-media-field {
        padding-top: 10px !important;
    }

    table.tablesaw-stack .learn-button-container.clock-exists .learn-button {
        margin-left: 0;
        margin-right: 0;
    }

    table.tablesaw-stack.quiz-results-table tbody tr {
        border-bottom: 2px solid #FFF;
    }
}

/* Media query to show as a standard table at 560px (35em x 16px) or wider */

@media (min-width: 600px) {
    .tablesaw-stack tr {
        display: table-row;
    }

    /* Show the table header rows */
    .tablesaw-stack td,
    .tablesaw-stack th,
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: table-cell;
        margin: 0;
    }

    /* Hide the labels in each cell */
    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: none !important;
    }
}