/*
weather_nav_styles_17.css
Rudy J. Nickmann
03 May 2023
*/


.home_button{
    background: #254441;
    border: 1px solid gray;
    color: #f6f7f8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: 100%;
    width: 100%;
}

.mainNav{
    width: 986px;
}
.mainNav a{
    align-items: center;
    background: #254441;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    color: #f6f7f8;
    display: flex;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    justify-content: center;
    padding-bottom: 4px;
    padding-top: 4px;
    text-decoration: none;
    transition: background 0.4s;
}

.mainNav a:hover{
    background: #4C9900;
}

.mainNav ul{
    display: flex;
    list-style: none;
}

.mainNav li{
    flex: 1 1 auto;
}

.mainNav li:hover .subMenu > li {
    display: block;
    top: 0;
}

.subMenu li {
    display: none;
    top: 0;
    width:9em;
    z-index: 100;
}

.subMenu {
    display: flex;
    flex-direction: column;
    position: absolute;
}

.subMenu a{
    font-size: 12px;
    padding-bottom: 4px;
    padding-top: 4px;
    text-align: center;
}

/************** main aside menu bar ***********/
.buttonLink_1,
.buttonLink_2,
.buttonLink_3,
.buttonLink_4,
.buttonLink_5,
.buttonLink_6,
.buttonLink_7,
.buttonLink_8,
.buttonLink_9,
.buttonLink_10,
.buttonLink_11
{
    background: #254441;
    border: none;
    color: #f6f7f8;
    cursor: pointer;
    font-family: Verdana, Geneva, sans-serif;
    font-size:12px;
    padding: 4px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.buttonLink_1:hover,
.buttonLink_2:hover,
.buttonLink_3:hover,
.buttonLink_4:hover,
.buttonLink_5:hover,
.buttonLink_6:hover,
.buttonLink_7:hover,
.buttonLink_8:hover,
.buttonLink_9:hover,
.buttonLink_10:hover,
.buttonLink_11:hover
{
    background: #4C9900;
    color:#fff;
    text-decoration: none;
}

.buttonLink_1:active,
.buttonLink_2:active,
.buttonLink_3:active,
.buttonLink_4:active,
.buttonLink_5:active,
.buttonLink_6:active,
.buttonLink_7:active,
.buttonLink_8:active,
.buttonLink_9:active,
.buttonLink_10:active,
.buttonLink_11:active
{
    background: #2E5481;
}