






.datatable table

        {

        width: auto;

        padding: 0;

        margin: 0 auto 1.5em auto;

        border-left: 1px solid #C1DAD7;

        border-collapse:collapse;

        }




.datatable th

        {

        font: bold 10px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

        color: #4f6b72;

        border-right: 1px solid #C1DAD7;

        border-bottom: 1px solid #C1DAD7;

        border-top: 1px solid #C1DAD7;

        letter-spacing: 1px;

        text-transform: uppercase;

        text-align: left;

        padding: 8px 12px 4px 12px;

        background: #CAE8EA url(../img/bg_header_sortable.jpg) no-repeat;

        vertical-align:middle;

        }

.datatable td.total

        {

        border-top: 0;

        border-left: 0;

        border-right: 1px solid #C1DAD7;

        background: none;

        text-align:right;

        font-weight:bold;

        text-transform:uppercase;

        letter-spacing:1px;

        }

.datatable th.sortable,

.datatable th.sortable-text,

.datatable th.sortable-date,

.datatable th.sortable-keep,

.datatable th.sortable-date-dmy,

.datatable th.sortable-numeric,

.datatable th.sortable-currency,

.datatable th.sortable-sortByTwelveHourTimestamp,

.datatable th.sortable-sortIPAddress,

.datatable th.sortable-sortEnglishLonghandDateFormat,

.datatable th.sortable-sortScientificNotation,

.datatable th.sortable-sortImage,

.datatable th.sortable-sortFileSize,

.datatable th.sortable-sortAlphaNumeric



        {

        cursor:pointer;

        background: #CAE8EA url(../img/bg_header_sortable.jpg) no-repeat;

        padding: 8px 12px 4px 16px;

        }

.datatable th.forwardSort

        {

        background:#CAE8EA url(../img/bg_header_down.jpg) no-repeat 0 0;

        }

.datatable th.reverseSort

        {

        background:#CAE8EA url(../img/bg_header_up.jpg) no-repeat 0 0;

        }

.datatable table thead th.forwardSort a,

.datatable table thead th.reverseSort a

        {

        color:#000;

        text-decoration:none;

        }

/*

These styles should be added when very long tables are expected

th.sort-active

        {

        background:#CAE8EA url(../img/bg_header_sorting.jpg) no-repeat 0 0;

        cursor:wait;

        }

th.sort-active a

        {

        color:#a80000 !important;

        cursor:wait;

        }

*/

.datatable th a

        {

        text-decoration:none;

        color: #4f6b72;

        background:transparent;

        }

.datatable td a

        {

        text-decoration:none;

        color:#239;

        background:transparent;

        }

.datatable td img

        {

        margin:0 auto;

        border:3px solid #ddd;

        }

.datatable td a:hover

        {

        color:#a84444;

        border-bottom:1px dotted #a80000;

        background:transparent;

        }

.datatable td

        {

        font: normal 11px  Verdana, Arial, Helvetica, sans-serif;

        border-right: 1px solid #C1DAD7;

        border-bottom: 1px solid #C1DAD7;

        padding: 6px 12px 6px 12px;

        color: #4f6b72;

        }

.datatable td.lft

        {

        text-align:left;

        }

.datatable tr.alt

        {

        background: #F5FAFA;

        color: #797268;

        }

/* Poor old Internet Explorer has a bug that means we can't use background images for the table rows

   as it trys to download the image each and every time that it is used (which means a 1000 row table

   will produce 1000 http requests for the image in question) */

.datatable tr[class="alt"] td

        {

        background: #F5FAFA url(../img/td_alt.jpg) no-repeat;

        }

.datatable td[class~="alt"]

        {

        background: #edf3f3 url(../img/col_alt.jpg) no-repeat !important;

        }

/* Poor old Internet Explorer won't see the next two rules either */

.datatable tbody tr.alt td:first-child

        {

        background: #F5FAFA url(../img/bullet2.gif) no-repeat;

        font-weight:bold;

        }

.datatable tbody tr td:first-child

        {

        background: #fff url(../img/bullet1.gif) no-repeat;

        font-weight:bold;

        }

/* Image free rules for Internet Explorer < 7 */

* html tr.alt td

        {

        background-color:#F5FAFA;

        }

* html tr td.alt,

* html tr.alt td.alt

        {

        background-color:#edf3f3;

        }
