html    {box-sizing:border-box}

*,*:before,*:after{box-sizing:inherit}

html    {-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

body    {margin:0}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section
        {display:block}

summary {display:list-item}

button,input,select,textarea,optgroup
        {font:inherit;margin:0}
button,input
        {overflow:visible}
button,select
        {text-transform:none}
button,[type=button],[type=reset],[type=submit]
        {-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner
        {border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring
        {outline:1px dotted ButtonText}
optgroup {font-weight:bold}

html,body
        {font-family:Verdana,sans-serif;font-size:12px;line-height:1.2}
html    {overflow-x:hidden}

h1,h2,h3,h4,h5,h6
        {font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}

h1      {font-size:36px}
h2      {font-size:30px}
h3      {font-size:24px}
h4      {font-size:20px}
h5      {font-size:18px}
h6      {font-size:16px}

.w3-serif
        {font-family:serif}

.flex-container {
	padding: 0.01em 16px;
	background-color:#ffeb3b!important;
}

.flex-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color:#ffeb3b!important;
}

.flex-button {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 5px;
}
	
.flex-right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 5px;
}
	
.flex-input {
	display: flex;
	justify-content: flex-start;
	margin: 5px 5px 5px 10px;
	align-items: center;
}

.flex-item {	
	margin: 10px 5px;
}

.flex-col {
	display: flex;
	flex-direction: column;
	margin: 0;
	list-style: none;
	padding: 1px;
}

.flex-container-archive {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 0;
	list-style: none;
	padding: 1px;
}

/*-----------------------------*/

.containerheaderlistvolumes {
	overflow-x: hidden;
	background-color: #ffffe6;	/* pale yellow */
}

.containerlistvolumes {
	height: auto;
	max-height: 160px;
	overflow-x: hidden;
	background-color: #e6ffff;	/* light turquoise */
}

/*-----------------------------*/


.containerheaderimages {
	overflow-x: hidden;
	background-color: white;	/* change to #ffffe6 (pale yellow) when in use */
}

.containerimages {
	height: auto;
	max-height: 162px;
	overflow-x: hidden;
	background-color: white;	/* change to #e6ffff (light turquoise) when in use */
}

/*-----------------------------*/

.containerheadernames {
	overflow-x: hidden;
	background-color: white;	/* change to #ffffe6 (pale yellow) when in use */
}

.containernames {
	height: auto;
	max-height: 160px;
	overflow-x: hidden;
	background-color: white;	/* change to #ffe6e6 (pale red) when in use */
}

/*-----------------------------*/

.containerheaderrecords {
	overflow-x: hidden;
	background-color: white;	/* change to #ffffe6 (pale yellow) when in use */
}

.containerrecords {
	overflow-x: hidden;
	background-color: white;	/* change to #ffe6e6 (pale red) when in use */
}

/*-----------------------------*/

.invisible   {
        visibility: hidden;
        width: 100px;
        height: 50px;
        background-color: darksalmon;
        vertical-align: middle;
        margin-left: 10px;
}

.cyan   {
        width: 100px;
        height: 50px;
        background-color: cyan;
        vertical-align: middle;
        margin-left: 10px;
		cursor: pointer;
}

.orange {
        width: 100px;
        height: 50px;
        background-color: orange;
        vertical-align: middle;
        margin-left: 10px;
}

.grey   {
        visibility: hidden;
        width: 100px;
        height: 50px;
        background-color: lightgray;
        vertical-align: middle;
        margin-left: 10px;
}

.red    {
        width: 100px;
        height: 50px;
        background-color: red;
        vertical-align: middle;
        margin-left: 10px;
		cursor: pointer;
}

.yellow {
        visibility: visible;
        width: 100px;
        height: 50px;
        background-color: yellow;
        vertical-align: middle;
        margin-left: 10px;
		cursor: pointer;
}

.green {
        width: 100px;
        height: 50px;
        background-color: chartreuse;
        vertical-align: middle;
        margin-left: 10px;
		cursor: pointer;
}

.yellowdownload {
        width: 100px;
        height: 27px;
        background-color: yellow;
        vertical-align: middle;
        margin-left: 10px;
}

.yellowzoom {
		width: 120px;
		height: 27px;
		background-color: yellow;
		vertical-align: middle;
		margin-left: 10px;
}

.greendownload {
		width: 100px;
		height: 27px;
		background-color: chartreuse;
		vertical-align: middle;
		margin-left: 10px;
}

.greenzoom {
		width: 120px;
		height: 27px;
		background-color: chartreuse;
		vertical-align: middle;
		margin-left: 10px;
}

.itflag {
        width: 100px;
        height: 50px;
        background: url(itflag.png) no-repeat center;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-left: 10px;
		color:blue;
		cursor: pointer;
}

.itflagoff {
        width: 100px;
        height: 50px;
        background: url(itflag.png) no-repeat center;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-left: 10px;
        opacity: 0.6;
        cursor: not-allowed;
}

.ukflag {
        width: 100px;
        height: 50px;
        background: url(ukflag.png) no-repeat center;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-left: 10px;
		color:yellow;
		cursor: pointer;
}

.ukflagoff {
        width: 100px;
        height: 50px;
        background: url(ukflag.png) no-repeat center;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-left: 10px;
        opacity: 0.5;
        cursor: not-allowed;
}

.frflag {
        width: 100px;
        height: 50px;
        background: url(frflag.png) no-repeat center;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-left: 10px;
		color:forestgreen;
		cursor: pointer;
}

.frflagoff {
        width: 100px;
        height: 50px;
        background: url(frflag.png) no-repeat center;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-left: 10px;
        opacity: 0.5;
        cursor: not-allowed;
}

table   {
        border-width: 1px;
        border-style: solid;
        border-color: black;
        border-collapse: collapse;
        padding: 1px;
        font-size: 12px;
        table-layout: fixed;
		width: 560px;
        white-space: wrap;
}

th      {
        border-width: 1px;
        border-style: solid;
        border-color: black;
        border-collapse: collapse;
        padding: 1px;
        font-size: 12px;
}

.thflv { width:560px; background-color: #ffffe6 }
.thfli { width:420px; background-color: #ffffe6 }
.thfrd { width:420px; background-color: #ffffe6 }

.thfn1 { width:510px; background-color: #ffffe6 }
.thfn2 { width:50px; background-color: #ffffe6 }

.thsa1 { width:50px; }
.thsa2 { width:70px; }
.thsa3 { width:60px; }
.thsa4 { width:40px; }
.thsa5 { width:40px; }
.thsa6 { width:300px; }

.thsi1 { width:80px; }
.thsi2 { width:50px; }
.thsi3 { width:50px; }
.thsi4 { width:50px; }
.thsi5 { width:40px; }
.thsi6 { width:50px; }
.thsi7 { width:50px; }
.thsi8 { width:50px; }

.thbn1 { width:50px; }
.thbn2 { width:70px; }
.thbn3 { width:70px; }
.thbn4 { width:130px; }
.thbn5 { width:120px; }
.thbn6 { width:120px; }

.thbr1 { width:50px; }
.thbr2 { width:100px; }
.thbr3 { width:60px; }
.thbr4 { width:70px; }
.thbr5 { width:70px; }
.thbr6 { width:70px; }

.thbs1 { width:420px; }

.thbp1 { width:210px; }
.thbp2 { width:210px; }

td      {
        border-width: 1px;
        border-style: solid;
        border-color: black;
        border-collapse: collapse;
        padding: 1px;
        font-size: 12px;
        overflow: hidden;
		cursor: pointer;
}

.tdsa1 { width:50px; }
.tdsa2 { width:70px; }
.tdsa3 { width:60px; }
.tdsa4 { width:40px; }
.tdsa5 { width:40px; }
.tdsa6 { width:300px; }

.tdsi1 { width:80px; }
.tdsi2 { width:50px; }
.tdsi3 { width:50px; }
.tdsi4 { width:50px; }
.tdsi5 { width:40px; }
.tdsi6 { width:50px; }
.tdsi7 { width:50px; }
.tdsi8 { width:50px; }

.tdbn1 { width:50px; }
.tdbn2 { width:70px; }
.tdbn3 { width:70px; }
.tdbn4 { width:130px; }
.tdbn5 { width:120px; }
.tdbn6 { width:120px; }

.tdbr1 { width:50px; }
.tdbr2 { width:100px; }
.tdbr3 { width:60px; }
.tdbr4 { width:70px; }
.tdbr5 { width:70px; }
.tdbr6 { width:70px; }

.tdbs1 { width: 420px; }

.tdbp1 { width:210px; }
.tdbp2 { width:210px; }

.outer-container {
	display: flex;
	flex-direction: column; /* stack 'slide' above 'slideimage' */
	height: 98vh; 
	background-color: #f2f2f2; /* light grey */
/*	background-color: #e6ffff; /* very light blue */
/*	background-color: #e6ffe6; /* very light green */
}

.zoombutton {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0px;
}

.downloadbutton {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0px;
}

.slide {
	display: flex;
	flex-direction: row; /* elements stacked horizontally */
	justify-content: space-between; 
	height: 30px; 
	border: 2px solid  #29a8e2; /* shade of blue  */
 	background-color: #ffffe6; /* very light yellow */
}

.centername {
	color: #0000cc;  /* dark blue */
	text-align: center; 
	font-size: 14px;
	line-height: 0px; /* to align the text */
}

.leftslide,.rightslide { 
	height: 30px;
	width: 30px; 
	line-height: 30px; /* centre of arrow */
	background-color: #444444; /* black */
	border-radius: 50%;
	color:#ffffff; /* white */
	font-size: 20px;
	cursor: pointer;
	margin-top: 0;
	text-align: center;
}

.leftslide:hover,.rightslide:hover {
	box-shadow: 0px 0px 10px black;
	background-color: #29a8e2; /* shade of blue */
}

.leftslide {
	left: 30px;
	top: 10px;
}

.rightslide {
	right: 30px;
	top: 10px;
}

.slideimagewidth {
	display: flex;
	max-height: calc(98vh - 30px - 2px - 2px); 
	margin: auto;  
	max-width: 100vw; 
	justify-content: center;
	width: 100%;
	height: 100%;
	transform-origin: 0px 0px;
	transform: scale(1) translate(0px, 0px);
	cursor: grab;
}

.slideimagewidth img {
	align-self: start;
	height: auto;
	max-width: 100%;
	width: 100%
}

.slideimagepage {
	display: flex;
	max-height: calc(98vh - 30px - 2px - 2px); 
	margin: auto;  
	max-width: 100vw; 
	justify-content: center;
}

.slideimagepage img {
	align-self: start;
	height: 100%;
	max-width: 100%;
}