div.boxindent {
	margin: 0;
	width: auto; /* warning: do not use percentage */
	padding: 12px; 
	/* a box has its top border in direct contact with the first line of a block of text, and its bottom in direct 
	contact with the last line of the block. that's why padding is essential */
	border-width: 1px;
	border-style: solid;
	background-image: url('images/gradbg-light_blue.gif');
	border-color: #808080; /* calibrated: to match the border color of the foldpoint image */
	/* display: none; /* melhor que o proprio javascript sete ele fechado no inicio. */
}
div.boxindent-test {
	background-color: white;
	border: 1px solid black;
	padding: 12px;
	margin: 0;
}
div.boxindent.level0 {
	/*background-color: #C8C8DC;
	border-color: #BAA0BA;*/
}
div.boxindent.level1 {
	/*background-color: #CAD2E1;
	border-color: #A5BBE1;*/
}
div.boxindent.level2 {
	/*background-color: #E1E1C2;
	border-color: #E1C161;*/
}
div.boxindent.level3 {
	/*background-color: #C2E1E1;
	border-color: #29B3AE;*/
}
pre p {
	/* border: 1px solid black; */ /* debug */
	padding-top: 1em; 
	/* inside a <pre>, a linefeed after a line of text is not taken in consideration by <p> when this line is above <p>,
	but a linefeed right after </p> is. therefore, if you have a <p> between two lines of text, the vertical space between
	<p> and the line of text above it will be one line smaller than for the line of text below it. */
	/* warning: padding instead of margin because using margin here doesn't seem to work in internet explorer */
}
img.foldpoint {
	margin: 0px 0px -11px 0px; /* calibrated: para as dimensoes da imagem foldpoint  */
}

table.tree {
	border-collapse: collapse;
	border-spacing: 0px;
}
table.tree thead {
	color: white;
	font-weight: bold;
	font-size: 150%;
}
table.tree thead td {
	padding-bottom: 36px;
}
table.tree tbody td {
	height: 100px;
	padding: 0;
	background-repeat: no-repeat;
	/* border: 1px solid white; */
}
table.tree tbody td.node a { 
	color: white;
	font-weight: bold;
	position: relative;
	display: block;
	width: 0px; /* deixa o width na extensao do texto apenas */
	text-decoration: none;
	/* border: 1px dashed red; */
}
table.tree tbody td.node div { 
	display: none; 
	background-color: #000000; 
	position: absolute;
}
table.tree tbody td.node img.foldpoint { /* override: img.foldpoint */
	position: relative;
	margin: 0; 
	left: -11px; /* calibrated */
}
table.tree tbody td.node.node1 { 
	background-image: url('images/tabletree-node1.gif');
}
table.tree tbody td.node.node1top { 
	background-image: url('images/tabletree-node1top.gif');
}
table.tree tbody td.node.node2 { 
	background-image: url('images/tabletree-node2.gif');
}
table.tree tbody td.node.node3 { 
	background-image: url('images/tabletree-node3.gif');
}
table.tree tbody td.branch.branch1 {
	background-image: url('images/tabletree-branch1.gif');
}
table.tree tbody td.branch.branch2 {
	background-image: url('images/tabletree-branch2.gif');
}
table.tree tbody td.branch.branch3 {
	background-image: url('images/tabletree-branch3.gif');
}
table.tree tbody td.branch.branch1top {
	background-image: url('images/tabletree-branch1top.gif');
}
table.tree tbody td.branch.branch2top {
	background-image: url('images/tabletree-branch2top.gif');
}
table.tree tbody td.branch.branch3top {
	background-image: url('images/tabletree-branch3top.gif');
}
div#treecontainer {
	background-image: url('images/spacebg.jpg');
	background-color: black;
	background-attachment: fixed;
	padding: 8px;
	overflow: auto;
	height: 460;
	position: relative; 
	/* this is needed so that the top and left properties for descendants are relative to this element */
}