.pointer {cursor: pointer;}

body, html {
  height: 100%;
}

body.hlpool {
  background-image: url("./img/HL_pool.jpg");
  background-color: #cccccc;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100%;
}

body {
  background-image: url("./img/hl_background.jpg");
  background-color: #cccccc;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

h1 {
  color: blue;
  text-color: blue;
  text-align: left;
}
h2 {
	color: darkblue;
	font-size: 25px;
	text-align: left;
}

h3 {
	color: black;
	font-size: 20px;
	text-align: left;
}

h3.inl {
	display: inline-block;
	color: black;
	font-size: 20px;
	text-align: left;
}

h4 {
	color: black;
	font-size: 15px;
	text-align: left;
}
h4.inl {
	display: inline-block;
	color: black;
	font-size: 15px;
	text-align: left;
}
span.inl {
	display: inline-block;
	color: black;
	font-size: 15px;
	text-align: left;
}

p {
  font-family: verdana;
  font-size: 20px;
  text-align: left;
}

p.mid {
  font-family: verdana;
  font-size: 20px;
  text-align: left;
}

p.tab { 
	margin-left: 40px; 
	font-size: 18px; 
}

p.tab2 { 
	margin-left: 40px; 
	font-size: 15px; 
}

p.tab3 { 
	display: inline;
	margin-left: 10px; 
	font-size: 12px; 
}

p.tab4 { 
	display: inline;
	margin-left: 90px; 
	font-size: 10px; 
}

input[type=radio] {
    border: 0px;
    width: 3%;
    height: 2em;
}
select.mine {
  margin: 0px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 15px;
  border: 1px solid #CCC;height: 34px;
#  -webkit-appearance: none;
#  -moz-appearance: none;
  appearance: none;
}

button {
  background-color: #bebebe;
  border: none;
  color: black;
  padding: 4px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border: 2px outset #bebebe ;
  cursor: pointer;
}
area {
    cursor: pointer;
    display:block;
}
input.mine  {
  font-size: large;
  width: 100px;
  -webkit-appearance: none;
/*
  margin: 5px;
  border: height: 34px;
  width: 100px;
  border: 1px solid #CCC;height: 34px;
  padding: 5px 35px 5px 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  */
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* 100% Full width (cover the whole page) */
  height: 100%; /* 100% Full height (cover the whole page) */
  top: 0%; 
  left: 0%;
  right: 0px;
  bottom: 0px;
  color: white;
  font-size: 20px;
  background-color: rgba(0,0,0,0.7); /* Black background with opacity */
  z-index: 0; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}
#text_overlay {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*
 * The following text_overlay definitions didn't quit do want ai wanted.
 *  Make the text centered on physical screne. Thanks to:
 *  https://stackoverflow.com/questions/11093603/how-to-set-page-content-to-the-middle-of-screen
 *
#text_overlay {
  position: absolute;
  width: 40%;
  height: 20%;
  top: 20%;
  left: 40%;
  font-size: 2vw;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  */
}