/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
.mobile-header {
    display: none;
}

.odd, .even {
    background-color: unset;
}

tr:hover td {
    background-color: #f0f4ff;
}

@media only screen and (max-width: 800px),
(min-device-width: 800px) and (max-device-width: 1224px) {

    body {
        font-size: x-large;
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
        font-size: x-large;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc;
    }

    /*td:before {*/
    /*!* Now like a table header *!*/
    /*position: absolute;*/
    /*!* Top/left values mimic padding *!*/
    /*top: 6px;*/
    /*left: 6px;*/
    /*width: 45%;*/
    /*padding-right: 10px;*/
    /*white-space: nowrap;*/
    /*}*/
    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 35% !important;
        /*left: 50%;*/
    }

    .mobile-header {
        display: block;
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Label the data
    */
    /*td:nth-of-type(1):before { content: "First Name"; }*/
    /*td:nth-of-type(2):before { content: "Last Name"; }*/
    /*td:nth-of-type(3):before { content: "Job Title"; }*/
    /*td:nth-of-type(4):before { content: "Favorite Color"; }*/
    /*td:nth-of-type(5):before { content: "Wars of Trek?"; }*/
    /*td:nth-of-type(6):before { content: "Porn Name"; }*/
    /*td:nth-of-type(7):before { content: "Date of Birth"; }*/
    /*td:nth-of-type(8):before { content: "Dream Vacation City"; }*/
    /*td:nth-of-type(9):before { content: "GPA"; }*/
    /*td:nth-of-type(10):before { content: "Arbitrary Data"; }*/
}