/* reset browser styles */
	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		vertical-align: baseline;
	}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block; }
	ol { padding-left: 1.4em; list-style: decimal; }
	ul { padding-left: 1.4em; list-style: square; }
	table { border-collapse: collapse; 	border-spacing: 0; }
	/* end reset browser styles */
	body {
	background:#000000;
	border-color:#C7B97A;
	border-radius:4px;
	border-style:ridge;
	border-width:4px;
	color:#C7B97A;
	cursor: default;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	/* N.B. in the rest of this file all font-sizes are expressed as a percentage of this one to maintain their ability to adapt to the viewport size */
	font-weight: 400;
	height: 100vh;
	line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
	overflow: hidden;
	text-decoration: none;
	}
	*{
  box-sizing: border-box;
	}
	table {
		border-spacing: 5px;
		padding: 0px 10px;
	}
	td, th {
		font-weight: 400;
		padding: 0px 10px;
	}
	hr {
		border:1px ridge #C7B97A;
	}
	p {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
	}
	th {
		border-bottom:1px ridge #C7B97A;
		padding: 5px 0px;
		text-align: left
	}
	tr {
		padding: 5px 20px;
	}
	/* Layout for Responsive Columns and Rows */
[class*="col-"] {
  float: left;
  padding: 0px;
	align-items: center;
}
@media only screen {
  /* Column Widths N.B. The width of a single column or total width of column combinations, must not exceed 100% */
  .col-1 {width: 100%;} /* used by header, top NavBar & Footer*/
  .col-2 {width: 24%;} /* only used on pages that display the Track and Album Info */
  .col-3 {width: 75%;} /* only used on pages that display the Track and Album Info */
  .col-4 {width: 0%;}
  .col-5 {width: 0%;}
  .col-6 {width: 0%;}
  .col-7 {width: 0%;}
  .col-8 {width: 0%;}
  .col-9 {width: 0%;}
  .col-10 {width: 0%;}
  .col-11 {width: 0%;}
  .col-12 {width: 0%;}
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
/* Main Container */
.container {
	height: 99%;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 100%;
	-webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
	cursor: default;
}
	.pblue { color:#00FFFF; }
	.pcblue { color:#00FFFF; text-align: center; }
	.pgreen { color:#00FF00; }
	.pcgreen { color:#00FF00; text-align: center; }
	.pred { color:#FF0000; }
	.pcred { color:#FF0000; text-align: center; }
	.pyellow { color:#FFFF00; }
	.pcyellow { color:#FFFF00; text-align: center; }
	.tiny { font-size:12px; font-weight:normal; line-height:120%; }
	.indenp { line-height: 140%; padding: 5px 30px 5px 30px; }
	.indenp1 { line-height: 100%; padding: 5px 30px 5px 30px; }
	.indenp2 { line-height: 140%; padding: 5px 50px 5px 50px; }
	
	/* header */
	.head {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 140%;
		font-weight: 700;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		height: 9vh;
		width: 100%;
		padding: 0px; 
		text-align: center; 
		letter-spacing: 1px;
		border-bottom: #C7B97A ridge 4px;
	}
	.head img {
		display: inline-block;
		padding:5px 5px;
	}
	
	.left_panel {
		background:#000000;
		border-color:#C7B97A;
		border-radius:4px;
		border-style:ridge;
		border-width:2px;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		height: 80vh;
		margin: 0px 10px 5px 10px;
		overflow: hidden;
		padding: 5px 5px;
		width: 96%;
		-webkit-user-select: none; /* Safari */
		-ms-user-select: none; /* IE 10 and IE 11 */
		user-select: none; /* Standard syntax */
	}
	.right_panel {
		background:#000000;
		border-color:#C7B97A;
		border-radius:4px;
		border-style:ridge;
		border-width:2px;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		height: 80vh;
		margin: 0px 10px 5px 10px;
		overflow: hidden;
		padding: 2px 2px;
		width: 100%;
		-webkit-user-select: none; /* Safari */
		-ms-user-select: none; /* IE 10 and IE 11 */
		user-select: none; /* Standard syntax */
	}.right_panel_content {
		background:#000000;
		border-color:#C7B97A;
		border-radius:4px;
		border-style:ridge;
		border-width:2px;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		height: 80vh;
		margin: 0px 10px 5px 10px;
		overflow: Auto;
		padding: 5px 5px;
		width: 100%;
		-webkit-user-select: none; /* Safari */
		-ms-user-select: none; /* IE 10 and IE 11 */
		user-select: none; /* Standard syntax */
	}
		/* footer */
	.foot {
		border-top: #C7B97A ridge 4px;
		clear: both;
		font-size: 65%;
		font-weight: 400;
		height: 3vh;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		margin: 0;
		padding: 5px;
		text-align: center;
		width: 100%;
	}

	/* horizontal navigation */
	.hnav {
		border-bottom: #C7B97A ridge 4px;
		height: 4.5vh;
		margin: 0.5vh 2px 1vh 2px;
		overflow: hidden;
		padding: 0;
		width: 100%;
	}
	.hnav a {
		background-color: #000000;
		border: #C7B97A ridge 2px;
		color: #C7B97A;
		display: block;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		min-width: 12.5vw; /* Sets the entry/buton minimum width to 1/8 of the column width */
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
	}
	
	/* Vertical Navigation */
	.vnav  {
		height: 72.5vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 5px 5px;
		text-align: left;
		width: auto;
	}

	.vnav a {
		background-color: #000000;
		border: #C7B97A ridge 2px;
		border-radius:4px;
		color: #C7B97A;
		display: block;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		min-width: 21vw;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
	}
	.vnavb a {
		background-color: #000000;
		color: #00FFFF;
		display: block;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		min-width: 21vw;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
	}
	.vnavg a {
		background-color: #000000;
		color: #00FF00;
		display: block;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		min-width: 21vw;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
	}
	.vnavy a {
		background-color: #000000;
		color: #FFFF00;
		display: block;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		min-width: 21vw;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
	}

	.vnav a:hover {
		background-color: #C7B97A;
		border: #C7B97A ridge 2px;
		border-radius:4px;
		color: #000000;
	}

	.vnav a.active {
		background-color: #C7B97A;
		border: #C7B97A ridge 2px;
		border-radius:4px;
		color: #000000;
	}

	/* Accordion Panels */
	.Accordion {
		cursor: default;
		float: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 110%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		list-style-type :none;
		margin: 0;
		overflow: hidden;
		padding: 5px;
		width: 100%;
		-webkit-user-select: none; /* Safari */
		-ms-user-select: none; /* IE 10 and IE 11 */
		user-select: none; /* Standard syntax */
	}
	.AccordionPanel { margin:0px; padding:0px; }
	.AccordionPanelTab {
		background-color: #000000;
		border: #C7B97A ridge 2px;
		border-radius: 4px;
		color: #C7B97A;
		cursor: pointer;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 700;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		height: 30px;
		margin: 0px;
		padding: 5px;
		-webkit-user-select: none; /* Safari */
		-ms-user-select: none; /* IE 10 and IE 11 */
		user-select: none; /* Standard syntax */
	}
	.AccordionPanelOpen .AccordionPanelTab { background-color: #C7B97A; color: #000000; }
	.AccordionPanelTabHover { background-color: #C7B97A; color: #000000; }
	.AccordionPanelOpen .AccordionPanelTabHover { background-color: #C7B97A; color: #000000; }
	.AccordionFocused .AccordionPanelTab { background-color: #000000; color: #C7B97A; }
	.AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #C7B97A; color: #000000; }
	.AP1, .AP2, .AP3, .AP4, .AP5, .AP6, .AP7, .AP8 {
		border: #C7B97A ridge 2px;
		border-top: none;
		border-radius: 4px;
		display: block;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		margin: 0;
		padding: 5px;
		overflow-y: auto;
	}
	.AP1 { height: 75vh; }
	.AP2 { height: 71vh; }
	.AP3 { height: 69vh; }
	.AP4 { height: 66vh; }
	.AP5 { height: 61vh; }
	.AP6 { height: 58vh; }
	.AP7 { height: 55vh; }
	.AP8 { height: 54vh; }
	
	.AP1 img, .AP2 img, .AP3 img, .AP4 img, .AP5 img, .AP6 img, .AP7 img, .AP8 img { 
		display: block;
		margin: auto; /* horizontally centers the image */
		padding:10px;
	}

	.panel {
		display: none;
		background-color: #000000;
		border-left: #C7B97A ridge 2px;
		border-right: #C7B97A ridge 2px;
		border-bottom: #C7B97A ridge 2px;
		color: #C7B97A;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: 400;
		line-height: 120%; /* Sets the line-height to 1.2 x the font-size */
		padding: 5px 5px;
		text-align: left;  
		overflow: hidden;
		width: 100%;
	}
	/* figure */
	figure {
		display: block;
		margin-top: 5vh;
		margin-bottom: 0vh;
		margin-left: 15vw;
		margin-right: 15vw;
	}
	figure img { padding:5px 22px 5px 22px; }
	figure:hover {
		-webkit-transform:scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		-ms-transform:  scale(1.2);
		transform: scale(1.2);
	}
	figcaption { padding: 5px; text-align: center; }
	/* end figure styles */
	
/* Scrollbar Customisation - N.B. I.E does not allow the scrollbars to be customised */
/* Scrollbar Size */
::-webkit-scrollbar {
	height: 1vw; /* Sets the Horizontal Scrollbar height to 1% of the ViewPort (Display Panel) width to make it responsive */
  width: 1vw; /* Sets the Vertical Scrollbar width to 1% of the ViewPort width to make it responsive */
}
/* Horizontal Scrollbar Customisation */
/* Horizontal Scrollbar Track */
::-webkit-scrollbar-track:horizontal {
	background: #000000;
	display: block;
}
 /* Place The scroll left button on the left of the track */
::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url(images/sb_left.png);
	background-position: center;
	background-repeat: no-repeat;	
	background-size: 100% 100%;
	display: block;
}
 /* Changes the scroll left button on hover */
::-webkit-scrollbar-button:horizontal:start:decrement:hover {
  background-image: url(images/sb_left_hover.png);
	background-position: center;
	background-repeat: no-repeat;
background-size: 100% 100%;	
	display: block;
}
/* Horizontal Scrollbar Track Piece */
::-webkit-scrollbar-track-piece:horizontal {
	background-image: url(images/sb_h_track.png);
	background-position: center;
	background-repeat: repeat-x;
	display: block;
}
/* Horizontal Scrollbar Handle/Thumb */
::-webkit-scrollbar-thumb:horizontal {
	background: #93895f;
  -webkit-border-radius: 2.5px;
	border: 2px ridge #6d6d6d;
  border-radius: 2.5px;
	display: block;
}
/* Horizontal Scrollbar Handle/Thumb on hover*/
::-webkit-scrollbar-thumb:horizontal:hover {
	background: #93895f;
	-webkit-border-radius: 2.5px;
	border: 2px ridge #6d6d6d;
  border-radius: 2.5px;
	display: block;
}
/* Place The scroll right button on the right of the track */
::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url(images/sb_right.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}
 /* Changes the scroll right button on hover */
::-webkit-scrollbar-button:horizontal:end:increment:hover {
  background-image: url(images/sb_right_hover.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}

/* Vertical Scrollbar Customisation */
/* Vertical Scrollbar Track */
::-webkit-scrollbar-track:vertical {
	background: #000000;
	display: block;
}
 /* Place The scroll up button at the top */
::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url(images/sb_up.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}
 /* Changes the scroll up button on hover */
::-webkit-scrollbar-button:vertical:start:decrement:hover {
  background-image: url(images/sb_up_hover.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}
/* Vertical Scrollbar Track Piece */
::-webkit-scrollbar-track-piece:vertical {
	background-image: url(images/sb_v_track.png);
	background-position: center;
	background-repeat: repeat-y;
	display: block;
}
/* Vertical Scrollbar Handle/Thumb */
::-webkit-scrollbar-thumb:vertical {
	background: #93895f;
  -webkit-border-radius: 2.5px;
	border: 2px ridge #6d6d6d;
  border-radius: 2.5px;
	display: block;
}
/* Vertical Scrollbar Handle/Thumb on hover*/
::-webkit-scrollbar-thumb:vertical:hover {
	background: #93895f;
	-webkit-border-radius: 2.5px;
	border: 2px ridge #6d6d6d;
  border-radius: 2.5px;
	display: block;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url(images/sb_down.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}
 /* Changes the scroll down button on hover */
::-webkit-scrollbar-button:vertical:end:increment:hover {
  background-image: url(images/sb_down_hover.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}