/*
*	for 581 Upwards, ADD the left margin 
  target  1024   768  480 maybe 320 
*/ 


/* Ensure the main page is the entity doing the scrolling */
body, html {
  height: auto;
  overflow: visible;
  margin:0;
} 

/*box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	NB: Every element utilizing a z-index must also have 
	position: relative, position: absolute, or position: sticky declared.
*/
div.container_glue { 
	position: sticky;
	top:0; 
	height: 50px;  
	z-index: 20; 
	background: white; 	/* Solid plate so text vanishes completely behind it */
	padding-left:10px;  /* after setting body to 0, shift in LHS a bit */
	margin-bottom:10px; /* add margin to shove following below the "cloud" effect" */
	border: 1px solid green; 
}



div.flex_holder { 
	display: flex; 
	justify-content: space-between; /* Pushes title to left, wrap_right to right */
	align-items: flex-start;        /* Aligns their tops perfectly */
	height:50px; 					/* MUST have this else draws a veil over the table, no mouse events!! */
}

div.page_title { border: 1px solid red; }

/* The 15px gradient fade beneath the header */
.page_title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;      /* Pushes the fade exactly 15px below the header */
  height: 15px;       /* The exact height of your fade transition */
  pointer-events: none; /* Allows clicks to pass through to any table rows underneath */
  
  /* Fades from solid white at the top to completely clear at the bottom */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

	/* z-index values are ignored unless the element is explicitly positioned. 
		Because your table wrapper is sitting naturally in the document flow, it is defaulted to position: static
	*/
div.table_wrapper { 
	position: relative; 	/* z-index ignored if position is static */
	width: 60%;
	padding-left:10px; 
	z-index: 10; 
}

























/* this has to stay out of any media query, ie override the basic class  */
div.body_rhs.meaning { 
			/* position: -webkit-sticky; /* Support for older Safari */
			/* bottom: 10px; height: 200px;  BAAD */
		position: sticky; 
		top: 10px; 
		right: 0; 
		margin-top: 0px; 
		width:250px; 
		align-self: start; /* Prevents the sticky item from stretching */
	}
div.body_rhs.meaning >  han18 { font-size: 15pt; }