@charset "UTF-8";
.Tree {
	border-left: solid 0px gray;
	border-right: solid 0px black;
	border-bottom: solid 0px gray;
	overflow: hidden;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
.Tree a:link{
	font-style:normal;
	font-weight: normal;
	text-decoration: none;
	color:#36F;
}
.Tree a:visited{
	font-style:normal;
	font-weight: normal;
	text-decoration: none;
	color:#36F;
}
.Tree a:hover{
	font-style:normal;
	font-weight: normal;
	text-decoration: none;
	color:#000;
}
.Tree a:active{
	font-style:normal;
	font-weight: normal;
	text-decoration: none;
	color:#666;
}

/* This is the selector for the TreePanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("TreePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * Tree panel container.
*/
.TreePanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TreePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("TreePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * Tree panel tab container.
 *
 * NOTE:
 * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
 * user from selecting the text in the TreePanelTab. These are proprietary browser
 * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
 * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
 * validate, and don't care if the user can select the text within an TreePanelTab,
 * you can safely remove those properties without affecting the functionality of the widget.
 */
.TreePanelTab {
	background-color: #f0f0f0;
	border-top: solid 0px black;
	border-bottom: 1px solid #ccc;
	margin: 0 15px;
	padding: 5px 5px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Trees panel animations. Placing a non-zero padding on the content
 * area can cause the Tree to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Tree *MUST* specify a height on the Tree Panel
 * Content container.
 *
 * The name of the class ("TreePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * Tree panel content container.
 */
.TreePanel .TreePanelContent {
	overflow: auto;
	height: auto;
	display:none;
	border:none;
}
.TreePanel .TreePanelContent ul{
	overflow: auto;
	height: auto;
	list-style:none;
	border: none;
	margin:0;
	padding:0;
}
.TreePanel .TreePanelContent ul li{
	overflow: auto;
	margin: 0 15px;
	padding: 5px 15px;
	height: auto;
	border-bottom: 1px solid #ccc;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "TreePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Tree.
 */
.TreePanelOpen .TreePanelTab {
	background-color: #ccc;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "TreePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.TreePanelTabHover {
	color: #777;
}
.TreePanelOpen .TreePanelTabHover {
	color: #777;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Tree has focus. The "TreeFocused" class is programatically added and removed
 * whenever the Tree gains or loses keyboard focus.
 */
.TreeFocused .TreePanelTab {
	background-color: #ccc;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Tree has focus.
 */
.TreeFocused .TreePanelOpen .TreePanelTab {
	background-color: #ccc;
	color:#777;
}