@icon-height: 21px;
@icon-width: 16px;
@icon-offset: 0px;

.loop-wrapper {

	.post-row {
		.clearfix;
		.media-inner {
			background-color: @accent-color-8;
		}
		.media-inner > img {
			-webkit-backface-visibility: hidden;
			transition: opacity .4s;
		}
		transition: background .4s ease;
	}

	.sticky .post-row,
	.post-row:hover {
		background: lighten(@accent-color-7, 3%);

		.top-part {
			color: @accent-color-6;
		}
	}

	.post-row:hover {
		.media-inner > img {
			opacity: 0.8;
			-webkit-backface-visibility: hidden;
		}
	}

	.post-row-left,
	.post-row-center {
		float: left;
	}

	.post-row-left {
		width: 160px;
		vertical-align: top;
		padding-top: 30px;
		text-align: right;
		padding-right: 30px;
		.border-box();

		.post-left-actions {
			display: none;
		}
	}

	.post-date {
		display: inline-block;
        margin-right: 10px;


		a:hover {
			text-decoration: none;
		}

		.top-part,
		.bottom-part {
			display: block;
			text-align: center;
			width: 75px;
			transition: color .3s ease;
		}

		.top-part {
			.wpv-font(h2-);
			color: @accent-color-3;
			line-height: 1;
			font-size: 45px;
			border-bottom: 1px solid;
			border-color: @accent-color-7;
			padding-bottom: 10px;
		}

		.bottom-part {
			.wpv-font(h5-);
			color: @accent-color-4;
			padding-top: 10px;
			line-height: 1;
		}
	}

	.post-row-center {
		width: calc(~"100% - 160px");
		padding: 30px 0 30px 0;
	}

	.list-item {
		border-bottom: 1px solid @default-line-color;
		margin-bottom: 0;

		&:last-child {
			border-bottom: 0;
		}

		.post-content-outer {
			padding: 0;

			.post-content {
				> ol, > ul {
					&:last-child {
						margin-bottom: 1em;
					}
				}
			}
		}

		.post-media {
			width: 280px;
			float: left;

			+ .post-content-outer {
				padding-left: 310px;
			}

			.media-inner {
				display: block;
			}
		}

		.post-article {
			display: block;
		}

		header.single {
			padding-top: 10px;
		}
	}

	header {
		position: relative;
	}

	.page-content {
		position: relative;
	}

	.post-article {
		display: inline-block;
		margin: 0;
		width: 100%;
		p {
			font-size: inherit;
			padding-right: 20px;
		}

		.post-content-outer {
			.post-meta {
				overflow: hidden;
				width: 100%;
				margin-top: 10px;
				font-size: 10px;
				font-style: italic;
				text-transform: uppercase;
				color: @accent-color-4;

				a {

					font-size: 11px;
					font-style: italic;
					text-transform: uppercase;
					color: @accent-color-4;


					&:hover {
						color: @css_link_color;
					}
				}

				nav > div:not(.post-actions),
				.post-actions > div,
				.post-edit-link {
					.wpv-font(h6-);
					float: left;
					padding-right: 20px;
					min-height: 20px;
					line-height: 19px;

					> span.icon {
						color: @accent-color-4;
					}


					&.blog-buttons {
						padding-top: 24px;
						border-right: none !important;

						a {
							position: relative;

							&:after {
								position: absolute;
								top: -25px;
								right: -20px;
								width: 1px;
								height: 300%;
								border-right: 1px solid @accent-color-7;
								content: "";
							}
						}
					}
				}

				.comment-count a:hover {
					text-decoration: none !important;

					span {
						text-decoration: none;
					}
				}

				span.icon {
					display: inline-block;
					overflow: hidden;
					margin-right: 10px;
					padding: 2px;
					width: 8px;
					vertical-align: middle;
					text-align: center;
					text-decoration: none !important;
					font-size: 12px;
					line-height: normal;
				}

				.post-actions {
					float: right;

					.comment-count {
						a {
							font-weight: normal;
							font-size: 12px;
							color: @accent-color-4;


							&:hover {
								color: @css_link_color;
							}
						}
					}
				}
			}
		}
	}
}

.page-content {
	label[for|=pwbox] {
		position: relative;
		top: -3px;
		display: inline-block !important;
		font-size: 0 !important;

		input {
			font-size: @primary-font-size !important;
		}
	}
}

.post-article {
	header {
		margin-bottom: 5px !important;

		&.sep-text.single {
			.content {
				text-align: left;
				white-space: normal;
			}

			.sep-text-after {
				display: none;
			}
		}

		h3 {
			margin: 0;

			&, a {
				color: @css_link_color;
				line-height: 1.3em !important;
			}
		}

		a {

			transition: color .3s ease;

			&:hover {
				text-decoration: none;
				color: @css_link_hover_color;
			}
		}
	}

	.post-subheader {
		display: table;
		width: 100%;
		font-size: 14px;

		.post-date {
			display: table-cell;
			margin: 0;
			padding-right: 1em;
			text-transform: uppercase;
			white-space: nowrap;
			font-size: 11px;
			line-height: 1;
		}

		.post-date-after {
			display: table-cell;
			overflow: visible;
			width: 100%;
			vertical-align: top;
			white-space: nowrap;

			&:after {
				display: inline-block;
				width: 100%;
				height: 1ex;
				border-bottom: 1px solid @default-line-color;
				content: "";
				vertical-align: top;
			}
		}
	}

	.post-media {
		text-align: center;

		.media-inner {
			position: relative;
			min-height: @icon-height + @icon-offset * 2;
			overflow: hidden;

			> div {
				max-width: none !important;
				width: auto !important;
			}

			> img {
				.transition( all .3s );
				width: 100%;
			}
		}
	}

	.blog-buttons {
		text-align: center;

		&:after {
			display: block;
			clear: both;
			content: "";
		}

		a {
			display: inline-block;
			margin: 0 auto;

			.icon {
				margin: 0 8px 0 0;
				padding: 0;
				color: @accent-color-1;
				font-size: 16px;
			}
		}
	}

	///////////////////
	//  media posts  //
	///////////////////

	/* Standard post with image --------------------------------------------- */
	.standard-post-format,
	/* Image Post ----------------------------------------------------------- */
	.image-post-format,
	/* Link Post ------------------------------------------------------------ */
	.link-post-format,
	/* Audio Post ----------------------------------------------------------- */
	.audio-post-format,
	/* Video Post ----------------------------------------------------------- */
	.video-post-format,
	/* Gallery Post --------------------------------------------------------- */
	.gallery-post-format {
		.the-content {
			.post-meta {
				display: inline-block;
				margin: @small-padding/2 0 0 0;
				width: 100%;
				border: 1px solid @accent-color-7;
				background: @accent-color-8;

				div {
					display: inline-block;
					float: left;
					padding: 15px;
					border-right: 1px solid @accent-color-7;
					text-transform: uppercase;
				}
			}
		}

		.single-post-wrapper & {
			.post-content-outer,
			.post-media,
			.the-content {
				display: block;
				width: auto;
			}

			.the-content {
				padding: 0;
			}
		}
	}

	.audio-post-format {
		.post-media {
			float: none;
			width: auto;
			margin: 0 60px 10px 0;

			+ .post-content-outer {
				padding-left: 0;
			}
		}

		.media-inner {
			display: block;
		}
	}

	/* Quote Post ----------------------------------------------------------- */
	.quote-post-format {
		blockquote.large {
			padding: 0;
			overflow: visible;
			text-align: left;

			.quote-text {
				&, p {
					.wpv-font(h3-);
				}
			}
		}

		.cite {
			img {
				border-bottom: 1px solid @accent-color-7;
				padding-bottom: 10px;
				margin-bottom: 10px;

				+ .quote-author {
					display: block;
				}
			}
		}
	}

	/* Aside Post ----------------------------------------------------------- */
	.aside-post-format {
		.post-content-outer {
			padding-top: 0;
		}
	}

	/* Status Post ----------------------------------------------------------- */
	.status-post-format {
		.the-content {
			padding-right: @small-padding + @icon-width !important;
		}
	}

	/* Gallery Post --------------------------------------------------------- */
	.gallery-post-format {
		.post-media {
			position: relative;
			text-align: center;

			.button {
				position: absolute;
				bottom: @content-padding;
				left: 50%;
				z-index: 5;
				margin-left: -@content-padding;
				padding: 0.7em 0.7em 0.75em;
				span {
					&:after {
						border: none !important;
					}

				}
				&:hover {
					text-decoration: none;
				}
			}

			.media-inner {
				display: block;
			}
		}
	}

	.excerpt-more {
		float: left;
		margin-top: -.6em;
	}

	.status-post-format,
	.aside-post-format,
	.link-post-format {
		.post-subheader {
			margin-bottom: 0 !important;
		}

		.post-media {
			margin-top: @small-padding;
		}
	}

	.video-post-format {
		.media-inner {
			iframe {
				height: 360px;
			}
		}
	}
}

body.single-post {
	.single-post-wrapper .post-content-outer {
		.meta-top {
			margin-bottom: 20px;

			.author {
				margin-right: 20px;
			}

			.comment-count {
				float: right;

				.icon {
					position: relative;
					margin-right: 5px;
					top: 1px;
				}

				a:not(.icon) {
					font-size: 13px;
					position: relative;
					top: -2px;
				}
			}
		}

		.meta-bottom {
			margin-top: 20px;

			.icon {
				margin-right: 5px;
			}
		}
	}

	.related-posts {
		clear: both;
		position: relative;
		padding-top: 40px;
		padding-bottom: 60px;
		background: @accent-color-8;

		.grid-1-1 {
			padding: 0;

			.loop-wrapper.scroll-x.news {
				padding-top: 0;
			}
		}
	}

	&.single-format-aside .page-header .post-siblings {
		padding-top: 60px;
	}
}

body.full {
	.related-posts:before {
		position: absolute;
		top: 0;
		left: -100%;
		width: 300%;
		height: 100%;
		background: @accent-color-8;
		content: "";
	}
}

.header-middle {
	.limit-wrapper {
		.news.scroll-x  {
			padding-top: 10px !important;
		}
	}
}

.ie8 {
	.loop-wrapper {
		.page-content {
			margin-bottom: 30px;
		}
	}
}
