/*custom properties*/
:root {
	--border-colour: #ff4500;
	--border-width: 0.1rem;
	--text-high-colour: #ff4500;
	--background-colour: white;
	--background-colour-alt: aliceblue;
	--text-colour: black;
	--link-colour: blue;
	--link-hover-colour: cornflowerblue;
	--table-line-colour: gray;
	--text-size-small: 0.75rem;
	--text-size-normal: 1.1rem;
	--text-size-large: 1.5rem;
	--text-size-heading: 2.5rem;
	--text-size-arrows: 3.5rem;
	--text-size-menu0:	1.5rem;
	--text-size-menu0s: 1.75rem;
	--text-size-menu1: 1.1rem;
	--text-size-menu1s: 1.25rem;
	--line-height-normal: 1.5rem;
	--border-radius: 0.5rem;
	--margin: 1rem;
	--padding: 1rem;
}

/***** Structure
css relating to the outer structure of all documents*/

a.bold {
	color: var(--text-high-colour);
}
a.bold:visited {
	color: var(--text-high-colour);
}

html {
	font-size: var(--text-size-normal);	/* of default system default */
	font-family: Helvetica;
}

body {
	background-color: var(--background-colour);
	color: var(--text-colour);
	max-width: 87.5rem;
	/*max-width: 58.125rem;	/* 930px when default system font is 16px */
	margin: var(--margin) auto;
}

header {
	background-color: var(--background-colour);
	padding: var(--padding);
	font-size: var(--text-size-small);
	height: 5rem;
}
footer {
	background-color: var(--background-colour);
	padding: var(--padding);
	font-size: var(--text-size-small);
}

main {
	background-color: var(--background-colour);
	padding: var(--padding);
}

/***** Flex Columns
Add to divs to create multi columns*/
.hdrRow {
	display: flex;
	flex-direction: row;
	flex-basis: 100%;
	padding: var(--padding);
}
.hdrRow div {
	align-self: flex-end;
}

.row {
	display: flex;
	flex-direction: row;
	flex-basis: 100%;
	padding: var(--padding);
}
.row div {
	align-self: flex-start;
}

.column {
	flex-direction: column;
	flex-basis: 100%;
}

.column20 {
	flex-direction: column;
	flex-basis: 20%;
}
.column10 {
	flex-direction: column;
	flex-basis: 10%;
}

.right {
	display: flex;
	text-align: right;
	justify-content: flex-end;
}

.center {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}

/***** Flex Columns End */

/***** Generic Start */

h1 {
	font-size: var(--text-size-large);
	font-weight: bold;
	color: var(--text-high-colour);
	text-align: left;
}

small {
	font-size: var(--text-size-small);
}

div.title {
	font-size: var(--text-size-heading);
	font-weight: bold;
	margin-top: var(--margin);
	margin-bottom: var(--text-size-heading);
	color: var(--text-high-colour);
	text-align: center;
}
div.content {
	font-size: var(--text-size-normal);
	line-height: var(--line-height-normal);
	font-weight: normal;
	margin: var(--margin);
}
div.data {
	font-size: var(--text-size-normal);
	font-weight: normal;
	margin: var(--margin);
}

table {
	table-layout: fixed;
	border-width: var(--border-width);
	border-style: solid;
	border-color: var(--border-colour);
	border-collapse: separate;
	margin: 0px auto;
	border-radius: var(--border-radius);
	border-spacing: 0;
}
table td{
	padding: var(--padding);
}
table th{
	font-size: var(--text-size-normal);
	font-weight: bold;
	background-color: var(--link-colour);
	color: var(--background-colour);
}
/*alternate row colours*/
table tr:nth-child(even){
	background-color: var(--background-colour-alt);
}
/* set top left an top right rounded corner*/
table tr:first-child th:first-child{
	border-top-left-radius: var(--border-radius);
}
table tr:first-child th:last-child {
  	border-top-right-radius: var(--border-radius);
}

/* general image wrap - use figure*/

/*header/footer*/
img.noBorder {
	border-style: none;
}

/* default img. Use figure for positioning*/
img {
	width: 100%;
	border-width: var(--border-width);
	border-style: solid;
	border-color: var(--border-colour);
	border-radius: var(--border-radius);
}

figcaption {
	font-size: var(--text-size-small);
	color: var(--text-high-colour);
	text-align: center;
}

figure.centre_25 {
	display: block;
	margin: auto;
	width: 25%;
}
figure.centre_40 {
	display: block;
	margin: auto;
	width: 40%;
}
figure.centre_50 {
	display: block;
	margin: auto;
	width: 50%;
}
figure.left_25 {
	float: left;
	margin-top: var(--margin);
	margin-bottom: var(--margin);
	margin-right: var(--margin);
	margin-left: 0;
	width: 25%;
}
figure.left_40 {
	float: left;
	margin-top: var(--margin);
	margin-bottom: var(--margin);
	margin-right: var(--margin);
	margin-left: 0;
	width: 40%;
}
figure.right_25 {
	float: right;
	margin-top: var(--margin);
	margin-bottom: var(--margin);
	margin-right: 0;
	margin-left: var(--margin);
	width: 25%;
}
figure.right_40 {
	float: right;
	margin-top: var(--margin);
	margin-bottom: var(--margin);
	margin-right: 0;
	margin-left: var(--margin);
	width: 40%;
}

/***** Generic End */

/* base format for most pages */
.base {
	font-size: var(--text-size-normal);
}

/*Panorama animation*/
@keyframes panoramaAni {
	from {background-position-x: 0%;}
	to {background-position-x: 100%;}
}
#panorama {
	float: left;
	margin-right: var(--margin);
	background-color: var(--background-colour);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	display: inline-block;
	width: 16rem;
	height: 21rem;
	border-style: solid;
	border-color: var(--border-colour);
	border-radius: var(--border-radius);
	border-width: var(--border-width);
	animation-name: panoramaAni;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

/*horizontal page scroller*/
select.multiSel{
	display: block;
	margin: 0 auto;
	text-align-last: center;
	color: var(--link-colour);
	border-color: var(--border-colour);
	border-width: var(--border-width);
	border-radius: var(--border-radius);
	background-color: var(--background-colour-alt);
	font-size: var(--text-size-normal);
	padding: var(--padding);
	/*following prevents color change after selection*/
	outline-style: solid;
	outline-color: var(--border-colour);
	outline-width: var(--border-width);
}
div.multiDiv{
	display: none;
}
span.multiRight {
	float: right;
	color: var(--link-colour);
	font-size: var(--text-size-arrows);
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}
span.multiRight:hover {
	color: var(--link-hover-colour);
}
span.multiRight:focus {
	color: var(--link-colour);
}
span.multiLeft {
	float: left;
	color: var(--link-colour);
	font-size: var(--text-size-arrows);
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}
span.multiLeft:hover {
	color: var(--link-hover-colour);
}
span.multiLeft:focus {
	color: var(--link-colour);
}

/* LIST format start *****/

/* list table format */
table.lstTbl {
	font-size: var(--text-size-small);
	table-layout: fixed;
	border-collapse: collapse;
	border: none;
	width: 100%;
}
table.lstTbl td {
	border-left: var(--border-width) solid var(--table-line-colour);
	padding: var(--padding);
	word-wrap: break-word;
}
table.lstTbl td:first-child {
	border-left: none;
	padding: var(--padding);
	word-wrap: break-word;
}
table.lstTbl th {
	border-left: var(--border-width) solid var(--table-line-colour);
	border-bottom: var(--border-width) solid var(--table-line-colour);
	padding: var(--padding);
}
table.lstTbl th:first-child {
	border-left: none;
	border-bottom: var(--border-width) solid var(--table-line-colour);
	padding: var(--padding);
}

/*Popup outer container*/
div.pop {
	position: relative;
  	display: inline-block;
}
/*Actual popup*/
div.popContent{
	position: fixed;
	z-index: 1;
	border-style: solid;
	border-color: var(--border-colour);
	border-width: var(--border-width);
	border-radius: var(--border-radius);
	padding: var(--padding);
	background-color: var(--background-colour-alt);
	width: 50rem;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);	/* change the positioning point to the center of the div */
}
div.popData{

}

table.popTbl {
	font-size: var(--text-size-normal);
	table-layout: fixed;
	border-collapse: collapse;
	border: none;
	width: 100%;
}
table.popTbl td {
	padding: var(--padding);
	word-wrap: break-word;
}
table.popTbl td:first-child {
	padding: var(--padding);
	word-wrap: break-word;
}
table.popTbl th {
	background-color: var(--background-colour-alt);
	color: var(--text-colour);
	font-size: var(--text-size-small);
	text-align: right;
	width: 25%;
	padding: var(--padding);
}
table.popTbl th:first-child {
	padding: var(--padding);
}

/* The Close Button */
span.popClose {
	float: right;
	color: var(--link-colour);
	font-size: var(--text-size-heading);
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}
span.popClose:hover {
	color: var(--link-hover-colour);
}
span.popClose:focus {
	color: var(--link-colour);
}

a.lst {
	font-size: var(--text-size-menu1);
	color: var(--link-colour);
	text-decoration-line: underline;
	text-wrap: nowrap;
	cursor: pointer;
}
a.lst:visited {
	color: var(--link-colour);

}
a.lst:hover {
	color: var(--link-hover-colour);
}

img.lstImg {
	display: block;
	margin: auto;
	width: 95%;
	border-width: var(--border-width);
	border-style: solid;
	border-color: var(--border-colour);
	border-radius: var(--border-radius);
}

/* LIST format end *****/

/* LINK format start *****/

/*link table format*/
table.lnkTbl {
	font-size: var(--text-size-small);
	table-layout: fixed;
	border-collapse: collapse;
	border: none;
	width: 100%;
}
table.lnkTbl td {
	border-left: var(--border-width) solid var(--table-line-colour);
	padding: var(--padding);
	word-wrap: break-word;
}
table.lnkTbl td:first-child {
	border-left: none;
	padding: var(--padding);
	word-wrap: break-word;
}
table.lnkTbl tr {
	border-bottom: var(--border-width) solid var(--table-line-colour);
	padding: var(--padding);
}
table.lnkTbl tr:last-child {
	border-bottom: none;
	padding: var(--padding);
}

img.lnkImg {
	display: block;
	margin: auto;
	width: 95%;
	border-width: var(--border-width);
	border-style: solid;
	border-color: var(--border-colour);
	border-radius: var(--border-radius);
	opacity: 50%;
}

div.lnkDiv {
	position: relative;
  	text-align: center;
}
div.lnkPos {
	position: absolute;
  	top: 50%;
	left: 50%;
  	transform: translate(-50%, -50%);
}

a.lnk {
	font-size: var(--text-size-menu1);
	color: var(--link-colour);
	text-decoration-line: underline;
	text-wrap: nowrap;
	cursor: pointer;
}
a.lnk:visited {
	color: var(--link-colour);

}
a.lnk:hover {
	color: var(--link-hover-colour);
}


/* LINK format end *****/


/***** tooltip start */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: var(--border-width) dotted var(--table-line-colour);
}
  
.tooltip .tooltiptext {
	visibility: hidden;
	background-color: var(--background-colour);
	color: var(--text-colour);
	text-align: left;
	padding: var(--padding);
	border-color: var(--border-colour);
	border-width: var(--border-width);
	border-style: solid;
	border-radius: var(--border-radius);
	position: absolute;
	z-index: 1;
	width: 20rem;
}
  
.tooltip:hover .tooltiptext {
	visibility: visible;
}

/***** tooltip end */

/***** menu start */
div.menu {
	align-self: flex-start;
}
p.menu {
	margin: var(--margin);
	text-indent: 0rem;
}
p.menuSub {
	margin: var(--margin);
	text-indent: 1rem;
}
a.menu {
	font-size: var(--text-size-menu0);
	color: var(--link-colour);
	text-decoration: none;
}
a.menu:visited {
	font-size: var(--text-size-menu0);
	color: var(--link-colour);
	text-decoration: none;
}
a.menu:hover {
	font-size: var(--text-size-menu0);
	color: var(--link-hover-colour);
	text-decoration: none;
}
a.menuSel {
	font-size: var(--text-size-menu0s);
	color: var(--link-colour);
	text-decoration: none;
	font-weight: bold;
}
a.menuSel:visited {
	font-size: var(--text-size-menu0s);
	color: var(--link-colour);
	text-decoration: none;
	font-weight: bold;
}
a.menuSub {
	font-size: var(--text-size-menu1);
	color: var(--link-colour);
	text-decoration: none;
}
a.menuSub:visited {
	font-size: var(--text-size-menu1);
	color: var(--link-colour);
	text-decoration: none;
}
a.menuSub:hover {
	font-size: var(--text-size-menu1);
	color: var(--link-hover-colour);
	text-decoration: none;
}
a.menuSubSel {
	font-size: var(--text-size-menu1s);
	color: var(--link-colour);
	text-decoration: none;
	font-weight: bold;
}
a.menuSubSel:visited {
	font-size: var(--text-size-menu1s);
	color: var(--link-colour);
	text-decoration: none;
	font-weight: bold;
}

/***** menu end */

/***** Structure End */