/**
 * Grid with thumbnails
 */

.item-list {
	margin-top: 10px;
}
	.item {
		width: 95%;
		margin-bottom: 20px;
	}
		.item-info {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			margin: 0;
			padding: 0;
		}
		.thumbnail-wrapper {
			background-color: #ccc;
			position: relative;
			margin: 0;
			padding: 0;
			padding-bottom: 66%;
			width: 100%;
			height: 0;
		}
		.thumbnail,
		.thumbnail-preview {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url(/apps/blog/css/default.jpg);
			background-position: 50% 50%;
			background-size: cover;
		}
		.item h4 {
			padding: 5px 10px 0px 10px;
			margin: 0;
		}
		.item p {
			padding: 0px 10px 5px 10px;
			margin: 0;
		}
		a.item-link {
			display: block;
			background-color: #444;
			color: #fff;
			padding: 3px;
			text-align: center;
			text-transform: uppercase;
			text-decoration: none;
		}
		a.item-link:hover {
			background-color: #333;
			text-decoration: none;
		}

.summary>div:first-child {
	padding: 0;
}
.summary>div:last-child {
	position: relative;
}
.summary-info {
	background-color: #f5f5f5;
}
	.summary-info-text {
		padding: 10px 10px 0px 10px;
	}
	a.external-link {
		position: absolute;
		bottom: 0;
		display: block;
		background-color: #444;
		color: #fff;
		padding: 3px;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		width: 100%;
	}
	a.external-link:hover {
		background-color: #333;
		text-decoration: none;
	}

.details {
	padding-top: 10px;
}