:root
{
		--atsfont1:			'Raleway', sans-serif;
		--colour_steel:		#868B91; 	/* Medium Blue Grey */
		--colour_storm:		#767B81;	/* Darker Blue Grey */
		--colour_cloud:		#9BA0A7;	/* Lighter Blue Grey */
		--colour_fog:		#A9A8A6;	/* Medium Light Grey */
		--colour_bone:		#E6E6E6;	/* Very Light Grey */
		--colour_red:		#DD0000;	/* Red */
		--colour_green:		#33CC33;	/* Green as used in Footer Links */
		--colour_lime:		#99FF00;	/* Lime as used in Pad Links */
}


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


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


BODY
	{
		height:					100%;
		background-color: 		#FFFFFF;
		margin: 				0px;
		padding:				0px;
		overflow:				hidden;
		-webkit-font-smoothing:	antialiased;
	}


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


DIV
	{
		position:				absolute;
		overflow: 				hidden;
		display: 				block;
		margin:					0px;
		padding:				0px;
		scrollbar-color: 		var(--colour_cloud) var(--colour_storm); /* Track Colour & ScrollBar Colour (Thumb & Button not assignable on Firefox) */
	}


/* -------------------------------------------------------------------------- */
/* 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: 		var(--colour_storm); /* Track Colour */
	}


DIV::-webkit-scrollbar-thumb
	{
		background:				var(--colour_cloud); /* ScrollBar & Thumb Colour */
	}


DIV::-webkit-scrollbar-button
	{
		background:				var(--colour_bone); /* Button Colour */
	}


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


FORM
	{
		margin: 				0px;
	}


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


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


#header
	{
		background-color: 		#FFFFFF;
		z-index:				30;
		box-shadow: 			0px 0px var(--value20) rgba(0, 0, 0, 0.6);
		-webkit-box-shadow: 	0px 0px var(--value20) rgba(0, 0, 0, 0.6);
	}


#footer
	{
		background-color: 		#FFFFFF;
		z-index:				30;
		box-shadow: 			0px 0px var(--value10) rgba(0, 0, 0, 0.6);
		-webkit-box-shadow: 	0px 0px var(--value10) rgba(0, 0, 0, 0.6);
	}


#pager
	{
		background-color: 		var(--colour_steel);
		overflow-y:				scroll;
		z-index:				10;
	}


#pager_pads
	{
		position:				relative;
		padding:				var(--value50); /* Padding prevents clipping of the Pic Div Shadows */
		z-index:				15;
	}


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


.fitwindow
{
		max-width:				var(--comfywidth);
		max-height:				var(--comfyheight);
}


.pic_gallery_div
	{
		position:				relative;
		float:					left;
		border:					none;
		width:					var(--value400);
		height:					var(--padtotalh);
		margin:					0px var(--value50) 0px 0px;
		padding:				0px;
		background-color: 		#000000;
		border-radius: 			var(--value30);
		-webkit-border-radius: 	var(--value30);
		box-shadow: 			0px 0px var(--value20) rgba(0, 0, 0, 0.6);
		-webkit-box-shadow: 	0px 0px var(--value20) rgba(0, 0, 0, 0.6);
	}


.pic_gallery_table
	{
		border-collapse: 		collapse;
		margin:					0px;
		padding:				0px;
		width:					100%;
		height:					100%;
		vertical-align:			top;
	}


.pic_gallery_img
	{
		width:					var(--value400);
		height:					var(--value400);
		vertical-align:			top;
	}


.pic_gallery_img:hover
	{
		width:					var(--value400);
		height:					var(--value400);
		vertical-align:			top;
		cursor:					pointer;
	}


.pic_gallery_head
	{
		background-color: 		var(--colour_fog);
		width:					var(--value400);
		height:					var(--padtitleh);
		vertical-align:			middle;
		text-align:				center;
	}


.pic_gallery_br
	{
		float:					left;
		width:					var(--padswidth);
		height:					var(--value50);
	}


.pic_gallery_pop_div
	{
		display:				none;
		position:				absolute;
		float:					left;
		border:					solid 1px var(--colour_bone);
		left:					var(--value20);
		top:					var(--value20);
		width:					var(--padpopwh);
		height:					var(--padpopwh);
		background-color: 		var(--colour_cloud);
		border-radius: 			var(--value10) var(--value10) 0px 0px;
		-webkit-border-radius: 	var(--value10) var(--value10) 0px 0px;
		opacity:				0.95;
	}


.pic_gallery_pop_table
	{
		border-collapse: 		collapse;
		margin:					0px;
		width:					100%;
		height:					100%;
		vertical-align:			top;
	}


.pic_gallery_pop_td
	{
		padding-top:			var(--value20);
		width:					100%;
		height:					100%;
	}


/* Pad Text & Links */
.text1
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		text-decoration:		none;
		letter-spacing:			var(--text1ls);
		color: 					#FFFFFF;
	}


.text1_link
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		text-decoration:		none;
		letter-spacing:			var(--text1ls);
		color: 					var(--colour_lime);
		cursor:					pointer;
	}


.text1_link:hover
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--text1fs);
		font-weight: 			normal;
		text-decoration:		none;
		letter-spacing:			var(--text1ls);
		color: 					var(--colour_red);
		cursor:					pointer;
	}


/* Footer Text & Links */
.text2
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--text2fs);
		font-weight: 			normal;
		text-decoration:		none;
		letter-spacing:			var(--text2ls);
		color: 					var(--colour_storm);
	}


.text2_link
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--text2fs);
		font-weight: 			normal;
		text-decoration:		none;
		letter-spacing:			var(--text2ls);
		color: 					var(--colour_green);
	}


.text2_link:hover
	{
		font-family: 			var(--atsfont1);
		font-size: 				var(--text2fs);
		font-weight: 			normal;
		text-decoration:		none;
		letter-spacing:			var(--text2ls);
		color: 					var(--colour_red);
		cursor:					pointer;
	}