html { background-color: #FFF; }
	

/* =========  Main Overrides  =========

	display:none;	width : 100%; 	 overflow:hidden; 
*/

div#image_holder { 
	position:relative; 
	height: 550px; 		/*was height: 1040px; */
	}
	/* override twinarrow.css LL166 ; From SO 1709442 */
div.container_B2 {
	background:	linear-gradient(#DDFFEE20, 1%, #DDFFEEF1, 30%, #DFE); 
	padding:0; 
	 display: flex;
  flex-direction: column;
  min-height: 100vh;
}

div.astro-content { 
	width:auto;
	}

/* =========  Temporary menu =========*/
span.menu { 
	font-weight:500;
	font-family: Arial;
}
span.menu:hover { color:red;}

div#tube { margin-top: 30px; position:relative;  }

	/* 11 pages, width up to 1200 ! try 13200 */
div#sliderA { 
	position:absolute; left: 0; top:0;
	width:13200px; 
	height:20px; 
	
	}
	
div#sliderB { 
	position:absolute; left: 0px; top:0px;
	width:13200px;
	height:20px; 	
	visibility:hidden; 		/* JS switches it back on, then opacity set to 0 */
	
	}

	/* try this to avoid seeing pics on astrophil */
div.item_text { 
	font-size:1em; 
	padding: 0  20px; 		/* TB then LR */
	flex: 1; 
	}

div.panel { 
	position : absolute;
	width: 1000px; 
	height: 500px; 
	top:0px; 
	/* not right  margin-right:10px; 	*/
	/*border:1px solid red; */
}
	
div.panel_1 {
	left: 0;
}
div.panel_2 {
	left:1000px;
	top:0px; 
}
div.panel_3 {
	left:2000px;
	top:0px;  
}
div.panel_4 {
	left:3000px;
	top:0px;  
}
/* leave the rest jumbled onto each other - JS sorts them out */
div.panel_5,
div.panel_6,
div.panel_7,
div.panel_8  {
	left:4000px;
	top:0px;  
}




div.R { 
		background-color: #FFCCCC; }
div.G { 
		background-color: #CCFFCC; }
div.B { 
		background-color: #CCCCFF; }
div.Y { 
		background-color: #FFFFCC; }