/* Text highlight colours */
::selection /* WebKit/Blink Browsers */ {
	background: rgba(0, 5, 153, .8);
	color: white;
}
::-moz-selection /* Gecko Browsers */ {
	background: rgba(0, 5, 153, .8);
	color: white;
}
html {
	scroll-behavior: smooth;
}
/* Email Links */
a[href^="mailto"]::before {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	content: '\f0e0\00A0';
	line-height: 0;
}
/* Phone Links */
a[href^="tel"]::before {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	content: '\f095\00A0';
	line-height: 0;
}
/* External Links */
a[href^="http"]::after {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f35d';
	line-height: 0;
}
.bus a[href^="http"]::before {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	content: '\f35d\00A0';
	line-height: 0;
}
a[href^="http"].img::after,
.bus a[href^="http"]::after {
	content: none;
}
/* PDF Links */
a[href$=".pdf"]::after {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f1c1';
	line-height: 0;
	color: #b30b00;
	transition: 0.2s all ease-in-out;
}
a[href$=".pdf"].img::after {
	content: none;
}
/* Word Links */
a[href$=".doc"]::after,
a[href$=".docx"]::after {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f1c2';
	line-height: 0;
	color: #124078;
	transition: 0.2s all ease-in-out;
}
/* Excel Links */
a[href$=".xls"]::after,
a[href$=".xlsx"]::after {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f1c3';
	line-height: 0;
	color: #0e5c2f;
	transition: 0.2s all ease-in-out;
}
/* PowerPoint Links */
a[href$=".ppt"]::after,
a[href$=".pptx"]::after {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f1c4';
	line-height: 0;
	color: #a92b1a;
	transition: 0.2s all ease-in-out;
}
/* Twitter Links */
a[href*="twitter"]::after {
	font-family: 'fa brands';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f099';
	line-height: 0;
	color: #1DA1F2;
	transition: 0.2s all ease-in-out;
}
/* Facebook Links */
a[href*="facebook"]::after {
	font-family: 'fa brands';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f09a';
	line-height: 0;
	color: #1877f2;
	transition: 0.2s all ease-in-out;
}
.bus a[href*="facebook"]::before {
	font-family: 'fa brands';
	font-style: normal;
	font-weight: normal;
	content: '\f09a\00A0';
	line-height: 0;
	color: #1877f2;
	transition: 0.2s all ease-in-out;
}
/* Google Maps Links */
a[href*="goo.gl"]::after,
a[href*="g.page"]::after {
	font-family: 'fa brands';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f1a0';
	line-height: 0;
	color: #ea4335;
	transition: 0.2s all ease-in-out;
}
.bus a[href*="goo.gl"]::after,
.bus a[href*="g.page"]::after,
.bus a.img[href*="goo.gl"]::before,
.bus a.img[href*="g.page"]::before {
	content: none;
}
.bus a[href*="goo.gl"]::before,
.bus a[href*="g.page"]::before {
	font-family: 'fa brands';
	font-style: normal;
	font-weight: normal;
	content: '\f1a0\00A0';
	line-height: 0;
	color: #ea4335;
	transition: 0.2s all ease-in-out;
} 
/* Youtube Links */
a[href*="youtu"]::after {
	font-family: 'fa brands';
	font-style: normal;
	font-weight: normal;
	content: '\00A0\f167';
	line-height: 0;
	color: #ff0000;
	transition: 0.2s all ease-in-out;
}
/* Span Links */
span.gls a {
	text-decoration: none;
}
body {
	font-family: 'Lato', sans-serif;
	margin: 0px;
	font-size: 18px;
	color: #000000;
	background-color: #e6f9ff;
}
main {
	margin: calc(1em + 42px) 1em calc(2em + 41px) 1em;
}
header {
	color: white;
	position: relative;
	background-size: cover;
	background-position: left bottom;
	height: 180px;
	width: 100%;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4)70%, rgba(0, 5, 153, 1)), url("../images/stone-boatyard.jpg");
	background-repeat: no-repeat;
	text-shadow: 0px 0px 30px black;
	font-family: 'Lora', serif;
	line-height: 44px;
	font-size: 40px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
header span {
	padding: 20px;
}
.nav {
	margin: 0.75em auto;
	text-align: center;
	line-height: 150%;
}
.contact {
	line-height: 150%;
}
#navigation:not(.sticky) {
	position: absolute;
	top: 180px;
}
.sticky {
	position: fixed;
	top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	display: block;
	font-family: 'Lora', serif;
	line-height: 110%;
	margin: 1em 0 0.2em 0;
	color: #000599;
	font-weight: bold;
	text-align: left;
}
h1 + h2,
h2 + h3,
h3 + h4 {
	margin-top: 0;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.3em;
}
table {
	margin: auto;
	border-collapse: collapse;
	max-width: 1000px;
	border: 2px solid #000599;
}
div.table {
	overflow-x: auto;
	margin: 1em auto;
}
div.table table {
	white-space: nowrap;
}
tr:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.2);
}
tr:nth-child(odd) {
	background-color: rgba(255, 255, 255, 0.2);
}
tr[data-label="records"] {
	color: blue;
}
tr[data-label="nodance"] {
	color: red;
}
th {
	background-color: #000599;
	color: white;
	font-family: 'Lora', serif;
	font-size: 1.3em;
	padding: 0.3em;
	text-align: left;
}
td {
	padding: 0.3em;
}
td.centre {
	text-align: center;
}
th, td {
	border: 1px solid #000599;
}

#xmas main li,
#summer main li {
	padding-bottom: 1em;
}
#xmas li p,
#summer li p {
	font-size: 1em;
	margin-bottom: 0.2em;
}
#xmas li p {
	color: rgb(161, 0, 0);
}
#xmas li details p,
#summer li details p {
	font-size: 1em;
	color: #000599;
}
abbr {
	text-decoration: none;
}
span.gls {
	border-bottom: dotted 2px;
	font-style: italic;
	color: #000599;
}
span.gls::before {
	content: '\2018';
}
span.gls::after {
	content: '\2019';
}
sup, sub {
	font-size: 0.7em;
	vertical-align: baseline;
	position: relative;
}
sup {
	top: -0.4em;
}
sub { 
	top: 0.4em; 
}
p {
	margin: 0.2em 0 1em;
}
q {
	font-style: italic;
}
blockquote {
	text-align: center;
	font-style: italic;
}
blockquote::before {
	content: '\201c';
	font-size: 2em;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
	top: 0.3em;
}
blockquote::after {
	content: '\201d';
	font-size: 2em;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
	top: 0.3em;
}
a,
a:link,
a:visited {
	color: #000599;
	text-decoration: underline;
	transition: 0.2s all ease-in-out;
}
/* Format Current Page For Local Navigations */
#s2026 p.centre #n2026,
#s2025 p.centre #n2025,
#s2024 p.centre #n2024,
#s2023 p.centre #n2023,
#s2022 p.centre #n2022,
#s2021 p.centre #n2021,
#s2020 p.centre #n2020,
#s2019 p.centre #n2019,
#s2018 p.centre #n2018,
#s2017 p.centre #n2017,
#s2016 p.centre #n2016,
#s2015 p.centre #n2015,
#s2014 p.centre #n2014 {
	color: black;
	font-weight: bold;
	text-decoration: none;
}
/* Info Links */
.info,
a.info {
	font-family: 'fa solid';
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	line-height: 0;
}
.anchor {
	display: block;
	position: relative;
	top: -2.5em;
	visibility: hidden;
}
.perma {
	font-family: 'fa solid';
}
/* Card style on selected item */
 main.card span:target + section,
 section.select {
	padding: 1em;
	background-color: white;
	margin: 1em 0;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
	border-radius: 0.75em;
}
main.card span:target + section h2,
main.card span:target + section h3,
section.select h2,
section.select h3,
details + h2,
details + h3 {
	margin-top: 0;
}
main.card span:target + section p:last-of-type,
section.select p:last-of-type {
	margin-bottom: 0;
}
/* Card style on poems */
.poem {
	width: fit-content;
	padding: 1em;
	background-color: white;
	margin: 1em auto;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
	border-radius: 0.75em;
	text-align: center;
}
.poem h2{
	margin-top: 0;
	text-align: center;
}
.poem p:last-of-type {
	margin-bottom: 0;
}
/* Set margin top of bullet lists to match paragraphs and customise bullet */
main ul {
	margin-top: 0.2em;
	list-style-type: none;
}
main ul li::before {
	content: '\2022';
	color: #000599;
	position: absolute;
	margin-left: -1em;
}
/* Set spacing between bullets */
main ul li,
main ul li p,
main ul li ul li,
main ol li,
main ol li p {
	margin: 0.4em 0;
}
main ol li ol li {
	margin: 0;
}
/* Style numbered list markers as bold */
ol > li::marker {
	font-weight: bold;
	color: #000599;
  }
/* Style nested numbered lists e.g. Constitution */
ol.nest {
	counter-reset: item;
	padding-left: 0;
}
ol.nest ol.nest {
	padding-left: 35px;
}
ol.nest li {
	display: block;
	color: #000599;
	font-weight: bold;
	font-family: 'Lora', serif;
	font-size: 1.3em;
}
ol.nest ol.nest li {
	color: #000000;
	font-weight: normal;
	font-family: 'Lato', san-serif;
	font-size: 0.76923em;
}
ol.nest ol.nest ol.nest li {
	font-size: 1em;
}
ol.nest li:before {
	content: counters(item, ".") ". ";
	counter-increment: item;
	font-weight: bold;
}
/* Set 2nd Level Bullets to >> */
main ul ul {
	margin-top: 0;
	list-style-type: none;
}
main ul ul li::before {
	font-weight: bold;
	content: '\00BB';
	position: absolute;
	margin-left: -1em;
}
/* Style non bulleted lists */
main ul.noBullet li:before {
	content: '\00A0';
	position: absolute;
	margin-left: -1em;
}
summary {
	cursor: pointer;
	margin: 1em 0;
}
details[open] {
	margin: 1em 0;
}
#navigation {
	background-color: #000599;
	width: 100%;
	z-index: 3;
	box-shadow: 0 3px 5px -5px rgba(0, 0, 0, .5);
}
#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background-color: #000599;
}
#navigation ul a {
	display: block;
	padding: 10px;
	text-decoration: none;
	color: white;
	transition: 0.2s all ease-in-out;
	text-align: center;
	font-weight: normal;
}
#navigation .logo {
	float: left;
	display: block;
	padding: 10px 12px;
	width: 18px;
}
#navigation .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
}
#navigation .menu-icon {
	padding: 20px 12px;
	position: relative;
	float: right;
	cursor: pointer;
}
#navigation .menu-icon .nav-icon {
	background: #fff;
	display: block;
	height: 2px;
	width: 18px;
	position: relative;
	transition: background 0.2s ease-out;
}
#navigation .menu-icon .nav-icon::before {
	background: #fff;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	transition: all 0.2s ease-out;
	top: 5px; /* Offset to position above middle bar */
}
#navigation .menu-icon .nav-icon::after {
	background: #fff;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	transition: all 0.2s ease-out;
	top: -5px; /* Offset to position below middle bar */
}
#navigation .menu-btn {
	display: none;
}
#navigation .menu-btn:checked~.menu {
	max-height: 300px;
}
#navigation .menu-btn:checked~.menu-icon .nav-icon {
	background: transparent;
}
#navigation .menu-btn:checked~.menu-icon .nav-icon::before {
	transform: rotate(45deg);
	top: 0;
}
#navigation .menu-btn:checked~.menu-icon .nav-icon::after {
	transform: rotate(-45deg);
	top: 0;
}
#topBtn {
	display: none;
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: #000599;
	color: white;
	cursor: pointer;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
}
img, video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
}
iframe {
	max-width: 100%;
	display: block;
	margin: 0 auto;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);

}
.zoom {
	cursor: zoom-in;
}
div.map_wrap {
    position: relative;
    width: 1000px;
	height: 600px;
	margin: 0 auto;	
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
}
.map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media only screen and (max-width: 1106px) {
	div.map_wrap {
		width: 100%;
		height: 0;
		padding-bottom: 60%; /* Set aspect ratio here */	
	}
}
img[src$=".png"],
img[src$=".svg"],
img[src$=".gif"] {
	box-shadow: none;
}
figure {
	padding: 0 1em;
	width: fit-content;
	margin: 1em auto;
}
figcaption {
	text-align: center;
	font-size: 16px;
	font-style: italic;
	display: block;
	margin-top: 0.5em;
}
.gallery {
	text-align: center;
	margin: 1em auto -1em;
}
/* Format Gallery Cards e.g. Nature */
figure.card {
	background-color: white;
	padding: 1em;
	border-radius: 0.75em;
	width: max-content;
	margin: 0 1em 2em;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
	display: inline-block;
}
figure.card img {
	border-radius: 0.25em;
	box-shadow: none;
}
/* Format Info Cards e.g. Medical Services */
.hwrap h3 {
	line-height: 102%;
}
div.card h3 {
	margin: 0 0 0.5em 0;
}
div.card p {
	margin: 1em 0 0.3em;
	font-weight: bold;
}
div.card a {
	text-decoration: none;
}
p.ns {
	margin: 0.5em 0;
}
/* Fix for non-breaking space in titles (Lora doesn't have &#X2011) */
.nowrap {
	white-space: nowrap;
}
div.card p.ns{
	margin: 0;
	font-weight: normal;
}
div.card p:last-of-type {
	margin: 1em 0 0;
}
div.card {
	background-color: white;
	text-align: left;
	padding: 1em;
	border-radius: 0.75em;
	width: 220px;
	margin: 0 0.8em 1.6em;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
	display: inline-block;
}
tr.break,
tr.breakfix,
.print {
	display: none;
}
nav a svg path {
	fill: white;
}
#about nav ul li #aboutn,
#news nav ul li #newsn,
#photos nav ul li #photosn,
#programme nav ul li #programmen,
#links nav ul li #linksn,
#contact nav ul li #contactn {
	text-decoration: underline;
}
/* Devices between 640px and 800px wide */
@media only screen and (min-width: 640px) {
	header {
		line-height: 54px;
		font-size: 50px;
	}
	main {
		margin: calc(1.25em + 42px) 1.25em calc(2.5em + 41px) 1.25em;
	}
	#topBtn {
		bottom: 1.25em;
		right: 1.25em;
	}
	#navigation li {
		float: left;
	}
	#navigation li a {
		padding: 10px;
	}
	#navigation .menu {
		clear: none;
		float: right;
		max-height: none;
	}
	#navigation .menu-icon {
		display: none;
	}
	/* Devices wider than 800px */
	@media only screen and (min-width: 800px) {
		header {
			line-height: 64px;
			font-size: 60px;
		}
		main {
			margin: calc(1.5em + 42px) 1.5em calc(3em + 41px) 1.5em;
		}
		#topBtn {
			bottom: 1.5em;
			right: 1.5em;
		}
		table {
			width: calc(800px - 4em);
		}
	}
}
/* Hide text on non hover devices */
span.hover {
	display:none;
}
/* Devices that can hover or select using a keyboard */
@media (hover: hover) and (pointer: fine) {
	span.hover {
		display: inline;
	}
	a[href$=".pdf"]:hover::after,
	a[href$=".pdf"]:focus::after {
		color: #f20f00;
	}
	a[href$=".doc"]:hover::after,
	a[href$=".doc"]:focus::after,
	a[href$=".docx"]:hover::after,
	a[href$=".docx"]:focus::after {
		color: #2b579a;
	}
	a[href$=".xls"]:hover::after,
	a[href$=".xls"]:focus::after,
	a[href$=".xlsx"]:hover::after,
	a[href$=".xlsx"]:focus::after {
		color: #217346;
	}
	a[href$=".ppt"]:hover::after,
	a[href$=".ppt"]:focus::after,
	a[href$=".pptx"]:hover::after,
	a[href$=".pptx"]:focus::after {
		color: #b7472a;
	}
	a:hover,
	a:focus {
		color: #0008e6;
	}
	.perma:hover,
	.perma:focus {
		cursor: copy;
		color: #0008e6;
	}
	/* Twitter Links */
	a[href*="twitter"]:hover::after {
		color: #87ccf8;
	}
	/* Facebook Links */
	a[href*="facebook"]:hover::after,
	.bus a[href*="facebook"]:hover::before {
		color: #6ea9f7;
	}
	/* Google Maps Links */
	a[href*="goo.gl"]:hover::after,
	a[href*="g.page"]:hover::after,
	.bus a[href*="goo.gl"]:hover::before,
	.bus a[href*="g.page"]:hover::before  {
		color: #f07f75;
	}
	/* Youtube Links */
	a[href*="youtu"]:hover::after {
		color: #ff6666;
	}
	#navigation ul a:hover,
	#navigation ul a:focus {
		color: #000000;
		background-color: #e6f9ff;
	}
	#navigation .menu-icon:hover .nav-icon,
	#navigation .menu-icon:focus .nav-icon,
	#navigation .menu-icon:hover .nav-icon::before,
	#navigation .menu-icon:focus .nav-icon::before,
	#navigation .menu-icon:hover .nav-icon::after,
	#navigation .menu-icon:focus .nav-icon::after {
		background: #000000;
	}
	#navigation .menu-icon:hover,
	#navigation .menu-icon:focus {
		background-color: #e6f9ff;
	}
	#topBtn:hover,
	#topBtn:focus {
		background-color: #0008e6;
	}
	nav a:hover svg path,
	nav a:focus svg path {
		fill: #000000;
	}
	nav a:hover,
	nav a:focus {
		background-color: #e6f9ff;
	}
}