html {
	font-family: Tahoma, Geneva, sans-serif;
	padding: 10px;
}
.Headder {
	background: white;
	border-bottom: 1px solid;
	padding: 0 10px;
	box-shadow: 0px 1px #888888;
	margin-bottom: 5px;
	position:fixed;
	top:0;
	width:100%;
	z-index:200;
	height: 71px;
	background-color: #7b6fde;
    background-image: linear-gradient(#7b6fde, #0b0930);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;

}
.Body{
	margin-top: 70px;
}
.Footer{
    position: fixed;
    bottom: 0;
    right: 0;
	margin-right: 10px;
    color: lightgray;
}
table {
	border-collapse: collapse;
}
th {
	background-color: #54585d;
	border: 1px solid #54585d;
}
th:hover {
	background-color: #64686e;
}
th a {
	display: block;
	text-decoration:none;
	padding: 10px;
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
}
th a i {
	margin-left: 5px;
	color: rgba(255,255,255,0.4);
}
td {
	padding: 10px;
	color: #636363;
	border: 1px solid #dddfe1;
}
tr {
	background-color: #ffffff;
}
tr .highlight {
	background-color: #f9fafb;
}
.column-left {
	padding-left: 2%;
	width: 30%;				
}
.column-right {
	padding: 0 2%;
	width: 64%;				
}

.WPICON {
	font-family: 'Permanent Marker', cursive;
	font-size: 3em;
	float: left;
	margin-right: 1em;
}

.navigationWide {
	font-family: 'Permanent Marker', cursive;
	text-align: right;
	margin-right: 1em;
	font-size: 40px;
	padding: 10px;
	height: 80px;
	z-index: 101;
}

.navigationNarrow {
	font-family: 'Permanent Marker', cursive;
	display: none;
	visibility: hidden;
	font-size: 40px;
	padding: 10px 10px 0 10px;
	text-align: right;
	margin-right: 1em;
	z-index: 101;
}			
.navigationOpenMenu { 
	visibility: hidden; /* hides sub-menu */
	opacity: 0;
	transform: translateY(-7em);
	z-index: 50;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.navigationOpenMenuContainer {
	background: white;
	padding: 0 10px;
	position: absolute;
	right: 1px;
	z-index: 50;
	border-left: 1px solid;
	border-bottom: 1px solid;
	box-shadow: 1px 1px #888888;
}			
.navigationNarrow:focus .navigationOpenMenu,
.navigationNarrow:focus-within .navigationOpenMenu,
.navigationNarrow:hover .navigationOpenMenu {				
	visibility: visible; /* shows sub-menu */
	opacity: 1;
	z-index: 49;
	transform: translateY(0%);
	transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}



@media screen and (max-width:900px), screen and (max-height:500px) {
	.navigationWide { display: none !important; }
	.navigationNarrow  { display: block; visibility: visible; }
}

.DEBUG {
	border: 5px;
	background: red;
}