#nodeGraph
 {
	width: 2800px;/*1400*/
	height: 500px;
	left: -150px;
	top: 20px;
    /*background-color: grey;*/
    position:fixed;
    z-index:0;
    margin-left: 20px;
	display: block;
	touch-action:none;

 }
 
 .ancestorNode, .fatherNode, .motherNode
  {
 	width: 135px;
	height: 50px;
    padding:0px;
    margin: 0px;
    position:absolute;
 	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    display: table; 
	 touch-action:none;
    }
 
.ancestorNode
 {
    background-color:#D1D1A6;
    /*border: 4px solid #003399;*/
 }

 .fatherNode
 {
    background-color: #FFFF94;
    /*border: 4px solid #003399;*/
}
 
 .motherNode
 {
    background-color: #CCFFFF;
    /*border: 4px solid #003399;*/
}
 
 .ancestorNodeText
 {
  
  
    /*top: 50%;
    transform: translateY(-50%);
    text-align: center;*/
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;   
    touch-action:none;    
    color: #003399;
    font: 14px arial;
    cursor: pointer;
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
 }

/* HACK to have seperate DIV as BORDER do to ie css box model*/
#ancesterNodeBorder {
    width: 131px;
    height: 48px;
    top:-2px;
    left:0px;
    padding:0px;
    margin: 0px;
    border: 4px solid #003399;
    touch-action:none;
    cursor: pointer; 
    position:absolute;
}

 #acestorNodeInfoNotice{
    width: 39px;
    height: 11px;
    top:40px;
    right:0px;
    position:absolute;
    touch-action:none; 
    background-image: url('info.png');   
}


.nodeConnectorVert
{
    position:absolute;
    background-color: #0066CC;
 	width: 3px;
	height: 50px;
    touch-action:none;     
}

.nodeConnectorHorz
{
    position:absolute;
    background-color: #0066CC;
	height: 3px;  
 	width: 150px;
    touch-action:none; 
}

.nodeConnectorCenter_top
{
    position:absolute;
    background-color: #0066CC;
 	width: 3px;
	height: 125px;
    touch-action:none; 
}

.nodeConnectorCenter_bot
{
    position:absolute;
    background-color: #0066CC;
    width: 3px;
    height: 50px;
    touch-action:none; 
}

.arrow-down {
    position:absolute;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 7px solid transparent;
    border-top: 16px solid #0066CC;
    touch-action:none; 
}

.branchConnectorHorz1
{
    position:absolute;
    background-color: #0066CC;
    height: 3px;  
    touch-action:none; 
}

.branchConnectorVert1
{
    position:absolute;
    background-color: #0066CC;
    width: 3px;  
    touch-action:none; 
}

#infoPanelBase
{
    position:fixed;
    right:100px;	
    top:200px;	
    background-color: #99CCFF;
    z-index:100;
    border: 4px solid #003399;

	
}

#infoPanelName
{
    font: 20px arial;
	/*margin-left: 5px;
	margin-top: 5px;*/
    background-color: #FFFFCC;
	text-indent: 5px;
	border: 1px solid #0066CC;
	touch-action:none;
}

.infoPanelDate
{
    font: 14px arial;
	margin-left: 5px;
	margin-top: 5px;
    touch-action:none; 
}


#infoPanelText
{
    font: 12px arial;
    margin: 5px;
	overflow-y: auto;

}

#infoPanelSource
{
 /* font: 10px arial; */
    font: 10px arial;
    margin: 5px;
	border-top: 1px solid #0066CC;
    touch-action:none; 

}

.expandTreeButton{
  	width: 21px;
	height: 21px;
    position:absolute;
    background-image: url('expandNode.png');   
    background-position: 0 0px
    touch-action:none; 
}

.collapseTreeButton{
    width: 21px;
    height: 21px;
    position:absolute;
    background-image: url('expandNode.png');   
    background-position: 0 21px
    touch-action:none; 
}

#helpPanelBase{
    position:fixed;
    left:300px;    
    top:250px;  
    background-color: #99CCFF;
    z-index:120;
    border: 4px solid #003399;
    display:none;
    
}

#helpMessageText{
    font: 12px arial;
    margin: 5px;


}

#helpPanelName{
    font: 20px arial;
font-weight: bold;
    /*margin-left: 5px;
    margin-top: 5px;*/
    background-color: #FFFFCC;
    text-indent: 5px;
    border: 1px solid #0066CC;
    touch-action:none;

}