
// Subrosa 
// copyright 2014 Konrad Wasowicz
// 
// styles related to single article view
// 

// Styles related to Single article view

.single-article {
	position: relative;
	margin-top: 6em;
}

.top-image ~ .single-article {
	top: -160px;
	background-color: white;
	@media screen and (max-width: @md){
		background-color: transparent;
	}
	@media screen and (max-width: @sm){
		margin-top: 120px;
	}
	.article-main {
		top: 80px;
	}
}

.social-container{
    height: 40px;
    margin: 10px 0 30px 0;
    &>div {
        float: left;
    }
}

.article-main {
	position: relative;
	font-size: 14px;
	margin-top: 60px;
	@media screen and (min-width: @md){
		padding: 0;
		margin: 0;
	}
}

.article-main .article-timesince {
	font-family: @sans-font;
	color: @black-30;
	font-weight: bold;
	font-size: 1em;
	display: table;
	padding-bottom: 6px;
	margin-bottom: 0;
	margin-left: 2px;
	@media screen and (max-width: 640px){
		font-size: 0.8em;
	}
}

.article-main .toc {
	position: absolute;
	word-wrap: break-word;
	width: 200px;
	margin-left: -220px;
	top: 0;
	left: 0;
	margin-top: 0;
	@media screen and (max-width: @md){
		display: none;
	}
	h3 {
		margin-top: 8px;
		font-size: 1em;
		margin-bottom: 0.jjj6em;
		border-bottom: 1px dotted @black-70;
		display: table;
		padding-bottom: 2px;
	}
	ul {
		margin-top: 0;
	}
	li {
		margin-bottom: 0.5em;
		font-size: 1em !important;
		a {
			display: inline-block;
			line-height: 160%;
			&:hover {
				text-decoration: underline;
				color: @black-60 !important;
				
			}
		}
	}
}


.article-main .article-title {
	font-weight: bold;
	font-family: @sans-font;
	font-size: 3em; 
	color: @black-70;
	line-height: 1.4em;
	margin-top: 6px;
	margin-bottom: 18px;
	line-height: 1.2em;
	@media screen and (max-width: @md){
		font-size: 2em;
	}
}
.article-main .article-header {
	font-family: @body-font;
	font-size: 2em;
	font-style: italic;
	color: @black-80;
	margin: 0;
	margin-bottom: 18px;
	@media screen and (max-width: @md){
		font-size: 1.6em;

	}
	
}

.article-main .article-divider {
	width: 100%;
	height: 36px;
	@media screen and (max-width: 640px){
		height: 12px;
	}
}

.article-body {
	position: relative;
}


.lazy {
	width: 100%;
	opacity: 0;
	.transition(opacity, .3s ease-in);
}

.image-desc {
	position: absolute;
	font-family: @body-font;
	font-style: italic;
	color: @black-50;
	font-size: 0.6em;
	line-height: 2em;
	vertical-align: center;
	@media screen and (max-width: @md){
		display: none;
	}
}

.floated-image-wrapper {
	float: right;
	clear: right;
	margin: 1em 0 1em 1em;
	img {
		width: 300px;
		@media screen and (max-width: @md){
			width: 220px;

		}
	}
	span {
		left: 108%;
		top: 50%;
		width: 120px;
		.translateY(-50%);
	}
	@media screen and (max-width: 640px){
		width: 100%;
		float: none;
		clear: both;
	}
}

.centered-image-wrapper {
	position: relative;
	clear: both;
	width: 100%;
	max-width: 100%;
	font-size: 1em;
	margin: 1em 0 2.6em 0 ;
	img {
		width: 100%;
		max-width: 100%;
	}
	span {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3em;
	}


}

.image-wrapper {
	position: relative;
	display: inline-block;
	vertical-align: center;
}

.article-footer {
	position: relative;
	width: 100%;
	height: 40px;
	margin-bottom: 100px;
	clear: both;
}

.article-footer a {
	margin-top: 2em;
	@media screen and (max-width: 640px){
		font-size: 0.8em;
		padding-left: 10px;
		padding-right: 10px;
	}
}

.article-sidebar {
	position: absolute;
	width: 200px;
	right: -250px;
	top: 0;
	font-family: @sans-font;
	@media screen and (max-width: @md ){
		display: none;
	}

}

.sidebar-block {
	margin-bottom: 2em;
	@media screen and (max-width: @md){
		display: none;
	}
	p {
		margin: 0 !important;
	}
	& > div {
		margin-bottom: 1em !important;
	}
	a {
		text-decoration: none;
	}
	.sidebar-title {
		color: @black-70 !important;
		text-transform: uppercase;
		font-family: @sans-font;
		font-size: 14px !important;
		font-weight: bold;
		margin-bottom: 1em !important;
		display: table;
		border-bottom: 1px solid @black-60;
	}
	.sidebar-item {
		font-family: @sans-font !important;
		text-transform: uppercase;
		color: @black-50 !important;
		font-size: 12px !important;
		margin: 0 !important;
	}
	.sidebar-item.active {
		color: @black-30 !important;
	}
	.sidebar-date {
		font-size: 10px !important;
		font-family: @sans-font;
		color: @black-30 !important;

	}

}

.user-info {
	position: relative;
	width: 100%;
	margin-bottom: 4em;
	.portrait-holder {
		width: 90px;
		height: 90px;
		padding: 10px;
		.box-shadow(0, 1px, 1px, rgba(0,0,0,.3));
		.background-size(cover);
		background-position: center center;
		left: 0;
		right: 0;
		margin: 0 auto;
		.border-radius(50%);
		margin-bottom: 20px;
	}
	.user-desc {
		font-size: 12px !important;
		font-family: @body-font;
		font-style: italic;
		line-height: 22px !important;
		margin: 0;
		text-align: center;
		p {
			font-size: 14px !important;
			color: @black-50 !important;
		}
	}
	.real-name {
		display: block;
		text-align: center;
		font-family: @sans-font;
		margin-bottom: 10px;
		font-weight: bold;
		font-size: 16px;
		&:after {
			content: "\2026";
			display: block;
			font-size: 14px;
		}
	}

	.user-info-link{
		display: block;
		font-size: 14px;
		color: @black-60;
		margin-bottom: 4px;
		text-align: center;
	}
}

.top-image {
	height: 300px;
	width: 96vw;
	margin: 0 auto;
	.background-size(100%, auto);
	background-repeat: no-repeat;
	background-position: center center;
}
