/****************************** nielsoft.uk **********************/

/****************************** HEAD ****************************
		head { 	-webkit-overflow-scrolling:touch;
			overflow: auto;
			}*/

/****************************** BODY *****************************/ 
		body { 	background-color: #696969; /*rgb(80,100,80);*/
			text-align: center;
			color: white;
			/*-webkit-overflow-scrolling:touch;
			overflow: auto;*/
				
			}

/****************************** FONTS **************************
		@font-face {
    font-family: 'Special Elite';
    
				src: url('fonts/SpecialElite-webfont.eot');
    
				src: url('fonts/SpecialElite-webfont.eot?#iefix') format('embedded-opentype'),
         				     
				     url('fonts/SpecialElite-webfont.woff') format('woff'),
         
				     url('fonts/SpecialElite-webfont.ttf') format('truetype'),
         
				     url('fonts/SpecialElite-webfont.svg#special_eliteregular') format('svg');
    
				font-weight: normal;
    
				font-style: normal;

}



		@font-face {
    font-family: 'Perfect DOS VGA 437 Win';
 
				src: url('fonts/Perfect DOS VGA 437 Win.ttf') format('truetype');		
				font-weight: normal;
    
				font-style: normal;

}



		@font-face {
    font-family: 'Perfect DOS VGA 437';
 
				src: url('fonts/Perfect DOS VGA 437.ttf') format('truetype');				
				font-weight: normal;
    
				font-style: normal;

}



		@font-face {
    font-family: 'More Perfect DOS VGA';
 
				src: url('fonts/MorePerfectDOSVGA.ttf') format('truetype');				
				font-weight: normal;
    
				font-style: normal;

}

 

******************************************************************/

		@font-face {
    font-family: 'Less Perfect DOS VGA';
 
				src: url('fonts/LessPerfectDOSVGA.ttf') format('truetype');				
				font-weight: normal;
    
				font-style: normal;

}

		

		@font-face {	font-family: 'Arial';
				src: url('fonts/arial.ttf') format('truetype');
				font-weight: normal;
				font-style: normal;}

		@font-face {	font-family: 'Times New Roman';
				src: url('fonts/times.ttf') format('truetype'); 
				font-weight: normal;    
				font-style: normal;}

		@font-face {	font-family: 'Courier New';
				src: url('fonts/cour.ttf') format('truetype');
				font-weight: normal;    
				font-style: normal;}

		@font-face {	font-family: 'Inkpen2 Script';
				src: url('fonts/INK2SCRI.TTF') format('truetype');
				font-weight: normal;
				font-style: normal;}

		*	{font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;
			font-size: 16px;}

iframe:focus 	{
    		outline: none;
		}

iframe[seamless] {
    		display: block;
		} 

/*	Sidebar link */
	a {	text-decoration: none;
		color: white;
		font-size: 16px;}

/*	Inline link */
	a.text  {text-decoration: underline; 
		color: black;
		font-size: 16px;}

/*	Inline link */
	a.cubejazz {
		text-decoration: underline; 
		color: white;
		font-size: 20px;
		font-family: InkPen2 Script, Less Perfect DOS VGA, Times New Roman, Arial, Courier New;
		}
	
	p {	font-family: Times New Roman;
		color: black;
		font-size: 16px;
		}

	p#hilite {
		background-color: Black;
		}

table#thumbnails{
    	/*background-color: white;*/
	border-spacing: 8px 5px;
	border-top : 0px;
  	}
  
table#thumbnails tr td img{
    	cursor: pointer;
 	}

#list p {font: arial;
	font-size: 14px;
	}

#mos p {font: arial;
	font-size: 12px;
	/*position: absolute;
	top: 0px; left: 0px;*/
	}

audio { width: 390px; height: 30px; display: block; }

.controls video { height: 50px; display: block; }


	.fs_12b {	color: black;
			font-size: 12px;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_16b_DOS {	color: black;
			font-size: 16px;
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_16w_DOS {	color: white;
			font-size: 16px;
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_16w_InkP {	color: white;
			font-size: 16px;
			font-family: InkPen2 Script, Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_16w {	color: white;
			font-size: 16px;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_16b_bold {	color: black;
			font-size: 16px;
			font-weight: bold;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_18b {	color: black;
			font-size: 18px;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_18b_bold {	color: black;
			font-size: 18px;
			font-weight: bold;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_18b_DOS {	color: black;
			font-size: 18px;
			font-weight: bold;
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_18b_DOSnorm {	color: black;
			font-size: 18px;
			/*font-weight: bold;*/
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_18w {	color: white;
			font-size: 18px;
			font-weight: bold;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_18w_DOS {	color: white;
			font-size: 18px;
			font-weight: normal;
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}		

	.fs_24b {	color: black;
			font-size: 24px;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_32b {	color: black;
			font-size: 32px;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_24b_DOS {	color: black;
			font-size: 24px;
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_24w {	color: white;
			font-size: 24px;
			font-family: Times New Roman, Arial, Courier New;}

	.fs_24w_DOS {	color: white;
			font-size: 24px;
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_24w_DOS_green {	color: black;
			font-size: 24px;
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_24r_construct {	color: Firebrick;
			font-size: 24px;
			font-family: Less Perfect DOS VGA, Times New Roman, Arial, Courier New;}

	.fs_32b_DOS {
		color: black;
	  	font-size: 32px;
		font-family: Less Perfect DOS VGA, Times New Roman;
		}

	.fs_48b {	color: black;
			font-size: 48px;
			font-family: Times New Roman, Arial, Courier New;}			

/************************ WRAPPER (Long changed from 1140 to 1165 to match ipad2 length ****************************/ 
	#wrapper {	position: relative;
			left: 0px;
			top: 0px;
			width: 960px; 
			height: 740px;
			/*background-color: red;*/
			background-color: #393939;
			/*background-color: DarkGreen;*/
			margin: 0px auto 0px auto;
			text-align: left;}

	#wrapper_long {	position: relative;
			left: 0px;
			top: 0px;
			width: 960px; 
			height: 1165px;
			/*background-color: red;*/
			background-color: #393939;
			/*background-color: DarkGreen;*/
			margin: 0px auto 0px auto;
			text-align: left;}

/************************ LOGO 220x150 (approx 3x2) TO FIT 960 GRID *******************/
	#logo {
	  	position: absolute; 
	  	left : 10px;
	  	top : 10px;
	  	width : 220px;
	  	height : 150px;
		z-index: 5;}

	#header{
		background-color : #FFFFFF;/*Firebrick;*/
		text-align: left;
	  	position: absolute; 
	  	left: 240px;
	  	top: 10px;
	  	width : 710px;
	  	height : 150px;
	  	/*padding : 10px;*/
		/*border-left : 10px solid Firebrick;*/
		z-index: 3;}

	.header_border {position: absolute; 
			top: 5px; left: 5px; width : 695px; height : 135px;
			border: 2px solid #000000;
			/*background-color: blue;*/
			}

	.header_box {	position : absolute;
			text-align : left;
			font-size: 48px;
			font-family: Times New Roman;
			color: black;
			/*background-color: #e0e0e0;*/
			/*border: 2px solid #696969;*/
			top : 20px; left : 10px; width: 685px; height: 50px;
			}

	.header_retro_box {
		position: absolute;
		text-align : left; 
		font-size: 32px;
		font-family: Less Perfect DOS VGA;
	  	color: black;
		/*background-color: #e0e0e0;*/
		/*border: 2px solid #696969;*/
		top: 90px; left: 10px; width: 685px; height: 35px;
		}

	.header_copy_box {
		position: absolute;
		text-align : left; 
		font-size: 24px;
		font-family: Less Perfect DOS VGA;
	  	color: black;
		/*background-color: #e0e0e0;*/
		/*border: 2px solid #696969;*/
		top: 110px; left: 10px; width: 685px; height: 25px;
		}

	.header_NielSoft {
		position: absolute; 
	  	left: 0px;
	  	top: -30px;
		font-family: Times New Roman;
	  	font-size: 48px;
		font-weight: bold;
	  	color: black;
		background-color : #FFFFFF;
		} 

	.header_retro {
		position: absolute; 
	  	left: 0px;
	  	top: 60px;
		font-family: Less Perfect DOS VGA;
	  	font-size: 32px;
	  	color: black;
		background-color : #FFFFFF;
		}

/******		CANVAS STYLES		******/	
	#canvas {
	  	position: absolute; 
	  	left : 160px;
	  	top : 170px;
	  	width : 790px;	
	  	height : 500px;
	  	background-color : #f9f9f9;
		}

	#canvas_nobackcol {
	  	position: absolute; 
	  	left : 160px;
	  	top : 170px;
	  	width : 790px;	
	  	height : 500px;
	  	}

/***** See below under ipad fix ***
	#canvas_pdf {
	  	position: absolute; 
	  	left : 160px;
	  	top : 170px;
	  	width : 790px;	
	  	height : 570px;
	  	background-color : #f9f9f9;
		}
****/

	#canvas_home {
	  	position: absolute; 
	  	left : 160px;
	  	top : 170px;
	  	width : 390px;	
	  	height : 500px;
	  	background-color : #f9f9f9;
		}

	#canvas_slider {
	  	position: absolute; 
	  	left : 560px;
	  	top : 170px;
	  	width : 390px;	
	  	height : 500px;
	  	/*background-color : #393939; */
		}

	#canvas_dark {
	  	position: absolute; 
	  	left : 160px;
	  	top : 170px;
	  	width : 790px;	
	  	height : 500px;
	  	background-color : #393939;
		}

	#canvas_long {
	  	position: absolute; 
	  	left : 160px;
	  	top : 170px;
	  	width : 790px;	
	  	height : 925px;
	  	/*background-color : #f9f9f9;*/ /*#FFFFFF;*/
		}

	#canvas_dark_long {
	  	position: absolute; 
	  	left : 160px;
	  	top : 170px;
	  	width : 790px;	
	  	height : 925px;
	  	background-color : #393939;
		}

	.canvas_left {
	  	position: absolute; 
	  	left : 0px;
	  	top : 0px;
	  	width : 390px;	
	  	height : 505px;
	  	/*background-color : f9f9f9;*/ /*#FFFFFF;*/
		}

	.canvas_left_lower {
	  	position: absolute; 
	  	left : 0px;
	  	top : 251px;
	  	width : 390px;	
	  	height : 255px;
	  	/*background-color : #f9f9f9;*/ /*#FFFFFF;*/
		}

	.nslife_gosper {
	  	position: absolute; 
	  	left : 53px;
	  	top : 327px;
	  	width : 179px;	
	  	height : 130px;
	  	background-color : black; /*f9f9f9;*/ /*#FFFFFF;*/
		}

	#audio_box {
		position : absolute;
		color: black;
		background-color: black;
		/*background-color: rgb(220,220,220); */
		top : 455px; left : 0px; width : 390px; height : 30px; 
		}

	.canvas_right {
	  	position: absolute; 
	  	left : 400px;
	  	top : 0px;
	  	width : 390px;	
	  	height : 505px;
	  	/*background-color : #f9f9f9;*/ /*#FFFFFF;*/
		}

	.canvas_right_lower {
	  	position: absolute;
		text-align: center; /* added 17 Nov 2019 */ 
	  	left : 400px;
	  	top : 251px;
	  	width : 390px;	
	  	height : 255px;
	  	/*background-color : #f9f9f9;*/ /*#FFFFFF;*/
		}

	.canvas_right_lower_left {
	  	position: absolute; 
	  	left : 400px;
	  	top : 251px;
	  	width : 195px;	
	  	height : 255px;
	  	/*background-color : #f9f9f9;*/ /*#FFFFFF;*/
		}

	.canvas_right_lower_right {
	  	position: absolute; 
	  	left : 595px;
	  	top : 251px;
	  	width : 195px;	
	  	height : 255px;
	  	/*background-color : #f9f9f9;*/ /*#FFFFFF;*/
		}

	.canvas_right_upper {
	  	position: absolute; 
	  	left : 400px;
	  	top : 0px;
	  	width : 390px;	
	  	height : 250px;
	  	/*background-color : #f9f9f9;*/ /*#FFFFFF;*/
		}
	

	.canvas_bigimage {
	  	position: absolute; 
	  	left : 139px; /*160*/
	  	top : 89px; /*105*/
	  	width : 640px;	/*580*/
	  	height : 400px; /*370*/
		}

	.canvas_bigvideo {
	  	position: absolute; 
	  	left : 139px; /*160*/
	  	top : 89px; /*105*/
	  	width : 640px;	/*580*/
	  	height : 400px; /*370*/
		}

	.clear_canvas_bigimage {
		position: absolute;
		left : 135px;
		top : 120px;
		width : 655px;
		height : 435px;
		z-index : 0;
		background-color : #f9f9f9;
		}

	.clear_canvas_bigvideo {
		position: absolute;
		left : 135px;
		top : 120px;
		width : 655px;
		height : 435px;
		z-index : 0;
		background-color : #f9f9f9;
		}

/****************** canvas_bigimage image & video *******************/

	#canvas_bigimage_images {
	  	position: absolute; 
	  	left : 140px; /*160*/
	  	top : 110px; /*105*/
	  	width : 640px;	/*580*/
	  	height : 400px; /*370*/
		background-color : Darkgreen;
		z-index : 2;
		}

	#canvas_bigimage_videos {
	  	position: absolute; 
	  	left : 140px; /*160*/
	  	top : 110px; /*105*/
	  	width : 640px;	/*580*/
	  	height : 400px; /*370*/
		background-color : Firebrick;
		z-index : 1;
		}

	#canvas_bottom {
	  	position: absolute; 
	  	left : 160px;
	  	top : 680px;
	  	width : 790px;	
	  	height : 415px;
	  	background-color: #f9f9f9;
		}

	.canvas_grabs {
	  	position: absolute; 
	  	left : 1px;
	  	top : 1px;
	  	width : 788px;	
	  	height : 498px;
	  	background-color : #F9F9F9;
		}

	.canvas_grabs_image {
	  	position: absolute; 
	  	left : 1px;
	  	top : 1px;
	  	width : 788px;	
	  	height : 498px;
	  	/*background-color : #F9F9F9;*/
		}

	.canvas_grabs_video {
	  	position: absolute; 
	  	left : 1px;
	  	top : 90px;
	  	width : 788px;	
	  	height : 498px;
	  	/*background-color : #F9F9F9;*/
		}

	.canvas_text {
	  	position: absolute; 
	  	left : 10px;
	  	top : 10px;
	  	width : 770px;	
	  	height : 480px;
	  	background-color : #FFFFFF;
		color: black;
		font-family: Times New Roman;
		font-size: 32px;
		font-weight: normal;
		z-index: 1;}

	.canvas_text_long {
	  	position: absolute; 
	  	left : 10px;
	  	top : 10px;
	  	width : 770px;	
	  	height : 880px;
	  	background-color : #FFFFFF;
		color: black;
		font-family: Times New Roman;
		font-size: 32px;
		font-weight: normal;
		z-index: 1;}

	.canvas_text_scrolloff {
	  	position: absolute; 
	  	left : 10px;
	  	top : 10px;
	  	width : 770px;	
	  	height : 480px;
	  	background-color : #FFFFFF;
		color: black;
		font-family: Times New Roman;
		font-size: 32px;
		font-weight: normal;
		z-index: 1;}


/*************** webkit and overflow needed to allow scrolling on iPad ************/

/************ make sure iframe height is 10px less than container ********/
/************ to avoid IE introducing 2 sets of scrollbars !!!!   ********/

	.life_text {
	  	position: absolute; 
	  	left : 140px;
	  	top : 0px;
	  	width : 650px;	
	  	height : 500px;
		-webkit-overflow-scrolling: touch;	
		overflow: auto;				
	  	background-color : #e9e9e9;
		/*color: black;
		font-family: Times New Roman;
		font-size: 32px;
		font-weight: normal;*/
		}

/************** this works but puts extra scroll bars on normal desktop browsers ******/
/*
	.life_text iframe {
		width: 100%;
		height: 100%;
		}
*/

/************ make sure iframe height is 10px less than container ********/
/************ to avoid IE introducing 2 sets of scrollbars !!!!   ********/

	.mos_text {
	  	position: absolute; 
	  	left : 310px;
	  	top : 0px;
	  	width : 480px;	
	  	height : 500px;
		-webkit-overflow-scrolling: touch;   	
		overflow: auto;				
	  	background-color : #e9e9e9;
		/*color: black;
		font-family: Times New Roman;
		font-size: 32px;
		font-weight: normal;*/
		}

	#canvas_bottom_text {
	  	position: absolute; 
	  	left : 160px;
	  	top : 680px;
	  	width : 790px;	
	  	height : 415px;
		-webkit-overflow-scrolling: touch;   	
		overflow: auto;	
	  	background-color: #f9f9f9;
		}

	#canvas_pdf {
	  	position: absolute; 
	  	left : 160px;
	  	top : 170px;
	  	width : 790px;	
	  	height : 570px; // Fill the canvas
		-webkit-overflow-scrolling: touch;   	
		overflow: auto;	
	  	background-color : #f9f9f9;
		}


/************** end of containers for scrolling on iPad *************/

	#footer {
	  	position: absolute; 
	  	left : 160px;
	  	top : 680px;
	  	width : 790px;	
	  	height : 30px; /* total height+padding = 50px */
	  	padding-top : 10px;
		padding: 10px 0px 10px 0px;
	  	text-align: center;
	  	/* background-color : rgb(200,16,46); *//* Pantone 186c, #c8102e, Welsh Flag Red */
		background-color : rgb(178,34,34); /* CSS 'FireBrick' */
		z-index: 2;}

	#footer_green {
	  	position: absolute; 
	  	left : 160px;
	  	top : 680px;
	  	width : 790px;	
	  	height : 30px; /* total height+padding = 50px */
	  	padding-top : 10px;
		padding: 10px 0px 10px 0px;
	  	text-align: center;
		background-color : Darkgreen;
		z-index: 0;}

	#footer_new {
	  	position: absolute; 
	  	left : 160px;
	  	top : 680px;
	  	width : 790px;	
	  	height : 30px; /* total height+padding = 50px */
	  	padding-top : 10px;
		padding: 10px 0px 10px 0px;
	  	text-align: center;
		background-color : White; /* FireBrick; */
		z-index: 2;}

	#footer_long {
	  	position: absolute; 
	  	left : 160px;
	  	top : 1105px;
	  	width : 790px;	
	  	height : 30px; /* total height+padding = 50px */
	  	padding-top : 10px;
		padding: 10px 0px 10px 0px;
	  	text-align: center;
	  	background-color : Firebrick;
		z-index: 2;}

	#footer_green_long {
	  	position: absolute; 
	  	left : 160px;
	  	top : 1105px;
	  	width : 790px;	
	  	height : 30px; /* total height+padding = 50px */
	  	padding-top : 10px;
		padding: 10px 0px 10px 0px;
	  	text-align: center;
	  	background-color : DarkGreen;
		z-index: 2;}

	#footer_new_long {
	  	position: absolute; 
	  	left : 160px;
	  	top : 1105px;
	  	width : 790px;	
	  	height : 30px; /* total height+padding = 50px */
	  	padding-top : 10px;
		padding: 10px 0px 10px 0px;
	  	text-align: center;
	  	background-color : Firebrick;
		z-index: 2;}

	.footer_border {
	  	position: absolute; 
		top: 5px; left: 5px; width : 775px; height : 35px;
		border: 2px solid #000000;
		/*background-color: blue;*/
		z-index: 1;
		}

	#sidebar {
		/*font-family: Times New Roman;*/
	  	font-size: 18px;
	  	color: white;
	  	position: absolute; 
	  	left : 10px;
	  	top : 170px;
	  	width : 140px;
	  	height : 560px;
	  	/*background-color : rgb(0,177,64);*/ /* Pantone 354C, #00b140, Welsh Flag Green */
		background-color : rgb(0,100,0); /* DarkGreen is 0,100,0 */
		z-index: 1;}

	#sidebar_long {
		/*font-family: Times New Roman;*/
	  	font-size: 18px;
	  	color: white;
	  	position: absolute; 
	  	left : 10px;
	  	top : 170px;
	  	width : 140px;
	  	height : 985px;
	  	background-color : Darkgreen;
		/*background-color : green;*/
		z-index: 1;}


	.sidebar_box {	text-align : center;
			position : absolute;
			font-size: 18px;
			/*background-color: #696969;*/
			top : 5px; left : 5px; width: 125px; height: 545px;
			border: 2px solid #000000;
			z-index : 2;}

	.copyright_sidebar {text-align : center;
			position : absolute;
			top : 425px; left : 0px; width: 125px; height: 110px;
			font-size: 16px;
			font-weight: bold;
			font-family: Times New Roman, Arial, Courier New;
			z-index : 2;}

	.sidebar_000webhost {text-align : center;
			     position : absolute;
			     top : 530px; left: 30px;
			     z-index: 3;}

	.sidebar_box_long {	text-align : center;
			position : absolute;
			font-size: 18px;
			/*background-color: #696969;*/
			top : 5px; left : 5px; width: 125px; height: 970px;
			border: 2px solid #000000;
			z-index : 2;}

	.copyright_sidebar_long {text-align : center;
			position : absolute;
			top : 860px; left : 0px; width: 125px; height: 110px;
			font-size: 16px;
			font-weight: bold;
			font-family: Times New Roman, Arial, Courier New;
			z-index : 2;}