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

// GRID column + gutter widths
@columns: 16;
@column-width: 40;
@gutter-width: 20;

// Remove the definition below for a pixel-based layout
@total-width: 100%;

/* COLORS
-------------------------------------------------------------------------------*/
		
@white		:#FFFFFF; 
.white		{color:@white;}
@pink		:#E1055A;
.pink		{color:@pink;}
@blue 		:#3CB6FF;
.blue 		{color: @blue;}
@yellow 	:#DDC917;
.yellow 	{color: @yellow;}
@eggplant 	:#2F172D;
.eggplant	{color: @eggplant;}
@ltyellow 	:#FFFFF0;
.ltyellow 	{color: @ltyellow;}
@gray       :#666666;
.gray 		{color: @gray;}
@ltgray     :#CCCCCC;
.ltgray 	{color: @ltgray;}
@orange     :#FF7E24;
@green     	:#59B200;
@bluegreen  :#0A937C;
@purple 	:#C926FF;


.yellowbg {
	background-color: @ltyellow;
	border-top: solid 1px @yellow;
	border-bottom: solid 1px @yellow;
	.frametitle span {background-color:@ltyellow !important;}
}

/* TYPOGRAPHY
-------------------------------------------------------------------------------*/
html 				{-webkit-font-smoothing: antialiased;}
.hand_bold 			{font-family:'CMHELLOILIKEYOUW01-Bold', sans-serif;}
.hand 				{font-family:'CMHELLOILIKEYOUW01-Regu', sans-serif;}
.serif 				{
					font-family: "ff-meta-serif-web-pro",serif;
					font-style: normal;
					font-weight: 500;
					}
body				{
						font: normal 16px/150% "ff-meta-serif-web-pro",serif; 
						.trans;
						.eggplant;
						-webkit-font-smoothing: antialiased !important;
						-o-font-smoothing: antialiased;
						-moz-font-smoothing: antialiased;
						-ms-font-smoothing: antialiased;
						font-smoothing: antialiased;
					}
.font 				{font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
.caps 				{text-transform:uppercase; letter-spacing:.08em;}
.default () 		{text-transform:none; letter-spacing:0; font-weight:normal;}
.bold, strong 		{font-weight:700;}
em 					{font-style:italic;}
a:link, a:visited 	{color:@pink; text-decoration: none; .relative; &:hover {color:@eggplant;} .trans;}
h1, h2 {
	.hand; font-size: 33px;
}

h3 {font-size: 25px; .bold; margin-bottom:20px;}
h4, .heading4 {.caps; font-size: 14px; .bold; .serif;}
h5 {.caps; font-size: 14px;}
h6 {color:#888; font-size: 14px; font-weight: normal;}

.frametitle {
	.hand_bold;
	text-align: center; 
	.relative;
	margin-bottom: 60px;
	display: block;
    border-top: solid 1px @eggplant;
	span {
		background-color: @white; 
		padding: 10px;
		position: relative; 
		top: -12px; 
	}	
}






/* LESSHAT + LESS DEFINITIONS
-------------------------------------------------------------------------------*/
.shadow () 			{.box-shadow(~"0 0px 1px 5px rgba(0, 0, 0, 0.10)");}
.borderbox () 		{.box-sizing(border-box);}
*, *:after, *:before 
					{.borderbox;}
.wrap () 			{text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word;}
.border () 			{border: solid 1px @ltgray;}
.border-b () 		{border-bottom: solid 1px @ltgray; padding-bottom:10px; margin-bottom:10px;}
.left 				{float:left;}
.right () 			{float:right;}
.floatwrap () 		{overflow:hidden;}
.absolute () 		{position:absolute;}
.relative () 		{position:relative;}
.block ()			{display:block;}
.inblock ()			{display:inline-block;}
.clear 				{clear:both;}
.clearfix () 		{content: ""; display: table; .clear;}
.trans 				{.transition(~"all .5s ease-in-out");}
.diag_bg 			{background: @pink url(images/banded_bg.png) 0 0 repeat;}

/* Current Page Arrow*/
li.current-menu-item:not(.page-item-7) a { 
	.pink;
	&:after {
		content:'';
		.block;
		width: 0; 
		height: 0; 
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;	
		border-top: 10px solid @pink;
		margin-left: 40%;
		position:absolute;
		top:20px;
	}
}

/* Cute little simple form */
.simpleform {
	.relative;
	input[type="text"], input[type="email"]{
		.serif;
		width:190px;
		.border-radius(20px);
		border:solid 1px @yellow;
		color:darken(@yellow, 5%);
		padding:3px 0 5px 30px;
		font-style: italic;
		background-color: @ltyellow;
	}
	.ss-icon {
		color:darken(@yellow, 5%);
		.absolute;
		top:2px;
		left:8px;
		font-size: 11px;
		@media screen and (-webkit-min-device-pixel-ratio:0) {  
			top:6px;
		}
	}
	input[type="image"] {
		.absolute;
		right:6px;
		top:4px;
		@media screen and (-webkit-min-device-pixel-ratio:0) {  
			top:8px;
		}
	}
	input.button {
		.absolute;
		right:8px;
		top:5px;
		background: transparent url(images/submit.png) 0 0 no-repeat;
		border:none;
		width:17px;
		height: 17px;
	}
}


.compass_tt(@color: #CCCCCC)	{
	color:@color;
	h4 a:hover{color:@color;}
	h4.single_article_cat {
		i {margin-right: 5px; font-size: 24px; .left;}
		a {color:@color; .left;}
	}
	&:hover .compass_description {
		display: block;
		p {
			background-color: lighten(@color, 35%); 
			color:@color;
			&:after {color:lighten(@color, 35%);}
		}
		h5 {
			background-color: @color;
			&:after{
				color: @color;
			}
		}
	}
}
.compass_points {
	.relative;
	h4 a {.eggplant;}
	.compass_description {
		display: none;
		.absolute;
		bottom: 25px;
		p {
		    text-align: center;
		    vertical-align: middle;
		    position:absolute; 
		    left:-72px;
		    padding:14px 20px;	    
			width:240px; 
			z-index:10;
		    bottom: 55px;
		    &:after{
		    	content:'\25BC';
		    	.block;
		    	.absolute;
				bottom: -20px;
				left: 42%;
				font-size: 30px;
		    }  
		}
		.taggies {
			.absolute;
			left:177px;
			bottom: 51px;
			z-index: 10;
		}
		h5{
			background-color: @purple;
			height:26px;
			.relative;
			min-width: 150px;
			span {
				font-size: 12px;
				padding-top: 2px;
				.white;
				.block;
				.left;
				text-transform: none;
				&:before {
					content:'\2022';
					.block;
					.left;
					font-size: 23px;
					.white; 
					margin:1px 3px 0 5px;
				}
			}
			margin-bottom: 4px;
			&:after{
				content:'\2666';
				font-size: 42px;
				font-family:Arial,Helvetica,sans-serif;
			    position: absolute;
			    right: -12px;
			    top: -1px;
				color:@purple;
			}
		}
		i {clear: both; .absolute; font-size: 24px; left:32px; bottom:0;}
	}
	&.resilience {
		.compass_tt(@purple);
	}
	&.learning {
		.compass_tt(@green);
		.compass_description {left:-3px;}
	}
	&.social-skills {
		.compass_tt(@bluegreen);
		.compass_description {left:10px;}
	}
	&.caring {
		.compass_tt(@pink);
		.compass_description {left:-12px;}
	}
	&.self-awareness {
		.compass_tt(@gray);
		.compass_description {left:21px;}
	}
	&.creativity {
		.compass_tt(@yellow);
		.compass_description {left:2px;}
	}
	&.strategy {
		.compass_tt(@blue);
		.compass_description {left:-3px;}
	}
	&.character {
		.compass_tt(@orange);
	}
}



[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;
}


input:focus, textarea:focus {
    outline: none;
}


/* Media Queries */
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@1024: 		  ~"screen and (max-width: 1024px)";

/* GENERAL STYLES
-------------------------------------------------------------------------------*/
#wrap				{width:100%; margin: 0 auto;}
.content 			{width:960px; margin: 0 auto; .relative;}
img 				{max-width: 100%;}
header {
	.content;
	height:90px;
	.relative;
	padding:0 10px;
	a#logo {
		.block;
		img { z-index: 2; position: absolute; left:0; top:5px;}
	}
	nav {
		.right;
		form {
			.right;
			margin:20px 0 10px;
			.simpleform;
			input#search{
				color:black;
			}
		}
		ul {
			.clear;
			li {
				.inblock; margin-left: 30px;
				.caps;
				font-size: 14px;
				a:link, a:visited 	{color:@eggplant; &:hover {color:@pink;}}
			}
		}
	}
}

/* HOME */
.home {	
	div#hero {
		.relative;
		width:100%;
		img.bg {
			z-index: -1;
			min-width: 992px;
			&:after {.clearfix;}
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			/* Set up positioning */
			.relative;
			@media @1024 {
				left: 50%;
    			margin-left: -512px;   /* 50% */
			}
		}
		.content .wrap {
			.absolute;
			bottom:30px;
			p {.white;}
			.intro {
				.column(8);
				a {.yellow; font-size: 18px; .hand_bold;}
			}
			.col1 {.column(1);}
			.connect {
				.column(7);
				padding-top: 27px;
				h4 {
					.hand;
					font-size: 31px;
					.yellow;
				}
				#mc_embed_signup {.right;}
				form {
					.simpleform;
					input[type="email"] {
						background-color:rgba(255,255,240,0.22);
						padding-left: 15px;
						.white;
					}
					input[type="submit"]{
						@media screen and (-webkit-min-device-pixel-ratio:0) {  
							top:7px;
						}
					}
				}
			}
		}
	}
	.pinkbg {width:100%; height: 23px; margin-top:-10px; background: @pink url(images/banded_bg.png) 0 0 repeat;}
	#promotion {
		.relative;
		.clear;
		.white;
		.bgleft {background-color: @eggplant; border-right:solid 2px @white; width:65%; .left; height:68px;}
		.bgright {
			.diag_bg; 
			width:35%; 
			.left; 
			height:68px;
			div.social {
				.relative;
				z-index: 2;
				padding-left: 10px;		
				a {
					.inblock;
					.white; 
					font-size: 25px;
					margin:25px 10px;
					&:hover{.eggplant;}
				}
			}
		}
		div.promoblock {
			.column(12); 
			margin-top:-58px;
			.relative;
			z-index: 1;
			h3 {
				.hand_bold; font-size: 33px; .yellow; width:433px; .left; margin-bottom: 0;
				span {.white; .serif; font-size: 16px;}
			}
			.promolink {
				.left; margin-top: 12px; font-size: 25px; .block; .yellow; &:hover {.pink;}
				i {margin-right: 8px;}
			}
		}
	}
	#mission {
		.yellowbg;
		padding:0 0 100px;
		.clear;
		&:after {.clearfix;}
		.content {
			margin:100px auto;
			div.left {.column(7);
				img {.left; margin:0 90px 60px 0;}
			}
			div.right {.column(9);
				p{
					margin-bottom:15px;
				}
			}
		}
	}
} 



/* Most Pages */
.page:not(.home), .blog, .archive, .search,.error404{
	.content {
		.clear;
		h1 {
			.column(16);
			margin-top:75px;
			padding-bottom: 50px;
		}
		section.top {
			.clearfix;
			padding-bottom: 80px;
			img.wp-post-image {.left; .block; margin: 0 20px 0 0;}
			.colleft,.colright {.column(8);}
			h2 {.serif; .bold; font-size: 25px; margin-bottom: 20px;}
			p {margin-bottom: 20px;}
			.social {
				.clear;
				padding: 60px 0 0;
    			text-align: center;
				a {font-size: 39px; margin-right: 7px; &:hover{.eggplant;}}
			}
		}
		#mc_embed_signup {.left;}
		form {
			.simpleform;
			input[type="email"] {padding: 3px 0 5px 12px;}
		}
		.recent_link {.block; .caps; text-align: right;}
		section.articles_grid article {margin-bottom: 40px;}
		section.articles_list article {
			.column(16);
			border-bottom: solid 1px @ltgray;
			&:last-of-type{
				border-bottom:none;
			}
			padding: 15px 0 12px;
			overflow: auto;
			.thumb-link img {.left; margin-right:20px;} 
			h2 {
				.serif; font-size: 25px; .bold;
				margin-bottom: 10px;
				a {.eggplant; &:hover {.pink;}}
			}
			h3 {font-size: 20px;}
			a.catlink {
				.serif;
				.caps;
				font-size: 13px;
				.bold;
				margin-top: 7px;
				.inblock;
				span {.inblock; margin:3px;}
				i {font-size: 24px; .left; margin:3px;}
				&:hover {color: @eggplant !important;}
			}
			&.caring {
				a.catlink {.pink;}
			}
			&.character {
				a.catlink {color:@orange;}
			}
			&.creativity {
				a.catlink {.yellow;}
			}
			&.learning {
				a.catlink {color:@green;}
			}
			&.resilience {
				a.catlink {color:@purple;}
			}
			&.self-awareness {
				a.catlink {color:@gray;}
			}
			&.social-skills {
				a.catlink {color:@bluegreen;}
			}
			&.strategy {
				a.catlink {color:@blue;}
			}
		}
	}
}

.search article {
	.clear; overflow: auto; .clearfix;
	border-bottom: solid 1px @ltgray;
	padding: 15px 0;
	img.attachment-post-thumbnail {.left; margin: 0 20px 20px 0;}
}

.page-id-9 /*About*/{
	img.wp-post-image {margin-top: -40px !important;}
}

.page-id-1881/*E-Book*/ {
	h1{
		margin:0px !important;
		padding:0 0 10px 0 !important;
	}
	#disqus_thread {padding-bottom: 80px;}
}
.blog .content, .archive .content {
	h1 {
		margin-bottom: 20px;
	}
	nav.toggle {
		.column(4);
		a {font-size: 24px; margin-right:10px; .tooltip(@gray); .tooltip_popup; span {font-size: 16px;}}
	}
	nav.cats {.column(12); text-align: right; }
	.articles {.clear;}

	.articles_grid, .articles_list {display: none;}
	.default {.block;}
}

/*Contact*/
.colleft {.column(7);}
.colright {.column(9);}
.page-id-12 {
	.social {
		.left;
		h4 {padding: 0 0 20px 0;}
	}
	form.wpcf7-form div.formline {
		border:solid 1px @yellow;
		padding:20px 10px;
		width:100%;
		margin-bottom: 20px;
		.clearfix;
		em {.pink;}
		.label {text-align: right; .left; width:20%; line-height: 120%;}
		.input {
			.left; width:80%; 
			input, textarea {
				.border-radius(5px); 
				border:solid 1px @yellow;
				width:325px;
				margin: 0 0 0 10px;
	    		padding: 10px;
	    		color:black;
	    		font-style:normal;
	    		.clearfix;
			}
		}
		div.submit {.clear; padding:20px 0 0  98px;}
		.wpcf7-submit {
			.border-radius(20px); 
			.serif;
			.white;
			font-size: 16px;
			.bold;
			background-color: @pink;
			border:0;
			height: 35px;
	    	width: 140px;
		}
	}
}

/* Explore */

body.page-id-11 {
	.content {
		.intro {.column(9);
			h2.heading4{
				font-size: 24px;
				font-family: "ff-meta-serif-web-pro", serif;
				font-style: normal;
				font-weight: 500;
				font-weight: 700;
				margin:-10px 0 10px;
			}
		}
		nav.cats {.column(7);}
		h1 {
			.column(16);
			margin-bottom: 20px !important;
		}
		#compass {
			height:600px;
			.clear;
			.relative;
			background: url(images/compass.png) center 80px no-repeat;
			.compass_points {
				.absolute;
				&.resilience {
					top:40px;
					left:437px;
				}
				&.learning {
					top:105px;
					left:617px;
					.compass_description {left:-3px;}
				}
				&.social-skills {
					top:248px;
					left:680px;
					.compass_description {left:10px;}
				}
				&.caring {
					top:400px;
					left:600px;
					.compass_description {left:-12px;}
				}
				&.self-awareness {
					top:455px;
					left:415px;
					.compass_description {left:21px;}
				}
				&.creativity {
					top:400px;
					left:270px;
					.compass_description {left:2px;}
				}
				&.strategy {
					top:248px;
					left:200px;
					.compass_description {left:-3px;}
				}
				&.character {
					top:105px;
					left:260px;
				}
			}
		}
	}
}


/* Single Article */

.single .content, 
.page:not(.page-id-1918):not(.page-id-12):not(.page-id-11):not(.page-id-9):not(.page-id-7) .content{
	.clear;
	margin-top: 100px;
	.social {
		.clear;
		padding: 40px 0 50px;
		h4 {.left; margin:0 5px 0 0 !important;}
		a {font-size: 39px; margin-right: 7px; &:hover{.eggplant;}}
	}
	article.post,article.page {
		.column(12);
		h1 {
			.serif; 
			margin-bottom: 20px;
			line-height: 100%; 
			.bold; 
			font-size: 32px; 
			a {.eggplant;}
		}
		h2 {font-size: 24px; .serif; .bold; margin:20px 0 10px;}
		h3 {font-size: 18px; .serif; .bold; margin:20px 0 10px;}
		h4 {margin:20px 0 10px;}
		.author {.left; margin-right:20px;}
		.post-content {
			.clear; padding: 10px 0;
			img.wp-post-image {.left; margin: 0 20px 20px 0;}
			img.alignright{
				float:right;
				margin:0 0 20px 20px;
			}
			img.alignleft{
				float:left;
				margin:0 20px 20px 0;
			}
			p {margin-bottom: 10px;}
			.social{
				h4{
					margin-right:15px !important;
				}
				a{
					color:@purple;
					float:left;
					margin-right:15px;
				}
			}
		}
		ul {
			list-style: disc inside none;
			margin: 0 0 10px 40px;
			li {margin-bottom: 10px;}
		}

		ol {
			list-style: decimal inside none;
			margin: 0 0 10px 40px;
			li {margin-bottom: 10px;}
		}
		h4.single_article_cat {margin: 0;}
		.article_childcats {
			width:100%; 
			.compass_points {width: 100%;}
			.compass_description{
				.relative;
				bottom:0;
				display: block !important;
				margin:20px 0;
				.clearfix;
				.taggies {
					.relative;
					width:650px; 
					bottom:0;
					left:0;
					h5 {.inblock; margin-right: 20px;}
				}
			}
		}
		
	}

	div.author-bio {
		overflow: auto;
		h5 {.bold; margin-bottom: 10px;}
		img.avatar {.left; margin: 4px 10px 0 0;}
		.author-description {width:80%; .left;}
	}

	#disqus_thread {.clear; margin:30px 0 60px;}
	

	aside#article_bar{
		.column(4);
		padding-left: 20px;
		div.connect {
			h4 {.hand_bold; font-size: 25px;}
		}
		form {
			.simpleform; .left; margin-top:5px; 
			input[type="email"]{padding: 3px 0 5px 10px;}
			input[type="submit"]{
				@media screen and (-webkit-min-device-pixel-ratio:0) {  
					top:7px;
				}
			}
			::-webkit-input-placeholder{
				color:black;
			}
		}
		div.widget{
			margin-bottom:60px;
		}
	}
	.comments {.clear;}
	.compass_points {
		.left;
		padding: 4px 0 0;
		margin-top: -3px;
		.compass_description {
   			bottom: -10px;
   		}
	}
	.frametitle {margin-bottom: 20px;}
	#wmp_widget-2 ul li{
		list-style:none;
	}
	#wmp_widget-2 a {
		.block;
		padding: 10px;
		margin-bottom: 15px;
		.white;
		h5 {
			.clearfix; padding-top: 3px;
			i {font-size: 24px; .left; margin:0 5px 3px 0;}
			span { .left;}
		}
		background-color: @green;
		/*&:hover {background-color: @eggplant;}
		&.caring {background-color: @pink;}
		&.character {background-color: @orange;}
		&.creativity {background-color: @yellow;}
		&.learning {background-color: @green;}
		&.resilience {background-color: @purple;}
		&.self-awareness {background-color: @gray;}
		&.social-skills {background-color: @bluegreen;}
		&.strategy {background-color: @blue;}*/
	}

	div.post-content div.article_childcats div.compass_points div.compass_description div.taggies h5 {
		&:hover {background-color: @eggplant; &:after {color:@eggplant;}}
		&.caring {background-color: @pink; &:after {color:@pink;}}
		&.character {background-color: @orange; &:after {color:@orange;}}
		&.creativity {background-color: @yellow; &:after {color:@yellow;}}
		&.learning {background-color: @green; &:after {color:@green;}}
		&.resilience {background-color: @purple; &:after {color:@purple;}}
		&.self-awareness {background-color: @gray; &:after {color:@gray;}}
		&.social-skills {background-color: @bluegreen; &:after {color:@bluegreen;}}
		&.strategy {background-color: @blue; &:after {color:@blue;}}
	}
}




/* Compass Nav */

.tooltip(@color: #CCCCCC)	{
	color:@color;
	&:hover span {
		display:block; 
		background-color: lighten(@color, 35%); 
		color:@color;
		&:after {color:lighten(@color, 35%);}
	}
}

.tooltip_popup {
	span { 
		display:none;
	    text-align: center;
	    vertical-align: middle;
	    position:absolute; 
	    left:-55px;
	    padding:14px 20px;	    
		width:130px; 
		z-index:10;
	    bottom: 55px;
	    h5 {text-align: center;}
	    &:after{
	    	content:'\25BC';
	    	.block;
	    	.absolute;
			bottom: -20px;
			left: 42%;
			font-size: 30px;
	    }  
	}	
}

nav.cats {
	p {.gray; margin-bottom: 20px;}
	a {
		.relative;
		.block;
		.left;
		margin: 0 0 0 10px;
		&.caring {.tooltip(@pink);}
		&.character {.tooltip(@orange);}
		&.creativity {.tooltip(@yellow);}
		&.learning {.tooltip(@green);}
		&.resilience {.tooltip(@purple);}
		&.self-awareness {
			.tooltip(@gray);
			&:hover span {
				width:160px; 
				left:-67px;
			}	
		}
		&.social-skills {
			.tooltip(@bluegreen);
			&:hover span {
				width:160px; 
				left:-67px;
			}	
		}
		&.strategy {.tooltip(@blue);}
		outline:none; 
		&:hover {
			text-decoration:none;
			text-align: center;
			} 
		.tooltip_popup;
	}
	a:first-of-type{margin-left: 0;}
	i {font-size: 24px; .block; .left; margin:3px;}
}

/* Article Grid */
#recent {
	.yellowbg;
	padding:100px 0 0;
	.clear;
	&:after {.clearfix;}
}

.gridcolor(@color: #CCCCCC)	{
	border-left:solid 1px @color;
	h3.cat a {color:@color;}
	h2 a:hover {color:@color;}
}


.related {
	.yellowbg;
	padding:100px 0 0;
	.clear;
	&:after {.clearfix;}
}

.articles_grid .content {
	width:940px;
	margin:0 auto;
	margin-bottom: 80px;
	&:after {.clearfix;}
	article {
		width:100% / 3;
		.left;
		border-left:solid 1px @pink;
		.thumb-link {.block;}
		img {
			z-index: 1;
			.relative;
			width: 100%;
		}
		.title-block {
			width:100%;
			.relative;
			margin-top:-30px;
			z-index: 2;
			h3.cat {
				background-color: rgba(255,255,255,0.85);
				width:100%;
				padding: 3px 5px;
				margin-bottom: 0;
				.serif;
				.caps;
				font-size: 13px;
				a:hover {color: @eggplant !important;}
			}
			h2 {
				width:300px;
				margin: 0;
				.clear;
				height: 40px;
				overflow: hidden;
				line-height: 100%;
				padding:0 7px;
				.bold; 
				.serif; 
				font-size: 16px;
				a {.eggplant; &:hover {.pink;}}
			}
			i {font-size: 24px; .left; margin:3px;} 
			span {margin-top:2px; .inblock;}
		}
		&.learning{.gridcolor(@green;)}
		&.caring {.gridcolor(@pink);}
		&.character {.gridcolor(@orange);}
		&.creativity {.gridcolor(@yellow);}
		&.learning {.gridcolor(@green);}
		&.resilience {.gridcolor(@purple);}
		&.self-awareness {.gridcolor(@gray);}
		&.social-skills {.gridcolor(@bluegreen);}
		&.strategy {.gridcolor(@blue);}
	}
}

/* Sidebar (Explore Roots */
aside#explore_roots {
	.clear;
	overflow: auto;
	margin-top:0;
	padding:90px 0 140px;
	.single & {padding:20px 0 140px;}
	a {
		.column(4);
		.hand_bold;
		font-size: 25px;
		text-align: center;
		.white;
		padding:30px;
		i {margin-top:15px; .block;}
		&:nth-child(2) {background-color: @eggplant;}
		&:nth-child(3) {background-color:@pink;}
		&:nth-child(4) {background-color:@yellow;}
		&:nth-child(5) {background-color:@blue;}
		&:hover {.white; background-color: @gray;}
	}
}



footer 				{
						.single & {div.social {padding: 0 !important;}}
						.content {margin-top:0 !important;}
						.clear;
						.white;
						overflow: auto;
						padding: 40px 0;
						a.link {.yellow;}
						.col {width:100% / 3; .left;}
						background-color: @eggplant;
						div.social {	
							a {
								.inblock;
								.white; 
								font-size: 25px !important;
								margin:25px 20px 0 0 !important;
								&:hover{.yellow;}
							}
						}
						h4 {
							.hand;
							font-size: 25px;
							.yellow;
						}
						p {margin: 10px 0;}
						form {
							.clear;
							.left;
							.simpleform;
							input[type="email"] {
								background-color:rgba(255,255,240,0.22);
								padding-left: 15px;
								.white;
							}
							input[type="submit"]{
								@media screen and (-webkit-min-device-pixel-ratio:0) {  
									top:7px !important;
								}
							}
						}
						.blogname {.caps; .yellow; &:hover {.pink;}}
						.spruce {.clear; padding:1em 0; a {padding-right:25px;}}
					}


/*
Default style for WP-PageNavi plugin

http://wordpress.org/extend/plugins/wp-pagenavi/
*/

.wp-pagenavi {
	clear: both;
	margin: 0 auto;
	padding:20px 0;
    width: 250px;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid @ltgray;
	padding: 3px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: @pink;
}

.wp-pagenavi span.current {
	font-weight: bold;
}