body {
	background: #EEE;
	margin: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	background: #FFF;
	padding: 32px 16px;
	min-height: 100vh;
	box-sizing: border-box;
	color: #333;

	h1, h2, h3, h4, h5 {
		color: #222;
	}
	a {
		color: #333;
		text-decoration: none;
	}

	a[href$='.pdf'], a[href$='.xlsx'], a[href$='.xls'] {
		background-image:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 27.713 27.713' style='enable-background:new 0 0 27.713 27.713;' xml:space='preserve'><g id='c180_disquette'><path d='M25.508,0.633H2.206C0.986,0.633,0,1.617,0,2.836v22.042c0,1.215,0.986,2.202,2.206,2.202h22.068l3.439-3.399V2.836    C27.714,1.617,26.727,0.633,25.508,0.633z M23.781,25.998H4.021v-10.11H23.77L23.781,25.998z M23.924,14.681H3.793V3.062h20.131    V14.681z'/><path d='M14.013,13.236h8.314V4.355h-8.314H13.7H5.39v8.881h8.31H14.013z M13.214,12.41H6.187V5.178h7.027V12.41z'/></g></svg>");
		background-repeat: no-repeat;
		background-position-x: 100%;
		padding-right: 24px;
	}
	/* External Link
	a[href^='http'] {
		background-image:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 27.713 27.713' style='enable-background:new 0 0 27.713 27.713;' xml:space='preserve'><g id='c180_disquette'><path d='M25.508,0.633H2.206C0.986,0.633,0,1.617,0,2.836v22.042c0,1.215,0.986,2.202,2.206,2.202h22.068l3.439-3.399V2.836    C27.714,1.617,26.727,0.633,25.508,0.633z M23.781,25.998H4.021v-10.11H23.77L23.781,25.998z M23.924,14.681H3.793V3.062h20.131    V14.681z'/><path d='M14.013,13.236h8.314V4.355h-8.314H13.7H5.39v8.881h8.31H14.013z M13.214,12.41H6.187V5.178h7.027V12.41z'/></g></svg>");
		background-repeat: no-repeat;
		background-position-x: 100%;
		padding-right: 32px;
	} */

	h1 {
		padding-bottom: 0;
		margin-bottom: 0;
		margin: 0;
		text-transform: uppercase;
	}
	h2 {
		margin-top: 0;
		font-size: 18px;
		font-weight: normal;
	}
	.contents h2 {
		margin-top: 16px;
		font-size: 1.5em;
		font-weight: bold;
		text-transform: uppercase;
	}
	h4 {
		font-size: 16px;
	}
	h5 {
		font-weight: bold;
		font-size: 15px;
		margin: 0;
	}
	h5 + p { margin-top: 12px; }
	h6 {
		font-weight: bold;
		font-size: 14px;
	}
}

.date {
	font-weight: bold;
	font-size: 14px;
}

.main {
	display: flex;
}
.left-pane, .right-pane {
	box-sizing: border-box;
}

.left-pane {
	width: 25%;
	min-width: 285px;
	padding: 12px;
	line-height: 24px;
	padding-right: 24px;
	text-align: justify;

	h4 {
		margin-bottom: 16px;
	}

	ul {
		margin: 0;
		padding: 0;

		li {
			border-top: 1px solid #eee;
			padding: 12px 0;
			list-style: none;
		}
	}

	/*& > ul > li.present {
		margin-bottom: 128px;
	}*/

	& > ul {
		/*> li.present {
			padding-bottom: 64px;
		}
		> li.present:not(first-child) {
			padding-top: 64px;
		}*/
		a.present, li.present > a {
			font-weight: bold;
			text-align: left;
		}
		& > li {
			border-top: 1px solid #eee;
			padding: 12px 0;
			list-style: none;

			&:has(ul) > a::after {
				display: inline;
				margin-left: 12px;
				text-align: right;
				content: "▸";
			}

			&.active:has(ul) > a::after, &.present:has(ul) > a::after {
				content: "▾";
			}

			&.inactive a, li.inactive > a {
				color: #ccc !important;
			}

			ul {
				margin-top: 8px;
				margin-left: 16px;
				display: none;

				li {
					&.active > a {
						font-weight: bold;
					}
				}
			}
			&.active ul, &.present ul {
				display: block;
			}
		}
	}

}
.right-pane {
	flex-grow: 1;
	padding: 4px 8px;
	text-align: justify;
	a {
		font-weight: 600;
	}
	pre {
		margin-left: 24px;
		white-space: pre-wrap;
		max-width: 100%;
	}

	table {
		width: 100%;
		border-collapse: collapse;
		td, th {
			padding: 8px;
			border: 1px solid #BBB;
		}
	}
}

h3 {
	text-transform: uppercase;
}

.post, .page, .index {
	border-bottom: 1px solid #BBB;
	margin-bottom: 32px;
	p {
		img {
			max-height: 512px;
			width: auto;
			margin: 0 auto;
			display: block;
		}
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
		line-height: 1.5rem;
		
		img + p, img + a, .img-link + a, .img-link + p {
			display: block;
			margin: 0 auto;
			width: 70%;
			min-width: 400px;
			text-align: center;
		}
	}
	
	li {
		padding: 6px 0;
		line-height: 1.5rem;
	}
	
	pre code {
		font-family: none;
	}
	pre {
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
		line-height: 1.5rem;
		margin-left: 0;
		padding: 24px;
		padding-top: 32px;
		background: #ddd;
		border-left: 4px solid #007;
		position: relative;
	}
	pre::before {
		content: '“';
    position: absolute;
    top: 12px;
    color: #007;
    font-size: 45px;
    font-family: 'Source Sans Pro',Roboto,"San Francisco","Segoe UI",font-family;
	}

	img, iframe {
		max-width: 100%;
		max-height: 1024px;
		margin: 0 auto;
		display: block;
	}
}

@media screen and (max-width: 767px) {
	h1, h2 {
		text-align: center;
	}
	.main {
		flex-direction: column;
	}
	.left-pane {
		width: 100%;
		padding: 0;
	}
	.post:last-child {
		margin: 16px 0;
	}
	.right-pane {
		width: 100%;
		padding: 0;
	}

	.menu li:last-child {
		display: none;
	}
}

.title {
	display: block;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 12px;
}

.menu {
	display: flex;
	border-top: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
	padding: 24px 0;
	justify-content: space-around;

	li {
		list-style: none;
		a {
			list-style: none;
			color: #000;
			font-weight: 600;
			padding: 12px;
			flex-basis: auto;
			min-width: 128px;
			text-align: center;
		}
	}

}

ul.tags {
	margin: 12px 0;
	padding: 0;
}
ul.tags li {
	list-style: none;
	display: inline-block;
	padding: 6px;
	border: 1px solid #aaa;
	border-radius: 6px;
}
ul.tags li a {
	font-weight: normal;
}

#search-form {
	margin: 0;
}

#search-form input {
	padding: 8px;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
	border-radius: 2px;
	border: 1px solid #aaa;
	font-size: 16px;
}

.search-results {
	padding: 0;
	list-style: none;
}
.search-results li {
	padding: 12px 0;
	border-bottom: 1px #aaa solid;
}
.search-results .description {
	font-weight: normal;
}

/* specific pages */

.seabird-nesting-colonies-in-the-southeast-avalon {
	th {
		display: none;
	}
	h3 {
		margin-top: 64px;
	}
}
.checklist-for-the-southeast-avalon {
	h3:not(.title) {
		border-top: 1px solid #aaa;
		padding-top: 24px;
	}
}

.a-history-of-trepassey {
	.page {
		pre code {
			font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
		}
		h3:not(:first-child) {
			border-top: 1px solid #aaa;
			padding-top: 24px;
		}
		h4 {
			margin-top: 2px;
			position: absolute;
		}
		pre {
			margin-top: 0rem;
			margin-bottom: 0rem;
			line-height: 1.5rem;
			margin-left: 3.0rem;
			padding: 0;
			background: none;
			border-left: none;
			position: relative;
		}
		pre::before {
			content: '';
			position: absolute;
			top: 0;
		}
	}
}