/* Menu stuff */
.menu a:link, .menu a:visited {
	color: silver;
	font-weight: normal;
	text-decoration: none;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -1px -1px black, 1px 1px black, -1px 1px black, 1px -1px black;
	transition: .5s ease-out;
}
.menu a:hover {
	text-decoration: none;
	text-shadow: -1px 0 pink, 0 1px pink, 1px 0 pink, 0 -1px pink, -1px -1px pink, 1px 1px pink, -1px 1px pink, 1px -1px pink;
	transition: 0s;
}
#mainMenu a, #subMenu a, .menu div {
	display: block;
	font-size: 18px;
	padding: 1px 0px 5px 15px;
}
.menu hr {
	margin-right: 6px;
	border: 1px solid silver;
}
#vaultMenu {
	font-size: 24px;
}
#vaultMenu a, #vaultMenu span {
	display: inline-block;
	font-weight: bold;
	text-align: center;
	width: 25px;
/*	border: 1px solid silver; */
}
.mainMenuDropdown {
	color: white;
	display: none;
}
.subMenuDropdown {
	color: white;
	display: none;
}

.menu a.active {
	color: #FFFFFF;
}

/* General stuff */
img {
	border:0px;
}
html {
	overflow: hidden;
}
body {
	height:100%;
	color: white;
	font-family: Verdana;
	margin:0;
	padding:0;
}

#main {
	position: absolute;
	top: 140px;
	left: 180px;
	right: 0px;
	bottom: 0px;
	background: linear-gradient(to bottom, lightcoral 0%, lightcoral 14.28%, orange 14.28%, orange 28.57%, gold 28.57%, gold 42.86%, lightgreen 42.86%, lightgreen 57.14%, mediumturquoise 57.14%, mediumturquoise 71.43%, royalblue 71.43%, royalblue 85.71%, darkslateblue 85.71%, darkslateblue 100%);
	overflow: auto;
	z-index: 0;
}

#missingcontainer {
	position: absolute;
	top: 140px;
	left: 180px;
	right: 0px;
	bottom: 0px;
	z-index: 0;
}

#topbar {
	position: absolute;
	top: 0px;
	left: 180px;
	border-bottom: 10px solid white;
	right: 0px;
	height: 130px;
	overflow: hidden;
	background: #252621;
}

.pasokon {
  display: block;
  margin-left: auto;
  margin-right: auto;
    width:auto;
    height: 90%;
}

#menu {
	display: flex;
	flex-direction: column;
	background-color: #252621;
	position: absolute;
	width: 180px;
	height: 100%;
	overflow: hidden;
}

.mainContent {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	border: 5px solid #F4F9E9;  
	border-radius: 3px;
	background-color: #252621;
}

#logo {
	animation: twirl 120s infinite ease-in-out;
}

@keyframes twirl {
	99% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 404 */

#missing {
    width: 100%;
    height: 200%;
    position: absolute;
    top: -100%;
    left: 0;
    background-image: linear-gradient(to bottom, lightcoral 0%, lightcoral 14.28%, orange 14.28%, orange 28.57%, gold 28.57%, gold 42.86%, lightgreen 42.86%, lightgreen 57.14%, mediumturquoise 57.14%, mediumturquoise 71.43%, royalblue 71.43%, royalblue 85.71%, darkslateblue 85.71%, darkslateblue 100%);
    background-repeat: repeat-y;
    background-size: 100% 50%;
    animation: error-rainbow-scroll 10s infinite linear;
	z-index: -1;
}

#mai {
    background: url("mai.gif") no-repeat center bottom;
    background-size: 40%;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

@keyframes error-rainbow-scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(50%); }
}