#tree {
	display: none;
	position: fixed;
	left: 0;
	top:  31px;
	height: 100%;
	z-index: 3;
	overflow: auto;
	padding: 8px;
	background-color: rgb(241,241,241);
	border-right: 2px solid rgb(221,221,221);

	.sp-scrollbar {
		margin: 8px 8px 8px 0;
		width: 6px;
		background-color: rgb(210,210,210);
		.border-radius(3px);
		cursor: pointer;

		.sp-thumb {
			background-color: rgb(180,180,180);
			.border-radius(3px);
		}
		&.active .sp-thumb {
			background-color: rgb(150,150,150);
		}
	}

	.indicator {
		position: relative;
		top: 2px;
		display: inline-block;
		width: 16px;
		height: 22px;
		float: left;
		opacity: 0.7;
		cursor: pointer;

		img {
			width: 12px;
			height: 12px;
			.transition(all 0.2s ease-in-out);
		}
		&.open {
			img {
				.transform(rotate(90deg));
			}
		}
		&.unknown {
			opacity: 0.3;
		}
		&.none {
			opacity: 0;
			cursor: inherit;
		}
	}
	a, a:active, a.visited {
		display: block;
		height: 1.231em;
		line-height: 1.231em;
		margin-left: 14px;
		padding: 4px 6px;
		color: #555;
		border: 1px solid rgba(0,0,0,0);
		.border-radius(5px);
		text-decoration: none;
		opacity: 0.7;

		&:hover, &.hover {
			color: #e80;
			background-color: rgba(255,255,255,0.5);
			opacity: 1;
		}
	}
	.icon {
		position: relative;
		top: -2px;
		margin-right: 6px;

		img {
			width: 16px;
			height: 16px;
		}
	}
	.hint {
		margin-left: 6px;
		font-size: 0.9em;
		color: #ccc;
	}
	.content {
		list-style: none;
		margin: 0;
		padding: 0 0 0 24px;
	}
	.current {
		> a, > a:active, > a:visited {
			background-color: rgba(255,255,255,0.5);
			border-color: rgb(221,221,221);
			opacity: 1;
		}
	}
	.error {
		> a, > a:active, > a:visited {
			color: #999;
			&:hover, &.hover {
				color: #e80;
			}
		}
		.hint {
			color: #c55;
		}
	}
}