#header {
    padding:10px 100px;
    font-size:14px;
    background: var(--medium-dark-color);
    color:#fff;
    border-bottom:4px solid var(--dark-color);
    overflow:auto;
}

#header .logo {
    font-family: 'Muli', sans-serif;
    float:left;
    color: var(--very-light-color);
    font-size:20px;
    margin-right:10%;
}

#header > ul.menu {
    list-style:none;
    float:left;
    margin:0;
    padding:0;
}
#header > ul.menu > li {
    float:left;
	display: inline;
}
#header > ul.menu > li > a {
    padding:4px 10px;
	display: inline-block;
}

#header ul.menu li a:hover {
	background: var(--light-color);
    color: var(--dark-color);
	text-decoration: none;
}

#header > ul.menu > li.selected > a, #header > ul.menu > li.selected > a:hover {
    color: var(--very-light-color);
    font-weight:bold;
}

#header > ul.menu > li.selected > a:hover
{
	background: var(--dark-color) !important;
	color: var(--very-light-color) !important;
}

#header > ul.menu > li > a:hover {
	outline: 2px solid var(--dark-color);
	border-radius: 3px;
	border: none;
}

#header ul.menu ul {
	display: none;
	position: absolute;
	z-index: 5;
}
#header > ul.menu > li:hover > ul {
	display: block;
	list-style: none;
	outline: 2px solid var(--dark-color);
	border-radius: 3px;
	border: none;
}
#header > ul.menu ul > li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

#header ul ul li a {
	background: var(--light-color);
	color: var(--dark-color);
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 2px 5px;
	text-decoration: none;
}
#header ul ul li a:hover {
	background: var(--medium-dark-color) !important;
	color: var(--very-light-color) !important;
}

#header a {
    color: var(--dark-color);
    font-weight:bold;
}
#header a:hover {
    color: var(--light-hover-color);
}

#header .user {
    display: inline-flex;
    float: right;
    padding-top: 4px;
    align-items: center;
}

#header .user > form {
    display: inline-block;
}