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;
	//background-color:yellow;
	font-family:Arial; font-size:70%; font-style:narrower;
	margin:1;
	padding:2;
	border:0;
	outline:1;
	vertical-align:baseline;
}
.modifier
{
font-family:Arial; font-size:11px; font-style:narrower;
height:15vh;	
margin:0;
border-collapse:collapse;
border-spacing:0;
}
#bottom
{
	position:relative;
	top:0vh;
	height:65vh;
	z-index:5;
}
.table-layout 
{
 position: relative;
 top:3vh;
 height:60vh;
 margin: auto;
 z-index: 1;
 overflow: auto;
}

.table-layout table 
{
 width: 95%;
 min-width: 800px;
 margin: auto;
 border: 1px solid #333333;
 border-collapse: separate;
 border-spacing: 0;
 font-family: Arial; font-size:90%; font-style: normal;
}
.table-layout th, td 
{
 padding: 5px 10px;
 border: 1px solid #333333;
 color:#ffffff;
 vertical-align:top;
 
}

.table-layout thead th
{
  background-color:#262626;
  border:1px solid #262626;
  color:#ffffff;
  position:-webkit-sticky;
  position:sticky;
  top:0vh;
  height:8vh;
  font-family: Arial; font-size:100%; font-style: normal;
}

th
{
 font-weight:normal;
}
.table-layout tfoot,.table-layout tfoot th,.table-layout tfoot td 
{
position:-webkit-sticky;
position:sticky;
bottom:0;
background-color:#262626;
color:#ffffff;
z-index:5;
height:4vh;
}
th:nth-child(1)
{
position:-webkit-sticky;
position:sticky;
left:0px;
width:50px;
z-index:4;  
}
thead th:nth-child(1),tfoot th:nth-child(1)
{
z-index: 22;
}
th:nth-child(2)
{
position:-webkit-sticky;
position:sticky;
left:50px;
width:250px;
z-index:4; 
}
thead th:nth-child(2),tfoot th:nth-child(2)
{
z-index:20;
}
.table-layout th 
{
	font-family:Arial; font-size:90%; font-style:normal;
}
.table-layout tr:nth-child(even) 
{
	background-color:#404040;
}
.table-layout tr:nth-child(odd) 
{
	background-color:#333333;
}
.table-layout tr:hover 
{
	background-color:#757575;
}
.rank
{
	background-color:#404040;
}
.name
{
	background-color:#404040;
}

.column_sort
{
	background-color:#333333;
	color:#ffffff;
	border-color:#ffffff;
	cursor: pointer;
	width:100%;
	height: 45px;
	border-radius: 5px;
}
.column_sort:hover 
{
	background: #404040;
	color:#f44336;
}

.column_sort:active
{
	background: #404040;
	color:#f44336;
}
#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;
}