/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	height: 485px;
	overflow: auto;
}

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

.table-scroller{
	position: absolute;
	top: 21px;
	right: 40px;
}
.table-scroller span{
	display: block;
	margin: 5px 0; 
}

.table-scroller span.up,
.table-scroller span.down {
	position: relative;
	background: transparent;
	cursor: pointer;
}
.table-scroller span.up:after, .table-scroller span.up:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	margin-bottom: 5px;
	/*pointer-events: none;*/
}

.table-scroller span.up:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #FFFFFF;
	border-width: 5px;
	margin-left: -5px;
}
.table-scroller span.up:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #666666;
	border-width: 7px;
	margin-left: -7px;
}

.table-scroller span.down:after, .table-scroller span.down:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	/*pointer-events: none;*/
}

.table-scroller span.down:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #FFFFFF;
	border-width: 5px;
	margin-left: -5px;
}
.table-scroller span.down:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #666666;
	border-width: 7px;
	margin-left: -7px;
}
.table-scroller span.down:hover:before{ border-top-color: #e11c1c; }
.table-scroller span.up:hover:before{ border-bottom-color: #e11c1c; }

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
}

/* 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 */
thead.fixedHeader tr {
	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 */
html>body thead.fixedHeader tr {
	display: table;
	width: 100%;
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	color: #FFF;
	display: block;
	text-decoration: none;
	width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	color: #FFF;
	display: block;
	text-decoration: underline;
	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                     */
html>body tbody.scrollContent {
	display: block;
	height: 447px;
	overflow: auto;
	width: 100%
}

html>body tbody.scrollContent tr{
	display: table;
	width: 100%;
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */


html>body thead.fixedHeader th {
	width: 20%;
	font-weight: bold;
	font-size: 12px;
	padding: 13px 0;
	text-align: center;
	border-bottom: 2px solid #DDD;
}
tbody.scrollContent td{
	width: 20%;
	font-size: 12px;
	padding: 10px 0;
	border: none;
	border-top: 2px solid #DDD;
}

thead.fixedHeader th.first,
html>body tbody.scrollContent td.first{
	text-align: left;
	padding-left: 10px;
	font-weight: bold;
	
}