/* ==================================================================== */
/* SCROLLING DATA GRID -                                                */
/* ==================================================================== */
/* 
Tables inside a scrollingdatagrid should have:
 1. border-collapse:separate
 2. No border or margin
 3. Background colors on all cells to avoid bleed-thru on scroll
 4. cellspacing="0" on the <table> tag itself
*/
DIV.scrollingdatagrid {
  overflow-x:auto;
  overflow-y:auto;
  position:relative;
  padding:0px;
}
DIV.scrollingdatagrid TABLE {
  width : 98.7%; /* Make room for scroll bar! */
  margin:0px;
  border:0px;
  border-collapse:separate;
}
DIV.scrollingdatagrid TABLE TR .locked, 
DIV.scrollingdatagrid TABLE THEAD TR, 
DIV.scrollingdatagrid TABLE TFOOT TR {
  position:relative;
}
/* OffsetParent of the TR is the DIV because it is position:relative */
DIV.scrollingdatagrid TABLE THEAD TR {
  top:expression(this.offsetParent.scrollTop);
}
/* OffsetParent of the THEAD and TFOOT locked column is the TR because it is position:relative */
DIV.scrollingdatagrid THEAD .locked, DIV.scrollingdatagrid TFOOT .locked {
  left:expression(this.offsetParent.offsetParent.scrollLeft);
}
DIV.scrollingdatagrid TBODY .locked {
  left:expression(this.offsetParent.scrollLeft);
}
/* The TFOOT should stick to the bottom of the DIV */
DIV.scrollingdatagrid TABLE TFOOT TR {
  top:expression(0 - this.offsetParent.scrollHeight + this.offsetParent.clientHeight + this.offsetParent.scrollTop);
}
/* Make the z-index values very clear so overlaps happen as expected! */
DIV.scrollingdatagrid TD, DIV.scrollingdatagrid TH { z-index:1; }
DIV.scrollingdatagrid TD.locked, DIV.scrollingdatagrid TH.locked { z-index:2; }
DIV.scrollingdatagrid THEAD TR, DIV.scrollingdatagrid TFOOT TR { z-index:3; }
DIV.scrollingdatagrid THEAD TR TH.locked { z-index:4; }

table.scrollable thead th {
  background-color:#E0E0E0 ;
}

table.scrollable tfoot td {
  background-color:#ccffcc;
}

table.scrollable tbody td {
  background-color:#eeeeee;
  padding: 2px;
  margin: 0px;
  background-color: whitesmoke;
}

table.scrollable td, table.scrollable th {
  border:1px solid #cccccc;
  border-width:0 1px 1px 0;
  font-size: 12px;
}

table.scrollable tr.selectedTicketRow td {
  /*background-color:#C0C0C0 ;*/
  background-color:lightskyblue ;
}

table.scrollable tr.selectedStoreRow td {
  background-color:#C0C0C0 ;
}

table.scrollable tr.selectedRepRow td {
  background-color:#C0C0C0 ;
}


table.scrollable tr.ticketRow td {
}