div, table, p, * { font-size: 1em; line-height: 1.4em; font-family: 'Oxygen', sans-serif;	}

em { font-style:italic; }

.offLeft {
	position: absolute;
	left: -9000px
}
#wrap {
	margin-top: 0;
	margin-left: 3.125%; /* 10px / 320px */
	margin-right: 3.125%; /* 10px / 320px */
	margin-bottom: 0;
	max-width: 1000px;
}

nav {
	position: fixed;
	background-color: #fff;
	top: 0;
	width: 100%;
	padding-bottom: 1em;
}

	nav ul {
		margin-top: 1em;
		padding-left: 2em;
	}
		nav ul li {
			display: inline;
		}

		nav a {
			font-family: 'Courgette', cursive;
			font-size: 1em;
			color: #999;
			text-decoration: none;
			padding-right: 2em;
		}
		
			nav a:hover {
				text-decoration: underline
			}
			
@media screen and (min-width: 0px) and (max-width: 500px) {
	nav {
	position: relative;
	width: 100%;
	background-color: #56302A;
	margin-bottom: 0;
	}

	nav ul {
		margin-top: 1em;
		padding-left: 0;
	}
		nav ul li {
			display: block;
			border-top: 1px solid #fff;
		}
		
		nav ul li:first-child {
			border-top: none;
		}

		nav a {
			display: block;
			font-family: 'Courgette', cursive;
			font-size: 1.2em;
			color: #CCC;
			text-decoration: none;
			padding: 0 1em 1em 1em;
			border-top: 1px solid #fff;
		}
		
			nav a:first-child {
				padding-top: 1em;
				border-top: none;
			}
		
			nav a:hover {
				text-decoration: none
			}
}

h1#header {
	margin: 4em auto 2em auto;
}

@media screen and (min-width: 0px) and (max-width: 500px) {
	h1#header {
		margin: .5em auto 2em auto;
	}
}
	
img#logo {
	display: block;
	margin: 2em auto;
}

@media screen and (min-width: 1000px) {
	h1#header {
		width: 100%;
		height: 324px;
		background: url('images/headers/hdr-drumset1-1000px.jpg') no-repeat;
		overflow: hidden;
	}
}

@media screen and (min-width: 480px) and (max-width: 1000px) {
	h1#header {
		width: 100%;
		height: 267px;
		background: url('images/headers/hdr-drumset1-850px.jpg') no-repeat;
	}
}

@media screen and (min-width: 0px) and (max-width: 480px) {
	h1#header {
		width: 100%;
		height: 155px;
		background: url('images/headers/hdr-drumset1-480px.jpg') no-repeat;
	}
}

@media screen and (min-width: 768px) {
	body#home section { width: 45%; float: left; margin-right: 3.125%; /* 10px / 320px */  }
}

@media screen and (min-width: 768px) {
	section.storyList { width: 100%; float: left; margin-right: 3.125%; /* 10px / 320px */  }
}

@media screen and (min-width: 1024px) {
	body#home section { width: 27%; float: left; margin-right: 3.125%; /* 10px / 320px */  }
}

@media screen and (min-width: 1024px) {
	section.storyList { width: 100%; float: left; margin-right: 3.125%; /* 10px / 320px */  }
}


article.detail header h1 {
	font-family: 'Courgette', cursive;
	font-size: 1.4em;
	color: #000;
	margin-top: 1.3em;
	padding-bottom: .3em;
	margin-bottom: .5em;
	background: url('images/rule.gif') repeat-x left bottom;
}

article.story header h2 {
	font-weight: bold;
}

.sectionHeader {
	font-family: 'Courgette', cursive;
	font-size: 1.4em;
	color: #000;
	margin-top: 1.3em;
	padding-bottom: .3em;
	margin-bottom: .5em;
	background: url('images/rule.gif') repeat-x left bottom;
}

h3 {
	font-weight: bold;
	border-bottom: 2px dotted #CCC;
	margin: .25em 0 .5em 0;
}

article.detail div.meta div.author {
	position: absolute;
	left: -9000px;
}

article.detail div.meta div.publishDate, article.story div.meta div.publishDate {
	padding-bottom: 1em;
	color: #777;
}

	article.detail div.publishDate span.dt {
		position: absolute;
		left: -9000px;
	}

article.detail div.content p {
	padding-bottom: .6em; 
}

article.detail div.content ul {
	list-style: disc;
	margin-left: 2em;
	padding-left: 2em;
}

	article.detail div.content ul  li {
		padding-bottom: .6em;
	}

.date {
	font-size: 90%;
	color: #777;
}

#gigCal {
	font-size: 95%
}

	.gigDate {
		float: left;
		width: 30%;
		padding-right: 1em;
	}

	.gigPlace {
		clear: both;
	}
	
section p {
	padding-bottom: .75em;
}

#socialMediaIcons {
	float: right;
}

	@media screen and (min-width: 0px) and (max-width: 500px) {
		#socialMediaIcons {
			float: none;
			margin-bottom: 1em;
		}
	}
	
#footer {
	clear: both;
	height: 250px;
	font-size: 95%;
	color: #CCC;
	margin-top: 2em;
	border-top: 4px solid #56302A;
	padding: 3em 2em;
	background: #888 url('images/tweed.jpg') repeat;
}

	@media screen and (min-width: 0px) and (max-width: 500px) {
		#footer {
		margin-top: 0;
		}
	}

.footer-left {
	background-color: rgba(86,48,42,.75);
	width: 200px;
	float: left;
	padding: 1em;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.footer-left p {
	padding-bottom: 1em;
}

#footer a {
	color: #CCC;
}