<style>

	
	html, body { width:100%; height:100%; color:#ffff00; user-select:none; overflow:hidden; white-space:nowrap; } 

	h1      { color: #ff4003; font-size: 20px; }
	h1::first-letter { font-size: 25px; color: #ff6000; }

      	a 	{ color: 	#ccc; 	text-decoration: none; }   	
      	a:hover { color: 	#ff3b03; }

     	hr { border-color: #555; } 

	.td     { 
		width:		40px; 
		height:		30px; 
		border: 	0px solid #333; 
		margin:		20px;
	}

	.myCanvas1 {
                background:	#1080ff; 
		position:	absolute; 
		top:		20px; 
		left:		20px; 
		border-radius:	10px; 
		box-shadow:	10px 10px 0px 0px rgba(0,190,190,1.0);
	}
	
	.area1 {
		z-index:	12;
		position:	absolute;
		background:	#999999;
		user-select:	none;
		margin: 	1% 1% 1% 1%;
		padding:	1% 1% 1% 1%;
		border:		1px solid #0ff;
		border-radius:	10px;
		color:		#ff4000;
		font-size:	25px;
		font-weight:	700;
		font-family:	"arial";
		text-align:	center;
		box-shadow:	10px 10px 0px 0px rgba(0,90,90,0.70);
		display:	none;
	}

	.area1 .controls  { position: relative; top: 50%; }


	.area1 .controls a {
 		position: 	absolute;
 		display: 	inline-block;
 		text-decoration: none;
 		color: 		#eee;
 		font-size: 	1em;
 		width: 		10px;
 		height: 	10px;
	}
	
	.area1 .controls a.left  { left:  0px; }
		
	.area1 .controls a.right { right: 0px; }

	.area1 .controls a.x     { top: -25px; right: 0px; color:#ff0000; text-shadow: 2px 2px #777777; }

      	.area2 	{
        	z-index: 	10;
        	position: 	absolute;
		top:    	0px;
		right:  	0px;
        	margin: 	30px;
      		padding: 	10px;
        	border: 	2px solid rgba(20, 20, 20, 0.6);  
        	background: 	rgba(30, 30, 30, 0.1);
        	color: 		#ff3B03;
		font-family: 	sans-serif;
		font-size:	8pt;
        	text-shadow: 	0px 1px 0px rgb(40, 40, 40);
        	user-select:	none;	      
        	width: 		266px;	
		overflow:	hidden;
		white-space:	nowrap;
      	}

	.area3 {
		z-index:	12;
		position:	absolute;
		background:	transparent;
		user-select:	none;
		margin: 	1% 1% 1% 1%;
		padding:	1% 1% 1% 1%;
		border:		1px solid #0ff;
		border-radius:	10px;
		color:		#ff4000;
		font-size:	16px;
		font-weight:	700;
		font-family:	"arial";
		text-align:	center;
	}
	
	.area5 {
		z-index:	12;
		position:	absolute;
		background:	transparent;
		user-select:	none;
		margin: 	1% 1% 1% 1%;
		padding:	1% 1% 1% 1%;
		border:		1px solid #0ff;
		border-radius:	10px;
		color:		#ff4000;
		font-size:	25px;
		font-weight:	700;
		font-family:	"arial";
		text-align:	center;
	}

	#in1, #in2, #in3, #in4 { 
		margin:		1px 1px 1px 1px; 
		background:	#444444; 
		width:		40px;
		height:		16px;
		color:		#ffff00; 
		border-color:	#550000 #ff0000 #ff0000 #550000; 
		border-style:	inset ridge ridge inset; 
		padding: 	2px 0px 4px 8px;
                font-size:	14px;
                font-weight:	500;
	}

	#myImg1	{
		user-select:	none; 
		position: 	absolute; 
	}
	
	#myImg1:hover { cursor: pointer; }

	#myImg2	{
		user-select:	none; 
		position: 	absolute; 
	}

	.smallim { width:40px; height:30px; }

	.button  {
		z-index:	12;
		position:	absolute;
		background:	#007777;
		user-select:	none;
		margin: 	0% 0% 0% 0%;
		padding:	0% 0% 0% 0%;
		border:		1px solid #0ff;
		border-radius:	4px;
		color:		#000000;
		font-size:	10px;
		font-weight:	600;
		font-family:	"arial";
		text-align:	center;
	}

	.button:hover { background: #ff5000; color: #ffffff; }

	.myp {
		z-index:	12;
		position:	absolute;
		background:	#transparent;
		visibility: 	hidden;
		margin: 	0% 0% 0% 0%;
		padding:	0% 0% 0% 0%;
		border:		0px solid #0ff;
		border-radius:	0px;
		color:		#000000;
		font-size:	10px;
		font-weight:	600;
		font-family:	"arial";
		text-align:	center;
	}
		
	#myAudio { 	
	   z-index:		10;	
	   position:		fixed;
	   right:		15px;
	   margin:		0px 0px 0px 0px;
	   background:		#00bbbb;
	   padding: 		1px;
	   width:		270px; 
  	   box-shadow:		4px 4px 4px 0px rgba(0,90,90,0.60);
  	   border-radius:	12px;
  	   transform:		scale(0.75);
	}	

.pano {
 z-index: 15; width: 99%;
 height: 99%;
 margin: 0 auto;
 cursor: move;
 user-select: none;}

.pano .controls   {
 position: relative;
 top: 40%;
}

.pano .controls a {
 position: absolute;
 display: inline-block;
 text-decoration: none;
 color: #eee;
 font-size: 1em;
 width: 10px;
 height: 10px;
}
		
.pano .controls a.left {
 left: 10px;
}
		
.pano .controls a.right  {
 right: 15px;
}

.pano .controls a.x {
 right: 5px; top:-220px; color:#ff0000; text-shadow: 2px 2px #777777;
}
		
.pano.moving .controls a {
 opacity: 0.4;
 color: #eee;
}
	


	#myVideo { 
	   z-index:		10;	
	   position:		absolute;
	   background:		#00bbbb;
	   margin: 		10px 10px 10px 10px;

	   width:		400px; 
  	   box-shadow:		8px 8px 5px 0px rgba(90,90,90,0.75);
  	   border-radius:	15px;
  	   transform:		scale(1.7, 1.7);
	}

	#VideoDiv {
	   display:		none;
	   background:		#00bbbb;
	   z-index:		10;	
	   position:		absolute;
	   padding: 		1px;
	   width:		460px;
	   margin:		280px 0px 0px 380px;	   
	}

	#myVideoButton {
	   z-index:	2;
	   background:	#ff4000;
           border-radius:	8px;
	   color:		#ff0000;
	   font-size:	20px;
	   content: 	'\00A7';
	   cursor:     	pointer;
 	   font-weight: 	900;
	}

	.mybutton1 {
	   border:		1px solid #ffffff;
	   margin:  	0px 0px 0px 0px;
	   border-radius: 	4px;    
	   background: 	#00aaff; 
	   color:		#02f;
	   width:  	92px;
	   height: 	22px;
	   text-align: 	center;
	  cursor:		pointer;
}

	.mybutton1:hover { background:#ff3b03; }

#myVideoButton:hover {
	background:	#ff8800;
	border-radius:	8px;
	color:		#0077aa;
	font-size:	20px;
	content: 	'\00A7';
}

#xclose {
  position: 	absolute; 
  top:		210px; 
  left:		930px; 
  font-size:	16pt; 
  color:	#ff0; 
  text-align:	center; 
  user-select: 	none; 
  display: 	none; 
  cursor: 	pointer;
}

#xclose:hover { color:#00cccc; }

.can { 
	margin:		20px 0% 0% 20px;
	background: 	#007799;
	border:		1px solid #0ff;
	border-radius:	10px;
	box-shadow:	10px 10px 0px 0px rgba(0,90,90,0.70);
}

.button_science { position:absolute; font-size:20px; display:none;}
.button_science:hover { background: #ff3500; }
	      


.CL_Canvas {
	z-index:	-10;
	position:	absolute; 
	margin:		20px 0px 0px 20px;
	color:		#ffff00; 
	background:	rgba(0,120,255,0.0);
  	border-radius:	10px; 
	box-shadow:	10px 10px 0px 0px rgba(0,190,190,0.0);
	user-select:	none;
}

.CL_slider { width:120px; }

</style>