#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 {
	  dispaly:block;
	  float:right;
  }
}

#hide-menu-btn {
  z-index: @z-index-navbar + 1;
}

#navbar-hidden {
  display: block;
  text-align: right;
}