/** this is the css for the table taglib stuff.  this works with the render.js code to give the table visual
  * action.  This is based on the DataTable.css code (which will go away).
  */

/* These are the table defaults - black text, white background, no borders between lines (as we're using highlight class)
 * but a grey line between columns, and a medium grey over the outside border
 */
table.dataTable, table.dragTable {
    color : black;
    margin : 0px;
    text-align : left;
    background-color : white;
    border-top :    1px solid #939393;
    border-right :  1px solid #939393;
    border-bottom : 1px solid #939393;
    border-left :   0px;
}

/** basic setup for cells - this will allow them to have the right padding, and a left border.  
  * the left border means that we don't need a table-level left border.  this also means that we don't need the table
  * do be defined with rules.
  */
table.dataTable td, table.dataTable th {
	padding : 2px 2px;
	border-left : 1px solid grey;
}

/***********************/
/** SCROLLABLE TBODIES */
/***********************/
/** this is for the scrollable tbody within a table */
table.dataTable tbody[scrollable=true] {
    overflow: auto;
	overflow:-moz-scrollbars-vertical;
	width:100%;
}

/******************/
/** HEADER CELLS **/
/******************/
/** this will set the bottom border for *either* a regular cell in a thead *OR* a table header cell regardless of location */
table.dataTable thead td, table.dataTable th {
	border-bottom : 1px solid grey;
}

/** this is the basic header cell - this is a basic background with an bottom outer border of dark grey
*/
table.dataTable th {
    background-color : #D6D0BA;
    font-family : Verdana, Tahoma, Serif;
    font-size : 8pt;
    font-style : normal;
    font-weight : bold;
	vertical-align : bottom;
}

/** this is the table caption - only on vertical tables with one row.  this will center the the text across 2 columns
*/
table.dataTable th.caption {
    font-size : 9pt;
    text-align : center;
	background-color:#336799;
	color:white;
}

/** this is the look for the sortable header.  it's like the default header, but it has the sorting icon in it 
*/
table.dataTable th[sort=on] {
    background : url(/images/table/sort_desc.gif)  no-repeat bottom right;
    padding-right : 15px;
    background-color : #88C5FF;
}

/** this is the look for the inactive sortable header.  it's like the default header, but it has the sorting icon in it 
*/
table.dataTable th[sort=off] {
    background : #D6D0BA url(/images/table/sort.gif)  no-repeat bottom right;
    cursor : pointer;
    padding-right : 15px;
}

/***************/
/** DATA ROWS **/
/***************/
/** this is the alternate row background color for odd/even highlighting of rows
  */
table.dataTable tbody tr.even {
/*    background-color : #cae5ca; */
background-color : #c1d5f5;
}

/** this is a row that is marked for deletion - the text color is lightened.  also see the cell's delete=true css code */
table.dataTable tbody tr[delete=true] * {
	color : #AAAAAA;
}

/** this is the "receiver" row on the table for any new rows to be added.
  * we add a different background color and a border so that it stands out
  */
table.dataTable tfoot tr {
    background-color : #D6D0BA;
}

/** this will set a top border on a footer row ONLY if there is a tbody.  if we didn't do the tbody check, and there was no tbody, 
 * we'd get a double row between thead and tfoot 
 */
table.dataTable tbody + tfoot td {
    border-top : 1px solid #666666;
}
/***************/
/** DATA CELLS */
/***************/
/** this is the mouseover active cell color - this doesn't work in ie.  It's a blu-ish cell with white text.
  * if there's a "hl" attribute in a row or cell tag, the row or cell will highlight
  * this is double-defined so taht any links in a complex/display table will show up white
  */
table.dataTable *[hl]:hover, table.dataTable *[hl]:hover * {
    background-color : #3D80DF;
    color : #FFFFFF;
}

/** this is a default cell for body and footer (it's non-editable).  any other td changes will override these settings
 */
table.dataTable td {
    font-family : Verdana, Tahoma, Serif;
    font-size : 8pt;
    font-style : normal;
    font-weight : normal;
	vertical-align : top;
	height: 18px;
}

/** this is an text editable data cell - they're all editable unless it's turned off 
 * we have to specify each background attribute individually so that the background color for the highlights show correctly
 */
table.dataTable td[render=true] {
    background-image : url(/images/table/edit1.gif);
	background-repeat : no-repeat;
	background-position : center right;
    padding-right : 15px;
}

/** editable data cell - renders as a combo box */
table.dataTable td[render=true][render_type=combo] {
    background-image : url(/images/table/combobox1.gif);
	background-repeat : no-repeat;
	background-position : center right;
    padding-right : 15px;
}

/** editable data cell - renders as a calendar */
table.dataTable td[render=true][render_type=date] {
    background-image : url(/images/table/calendar.gif);
	background-repeat : no-repeat;
	background-position : center right;
    padding-right : 15px;
}

/** editable data cell for OTHER rendertype - renders w/up pointing chevrons to indicate clickable to user */
table.dataTable td[render=true][render_type=other] {
    background-image : url(/images/table/chevron_up.gif);
	background-repeat : no-repeat;
	background-position : center right;
    padding-right : 15px;
}

/** editable data cell for OTHER rendertype - renders w/down pointing chevrons to indicate the user is in the middle of something*/
table.dataTable td[render=true][render_type=other][status=open] {
    background-image : url(/images/table/chevron_down.gif);
	background-repeat : no-repeat;
	background-position : center right;
    padding-right : 15px;
}

/** a cell that can "receive" a drop row*/
table.dataTable td[drop=true] {
    background-image : url(/images/table/move.gif);
	background-repeat : no-repeat;
	background-position : center right;
    padding-right : 15px;
}
/** a cell that indicates a row that CAN be deleted */
table.dataTable tbody td[delete=false] {
    background-image : url(/images/table/delete_off.gif);
	background-repeat : no-repeat;
	background-position : center center;
}
/** a cell that indicates a row that HAS be deleted */
table.dataTable tbody td[delete=true] {
    background-image : url(/images/table/delete_on.gif);
	background-repeat : no-repeat;
	background-position : center center;
}
/** a cell that indicates a "new" row */
/** this (along with all "new" cells are aligned a bit off from the left (3px) and centered vertically so as not to interfere
  * with scrollbars */
table.dataTable tbody td[new=true] {
    background-image : url(/images/table/new_on.gif);
	background-repeat : no-repeat;
	background-position : 3px center;
}
/** a cell that indicates a row that HAS be deleted, but it's a "new" row */
table.dataTable tbody tr[delete=true] td[new=true] {
    background-image : url(/images/table/new_off.gif);
	background-repeat : no-repeat;
	background-position : 3px center;
}
/** the tfoot cell that indicates a "new" row.  the css/setup of the row can be changed so that this css can be replaced
  * by the "new" row above
  */
table.dataTable tfoot td[new] {
    background-image : url(/images/table/new_on.gif);
	background-repeat : no-repeat;
	background-position : 3px center;
}

/** inputs - we're setting font and background settings, and inheriting the color and background color */
table.dataTable input {
    margin: 0px;
    padding : 0px;
    border : 1px solid #666666;
    text-align : left;
    background-color : inherit;
    font-family : Verdana, Tahoma, Serif;
    font-size : 8pt;
    font-style : normal;
    font-weight : normal;
}

table.dataTable select {
    margin: 0px;
    padding : 0px;
    border : 1px solid #666666;
    text-align : left;
    background-color : inherit;
    font-family : Verdana, Tahoma, Serif;
    font-size : 8pt;
    font-style : normal;
    font-weight : normal;
}

/*******************/
/** DRAGDROP CELLS */
/*******************/
/** this is each cell in a drag table - no padding and no background image (pencil, calendar, etc) */
/** the "dragTable" classs is created by javascript once the row is pulled out of the original  holding table.
 dragTable only exists until the mousedown is released */
table.dataTable tbody tr[drag=true] td, table.dragTable tbody tr[drag=true] td {
	vertical-align : top;
}

/** this creates a move image and forces a pointer cursor over the image */
table.dataTable tbody tr td[drag=true] img {
    cursor : pointer;
}

/** this is the table (in a div) that is being dragged, ie, this what the user sees being "dragged" **/
table.dragTable * tr {
    background-color : #3D80DF;
    color : #FFFFFF;
    font-family : Verdana, Tahoma, Serif;
    font-size : 8pt;
    font-style : normal;
    font-weight : normal;
}

/** this is a "dimmed" drag row - set by te ifcontains_dim attribute */
table.dataTable tbody tr[drag=true][dim=true] {
	color : #999999;
}