$sans-font: 'PT Sans', Verdana, Geneva, sans-serif;
$serif-font: 'Bree Serif', Georgia, serif;
$heading-color: #555;
$text-color: #444;
$link-color: #388ca4;
$link-color-rgba: rgba(56, 140, 164, 0.5);
$border-color: #ddd;
$primary-bg-color: rgba( 255, 255, 255, 0.9 );
$secondary-bg-color: rgba( 248, 248, 248, 0.7 );
$tertiary-bg-color: rgba( 0, 0, 0, 0.7 );
$blocks-bg-color: #f8f8f8;


@mixin primary-box {
	background-color: #fff;
	background-color: $primary-bg-color;
	@include box-shadow( rgba(0, 0, 0, 0.1) 0 0 0.5rem );
}

@mixin secondary-box {
	background-color: #f6f6f6;
	background-color: $secondary-bg-color;
	@include box-shadow( rgba(0, 0, 0, 0.1) 0 0 0 0.1rem inset);
}

@mixin blocks-box {
	background: $blocks-bg-color;
	@include box-shadow( rgba(0, 0, 0, 0.2) 0 0 0.2rem );
}


@mixin entries-4col {
	.js #dynamic-grid { 
		margin: -10px -10px 20px;
		margin: -1rem -1rem 2rem;
		.hentry {
			float: left;
			width: 280px;
			width: 28rem;
			margin: 10px;
			margin: 1rem;
			padding: 10px;
			padding: 1rem;
			.entry-header {
				text-align: left;
			}
		}
	}
}


@mixin body-6col {
	body {
		padding: 0 20px;
		padding: 0 2rem;
	}
	.site-header {
		.header-main {
			padding: 30px 20px 32px;
			padding: 3rem 2rem 3.2rem;
		}
		.site-title {
			font-size: 40px;
			font-size: 4rem;
		}
		.site-description {
			font-size: 14px;
			font-size: 1.4rem;
		}
	}
	.has-logo-image .site-header .header-main {
		padding: 30px 20px;
		padding: 3rem 2rem;
		img {
			max-height: 80px;
			max-height: 8rem;
			width: auto;
		}
	}

	.custom-header.no-logo-image.header-text-hidden .site-header .header-main {
		min-height: 78px;
		min-height: 7.8rem;
	}
	.page-header,
	.hentry,
	.comments-area,
	.post-navigation {
		padding: 20px;
		padding: 2rem;
	}
	.single,
	body.page,
	.one-col-excerpts,
	.one-col-full-posts,
	.not-found,
	.no-js .hentry {
		.entry-title {
			font-size: 27px;
			font-size: 2.7rem;
		}
		.entry-content,
		.entry-summary,
		.comment-content,
		.comments-area,
		.pingback {
			font-size: 14px;
			font-size: 1.4rem;
			h1 {
				font-size: 24px;
				font-size: 2.4rem;
			}
			h2 {
				font-size: 22px;
				font-size: 2.2rem;
			}
			h3 {
				font-size: 18px;
				font-size: 1.8rem;
			}
			h4 {
				font-size: 14px;
				font-size: 1.4rem;
			}
		}
	}

	.wp-post-image.attachment-post-thumbnail {
		width: 150px;
		width: 15rem;
	}

	.wp-caption-text, .entry-attachment .entry-caption p {
		font-size: 0.8em;
	}

	.comments-title {
		font-size: 22px;
		font-size: 2.2rem;
	}

	#reply-title {
		font-size: 20px;
		font-size: 2rem;
	}

	ol.commentlist {
		ul.children {
			margin-left: 40px;
			margin-left: 4rem;
			&> li:before {
				font-size: 2.4rem;
				left: -3.6rem;
			}
		}
	}

	.pingback {
		margin: 0 0 20px;
		margin: 0 0 2rem;
		p:before {
			font-size: 16px;
			font-size: 1.6rem;
		}
	}

	article.comment {
		margin: 0 0 20px;
		margin: 0 0 2rem;
		padding-left: 100px;
		padding-left: 10rem;
		min-height: 80px;
		min-height: 8rem;
		footer {
			padding: 0 0 3px;
			padding: 0 0 0.3rem;
			em {
				left: 100px;
				left: 10rem;
			}
		}
	}

	.avatar {
		width: 80px;
		width: 8rem;
		position: absolute;
		top: 10px; top: 1rem;
		left: 10px; left: 1rem;
		@include blocks-box;
	}

	.comment-author {
		cite {
			position: static;
			font-size: 16px;
			font-size: 1.6rem;
		}
	}
	.comment-meta {
		float: right;
		left: 0;
		top: -20px;
		top: -2rem;
		font-size: 12px; font-size: 1.2rem;
	}

	.no-comment-avatars {
		article.comment {
			padding-left: 10px;
			padding-left: 1rem;
		}
		.comment-meta {
			position: relative;
		}
	}

	#respond {
		font-size: 14px;
		font-size: 1.4rem;
	}
}

@mixin content-8col {
	.content-area {
		max-width: 620px;
		max-width: 62rem;
	}
	.single,
	body.page,
	.one-col-excerpts,
	.one-col-full-posts,
	.no-js {
		&.no-sidebar {
			.hentry,
			.comments-area {
				padding: 40px;
				padding: 4rem;
			}
			.entry-header,
			.entry-content,
			.entry-summary,
			#image-navigation,
			.entry-meta,
			.comments-title,
			.comment-navigation,
			ol.commentlist,
			#respond {
				max-width: 660px;
				max-width: 66rem;
				margin-right: auto;
				margin-left: auto;
			}
			.entry-title {
				font-size: 30px;
				font-size: 3rem;
			}
			.entry-content,
			.entry-summary {
				font-size: 16px;
				font-size: 1.6rem;
			}
			.pingback, article.comment {
				margin: 0 0 30px;
				margin: 0 0 3rem;
			}
		}
		&.has-sidebar {
			.site-main {
				padding: 0 240px 0 0;
				padding: 0 24rem 0 0;
			}
			.content-area {
				float: left;
				margin-right: -100%;
				width: 100%;
			}
			.widget-area.sidebar {
				float: right;
				margin-right: -240px;
				margin-right: -24rem;
				width: 220px;
				width: 22rem;
			}
			#the-sidebar {
				width: 220px;
				width: 22rem;
			}
			.entry-title {
				text-align: left;
			}
			.comment-meta {
				float: none;
				position: relative;
				top: 0;
			}
		}
	}
}
@mixin content-10col {
	.single,
	body.page,
	.one-col-excerpts,
	.one-col-full-posts,
	.no-js {
		&.has-sidebar {
			.entry-title {
				font-size: 30px;
				font-size: 3rem;
			}
			.entry-content,
			.entry-summary {
				font-size: 16px;
				font-size: 1.6rem;
			}
		}
	}	
}

@mixin content-12col {
	.content-area {
		max-width: 940px;
		max-width: 94rem;
	}
	.single, body.page
	{
		&.has-sidebar {
			.comment-meta {
				float: right;
				top: -20px;
				top: -2rem;
			}
		}
	}
}

@mixin footer-6col {
	#footer-widgets, #the-sidebar {
		width: 460px;
		width: 46rem;
	}
}
@mixin footer-9col {
	#footer-widgets {
		width: 700px;
		width: 70rem;
	}
}
@mixin footer-12col {
	#footer-widgets {
		width: 940px;
		width: 94rem;
	}
}
@mixin bottom-bar-8col {
	#bottom-bar {
		.footer-text {
			width: 48%;
			float: left;
			text-align: left;
		}
		.site-info {
			width: 48%;
			float: right;
			text-align: right;
		}
	}
}

@mixin non-responsive {
	#page {
		width: 940px; width: 94rem;
	}
	@include entries-4col;
	@include body-6col;
	@include content-8col;
	@include content-10col;
	@include content-12col;
	@include footer-12col;
	@include bottom-bar-8col;
}


@mixin fontello {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin: 0 0.2em;
  text-align: center;
  opacity: 0.8;
  line-height: 1em;
}