@charset "utf-8";

header {
	background-color: #761a1a;
}


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

#mainNav a {
	color: #FFF;
}

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


#content {
	color: #4c0707;
}

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


h2 {
	color: #761a1a;
	font-size: 2em;
	padding: 30px 12px 10px 12px;
	margin-bottom: 20px;
	background-color: #e4e3e3;
	text-align: center;
}

h3 {
	color: #761a1a;
}

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

	
#versions {
	width: 96%;
	margin: 0 2%;
}

figure {
	padding-bottom: 30px;
}

figure img {
	width: 100%;
	margin: 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: #a30505;
}

article a:hover {
	color: #ec9c10;
}

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

footer {
	background-color: #761a1a;
}

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


@media screen and (min-width: 48em) { /* 768 and up */
h2 {
	font-size: 3em;
	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: 4em;
}	

article p {
	font-size: 1.2em;
}	

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

}

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

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


}


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