.filter {
	height: 40px;
	text-align: right;
}

.filter button {
	float: right;
	padding: 4px 5px;
	margin: 0 0 5px 5px;
	width: 100px;
	font-weight: 700;
	color: #222;
	background: #888;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: 0.2s all ease-in-out;
}

.filter button:hover {
	color: #000;
	background: #FFF;
}

.filter button.active {
	color: #000;
	background: #FFF;
	border-bottom: 3px solid #C0F;
}


.spoiler .entry {
	position: relative;
	padding: 5px;
	width: 100%;
	line-height: 2em;
	text-align: center;
	font-size: 150%;
	background: rgba(0,0,0,0.15);
	border: 1px solid rgba(255,255,255,0.5);
	border-top: none;
	transition: 0.2s all ease-in-out;
}

.spoiler .entry:first-child {
	background: rgba(0,0,0,0.75);
	border: 1px solid rgba(255,255,255,0.5);
	border-bottom-width: 5px;
	border-radius: 10px 10px 0 0;
}

.spoiler .entry:last-child {
	border-radius: 0 0 10px 10px;
}

.spoiler .entry:not(:first-child):hover {
	background: rgba(255,255,255,0.15);
}

.spoiler .entry .searchable, .spoiler .entry:after {
	position: absolute;
	text-align: left;
	width: 45%;
	height: calc(100% - 8px);
	border-radius: 5px;
	transition: 0.2s all ease-in-out;
}

.spoiler .entry .searchable {
	left: 25px;
}

.spoiler .entry:after {
	right: 25px;
	color: transparent;
}

.spoiler .entry .searchable, .spoiler .entry:hover:after {
	color: #FFF;
}

.spoiler.locations > .entry .searchable {content: attr(data-location); }
.spoiler.locations > .entry:after { content: attr(data-item); }

.spoiler.items > .entry .searchable { content: attr(data-item); }
.spoiler.items > .entry:after { content: attr(data-location); }

.spoiler .entry:first-child .searchable, .spoiler .entry:first-child:after {
	color: #FFF;
	background: transparent;
}