/*Header, Body, Scroller*/
/*common*/
.gridx {
	position: relative;
	overflow: hidden;
	border: 1px solid #ddd;
}

.gridxHeader,
.gridxFooter {
	overflow: hidden;
	background-color: #eee;
}

.gridxLoad {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
.gridxLoading {
	display: block;
	width: 100%;
	height: 100%;
	/*background: url('images/treeExpand_loading.gif') #ddd center center no-repeat;*/
	z-index: 999;
	/*opacity: 0.3;*/
}

/* Keep footer at bottom, so the grid won't distort too much when zoomed in/out*/
.gridxFooter {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

.gridxHScrollerInner {
	display: none;
}

.gridxMain {
	position: relative;
}

/*Header*/
.gridxHeaderRow {
	background-color: #eee;
	border-bottom: 1px solid #ccc;
	position: relative;
}

.gridxHeaderRowHidden {
	height: 0;
}

.gridxHeaderRowInner {
	overflow: hidden;
	border-style: solid;
	border-color: #ccc;
	border-width: 0 1px 0 0;
}
.dj_ie7 .gridxHeaderRowInner,
.dj_ie6 .gridxHeaderRowInner {
	position: relative;
}

.gridxHeaderRow table {
	border-collapse: separate;
	border-spacing: 0;
	border: none;
	table-layout: fixed;
	width: 1px;
}
.gridxGH .gridxHeaderRow table {
	width: auto;
}
.gridxPercentColumnWidth .gridxHeaderRow table,
.gridxPercentColumnWidth .gridxRow table.gridxRowTable {
	width: 100%;
}

.gridxGroupHeader,
.gridxHeaderRow .gridxCell {
	border-width: 1px;
	border-style: solid;
	border-color: transparent #ccc transparent transparent;
	padding: 3px;
	text-align: left;
	overflow: hidden;
}

.gridxHeaderRow :focus {
	outline: none;
}

/*Body*/
.gridxBody {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	box-sizing: border-box; /* css3 rec */
	-moz-box-sizing: border-box; /* ff2 */
	-ms-box-sizing: border-box; /* ie8 */
	-webkit-box-sizing: border-box; /* safari3 */
	-khtml-box-sizing: border-box; /* konqueror */
}

.gridxBodyRowHoverEffect .gridxRowOver .gridxRowTable {
	background-color: #cee8f2;
}

.gridxRow {
	background-color: #fff;
}

.gridxRowHeaderRow table,
.gridxRow .gridxRowTable {
	border-collapse: separate;
	border-spacing: 0;
	border: none;
	table-layout: fixed;
	/*width: 1px;*/
	empty-cells: show;
}
.dj_safari .gridxGH .gridxRow .gridxRowTable {
	width: auto;
}
.dj_safari .gridxPercentColumnWidth .gridxRow .gridxRowTable {
	width: 100%;
}

.gridxRow .gridxCell {
	border-style: solid;
	border-color: transparent #ccc #ccc transparent;
	border-width: 1px;
	padding: 3px;
	text-align: left;
	overflow: hidden;
}

.gridxCell.gridxCellChanged{
	//background: url('images/gridxCellChanged.png') no-repeat top right;
}

.gridxRowDummy {
	height: 24px;
	width: 100%;
	background: url('images/loadingAnimation.gif') no-repeat left;
}

.gridxBody .gridxCell:focus {
	outline: none;
}

.gridxBodyEmpty {
	width: 100%;
	height: 100px;
	padding: 30px 0;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}
.gridxBodyEmpty:focus {
	outline: 1px dotted #aaa;
}

/*HScroller*/
.gridxHScrollerInner {
	overflow: scroll;
	overflow-y: hidden;
	border: none;
	outline: none;
}

/* ie6 will show the wrong height */
.dj_ie6 .gridxHScrollerInner {
	line-height: 0;
}

.gridxMac .gridxHScrollerInner::-webkit-scrollbar {
	-webkit-appearance:none !important;
	height:11px !important;
}
.gridxMac .gridxHScrollerInner::-webkit-scrollbar-thumb {
	border-radius:8px !important;
	border:2px solid white !important;
	background-color:rgba(100,100,100,.5) !important;
}
.gridxMac .gridxHScrollerInner::-webkit-scrollbar-thumb:hover,
.gridxMac .gridxHScrollerInner::-webkit-scrollbar-thumb:active,
.gridxMac .gridxHScrollerInner::-webkit-scrollbar-thumb:focus {
	background-color: rgba(0,0,0,.5) !important;
}



/*VScroller*/
.gridxVScroller {
	position: absolute;
	top: 0px;
	right: 0px;
	overflow: scroll; 
	overflow-x: hidden; 
	border: none;
	height: 100%;
	outline: none;
}

.gridxMac .gridxVScroller::-webkit-scrollbar {
	-webkit-appearance:none !important;
	width:11px !important;
	background-color: #eee !important;
}
.gridxMac .gridxVScroller::-webkit-scrollbar-thumb {
	border-radius:8px !important;
	border:2px solid white !important;
	background-color:rgba(100,100,100,.5) !important;
}
.gridxMac .gridxVScroller::-webkit-scrollbar-thumb:hover,
.gridxMac .gridxVScroller::-webkit-scrollbar-thumb:active,
.gridxMac .gridxVScroller::-webkit-scrollbar-thumb:focus {
	background-color: rgba(0,0,0,.5) !important;
}


/*RowHeader*/
.gridxRowHeaderHeader,
.gridxRowHeaderBody {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	overflow: hidden;
	border-right: 1px solid #E5DAC8;
	box-sizing: border-box; /* css3 rec */
	-moz-box-sizing: border-box; /* ff2 */
	-ms-box-sizing: border-box; /* ie8 */
	-webkit-box-sizing: border-box; /* safari3 */
	-khtml-box-sizing: border-box; /* konqueror */	
}

.gridxRowHeaderBody table {
	width: 100%;
}
.gridxRowHeaderHeader table {
	height: 100%;
}

.gridxRowHeaderRow {
	background: url("images/header.png") #EDF2F7 repeat-x bottom;
	background: #edf2f7; /* Old browsers */
	background: -moz-linear-gradient(top,  #edf2f7 0%, #d0dfea 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf2f7), color-stop(100%,#d0dfea)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #edf2f7 0%,#d0dfea 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #edf2f7 0%,#d0dfea 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #edf2f7 0%,#d0dfea 100%); /* IE10+ */
	background: linear-gradient(top,  #edf2f7 0%,#d0dfea 100%); /* W3C */
	width: 100%;
	
}
	
.gridxRowHeaderCell {
	border-bottom: 1px solid #E5DAC8;
}

/* Firefox can not fire onmouseover when mouse is "dragging" an "overflow: hidden" node. 
 * This fix is for IndirectSelect working with ExtendedSelect only */
.dj_gecko .gridx .gridxRowHeaderBody .gridxRowHeaderRow .gridxRowHeaderCell .dijitCheckBox {
	overflow: visible;
}


/*Column Resizer*/
/*Column resizing plugin*/
.gridxColumnResizing {
	cursor: ew-resize;
}
.dj_ie .gridxColumnResizing {
	cursor: e-resize;
}

.gridxColumnResizer {
	position: absolute;
	height: 100%;
	width: 2px;
	background-color: #666;
	z-index: 1000;
	top: 0;
}

/*CellDijit*/
.gridxCellWidget {
	width: 100%;
	height: 100%;
}

.gridxCellEditor,
/* in IE dijitTextArea has width auto by default */
.dj_ie [class~='dijitTextArea'].gridxCellEditor {
	width: 100%;
}

[class~='dijitSliderV'].gridxCellEditor {
	width: auto;
}

/* TouchVScroller */
.gridxTouchVScroller .gridxVScroller {
	display: none;
}

.gridxTouchVScroller .gridxMain {
	overflow: hidden;
}
.gridxTouchVScroller .gridxBody {
	height: auto !important;
	width: auto !important;
}

.gridxTouchVScroller .gridxHeaderRowInner {
	position: relative;
}
.gridxTouchVScroller .gridxHeaderRowInner > table {
	position: absolute;
}

/* TouchScroll */
.gridxTouchScrollVWrapper {
    overflow: hidden;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 5px;
}

.gridxTouchScrollHWrapper {
    overflow: hidden;
    position: absolute;
	bottom: 2px;
	left: 2px;
	height: 5px;
}

.gridxTouchScrollVBar {
    background-color: #606060;
    opacity: 0;
    position: absolute;
    z-index: 999;
    width: 5px;
}

.gridxTouchScrollHBar {
    background-color: #606060;
    opacity: 0;
    position: absolute;
    z-index: 999;
	height: 5px;
}

.gridxTouchScrollVBar,
.gridxTouchScrollHBar {
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

/* CSS Hidden Column */
.gridxHiddenColumn {
	display: none;
}


/*Header Menu*/
.gridxHeaderMenu {
	width: 100px;
}
.gridxHeaderMenuBtn {
/*    float: right;*/
/*    top: 1px;*/
/*    bottom: 1px;*/
	width: 10px;
	height:13px;
	border-left: 1px solid #fff;
/*    display: none;*/
/*    cursor: pointer;*/
/*    background: transparent url(images/sprite_icons.png) no-repeat -97px 9px;*/
	background: transparent url(images/sprite_icons.png) no-repeat -98px 5px;
/*    margin-top:-4px;*/
/*    margin-bottom: -4px;*/
/*    margin-right: -3px;*/

}
.gridxHeaderMenuBtnInner {
	display: none;
}
.dijit_a11y .gridxHeaderMenuBtnInner {
	display: inline;
}

/*Header Menu End*/

.gridxLoadMore {
	padding: 10px;
	text-align: center;
}
.gridxLoadMore button {
	width: 100%;
	min-height: 28px;
}
.gridxLoadingMore {
	display: inline-block;
	background-image: url('images/treeExpand_loading.gif');
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin: 0 5px;
}

/* header region */
.gridxHeaderRegion {
	float: right;
	display: none;
	cursor: pointer;
}
.gridxCell:hover .gridxHeaderRegion,
.gridxHeaderRegionFocus .gridxHeaderRegion {
	display: block;
}
.gridxHeaderRegionFocus .gridxSortNode:focus,
.gridxHeaderRegionFocus .gridxHeaderRegion:focus {
	outline: 1px dashed darkblue;
}

.gridxCellEditedBg{
	background-image: url('images/gridxCellChanged.png');
	height: 6px;
	width: 6px;
	position:absolute;
	z-index:10;
	top: 0px;
	right: 0px;
}
.gridxCellEditedBg span{
	display: none;
}

.dijit_a11y .gridxCellEditedBg span{
	position: relative;
	display: block;
	left: -3px;
	color: white;
	font-size: 8px;
}