/*HOW TO USE
    1. Add 'responsive' to your table's class
    2. For each td, add a value for the 'data-header' data attribute to be the name of the header in the collapsed table
    3. Wrap content inside td in vanilla div tags
    Note: thead will be removed upon collapse and reappear when enlarged 
    Example: Search.cshtml with table "search-table" and "main-table"
    -Jonah*/
@media (max-width: 480px) {

    /*use '!important' to override inline settings since collapsed styles have to take precedence*/
    table.responsive {
        font-size: 13px;
        width: 90vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    table.responsive {
        padding-left: 0;
    }

        table.responsive thead,
        table.responsive tbody,
        table.responsive th,
        table.responsive td,
        table.responsive tr {
            display: block;
            text-align: right;
        }
            /*RIP table headers*/
            table.responsive thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        table.responsive tr {
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        table.responsive td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            word-wrap: hyphenate;
            height: 45px;
        }

            table.responsive td div {
                margin-left: 30%;
                text-align: left;
            }

                /*sorry for making it so long*/
                table.responsive td div input {
                    font-size: 12px !important;
                }

            table.responsive td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 32%;
                padding-right: 10px;
                margin-left: 0;
                font: 13px;
                text-align: left;
                word-wrap: break-word;
            }

            table.responsive td:before {
                content: attr(data-header);
                height: 50px;
                font-weight: bold;
            }

            table.responsive td#links:before {
                content: none;
                height: 50px;
                font-weight: bold;
            }

            table.responsive td.small-padding {
                padding-top: 5px;
                padding-bottom: 5px;
            }

            table.responsive td.medium-padding {
                padding-top: 15px;
                padding-bottom: 15px;
            }

            table.responsive td.large-padding {
                padding-top: 25px;
                padding-bottom: 25px;
            }

            /*Specific to Search.cshtml */
            table.responsive td#links {
                text-align: center;
                word-spacing: 20px;
                font-size: 15px;
            }
}
/*Specific to Search.cshtml */
@media (min-width: 480px) {
    #direction {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #filter {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #sortByLabel {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #directionLabel {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #bSort {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
}