body { background-color: var(--body-backgroundcolour); }

header, #header
{
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 align-items: center; 
 width: 100%;
 height: 60px;    
 padding-inline: 10px;
 position: fixed;
 z-index: 1;    
 top: 0px; 
 right 0px; 
 background-color: var(--header-backgroundcolour); 
 box-shadow: 0 1px 4px 6px rgba(0, 0, 0, 0.2);
}

header a, #header a 
{
 display: flex; 
 flex-direction: column; 
 justify-content: center; 
 align-items: center; 
 padding: 5px; 
 margin-right: 0.625rem;   
 height: 40px; 
 width: 40px; 
 background-color: var(--header-home-backgroundcolour); 
 border-radius: 50%; 
}

#home { max-height: 50px; }

#pagetitle
{
 flex-grow: 1;
 flex-shrink: 1;
 font-size: 1.2rem;
 font-weight: 700;
 text-transform: uppercase;
 color: var(--header-home-foregroundcolour);
}

#menu-section, .menu-section
{
 width: 100%;
 text-align: center; 
}

#menu, .nav, #menu .nav li 
{
 margin: 0px;
 padding: 0px;
}

#menu li 
{
 position: relative;
 display: inline-block;
 cursor: pointer;
 list-style: none;
 color: rgb(255,255,255);
 text-align: left;
 font-size: 1.1rem;
}

#menu li ul.first 
{
 left: 0;
 top: 100%;
}

#menu .nav li 
{
 width: 100%;
 padding: 0px 10px;
 background-color: rgb(22, 174, 0);
}

li ul li:not(:last-child) 
{
 border-bottom: 1px solid;
 border-bottom-color: rgba(0,0,0,0.25);
}

/*
#menu li a 
{
 display: block;
 width: inherit;
 height: inherit;
 color: rgb(255, 255, 255);
 text-decoration: none;
 padding: 12px 8px;
 user-select:none;
}
*/

ul.nav 
{
 display: none;
}

#menu li:hover > a, #menu li:hover 
{
 color: #fff;
 background-color: rgb(17, 132, 0);
}

li:hover > .nav 
{
 display: inline-block;
 position: absolute;
 width: 1px;
 min-width: 200px;
 max-width: 1000px;
 top: 0px;
 left: 100%;
 z-index: 1000;
}

li:hover 
{
 position: relative;
 z-index: 2000;
}  

#page-content
{
 margin: 1.1rem;
}