/* core/biscuits-table.css common table style */
table {
    border: 2px solid white;
}

th, .colhead, caption {
    font: bold 15px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #3D426B;
    /*
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    */
    letter-spacing: 2px;
    text-align: left;
    vertical-align: text-top;
    padding: 6px 6px 6px 12px;
}

th, .colhead {background: #adff99;}
caption ,th.caption {background: #800000; color: white;}

th.upper {text-transform: uppercase;}
th.nobg {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #C1DAD7;
    background: none;
}

th.spec {	
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #fff url(images/bullet1.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
        sans-serif;
}

th.specalt {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #f5fafa url(images/bullet2.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
        sans-serif;
    color: #B4AA9D;
}

td {padding: 5px; border: 1px; border-color: black; color: black;}
td.tdright {text-align: right;}
td.tdleft {text-align: left;}
td.tdcenter {text-align: center;}

table .grades {
    border: 2px solid green;
}

table .grades th, table .grades td {
    border: none;
} 

table.centered, table.center ,table.centre {
    margin-left:auto;margin-right:auto;
}

table.bingo {
    text-align: center;
    font-size: 1.0em;
    border: 2px solid #555555;
    left: 10px;
    margin: 20px;
    padding: 20px;
}

table.bingo th, td.label {background: #991100;color: #ff9922;}
table.bingo td {vertical-align: top;}
table.layout td, table.columns td {vertical-align: top;}
.w50 {width: 50%;}

table.full {
    width: 100%;
}

table.pretty {
    padding:15px 15px 15px 15px;
    margin:20px 20px 20px 20px;
    text-align: center;
    border: 1px solid #000000;
    left: 10px;margin: 0 20px;
}

table.pretty td {vertical-align: top;}

/* use grid class tables to have a border round each cell TD */
table.grid td {border: 1px solid #000000;padding:10px;}

/* Timetable and event */
table.timetable {
    text-align:center;
    font-size: 1.0em;
    background:#f5f5f5;
    border: 2px solid #555555;left: 10px;
    border-collapse: collapse; border-spacing: 0; margin: 20px;
}
table.timetable th, td.label {background: #eeeeee;color: #ff9922;}
table.timetable td {vertical-align: top;border: 2px solid #555555;
                    padding-top: 6px;padding-bottom: 10px;padding-left: 6px;padding-right: 6px;
}

.biscuits td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    padding: 6px 6px 6px 12px;
    color: #6D929B;
    font-size: 28px;
    line-height: 30px;
    margin: 5px;
}

table.array td {
    border: 1px solid #006600;    
}

td.alt {
    background: #F5FAFA;
    color: #B4AA9D;
}

/* Oct 2014 - LW copied this here from main CSS 
as the added style above overwrites the main TR style */

tr.selected {color: maroon;}
tr.odd td {background-color: #e0e0e0;}
tr.even td {background-color: #f5f5f5;}
tr.eyed td, .eyed {background-color: #1ecbe1;} /* PAGI Eyes popping out /*

/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    .responsive table, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { 
        display: block; 
    }

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

    .responsive tr { border: 1px solid #ccc; }

    .responsive td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    .responsive 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;
    }

    /*
    Forgeneric purposes we can not label the data directly but
    we can give a class to each TD pseudo columh header, which has now become the first
    table data element of each new row , after the table row collapse.
    These classes can then be used by JS to populate the actual column headings here. 
    */

    .responsive td:nth-of-type(1):before { content: "Col1"; }
    .responsive td:nth-of-type(2):before { content: "Col2"; }
    .responsive td:nth-of-type(3):before { content: "Col3"; }
    .responsive td:nth-of-type(4):before { content: "Col4"; }
    .responsive td:nth-of-type(5):before { content: "Col5"; }
    .responsive td:nth-of-type(6):before { content: "Col6"; }
    .responsive td:nth-of-type(7):before { content: "Col7"; }
    .responsive td:nth-of-type(8):before { content: "Col8"; }
    .responsive td:nth-of-type(9):before { content: "Col9"; }
    .responsive td:nth-of-type(10):before { content: "Col10"; }

}