/*
Theme Name: 	BlueSquared
Description: 	A simple responsive blue theme.
Version: 		1.0
Author: 		Ryan McGrane
Author URI: 	http://ryanmcgrane.com
Tags: 			blue, white, flexible-width, two-columns
License: 		GNU General Public License v2.0
License URI: 	http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Default Styles
04 Media queries
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";
@import "css/grid.less";

@main: #00A6DE;

* {
	/* Make it so padding isn't added in the element's total width */
	-moz-box-sizing: border-boox;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

div, article, section, header, footer, nav, li {
	position: relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ 
}

.group:after {
	/* For clearing */
	display: block;
	height: 0;
	clear: both;
	content: ".";
	visibility: hidden;
}

body { 
	background: #fff;
	width: 90%;
	margin: 50px auto 0;
	-webkit-transition: margin .1s;
}

::-moz-selection {
	background: #ff0;
	color: #333;
}

::selection {
	background: #222;
	color: #fff;
}

p {
	margin-bottom: 1.3125em;
}

a {
	color: @main;
	text-decoration: none;

	&:hover {
		color: #aaa;
	}
}

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 0.875em (14px equivalent)
16 / 16	= 1em (16px equivalent)
18 / 16 = 1.125em (18px equivalent)
21 / 16 = 1.3125em (21px equivalent)
24 / 16 = 1.5em	(24px equivalent)
30 / 16 = 1.875em (30px equivalent)

*/

body, input, textarea {
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.7;
	color: #444;
}

h1, h2, h3, h4, h5, h6 { 
	font-weight: bold;
}

article h1 {
	font-size: 2.25em;
	font-weight: 500;
	line-height: 1.1;
	font-family: 'Bree Serif', sans-serif;
}

/* ---------------------------------------------------------------------------------------------------------- 
03 Default Styles (from a desktop-down approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

.main-header {
	.col;
	.span_3;
	margin-left: 0;
	margin-bottom: 5.625em;

	h1 a {
		background: @main;
		text-align: center;
		padding: 1.875em 0;
		display: block;
		color: #fff;
		font-size: 1.5em;
		text-decoration: none;
		font-weight: 300;
	}
}

.menu-toggle {
	display: none;
}

.menu-container {
	margin: 1.875em 0 0 0;

	li {
		list-style: none;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	li a {
		padding: 1.125em .625em;
		border-bottom: 1px solid #ccc;
		display: block;
		color: #777;
		text-decoration: none;
		position: relative;

		&:hover {
			background: #efefef;
			color: #444;
		}
	}

	.dropdown > a:after {
		content: "\f078";
		font-family: FontAwesome;
		font-size: 13/16em;
		position: absolute;
		right: .625em;
		top: 50%;
		margin-top: -10/16em;
		color: #aaa;
	}

	.sub-menu {
		display: none;
	}

	li:hover ul {
		display: block;

		li a {
			padding: 1.125em 2em;
			background: #f5f5f5;

			&:hover {
				background: #efefef;
			}
		}
	}
}

#searchform {
	margin: 3em 0 0 0;
	position: relative;

	.screen-reader-text {
		display: none;
	}

	input[type="text"] {
		border: 2px solid #ccc;
		padding: 7/16em 10/16em 7/16em 35/16em;
		width: 100%;

		&:focus {
			outline: none;
			border: 2px solid @main;
		}
	}

	input[type="submit"] {
		display: none;
	}

	&:after {
		content: "\f002";
		position: absolute;
		font-family: FontAwesome;
		top: 8/16em;
		left: 10/16em;
		font-size: 18/16em;
		color: #aaa;
	}
}

.content > ol {
	padding: 0;
	margin: 0;
}

.post-article {
	overflow: hidden;
}

.post-meta {
	.col;
	.span_2;
	margin-left: 0;
}

.post-meta time {
	.day, .month {
		display: block;
		line-height: 1;
	}

	.day {
		font-size: 1.5em;
	}

	.month {
		text-transform: uppercase;
	}
}

.article-header {
	margin-bottom: 2.25 * .375em;

	.comments-link, time {
		font-size: 14/16em;
		color: #777;
	}

	h1 {
		margin-bottom: .375em;
		word-wrap: break-word;
	}

	i[class^="icon-"] {
		padding: 0 8/16em 0 0;
	}
}

.post-meta {
	font-size: 13/16em;
	margin-top: 4px;
}

.primary-meta {
	width: 80px;
	margin: 0 auto;
}

.post-meta time {
	float: left;
}

.comments-link {
	float: left;
	margin-left: 2em;

	a, .comments-off {
		position: relative;
		line-height: 1;
		display: block;
		color: #aaa;
		text-align: center;
		text-transform: uppercase;

		&:before {
			content: "\f086";
			font-size: 1.5em;
			font-family: FontAwesome;
			display: block;
			line-height: 1;
		}
	}

	a:hover {
		color: @main;

		&:before {
			color: @main;
		}
	}
}

.article-content {
	.col;
	.span_10;
}

.post-article {
	margin-bottom: 5.625em;
}

.article-content img {
	border: 2px solid #ccc;
	padding: 2px;
	max-width: 100%;
	height: 100%;
}

.article-content {
	h2 {
		font-size: 1.75em;
		padding-bottom: .375em;
		margin-bottom: .375em;
		border-bottom: 1px solid #ccc;
		font-family: 'Bree Serif';
		font-weight: normal;
		line-height: 1.1;
	}

	h3 {
		font-size: 1.5em;
		margin-bottom: .375em;
		line-height: 1.1;
	}

	ul {
		margin-bottom: 1.3125em;
		padding-left: 40px;

		li {
			list-style: disc;
		}
	}

	ol {
		margin-bottom: 1.3125em;
		padding-left: 40px;

		li {
			list-style: decimal;

			ul {
				li {
					list-style: disc;
				}
			}
		}
	}

	code, kbd {
		padding: .1875em .3125em;
		background: #efefef;
		font-size: .8125em;
	}

	pre {
		padding-bottom: 1.3125em;
	}

	dd {
		margin: 0;
	}
}

.post-article .wp-cation, .post-article .gallery-item {
	border: 2px solid #ccc;
	padding: 2px;
	margin-bottom: 1.3125em;
	display: block;
	max-width: 100%;

	img {
		width: 100%;
		height: 100%;
		border: 0 !important;
		padding: 0;
	}

	.wp-caption-text, .gallery-caption {
		background: #222;
		color: #fff;
		padding: 7px 10px;
	}
}

.gallery-item {
	width: 33% - 6em !important;
	margin: 0 1em 1.3125em;
}

.post-article h1 a {
	color: #222;
	text-decoration: none;


	&:hover {
		color: @main;
	}
}

.post-article time {
	color: #777;
}

.secondary-meta {
	clear: both;
	overflow: hidden;
}

.post-author {
	display: block;
	margin-top: 2em;
	text-align: center;

	.avatar {
		width: 45px;
		height: 45px;
		border-radius: 30px;
		display: block;
		margin: 0 auto;
	}
}

.post-categories-container {
	text-align: center;
	color: #aaa;
	line-height: 1;
	margin-top: 2em;

	 ul {
	 	font-size: 1em;
	 	line-height: 1.7;
	 	padding: 0;

	 	li {
	 		list-style: none;
	 	}
	 }
}

.single .post-article, .page .post-article {
	margin-bottom: 3em;
}

.page .article-content, .error404 .article-content {
	.span_12;
}

.post-pages {
	margin-bottom: 3em;

	.link-text {
		background: #dedede;
		color: #555;
		padding: 5px 13px;
		border-bottom: 2px solid #ccc;
		display: inline-block;
		font-size: 13/16em;
	}

	a {
		padding: 5px 13px;
		background: #efefef;
		border-bottom: 2px solid #ccc;
		color: #999;
		display: inline-block;
		font-size: 13/16em;

		&:hover {
			background: #dedede;

			.link-text {
				background: #dedede;
				color: #555;
			}
		}

		.link-text {
			background: #efefef;
			color: #999;
			padding: 0;
			border-bottom: 0;
			font-size: 1em;
		}
	}
}

.more-link {
	display: block;
	margin-top: 1.325em;
	padding: 10px 0;
	text-align: center;
	color: #777;
	background: #f5f5f5;
	border: 1px solid #dedede;
	border-radius: 3px;
	text-decoration: none;

	&:hover {
		background: #efefef;
		color: #222;
	}
}

.previous-link, .next-link {
	a {
		padding: 5px 13px;
		font-size: 13/16em;
		color: #999;
		border-bottom: 2px solid #ccc;
		background: #efefef;

		&:hover {
			background: #dedede;
			color: #555;
		}
	}
}

.previous-link {
	float: left;
}

.next-link {
	float: right;
}

#comments {
	border-top: 1px solid #ccc;
	padding-top: 3em;
	clear: both;

	article {
		margin-bottom: 2em;
		overflow: hidden;

		p {
			clear: both;
		}
	}

	.avatar {
		float: left;
		width: 3em;
		height: 3em;
		margin-right: 1em;
	}

	.comments-header {
		float: left;
		margin-bottom: 1em;
	}

	p {
		margin-bottom: 1em;
	}

	h4 {
		font-size: 1.5em;
		line-height: 1;

		 a {
			color: @main;
			text-decoration: none;

			&:hover {
				color: #222;
			}
		}
	}

	time a {
		color: #777;
		font-size: .875em;
		text-decoration: none;

		&:hover {
			color: #222;
		}
	}

	.comment-reply-link {
		color: #fff;
		background: @main;
		border-radius: 3px;
		padding: 5px 10px;
		text-decoration: none;
		border: 1px solid @main; /* Make it line up with edit link */
		font-size: .875em;

		&:hover {
			background: #222;
			border: 1px solid #222;
		}
	}

	.comment-edit-link {
		float: right;
		padding: 5px 10px;
		color: #777;
		background: #f5f5f5;
		border: 1px solid #dedede;
		border-radius: 3px;
		text-decoration: none;
		font-size: .875em;

		&:hover {
			background: #efefef;
			color: #222;
		}
	}

	.children {
		.push_1;
		border-left: 1px solid #ccc;
		padding-left: 1.325em;
	}

	#reply-title {
		font-size: 1.5em;
	}
}

.page-numbers {
	padding: 5px 13px;
	background: #efefef;
	border-bottom: 2px solid #ccc;
	color: #999;
	font-size: 13/16em;
}

.page-numbers:hover {
	background: #dedede;
	color: #555;
}

.page-numbers.current {
	background: #dedede;
	color: #555;
}

#respond {
	margin-top: 5.625em;

	label {
		display: none;
	}

	.logged-in-as {
		float: right;
		color: #777;
		font-size: .875em;
		margin: -25px 0 0 0;
		padding: 0;
	}

	#comment {
		width: 100%;
	}

	.form-submit input[type='submit'] {
		padding: .625em 10/16em;
		color: #fff;
		background: @main;
		border: 1px solid @main;
		width: 100%;
		border-radius: 3px;

		&:hover {
			background: #222;
			border: 1px solid #222;
		}
	}
}

.required {
	display: none;
}

.comment-form-author, .comment-form-email, .comment-form-url {
	width: 33.33%;
	float: left;
	padding: 0 .5em;
	position: relative;

	input[type="text"] {
		width: 100%;
		border: 2px solid #ccc;
		padding: 5px 5px 5px 30px;

		&:focus {
			border: 2px solid @main;
			outline: none;
		}
	}

	&:before {
		content: "\f0e0";
		position: absolute;
		font-family: FontAwesome;
		font-size: 14/16em;
		color: #aaa;
		top: 26px;
		left: 20px;
	}
}

.comment-form-author {
	left: -.5em;

	&:before {
		content: "\f007";
	}
}

.comment-form-url {
	right: -.5em;

	&:before {
		content: "\f0ac";
	}
}

.comment-form-comment {
	clear: both;

	textarea {
		border: 2px solid #ccc;
		padding: 5px;

		&:focus {
			border: 2px solid @main;
			outline: none;
		}
	}
}

blockquote, .article-content aside {
	padding-left: 1em;
	margin-left: 3em;
	border-left: 2px solid #ccc;
	font-style: italic;
	color: #777;
}

.content {
	.col;
	.span_7;
	.push_1;
	margin-bottom: 5.625em;
}

.main-footer {
	clear: both;
	background: #222;
	padding: 1em 2em;
	color: #aaa;
	overflow: hidden;

	.theme-copyright {
		float: left;
	}

	.wp-copyright {
		float: right;
	}

	a {
		color: #fff;

		&:hover {
			color: #ccc;
		}
	}
}

/* Tables */

table, th, td {
	border: 1px solid #ccc;
	padding: 7/16em;
}

tr.odd td {
	background: #f5f5f5;
}

/* Wordpress Default Classes */

.aligncenter {
	text-align: center;
}

.post-article figure.aligncenter {
	margin: 0 auto 1.3125em;
	display: block;
	text-align: left;
}

.alignleft {
	float: left;
	margin-right: 1.3125em;
}

.alignright {
	float: right;
	margin-left: 1.3125em;
}

.sticky {
	background: #eff5f7;
	padding: 1.5em;
	border-bottom: 2px solid #b1ddec;
}

.bypostauthor {
	position: relative; /* This is here just so the compiler puts it in style.css. You can remove this and add your own styles if you want. */
}

/* Headings */
.article-content {
	h2, h3 {
		margin-top: 1.3125em;
	}
}

.post-tags {
	font-size: 13/16em;
}

/* ---------------------------------------------------------------------------------------------------------- 
04 Media queries ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1143px) {
	.post-meta {
		display: block;
		.span_12;
		margin: 0 0 4px 0;
	}

	.primary-meta {
		width: auto;
		float: left;
	}

	.post-meta time {
		.day {
			display: inline;
			font-size: 1em;
		}

		.month {
			display: inline;
			text-transform: capitalize;
		}
	}

	.comments-link {
		margin-left: 1.5em;
		a, .comments-off {
			display: inline;
		
			&:before {
				display: inline;
				font-size: 1em;
				padding-right: 5/16em;
			}
		}
	}

	.secondary-meta {
		float: right;
		clear: none;
		overflow: visible;
	}

	.post-author {
		float: left;
		margin-top: 0;
		padding-right: 1.5em;

		.avatar {
			display: none;
		}

		&:before {
			content: 'Posted by';
			position: absolute;
			top: 0;
			left: -10em;
			width: 200px;
			height: 100%;
			color: #aaa;
		}
	}

	.post-categories-container {
		float: right;
		margin-top: 0;
		line-height: 1.7;
	}

	.post-categories {
		display: inline;

		li {
			display: inline;
		}
	}

	.article-content {
		.span_12;
	}
}

@media screen and (max-width: 940px) {
	.main-header {
		display: block;
		width: 100%;

		h1 {
			width: 100%;
			margin-left: -6%;
			overflow: hidden;
			position: relative;
			z-index: 500;
		}

		h1 a {
			.col;
			.span_5;
			padding: 1.875em 0;
			margin-left: 0;
		}
	}

	.site-tools {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
	}

	#searchform {
		position: absolute;
		top: 50%;
		.span_4;
		margin-top: -20/16em;
		right: 0;
	}

	.menu-container {
		width: 100%;
		margin: 2.5em 0 0 0;
		position: absolute;
		bottom: -44/16em - 2em;
		left: 0;
		z-index: 1000;

		li {
			display: inline-block;

			a {
				display: inline-block;
				padding: .625em 1.125em;
				border-bottom: 0;
			}
		}

		.sub-menu {
			display: none;
		}

		li:hover ul {
			display: block;
			position: absolute;
			top: 2.7em;
			left: 0;
			width: 20em;
			background: #f5f5f5;

			li {
				width: 100%;
				display: block;
			}

			li a {
				padding: 1.125em 2em;
				background: #f5f5f5;
				display: block;
				width: 100%;

				&:hover {
					background: #efefef;
				}
			}
		}
	}

	.content {
		.span_12;
		clear: both;
		margin-top: 3em;
	}

	.post-meta {
		display: block;
	} 

	.post-meta {
		display: block;
		.span_2;
		margin: 4px 0 0 0;
	}

	.primary-meta {
		width: 70px;
		float: none;
	}

	.post-meta time {
		.day {
			display: block;
			font-size: 1.5em;
		}

		.month {
			display: block;
			text-transform: uppercase;
		}
	}

	.comments-link {
		margin-left: 2em;

		a {
			display: block;
		
			&:before {
				display: block;
				font-size: 1.5em;
				padding-right: 0;
			}
		}
	}

	.secondary-meta {
		float: none;
		clear: both;
		overflow: hidden;
	}

	.post-author {
		float: none;
		margin-top: 2em;
		padding-right: 0;

		.avatar {
			display: block;
		}

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			color: #aaa;
		}
	}

	.post-categories-container {
		float: none;
		margin-top: 2em;
	}

	.post-categories {
		display: block;

		li {
			display: block;
		}
	}

	.article-content {
		.span_10;
	}
}

@media screen and (max-width: 655px) {

	.main-header {
		display: block;
		width: 100%;

		h1 {
			width: 100%;
			margin-left: 0;
			overflow: visible;
			position: relative;
			z-index: 500;
		}

		h1 a {
			.col;
			.span_5;
			padding: 1.875em 0;
			margin-left: 0;
		}
	}

	.site-tools {
		position: relative;
		top: auto;
		height: auto;
		width: auto;
	}

	#searchform {
		position: relative;
		top: auto;
		margin-top: 2em;
		right: auto;
	}

	.menu-container {
		width: auto;
		margin: auto;
		position: relative;
		bottom: auto;
		left: auto;
		z-index: 1000;
	}

	.main-header {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  		display: -ms-flexbox;      /* TWEENER - IE 10 */
  		display: -webkit-flex;     /* NEW - Chrome */
  		display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

		-webkit-box-align: start; 
		-moz-box-align: start; /* OLD… */
   		-ms-flex-align: start; /* You know the drill now… */
   		-webkit-align-items: flex-start;
   		align-items: flex-start;

   		-webkit-box-orient: vertical; 
		-moz-box-orient: vertical; /* OLD… */
   		-ms-flex-direction: column; /* MID */
   		-webkit-flex-direction: column;
   		flex-direction: column;


		width: 100%;
		position: relative;
		margin-bottom: 2em;

		h1 {
			width: 100%;
			position: relative;
			-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  			-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
 			-ms-flex-order: 2;              /* TWEENER - IE 10 */
  			-webkit-order: 2;               /* NEW - Chrome */
  			order: 2;  						/* NEW - Spec */
		}

		h1 a {
			.col;
			.span_6;
			margin-left: -6%;
			padding: 1.875em 0;
		}

		
	}

	.menu-toggle {
		display: block;
		font-size: 2.25em;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -.5em;
		cursor: pointer;
	}

	.site-tools {
		display: none;
		-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  		-moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
 		-ms-flex-order: 1;              /* TWEENER - IE 10 */
  		-webkit-order: 1;               /* NEW - Chrome */
  		order: 1;  					 /* NEW - Spec */
		/*position: absolute;
		top: -20.5em;*/
		overflow: hidden;
		width: 100%;
		padding-bottom: 2em;
		margin-bottom: 2em;
		border-bottom: 2px solid #dedede;

		&:before {
			content: "";
			position: absolute;
			width: 0; 
			height: 0; 
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-top: 15px solid #fff;
			right: 0px;
			bottom: -15px;
			z-index: 500;
		}

		&:after {
			content: "";
			position: absolute;
			width: 0; 
			height: 0; 
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-top: 15px solid #dedede;
			right: 0px;
			bottom: -17px;
			z-index: 100;
		}
	}

	.menu-container {
		width: 100%;
		margin: 0;

		li {
			display: block;

			a {
				display: block;
				padding: 1.125em .625em;
				border-bottom: 1px solid #ccc;
			}
		}

		li:hover ul {
			display: block;
			position: relative;
			top: auto;
			left: auto;
			width: 100%;
			background: #f5f5f5;

			li {
				width: 100%;
				display: block;
			}

			li a {
				padding: 1.125em 2em;
				background: #f5f5f5;
				display: block;
				width: 100%;

				&:hover {
					background: #efefef;
				}
			}
		}
	}

	.open-menu {
		margin-top: 1em;
	}

	#searchform {
		width: auto;
	}

	.content {
		.span_12;
	}

	.post-meta {
		display: block;
		.span_12;
		margin: 0 0 4px 0;
	}

	.primary-meta {
		width: auto;
		float: left;
	}

	.post-meta time {
		.day {
			display: inline;
			font-size: 1em;
		}

		.month {
			display: inline;
			text-transform: capitalize;
		}
	}

	.comments-link {
		margin-left: 1.5em;
		a, .comments-off {
			display: inline;
		
			&:before {
				display: inline;
				font-size: 1em;
				padding-right: 5/16em;
			}
		}
	}

	.secondary-meta {
		float: right;
		clear: none;
		overflow: visible;
	}

	.post-author {
		float: left;
		margin-top: 0;
		padding-right: 1.5em;

		.avatar {
			display: none;
		}

		&:before {
			content: 'Posted by';
			position: absolute;
			top: 0;
			left: -10em;
			width: 200px;
			height: 100%;
			color: #aaa;
		}
	}

	.post-categories-container {
		float: right;
		margin-top: 0;
		line-height: 1.7;
	}

	.post-categories {
		display: inline;

		li {
			display: inline;
		}
	}

	.article-content {
		.span_12;
	}

	.comment-form-author, .comment-form-email, .comment-form-url {
		width: 100%;
		padding: 0;

		&:before {
			left: 12px;
		}
	}

	.comment-form-author {
		left: 0;
	}

	.comment-form-url {
		right: 0;
	}

	.main-footer {
		.theme-copyright, .wp-copyright {
			float: none;
			display: block;
			text-align: center;
		}
	}

}

@media screen and (max-width: 500px) {
	.primary-meta {
		display: block;
		width: 100%;
	}

	.comments-link {
		float: right;
	}

	.secondary-meta {
		display: block;
		width: 100%;
	}

	.post-author {
		margin-left: 4.25em;
		&:before {
			left: -5.75em;
		}
	}
}