// ### Nav-List ( ul / ol )
.nav_list {
    display: block; position: relative;
    list-style: none;
    margin: 0; padding: 0;
    background: $white;
    
    li {
        display: block; position: relative;
        list-style: none;
        margin: 0; padding: 0;
        border: none;
        // border-top: solid 1px $white;
        border-bottom: solid 1px $gray-light;
        
        a, span.lst_lnk {
            display: block; position: relative;
            margin: 0; padding: 5px 10px;
            @include sansCondensedBold;
            line-height: $line-height-computed + 10;
            font-size: $font-size-base;
            text-decoration: none;
            color: $gray;
            background: transparent;
            .label {
                font-size: inherit;
                line-height: inherit;
                @include border-radius( 10px );
                padding: 0;
				width: $line-height-computed + 10;
                margin-left: 10px;
                text-align: center;
                // background: $gray-light;
				background: transparent;
				color: inherit;
				float: right;
                &:before {
                    
                }
            }
        }
        
        .sub_nav {
            display: block; position: relative;
            margin: 0; padding: 0;
            list-style: none;
            display: none;
            // @include box-shadow( 
            //                         inset  0  3px  6px -4px rgba(0,0,0,.70),
            //                         inset  0 -2px  6px -4px rgba(0,0,0,.70)
            //                     );
            background: $gray-softer;

			// ####
			overflow: hidden;
			&:before, &:after {
				display: block; position: absolute; content: "";
				margin: 0; padding: 0;
				z-index: 3;
			}
			&:before {
				top: -10px; left: -10px; right: -10px;
				height: 8px;
				@include box-shadow( 0 3px 10px 0 rgba(0,0,0,.35));
			}
			&:after {
				bottom: -10px; left: -10px; right: -10px;
				height: 8px;
				@include box-shadow( 0 -3px 10px 0 rgba(0,0,0,.30));
			}
			// ####
            
            li {
                // &:first-child { border-top: solid 1px $gray-light; }
                
                a, span.lst_lnk {
                    padding: 5px 10px;
                    line-height: $line-height-computed;

					background: $gray-softer;

                    // background: transparent; color: $gray;

                }
                
                .sub_nav {
                    // background: $gray-soft;
                    
                    li {
                        border: none;
                        // &:first-child { border-top: solid 1px $gray-light; }
                    
                        a, span.lst_lnk {
                            line-height: $line-height-computed-sm;
                            font-size: $font-size-small;
                            // color: $gray;
                            @include sansSemi;
                        }
                    }
                }
            }
        }
        
        &.current {
            & > a {
                color: $blue-light;
                // background: $gray-softer;
            }
        }
        
		
		&.active {
			background: $blue-light;
            & > a {
				margin: 0 0 0 5px;
                color: $blue-light;
                background: $white;
            }
        }
		
		
		.sub_nav li {
			&.current > a {
				background: $gray-soft;
			}
			&.active > a {
				color: $blue-light;
				background: $gray-soft;
	        }
		}
		

		&.active {
			background: $blue-light;
            & > a {
				margin: 0 0 0 5px;
                color: $blue-light;
                background: $white;
            }
        }
		
		a, span {
            i { 
                font-size: $font-size-large;
                margin-right: 3px;
            }
            &:hover {
                color: $gray-darker;
                background: $gray-soft;
            }
        }
		
        &.current, &.active {
			a:hover, span:hover {
                color: $blue !important;
                // background: $gray-softer;
				background: $gray-soft;
            }
			& > .sub_nav { display: block; }
		}
        
        // &:first-child { border-top: none; }
        &:last-child { border-bottom: none; }
    }
    
    
    &.border {
        border: solid 1px $gray-light;
        // li { border: solid 1px #ccc; }
    }
    
    &.round {
        @include border-radius(5px);
        li:first-child { @include border-radius(5px 5px 0 0); }
        li:last-child { @include border-radius(0 0 5px 5px); }
    }
    
    &.shiny {
        @include single_shine( rgba(0, 0, 0, 0.13), 2, right, 1px, 10px, 5px, 80 );
    }
    
    
    &.scroll {
        position: fixed;
        // width: 138px;
        top: 60px;
    }
    
    &.arrow li {
        a {
            padding-right: $line-height-computed + 10;
            &:after {
                display: block;
                position: absolute;
                top: 12px; right: 5px;
                line-height: $line-height-computed + 10;
                content: "\f23b";
                font-family: magiconsregular;
                font-weight: normal;
                font-style: normal;
                font-size: $font-size-large;
                color: $gray-light;
            }
        }
        &.current > a { &:after { content: "\f23c"; } }
        .sub_nav li a:after { top: 7px; line-height: $line-height-computed; font-size: $font-size-base; }
    }
    
}

.nav_list.flat {
	list-style: none;
	background: transparent;
	li {
		border-bottom: solid 1px $main-border-color;
		background: transparent;
		a {
			background: transparent;
			padding: 11px 10px;
			line-height: $line-height-computed;
			color: #333;
			font-weight: 300;
		}
		.sub_nav {
			&:before, &:after { display: none; }
			@include box-shadow( none );
			background: $dark-bg;
			border-top: solid 1px $main-border-color;
			display: none;
			li {
				&:last-child { border-bottom: 0; }
				background: transparent;
				a {
					background: transparent;
					padding: 6px 20px;
				}
				&.active a { background: #fff; }
			}
		}
		&.current {
			& > a { color: #333; font-weight: bold; }
			.sub_nav { display: block; }
		}
		&.active > a { background: #fff; color: $brand-color; font-weight: bold; }
	}
}