/*#div1
{
  width:45%;
  background-color:#220000;
  float:left;
  height:100%;
  position:absolute;
}
#div2
{
  width:15%;
  background-color:#000022;
  float:left;
  height:100%;
  position:absolute;
}
#splitter
{
  width:10px;
  background-color:#002200;
  float:left;
  height:100%;
  position:absolute;
  cursor:w-resize;
}    */


.hexagon-base
{
  height:100%;
  width:100%;
	position:relative;
	left:0px;
	top:0px;
	background-color:white;
/*	background-color:lightyellow;*/
	margin:0;
	padding:0;
}
.hexagon-hex
{
  height:80%;
  width:100%;
  position:absolute;	
}
.hexagon-can
{/* // https://www.safaribooksonline.com/blog/2012/04/25/css-tricks-for-html5-canvas-games/
   height:100%;
  width:100%;
  position:absolute; */	
}
.hexagon-graph-block
{
 /* height:20%;
  height:calc(20% - 10px);
  width:100%;
  position:absolute;
	left:0;
	top:80%;
  top:calc(80% + 10px);
	*/
	left:0; 
	top:80%;
	height:20%;
  width:100%;
  position:absolute;
}
.hexagon-graph
{
 /* height:20%;
  height:calc(20% - 10px);
  width:100%;
  position:absolute;
	left:0;
	top:80%;
  top:calc(80% + 10px);
*/
	width:100%;
	height:100%;
	margin-top:10px;  
	height:calc(100% - 10px);

}
.hexagon-h-splitter
{
 /* height:10px;
  width:100%;
  background-color:lightgray;
  
	top:80%;
  position:absolute;
  cursor:n-resize;	*/
  height:10px;
  width:100%;
  top:0;
  position:absolute;
  cursor:n-resize;
  background-color:lightgray;
}
.hexagon-busy
{
	left:0px;
	top:0px;
  height:100%;
  width:100%;
	position:absolute;	
	background-color:lightblue;
	opacity:0.5;
	display:none;
	
	background-image: url('hexagon.busy.gif'); 
	background-repeat: no-repeat;  /*repeat-y; */
	background-size:contain;
	background-position:center;
}
.hexagon-hint
{
	position:absolute;	
	display:none;
	background-color:#ffc36d;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	border-radius: 20px;	
	padding: 10px;
}