@charset "utf-8";

header {
	background-color: #c54e05;
}


#logo a {background-image:url(/images/blog/version10/logo.png);}

#mainNav a, h1 {
	color: #FFF;
}

#mainNav a:hover {
	color: #ff9b37;
}


#content {
	color: #4c0707;
}

#intro {
	font-family: 'RobotoLight', Arial, sans-serif;
	font-size: 1.4em;
}	


h2 {
	font-family: 'RobotoLight', Arial, sans-serif;
	color: #c54e05;
	font-size: 2em;
	padding: 30px 12px 10px 12px;
	margin-bottom: 20px;
	text-align: center;
}

h3 {
	color: #c54e05;
	font-family: 'RobotoLight', Arial, sans-serif;
}

article {
	padding: 0 14px;
	max-width: 1100px;
	margin: 0 auto;
}



figure {
	padding-bottom: 30px;
}

figure img {
	width: 100%;
	margin: 20px auto 0 auto;
	max-width: 1100px;
	-webkit-box-shadow: 2px 2px 7px rgba(0,0,0,.22), -2px -2px 7px rgba(0,0,0,.22);
	-moz-box-shadow: 2px 2px 7px rgba(0,0,0,.22), -2px -2px 7px rgba(0,0,0,.22);
	box-shadow: 2px 2px 7px rgba(0,0,0,.22), -2px -2px 7px rgba(0,0,0,.22);
}

#versions figure img {
	max-width: 400px;
}

figcaption {
	font-size: .8em;
}


article a {
	color: #df5704;
}

article a:hover {
	color: #ec9c10;
}

#toTop, #mainNav a#pull {
	background-color: #7a3105;
}

footer {
	background-color: #c54e05;
}

footer p, footer h4 {
	color: #FFF;
}


@media screen and (min-width: 48em) { /* 768 and up */
h2 {
	font-size: 2.5em;
	padding: 30px 0 10px 0;
}

h3 {
	font-size: 1.7em;
	padding: .1em 0 .3em 0;
}

#intro {
	font-size: 1.7em;
}


#versions {
	width: 100%;
	padding-top: 20px;
	margin: 0;
}

figure {
	padding: 0 10px 30px 30px;
}

#versions figure {
	float: left;
}


}


@media screen and (min-width: 60em) { /* 1024 and up */
h2 {
	font-size: 3em;
}	

article p {
	font-size: 1.2em;
}	

#versions figure img {
	max-width: 230px;
}

}

@media screen and (min-width: 75em) { /* 1200 and up */
h2 {
	font-size: 4.3em;
}

article {
	padding: 0 60px 0 14px;
}


}


@media screen and (max-width: 47.5em) { /* mobile nav */
#mainNav li {
	background-color: #2f2a2a;
}
}