/**************
* Page Layout *
**************/

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	font-size: 1em;
}

body {
	font-family: "Baloo Paaji 2";
	background-color: #1b7132;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%230c6625' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden;
}

nav, footer {
	flex: 0;
}

main {
	flex: 1;
}


/***********
* Menu Bar *
***********/

nav {
	background-color: #053312;
}

/* Menu Items*/
.menuitem {
	color: white;
	font-size: 14px;	
	padding: 0px 16px;
	user-select: none;
	float: left;
	text-decoration: none;
	height: 29px;
	line-height: 29px;
}

.menuitem.active {
	color: white;
	background-color: #4CAF50;
}

.menuitem:hover:not(.active):not(#logo) {
	background-color: #041a0a;
	cursor: pointer;
}

/* Logo */
#logo {
	float: right;
	padding-right: 0;
	padding-left: 40px;
	line-height: 25px;
	
}

#logo .bid {
	line-height: 11px;
	font-family: arial, sans-serif;
	font-size: 8px;
	font-weight: normal;
	transform: rotate(270deg);
	transform-origin: 0 23px;
	display: inline-block;
	text-align: center;
	border-radius: 8px 8px 0px 0px;
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	border-color: black;
	padding: 1px;
	width: 25px;
	height: 50px;
	margin-right: -16px;
	transition: line-height 0.5s, margin-right 0.5s;
}

#logo:last-child {
	margin-right: -20px;
}

/* Dropdown Menus */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #053312;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	margin-top: 0px;
	margin-left: -16px;
}

.dropdown-content .menuitem {
	float: none;
	display: block;
	text-align: left;
	margin: 0;
	border: none;
}

.dropdown:hover .dropdown-content {  
	display: block;
}

/* Dropright Menus */
.dropright-content {
	display: none;
	position: absolute;
	background-color: #f3f3f3;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	margin-top: -35px;
	margin-left: 144px;
}

.dropright-content .menuitem {
	float: none;
	display: block;
	text-align: left;
	margin: 0;
	border: none;
}

.dropright:hover .dropright-content {
	display: block;
}


/********************
* System Visualiser *
********************/

.content {
	margin: 20px;
	background-color: #fff;
	display: grid;
	grid-template-areas: "h h" "b t" "a t" "c c";
	grid-template-columns: 225px auto;
	grid-template-rows: repeat(4, auto);
}


/*********
* Footer *
*********/
footer {
	background-color: rgb(21, 109, 45);
	border-top: 1px solid #050;
	color: rgb(246, 244, 223);
	line-height: 1em;
	font-size: 12px;
}

footer > div {
	float: left;
	padding: 5px;
}

footer #copyright {
	width: calc(40% - 10px);
	text-align: left;
}

footer #quote {
	width: calc(60% - 10px);
	text-align: right;
}