.item {
	position: absolute;
}

.item.cut {
	opacity: 0.5;
}

.item.collapsed .children {
	display: none;
}

.content {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	cursor: pointer;
}

.content > * {
	vertical-align: middle;
}

.text {
	display: inline-block;
	text-align: center;
	min-width: 0.5em;
	min-height: 1.3em;
	line-height: 1.3em;
	outline: none;
}

.value, .status {
	margin-right: 0.2em;
}

.text ~ .value, .text ~ .status {
	margin-left: 0.2em;
	margin-right: 0;
}

.value {
	opacity: 0.7;
}

.value:not(:empty):before {
	content: "(";
}

.value:not(:empty):after {
	content: ")";
}

.status {
	font-size: 150%;
	line-height: 0.8;
}

.status.yes:after {
	content: "✔";
	color: #0f0;
}

.status.no:after {
	content: "✘";
	color: #f00;
}

canvas {
	position: absolute;
	left: 0;
	top: 0;
}

.notes-indicator {
	width: 16px;
	height: 100%;
	background: url("../icons/notes-indicator.png") right center no-repeat;
	position: absolute;
	top: -8px;
	right: 0;
	opacity: 0.4;
	display: none;
}

.notes-indicator-visible {
	display: block;
}

.toggle {
	position: absolute;
	width: 12px;
	height: 12px;
	line-height: 12px;
	cursor: pointer;
	border-radius: 50%;
	border: 1px solid #00f;
	background-color: #88f;
	text-align: center;
	font-weight: bold;
	font-family: sans-serif;
	color: #fff;
	opacity: 0.7;
}

.toggle:hover {
	opacity: 1;
}

.toggle:before {
	content: "−";
}

.collapsed > .toggle:before {
	content: "+";
}

:not(.current):not(.collapsed) > .toggle {
	/* NOT display:none - we need to have non-zero dimensions for layouting */
	visibility: hidden;
}
