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

@media (min-width: 768px) {
    .touch {
        #wdn_navigation_bar {
        	float: right;
        	position: relative;
        }
    }
    
    .touch {
        #wdn_navigation_wrapper {
            margin-top: 0;
        }
    }
    
    .touch {
        #navigation {
            padding: 4px;
            width: auto;
            &:before {
                display: none;
            }
        
            ul {
                position: static;
                color: #fff;
                font-size: 85%;
                .box-shadow(none);
                border: 0;
                
                li {
                    background: none;
                    border: 0;
                    font-weight: normal;
                    text-shadow: none;
                    &.hasSecondary {
                    
                        &:after {
                            display: none;
                        }
                    }
                    
                    a {
                        color: #fff;
                        padding: 0.4em 0;
                    }
                }
            }
            
            > ul {
            
                > li {
                    font-weight: bold;
                
                    > ul {
                        border-top: 1px solid rgba(0,0,0,0.2);
                        
                        > li {
                            border-bottom: 1px dashed rgba(255,255,255,0.2);
                            width: 90%;
                            &:first-child {
                                border-top: 1px solid rgba(255,255,255,0.2);
                            }
                        
                        }
                    }
                }
            }
        }
    }
    
    //classes associated with open/expanded nav
    .touch {
        .nav_pinned, .nav_open, .nav_expanded {
            
            #wdn_navigation_bar {
                width: 14%;
                overflow-y:scroll;
                overflow-x:hidden;
                height: 867px;
            }
            #navigation {
                height:  auto;
            }
            
            //we need to make room for the navigation
            #wdn_content_wrapper {
                width: 85%;
            }
        }
    }
    
    //classes associated with in-process navigation
    .touch {
        .nav_changing {
        
        }
    }
    //classes associated with closed nav 
    .touch {
        .nav_unpinned, .nav_collapsed {
        
        }
    }
}