:root {
	--colour-one: #FD5600;
	--colour-two: #052F5F;
	--colour-three: #eaeaea;
	--sans-font: "Source Sans Pro";
	box-sizing:border-box;
}

.clear {
	clear:both;
}

html {
	height:100%;
	box-sizing:border-box;
	height: 100%;
	overflow-x: hidden;
}

body {
	margin:0;
	padding:0;
	height:100%;
	box-sizing:border-box;
	text-align: center;
	background-color: #eaeaea;
	height: 100%;
}

div#sheet {
	max-width:700px;
	margin: 0 auto;
	text-align: left;
	border-top: none;
	border-bottom: none;
	font-family: "Source Sans Pro","verdana",sans-serif;
	position: relative;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

	header#header {
		overflow:hidden;
		text-align: center;
		width: 100%;
	}

		div#header-block {
			background-color:#052F5F;
			display: flex;
			align-items: baseline;
			justify-content: center;
			border-bottom: 5px solid #FD5600;
		}

			a#header-menu-button {
				display: none;
			}

			a#title-link {
				display: block;
				font-family:"Playfair Display","Georgia",serif;
				font-size:100px;
				text-decoration:none;
				color:white;
				transition-property:color;
				transition-duration:1s;
				transition-timing-function:ease-out;
			}

			a#title-link:hover {
				color:#FD5600;
			}


	@media screen and (max-width: 700px) {

		header#header {
			z-index: 100;
			text-align: left;
			position: absolute;
			top: 0;
			left: 0;
		}

		html.slideout-open header#header {
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
		}

		div#main-stuff {
			background-color: black;
		}

			div#content, footer#metainfo, footer#footer {
				transition:opacity 1s ease-out;
			}

			html.slideout-open div#content, html.slideout-open footer#metainfo, html.slideout-open footer#footer {
				opacity:0.5;
			}

		div#main-stuff {
			margin-top: 56px;
		}

			div#header-block {
				height: 53px;
				justify-content: flex-start;
				border-bottom: 3px solid #FD5600;
			}

				a#header-menu-button {
					display: block;
					height: 20px;
					width: 24px;
					background-image: url("/static/images/menu-close-white-48.png");
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: 0 0px;
					margin-left: 16px;
				}

				html.slideout-open a#header-menu-button {
					background-position: 0 -24px;
				}

				a#title-link {
					font-size:20px;
					line-height: 53px;
					margin-left: 32px;
				}
	}

	div#main-stuff {
		transition:opacity 1s ease-out;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: column;
		z-index: 50;
	}

	div#main-stuff.dulled {
		opacity:0.1;
	}

		div#cookie-banner {
			padding: 0.5em 0.5em 0 0.5em;
			background-color: white;
			display: none;
		}

			div#cookie-banner-inner {
				padding: 0.5em;
				border: 2px dotted #052F5F;
				display: flex;
				align-items: center;
			}

				div#cookie-banner-text {
					flex-grow: 1;
					line-height: 2;
					margin-left: 0.5em;
					font-family: "Source Sans Pro","verdana",sans-serif;
				}

				div#cookie-banner-close-holder {

				}

					button#cookie-banner-close {
						background: white;
						color: black;
						border: 1px solid #052F5F;
						line-height: 2;
						padding: 0 0.5em;
						cursor: pointer;
						font-family: "Source Sans Pro","verdana",sans-serif;
					}

					button#cookie-banner-close:hover {
						background-color: #052F5F;
						color: white;
					}

		div#strip {
			background-color: white;
			border-bottom: 1px dotted #FD5600;
		}

		@media screen and (max-width: 700px) {
			div#strip {
				display: none;
			}
		}

			ul#breadcrumbs {
				margin: 0;
				padding:0.7em 1em;
				display:flex;
				align-items:center;
				list-style-type: none;
			}

				ul#breadcrumbs li {
					margin-right:1.5em;
					position:relative;
					flex-shrink:0;
				}

				ul#breadcrumbs li:last-child {
					flex-shrink:1;
				}

					ul#breadcrumbs li a {
						color:#FD5600;
						color: black;
						text-decoration:none;
						padding-bottom:0.05em;
						font-family: "Source Sans Pro","verdana",sans-serif;
					}

					ul#breadcrumbs li a:hover {
						text-decoration:underline;
					}

					ul#breadcrumbs li.on a {
					}

						ul#breadcrumbs li a::after {
							content:"/";
							position:absolute;
							top:0;
							right:-1em;
						}

						ul#breadcrumbs li:last-child a::after {
							content:none;
						}

	div#content {
		padding: 0 1em 1em 1em;
		flex: 1;
		background-color: white;
	}

		div#content * {
			clear:both;
		}

		div#content h1, div#content h2, div#content h3, div#content h4 {
			font-family:"Playfair Display","Georgia",serif;
			float:left;
			border-bottom:1px solid #FD5600;
		}

		div#content h1 {
			border-bottom-width:2px;
		}

		div#content a {
			color: #FD5600;
		}

		div#content a:hover {
			text-decoration: none;
		}

		div#content div.definition {
			border:1px solid #052F5F;
			padding:0.5em;
			margin:1em 0;
		}

		div#content figure {
			margin:1em 0.5em;
			text-align:center;
			background-color: #eaeaea;
			/* width:100%; */
		}

			div#content figure img, div#content p img {
				margin:0 auto;
				max-width:100%;
				background-color: white;
			}

			div#content figure figcaption {
				padding: 0.1em 0 0.3em 0;
				/* line-height: 2; */
				margin: 0;
			}

		div#content ul {
			padding:0 0 0 1.5em;
			list-style-type: square;
		}

			div#content ul ul {
				list-style-type: disc;
			}

		ul.folder-list {
			list-style:none !important;
			padding-left: 1em !important;
		}

			ul.folder-list li {
				margin:1em 0;
			}

				a.folder-link {
					padding: 0.4em;
					border: 1px solid #052F5F;
					display: inline-flex;
					flex-direction: row;
					align-items: center;
					text-decoration:none !important;
					color: #FD5600;
					background-color: white;
					font-family:"Playfair Display","Georgia",serif;
				}

				a.folder-link:hover {
					background-color: #052F5F;
					color:white !important;
				}

					span.folder-link-arrow {
						background-image: url("/static/images/arrow-inverted-and-white-96.png");
						background-color: #FD5600;
						background-size: 100%;
						background-position: 0 0;
						height: 1.5em;
						width: 1.5em;
						display: block;
						margin-right: 0.2em;
						flex: 0 0 auto;
					}

					a.folder-link:hover span.folder-link-arrow {
						background-position: 0 100%;
						background-color: #052F5F;
					}

					span.folder-link-text {
						line-height: 1.25em;
						font-size:1.2em;
						display: block;
						font-weight:bold;
						text-decoration:none !important;
					}

					a.folder-link:hover span.folder-link-tex {
						color:white !important;
					}

	footer#metainfo {
		background-color: white;
		border-top: 1px dotted #FD5600;
		padding: 1em;
		text-align: center;
	}

		footer#metainfo time {
			margin-left: 1em;
			font-style: italic;
		}

	footer#footer {
		background-color: #eaeaea;
		padding: 1em;
		display: flex;
		justify-content: center;
		font-size: 0.8em;
	}

		div.footer-block {
			flex: 1 1 0;
			display: flex;
			flex-direction: column;
			padding: 0 0.3em;
			border-right: 1px dotted black;
		}

		div.footer-block:last-child {
			border-right: none;
		}

			div.footer-item {
				padding: 0.3em 0;
				text-align: center;
			}

				div.footer-item a {
					color: #FD5600;
				}

				div.footer-item a:hover {
					text-decoration: none;
				}

nav#mobile-menu {
	padding-top: 56px;
	position: fixed;
	top: 0;
	left: 0;
	width: 253px;
	height: 100%;
	display: none;
	background-color: #eaeaea;
	text-align: left;
	border-right: 3px solid #FD5600;
	font-family: "Source Sans Pro","verdana",sans-serif;
}

	ul.mobile-menu-links, ul.mobile-menu-pages {
		display: flex;
		list-style-type: none;
		flex-direction: column;
		padding: 0;
		margin: 8px 8px 0 8px;
	}

		ul.mobile-menu-pages li {
			margin-bottom:8px;
		}

		ul.mobile-menu-links li {
			margin:0 0 8px 8px;
		}

			ul.mobile-menu-links li a {
				color: #FD5600;
			}

			ul.mobile-menu-links li a:hover {
				text-decoration: none;
			}

@media screen and (max-width: 700px) {
	nav#mobile-menu {
		display: block;
	}
}