@text: #3a3a3a;
@primary: #117bb8;
@light: #ddd;
@readableLight: #aaa;

body {
	background: #333;
	/*background: #999;*/
	font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
}

pre, code, kbd, tt, var {
	font: 12px/20px Consolas, Monaco, Lucida Console, monospace;
}

pre {
	margin-bottom: 20px;
	padding: 15px 20px;
	background: #f5f5f5;
	overflow: auto;
	max-width: 100%;
}

a {
	color: @primary;

	&:visited { color: @primary; }
	&:active { color: @primary; }
	&:hover { color: @text; }
}

#page {
	background: white;
	width: 960px + ( 30px * 2 );
	margin: 40px auto;
}

.site-footer {
	clear: both;
	padding: 40px 40px;
	color: @readableLight;
}

.site-footer a {
	color: @readableLight;
	&:hover { color: @primary; }
}

.site-header .site-branding {
	position: relative;
}

.site-title-group {
	margin: 50px 40px 50px 40px;
}

.site-title {
	font-size: 34px;
	line-height: 34px;
	a {
		text-decoration: none;
		color: @text;
		&:hover { color: @primary; }
	}
}

.site-title a {
	display: block;
}

.site-description {
	font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: lighten(@text,30%);
}

.expound-custom-header,
.expound-custom-header img {
	display: block;
	float: left;
	position: absolute;
	width: 100%;
	top: 0;
}

.site-header {
	.menu-toggle {
		background: @text;
		color: white;
		font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 300;
		padding: 10px 22px;
		margin: 0;

		&:hover { background: lighten(@text, 5%); }

		&:before {
			content: '\2261';
			font-size: 14px;
			margin-right: 10px;
		}
	}
}

.main-small-navigation > ul {
	display: none;
}

.main-small-navigation ul ul {
	display: block;
}

.main-small-navigation {
	.menu-toggle {
		background: lighten(@text, 5%);
	}

	ul {
		margin: 0;
		list-style: none;
	}

	a {
		display: block;
		color: white;
		padding: 10px 40px;
		text-decoration: none;
	}

	li {
		background: @text;
		&:hover { background: lighten(@text, 5%); }
	}

	ul ul a {
		padding-left: 60px;
	}

	ul ul ul a {
		padding-left: 80px;
	}

	ul > .current_page_item,
	ul > .current-menu-item {
		background: @primary;
	}
}

.navigation-main {
	background: @text;

	ul {
		margin: 0 30px;
	}

	a {
		color: white;
		padding: 10px;
		position: relative;
	}

	li {
		background: @text;
		&:hover { background: lighten(@text, 5%); }
	}

	ul > .current_page_item,
	ul > .current-menu-item,
	ul > .current-post-ancestor,
	ul > .current-menu-ancestor,
	ul > .current-menu-parent,
	ul > .current-post-parent {
		background: @primary;
		&:hover { background: lighten(@primary, 5%); }
		&:hover a:after {
			border-top-color: lighten(@primary, 5%);
		}
	}

	ul > .current_page_item ~ .current_page_item a,
	ul > .current-menu-item ~ .current-menu-item a,
	ul > .current-post-ancestor ~ .current-post-ancestor a,
	ul > .current-menu-parent ~ .current-menu-parent a,
	ul > .current-post-parent ~ .current-post-parent a {
		background: @text;
		&:hover { background: lighten(@text, 5%); }
	}

	ul > .current_page_item a:after,
	ul > .current-menu-item a:after,
	ul > .current-post-ancestor a:after,
	ul > .current-menu-parent a:after,
	ul > .current-post-parent a:after {
		content: '';
		font-size: 0px; line-height: 0%; width: 0px;
		border-top: 6px solid @primary;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;

		position: absolute;
		bottom: -6px;
		left: 50%;
		margin-left: -6px;
		z-index: 9995;
	}

	ul > .current_page_item ~ .current_page_item a:after,
	ul > .current-menu-item ~ .current-menu-item a:after,
	ul > .current-post-ancestor ~ .current-post-ancestor a:after,
	ul > .current-menu-parent ~ .current-menu-parent a:after,
	ul > .current-post-parent ~ .current-post-parent a:after,
	ul ul li a:after {
		content: '';
		border: none !important;
	}

	ul ul {
		margin: 0;
		top: 40px;
		z-index: 9990;
	}

	ul.social {
		padding: 0;
		list-style: none;
		float: right;
		margin-right: 36px; /* -4px bc of padding */

		li:hover { background: none; }

		li a {
			width: 24px;
			padding-left: 0;
			padding-right: 0;
			background: url('../images/social.png') 0 50% no-repeat;
			color: transparent;
			text-indent: -9999px;
			padding-left: 4px;

			opacity: 0.2;
			&:hover { opacity: 0.5; }
		}

		li.twitter a { background-position: -205px 50%; }
		li.facebook a { background-position: -12px 50%; }
		li.feed a { background-position: -108px 50%; }
		li.vkontakte a { background-position: -59px 50%; }
		li.google-plus a { background-position: -157px 50%; }
	}
}

.site-main {
	float: left;
	width: 100%;
	clear: both;
}

#primary {
	float: left;
	width: 30px + 720px - 10px;
	margin-right: 10px;
}

.site-intro {
	padding-top: 40px;
	padding-bottom: 40px - 20px;

	padding-left: 40px;
	padding-right: 40px;

	background: white url('../images/absurdidad.png') 0 0 repeat;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	line-height: 28px;
}

.page-header {
	padding-top: 20px;
	padding-bottom: 20px;

	padding-left: 40px;
	padding-right: 40px;

	background: white url('../images/absurdidad.png') 0 0 repeat;
}

.page-header h1 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	line-height: 28px;
}

.page-header p {
	margin-bottom: 0;
	margin-top: 10px;
}

.featured-content-secondary {
	padding-top: 40px;
	padding-bottom: 40px - 20px;

	padding-left: 30px;
	padding-right: 30px;
	overflow: hidden;
}

.widget_recent_entries {
	.entry-thumbnail,
	.entry-thumbnail img {
		float: left;
	}

	.has-post-thumbnail .entry-title {
		margin-left: 60px;
	}
}

.single .site-content .related-content {
	overflow: hidden;
	padding-left: 20px;
	padding-top: 20px;
	border-bottom: solid 1px @light;

	.related-content-title {
		font-size: 16px;
		margin-bottom: 0px;
		margin-left: 20px;
	}

	article {
		float: left;
		width: 220px;
		margin: 0 0 0 20px;
		padding: 20px 0;
		border: none;
	}

	.entry-title {
		font-size: 13px;
		line-height: 18px;
		margin: -4px 0 0 0;
		padding: 0;
		clear: none;
		font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 300;
	}

	.entry-thumbnail,
	.entry-thumbnail img {
		float: left;
	}

	.has-post-thumbnail .entry-title {
		margin-left: 60px;
	}
}

#secondary {
	float: right;
	width: 240px + 30px - 10px;
	margin-left: 10px;
}

h1, h2, h3 {
	font-family: Georgia, "Times New Roman", serif;
}

.site-content .entry-content,
.site-content .comment-content,
#tinymce {
	h1 { font-size: 34px; line-height: 44px; }
	h2 { font-size: 20px; line-height: 28px; }
	h3 { font-size: 16px; line-height: 18px; color: lighten(@text, 15%); }

	h1, h2, h3 { margin-bottom: 10px; margin-top: 40px; }

	hr {
		background-color: @light;
		border: 0;
		height: 1px;
		margin-bottom: 20px;
	}

	table {
		margin-bottom: 20px;
	}

	th, td {
		padding: 8px 8px;
		border-bottom: solid 1px @light;
	}

	tr:hover td {
		background: lighten(@light, 10%);
	}

	ul, ol {
		margin-bottom: 20px;
	}

	blockquote {
		margin-left: -40px;
		margin-top: 20px;
		margin-bottom: 20px;
		padding-top: 20px;
		padding-bottom: 1px;
		padding-right: 20px;
		padding-left: 80px;
		background: lighten(@light, 10%);
		position: relative;
	}
	blockquote:before {
		content:'\0201C';
		font-family: Georgia, 'Times New Roman', serif;
		font-size: 50px;
		position: absolute;
		left: 40px;
		top: 32px;
		color: @readableLight;
	}
	blockquote cite:before {
		content: '\02014  ';
	}
}

.entry-title a {
	text-decoration: none;
}

.single .site-content {
	.entry-title {
		font-size: 44px;
		line-height: 54px;
		margin-bottom: 20px;
	}
}

.site-content {
	article {
		border-bottom: solid 1px @light;
		padding-left: 30px + 10px;
		margin: 0;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.entry-title {
		font-size: 20px;
		line-height: 28px;
	}

	.entry-title a {
		color: @text;
		&:hover { color: @primary; }
	}

	.entry-meta {
		font-size: 12px;
		line-height: 15px;
		color: @readableLight;
	}

	.entry-meta a {
		color: @readableLight;
		text-decoration: none;
		&:hover { color: @primary }
	}

	.entry-content,
	.entry-header,
	.entry-summary {
		-ms-word-wrap: break-word;
		word-wrap: break-word;
	}

	.entry-header {
		.entry-meta {
			font-size: 12px;

			.author {
				color: @text;
				font-weight: 600;
			}
		}
	}
}

.blog .site-content,
.archive .site-content,
.search .site-content {

	.has-post-thumbnail {

		.entry-thumbnail {
			float: left;
		}

		.entry-thumbnail img {
			float: left;
		}

		.entry-title {
			clear: none;
			margin-top: -5px;
		}

		.entry-meta {
			clear: none;
		}

		.entry-meta:after {
			display: table;
			content:'';
			line-height: 0;
			clear: both;
		}

		.entry-header,
		.entry-summary,
		.entry-meta {
			margin-left: 220px + 20px;
		}
	}
}

.featured-content {
	article {
		padding-top: 40px;
		padding-bottom: 40px;
		margin: 0;
		padding-left: 30px + 10px;
		padding-right: 30px + 10px;
		border-bottom: solid 1px @light;
	}

	.entry-title {
		font-size: 20px;
		line-height: 28px;
	}

	.entry-title a {
		color: @text;
		&:hover { color: @primary; }
	}

	.has-post-thumbnail {

		.entry-thumbnail,
		.entry-thumbnail a,
		.entry-thumbnail img {
			float: left;
		}

		.entry-thumbnail {
			width: 50%;
		}

		.entry-thumbnail a {
			margin-right: 10px;
		}

		.entry-thumbnail img {
			width: 100%;
		}

		.entry-title {
			clear: none;
			margin-top: -5px;
		}

		.entry-header,
		.entry-summary,
		.entry-meta {
			margin-left: 50%;
			padding-left: 10px;
		}

		.entry-summary:after {
			display: table;
			content:'';
			line-height: 0;
			clear: both;
		}
	}
}

.featured-content-secondary {
	margin-top: -1px; /* cover the bottom border of the main featured content area */
	background: white url('../images/absurdidad.png') 0 0 repeat;

	article {
		margin-left: 10px;
		margin-right: 10px;
		width: 220px;
		float: left;
	}

	.entry-thumbnail {
		margin-bottom: 20px;
	}

	.entry-title {
		font-size: 20px;
		line-height: 28px;
	}

	.entry-title a {
		color: @text;
		&:hover { color: @primary; }
	}
}

article:hover {
	.entry-thumbnail img { opacity: 0.9; }
	.entry-title a { color: @primary; }
}

.entry-thumbnail {
	position: relative;
}

.entry-thumbnail img {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	max-width: 100%;
	height: auto;
}

.entry-thumbnail-category {
	position: absolute;
	left: -6px;
	top: 8px;
	background: @text;
	padding: 2px 8px;
	font-size: 8px;
	text-transform: uppercase;
	color: #777;

	&:hover {
		background: @primary;
		&:before {
			border-top: 6px solid darken(@primary, 10%);
		}
	}
}

.entry-thumbnail-category a {
	color: white;
	text-decoration: none;
}

.entry-thumbnail-category:before {
	content:'';
	font-size: 0px; line-height: 0%; width: 0px;
	border-top: 6px solid darken(@text, 10%);
	border-left: 6px solid transparent;
	position: absolute;
	left: 0px;
	top: 24px;
}

.wp-caption {
	border: none;
}

.wp-caption .wp-caption-text {
	max-width: 98%;
	width: 100%;
	display: block;
	background: #efefef;
	border: solid 1px #efefef;
	margin: 0;
	padding: 5px;
	color: #999;
}

.wp-caption img,
.wp-caption img[class*="wp-image-"] {
	border: solid 1px #ccc;
	padding: 5px;
	margin: 0;
}

.widget-area {
	padding-top: 41px;
	.widget {
		margin-bottom: 40px;
		margin-right: 40px;

		ul {
			list-style: none;
			margin-left: 0;
		}

		ul li {
			padding-bottom: 8px;
		}
	}

	.widget-title {
		font-size: 16px;
		margin-bottom: 20px;
	}
	.widget-title a {
		color: @text;
		&:hover { color: @primary; }
	}

	.widget_recent_entries .post-date {
		color: @readableLight;
	}

	.widget_twitter a {
		color: @text;
		text-decoration: none;
		&:hover { color: @primary; }
	}

	.widget_twitter .timesince {
		color: @readableLight;
	}

	.widget_twitter .tweets li {
		padding: 20px 0;
		border-bottom: solid 1px lighten(@light, 10%);
	}

	.widget_twitter .tweets li:last-child {
		border-bottom: none;
	}
}

input,
textarea {
	font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 100%;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button-primary,
a.button-primary,
.wpm-button-primary,
a.wpm-button-primary {
	display: inline-block;
	background: @primary;
	color: white;
	text-decoration: none;
	padding: 10px;
	border: none;
	font-weight: 300;
	cursor: pointer;
	font-size: 100%;

	&:hover, &:focus, &:active { background: lighten(@primary, 5%); }
}

.button,
a.button,
.wpm-button,
a.wpm-button {
	display: inline-block;
	background: @text;
	color: white;
	text-decoration: none;
	padding: 10px;

	&:hover { background: lighten(@text, 5%); }
}

.navigation-paging,
.navigation-post {
	padding-left: 40px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 10px;
	background: lighten(@light, 10%);
}

.comments-area {
	padding-left: 40px;
	margin-top: 40px;

	.comments-title {
		font-size: 20px;
		line-height: 28px;
	}

	.comment-list {
		list-style: none;
		padding: 0;
		margin: 40px 0 0 0;
	}

	ul.children {
		list-style: none;
		padding-left: 56px;
		margin: 0;
	}

	article {
		margin: 0;
		padding: 20px 0 32px 0; /* added 12 due to avatar top: 12 */
		border-top: solid 1px @light;
		border-bottom: none;
	}

	.comment-content {
		h1 { font-size: 16px; }
		h2, h3, h4, h5, h6 { font-size: 13px; }
		h1, h2, h3, h4, h5 { margin: 20px 0; }
		blockquote { background: none; }
	}

	.comment-content,
	.reply,
	li.comment #respond {
		margin-left: 56px;
	}

	footer {
		margin-bottom: 20px;
		.comment-author,
		.comment-meta {
			display: inline-block;
		}
		cite { font-style: normal; }
		.says { display: none; }

		.comment-author {
			font-family: Georgia, "Times New Roman", serif;
			font-size: 20px;
			line-height: 28px;

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

			.avatar {
				position: relative;
				top: 12px;
				margin-right: 10px;
				border-radius: 50%;
			}
		}

		.comment-meta {
			margin-left: 4px;
		}

		.comment-meta,
		.comment-meta a {
			color: @readableLight;
			text-decoration: none;
			font-size: 12px;

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

	#respond {
		border-top: solid 1px @light;
		padding-top: 40px;
	}

	#reply-title {
		font-size: 20px;
		line-height: 28px;
	}
}

#commentform {
	label {
		display: block;
		.required { color: red; }
	}
}

/* Widgets */

.widget.widget_calendar {
	table {
		margin-bottom: 20px;
	}

	th, td {
		padding: 8px 8px;
		border-bottom: solid 1px @light;
	}

	tr:hover td {
		background: lighten(@light, 10%);
	}

	#today {
		font-weight: bold;
	}
}

/* Full-width Template */

.expound-full-width #secondary {
	display: none;
}

.expound-full-width #primary {
	width: 30px + 720px + 260px + 10px;
	margin-right: 0;
}

.expound-full-width .site-content article {
	padding-right: 30px + 10px;
}

.expound-full-width .navigation-paging,
.expound-full-width .navigation-post {
	padding-right: 30px + 10px;
}

.expound-full-width .comments-area {
	padding-right: 30px + 10px;
}

/* Media Queries */

@media (max-width: 1080px) {
	#page { width: 1020px - 60px * 1; }
	#primary { width: 740px - 60px * 1; }
	.expound-full-width #primary { width: 1020px - 60px * 1; }

	.featured-content-secondary {
		padding-top: 20px;
		padding-bottom: 0;
		padding-left: 40px;
		padding-right: 40px;
	}

	.featured-content-secondary article {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.featured-content-secondary .entry-thumbnail {
		float: left;
		margin-bottom: 0;
	}

	.featured-content-secondary .has-post-thumbnail .entry-header,
	.featured-content-secondary .has-post-thumbnail .entry-summary {
		margin-left: 240px;
	}

	.featured-content-secondary .has-post-thumbnail .entry-title {
		clear: none;
		margin-top: -5px;
	}

	.single .site-content .related-content article {
		width: 220px - 20px * 1;
	}
}

@media (max-width: 1020px) {
	#page { width: 1020px - 60px * 2; }
	#primary { width: 740px - 60px * 2; }
	.expound-full-width #primary { width: 1020px - 60px * 2; }

	.single .site-content .related-content article {
		width: 220px - 20px * 2;
	}
}

@media (max-width: 960px) {
	#page { width: 1020px - 60px * 3; }
	#primary { width: 740px - 60px * 3; }
	.expound-full-width #primary { width: 1020px - 60px * 3; }

	.single .site-content .related-content article {
		width: 220px - 20px * 3;
	}
}

@media (max-width: 900px) {
	#page { width: 87%; }
	#primary { width: 100%; margin-right: 0; }
	#secondary { width: 100%; margin-left: 0; }
	.expound-full-width #primary { width: 100%	; }

	.featured-content .has-post-thumbnail .entry-thumbnail {
		width: 220px;
	}

	.featured-content .has-post-thumbnail .entry-thumbnail a {
		margin-right: 0;
	}

	.featured-content .has-post-thumbnail .entry-header,
	.featured-content .has-post-thumbnail .entry-summary {
		margin-left: 220px + 20px;
		padding-left: 0;
	}

	.site-content article {
		padding-right: 40px;
	}
	.widget-area .widget {
		margin-left: 40px;
	}

	.comments-area {
		padding-right: 40px;
	}
}

@media (max-width: 700px) {
	.featured-content .has-post-thumbnail .entry-thumbnail,
	.featured-content-secondary .has-post-thumbnail .entry-thumbnail,
	.has-post-thumbnail .entry-thumbnail {
		float: left;
		display: block;
		width: 100%;
		margin-bottom: 30px;
	}

	.featured-content .has-post-thumbnail .entry-header,
	.featured-content .has-post-thumbnail .entry-summary,
	.featured-content-secondary .has-post-thumbnail .entry-header,
	.featured-content-secondary .has-post-thumbnail .entry-summary,
	.blog .site-content .has-post-thumbnail .entry-header,
	.blog .site-content .has-post-thumbnail .entry-summary,
	.blog .site-content .has-post-thumbnail .entry-meta,
	.archive .site-content .has-post-thumbnail .entry-header,
	.archive .site-content .has-post-thumbnail .entry-summary,
	.archive .site-content .has-post-thumbnail .entry-meta,
	.search .site-content .has-post-thumbnail .entry-header,
	.search .site-content .has-post-thumbnail .entry-summary,
	.search .site-content .has-post-thumbnail .entry-meta {
		margin-left: 0;
		clear: both;
	}

	.single .site-content .entry-title,
	.site-content .entry-content h1,
	.site-content .comment-content h1 {
		font-size: 28px;
		line-height: 38px;
	}

	.single .site-content .related-content {
		padding-bottom: 20px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.single .site-content .related-content .related-content-title {
		margin-left: 0;
	}

	.single .site-content .related-content article {
		width: 100%;
		padding: 20px 0 0 0;
		margin: 0;
	}

	.single .site-content .has-post-thumbnail .entry-thumbnail {
		width: 50px;
		margin-bottom: 0;
	}
}

@media (max-width: 600px) {
	#page { width: 85%; }
}