/* 
 * CSS Reset
 * http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 * License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
 * 
 */

/* General
==================================== */
*, *:before, *:after {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

body {
	background: #fff
	overflow-x:hidden; /* Uncomment for Mike to troubleshoot before turning in */;
}

html {height:100%;overflow-x:hidden; /* Uncomment for Mike to troubleshoot before turning in */}

body, input, textarea {
    font: 1em/1.5 Arial, Helvetica, sans-serif;
}


p, h1, h2, h3, h4, h5 {
	font-family: 'Cabin', sans-serif;
}

strong {
	font-weight: bolder;
}

a {
	text-decoration:none;
	color:#0ca6c7;
	cursor:pointer;
}

a:hover {
	color:#10c8ef;
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
}

.title {
	font-size: 1.5em; 
	padding: .5em 0;
	text-align: center; 
	background: #323a45;
	color: white;
	border-radius: 5px 5px 0 0;
}

#header {
	height:200px;
	width:100%;
	background-color:#3b3b3b;
	position:fixed;
	z-index: 10;
	padding-top:15px;
	padding-bottom:15px;
}

#header .stitching {
	width:100%;
	height: 100%;
	margin:0 auto;
	border:3px dashed #636363;
	border-left:none;
	border-right:none;
}

#header-content {
	max-width: 1280px;
	width:95%;
	margin:0 auto;
	height:160px;
}


#logo {
	padding-top:10px;
	float:left;
	width: 435px;
}

.logo-full {display:block; clear:both;}

.logo-small {display:none; clear:both;}

/* Nav
==================================== */

#nav-large {
	width:50%;
	height: 40px;
	float:left;
	margin-top: 4px;
	margin-left:150px;
	display:block;
}

#nav-small {
	display:none;
	width: 450px;
	float:left;
	margin-top:4px;
}

#nav-large img {
	float:left;
}

.selected {
float: left;
}

.normal {
	float:left;
	display:block;
	margin:7px 25px 0 25px;
}

.normal:hover {
	padding-bottom: 7px;
	border-bottom: 2px solid #0ca6c7;

}

#header #socialMedia {
	width:290px;
	height: 38px;
	float:right;
	margin-top: 10px;
}

#header #socialMedia img {
	float:left;
	padding:0 2px 0 2px;
}

.connect {
	margin-top: 6px;
}

#hamburger-nav {
	width: 100%;
	float: left;
	margin: 10px 0 1em 0;
	padding: 0;
	display:none;
}

#hamburger-nav ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width:400px;
}

#hamburger-nav li {
	float: left;
	background:#fff;
}

#hamburger-nav li a {
	display: block;
	padding: 15px 15px;
	text-decoration: none;
	color: #0ca6c7;
	background-color:#fff;
	border:1px solid #F0F0F0;
}
#hamburger-nav li a:active {
	color: #fff;
	background-color:#0ca6c7;
}


/* Responsive Search Bar
==================================== */

#header #searchBtn {
	width: 300px;
	margin-top: 32px;
	display:none;
/*	border:1px solid;*/
}

#header #searchBtn input {
	height:48px;
	padding-left:5px;
	width: 78%;
	float:left;
}

#header #searchBtn img {
	float:right;
	padding-right: 5px;
}

#header #searchBtn ::-webkit-input-placeholder {
   color: #55b2c6;
}

#header #searchBtn :-moz-placeholder { /* Firefox 18- */
   color: #55b2c6;
}

#header #searchBtn ::-moz-placeholder {  /* Firefox 19+ */
   color: #55b2c6;
}

#header #searchBtn :-ms-input-placeholder {  
   color: #55b2c6;
}



/* Blog Tutorial
==================================== */

#tut-wrapper h1 {font-family: 'Milonga', cursive; font-size: 32px; letter-spacing:-1px; margin: 20px 0 50px 0;}
#tut-wrapper h2 {float:left; width:50%; font-family: 'PT Sans', sans-serif; letter-spacing:-.5px;font-size: 24px; padding-bottom: 20px;}
#tut-wrapper p {float: left; font-family: 'PT Sans', sans-serif; line-height:1.7;}
#tut-wrapper > ul {float: left; padding-left: 45px; width: 40%; font-family: 'PT Sans', sans-serif; line-height:3; list-style-type:disc;}
.shadow { -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);}

#tut-wrapper {width:70%; float:left; padding:0; position:relative; background-color:#fff; margin-top:200px;overflow-x:hidden; /* Uncomment for Mike to troubleshoot before turning in */}

.navigation{
-webkit-backface-visibility: hidden;
z-index: 5;
position: fixed;
top: 250px;
width: 700px;
}

.navigation ul {
 	list-style:none;
 	margin-left: 45%;

 }

.navigation ul li{
display:inline-block;
margin-right: 10px;
}

.navigation ul li a{
display: block;
width: 20px;
height: 20px;
text-indent: -9999px;
border-radius:25px;
background-color:#3b3b3b;
}

.navigation ul li a:hover{
border-radius:25px;
background-color:#f68A33;
}
.navigation ul li a.active{
border-radius:25px;
background-color:#f68A33;
}













.content-area {width: 45%; float:left;}
.content-area p {width:100%;}

#introSection {width:100%; margin:0 auto; background-color: #fff;float:left; padding: 80px 0 120px 0; border-right:3px dashed #f2f2f2;}
#introSection img {float:left; width:400px; margin-left: 15px;}
#introSection h2, p {padding-left:45px; width:100%;}
#introSection h1 {float:left; width: 100%; text-align:center;}

#needSection {width:100%; background-color: #f2f2f2;float:left; padding: 120px 0 120px 0;}
#needImages {float:left; padding-left:15px; width:400px; text-align:center;}
#needImages img {margin-bottom:15px;}
#needSection h2 {padding-left:55px;}
#needSection ul {float:left; margin-left:55px; width:100%;}
#needSection ul li {padding-bottom: 45px;}

#prepSection {width:100%; background-color: #fff;float:left; padding: 120px 0 120px 0; border-right:3px dashed #f2f2f2; border-left:3px dashed #f2f2f2;}
#prepImages {float:left; padding-left: 15px; width:400px; text-align:center;}
#prepImages img {margin-right: 15px; margin-bottom: 10px;}
#prepSection h2, p {padding-left:55px; width:100%;}
#prepSection ul {float:left; margin-left:55px; width:90%;}
#prepSection ul li {padding-bottom:45px;}

#section1 {width:100%; background-color: #f2f2f2;float:left; padding: 120px 0 120px 0;}
#section1 p {margin-bottom: 60px; float:left; padding-left: 45px;}
#section1 h2{padding-left:45px;}
#section1-Images {float:left; margin-left:15px; width:400px;  text-align:center;}
#section1-Images img {margin-bottom:15px; width:400px;}

#section2 {width:100%; background-color: #fff;float:left; padding: 120px 0 120px 0; border-right:3px dashed #f2f2f2; border-left:3px dashed #f2f2f2;}
#section2 p {margin-bottom: 60px; padding-left: 45px;}
#section2 h2{padding-left:45px;}
#section2-Images {float:left; margin-left:15px; width:400px; text-align:center;}
#section2-Images img {margin-bottom:15px; width:400px;}

#section3 {width:100%; background-color: #f2f2f2;float:left; padding: 120px 0 120px 0;}
#section3 p {margin-bottom: 60px; padding-left: 45px;}
#section3 h2{padding-left:45px;}
#section3-Images {float:left; margin-left:15px; width:400px; text-align:center;}
#section3-Images img {margin-bottom:15px; width:400px;}

#section4 {width:100%; background-color: #fff;float:left; padding: 120px 0 120px 0; border-right:3px dashed #f2f2f2; border-left:3px dashed #f2f2f2;}
#section4 p {margin-bottom: 60px; padding-left: 45px;}
#section4 h2{padding-left:45px;}
#section4-Images {float:left; margin-left:15px; width:400px; text-align:center;}
#section4-Images img {margin-bottom:15px; width:400px;}

#conclusion {width:100%; background-color: #f2f2f2;float:left; padding: 120px 0 120px 0; text-align:center;}
#conclusionContent {width:60%; margin:0 auto;}
#conclusion p {margin-bottom: 60px; padding:0; width: 100%; text-align: justify; line-height: 3;}
#conclusion h2 {width: 100%;}
#conclusion h1 {float:left; width: 100%;}
#conclusion-Images {float:left; width:100%; text-align:center;}
#conclusion-Images img {margin: 0 5px 85px 5px;}








/* Side Bar
==================================== */

aside {
	float:left;
	width:30%;
/*	border:1px solid;	*/
	padding-left:30px;
	margin-top:200px;
}

aside #searchBtn {
	width: 100%;
	margin-top: 32px;
/*	border:1px solid;*/
}

aside #searchBtn input {
	height:48px;
	padding-left:5px;
	width: 78%;
	float:left;
}

aside #searchBtn img {
	float:right;
	padding-right: 5px;
}

aside #searchBtn ::-webkit-input-placeholder {
   color: #55b2c6;
}

aside #searchBtn :-moz-placeholder { /* Firefox 18- */
   color: #55b2c6;
}

aside #searchBtn ::-moz-placeholder {  /* Firefox 19+ */
   color: #55b2c6;
}

aside #searchBtn :-ms-input-placeholder {  
   color: #55b2c6;
}



.glossary {
	border:3px solid #0ca6c7;
	margin-top: 32px;
}

.glossary p {
	margin:0;
	padding:7px;
}

.glossary h2 {
	font-size:30px;
	width:100%;
	height:50px;
	background-color:#0ca6c7;
	color:#fff;
	text-align:center;
	font-family: 'Cabin', sans-serif;
	font-weight:400;
}



.subscribe {
	border:3px solid #3b3b3b;
	margin-top: 32px;
	padding-bottom: 7px;
}

.subscribe h2 {
	font-size:30px;
	width:100%;
	height:50px;
	margin-bottom: 5px;
	background-color:#3b3b3b;
	color:#fff;
	text-align:center;
	font-family: 'Cabin', sans-serif;
	font-weight:400;
}



.subscribe input {
/*	float:left;*/
	width: 96%;
	margin-top: 10px;
	margin-left: 7px;
	height: 48px;
	padding-left: 5px;
}

.subscribe label {
	padding-left: 7px;
	font-size: 17px;
	color:#c7c7c7;
}

#submitBtn {
	border:0;
	display: inline;
	margin-left:7px;
	width: 200px;
	height: 50px;
	cursor:pointer;
    cursor:hand;
    padding: 1px 16px 1px 16px;
/*    font-family: 'Roboto', sans-serif;*/
    font-size: 17px;
    color:#fff;
    background: #3b3b3b; /* Old browsers */
    
}

#submitBtn input{
	line-height:1;
}

#submitBtn:hover {
	border:0;
    width:200px;
    height:50px;
    padding: 1px 16px 1px 16px;
/*    font-family: 'Roboto', sans-serif;*/
    font-size: 17px;
    color:#fff;
    background: #0ca6c7; /* Old browsers */
}

.subscribe ::-webkit-input-placeholder {
   color: #6a6a6a;
}

.subscribe :-moz-placeholder { /* Firefox 18- */
   color: #6a6a6a;
}

.subscribe ::-moz-placeholder {  /* Firefox 19+ */
   color: #6a6a6a;
}

.subscribe :-ms-input-placeholder {  
   color: #6a6a6a;
}


.ads {width:85%; display:block;}

.ads img {margin-top: 30px; width:100%;}









/* Footer
==================================== */

#footer {
	width:100%;
	background-color:#3b3b3b;
	position:relative;
	display:block;
	padding-top:15px;
	padding-bottom:15px;
}

#footer-content {
	max-width: 1280px;
	width:95%;
	margin:0 auto;
	height:160px;
}



#footer .stitching {
	width:100%;
	margin:0 auto;
	border:3px dashed #636363;
	border-left:none;
	border-right:none;
}


#footer-nav {
	width: 100%;
	float: left;
	margin: 30px 0 1em 0;
	padding: 0;
}

#footer-nav ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width:315px;
}

#footer-nav li {
	float: left;
}

#footer-nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	color: #7c7c7c;
}

#footer-nav li:first-child a {
	padding-left:0px;
}

#footer-nav li:last-child a {
	padding-right:0px;
}

#footer-nav li a:hover {
	color: #fff;
}

#footer-content p{
	width:100%;
	float:left;
	text-align:center;
	color: #7c7c7c;
	margin:0;
	padding:0;
	padding-top:35px;
	font-size:14px;
}


#footer-content #socialMedia {
	width:290px;
	height: 38px;
	float:right;
	margin-top: 10px;
	display:none;
}

#footer-content #socialMedia img {
	float:left;
	padding:0 2px 0 2px;
}





#feat-wrapper {width:70%; float:left; padding:0; position:relative; background-color:#fff; margin-top:200px;overflow-x:hidden; /* Uncomment for Mike to troubleshoot before turning in */}
#feat-wrapper h1 {font-family: 'Milonga', cursive; font-size: 32px; letter-spacing:-1px; margin: 20px 0 50px 0;}
#feat-wrapper h2 {float:left; width:50%; font-family: 'PT Sans', sans-serif; letter-spacing:-.5px;font-size: 24px; padding-bottom: 20px;}
#feat-wrapper p {float: left; font-family: 'PT Sans', sans-serif; line-height:1.7;}
#feat-wrapper > ul {float: left; padding-left: 45px; width: 40%; font-family: 'PT Sans', sans-serif; line-height:3; list-style-type:disc;}

.shadow { -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);}





.featured-content-area {width: 60%; float:left;}
.featured-content-area p {width:100%; padding-left: 45px; float:left; margin-top:-10px;}


#post1 {position:relative; width:100%; background-color: #fff;float:left; padding: 60px 0 60px 45px; border-right:3px dashed #f2f2f2; border-left:3px dashed #f2f2f2;}
#post1 h1{font-size:1.6em; width:90%; margin-bottom:0;}
#post1 h2{padding-left:45px; width:100%; float:left;}
#post1 img {float:left;margin-bottom:15px;}

#post2 {position:relative; width:100%; background-color: #f2f2f2;float:left; padding: 60px 0 60px 45px; border-right:3px dashed #f2f2f2; border-left:3px dashed #f2f2f2;}
#post2 h1{font-size:1.6em; width:90%; margin-bottom:0;}
#post2 h2{padding-left:45px; width:100%; float:left;}
#post2 img {float:left;margin-bottom:15px;}

#post3 {position:relative; width:100%; background-color: #fff;float:left; padding: 60px 0 60px 45px; border-right:3px dashed #f2f2f2; border-left:3px dashed #f2f2f2;}
#post3 h1{font-size:1.6em; width:90%; margin-bottom:0;}
#post3 h2{padding-left:45px; width:100%; float:left;}
#post3 img {float:left;margin-bottom:15px;}

#post4 {position:relative; width:100%; background-color: #f2f2f2;float:left; padding: 60px 0 60px 45px; border-right:3px dashed #f2f2f2; border-left:3px dashed #f2f2f2;}
#post4 h1{font-size:1.6em; width:90%; margin-bottom:0;}
#post4 h2{padding-left:45px; width:100%; float:left;}
#post4 img {float:left;margin-bottom:15px;}

.helpers {width:100%; float:left; padding-right: 5%;}
.helpers a{font-size:12px; display:inline-block;}
.newer {width:30px; float:left; margin-top:60px;}
.older {width:30px; float:right; margin-top:60px;}

.date {float:left;margin-top: 20px; font-size:14px; font-style:italic; color:#999999; margin-right:30px ;}
.author {float:left; font-size:14px; font-style:italic; color:#999999; margin-top:5px; width:100%;}

.tags {float:left; margin-bottom: 10px; margin-left:20px}
.tags a {float:left; background:#0ca6c7; padding-left: 3px; padding-right:3px; margin: 20px 20px 20px 0; font-size: 12px; font-weight: bold; color:#ffffff;}
.tags a:last-child {margin-right:0;}
.tags a:hover {background:#10c8ef;}

.small-media {margin:0 auto; max-width:320px; width:100%; margin-top:30px;}
.small-media a {margin-right: 20%; color:#cccccc; text-align:center;}
.small-media a:hover {color:#0ca6c7;}
.small-media a:last-child {margin-right:0;}

.op-ed {border-bottom:3px dashed #f2f2f2; padding-top:0;}
.op-ed img {width:100%; max-width:700px;}
.op-ed-content-area {width: 100%; float:left;}
.op-ed p {width:100%; padding-left:0; padding-right:5%; margin-top:15px;}



































/* Media Queries */


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

	#tut-wrapper, #feat-wrapper {width:100%; clear:both;}
	
	aside {width:100%; margin-top:40px; padding:0; }

	.subscribe, .glossary {width: 90%; margin:20px auto;}
	.subscribe form, .glossary p {padding-left:15%; padding-right:15%;}
	.ads, aside #searchBtn {display:none;}
	#header #searchBtn {display:block; float:right;}
	#header #socialMedia {display:none;}

	#footer-content #socialMedia {display:block;}

	#footer-content p {padding:0;}

	.logo-full {display:none;}

	.logo-small {display:block;}

	#nav-large {display:none;}

	#nav-small {display:block; margin:0;position:absolute; bottom: 40px;}

	.selected {float: left;}

	.normal { float:left; display:block; margin:2px 25px 0 25px;}
	.normal:hover { padding-bottom: 2px; border-bottom: 1px solid #0ca6c7;}
			
}



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

	.ads {display:none;}		
}

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

	#tut-wrapper, #feat-wrapper {width:100%;}	
}


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

	.content-area {width:100%;}

	.content-area p {padding-right: 5%; padding-left:5%; width:100%;}

	.featured-content-area {width:100%; padding-right: 5%;}

	#post1 p {padding-left:0; width:100%;}
	#post1 h2 {padding-left:0;}

	#post2 p {padding-left:0;}
	#post3 p {padding-left:0;}
	#post4 p {padding-left:0;}

	#introSection h2 {padding-top:20px;}

	#needImages {width:100%;}

	#needSection h2 {width:100%;}

	#needImages img {margin-right:5px;}

	#prepImages {width:100%;}

	#conclusion {width:100%;}

	#conclusion p {padding:0 20px;}

	#conclusionContent {width:100%; margin:0 auto;}

	#conclusion-Images {width:100%;}

			
}

@media screen and (min-width: 769px) {
		#menu {
			display: none;
		}
	}


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

	.navigation {display:none;}

	#header {height: auto;}

	#header #searchBtn {margin-bottom: 5px;}

	#introSection #intro-image {width:100%;}

	#introSection p { display:block;}

	#nav-small {display:none;}

	#hamburger-nav {display:block;}

	#menu {
			width:1.4em;
			display: block;
			background:#ddd;
			font-size:1.65em;
			text-align: center;
			position:absolute;
			right:30px;
			top: 30px;
			cursor:pointer;
		}
		#hamburger-nav.js {
			display: none;
			text-align:center;
		}
		#hamburger-nav ul {
			width:100%;
		}
		#hamburger-nav li {
			width:100%;
			border-right:none;
		}
			
}





/*@media screen and (max-width: 550px) {

	#post1 p {padding-left:0; width:100%;}
	#post1 h2 {padding-left:0;}

	#post2 p {padding-left:0;}
	#post3 p {padding-left:0;}
	#post4 p {padding-left:0;}

}*/




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

	.logo-small {width:50%;}

	#introSection img {margin-left:5%; width:80%; height:auto;}

	#needImages img {width: 80%; height:auto;}

	#needSection ul {padding-right:5%;}

	#prepSection ul {padding-right:5%;}

	#section1 img {margin-left:5%; width:80%; height:auto;}

	#section1-Images {width:100%; margin:0; padding:0;}

	#section1-Images img {width:80%;}

	#section2-Images {width:100%; margin:0; padding:0;}

	#section2-Images img {width:80%;}

	#section3-Images {width:100%; margin:0; padding:0;}

	#section3-Images img {width:80%;}

	#section4-Images {width:100%; margin:0; padding:0;}

	#section4-Images img {width:80%;}

	#conclusion-Images {width:100%; margin:0; padding:0;}

	#conclusion-Images img {width:80%;}

	aside {padding:0;}

	#tut-wrapper { float:left; clear:both; width:100%; margin-top:200px;}
	
	.contentArea {width:100%; padding:0; margin:0;}
	header nav, #main, aside {
		float: left;
		clear: both;
		margin: 0 0 10px; 
		width: 100%;
		}	
		header nav li {
			margin: 0;
			background: #efefef;
			display: block;
			margin-bottom: 3px;
			}
			header nav a {
				display: block;
				padding: 10px;
				text-align: center;
				}			
}



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

/*	#introSection img {width:75%; height:auto;}*/

	#prepSection ul {padding-right:10%;}

	#section1 img {margin:0; width:70%;}

	#section2 img {margin:0; width:70%;}

	#section3 img {margin:0; width:70%;}

	#section4 img {margin:0; width:70%;}

	#conclusion-Images img {margin:0; width:70%;}

	#footer-content {width:100%;}
}