TREEMENU.css

/* Nornix TreeMenu stylesheet */
/* Default theme */

/* container for the menu */
.treemenu {
	width: 15em;
	padding: 0 0 5px 0.75em;
	position: relative;
	font: normal 0.875em/1.3 Corbel, Helvetica, Arial, sans-serif !important;
}

/* icons for opening/closing all folders */
.closeTree, .openTree, a.closeTree:hover, a.openTree:hover,
a.closeTree:link, a.openTree:link, a.closeTree:active, a.openTree:active {
	display: block;
	position: absolute;
	right: 13ex;
	top: 0;
	height: 24px;
	width: 24px;
	background: transparent url(NORNIX-CLOSE-ICON.png) 3px 3px no-repeat;
	cursor: pointer;
	border: none;
}

.openTree, a.openTree:hover, a.openTree:link, a.openTree:active {
	right: 8.2ex;
	background-image: url(NORNIX-OPEN-ICON.png);
}


/* clean up defaults */
.treemenu ul, .treemenu li, .treemenu a {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none outside none;
}
.treemenu li {
	background-image: none !important;
}
.treemenu ul {
	margin-left: 8px !important;
	position: relative;
}

/* common <li> settings */
.treemenu li {
	position: relative !important;
	border-left: 1px solid #bbbbbb !important;
	padding-left: 12px !important;
	background: url(NORNIX-TREEMENU-LINE.png) 0 10px no-repeat !important;
}

/* get the line right on the last item (when no class is set) */
.treemenu ul li:last-child {
	border-left: none !important;
	padding-left: 13px !important; /* compensate the 1px border */
	background: url(NORNIX-TREEMENU-CORNER.png) 0 0 no-repeat !important;
}

/* same as above, but with a class set */
.treemenu ul li.last {
	border-left: none !important;
	padding-left: 13px !important; /* compensate the 1px border */
	background: url(NORNIX-TREEMENU-CORNER.png) 0 0 no-repeat !important;
}

/* hide content of folders */
.treemenu li.folder > ul {
	display: none !important;
}

/* show content of folder, when class "open" is set */
.treemenu li.folder.open > ul {
	display: block !important;
}

/* display toggle icon, default to closed state */
.treemenu li.folder > span {
	display: block !important;
	position: absolute !important;
	left: -8px !important;
	top: 3px !important;
	height: 15px !important;
	width: 15px !important;
	background: url(NORNIX-PLUS-NODE.png) 3px 3px no-repeat !important;
	cursor: pointer !important;
}

/* set toggle icon for open state */
.treemenu li.open > span {
	background-image: url(NORNIX-MINUS-NODE.png) !important;
}

/* position toggle icon on last element */
.treemenu li.last > span {
	left: -7px !important;
}

/* display marker on current item */
.treemenu a.current span {
	display: block !important;
	position: absolute !important;
	left: 22px !important;
	top: 3px !important;
	height: 13px !important;
	width: 14px !important;
	background: url(NORNIX-TREEMENU-CURRENT.png) !important;
}

/* set default values for <a> elements */
.treemenu li a, .treemenu a.root, .treemenu li a.current {
	display: block !important;
	padding-left: 24px !important;
	min-height: 18px !important;
	border: none !important;
	color: #000000 !important;
	text-decoration: underline !important;
	background: url(NORNIX-DOC-NODE-ICON.png) no-repeat !important;
	background-position: 2px 2px !important;
}

/* if the class is "closed", then it's a folder, too */
.treemenu li.closed > a {
	background-image: url(NORNIX-FOLDER-CLOSED-ICON.png) !important;
	background-position: 0 2px !important;
}

/* menu folder in open state */
.treemenu li.open > a {
	background-image: url(NORNIX-FOLDER-OPEN-ICON.png) !important;
	background-position: 0 2px !important;
}

/* change properties for <a> elements with the href attribute set
-- the current page will not have a href value */
.treemenu a:link, .treemenu a:visited, .treemenu a:active, .treemenu a:hover {
	color: #000000 !important;
	text-decoration: none !important;
}

/* change icon and some settings on the root element of the menu */
body .treemenu a.root {
	min-height: 24px !important;
	background: url(NORNIX-HOME-ICON.png) 0 0 no-repeat !important;
	width: 9ex !important;
	margin-bottom: -4px !important;
}

/* :hover styling on <a> elements */
.treemenu a:hover, .treemenu li.folder a:hover, .treemenu ul li.open > a:hover {
	text-decoration: underline !important;
}

.treemenu a:active, .treemenu a.root:active {
	background-color: #e8e8e8 !important;
}

.treemenu a:focus, .treemenu a.root:focus {
	background-color: #e8e8e8 !important;
}