/* 
	Borders #e1e1e1 15px 
	Default body text grey #707070
	Darker body text grey #464646
*/

body {
	font-family: sans-serif;
	font-weight: bold;
	line-height: 1;
	margin: 0 auto;
	color: #707070;
	}

ol, ul {
	list-style: none;
}

/* 
	Typography
*/
	
h1, h2, h3, h4, h5, h6, p, li, ul, ol {
	margin: 0;
	padding: 0;
}

p, li {
	font-size: 1em;
	margin-bottom: 1em;
}
p:last-child, li:last-child {
	margin-bottom: 0;
}
p {
	line-height: 1.3;
}

h1 {
	font-size: 1.5em;
	margin: 1em 0;
}
h2 {
	font-size: 1.5em;
	color: #e1e1e1;
	margin: 1em 0;
}

/* 
	Links
*/

a:link, a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #32979a;
}
a:hover, a:active, a:focus {
	color: #dd4814;
}

#brand a:link, #brand a:visited,
#brand a:hover, #brand a:active {
	color: #fff;
}

nav a:link, nav a:visited {
	color: #e1e1e1;
}
nav a:hover, nav a:active, nav a:focus {
	color: #32979a;
}

#elsewhere a:link, #elsewhere a:visited,
#speaking-and-writing a:link, #speaking-and-writing a:visited {
	color: #707070;
}
#elsewhere a:hover, #elsewhere a:active, #elsewhere a:focus,
#speaking-and-writing a:hover, #speaking-and-writing a:active, #speaking-and-writing a:focus {
	color: #32979a;
}

footer a:link, footer a:visited {
	color: white;
	background: black;
	display: inline-block;
	padding: .25em .5em;
}
footer a:hover, footer a:active, footer a:focus {
	background: #464646;
}

/* 
	Brand
*/

#brand {
	font-size: .875em;
	font-weight: bold;
	color: white;
	background: black;
	padding: .5em;
	position: fixed;
	z-index: 100;
	left: 50%;
	margin-left: -2.8em;
	top: 0;
}

/* 
	Main navigation
*/

nav {
	font-size: 1.5em;
	line-height: 1.2;
	text-align: center;
	padding: 0 1em;
}
nav ol {
	margin: 2em 0 1em;
}
nav li {
	display: inline;
	margin-right: .09em;
}
nav li:last-child {
	margin-right: -.2em;
}
nav li::after {
	content: "\2F";
	margin-left: .3em;
	color: #e1e1e1;
}
nav li:last-child::after {
	content: "";
}

nav h1 {
	font-size: 1em;
	display: inherit;
}

/* 
	Big blocks
*/

section {
	box-sizing: content-box;
}

#main {
	margin: auto;
	padding: 0 1em;
	max-width: 64.4em;
}

footer {
	font-size: .875em;
	text-align: center;
	margin-top: 2.5em;
	clear: both;
}

/* 
	Homepage
*/

#about-me {
	position: relative;
	border-top: 15px solid #e1e1e1;
	border-bottom: 15px solid #e1e1e1;
	background: url(yaili-in-manchester.jpg) no-repeat center center;
	background-size: cover;
	color: #464646;
	padding: 0;
}
#about-me div {
	background: rgba(255,255,255,.7);
	padding: 2em;
}

#elsewhere {
	border-bottom: 15px solid #e1e1e1;
	padding-bottom: .8em;
}
#elsewhere li {
	display: inline-block;
	margin-right: .3em;
}
#elsewhere li:last-child {
	margin-right: -.2em;
}
#elsewhere li::after {
	content: "\2F";
	font-weight: bold;
	margin-left: .4em;
}
#elsewhere li:last-child::after {
	content: "";
}
#elsewhere li:last-child {
	margin-bottom: 1em;
}

#speaking-and-writing {
	display: table;
	width: 100%;
	border-bottom: 15px solid #e1e1e1;
	padding-bottom: 2.5em;
}

/* 
	Latest
*/

#latest-songs,
#latest-photos {
	border-bottom: 15px solid #e1e1e1;
	padding-bottom: 2.5em;
}
#latest-articles {
	padding-bottom: 2.5em;
}
#latest-songs li,
#latest-photos li {
	display: inline;
	margin: 0 .5% 0 0;
}
#latest-songs li:nth-child(3n),
#latest-photos li:nth-child(3n) {
	margin-right: 0;
}
#latest-songs li:last-child,
#latest-photos li:last-child {
	margin-right: 0;
}
#latest-songs li img,
#latest-photos li img {
	width: 31.9%;
}

/* 
	Good things
*/

#good-things li {
	margin: 0 .5% .5%;
	vertical-align: top;
	width: 48.4%;
	display: inline-block;
}
#good-things li:nth-child(2n) {
	margin-right: 0;
}
#good-things li img {
	width: 100%;
	height: auto;
}

/* 
	Contact
*/

#availability-note {
	border-top: 15px solid #e1e1e1;
	margin-top: 2.5em;
	padding-top: 2.5em;
}

@media screen and (min-width: 640px) {
	p, li {
		font-size: 1.5em;
	}
	h2 {
		font-size: 2.25em;
	}
}
@media screen and (min-width: 480px) and (max-width: 639px) {	
	#latest-songs li:nth-child(3n),
	#latest-photos li:nth-child(3n) {
		margin-right: .5%;
	}
	#latest-songs li:nth-child(4n),
	#latest-photos li:nth-child(4n) {
		margin-right: 0;
	}
	#latest-songs li img,
	#latest-photos li img {
		width: 23.6%;
	}
}
@media screen and (min-width: 640px) and (max-width: 979px) {	
	#about-me div {
		margin-left: 30%;
	}
	
	#latest-songs li:nth-child(3n),
	#latest-photos li:nth-child(3n) {
		margin-right: .5%;
	}
	#latest-songs li:nth-child(6),
	#latest-photos li:nth-child(6) {
		margin-right: 0;
	}
	#latest-songs li img,
	#latest-photos li img {
		width: 15.6%;
	}
}
@media screen and (min-width: 640px) {
	h1 {
		font-size: 2em;
	}
	
	nav {
		font-size: 2em;
	}
	nav ol {
		margin: 2em 0 1.5em;
	}
	
	#speaking,
	#writing {
		width: 50%;
		display: table-cell;
	}
	#writing {
		padding-right: .5%;
	}
	#speaking {
		padding-left: .5%;
	}
		
	#good-things li {
		margin: 0 .5% .5%;
		vertical-align: top;
		width: 23.3%;
		display: inline-block;
	}
	#good-things li:nth-child(2n) {
		margin-right: .5%;
	}
	#good-things li:nth-child(4n) {
		margin-right: 0;
	}
}
@media screen and (min-width: 980px) {	
	#about-me div {
		margin-left: 50%;
	}
	
	#latest-songs li:nth-child(3n),
	#latest-photos li:nth-child(3n) {
		margin-right: .5%;
	}
	#latest-songs li:nth-child(6),
	#latest-photos li:nth-child(6) {
		margin-right: .5%;
	}
	#latest-songs li img,
	#latest-photos li img {
		width: 7.4%;
	}
}