/**********************  Reset CSS settings   */
html, body, div, span, iframe, h1, h2, h3, h4, p, pre, a, img, strike, strong, sub, sup, center, label, table, caption, embed, video {
	margin:0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
ul {list-style: disc;}

/**********************  Background    */
body {
	background-color: grey;
	line-height: 1.2;
}

/**********************  Top bar   */
#topbarContainer {
	background-color: grey;
	position: fixed;
	left: 0rem;
	right: 0rem;
	top: 0rem;
	height: 2.56rem;
	transition: top 0.5s; /*removed on small screens with JS script*/
	min-width: 12.5rem;
}
#topbar {
	background-image: url('topbar.jpg');
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0.08rem;
	height: 2.4rem;
	border-radius: 0.4rem;
}
.language { /*language buttons*/
	float: right;
	width: 2.75rem;
	height: 1.875rem;
	margin: 0.3125rem;
	border-style: solid;
	border-width: 0.0625rem;
}
#topbar p { /*top bar text settings*/
	line-height: 2.4rem; /*Vertically align text*/
	font-size: 1.5rem; /*reduced on small screens with @media screen*/
	font-weight: bold;
	margin-left: 0.4rem;
	white-space: nowrap; /*to truncate title on the right*/
	overflow: hidden;
}

/**********************  Main content area   */
#main {
	position: absolute;
	left: 9.125rem;
	top: 2.56rem;
	right: 0.08rem;
	text-align: center;
	background-color: #C8E7F7;
	border-radius: 0.4rem;
	min-width: 12.5rem;
}
#content {
	padding: 0.24rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 55rem; /*increased for large screens with @media screen*/
	width: auto;
	text-align: center;
}
@media screen and (max-width: 40rem) { /*reduce top bar font size on small screens*/
	#topbar p {font-size: 1rem;}
}
@media screen and (max-width: 30rem) { /*further reduce top bar font size on small screens*/
	#topbar p {font-size: 0.75rem;}
}
@media screen and (min-height: 52.56rem) { /*only use wide content if height is enough to accommodate 1.5 aspect ratio image with topbar*/
	#content {max-width: 75rem;}
}

/**********************  Navigation arrows for multipage documents   */
.leftarrow {
	float: left;
	text-align: left;
	margin: 0.313rem;
}
.rightarrow {
	float: right;
	text-align: right;
	margin: 0.313rem;
}

/**********************  Text settings   */
h1 {
	display: block;
	font-size: 2rem;
	margin: 0.67rem;
	font-weight: bold;
}
@media screen and (max-width: 30em) { /*reduce h1 font size on small screens*/
	h1 {font-size: 1.5em;}
}
h2 { /*subtitles*/
	margin: 0.313rem;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}
h3 { /*used on front page*/
    margin: 0.313rem;
	font-size: 1.17rem;
	font-weight: bold;
}
h4 { /*used in recipes*/
    margin: 0.313rem;
	font-weight: bold;
}
p {
    margin: 0rem 0.313rem 1.875rem 0.313rem; /* leave gap at the bottom and a bit of space at the sides*/
}
.left { /*paragraph not following images - and in recipes*/
	text-align: left;
	margin: 0.313rem;
}
.nobullet { /*list of recent changes on the front page*/
	list-style-type: none;
}
.list-left { /*used in recipes*/
	list-style-type: disc;
	padding-left: 2.5rem;
	text-align: left;
}
.numbered-list-left { /*used in recipes*/
	list-style-type: decimal;
	padding-left: 2.5rem;
	text-align: left;
}
.nobullet-left { /*used in useful links*/
	list-style-type: none;
	text-align: left;
}
.h3-left { /*used in useful links*/
	text-align: left;
}
.map-legend { /*used in the map legend on the front page*/
	margin: 0rem;
	text-align: left;
}
/**********************  Image settings   */
.homeImg { /*family image on the front page*/
	border-radius: 1.25rem;
	width: 70%;
}
.contentImage { /*images that open full screen and html5 video*/
    width: 100%;
	height: 100%;
	background-size: contain;
	background: center/contain no-repeat; /*center is needed for the shorthand to work, but also for centering narrow images*/
	display: block;
	margin: 0 auto; /*centres images vertically; should not have vertical-align:baseline in general CSS properties as this will align images to the bottom in tables*/
}
.imageFull { /*images that cannot be opened full screen*/
	width: 100%;
}
.narrowImage {
	width: 45%;
}
.mediumImage {
	width: 70%;
}
.secondWrap{
	cursor: zoom-in;
	line-height: 0px; /*children of inline elements (i.e., videos in our case) require this to align to the bottom.*/
}
.pseudoFullscreen { /*pseudo-fullscreen*/
    position: fixed!important;
    width: 100%!important;
    height: 100%!important;
    top: 0!important;
    left: 0!important;
    z-index: 99999!important;
}
.imageright { /*used in recipes*/
	width: 45%;
	float: right;
	margin: 0.313rem;
}

.wrapslider {
	position: absolute!important;
	width: 100%!important;
	height: 100%!important;
}

/**********************  Settings for images in tables*/
.centertable {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%; /*to ensure 5kb images scale up*/
	border-collapse: collapse;
	table-layout: fixed; /*to fix 50% width of each column, e.g., if two images are different resolution*/
	overflow: hidden; /*to prevent text overflowing beyond content div*/
}
.tablecell {
	border: 0px solid transparent; /*see https://stackoverflow.com/questions/8806161/css-table-border-spacing-inside-only*/
	background-clip: padding-box;
	width: 50%; /*if images are different size*/
}
.centertable tr > td + td {
  border-left-width: thick;
}
.centertable tr + tr > td {
  border-top-width: 0px;
}
.slidesDiv { /*slides changer division*/
	width: 100%; /*Otherwise some iOS iPhones do not show full screen correctly*/
	height: 100%;
	background: black;
}
.slidesDiv::before { /*full screen right/left buttons; style from https://css-tricks.com/snippets/css/css-triangle/*/
	position: relative;
	content: '';
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 20px solid white;
	padding-right: 10px;
	top: 50%;
	margin-top: -30px;
	float: right;
	z-index: 9999;
}
.slidesDiv::after { /*full screen right/left buttons*/
	position: relative;
	content: '';
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-right: 20px solid white;
	padding-left: 10px;
	top: 50%;
	margin-top: -30px;
	float: left;
}
.no-display-left::after { /*hide left button*/
	display: none;
}
.no-display-right::before { /*hide right button*/
	display: none;
}
.right-left-fade::before,
.right-left-fade::after { /*fading right/left full screen buttons*/
	transition: opacity 1s ease-in;
	opacity: 0;
}
.right-left-semitransparent::before,
.right-left-semitransparent::after { /*semitransparent right/left full screen buttons*/
	opacity: 0.5;
}
.shifting { /*slide shifter transitions*/
  transition: left 0.2s ease-out;
}

/**********************  DZI settings   */
.deepzoomcontainer {
	position: relative;
	width: 100%;
	padding-bottom: 66.7%; /*wrapper; padding-bottom maintains aspect ratio*/
}
.deepzoomverticalcontainer {
	 position: relative;
	 width: 100%;
	 padding-bottom: 150%; /*wrapper for portraid dzi images in tables*/
}
.deepzoomimage { /*see https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css on top/bottom/left/right; important is to override leaflet color/cursor; not sure what text-align is for*/
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: left;
	z-index: 0;
	background-color:rgba(0,0,0,0.1)!important;
}
.dzicursor { /*dzi cursor to override leaflet cursor*/
	cursor: zoom-in!important;
}
.dzifullscreencursor{ /*dzi cursor in full screen*/
	cursor: zoom-out!important;
}

/**********************  Map settings   */
#map, .map { /*padding-bottom maintains aspect ratio; min-height overrides to maintain reasonable size*/
	width: 100%;
	padding-bottom: 62.5%;
	min-height: 17.5rem;
	border: 0rem;
	text-align: left;
	z-index: 0;
}
.overlay { /*elevation profile info window*/
	position: absolute;
	white-space: pre; /*needed to add line breaks*/
	background: rgba(255, 249, 196, 0.92);
	box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	margin: 0rem 1rem;
	padding: 0.25rem;
	border-radius: 0.5rem;
	font-size: small;
	z-index: 10;
	pointer-events: none;
}
/**********************  Video settings   */
.video-wrapper { /*video wrapper*/
	position: absolute;
	left: 0px; /* needed for centering absolutely positioned element*/
	right: 0px;
	margin: auto;
	bottom: 0px;
}
.video-controls { /*video controls div*/
	cursor: pointer;
	position: absolute;
	padding: 0.25rem 0;
	height: 2.5rem; /*absolute height makes centering easier*/
	bottom: 0px;
	background: rgba(0, 0, 0, 0.5);
	width: 100%; /*fill width of video*/
	text-align: left;
}
.video-controls-port { /*video controls for portrait videos*/
	cursor: pointer;
	position: absolute;
	padding: 0.25rem 0;
	height: 2.5rem; /*absolute height makes centering easier*/
	bottom: 0px;
	background: rgba(0, 0, 0, 0.5);
	width: 45%; /*fill width of video*/
	min-width: 12rem; /*on portrait videos, expand beyond the video on small screens*/	
	text-align: left;
	margin: 0 auto; /*center horizontally*/
	left: 0;
	right: 0;
}
.video-controls-fade { /*fading video controls*/
	transition: opacity 2s ease-in;
	opacity: 0;
}
.play-button { /*play button*/
	-webkit-appearance: none; /*necessary for iPhone to fit contents*/
	position: relative;
	border: none;
	padding: 0 0.25rem;
	outline: none;
	background-color: transparent;
}
.play-icon { /*video control icons*/
	width: 2rem;
	height: 2rem;
}
.seek-bar { /*seek bar*/
	position: relative;
	bottom: 0.875rem; /*to center with play button; 0.5*[2rem (height of play-button) - 0.25rem (height of volume bar)]*/
	width: calc(80% - 10rem); /*split remaining video controls width (12.5rem) 4:1 with volume bar*/
	height: 0.25rem;
	margin: 0;
}
.seek-bar-drone { /*full width seek bar for drone videos*/
	position: relative;
	bottom: 0.875rem; /*to center with play button; 0.5*[2rem (height of play-button) - 0.25rem (height of volume bar)]*/
	width: calc(100% - 10.5rem); /*remaining video controls width*/
	height: 0.25rem;
	margin: 0;
}
.video-time { /*video duration/elapsed time*/
	display: inline; /*to keep text on the same line as buttons*/
	position: absolute;
	line-height: 2rem; /*to center with play button*/
	padding: 0 0.25rem;
	color: white;
	font-family: Arial, sans-serif;
	font-size: 0.75rem;
}
.mute-button { /*play button*/
	-webkit-appearance: none; /*necessary for iPhone to fit contents*/
	position: relative;
	float:right;
	top: 0.25rem; /*to center with play button as mute button is smaller by 0.5rem*/
	border: none;
	padding: 0 0.25rem;
	outline: none;
	background-color: transparent;
}
.mute-icon { /*mute icon*/
	width: 1.5rem;
	height: 1.5rem;
}
.volume-bar { /*volume bar*/
	position: relative;
	float: right;
	top: 0.875rem; /*to center with play button; 0.5*[2rem (height of play-button) - 0.25rem (height of volume bar)]*/
	width: calc(20% - 2.5rem);
	height: 0.25rem;
	margin: 0;
}
.youtube-button { /*play button; image from https://www.youtube.com/about/brand-resources/#logos-icons-colors*/
	position: relative;
	-webkit-appearance: none; /*necessary for iPhone to fit contents*/
	margin: 0.25rem;
	float: right;
	border: none;
	padding: 0 0.25rem;
	outline: none;
	background-color: transparent;
}
.youtube-icon { /*video control icons*/
	width: 2.125rem;
	height: 1.5rem;
}

@media screen and (max-width:48rem) { /*hide volume bar on small screen on portrait videos*/
	.video-controls-port .volume-bar {
		display:none;
	}
	.video-controls-port .seek-bar {
		width: calc(100% - 12.5rem);
	}
}
@media screen and (max-width:36rem) { /*hide duration on small screen on portrait videos*/
	.video-controls-port .video_duration {
		display:none;
	}
	.video-controls-port .seek-bar {
		width: calc(100% - 10.5rem);
	}
}

@media screen and (max-width:22rem) { /*hide volume bar on small screen for normal videos*/
	.video-controls .volume-bar {
		display:none;
	}
	.video-controls .seek-bar {
		width: calc(100% - 12.5rem);
	}
}
@media screen and (max-width:16rem) { /*hide duration on small screen for normal videos*/
	.video-controls .video_duration {
		display:none;
	}
	.video-controls .seek-bar {
		width: calc(100% - 10.5rem);
	}
	.video-controls .seek-bar-drone {
		width: calc(100% - 8.5rem);
	}
}
/**********************  Menu   */
#menuIcon { /*Menu icon */
	display: none;
	float: left;
	width: 2.4rem; /*includes padding*/
	height: 2.4rem;
	padding: 0.4185rem; /*increases clickable area*/
	opacity: 0.7;
}

.Duration{ /*icons in menu items*/
	float: right;
	width: 1.563rem;
	height: 1.563rem;
	margin-right: -0.938rem; /*this is relative to the padding of the parent <a> - difficult to do otherwise*/
	margin-top: -0.438rem;
}
.Activity{
	float: right;
	width: 1.563rem;
	height: 1.563rem;
	margin-right: 0.25rem;
	margin-top: -0.438rem;
}

#menuContainer { /*occupies all screen - used for scrolling the menu*/
	position: fixed;
	background-color: rgba(140,140,140,0.7);
	overflow-y: auto;
	overflow-x: visible;
	top: 2.56rem;
    left: 0.188rem;
	width: 8.75rem;
	bottom: 0;
	transition: top 0.5s; /*moved up on small screens with JS script*/
}

/* Menu visibility is controlled with this class to avoid interfering with @media query (https://stackoverflow.com/questions/46054334/javascript-overriding-css-display-property-after-change-of-media-query/46059140)*/
.closed-menu-display {
    display: block;
}

#cssmenu {
	text-align: left;
    width: 8.75rem;
    -webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#cssmenu  > ul { /* The container */
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	list-style: none;
	width: 8.75rem;
	line-height: 1;
	background: grey;
}
#cssmenu  > ul li { /* The list elements which contain the links */
	display: block;
	position: relative;
	width: 8.75rem;
}
#cssmenu  > ul li a { /* General link styling */
	display: block; /* Layout */
	position: relative;
	width: 8.75rem;
	border-top: 1px dotted #525252;
	border-bottom: 1px dotted #3A3A3A;
	font-family: Helvetica,Arial,sans-serif; /* Typography */
	color: #f2f2f2;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
	font-size: 0.67rem;
	font-weight: 400;
	padding: 0.5rem 1.25rem;
	background: #5C5A5A; /* Background & effects */
}
#cssmenu  > ul li .last-sub a {
	width: 13.5rem;
}
#cssmenu  > ul li > a:hover { /* The hover state of the menu/submenu links */
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
	background: #7398a3;
	border-color: transparent;
}
#cssmenu  > ul .has-sub > a::after { /* The arrow indicating a submenu */
	content: '';
	position: absolute;
	top: 0.625rem;
	right: 0.375rem;
	width: 0rem;
	height: 0rem;
	border: 0.25rem solid transparent; /* Creating the arrow using borders */
	border-left: 0.25rem solid #f2f2f2;
}
#cssmenu  > ul .has-sub > a::before { /* The same arrow, but with a darker color, to create the shadow effect */
	content: '';
	position: absolute;
	top: 0.688rem;
	right: 0.375rem;
	width: 0rem;
	height: 0rem;
	border: 0.25rem solid transparent;
	border-left: 0.25rem solid #000;
}
#cssmenu  > ul ul { /* THE SUBMENUS */
	position: absolute;
	top: 0rem;
	left: 8.75rem;
	padding-left: 0.188rem;
	display: none;
	z-index: 9999999; /*needed to show on top of iframe with google maps*/
}

/* Showing the submenu when the user is clicking the parent link */
#cssmenu  > ul .show-list { /*need to use specific selector to override the rule above*/
	display: block;
}

@media screen and (max-width: 59.5rem) {  /*remove visible menu on small screens but show a menu symbol*/
	#main {
		left: 0.08rem;
	}
	#menuIcon {
		display: block;
	}
	.closed-menu-display {
		display: none;
	}
	#cssmenu  > ul ul { /*menu on small screen is an accordeon*/
		position: relative;
		left: 0.5rem;
	}
	#cssmenu  > ul .has-sub > a::after { /*make arrows point down in accordeon*/
		border: 0.25rem solid transparent;
		border-top: 0.25rem solid #f2f2f2;
	}
	#cssmenu  > ul .has-sub > a::before {
		border: 0.25rem solid transparent;
		border-top: 0.25rem solid #000;
	}
}