@keyframes fadeIn 		{ from { opacity:	0;		} to { opacity:		1;		} }
@keyframes fadeIn2 		{ from { opacity:	0;		} to { opacity:		0.8;	} }
@keyframes fadeOut 		{ from { opacity:	1;		} to { opacity:		0;		} }
@keyframes headerdrop 	{ from { opacity:	0;	padding-top: var(--value50);	} to { opacity:		1;	padding-top: var(--value5);	} }


:root
{
		--atsfont1:		"Raleway", sans-serif;
		--atsfont2:		"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}


/* ----------------   HTML   -------------------*/


HTML
	{
		height:					100%;
		margin: 				0px;
		padding:				0px;
		overflow:				hidden;
	}


BODY
	{
		height:					100%;
		background-color: 		#333333;
		margin: 				0px;
		padding:				0px;
		overflow:				hidden;
		-webkit-font-smoothing:	antialiased;
/*		scrollbar-color: 		#094435 #105445; */
	}


A
	{
		outline: 				none;
		margin: 				0px;
	}


DIV
	{
		position:				absolute;
		overflow: 				hidden;
		display: 				block;
		margin:					0px;
		padding:				0px;
		scrollbar-color: 		#1C6051 #044839;
	}


/* -------------------------------------------------------------------------- */
/* As at Oct '19 Custom scrollbar colours aren't working in Chrome (as they do in Firefox) */
/* So the work-around is using pseudo classes - See https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar  */

DIV::-webkit-scrollbar
	{
		background-color: 		#044839;
	}


DIV::-webkit-scrollbar-thumb
	{
		background:				#1C6051;
	}

DIV::-webkit-scrollbar-button
	{
		background:				#367A6B;
	}


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


FORM
	{
		margin: 				0px;
	}


IMG
	{
		display: 				block;
		margin: 				0px;
		padding:				0px;
	}


/* ---------------   DIVs   -------------------*/


#autoplay
	{
		background-color: 		#105445;
		opacity: 				0.75;
	}


#backdrop
	{
		background-color: 		#333333;
		overflow:				hidden;
		background-image:		url(images/backdrop1.jpg);
		background-attachment:	fixed;
		background-repeat:		none;
		background-size:		cover;
		background-position: 	top;
	}


#header
	{
		background-color: 		#B0EDE0;
		opacity: 				0.75;
	}


#info
	{
		background-color: 		#B0EDE0;
		opacity: 				0.75;
	}


#ioswrapper
	{
		overflow:				hidden;
	}


#menu
	{
		background-color: 		#105445;
		opacity: 				0.75;
		overflow-y:				visible;
/*		scrollbar-color: 		#094435 #105445; */
	}


#page
	{
		overflow:				hidden;
	}


#player
	{
		margin:					0 auto;
		display: 				table;
		opacity: 				0.75;
	}


#playerbox
	{
		margin:					0 auto;
		text-align:				center;
		display:				table-cell; 
		vertical-align:			middle;
	}


#update_button
	{
		width:					calc(var(--menuwidth)*0.55);
		height:					calc(var(--value25)*1.2);
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-align:				left;
		line-height:			calc(var(--value25)*1.2); /* This trick replaces 'vertical-align: middle' (which doesn't work). Credit to: https://www.tutorialrepublic.com/faq/how-to-align-text-vertically-center-in-a-div-using-css.php */
		background-color: 		#333333;
		color: 					#CCCCCC;
		border:					solid 1px #555555;
		padding-left:			calc(var(--value25)*0.75);
		position: 				fixed;
	}


#updates
	{
		position:				absolute;
		width:					calc(var(--menuwidth)*1.9);
		height:					calc(var(--menuwidth)*1);
		background-color: 		#105445;
		opacity: 				0.85;
		overflow-y:				visible;
		z-index:				20;
		border:					solid 1px #555555;
		border-radius: 			var(--value25) 0px 0px 0px;
		-webkit-border-radius: 	var(--value25) 0px 0px 0px;
	}


/* ----------------   CSS   -------------------*/


.headerlogo1
	{
		height:					var(--headerlogo1h);
		width:					auto;
		text-align:				center;
		vertical-align:			middle;
		cursor: 				pointer;
		opacity:				0;

		-webkit-animation-delay: 			4s;
		-webkit-animation-duration: 		4s;
		-webkit-animation-timing-function: 	ease-in;
		-webkit-animation-iteration-count: 	1;
		-webkit-animation-fill-mode: 		forwards;
		-webkit-animation-name: 			headerdrop;
		
		-ms-animation-delay: 				4s;
		-ms-animation-duration: 			4s;
		-ms-animation-timing-function: 		ease-in;
		-ms-animation-iteration-count: 		1;
		-ms-animation-fill-mode: 			forwards;
		-ms-animation-name: 				headerdrop;
		
		-o-animation-delay: 				4s;
		-o-animation-duration: 				4s;
		-o-animation-timing-function: 		ease-in;
		-o-animation-iteration-count: 		1;
		-o-animation-fill-mode: 			forwards;
		-o-animation-name: 					headerdrop;
		
		animation-delay: 					4s;
		animation-duration: 				4s;
		animation-timing-function: 			ease-in;
		animation-iteration-count: 			1;
		animation-fill-mode: 				forwards;
		animation-name: 					headerdrop;
	}


.link1
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		text-align:				center;
		vertical-align:			middle;
		color: 					#330099;
		cursor:					pointer;
	}


.link1:hover
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		text-align:				center;
		vertical-align:			middle;
		color: 					#DD0000;
		cursor:					pointer;
	}


.menu_spacer1
	{
		height:					calc(var(--value25)*0.2);
		display:				none;
	}


.menu_spacer2
	{
		height:					calc(var(--menufs)*1.2);
	}


.menu_heading1
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			bold;
		letter-spacing:			calc(var(--menuls)*3);
		text-align:				left;
		vertical-align:			middle;
		color: 					#FFFFFF;
		height:					calc(var(--menufs)*2.5);
		padding-left:			calc(var(--value25)*1.0);
		padding-top:			calc(var(--value25)*0.5);
	}


.menu_heading2
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			bold;
		letter-spacing:			calc(var(--menuls)*3);
		text-align:				left;
		vertical-align:			middle;
		color: 					#FFFFFF;
		height:					calc(var(--menufs)*2.5);
		padding-left:			calc(var(--value25)*1.0);
		padding-top:			calc(var(--value25)*0.5);
		border-top:				solid 1px rgba(255, 255, 255, 0.3);
	}


.menu_subheading
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			bold;
		letter-spacing:			var(--menuls);
		text-align:				left;
		vertical-align:			top;
		color: 					#99FF99;
		height:					calc(var(--menufs)*1.5);
		padding-left:			calc(var(--value25)*0.9);
	}


.menu_table
	{
		table-layout: 			fixed;
		border-collapse: 		collapse;
		width: 					100%;
		max-width: 				var(--menuwidth);
	}


.menu_title_off
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		line-height:			140%;
		text-align:				left;
		vertical-align:			top;
		color: 					#00FFFF;
        overflow: 				hidden;
        white-space: 			nowrap;
		max-width: 				var(--menuwidth);
		height:					calc(var(--menufs)*1.5);
		padding-left:			calc(var(--value25)*0.2);
		cursor:					pointer;
	}


.menu_title_off > SPAN
	{
		font-family: 			var(--atsfont2);
		font-size: 				var(--menufs2);
		font-weight: 			normal;
		text-decoration:		none;
		line-height:			140%;
		text-align:				left;
		vertical-align:			middle;
		color: 					#00FFFF;
		height:					calc(var(--menufs)*1.5);
		cursor:					default;
		opacity: 				0.3;
	}


.menu_title_off:hover
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		line-height:			140%;
		text-align:				left;
		vertical-align:			top;
		color: 					#00FF00;
		height:					calc(var(--menufs)*1.5);
		padding-left:			calc(var(--value25)*0.2);
		cursor:					pointer;
	}


.menu_title_off:hover > SPAN
	{
		font-family: 			var(--atsfont2);
		font-size: 				var(--menufs2);
		font-weight: 			normal;
		text-decoration:		none;
		line-height:			140%;
		text-align:				left;
		vertical-align:			middle;
		color: 					#00FF00;
		height:					calc(var(--menufs)*1.5);
		cursor:					default;
		opacity: 				1.0;
	}


.menu_title_on
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		line-height:			140%;
		text-align:				left;
		vertical-align:			top;
		color: 					#FFCC00;
        overflow: 				hidden;
        white-space: 			nowrap;
		max-width: 				var(--menuwidth);
		height:					calc(var(--menufs)*1.5);
		padding-left:			calc(var(--value25)*0.2);
		cursor:					pointer;
	}


.menu_title_on > SPAN
	{
		font-family: 			var(--atsfont2);
		font-size: 				var(--menufs2);
		font-weight: 			normal;
		text-decoration:		none;
		line-height:			140%;
		text-align:				left;
		vertical-align:			middle;
		color: 					#FFCC00;
		height:					calc(var(--menufs)*1.5);
		cursor:					default;
		opacity: 				1.0;
	}


.menu_title_on:hover
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		line-height:			140%;
		text-align:				left;
		vertical-align:			top;
		color: 					#FFCC00;
		height:					calc(var(--menufs)*1.5);
		padding-left:			calc(var(--value25)*0.2);
		cursor:					pointer;
	}


.page_image
	{
		z-index:				11;
		position: 				relative;
		width:					var(--pagerwidth);
		max-width:				var(--pagerwidth);
		height:					auto;

		-webkit-animation-duration: 		2.5s;
		-webkit-animation-timing-function: 	ease-in;
		-webkit-animation-iteration-count: 	1;
		-webkit-animation-name: 			fadeIn;
		
		-ms-animation-duration: 			2.5s;
		-ms-animation-timing-function: 		ease-in;
		-ms-animation-iteration-count: 		1;
		-ms-animation-name: 				fadeIn;
		
		-o-animation-duration: 				2.5s;
		-o-animation-timing-function: 		ease-in;
		-o-animation-iteration-count: 		1;
		-o-animation-name: 					fadeIn;
		
		-animation-duration: 				2.5s;
		-animation-timing-function: 		ease-in;
		-animation-iteration-count: 		1;
		-animation-name: 					fadeIn;
	}


.page_image2
	{
		z-index:				10;
		position: 				relative;
		width:					var(--pagerwidth);
		max-width:				var(--pagerwidth);
		height:					auto;
		filter: 				brightness(70%) saturate(40%) blur(var(--value5));
		opacity: 				0.80;
		transform: 				scaleY(-1);

		margin-top:				calc(var(--value5)*-1.2);
		
		-webkit-animation-duration: 		2.5s;
		-webkit-animation-timing-function: 	ease-in;
		-webkit-animation-iteration-count: 	1;
		-webkit-animation-name: 			fadeIn2;
		
		-ms-animation-duration: 			2.5s;
		-ms-animation-timing-function: 		ease-in;
		-ms-animation-iteration-count: 		1;
		-ms-animation-name: 				fadeIn2;
		
		-o-animation-duration: 				2.5s;
		-o-animation-timing-function: 		ease-in;
		-o-animation-iteration-count: 		1;
		-o-animation-name: 					fadeIn2;
		
		-animation-duration: 				2.5s;
		-animation-timing-function: 		ease-in;
		-animation-iteration-count: 		1;
		-animation-name: 					fadeIn2;
	}


.text1
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		text-align:				center;
		vertical-align:			middle;
		color: 					#000000;
	}


.update_hr
	{
		color:					#888888;
		background-color:		#888888;
		border:					none;
		height:					1px;
		text-align:				left;
		width:					calc(var(--menuwidth)*1.74);
		margin-top: 			var(--value25);
		margin-right: 			40px;
		margin-bottom: 			var(--value25);
		margin-left: 			0px;
	}


.update_text1
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		line-height:			160%;
		text-align:				left;
		vertical-align:			middle;
		color: 					#CCCCCC;
		padding-left:			var(--value25);
	}


.update_heading
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			bold;
		letter-spacing:			calc(var(--menuls)*3);
		text-align:				left;
		vertical-align:			top;
		color: 					#FFFFFF;
	}


.update_subheading
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			bold;
		letter-spacing:			var(--menuls);
		text-align:				left;
		vertical-align:			top;
		color: 					#99FF99;
	}


.update_title_off
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		text-align:				left;
		vertical-align:			top;
		color: 					#00FFFF;
		cursor:					pointer;

		-webkit-transition: 	color 0.8s ease-out;
		-o-transition: 			color 0.8s ease-out;
		-ms-transition: 		color 0.8s ease-out;
		transition: 			color 0.8s ease-out;
	}


.update_title_off:hover
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		text-align:				left;
		vertical-align:			top;
		color: 					#00FF00;
		cursor:					pointer;
		
		-webkit-transition: 	color 0.1s ease-in;
		-o-transition: 			color 0.1s ease-in;
		-ms-transition: 		color 0.1s ease-in;
 		transition: 			color 0.1s ease-in;
	}


.update_title_on
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--menufs);
		font-weight: 			normal;
		letter-spacing:			var(--menuls);
		text-decoration:		none;
		text-align:				left;
		vertical-align:			top;
		color: 					#FFCC00;
		cursor:					pointer;
	}


.updates_hide
	{
		top:					var(--u_hide_top);
		left:					var(--u_hide_left);
		width:					calc(var(--menuwidth)*0.55);
		height:					calc(var(--value25)*1.2);
		overflow-y:				hidden;

		border-radius: 			var(--value25) 0px 0px 0px;
		-webkit-border-radius: 	var(--value25) 0px 0px 0px;

		-webkit-transition: 	all 1.5s ease-out;
		-moz-transition: 		all 1.5s ease-out;
		-o-transition: 			all 1.5s ease-out;
		-ms-transition: 		all 1.5s ease-out;
		transition: 			all 1.5s ease-out;
	}


.updates_show
	{
		top:					var(--u_show_top);
		left:					var(--u_show_left);
		width:					var(--u_show_left);
		height:					calc(var(--menuwidth)*1);
		overflow-y:				visible;

		border-radius: 			var(--value25) 0px var(--value25) 0px;
		-webkit-border-radius: 	var(--value25) 0px var(--value25) 0px;

		-webkit-transition: 	all 1.5s ease-out;
		-moz-transition: 		all 1.5s ease-out;
		-o-transition: 			all 1.5s ease-out;
		-ms-transition: 		all 1.5s ease-out;
		transition: 			all 1.5s ease-out;
	}


.youtube1
	{
		position:				absolute;
		height:					var(--value30);
		max-height:				var(--value30);
		z-index:				20;
		margin:					0 auto;
		display:				table-cell; 
		vertical-align:			bottom;
		opacity: 				0.5;
	}


.youtube1:hover
	{
		position:				absolute;
		height:					var(--value30);
		max-height:				var(--value30);
		z-index:				20;
		margin:					0 auto;
		display:				table-cell; 
		vertical-align:			bottom;
		opacity: 				0.9;
	}


/* ----------------   AUDIO PLAYER   -------------------*/


.autoplay_off
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--autofs);
		font-weight: 			normal;
		letter-spacing:			var(--autols);
		text-align:				center;
		vertical-align:			middle;
		padding-top:			var(--value5);
		color: 					#AAAAAA;
		cursor:					pointer;

		-webkit-transition: 	color 0.8s ease-out;
		-o-transition: 			color 0.8s ease-out;
		-ms-transition: 		color 0.8s ease-out;
		transition: 			color 0.8s ease-out;
	}


.autoplay_off:hover
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--autofs);
		font-weight: 			normal;
		letter-spacing:			var(--autols);
		text-align:				center;
		vertical-align:			middle;
		padding-top:			var(--value5);
		color: 					#FFCC00;
		cursor:					pointer;

		text-shadow: 			0px 0px 4px #FFCC00;
		-moz-text-shadow: 		0px 0px 4px #FFCC00;
		-webkit-text-shadow: 	0px 0px 4px #FFCC00;

		-webkit-transition: 	color 0.8s ease-out;
		-o-transition: 			color 0.8s ease-out;
		-ms-transition: 		color 0.8s ease-out;
		transition: 			color 0.8s ease-out;
	}


.autoplay_on
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--autofs);
		font-weight: 			normal;
		letter-spacing:			var(--autols);
		text-align:				center;
		vertical-align:			middle;
		padding-top:			var(--value5);
		color: 					#FFCC00;
		cursor:					pointer;

		text-shadow: 			0px 0px 4px #FFCC00;
		-moz-text-shadow: 		0px 0px 4px #FFCC00;
		-webkit-text-shadow: 	0px 0px 4px #FFCC00;

		-webkit-transition: 	color 0.8s ease-out;
		-o-transition: 			color 0.8s ease-out;
		-ms-transition: 		color 0.8s ease-out;
		transition: 			color 0.8s ease-out;
	}


.autoplay_on:hover
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--autofs);
		font-weight: 			normal;
		letter-spacing:			var(--autols);
		text-align:				center;
		vertical-align:			middle;
		padding-top:			var(--value5);
		color: 					#AAAAAA;
		cursor:					pointer;

		-webkit-transition: 	color 0.8s ease-out;
		-o-transition: 			color 0.8s ease-out;
		-ms-transition: 		color 0.8s ease-out;
		transition: 			color 0.8s ease-out;
	}


#audio_player
	{
		display:				block;
		width:					var(--playerwidth);
		height:					var(--value50);
		outline:				none;
	}