<?xml version="1.0" encoding="UTF-8"?>
<f:template
    xmlns:f="http://jsf.exadel.com/template"
    xmlns:u="http://jsf.exadel.com/template/util"
    xmlns="http://www.w3.org/1999/xhtml">

	<f:verbatim>
	
		.dr-sdt-sort-asc, .dr-sdt-sort-desc {
			width: 16px;
			height: 6px;
			background-position: 50% 50%;
			background-repeat: no-repeat;
		}
		
		.dr-sdt-sort-icon {
			position:absolute;
			visibility: hidden;
		}
		
		.dr-sdt {
			padding: 0px 0px;
			margin: 0px;
			z-index:0;
			border-style: solid;
		}
		
		/**
		 * ---------------------------------------------
		 *	Grid Header declaration
		 * ---------------------------------------------
		 */
		
		/**
		 * Header row
		 */
		.dr-sdt-hr {
		}
			
		/**
		 * Header cell
		 */
		.dr-sdt-hc {
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
			font-weight: normal;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-moz-outline: none;
			-moz-user-focus: normal;
			border-right-style: solid;
		}
		
		.dr-sdt-hc .sort-asc, .dr-sdt-hc .sort-desc {
			background-position: right;
			background-repeat: no-repeat;
			width: 16px !important;;
			position: absolute;
		}
		
		
		/**
		 * Header cells separator
		 */
		.dr-sdt-hsep {
		/*	background-image: url(grid-split.gif);*/
			background-position: center;
			background-repeat: repeat-y;
			cursor: e-resize;	
			font-size: 20px;
			top: 0px;
			width: 6px;
			height: 100%;
			position: absolute;
			display: block;
			z-index: 60;
		}
		.dr-sdt-hsplit {
			width:1px;
			border-right: 1px dashed;
			cursor: col-resize;
			z-index: 100;
		}
		
		.dr-sdt-fb{
			z-index: 50;
		}
		.dr-sdt-nb {
			z-index: 20;
		}
		
		/**
		 * ---------------------------------------------
		 * Grid Footer declaration
		 * ---------------------------------------------
		 */
		 
		/**
		 * Footer row
		 */
		.dr-sdt-fr {
			border-top: 1px solid #cbc7b8; /* //TODO Which skin parameter must be here? */
		}
		
		/**
		 * Footer cell
		 */
		.dr-sdt-fc {
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;	
			font-weight: normal;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-moz-outline: none;
			-moz-user-focus: normal;
			border-right: 1px solid;
		}
				
		/**
		 * ---------------------------------------------
		 * Body styles
		 * ---------------------------------------------
		 */
		 
		/**
		 * Body cell declaration
		 * dr-sdt-bc - reqired
		 * dr-sdt-bcDef - default, used if no custom styles defined in body template
		 */
		.dr-sdt-bc {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-moz-outline: none;
			-moz-user-focus: normal;
			border-right: 1px solid;
			border-bottom: 1px solid;
		}
		
		/**
		 * Body row style
		 */
		.dr-sdt-ho {
			position: absolute;
			height: 10px;
			width: 10px;
		}
		
		.dr-sdt-rb {
			font-weight: normal;
			white-space: nowrap;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
		/*
		.dr-sdt-row-active {
			font-weight:bold; //TODO Which skin parameter must be here? 
		}
		*/
		.dr-sdt-cbody {
			white-space: nowrap;	
			overflow: hidden;
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
			-moz-box-sizing: border-box;
			-moz-outline: none;	
			height: 20px;
		}
		
		/** 
		 * Helper classes for grid template
		*/
		.dr-sdt-substrate {
			z-index: 48;
		 	filter:Alpha(opacity=0);
		 	position:absolute;
		 	top:0px;
		 	left:0px;
		 	display:block;
		}
		
		.dr-sdt-tmplbox {
		 	display: block;
		    float:left;
		    position: absolute;
		}
		
		.dr-sdt-inlinebox {
		 	position: relative;
			display: block;
			overflow: hidden;	
		}
		
		
	</f:verbatim>
	
	<u:selector name=".dr-sdt">
	    <u:style name="background-color" skin="tableBackgroundColor" />
	    <u:style name="border-color" skin="tableBorderColor" />
	    <u:style name="border-width" skin="tableBorderWidth" />
	</u:selector>
	<u:selector name=".dr-sdt-hr">
	    <u:style name="background-color" skin="headerBackgroundColor" />
	</u:selector>
	<u:selector name=".dr-sdt-hc">
	    <u:style name="color" skin="headerTextColor" />
	    <u:style name="font-family" skin="generalFamilyFont" />
	    <u:style name="font-size" skin="generalSizeFont" />
	    <u:style name="border-bottom-width" skin="tableBorderWidth" />
	    <u:style name="border-bottom-color" skin="tableBorderColor" />
	    <u:style name="border-right-width" skin="tableBorderWidth" />
	    <u:style name="border-right-color" skin="tableBorderColor" />
	</u:selector>
	<u:selector name=".dr-sdt-hsplit">
	    <u:style name="border-right-color" skin="tipBorderColor" />
	</u:selector>
	<u:selector name=".dr-sdt-fr">
	    <u:style name="background-color" skin="tableSubfooterBackgroundColor" />
	</u:selector>
	<u:selector name=".dr-sdt-fc">
	    <u:style name="border-right-color" skin="tableBorderColor" />
	</u:selector>
	<u:selector name=".dr-sdt-bc">
	    <u:style name="border-right-color" skin="tableBorderColor" />
	    <u:style name="border-bottom-color" skin="tableBorderColor" />
	</u:selector>
	<u:selector name=".dr-sdt-row-selected">
	    <u:style name="background-color" skin="additionalBackgroundColor" />
	</u:selector>
	<u:selector name=".dr-sdt-row-active">
	    <u:style name="color" skin="tabDisabledTextColor" />
	</u:selector>
	<u:selector name=".dr-sdt-cbody">
	    <u:style name="font-family" skin="generalFamilyFont" />
	    <u:style name="font-size" skin="generalSizeFont" />
	</u:selector>
	<u:selector name=".dr-sdt-sort-asc">
		<u:style name="background-image">
			<f:resource f:key="org.richfaces.renderkit.html.iconimages.DataTableIconSortAsc"/>
		</u:style>
	</u:selector>
	<u:selector name=".dr-sdt-sort-desc">
		<u:style name="background-image">
			<f:resource f:key="org.richfaces.renderkit.html.iconimages.DataTableIconSortDesc"/>
		</u:style>
	</u:selector>
	<u:selector name=".dr-sdt-hsep">
		<u:style name="background-image">
			<f:resource f:key="org.richfaces.renderkit.html.iconimages.ScrollableDataTableIconSplit"/>
		</u:style>
	</u:selector>
</f:template>
