#tree {
	position: fixed;
	left: -200px;
	top: 80px;
	font-size: 0.85em;
	padding: 16px 32px 16px 16px;
	background-color: rgb(241,241,241);
	border: 2px solid rgb(210,210,210);
	border-left: none;
	.border-radius ( 0 15px 15px 0 );
	
	.entry {
		.blank, .indicator {
			display: inline-block;
			width: 16px;
			height: 25px;
			float: left;
		}
		.indicator {
			opacity: 0.7;
			.transition( all 0.2s ease-in-out );
			cursor: pointer;
			
			&:hover {
				opacity: 1;
			}
			img {
				position: relative;
				left: 0;
				top: 3px;
				width: 12px;
				height: 12px;
				vertical-align: bottom;
				.transition( all 0.2s ease-in-out );
			}
			&.open {
				img {
					.transform( rotate(90deg) );
				}
			}
			&.unknown {
				opacity: 0.3;
			}
		}
		> a, > a.visited {
			margin-left: 16px;
			padding: 4px 6px;
			border: 1px solid rgba(0,0,0,0);
			.border-radius( 5px );
			display: block;
			opacity: 0.7;

			&:hover {
				background-color: rgba(255,255,255,0.5);
				opacity: 1;
			}
			.label {
				display: inline-block;
			}
			.icon {
				display: inline-block;
				width: 20px;
				img {
					width: 16px;
					height: 16px;
					vertical-align: bottom;
				}
			}
			.hint {
				display: inline-block;
				margin-left: 12px;
				font-style: italic;
				font-size: 0.9em;
				color: #ccc;
				img {
					width: 10px;
					height: 10px;
					vertical-align: baseline;
				}
			}
		}
		&.file {
			display: none;
		}
		&.current {
			> a, > a:visited {
				border: 1px solid rgba(0,0,0,0.1);
				background-color: rgba(255,255,255,0.5);
				opacity: 1;
			}
		}
		&.error {
			> a, > a:visited {
				color: #999;
			}
			.hint {
				color: #c55;
			}
		}
		.content {
			list-style: none;
			margin-left: 20px;
		}
	}
}