#navbar, #navbar-hidden { position: fixed; top: 0; left: 0; right: 0; height: auto; min-height: 0.75cm; z-index: @z-index-navbar; .navbar-btn { margin: 0 -3px 0 0 !important; height: 6vh; min-height: 0.75cm; min-width: 1cm; .gradient(#42444c, #42444c, #494c56); border-top: none; border-left: 1px solid #62646c; border-right: 1px solid #2f3138; border-bottom: none; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); position:relative; cursor: pointer; text-align: center; vertical-align: middle; font-size: 2.5vh; line-height: 4vh; float: left; &:hover { background: #6d6f77; color: #ffffff; } &:active, &.active { background: #33343b; color: #999a9d; border-top: none; border-left: 1px solid #33343b; border-right: 1px solid #33343b; border-bottom: none; background-image: -moz-linear-gradient(top, #33343b, #33343b), -moz-linear-gradient(bottom, #58ade3, #58ade3); background-image: -webkit-linear-gradient(top, #33343b, #33343b), -webkit-linear-gradient(bottom, #58ade3, #58ade3); background-size: 100px 45px, 100% 98%; background-repeat: no-repeat; } i { padding: 0 15px; } } } #navbar { display: none; background: #333; .gradient(#42444c, #42444c, #494c56); border-left: none; border-right: none; border-bottom: 1px solid #2f3138; text-align: center; .navbar-btn-group-left { display:block; float:left; } .navbar-btn-group-right { display:block; float:right; } } #hide-menu-btn { z-index: @z-index-navbar + 1; } #navbar-hidden { display: block; text-align: right; }