@import "woople-theme/variables.css.less";
@import "woople-theme/colours.css.less";

.menu {
  background: @primary;
  padding-right:10px;

  .box-shadow(@default-shadow);

  -webkit-transition: right, -webkit-transform 0.25s;
  -moz-transition: right, -moz-transform 0.25s;
  -ms-transition: right, -ms-transform 0.25s;
  -o-transition: right, -o-transform 0.25s;
  transition: right, transform 0.25s;

  .menu-content {
    position:relative;
  }

  .nav-list {
    margin-top:10px;
    margin-bottom:30px;

    .nav-header {
      color:@menuHeadingColour;
    }

    > li > a {
      color:@menuLinkColour;
      margin-right:-24px;

      em {
        font-size:1.25em;
        line-height:1.5em;
        display:block;
        font-style:normal;
      }
    }

    > li > a, .nav-header {
      text-shadow:0 1px 0 rgba(0,0,0,0.5);
    }

    .active {
      position:relative;

      > a {
        background-color:@menuActiveColour;
        color:@menuHeadingColour;
        margin-left:-18px;
        text-indent:3px;
      }

      .badge {
        background-color: @menuActiveLabelColour;
      }
    }
  }

  .nav > li > a:hover {
    background-color:@menuHoverColour;
    margin-left:-15px;
    text-indent:0;

    .badge {
      background-color:@menuHoverLabelColour;
    }
  }

  .cert-status {
    width: 25px;
    height: 25px;
    vertical-align:text-top;
    background-repeat:no-repeat;
    display:inline-block;
    position:absolute;
    left:4px;
    top:-6px;
  }
  .red {
    background-image: url('/assets/woople-theme/certification/red-icon.png');
  }
  .green {
    background-image: url('/assets/woople-theme/certification/green-icon.png');
  }
  .yellow {
    background-image: url('/assets/woople-theme/certification/yellow-icon.png');
  }

  .badge {
    background-color: @menuLabelBackground;
    border-top:solid 1px rgba(255,255,255,0.25);
    .box-shadow(0px 1px rgba(0,0,0,0.25));
    line-height:1em;
    margin-top:4px;
    font-size:11px;
    float:right;
  }

  .label-icon {
    padding-left:31px;
    position:relative;

    i {
      position:absolute;
    }
  }
}

@media (max-width: 768px) {
  #navigation:target {
    .menu {
      .translate(0,0);
      width:@menuWidth;
    }
  }

  .menu .nav-list > li > a {
    margin-right:-14px;
  }

  .no-csstransform {
    .container {
      .menu {
        left: -250px;
      }
    }
  }

  .container {
    .menu {
      padding-right:0;
      position:absolute;
      
      margin:0;
      .translate(-250px, 0);
    }
  }
}