@import "elements.less";

// Fonts
@font-face {
	font-family: ProximaNova-Bold;
	src: url(ProximaNova-Bold.otf);
	}
	@font-face {
	font-family: ProximaNova;
	src: url(ProximaNova-Regular.otf);
	}
	@font-face {
	font-family: ProximaNova-Light;
	src: url(ProximaNova-Light.otf);
	}

@font-size: 20px;
@padding: 25px;
@header: 70px;

// General
body, input, textarea {
	font-family: ProximaNova;
	font-size: @font-size;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-smooth: always;
	background: #2D2E34;
	border: none;
	}
	strong {
	font-family: ProximaNova;
	}
	body {
		padding-top: @header;
	}
	textarea {
		padding: 10px;
		margin: 10px 0 10px;
		.rounded(5px);
		max-width: 100%;
	}
	input {
		padding: 20px;
		margin: 0 0 20px;
		.rounded(5px);
	}
	input[type="submit"] {
		cursor: pointer;
	}
	a {
		text-decoration: none;
		.transition(0.5s);
	}
	a:hover {
		.transition(0.5s);
		text-decoration: none;
	}
	img {
		margin: 3px 0;
		max-width: 100%;
		height: auto;
	}
	h1 {
		font-size: 2.5em;
		padding-bottom: 10px;
		line-height: 1em;
		a {
			width: 77%;
		}
	}
	h2, h3 {
		font-size: 2em;
		font-weight: 300;
		line-height: 1em;
		padding-top: @padding*2;
	}
	article p, footer p {
		padding: @padding;
		line-height: 1.5em;
	}
	h1,h2,h3,p {
		display: block;
		max-width: 600px;
		margin: 0 auto;
		padding-left: @padding;
		padding-right: @padding;
		text-align: left;
	}
	pre {
		text-align: left;
		border: none;
		text-shadow: none;
		font-size: 0.7em;
		line-height: 1.5em;
		.rounded(5px);
		padding: 10px;
		overflow: hidden;
		max-width: 600px;
		margin: 0 auto;
	}
	#respond {
		padding: @padding;
		margin: 0 auto;
		max-width: 600px;
		h3 {
			padding: 0;
		}
	}
	form p {
		padding: 10px 0 0 0;
	}
	#pagination {
		display: block;
		max-width: 600px;
		margin: 50px auto;
	}

.commentlist {
		max-width: 600px;
		margin: 0 auto;
		padding: @padding;
	.avatar {
		vertical-align: middle;
		margin: 0;
	}
	.comment-edit-link, .comment-reply-link {
		.opacity(0);
		.transition(0.5s);
	}
	.comment:hover .comment-edit-link, .comment:hover .comment-reply-link {
		.opacity(1);
		.transition(0.5s);
	}
	.comment {
		margin: 10px 0 20px;
		display: block;
		overflow: hidden;
	}
	.comment-body {
		div, p {
		 margin: 10px 0;
		 padding: 0;
		 line-height: 1.5em;
		}
		p {
			padding: 0 0 20px 0;
		}
	}
	.comment-meta a {
		font-size: 0.75em;
	}
	.children {
		padding-left: 50px;
	}
	blockquote {
		padding-left: 20px;
		margin-bottom: 20px;
		p {
			padding: 0 !important;
		}
	}
	.pingback {
		font-size: 0.8em;
		position: relative;
		width: 100%;
		.opacity(0.5);
		.transition(0.5s);
		.comment-meta {
			position: absolute;
			top: 0px;
			right: 0px;
		}
		display: none;
		.comment-author {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			max-width: 200px;
		}
	}
	.pingback:hover {
		.opacity(1);
		.transition(0.5s);
	}
}
	
header {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
	width: 100%;
	overflow: hidden;
	height: @header;
	ul {
		display: block;
		overflow: hidden;
		height: @header;
	}
	li a {
		display: inline-block;
		height: @header;
		.transition(0.5s, ease-in-out);
		text-align: center;
		position: relative;
	}
	li a span {
		display: block;
		width: 130px;
		height: @header;
		text-align: center;
		margin: 25px auto;
	}
	li a:hover {
		color: white;
		background: #2D7DDC;
		.transition(0.5s, ease-in-out);
	}
	li a.active {
		.transition(0.5s, ease-in-out);
	}
	li a:hover h3, li a:hover h2, li a:hover h1 {
		color: white !important;
		text-shadow: 0 -1px 1px rgba(0,0,0, 0.25) !important;
		.transition(0.3s, ease-in-out);
	}
	h1,h2 {
	font-size: 1em;
	}
	h3 {
	font-size: 1em;
	padding-bottom: 15px;
	}
}

footer {
	a {	
		.rounded(3px);
		padding: 0 5px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		max-width: 100%;
		display: inline-block;
	}
}
	
article {
	text-align: center;
	padding: @padding*2 0 @padding;
	overflow: hidden;
	position: relative;
	h1,h2,p {
		position: relative;
		.translate(200px, 0px);
		.opacity(0);
	}
	h2 {
		font-family: ProximaNova-Light;
		color: #60636D;
	}
	h3 {
		float: right;
		font-size: 1em;
		width: 60px;
		text-transform: uppercase;
		padding: 5px;
		.rounded(5px);
		margin-right: 10px;
		text-align: center;
	}
	num {
		font-size: 2em;
		line-height: 1em;
		font-family: ProximaNova-Bold;
	}
	h1.active, h2.active, p.active {
		.translate(0px, 0px);
		.opacity(1);
		.transition(0.9s, ease-in-out);
	}
	img {
		position: relative;
		.translate(300px, 0px);
		max-width: 100%;
		height: auto;
		.opacity(0);
	}
	img.active {
		.transition(0.9s, ease-in-out);
		.translate(0px, 0px);
		.opacity(1);
	}
	.show {
		.opacity(1);
		right: 0px;
	}
	a {
		.rounded(3px);
		padding: 0 5px;
		display: inline-block;
	}
	a:not(.link) {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		max-width: 100%;
	}
	blockquote {
		max-width: 600px;
		margin: 0 auto;
		max-width: 600px;
		margin: 40px auto;
		text-align: left;
		padding-left: 20px;
		line-height: 30px;
	}
	ul {
		max-width: 600px;
		margin: 0 auto;
		text-align: left;
		li {
			display: block;
			margin: 8px 0;
			padding-left: 20px;
			line-height: 30px;
		}
	}
}

// Loader
#canvasloader-container {
	position:absolute;
	top:400px;
	left:50%;
}

// Social
section.social {
	height: 150px;
	a.social {
	position: relative;
	top: @padding;
	left: 48%;
	}
	a.social .circle {
	position: absolute;
	top: -60px;
	left: -42px;
	.opacity(0.1);
	.transition(1s);
	}
	a.social:hover .circle {
		.transition(0.8s, ease-in-out);
		.opacity(1);
		.scale3d(0.75, 0.75, 1);
	}
	a.social .icon_dribbble, a.social .icon_twitter {
		.transition(1s);
	}
	a.social:hover .icon_dribbble, a.social:hover .icon_twitter {
		.opacity(0.2);
		.transition(2s);
	}
	a.social .count {
		font-size: 1em;
		position: absolute;
		top: 20px;
		left: -25px;
		width: 100px;
		text-align: center;
		strong {
			font-family: ProximaNova-Bold;
		}
	}
}
.moresocial {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

// Themes
.darkerblue {
	background: #2D2E34;
	color: #BEC4CC;
	.transition(1s);
	header {
		background: #2D2E34;
		.box-shadow(0 2px 0 rgba(255,255,255, 0.05), inset 0 -1px 0 rgba(0,0,0, 0.1));
		.transition(1s);
	}
	strong {
		color: white;
	}
	h1, h1 a {
		color: white;
		.transition(1s);
	}
	h2,h3 {
		color: #888C99;
		.transition(1s);
	}
	h3.date {
		background: #383D43;
	}
	pre {
		background: #383D43;
		color: white;
	}
	h1,h2,h3,p {
		text-shadow: 0 -1px 1px rgba(0,0,0, 0.25);
		.transition(0.1s);
	}
	a {
		color: #00BAFF;
		.transition(1s);
	}
	article a:hover, footer a:hover {
		color: #62CBFF;
		background: rgba(255,255,255, 0.05);
		.transition(1s);
	}
	footer {
		border-top: 2px solid rgba(255,255,255, 0.05);
		.transition(1s);
	}
	.mixpanel {
		float:  right;
	}
	blockquote, article ul li, .commentlist .children {
		border-left: 4px solid #383D43;
	}
	input[type="submit"] {
		color: white;
		background: #2D7DDC;
		.transition(0.5s);
	}
	input[type="submit"]:hover {
		background: rgba(0,0,0, 0.5);
		.transition(0.5s);
	}
	input[type="text"], textarea {
		color: white;
		background: rgba(0,0,0, 0.2);
		.transition(0.5s);
	}
	input[type="text"]:focus, textarea:focus {
		background: rgba(0,0,0, 0.5);
		.transition(0.5s);
	}
	.count {
		color: #BEC4CC;
	}
}
.lightblue {
	background: #ECEEF2;
	color: #252E35;
	.transition(1s);
	header {
		background: #ECEEF2;
		.box-shadow(0 2px 0 rgba(0,0,0, 0.1));
		.transition(1s);
	}
	h1, h1 a {
		color: #252E35;
		.transition(1s);
	}
	h2,h3 {
		color: #888C99;
		.transition(1s);
	}
	h3.date {
		background: #F5F5F8;
	}
	pre {
		background: #F5F5F8;
		color: #252E35;
	}
	h1,h2,h3,p {
		text-shadow: 0 1px 1px rgba(255,255,255, 0.25);
		.transition(0.1s);
	}
	a {
		color: #2D7DDC;
		.transition(1s);
	}
	article a:hover, footer a:hover {
		color: #252E35;
		background: rgba(255,255,255, 1);
		.transition(1s);
	}
	footer {
		border-top: 2px solid rgba(0,0,0, 0.1);
		.transition(1s);
	}
	blockquote, article ul li, .commentlist .children {
		border-left: 4px solid #F5F5F8;
		.transition(1s);
	}
	input[type="submit"] {
		color: white;
		background: #2D7DDC;
	}
	input[type="submit"]:hover {
		background: rgba(0,0,0, 0.2);
		.transition(0.5s);
	}
	input[type="text"], textarea {
		color: white;
		background: rgba(0,0,0, 0.1);
	}
	input[type="text"]:focus, textarea:focus {
		background: rgba(0,0,0, 0.2);
		.transition(0.5s);
	}
	.count {
		color: #252E35;
	}
}