html 
{
box-sizing:border-box;
}
*,*:before,*:after 
{
box-sizing:inherit;
}
body
{
	background-color:#333333;
	color:#ffffff;
}
#wrap
{
	height:97vh;
}
#top
{
	position:relative;
	text-align:center;
	top:0px;
	height:8vh;
	z-index:20;
}
#logo
{
	font-family:Times; font-size:3vw; font-style:bold;
}
#middle
{
	position:relative;
	top:0;
	height:20vh;
	font-family:Arial; font-size:70%; font-style:narrower;
	margin:1;
	padding:2;
	border:0;
	outline:1;
	vertical-align:baseline;
}

#bottom
{
	position:relative;
	top:0vh;
	height:65vh;
	z-index:5;
}

#nav
{
 z-index: 9999;
}
#navitems
{
z-index:9999;
}
.nav 
{
overflow:auto;
background-color:#262626;
white-space:nowrap;
font-family:Arial;

}
.nav a 
{
display:inline-block;
float:left;
font-size:16px;
color:#ffffff;
text-align:center;
padding:14px 16px;
text-decoration: none;
}
.sub 
{
float: left;
overflow: hidden;
}
.sub .btn 
{
font-size:16px;
border:none;
outline:none;
color:#ffffff;
padding:14px 16px;
background-color:inherit;
font-family:inherit;
margin:0;
}
.nav a:hover, .sub:hover .btn 
{
  background-color: red;
}

.items 
{
  display: none;
  position: absolute;
  background-color:#262626;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.items a 
{
  float: none;
  color:#ffffff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.items a:hover 
{
  background-color:#757575;
}
.sub:hover .items 
{
  display: block;
} 

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button 
{
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] 
{
  -moz-appearance: textfield;
}