#post-list {
	text-align: center;
}

#post-list .wrapper {
	display: inline-block;
	margin: 0 auto;
}

#post-list .search {
	margin-bottom: 1em;
}
#post-list .search input {
	max-width: 20em;
}

#post-list ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#post-list .posts li a {
	display: block;
	margin: 0.4em;
	border: 1px solid #999;
	z-index: 1;
	position: relative;
}
#post-list .posts li img {
	display: block;
}

#post-list .posts li a:focus,
#post-list .posts li a:hover {
	background: #afe;
	border-color: #5da;
	box-shadow: 0 0 0 2px #5da;
	outline: 0;
}

#post-list .posts li a:focus img,
#post-list .posts li a:hover img {
	opacity: .9;
}

#post-list .posts li a .info {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #5da;
	color: black;
}
#post-list .posts li a .info li {
	display: inline-block;
	margin: 0.1em 0.5em;
}
#post-list .posts li a:focus .info,
#post-list .posts li a:hover .info {
	display: block;
}

#post-list .posts li:not(.post-type-image) a:before {
	display: block;
	content: '';
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 50px solid red;
	border-left: 50px solid transparent;
}

#post-list .posts li:not(.post-type-image) a:after {
	display: block;
	content: '...';
	z-index: 3;
	position: absolute;
	top: -35px; /* 50 * sqrt(2) / 2 */
	right: -35px;
	width: 71px; /* 50 * sqrt(2) */
	height: 71px;
	line-height: 122px; /* 71 * 2 - 11 (font-size) - padding */
	transform: rotate(45deg);

	color: white;
	font-size: 15px;
}
#post-list .posts li.post-type-youtube a:after {
	font-size: 13px;
	content: 'youtube';
}
#post-list .posts li.post-type-video a:after {
	content: 'video';
}
#post-list .posts li.post-type-flash a:after {
	content: 'flash';
}