/* two column layout taken from http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm */

/* setting html size to allow background-size: cover to work correctly in Chrome */
html {
	width: 100%;
	height: 100%;}

/* background, main font */
body {
	background: top left fixed black;
	font-family: 'Lora', 'Book Antiqua', Georgia, Serif;
	font-size: 13pt;
	line-height: 1.5;}

#headImage, .rightmenu {
	background: rgba(255, 255, 255, 0.3);}

/* all the header text in one place */
h1, h2, h3, h4, #nav, #headImage p {
	font-family: 'Goudy Bookletter 1911', 'Book Antiqua', Georgia, serif;
	kerning: normal;}
h3 {
	font-size: 180%;
	margin: 0.5em 0;}
h4 {
	font-size: 140%;
	margin: 1em 0 -0.5em;
	clear: both;}
h5 {
	font-size: 100%;
	margin: 1em 0 0;}

/* any normal text that needs forcing */
select, input  {
	font-family: 'Lora', 'Book Antiqua', Georgia, Serif;
	font-size: 12pt;}

a {
	text-decoration: none;
	font-weight: bold;}
	
	#topbar #nav a {
		font-weight: normal!important;}
	
/* "Matt Dovey" at top (if present) */
h1 {
	color: white;
	font-size: 250%;
	font-weight: normal;
	z-index: 10;
	margin: 0 0 -0.35em 0.5em;}	/* drops the tail of the lower case y over the image */
/* enforce style even when link to home */
h1 a {
	color: white;}


/* main links top right */
#nav {
	font-size: 220%;	
	margin: 0.25em 0.5em -0.25em 0;}
#nav a {
	padding-right: 1em;}
#nav a:link, #nav a:visited {
	color: black;}
#nav a:hover, #nav a:active {
	color: white;}

/* main banner, that is no longer an image, but w/e */
#headImage {
	/* position: relative; */
	/* z-index: -10; */ /* can't work out why I ever applied this, but it fucked with links in the new #headIntro, so commenting out and hoping for the best */
	-webkit-border-radius: 1em 1em 0 0;
	-moz-border-radius: 1em 1em 0 0;
	border-radius: 1.5em 1.5em 0 0;}
/* story title, or "Matt Dovey" on main pages */
#headImage h2 {
	margin: 0 1em 0 5%;
	color: white;
	font-size: 500%;
	font-weight: normal;
	letter-spacing: 0.02em;
	text-align: right;
	line-height: 1;
	padding: 0.2em 0;
	width: 88%;}

/* debugging layout */
div {
	/* border: 2px dashed red; */}

.rightmenu {
	/* right (sidebar) column background colour */}
.rightmenu .colleft {
	/* left (main) column background colour */
}

/******************************/
/* col1 = main content column */
/******************************/
/* .col1 {
	padding: 1em 0 0 0;} */
.col1>* {
	margin: 0 0 0 12px;}

/* common text properties */
.col1 div.postContent p, .story  p, .storyIntro p {
	line-height: 1.45;}
.col1 p {
	margin-top: .5em;
	margin-bottom: 1em;
	padding: 0;}
.story p {
	margin: 1em auto;}
.col1 div.postContent p img, .col1 div.postContent li img {
	float: right;
	max-width: 60%;
	margin: 0 0 0.5em 0.5em;}

div.share {
	text-align: center;
}
	div.share img {
		height: 50px;
		margin: 5px;
	}
	div.share a:hover {
		text-decoration: none;
	}
	div.share a:hover img {
		margin: 0px;
		height: 60px;
	}

blockquote {
	font-style: italic;}
	blockquote em {
		font-style: normal;}
	
.col1  a {
	color: black;}
.col1 a:hover, .col1 a:focus, .col1 a:active {
	text-decoration: underline;}
	
hr {
	color: rgba(0, 0, 0, 0.3);}
	
/* for # breaks */
p.break {
	text-align: center;
	font-family: 'Goudy Bookletter 1911';
	font-size: 250%;
	margin: 0 auto;
}

/* blog entries */
.col1 p.datetime {
	font-size: 90%;
	margin: 1em 0 -1em 0;}
.col1 div.postContent {
	margin: 0 0 1em 0;}
.col1 p.more {
	margin: 0 0 2em 0;}
p.morePosts {
	font-size: 125%;
	width: 100%;
	min-height: 2em;}
	p.morePosts a.olderBlog {
		float: left;}
	p.morePosts a.newerBlog {
		float: right;
		padding-right: 0.5em;}		/* otherwise the arrowhead gets lost */

/* index.php */
#headIntro {
	
	font-size: 125%;
	padding: 0 2em 1em;
	overflow: hidden;
}
	#headIntro p {
		font-family: 'Lora', 'Book Antiqua', Georgia, Serif;
	}
	#headIntro a {
		color: black;
	}
	#headIntro img#headshot {
		float: right;
		margin: 1em 0 0 1em;
	}
	#headIntro #introText::first-line {
		font-size: 125%;
	}
	#headIntro h3 {
		font-size: 150%;
		margin: 0 0 -0.5em 0;
	}
	#headIntro .sideQuote {
		max-width: 60ex;
	}
	#headIntro .speechMark {
		position: absolute;
		display: block;
		overflow: hidden;
		font-size: 800%;
		color: white;
		color: rgba(0,0,0,0.15);
		z-index: 10;
		line-height: 1;
		margin: 0.2em 0 -0.2em 0;}
		
	#headIntro a.sideStoryLink {
		display: block;
		max-width: 48ex;
		text-align: right;
		z-index: 20;
		position: relative;
		margin-top: 0.5em;
		font-size: 125%;
		color: black;
		font-weight: bold;}

/* about.php */
dl#bios dt {
	font-weight: bold;
}
dl#bios dd {
	margin-bottom: 1em;
}

div#pressKitPhotos {
	text-align: center;
	vertical-align: middle;
}
div#pressKitPhotos img {
	margin: 2%;
	max-width: 42%;
	vertical-align: middle;
}
		
/* stories.php */
fieldset {
	border: 1px solid #ddd;
	color: rgba(0, 0, 0, 0.7);
	line-height: 2.5;
	padding: 0.25em;
	position: relative;}
fieldset strong {
	margin: 0 1em 0 0;}

label {
	margin: 0 0 0 1em;}
select, option, input {
	border: none;
	background: rgba(255, 255, 255, 0.6);
	color: rgba(0, 0, 0, 0.85);}
select {
	margin: 0 0.5em 0 0;
	padding: 0.25em;
	border: 1px solid silver;}
input {
	padding: 0.25em;
	margin: 0 0 0 0em;}
input.button {
	font-size: 110%;
	padding: 0 0.5em;
	border: 1px solid rgba(0, 0, 0, 0.3);
	float: right;}
.col1 fieldset input.button {
	position: relative;
	right: 0.25em;
	top: 0.5em;
	margin-bottom: 0.5em;}
.labelInput {
	white-space: nowrap;}

div.post>h3>a {}
p.storyDetails {}

.storyIntro {
	padding: 0 0 0 1em;}

h4.narrAuthor {
	margin: -0.75em 0 0.25em;}

	
/* story page */
p.exclusive {
	text-align: center;}
p.exclusive a {
	font-size: 120%;}

p.storyEnd {
	text-align: center;}
p.storyEnd div.addthis_toolbox {
	border: 1px solid red;}
	
p.contentWarning {
	width: 95%;
	margin: 1em auto;
	padding: 0.5em;
	border: 2px solid black;}
	
/* admin page */
form.admin input {
	border: 1px solid gray;
}

/******************/
/* col2 = sidebar */
/******************/
.col2 {
	padding-top: 0em;
	line-height: 1.5;}

.col2 h4 {
	margin: 1em 0 0 0;
	clear: both;}

.col2 p {
	margin: 0;}

.col2 a {
	color: black;}

.col2 img.sidebarImage {
	max-width: 100%;}

div.sideQuote {
	position: relative;
	font-style: italic;
	z-index: 10;}
	div.sideQuote em {
		font-style: normal;
	}
	div.sideQuote p {
		margin-bottom: 0.75em;
	}
	
.col2 .speechMark {
	position: absolute;
	display: block;
	overflow: hidden;
	font-size: 1200%;
	color: white;
	color: rgba(0,0,0,0.15);
	z-index: 10;
	line-height: 1;
	margin: 0.2em 0 -0.2em 0;}

.top {
	height: 0.6em;
	top: -0.25em;
	left: 0;}

.bottom {
	bottom: -0.05em;
	right: 0.1em;
	height: 0.6em;}
	
.col2 a.sideStoryLink {
	display: block;
	text-align: right;
	z-index: 20;
	position: relative;
	margin-top: 0.5em;
	font-size: 110%;}
	
.col2 a:hover, .col2 a:focus, .col2 a:active {
	text-decoration: underline;}

div.addthis_sharing_toolbox {
	display:table;
	margin: 0 auto;}
	
.storyFoot h4 {
	/* border: 1px solid red; */
	float: left;
	clear: both;
	margin: -0.25em 0 0 3em;
	padding: 0 0 1em;}
.storyInfo {
	/* border: 1px solid blue; */
	float: left;
	padding: 0 0 0 1em!important;}
.storyInfo h4 {
	margin: -0.25em 0 0 0.5em;}
	.storyInfo h4:first-child {
		margin-top: 1em;
		padding: 0;
		float: none;}
.storyInfo>p {
	padding: 0 1em 1em 1em;}
.storyInfo>p.clear {
	padding: 0;}
	
ul.blogMonths {
	margin: 0.5em 0 0 -1.3em;
	list-style-type: square;
}


#footer {
	font-size: 90%;
	text-align: right;}
	
#footer p {
	padding: 0.25em 0.5em;}

#footer p a {
	color: black;}

/* miscellaneous */
.floatRight {
	float: right;
	margin: 0 0 1em 1em;}
abbr {
	cursor: help;}
	
/* mobile */
@media screen and (max-width: 768px) {

	h1 {
		font-size: 175%;}
	#nav {
		font-size: 150%;}
	#headImage h2 {
		font-size: 300%;}
		
	#headIntro {
		font-size: 110%;
		padding: 0 1em;
		overflow: hidden;
	}
	#headIntro img#headshot {
		float: none;
		display: block;
		margin: 0 auto;
		max-width: 100%;
	}
	
	div#pressKitPhotos img {
		max-width: 90%;
	}
	
	.col2 h4 {
		border-top: 1px solid #aaa;
		padding-top: 0.5em;}
	.col2 h4:first-child {
		border-top: 0;
		padding-top: 0;}
	.storyInfo h4 {
		border-top: 0;
		padding-top: 0;
	}
		
	/* miscellaneous */
	.floatRight, .col1 div.postContent p img {
		float: none;
		display: block;
		max-width: 90%;
		max-height: 300px;
		margin: 0 auto;}
		
}