/*
 * Nav style
 */
nav ul {
	margin: 0;
	padding-left: 0;
	padding-right: 2px;
	list-style: none;
}

nav li {
    background-image: linear-gradient(165deg, var(--vlight2-color) 40%, var(--vlight1-color), orange);
    margin-bottom: 2px;
    border: 1px #111 solid;
    border-radius: 0 6px 0 6px;
}

nav li a {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    padding: 7px 0 5px 4px;
}

nav .active {
    background-image: linear-gradient(165deg, var(--dark2-color) 40%, var(--dark1-color), orange);
    font-weight: bold;
}

nav li:before {
    content: url(../img/arrow-orange_12.png) '\00a0';
    float: left;
    position: relative;
    top: 8px;
    left: 1px;
    opacity: 0;  
    transition: 0.5s;
}

nav li:hover {
    padding-left:8px;
}

nav li:hover:before {
    opacity: 1;
    right: 10px;
}

nav li:active {
    background-image: linear-gradient(165deg, var(--dark2-color) 40%, var(--dark1-color), orange);
}
