/*
*
* !DO NOT EDIT THE CSS FILES, THEY ARE BUILT WITH THE LESS CSS!
* less/navigation/navigation.less
*
* ---------------------------
* Styles associated with the navigation
* ---------------------------
*/
@import "../_mixins/all.less";
@import "../_mixins/spriteSheet.less";

@dir: '../';

#wdn_navigation_wrapper {
    background: #fff;
	margin-top:-2px;
	position:relative;
    -webkit-font-smoothing: antialiased;
}
#navigation {
    .linear-gradient-no-filter(@highlightPrimary, @shadowPrimary);
    color:#fff;
    width:100%;
    text-align:center;
    font-size:1em;
    text-shadow:0px 1px 1px #333;
    height:25px;
    position:relative;
    text-align:right;
    padding:8px 0 0 0;
    cursor:pointer;
    &:before {
        content: '\2261';
        text-align:right;
        border:1px solid #8c0100;
        padding:0px 8px 1px 9px;
        font-size: 1.3em;
        color:#fff;
        .border-radius(5px);
        margin-right:5px;
        .linear-gradient-no-filter(@highlightPrimary, @shadowPrimary);
        .box-shadow(inset, 1px, 1px, 2px, 0px, #df7a7a);
        speak: none;
    }
    &.primary:before, &.secondary:before {
        content: 'Back';
        font-size: 1em;
        padding: 3px 5px;
    }
    &.disabled {
        cursor: default;
    }
    &.disabled:before {
        content: '';
    }
    
    ul {
        position:absolute;
    	left:110%;
    	top:100%;
    	width:100%;
    	text-align:left;
    	z-index:10;
    	border-bottom:2px solid #d6d6d6;
    	.box-shadow(0px, 2px, 3px, #8a8a8a);
    	.transition(left, 0.5s, ease);
    	
    	li {
    	    width: 100%;
    	    .linear-gradient-no-filter(#fff, #E5E5E5);
    	    font-weight:bold;
	        text-shadow:0 1px 1px #fff; 
	        border:1px solid #d6d6d6;
	        border-width:1px 0 0 0;
	        position:relative;
	        font-family: @impactFont;
	        
	        a {
	            text-decoration:none;
                color:#333;
                padding:1em;
                display:block;
	        }
	        
	        &.hasSecondary a {
	            display:inline-block;
	        }
    	}
    }
    &.active {
        > ul {
            left: 0;
        }
    }
    
    > ul {
        
        > li {
        
            &.hasSecondary {
            
                &:after {
                    #wdnSprite > .mobile_nav_arrow(@dir);
                    background-color: rgba(0,0,0,.4);
                    content: '';
                    width:1.2em;
                    height:1.2em;
                    display:block;
                    position:absolute;
                    right:1em;
                    top:1em;
                    .border-radius(1em);
                }
            }
            
            &.active {
                
                ul {
                    left: 0;
                }
            }
            
            &.empty { 
                display: none;
            }
            
            > ul {
                z-index:11;
                bottom:0;
                border-top:3px solid rgba(0,0,0,.4);
                
                &.empty {
                    display: none;
                }
                
                > li {
                    padding-left:10%;
                    font-size:1em;
                    
                    > a {
                        width: 100%;
                    }
                }
            }
        }
    }
}
    
.pin_state, .expand_toggle {
    .text-hidden();
}

@media (min-width: 320px) {
    
}
@media (min-width: 480px) {

}
@media (min-width: 600px) {

}
@media (min-width: 768px) {
    
    #wdn_navigation_bar {
    	float: none;
    	margin-top: 0;
    	.box-sizing(border-box);
        width: 100%;
        clear: both;
        background: #fff;
        position: relative;
        padding: 0 4px;
    }
    
    #wdn_navigation_wrapper {
    	background: none;
    	margin: 5px 0 17px;
    	display: inline-block;
    	display: block;
    	.box-sizing(border-box);
    	
    	&:after {
    	    content: " ";
	        display: block;
	        line-height: 0;
	        height: 0;
	        width: 0;
	        font-size: 0; 
	        clear: both;
    	}
    	
    	.expand_toggle {
            position: absolute;
            top: -20px;
            right: 3px;
            z-index: 101;
            height: 30px;
            width: 28px;
            
            a {
                #wdnSprite > .expand_toggle_plus(@dir);
                height: 100%;
                .text-hidden();
            }
        }
        
        .pin_state {
            position: absolute;
            bottom: -2px;
            right: 0;
            z-index: 101;
            height: 28px;
            width: 19px;
            
            a {
                #wdnSprite > .push_pin_up(@dir);
                height: 100%;
                .text-hidden();
            }
        }
        
        &.empty-secondary {
            
            #navigation > ul > li {
            
                &:nth-last-child(6) > a {
                    .border-radius-bottom-left(5px);
                }
                
                &:last-child > a {
                    .border-radius-bottom-right(5px);
                }
            
                ul {
                    display: none;
                }
            }
        }
        &.empty-secondary, &.nav-loading {
            
            .pin_state, .expand_toggle {
                display: none;
            }
        }
    	
    }
    
    .nav_unpinned {
        #wdn_navigation_bar {
            .box-sizing(border-box);
        }
        
        #wdn_navigation_wrapper {
            position: absolute;
            z-index: 100;
            width: 100%;
            padding: 0 1% 0 0;
        }
        
        #wdn_content_wrapper {
            margin-top: 58px; /* Default for single bar nav */
        }
    }
    #navigation {
        clear: both;
        position: relative;
        z-index: 100;
        background: none;
        padding: 0;
        background: #fff;
        
        &:before {
            display: none;
        }
        
        > ul {
            position: static;
            width: 100%;
            .box-shadow(none);
            border: none;
            .transition(none);

            > li {
                width: 16.5%;
                float: left;
                text-align: center;
                position: relative;
                border-top: none;
                background: transparent;
                
                /* Clear the first element of a row of 6 */
                /* (duplicated in ie.css with .start class) */
                &:nth-child(6n+1) {
                    clear: left;
                    width: 17%;
                    
                    /* Clear the first element of a row of 6 */
                    /* (duplicated in ie.css with .start class) */
                    > a {
                        border-left: none;
                    }
                    
                    /* Add strong border around first-in-row secondaries */
                    /* (duplicated in ie.css with .start class) */
                    ul {
                        margin-left: 0;
                        border-left-color: #c9c9c9;
                    }
                }
                
                &:nth-child(6n+6) {
                    width: 17%;
                
                    /* Clear the last element of a row of 6 */
                    /* (duplicated in ie.css with .end class) */
                    > a {
                        border-right: none;
                    }
                    
                    /* Add strong border around last-in-row secondaries */
                    /* (duplicated in ie.css with .end class) */
                    ul {
                        margin-right: 0;
                        border-right: 1px solid #c9c9c9 !important;
                    }
                }
                
                &:first-child {
                    
                    > a {
                        .border-radius4(5px,0,0,0);
                    }
                }
                
                &:nth-child(6) {
                    
                    > a {
                        .border-radius4(0,5px,0,0);
                    }
                }
                
                &:last-child {
                    
                    > ul, &.row-empty > a {
                        .border-radius-bottom-right(5px);
                    }
                }
                
                &:nth-last-child(6) {
                    
                    > ul, &.row-empty > a {
                        .border-radius-bottom-left(5px);
                    }
                }
                
                /* Add a separator between rows */
                /* (duplicated in ie.css with .mid-bar class) */
                &:nth-child(n+7) {
                    border-top: 1px solid #c83a3a;
                    .box-shadow(0px, -1px, 0px, #870d0c);
                }
                
                &.highlight {
                    > a {
                        .linear-gradient-no-filter(#c12726, #ac2625);
                    }
                    
                    > ul {
                        .linear-gradient-no-filter(#FDFFF0, #EEF2CB);
                    }
                }
                
                                
                &:hover {
                    
                    > a {
                        .linear-gradient-no-filter(#c12726, #ac2625);
                    }
                    
                    > ul {
                        .linear-gradient-no-filter(#fbfbfb, #f0f0f0);
                        
                        a {
                            color: #242424;
                        }
                    }
                    
                    &.empty {
                        
                        > a {
                            .linear-gradient-no-filter(@highlightPrimary, @shadowPrimary);
                        }
                        
                        > ul {
                            .linear-gradient-no-filter(rgba(251,251,251,0.95), rgba(215,215,215,0.95));
                        }
                    }
                }
                
                &.row-empty {
                    
                    > ul {
                        display: none !important;
                    }
                }
                
                &.hasSecondary {
                
                    &:after {
                        background: none;
                    }
                    
                    a {
                        display: block;
                    }
                }
                
                &.empty {
                    display: list-item;
                }
                
                ~ li {
                    
                    &.empty {
                        
                        /* Combine empty primary elements */
                        > a, > ul {
                            border-right-color: transparent;
                        }
                        
                        > ul:after {
                            display: none;
                        }
                    }
                    
                    ~ li {
                        
                        &.empty {
                            
                            > a, > ul {
                                border-left-color: transparent;
                            }
                            
                            > ul:before {
                                display: none;
                            }
                        }
                    }
                }
                
                > a {
                    display: block;
                    color: #fff;
                    text-shadow: 1px 1px 1px #424242;
                    font-weight: 500;
                    font-size: 0.875em;
                    margin: auto 0;
                    padding: 0.47em 1px;
                    border-right: 1px solid #870d0c;
                    border-left: 1px solid #c83a3a;
                    .linear-gradient-no-filter(@highlightPrimary, @shadowPrimary);
                    
                    &:hover {
                        color: #fff;
                    }
                }
                
                /* Secondaries */
                
                > ul {
                    z-index: 10;
                    position: relative;
                    top: 0;
                    left: 0;
                    width: 100%;
                    padding: 3px 0;
                    border-bottom: 1px solid #c9c9c9;
                    border-top: none;
                    border-right: 1px solid #d5d5d5;
                    border-left: 1px solid #f1f1f1;
                    .box-sizing(border-box);
                    background: #fbfbfb;
                    .linear-gradient-no-filter(rgba(251,251,251,0.95), rgba(215,215,215,0.95));
                    .transition(all, linear, 0.1s);
                    .box-shadow(none);
                    
                    &.empty {
                        display: block;
                    }
                    
                    > li {
                        width: auto;
                        position: inherit;
                        border: none;
                        font-family: sans-serif;
                        padding: 0 5px;
                        font-size: 0.5em;
                        background: transparent;
                        margin: 0 5px;
                        
                        a {
                            font-size: 1.333em;
                            padding: 3px 0px 3px 0px;
                            font-weight: normal;
                            display: block;
                            border-bottom: 1px dotted #bababa;
                            line-height: 1.14em;
                            text-shadow: none;
                            color: #333;
                            &:hover {
                                color: #BA0000;
                            }
                        }
                        
                        img {
                            display: none !important;
                        }
                        
                        &:last-child {
                            margin-bottom: 5px;
                            /* Format the last secondary link */
                            /* (duplicated in ie.css with .last class) */
                            > a {
                                border-bottom: none;
                            }
                        }
                    }
                }
            }
        }
        
        ul {
            font-size: 100%;
        }
        
        a {
            color: #555555;
            text-decoration: none;
        }
        
        /* Disable transitions class for instant calculations between states */
        &.disableTransition > ul > li ul {
            .transition(none);
        }
    }
    
    .nav_ready {
    	
    	#wdn_navigation_wrapper {
    		visibility: visible;
    	}
    }
    
    //classes associated with open/expanded nav
    .nav_pinned, .nav_open, .nav_expanded {
        
        #wdn_navigation_bar {
            overflow-y:visible;
            overflow-x:visible;
            height: auto;
        }
    }
    .nav_pinned {
    
        #wdn_navigation_wrapper {
            width: 100%;
            .expand_toggle {
                display: none;
            }
            
            .pin_state a {
                #wdnSprite > .push_pin_down(@dir);   
            }
        }
    }
    
    //classes associated with expanded navigation
    .nav_expanded {
        
        #wdn_navigation_wrapper {
            .expand_toggle a {
                #wdnSprite > .expand_toggle_minus(@dir);
            }
        }
    }
    //classes associated with collapsed navigation
    .nav_collapsed {
    
        #navigation> ul > li {
        
            /* Don't display the the secondary ul's for the top rows */
            /* (duplicated in ie.css with .top-bars class) */
            &:nth-last-child(n+7) ul {
                padding-bottom: 0;
                padding-top: 0;
            }
            
            ul {
                height: 0 !important;
            }
        }
    }
    //classes associated with changing or collapsed nav 
    .nav_changing, .nav_collapsed {
        
        #navigation > ul > li ul li, .pin_state {
            display: none;
        }
    }
}
@media (min-width: 960px) {

}
@media (min-width: 1040px) {
    #wdn_navigation_bar {
        padding: 0;
    }
    #wdn_navigation_wrapper {
    	width: 960px;
    	
    	.pin_state {
    	    right: -5px
    	}
    	
    	
    }
    #navigation {
        background: none;
        
        > ul {
            width: 960px;
            
            > li {
                width: 160px;
                
                &:nth-child(6n+1) {
                    width: 160px;
                }
                
                &:nth-child(6n+6) {
                    width: 160px;
                }
                
                
                > ul {
                    width: 160px;
                    &:after, &:before {
                        display: none;
                    }
                }
            }
        }
    }
    
    //classes associated with open/expanded nav
    .nav_pinned, .nav_open, .nav_expanded {
        
        #wdn_navigation_bar {
            width: auto;
            overflow-y:visible;
            overflow-x:visible;
            height: auto;
        }
    }
}