body {
    font-family: "Crimson", Garamond, serif;
	margin: 40px auto 20px;
    background-color: #fffefc;
    color: #000;
	font-size: 18px;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body.dark { color: #eee; }
body.dark a, body.dark .acolour, body:not(.artPage) #lightbox a { color: #1bce6a; }

body > *, .pageWidth {
	max-width: 800px; 
	margin-left: auto; 
	margin-right: auto; 
}

body.wide > *, body.wide .pageWidth { max-width: 1000px; }

footer {
    position: relative;
    padding: 15px 0 70px;
    font-size: 0.7em; /*12px*/
}

a, .acolour {
    color: #007850;
    text-decoration: none;
}

a:hover, a:active, .fakea:hover, .fakea:active { text-decoration: underline; }
svg { fill: currentColor; }

svg.stroke { 
	stroke: currentColor; 
	fill: none;
}

svg.icon.text { top: -2px; }

.stripe {
	margin: -40px 0 40px !important;
	background: #2b4532;
	padding: 10px;
	max-width: none !important;
}

.stripe.front { 
	position: relative;
	z-index: 100; 
}

.stripe .pageWidth {
	display: flex;
	justify-content: flex-end;
}

.stripe .logo {
	color: #1bce6a !important;
	fill: #1bce6a;
	float: right;
	height: 40px;
	width: 129px;
}

a.back {
	display: block;
	margin: 30px 0 40px 0;
	text-align: center;
}

.icon { 
	height: 50px;
	display: inline-block;
}

.icon.text, .icon.small {
	height: 20px;
	width: 20px;
	vertical-align: middle;
	position: relative;
	top: -1px;
	margin: 0 5px;
}

.icon.small {
	height: 15px;
	width: 15px;
	margin: 0 3px;
	top: -2px;
}

.icon.fav {
	height: 15px;
	width: 15px;
	top:-3px;
	margin: 0 2px 0 0;
}

.pixelated, .pixelated img {
	image-rendering: crisp-edges; 
	image-rendering: pixelated; 
}

h1 {
	font-size: 3em; /*60px*/
	font-weight: 600;
	letter-spacing: -0.5pt;
	margin: 0 0 2px;
	clear: both;
}

h1.left {
	float: left;
	margin: -5px 15px 2px 0;
}

h1 .light { font-weight: 400; }

h2 {
	font-size: 1.8em; /*32px*/
	font-weight: 400;
	letter-spacing: -0.4pt;
	margin: 0 0 5px;
	clear: both;
}

h3 {
	font-size: 1.35em; /*24px*/
	font-weight: 400;
	margin: 5px 0 0;
}

.center { text-align: center; }
h2.center { margin: 50px 0 10px; }
ul, ol { padding: 0 0 0 30px; }
li { padding: 5px 0; }

.iconList {
	list-style: none;
	padding-left: 15px;
}

.prose p { margin: 25px 0 10px; }
.prose h1:not(.left) + p { margin: 0 0 10px; }
.prose h2 + p { margin: -5px 0 10px; }
.prose h3 + p  { margin: -1px 0 10px; }
.prose p + h1, .prose p + h2:not(.center), .prose p + h3 { margin-top: 35px; }

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	margin: 20px -20px 30px;
}

.gallery figure {
	width: 20%;
	margin: 0;
	box-sizing: border-box;
	padding: 20px 20px;
}

.gallery figcaption {
	text-align: left;
	padding: 20px 0 0;
}

.gallery.vertical {
	display: block;
	column-count: 3;
	column-width: 150px;
	column-gap: 7em;
	margin: -10px 0 30px;
}

.gallery.vertical > a, .gallery.vertical article {
	width: 100%;
	padding: 20px 0;
	display: inline-block;
	color: inherit;
}

.gallery img, .gallery.vertical img { 
	height: auto;
	width: 100%; 
}

.gallery.vertical p { margin: 0; }

.nowrap, footer .top { white-space: nowrap; }
.break { word-break: break-all; }
.hidden, .nojs .jsonly, .nojs #filters.jsonly  { display: none; }

.warning {
	color: #ad0d0d;
	font-weight: 500;
	margin: 0 5px 0 -3px;
}

.close {
	display: block;
	text-align: right;
	padding: 0 0 15px;
	cursor: pointer;
}

#lightbox {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	padding: 20px 0 0;
	background: #111;
	transition: ease-in opacity 0.2s, ease-in visibility 0.2s, display 0s; 
	overflow: scroll; 
}

#lightbox[data-showat="left"] { padding: 60px 0 0; }

#lightbox .content {
	max-width: 800px;
	margin: auto;
	padding: 0 20px;
	overflow: hidden;
}

#lightbox .content > * { clear: none; }

body.wide #lightbox .content { max-width: 900px; }
#lightbox #displayImage { width: 100%; }

#lightbox[data-showat="left"] #displayImage {
	min-width: 33%;
	max-width: 50%;
	float: left;
	margin: 5px 20px 0 0;
	padding-bottom: 40px;
}

#lightbox[hidden] {
	display: block;
	visibility: hidden;
	opacity: 0;
}

body.noscroll { 
	overflow: auto;
	height: 100%; 
	position: fixed;
	left: 0; 
	right: 0;
}

blockquote {
	margin: 20px 30px 20px;
	font-style: italic;
}

blockquote:before, blockquote:after { 
	content: "\201C"; 
	font-style: normal;
	font-weight: bold;
}

blockquote:after { content: "\201D"; }

.split { 
	display: flex; 
	flex-direction: row-reverse;
	align-items: flex-start;
}

aside {
	border-left: 1px solid #ddc;
	margin: 0 0 30px 40px;
}

aside ul {
	padding: 0;
	margin: 10px 0 30px -1px;
	list-style-type: none;
}

aside li {
	font-size: 1.1em;
	font-weight: 500;
	letter-spacing: -0.2px;
	padding: 10px 30px 7px 30px;
	cursor: pointer;
}

aside li .icon.small {
	/display: none;
	margin-left: 0;
} 

aside #selected {
	border-bottom: 1px solid #ddc;
	border-top: 1px solid #ddc;
	border-left: 1px solid #fffefc;
}

.superpad { padding: 20% 0 30%; }
.nojs .jshide[hidden] { display: inline; }

@media screen and (max-width: 1050px) and (min-width: 850px) {
	body.wide > * {
        margin-left: 30px;
        margin-right: 30px;
    }
}

@media screen and (max-width: 850px) {
	body > * {
        margin-left: 25px;
        margin-right: 25px;
    }
}

@media screen and (max-width: 600px) {
    body > * {
        margin-left: 20px;
        margin-right: 20px;
    }
		
	.gallery { margin: 20px 0 30px; }
	
	.gallery figure { width: 33%; }
	.gallery.large figure { width: 100%; }
	
	.gallery.large figure { 
		padding-left: 0; 
		padding-right: 0;
	}
	
	#lightbox[data-showat="left"] { padding: 20px 0 0; }
	
	#lightbox[data-showat="left"] #displayImage {
		min-width: 100%;
		max-width: 100%;
		float: none;
		margin: 0;
		/*basically, don't show at the left. very semantic!*/
	}
    
    footer { padding: 10px 0 50px; }
}

/* Font importing*/
@font-face {
  font-family: "Crimson";
  font-style: normal;
  font-weight: 400;
  src: 
  	url("/fonts/crimsonroman.woff2") format("woff2"),
  	url("/fonts/crimsonroman.woff") format("woff");
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: "Crimson";
  font-style: italic;
  font-weight: 400;
  src:
  	url("/fonts/crimsonitalic.woff2") format("woff2"),
  	url("/fonts/crimsonitalic.woff") format("woff");
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: "Crimson";
  font-style: normal;
  font-weight: 600;
  src:
  	url("/fonts/crimsonsemibold.woff2") format("woff2"),
  	url("/fonts/crimsonsemibold.woff") format("woff");
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: "Crimson";
  font-style: italic;
  font-weight: 600;
  src:
  	url("/fonts/crimsonsemibolditalic.woff2") format("woff2"),
  	url("/fonts/crimsonsemibolditalic.woff2") format("woff");
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: "Crimson";
  font-style: normal;
  font-weight: 700;
  src:
  	url("/fonts/crimsonbold.woff2") format("woff2"),
  	url("/fonts/crimsonbold.woff") format("woff");
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: "Crimson";
  font-style: italic;
  font-weight: 700;
  src:
  	url("/fonts/crimsonbolditalic.woff2") format("woff2"),
  	url("/fonts/crimsonbolditalic.woff") format("woff");
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: 400;
  src:
  	url("/fonts/inconsolataregular.woff2") format("woff2"),
  	url("/fonts/inconsolataregular.woff") format("woff");
  unicode-range: U+000-5FF;
}