@font-face {
    font-family: 'caveatregular';
    src: url('/fonts/caveat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'crimsonbold';
    src: url('/fonts/crimson-bold-webfont.woff2') format('woff2'),
         url('/fonts/crimson-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'crimsonitalic';
    src: url('/fonts/crimson-italic-webfont.woff2') format('woff2'),
         url('/fonts/crimson-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'crimsonroman';
    src: url('/fonts/crimson-roman-webfont.woff2') format('woff2'),
         url('/fonts/crimson-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	color: #333;
	font: 100%/1.3 verdana, sans-serif;
	background: #f5f5f5;
}

/* dunno if I'll ever need invisible text, but hey it's my standard */
.ac {
	position: absolute;
	left: -999em;
	top: auto;
	height: 0;
}
	[dir=rtl] .ac {
		left: auto;
		right: -999em;
	}

main, footer {
	display: block;
}
	#mainsite main {
		padding: .5em .2em;
	}

ul, li {
	margin: 0;
	padding: 0;
}

/* style something for mainpage */
li {
	margin: 0 0 .3em 1em;
	list-style: inside circle;
}

		li ul {
			margin: .6em 0 0 1em;
		}


h1, h2, h3, h4 {
	margin: 0 0 .3em;
}
	*+h2,*+h3,*+h4 {
		margin-top: 1em;
	}

.sitename, .scribbles {
	font: bold 2em caveatregular, verdana, sans-serif;
}
	.scribbles {
		text-decoration: none;
		font-size: 1em;
	}
	.sitename a:hover, .sitename a:focus, .sitename a:visited {
		color: #333;
		text-decoration: underline;
	}

/*notes written by him*/
.marcus {
	font-variant: small-caps;
}
/*printed signs (doors etc)*/
.signage {
	font: small-caps bold .8em verdana, sans-serif;
}

/* white roadsigns with black text */
.sign {
	max-width: 8em;
	margin: .5em auto;
	padding: 5px;
	border: 5px double #000;
	border-radius: 10px;
	background-color: #fff;
}

svg {
	display: none;
	vertical-align: baseline;
	fill: currentColor;
}

a {
	color: #059;
}
	a:visited {
		color: #808;
	}
	a:focus, a:hover {
		color: #007e00;
		text-decoration: none;
	}
	a:focus, button:focus {
		outline: 4px solid #b00; 
		outline-offset: 2px;
	}

p {
	margin: 0 0 .6em;
}

/*in-page date links*/
h2 a, h2 a:visited {
	color: #333;
	font: normal .7em crimsonroman;
	text-decoration: none;
}
h2 a:hover {
	text-decoration: underline;
}
h2 a.current {
	font-family: crimsonbold;
}
	h2 a.current svg {
		display: inline-block;
	}

/* general page design */
	main>div,
	footer>div {
		max-width: 40em;
		margin: 0 auto;
		padding: .5em .2em;
		background-color: #fff5dc;
		border: 2px solid #5e3e01;
	}
	main>div {
		border-bottom: 0;
	}
	footer>div {
		border-top: 0;
	}

@media screen and (min-width: 30em) {
	body {	
		padding: 0 0 0 3em;
		font-family: crimsonroman, georgia, serif;
		background: #f5f5f5 url(/images/core_wide.png) repeat-y;
	}
	#mainsite {
		background: #f5f5f5 url(/images/driftless_area_scaled.png) 95% 1em no-repeat;
		background-size: 50% auto;
	}
	#mainsite main {
		width: 40%;
		margin: 5em 0 1em 2em;
	}
	main>div,
	footer>div {
		padding: 1em 3em;
	}
	p.sitename {
		max-width: 23em;/*line up with main>div on story pages*/
		margin: 0 auto 1em;
	}
	.intro {
		margin-bottom: 10em;
	}
	em, i {
		font-family: crimsonitalic;
	}
		i em {
			font-family: crimsonbold;
		}
	em.noitalic {
		font-family: crimsonroman, georgia, serif;
	}
	h1,h2,h3,h4,strong {
		font-family: crimsonbold;
	}
	
	#mainsite h1, #mainsite h2 {
		font: bold 3em caveatregular, verdana, sans-serif;
	}
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

hr {
	display: block;
	margin: 2em 0;
}

em.noitalic {
	font-style: normal;
}

/* line height in pre tags */
pre em, pre i {
	line-height: 1;
}

/*footer*/
.pages {
}
	.pages a {
		display: block;
	}
	.previous {
		margin-bottom: 2em;
	}
	.previous:before {
		content: "\2190\a0";
	}
	.next:after {
		content: "\a0\2192";
	}

@media screen and (min-width: 30em) {
	.pages:after {
		content: "";
		display: block;
		clear: both;
	}
	.previous {
		float: left;
		margin-bottom: 0;
	}
	.next {
		float: right;
	}
}


/*scripts*/
.mouseDetected a:focus,
.mouseDetected button:focus {
	outline: unset;
}