/* CSS notes:
  fr = "fractional unit" in grid-row/column properties. So 1fr means 
  use remaining space. 
LESS @xyz: ...; @xyz is a css variable
     .xyz(@zzz: ...) {...} is a mixin, new css class  */
	 
html, body {
	position: absolute;
	
	width: 100vw;
	height: 100vh;
	/*min-height: 100%;*/
	
	margin: 0px; /* inside the body */
	padding: 0px; /* outside the body */
	background-color: black;
	color: white;
	/* defer x-scroller to table row 
	overflow-x: auto; 
	overflow-y: auto;
	*/
	}
	
a:link {
	color:#aaffaa
	}
a:visited {
	color:#aaffaa
	}
a:hover {
	color:white
	}
a:active {
	color:#aaffaa
	}
	
#filterdiv {
  flex: 1 1 auto;
}
@media only screen and (min-aspect-ratio: 4/5) {   /* must be ratio notation for Chrome */
	#SwipeMe {
		display: none;
	}
}
@media only screen and (min-width: 500px) {  /* second @media needed for Chrome */
	#SwipeMe {
		display: none;
	}
}

div.thedeal {top: 10px; font-size:110%; position:relative; flex:0 0 0;}
pre.ns {left: 40px; font-family: "Courier New"; position:absolute;}
pre.ew {left: 40px;font-family: "Courier New"; position:absolute;}

#containerleft {
  display: flex;
  flex-direction: column;
  height: 95vh;
  width: 370px;
  overflow-y: clip;
}

#handcol {  /*top level left column*/
  font-family:"Segoe UI","arial", "sans-serif";
  position:absolute;
  /*display: table-cell;*/
  /*
  max-height: 100%;
  min-height:100%;
  */
  width: 370px;
  min-width: 370px;
  overflow:clip;
  }
  
#doc {
	font-family:"Segoe UI","arial", "sans-serif";
	position: absolute;
	height: 100vh;
	left: 390px;
	top: 0px;
	min-width:360px;
	max-width:2000px;
	overflow-y: scroll;
  }

#codex {
	color:yellow;
	font-family:monospace;
	/* text-decoration:underline; */
	font-weight:bold
	}
	
#btn {
	background-color:navy;
	color:white;
	font-family:"Segoe UI","arial", "sans-serif";
	font-size:110%;
	height:40px;
	}

#btnmain {
	background-color:forestgreen;
	color:white;
	font-family:"Segoe UI","arial", "sans-serif";
	font-size:110%;
	height:40px;
	}

h2 {
	font-weight: normal;
	text-decoration: underline;
	}

span.msg {color:#ff4040; 
	/*font-family:"tahoma","geneva";*/
	font-weight:normal;
	top:0px;
	position:relative;
	}

span.loops {color:yellow; 
	/*font-family:"tahoma","geneva";*/
	font-weight:normal;
	position:relative;
	top:8px;
	}

span.but1 {position:relative;
	top:0px;
	/* box-sizing: border-box;	*/
	}

span.but2 {position:relative;
	top:4px;
	/* box-sizing: border-box; */
	}