/* Standard link colours. */
a:link, a:visited {
	color: #282828;
	text-decoration: none;
}
.content_inner a:link, .content_inner a:visited {
	text-decoration-line: underline;
	text-decoration-style: double;
	text-decoration-color: #847762;
}
.content_inner a:hover, .content_inner a:focus {
	text-decoration-color: #423b31;
}
/* Custom selection colours. */
::selection {
	background: hsl(40, 55%, 70%);
	color: #000;
	text-shadow: none;
}
/* Gives much better spacing to following elements. */
em {
	padding-right: .125em;
}
/* Main elements. */
html {
	margin: 0;
	padding: 0;
	background-color: #202c25;
	background-image: linear-gradient(#0d120f, #202c25 400px);
	font-size: 100%;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	color: #282828;
	font-size: 1rem;
	line-height: 1.625em;
	font-family: 'segoe ui', sans-serif;
}
/* Target anchor for #custom_top */
#top_anchor {
	position: absolute;
	top: 0;
	left: 0;
}
/* Skip navigation links, as per AIM standards. */
#skip_nav {
	position: absolute;
	display: block;
	z-index: -1;
	top: -1px;
	left: 50%;
	width: 16.125rem;
	margin-left: -8.125rem;
	padding: 0 .25rem .25rem;
	background: #6f370f;
	text-decoration: none;
	border: 1px solid #000;
	border-radius: 0 0 7px 7px;
	box-shadow: 1px 2px 2px rgba(0,0,0,.7);
	opacity: 0;
	transition: z-index 1s step-end, opacity 1s ease-in;
}
#skip_nav:focus {
	z-index: 9;
	opacity: 1;
	outline: none;
	transition: z-index .1s step-start, opacity .1s step-start;
}
#skip_nav::before {
	display: block;
	width: 16rem;
	background: #5c2e0c url(../images/main/main_bars.jpg);
	background-position: 0 -192px;
	color: #ded291;
	font-weight: 400;
	font-family: constantia, serif;
	font-size: 1.5rem;
	line-height: 4rem;
	text-align: center;
	text-shadow: 0 0 1px #000;
	border: 1px solid #000;
	border-radius: 0 0 4px 4px;
	content: 'Skip to content';
}
/* top/bottom links. */
.custom_anchor {
	position: fixed;
	z-index: 4;
	left: 0;
	width: 30px;
	background-image: linear-gradient(90deg, #38634a, #2c4d3a);
	opacity: .3;
}
.custom_anchor:hover, .custom_anchor:focus {
	z-index: 5;
	box-shadow: 1px 2px 2px #000c;
	opacity: 1;
}
#custom_top {
	bottom: 50%;
	border-top-right-radius: 8px;
}
#custom_bottom {
	top: 50%;
	border-bottom-right-radius: 8px;
}
.custom_anchor::before {
	display: block;
	color: #ded291;
	font-size: 1.25em;
	line-height: 35vh;
	text-align: center;
	text-shadow: 0 0 1px #000;
}
#custom_top::before {
	content: '\21C8';
}
#custom_bottom::before {
	content: '\21CA';
}
/* Main menu. */
#menu_bar {
	flex: 0 0 auto;
	background-color: #bca27b;
	background-image: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.15) 40px), url(../images/main/menu_bar.jpg);
	font-size: .9375em;
}
#menu_bar::before, #menu_bar::after {
	display: block;
	width: 100%;
	height: 4px;
	content: '';
	background: #6f370f;
	border: solid #000;
	border-width: 1px 0;
}
#menu_bar::after {
	height: 3px;
	background: #4d260a;
}
#site_menu, .secondary_menu {
	list-style:none;
	margin: 0;
	padding: .375em 1em;
	text-align: center;
}
/* Shared between both. */
#site_menu>li, .secondary_menu li {
	display: inline-block;
	position: relative;
	padding: 4px 0;
	text-align: start;
}
/* Note: Declare secondary menu parent to nail link styling. */
#site_menu>li>a, .secondary_menu a {
	display: block;
	padding: 0 8px;
	background: #c4a058;
	background: linear-gradient(#c4a058, #ebc06a 25%, #c4a058 75%, #8c7649);
	color: #18110e;
	font-weight: 400;
	font-size: .9375rem;
	line-height: 1.6875rem;
	white-space:nowrap;
	border: 1px solid;
	border-color: #8c7649 #463b25 #231d13 #695937;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0,0,0,.44);
}
.secondary_menu a {
	box-shadow: 0 2px 2px rgba(0,0,0,.66);
	border-radius: 0;
}
.secondary_menu li:first-child a {
	border-radius: 4px 0 0 4px;
}
.secondary_menu li:last-child a {
	border-radius: 0 4px 4px 0;
}
#site_menu>li>a:hover, #site_menu>li>a:focus, #site_menu>li:hover>a {
	filter: hue-rotate(-3deg);
	border-color: #231d13 #463b25;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.33), 0 1px 1px rgba(255,255,255,.15);
}
.secondary_menu a:hover, .secondary_menu a:focus {
	filter: hue-rotate(-4deg);
	border-color: #463b25 #463b25 #231d13;
	box-shadow: 0 -1px 0 rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.15);
}
/* The drop menus. */
.sub ul {
	position: absolute;
	z-index: 1;
	left: -120vw;
	list-style: none;
	margin: 2px 0;
	padding: 6px 1px 8px;
	background-color: #c8b08d;
	border: 1px solid #6f5f49;
	border-radius: 0 6px 0 3px;
	box-shadow: 1px 2px 2px rgba(0,0,0,.44);
	opacity: 0;
	transform: scale(0);
	transform-origin: top left;
	transition: left .5s step-end, transform .5s step-end, opacity .5s ease-in;
}
.sub ul::before {
	position: absolute;
	display: block;
	z-index: -1;
	content: '';
	top: 0;
	right: -1em;
	bottom: -4em;
	left: -1em;
}
.sub li {
	padding: 3px 0;
}
.sub li a {
	display: block;
	overflow: hidden;
	padding: 0 1em 0 8px;
	font-weight: 400;
	line-height: 2em;
	white-space: nowrap;
	text-overflow: ellipsis;
	opacity: 0;
	transition: background-color .1s linear .05s, color .1s linear .05s;
}
.sub:hover ul {
	z-index: 9;
	left: 0;
	opacity: 1;
	transform: scale(1);
	transition: left .05s step-end, transform .25s linear .05s, opacity.05s step-end;
}
.sub:hover li a	 {
	opacity: 1;
	transition: opacity .15s linear .15s;
}
.sub li a:hover, .sub li a:focus {
	background-color: #635542;
	color: #fcfcfc;
}
/* Tricky stuff. */
.burger_check, .hamburger {
	display: none;
}
/* Basic page wrapper. */
#wrapper {
	flex: 0 0 auto;
	width: 64rem;
	max-width: calc(100% - 2rem);
	margin: 1.5em auto;
	background: #968163 url(../images/main/wrapper.jpg);
	border: 4px solid #5b2d0c;
	border-radius: 8px 8px 3px 3px;
	box-shadow: 0 3px 4px #000;
}
/* Header, with linked banner. */
#header {
	padding: 6px;
	background: linear-gradient(rgba(144, 113, 83, 0.666),rgba(230, 192, 158, 0.403));
	border: solid #000;
	border-width: 1px 1px 0;
	border-radius: 4px 4px 0 0;
}
h1 {
	overflow: hidden;
	margin: 0;
	/* Padding set for 1010x202 banners. */
	padding-top: 20%;
	position: relative;
	background-color: #55493f;
	/* Position set for 1010x202 banners. */
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid #4d260a;
	border-radius: 4px;
}
h1 a:link, h1 a:visited {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	white-space: nowrap;
	text-indent: 100%;
	background: url(../images/main/hb_logo.png) 1rem 50% no-repeat;
	background-size: 12.7%;
	opacity: .85;
}
h1 a:hover, h1 a:focus {
	opacity: 1;
}
/* Page content. */
#content {
	overflow: hidden;
	padding: 0 6px 1em;
	background: rgba(230,192,158,0.403);
	border: solid #000;
	border-width: 0 1px 1px;
	border-radius: 0 0 1px 1px;
}
.content_inner {
	margin: .125rem 0 0;
	padding: .25rem;
	border: 1px solid rgba(0,0,0,.266);
	background: rgba(255,255,255,.15);
}
/* Standard paragraphs. */
.content_inner p {
	margin: .5em .75em;
}
.content_inner strong {
	opacity: .85;
}
.content_inner > ol {
	margin: .5rem 2%;
	padding-left: 1.25rem;
}
.content_inner > ol > li {
	padding: 2px 0;
}
/* horizontal rules. */
hr {
	width: 96%;
	margin: .25em auto;
	height: 2px;
	background: #0003;
	border-style: solid;
	border-width: 1px 0;
	border-color: #0005 #0000 #fff6;
}
/* ------------------- */
/* Secondary headings. */
/* ------------------- */
h2 {
	margin: .5rem 0 0;
	padding: 2px 8px 0;
	background: #5c2e0c url(../images/main/main_bars.jpg);
	background-position: 0 100%;
	color: #eeca81;
	font-family: constantia, serif;
	font-size: 1.25rem;
	line-height: 2.5rem;
	font-weight: 400;
	text-align: center;
	text-shadow: 0 0 1px #000;
	border: 1px solid #000;
	border-radius: 4px 4px 0 0;
}
/* @WIP: Mainly for archives - check these. */
#content > .secondary_menu {
	margin: .5rem 0 0;
	padding: 8px;
	background: #5c2e0c url(../images/main/main_bars.jpg);
	background-position: 0 100%;
	border: 1px solid #000;
	border-radius: 4px 4px 0 0;
}
#content > .secondary_menu + h2, #content > h2 + .secondary_menu {
	margin-top: -1px;
	padding-top: 0;
	background-position: 100% 100% !important;
	border-top: 0;
	border-radius: 0;
}
#content > .secondary_menu:first-child {
	padding-bottom: 0;
}
/* --------------------------- */
/* @WIP: Lower order headings. */
/* --------------------------- */
h3 {
	margin: .5em 0 0;
	padding: 0 8px;
	background: #604b3c;
	font-weight: 400;
	color: #ded188;
	font-size: 1.125rem;
	line-height: 2.25rem;
	font-family: constantia, serif;
	text-shadow: 0 0 1px #000;
	border: 1px solid #6f5f49;
	border-radius: 4px 4px 0 0;
}
h4 {
	margin: .5rem 0 0;
	padding: 0 .5rem;
	overflow: hidden;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5625rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* -------------------------------- */
/* @WIP: Home page - site sections. */
/* NB: Also bottom of credits page. */
/* -------------------------------- */
#update, #contributors {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	list-style: none;
	margin: 2px 0 0;
	padding: 4px 2% 4px 8%;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(0,0,0,.266);
}
#update>li, #contributors>li {
	width: 26%;
	flex: 0 0 auto;
	padding: 0 1rem;
	box-sizing: border-box;
}
#contributors>li {
	width: 40%;
}
/* Force footer to base of viewport. */
#after_wrapper {
	flex: 1 1 auto;
}
/* ---------------------- */
/* Full-width footer bar. */
/* ---------------------- */
#footer {
	position: relative;
	flex: 0 0 auto;
	margin: 2rem 0 0;
	padding: 2.5rem 1rem 1.75rem;
	background: #3f1d07 url(../images/main/main_bars.jpg);
	color: #e9c2a3;
	font-size: .875rem;
	text-align: center;
	text-shadow: 0 0 2px #000;
	border-top: 1px solid #000;
}
#footer span {
	white-space: nowrap;
}
#footer a:link, #footer a:visited {
	display: inline-block;
	color: #d3c993;
	text-shadow: 0 0 2px #000;
}
#footer a:hover, #footer a:focus {
	color: #e9dea3;
	text-decoration: underline;
}
/* ----------------------------- */
/* @WIP: Railroad history pages. */
/* ----------------------------- */
/* Extra boofy br tags. */
.big_break {
	line-height: 1.875rem;
}
#rrhist_index h2+p, #rrhist_index .big_break, #rrhist_index p:last-child {
	margin: 2px 0 0;
	padding: .5rem;
	border: 1px solid rgba(0,0,0,.266);
	background: rgba(255,255,255,.15);
}
#rrhist_index #wrapper a:link, #rrhist_index #wrapper a:visited {
	text-decoration: underline;
	text-decoration-color: rgba(0,0,0,.266);
}
#rrhist_index #wrapper a:hover, #rrhist_index #wrapper a:focus {
	text-decoration-style: double;
	text-decoration-color: rgba(0,0,0,.6);
}
#rrhist_motir .content_inner::before {
	margin: -5px;
}
/* -------------- */
/* Media queries. */
/* -------------- */
@media screen and (max-width: 64em) {
	/* Top/bottom links. */
	.custom_anchor {
		width: 3rem;
		background: #634938;
		opacity: .6;
	}
	#custom_top {
		bottom: 0;
	}
	#custom_bottom {
		top: auto;
		bottom: 0;
		right: 0;
		left: auto;
		border-radius: 8px 0 0 0;
	}
	.custom_anchor::before {
		width: auto;
		font-size: 1.5em;
		line-height: 2.75rem;
		text-shadow: none;
	}
}
/* 768px at standard browser settings. */
@media screen and (max-width: 48em) {
	body {
		line-height: 1.5em;
	}
	#wrapper {
		width: auto;
		max-width: 100%;
	}
	#wrapper, #header, #content {
		border-radius: 0;
		border-right: 0;
		border-left: 0;
	}
	#footer {
		padding: 2.5rem 0 3rem;
	}
	#content > .secondary_menu + h2, #content > h2 + .secondary_menu {
		background-position: 0 100% !important;
	}
	.big_break {
		line-height: 1.75rem;
	}
}
/* 576px at standard browser settings. */
@media screen and (max-width: 36em) {
	body {
		line-height: 1.375em;
	}
	.burger_check {
		display: block;
		position: absolute;
		left: -50vw;
	}
	.hamburger {
		display: block;
		width: 36px;
		height: 8px;
		margin: 8px;
		padding: 4px 0;
		overflow: hidden;
		white-space: nowrap;
		border: solid #63310d;
		border-width: 7px 0;
		border-radius: 3px;
		cursor: pointer;
	}
	.hamburger::before {
		display: block;
		content: '';
		border-top: 8px solid #63310d;
	}
	.hamburger:hover, .hamburger:focus,
	.hamburger:hover::before, .hamburger:focus::before {
		border-color: #371700;
	}
	#site_menu {
		display: none;
	}
	#site_menu>li {
		width: 49%;
		padding: 5px .5%;
	}
	#site_menu>li>a {
		background: #c4a058;
		background: linear-gradient(#c4a058, #ebc06a, #ebc06a, #c4a058);
	}
	.sub>a::after {
		position: absolute;
		top: .3125rem;
		right: .75rem;
	}
	.burger_check:checked + #menu_bar>#site_menu {
		display: block;
	}
	.sub:hover ul {
		left: 33%;
	}
	.sub:nth-child(2n):hover ul {
		width: calc(66% + .5em);
	}
	.big_break {
		line-height: 1.625rem;
	}
}
/* 480px at standard browser settings. */
@media screen and (max-width: 32em) {
	#site_menu>li {
		display: block;
		width: auto;
		padding: 5px 0;
	}
	.sub:hover ul {
		width: calc(66% + .5em);
	}
	h1 {
		padding-top: 28%;
	}
	h1 a {
		background-size: 20%;
		background-position: .5rem 50%;
	}
}
/* End of file. :) */