* {
    margin: 0;
    padding: 0;
}

body {
    font: 14px/1.4 Arial, Serif;
}

#page-wrap {
    margin: 50px;
}

p {
    margin: 20px 0;
}

/* 
Generic Styling, for Desktops/Laptops 
*/
table {
    width: 100%;
    border-collapse: collapse;
}



/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 425px;
	overflow: auto;
	width: 100%
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 100%
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	width: 100%
}
/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
.scrollTable {
	display: block;
	height: 200px;
	overflow: auto;
	width: 100%
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
.fixedHeader tr, th {
    /* position: relative */
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
.fixedHeader tr  {
    /* display: block */

}

/* Zebra striping */
.scrollTable tr:nth-of-type(odd) {
    background: #eee;
}

.scrollTable th {
    background: #333;
    color: white;
    font-weight: bold;
    cursor: s-resize;
    background-repeat: no-repeat;
    background-position: 3% center;
}

.scrollTable td,th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}

.scrollTable th.des:after {
    content: "\21E9";
}

.scrollTable th.aes:after {
    content: "\21E7";
}

/* 
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 */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

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

    tr {
        border: 1px solid #ccc;
    }

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

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

    /*
Label the data
*/
    td:before {
        content: attr(data-th) ": ";
        font-weight: bold;
        width: 6.5em;
        display: inline-block;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 320px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 495px;
    }
}