/* CSS for the tree display.

   Note that:
   - Some styles here override those used in crystal.css, loaded before this stylesheet
   - Uses CSS3 features to run the treeview display, defaults to an expanded tree if a non-CSS3-compliant browser is used, like IE8   
   - Various style issues are documented below in the comments.

 */
   
/*********** Headings *************/  /* TODO */

.tree_box .tree_heading
{
	float: right;
}

/*********** List structures *************/

.tree_box 
{
    border: 1px solid #c0c0c0;
	padding: 8px;
    background-color: #ffffff;  /* white background needed as some of the branching displays of
	                               the tree use an icon that uses a white rectangle to cover up 
								   a portion of dotted line */
}
.tree_box ul
{
    padding: 0;
    margin: 0;
	position: relative;
	left: 0px;
	top: 0px;	
    list-style: none;
}

.tree_box li          
{
    padding: 0;
    margin: 0;
	position: relative;
	left: 0px;
	top: 0px;
    list-style: none;
    border-left: dotted 1px #aaaaaa; /* makes a tree branch line */
	margin-left: -16px;
/*	text-indent: -32px; 
	padding-left: 32px;   */
}

.tree_box li:last-child
{ /* :last-child is CSS3-specific */
    border-left: solid 1px #ffffff;  /* an invisible border, to take up the same space 
	                                    as the border for previous children, so alignment remains neat */
}

 
.tree_box li ul   /* a sublist */
{                          
    margin: 0 0 0 8px;    /* specifies the sublist indentation */
    display: block;       /* ensures that sublists are displayed for non-CSS3 browsers;
	                         CSS3-compliant browsers will override this (below) */
}

.tree_box ul li input     /* checkbox, in this context */
{
    position: absolute;
    opacity: 0;              /* make checkbox invisible */
	display: none;           /* doubly make sure checkbox is invisible */
}

.tree_box ul
{
    display: block;          /* will be the default for earlier browsers */
}

     
.tree_box ul li input ~ ul  /* a sublist corresponding to an invisible checkbox (the input) */  
{  /* ~ is CSS3-specific */                                   
    display: none;   /* default is that sublist not displayed */   
}   

.tree_box ul li input:checked ~ ul  /* sub_list_ corresponding to a ticked checkbox */
{  /* :checked is CSS3-specific */                                             
    display: block;
} 

/*********** Nodes *************/

/* Explanation of styles. 
   Use:
	 li.tree_node    			for nodes of the tree without children (i.e. leaves)
	 li.tree_sub     			for internal nodes with child nodes	 
	 tree_desc       			for elements (span or label) containing a description of the tree node
     span.tree_link  			for descriptions that are also links 	 
	 span.tree_leaf  			for descriptions of nodes with no children 
	 span.tree_subtree_total	for the total corresponding to this node and all its descendants
     span.tree_node_total      	for the total at just this node	 
*/

.tree_box span.tree_link
{
	cursor: pointer;
}

.tree_box .tree_desc         /* description for a node of the tree */
{       
    display: inline-block;
  /*  height: 20px;             can't have a fixed height otherwise long lines won't wrap properly */
    line-height: 18px;        /* line-height can't be too short otherwise IE will squish lines together */
	padding-bottom: 2px;
    vertical-align: middle;
	padding-right: 80px;   /* matches width of .tree_box span.tree_subtree_total,span.tree_node_total */
}                          /* (a hack to avoid having to use float:right on tot/sub that IE can't cope with) */


.tree_box .tree_leaf
{
    cursor: default;
    padding-left: 5px;
    position: relative;
    left: 27px;   
	text-indent: -38px;   /* makes very long lines that wrap line up with the first line */
    top: 0px;	
}


.tree_box .tree_leaf:before        
{   /* :before is CSS3-specific */
    cursor: default;
    display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
    height: 16px;
    line-height: 16px;        
    vertical-align: middle;
    content: "";	
	width: 32px;
	margin-right: 6px;
	background: url("graphics/tree-icons.gif") no-repeat;
	background-position: 0px -32px;    /* |- branching icon (has white background) */
}

.tree_box li.tree_node:last-child .tree_leaf:before   
{  /* :last-child and :before CSS3-specific */
    top: -4px;
	background-position: 0px -48px;    /* L branch corner icon (has white background) */
}



.tree_box li.tree_sub > label,                  /* applies to trees without links */
.tree_box li.tree_sub > a > label               /* applies to trees with links */
{
    cursor: pointer; 
    position: relative;
    left: 31px;	  /* was -7px;  */
	top: 0px;
	text-indent: -38px;	  /* makes very long lines that wrap line up with the first line */
}

.tree_box li.tree_sub > a > label + span.tree_link 
{
    position: relative;
    left: -5px;	
	top: 0px;
	display: inline-block;
}


.tree_box li.tree_sub > label:before,          /* applies to trees without links */
.tree_box li.tree_sub > a > label:before       /* applies to trees with links */
{  /* :before is CSS3-specific */
    cursor: pointer;         
    display: inline-block;
    height: 16px;
    line-height: 16px;        
    vertical-align: middle;
	position: relative;
	top: 0px;
	left: 0px;
    content: "";              
	background: url("graphics/tree-icons.gif") no-repeat;
    width: 32px;
    margin: 0 6px 0 0;
    background-position: 0px -16px;    /* [+] and collapsed folder icon */
}

.tree_box li.tree_sub > label:before    /* version for tree with links in */       
{     /* CSS3-specific */                                      
	left: 0px;
}

.tree_box li.tree_sub > a > label:before            
{    /* CSS3-specific */
	left: -38px;
}


.tree_box li.tree_sub:last-child label:before            
{    /* CSS3-specific */
    top: -4px;                                    
	background-position: 0px -80px;    /* L icon (has white background) */
}

.tree_box li.tree_sub > input:checked + label:before, /* just before a label, when checkbox is ticked */
.tree_box li.tree_sub > input:checked + a > label:before
{       /* CSS3-specific */                                    
    background-position: 0px 0px;    /* [-] and expanded folder icon */
}

.tree_box li.tree_sub:last-child input:checked + label:before, /* just before a label, when checkbox is ticked */
.tree_box li.tree_sub:last-child > input:checked  + a > label:before
{      /* CSS3-specific */ 
    top: -4px;                                   
    background-position: 0px -64px;    /* expanded folder icon, without following branch */
}


/*********** Totals and sub-totals *************/

span.tree_subtree_total
{
	padding-right: 0px;   /* to override what's in crystal.css */
}

.tree_box li span.tree_subtree_total        /* default in case of non-CSS3 browser */
{  
    display: none;
}

.tree_box li span.tree_node_total        /* default in case of non-CSS3 browser */
{
    display: inline-block;
}

/* CSS3-specific */
.tree_box li.tree_node > span.tree_node_total   /* always display sub-total for leaves of tree (same as total) */ 
{
    color: #000000;
	float: right;
}
/* CSS3-specific */
.tree_box li.tree_node > span.tree_subtree_total   /* leaf of tree never needs a total displayed */
{
    width: 0px;
    display: none;
}




.tree_box li span.tree_subtree_total,
.tree_box li span.tree_node_total
{
    color: #000000;
	text-align: right;
	cursor: default;
	height: 15px;
	float: none;   /* to override what's in crystal.css */
	width: 80px;
	position: absolute;
	right: 0px;
	top: 0px;	
}

.tree_box li.tree_sub > span.tree_subtree_total     /* CSS3-specific */
{
	float: right;
	display: inline-block;
}

.tree_box li.tree_sub > input:checked ~ span.tree_subtree_total     /* CSS3-specific */
{
    display: none;
}

.tree_box li.tree_sub > span.tree_node_total   /* CSS3-specific */
{
	float: right;
	display: none;
}

.tree_box li.tree_sub > input:checked ~ span.tree_node_total    /* CSS3-specific */
{
	display: inline-block;
}

.tree_box li.tree_node,    
.tree_box li.tree_sub
{
    margin-left: 16px !important;
}

/************************** Buttons *************************/

td.expanderbuttons 
{
    width: 120px;
	line-height: 45px;
}