header#utilityheader {
	padding-top: .2rem;
	padding-bottom: .2rem;
}
header#utilityheader .row {
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
}









header#mainheader {
	padding-top: 1rem;
	padding-bottom: 1rem;
	
	background-color: var(--body-shift);
}

img#storylogo {
	height: 5rem;
	
	flex-shrink: 1;
	-webkit-flex-shrink: 1;
	-moz-flex-shrink: 1;
	
	display: block;
	
	overflow: hidden;
}









header.pageheader {
	padding-top: var(--sectionPadding);
	padding-bottom: var(--sectionPadding);
	
	background-color: var(--callout);
	
	text-align: center;
}
header.pageheader h1 {
	margin-bottom: 0;
}









#callouts {
	margin-top: var(--itemSpacing);
	margin-bottom: var(--itemSpacing);
}

#calloutgrid {
	display: grid;
	grid-template-columns: [left] 75fr [col1] 25fr [right];
	grid-template-rows: [top] 50fr [row1] 50fr [bottom];
	column-gap: var(--itemSpacing);
	row-gap: var(--itemSpacing);
}
#calloutgrid > * {
	margin-bottom: 0;
}
#calloutgrid > *:first-child {
	grid-column: left / span 1;
	grid-row: top / span 2;
	
	min-height: 50vh;
}
#calloutgrid > *:nth-child(2) {
	grid-column: col1 / span 1;
	grid-row: top / span 1;
}
#calloutgrid > *:nth-child(3) {
	grid-column: col1 / span 1;
	grid-row: row1 / span 1;
}









#calloutsocial {
	margin-top: 2rem;
	margin-bottom: 2rem;
}








/*
{
	"type": "section",
	"id": "about",
	"text": "<h1>Bale of the Banshee</h1><p>Is a graphic novel starring private detective <b>Dirk Maximus</b>.</p>"
},
*/
#about {
	background-image: url(../../images/bp3.jpg);
	background-position: top center;
	background-repeat: repeat;
	
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	
	padding: 4rem 0;
	margin-bottom: 2rem;
	
	text-align: center;
}
#about h1 {
	font-size: 3rem;
	
	margin-bottom: .5rem;
}
#about p {
	font-size: 1.25rem;
}








#mainfooter {
	background-color: var(--body-shift);
	
	padding-bottom: 2rem;
}

#mainfooter_content {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

img#storylogo_footer {
	height: 5rem;
	margin-bottom: 1rem;
	
	display: block;
	
	overflow: hidden;
}

/*
#footercol_right {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
}
*/

#copyright {
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
}