/*** breakpoints ***/

@desktop: ~"screen and (min-width: 1000px)";

/*** less variables ***/

@primary: #2c3e50; /* dark navy */
@secondary: #34495e; /* lighter navy */
@sidebar: #ecf0f1; /* gray */


.header {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    background-attachment: fixed;
    height: auto;
    width: 260px; max-width: 260px;
    margin-bottom: 0;
    
    /* inline media query for desktop */
    @media @desktop { width: 280px; max-width: 280px; }
    
    .header-inner {
    
        .tool-app {}
        
        .tool-header { 
            h1.tool-name { 
                
                a { text-decoration: none; 
                    &:hover { text-decoration: underline; }
                }
                
            }
        }
        .tool-list { background:none;
            
            -moz-transition: 0;
            -ms-transition: 0;
            -o-transition: 0;
            -webkit-transition: 0;
            transition: 0;
            
            .tool-list-inner { 
                margin: 0;
                margin-top: 20px;
                overflow-y: auto;
            }
        }
    }

}

.content {
    
    .content-inner { padding: 0 25px; }
    .container { }
    
    margin-right: auto;
    margin-left: 260px;
    
    @media @desktop { 
        margin-left: 280px;
    }
    
    .navbar { margin: 1em 0; }
}


.footer { position: fixed; left: 0; bottom: 0; z-index: 100; margin: 0; border-top:  solid 1px darken(@sidebar, 5%); width: 260px; padding: 15px 10px; height: 65px;
    
    @media @desktop { 
        width: 280px; 
    }
    
    .footer-tagline { font-size: .85em; }
}


.user-service { 
    
    position: absolute;
    top: 50%;
    margin-top: -80px;
    right: 50%;
    margin-right: -300px;
    width: 300px;
}

