// style definitions for main page horizontal nav bar

$navbar_width: 120px;

.nav-btn {
    position: absolute;
    top: 20px;
    left: 10px;
    display: inline-block;
    cursor: pointer;
    z-index: 1;
}

.nav-btn-bar1, .nav-btn-bar2, .nav-btn-bar3 {
    width: 35px;
    height: 5px;
    border-radius: 2px;
    background-color: $ui-text-color;
    margin: 6px 0;
}

.toggle .nav-btn-bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.toggle .nav-btn-bar2 {
    opacity: 0;
}

.toggle .nav-btn-bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.main-nav-bar {
    position: absolute;
    top: 60px;
    left: -$navbar_width * 1.5;
    width: $navbar_width;
    z-index: 1;
    background-color: $ui-background-color;
    transition: 0.25s ease-out;
}

.toggle .main-nav-bar {
    left: 0px;
}

.main-nav-list {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px; 
    margin-bottom: 0px;
    list-style-type: none;
    padding: 2px;
}

.main-nav-item {
    margin: 5px;
}
.main-nav-link, .main-nav-link:link, .main-nav-link:visited {
    padding-left: 5px;
    font-family: "Arial", Gadget, sans-serif;
    font-size: 14px;    
    display: block;
    color: $ui-text-color;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.main-nav-link:hover, .main-nav-link:active {
    color: $ui-text-color;
    background-color: $ui-hover-color;
}

