
#tree_holder {
width:inherit;
float:left;
text-align: left;
margin-bottom:25px;
}

/*set this menu up standard non styled elements */

.menu {width:auto;
	min-width:200px;
	max-width:400px;
	padding:0px;

	}
	
.menu a {
		border:none;
		font-weight:normal;
		color:#006699;
	}

.menu,
.menu ul {
		margin:0;
		padding:0;
		list-style:none;
		
	}
	
.menu li {
		display:block;
		margin:0;
		padding:0;
		margin-bottom:1px;
        margin-left:0px;
		list-style:none;
	}
.menu a {background:url(../images/expanding_tree_arrows/rightarrowred.gif) left no-repeat; margin-right:40px; margin-left:5px; padding-left:15px;
		display:block;
		color:#006699;
		text-decoration:underline;
		white-space:nowrap;
	}
	
/*start styling list elements ul and then li events like a hover a active a focus and out can be altered here */
/*make images appear on mouse event */	
.menu a:hover,
.menu a:focus
{text-decoration:underline; color:#006699;
background:url(../images/expanding_tree_arrows/rightarrowblue.gif) left no-repeat; padding-left:15px;}

/*make images stay on mouse event */
	.menu a:active {background:url(../images/expanding_tree_arrows/rightarrowblue.gif) left no-repeat; padding-left:15px;}


/*start styling second set of ul items */
	.menu ul li {padding-left:15px; line-height:13.5px; }
	.menu ul a {color:#333333;}
	.menu ul a:hover, 
	.menu ul a:focus {text-decoration:underline; background:url(../images/expanding_tree_arrows/rightarrowred.gif) left no-repeat; }
	.menu ul a:active{ background:url(../images/expanding_tree_arrows/rightarrowblue.gif) left no-repeat; }

/*declare wtf hidden menas */
	.hidden {display:none;}

/*more than two start expanding code here we will need a larger tree to test*/

    .menu ul li ul{ padding-left:5px; }

    .menu ul li a {color:#333333; height:12px; max-height:12px;}	


ul li {
	display:list-item;
	list-style: none;
	text-align:left;
}

