// PLEASE DON'T EDIT THIS FILE. EDIT custom.less INSTEAD.


// Main menu
// -------------------------------

#primary-links {
  .display;
  background: @brand-primary;
  padding: 0;
  @media @tablet {
    clear: both;
    margin: 0;
  }
  .block {
    margin-bottom: 0;
    &-menu-block {
      @media @tablet {
        float: left;
        position: relative;
        z-index: 1;
      }
    }
  }
  .navbar{
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    background: transparent;
    @media @wide {
      padding: 0 20px;
    }
    &-header, &-collapse {
      margin: 0;
      max-height: none;
    }
    &-collapse {
      border: none;
      padding: 0;
      @media @tablet {
        box-shadow: none;
      }
      &.collapse.hide-nav {
        display: none !important;
      }
      &.collapse.in {
        display: block !important;
      }
      .block-menu-block {
        clear: both;
        margin-bottom: 0;
        overflow: visible;
      }
      .region-navigation {
        @media @tablet {
          margin: 0;
        }
      }
      ul.menu {
        margin: 0;
        @media @tablet {
          .body-size;
          line-height: 1;
        }
        li {
          margin-bottom: 1px;
          float: none;
          @media @tablet {
            float: left;
            display: block;
            margin-bottom: 0;
            &.last {
              margin-right: 0;
            }
          }
          a {
            font-size: 14px;
            padding: 5px 20px;
            background-color: @gray-darker;
            color: #fff;
            margin-right: 2px;
            &:focus, &:hover {
              color: #fff;
              background: @gray;
            }
            &.active, &.active-trail {
              color: #fff;
              background-color: @gray-dark;
            }
            @media @tablet {
              font-size: 12px;
              padding: 15px 10px;
              transition: all 0.1s ease-in-out 0s, visibility 0s linear 0.1s, z-index 0s linear 0.01s;
              &.active-hover {
                background: #616a8a;
              }
            }
            @media @desktop {
              font-size: 14px;
              padding: 20px 15px;
              ul.menu {
                li a {
                  padding: 3px 15px;
                }
              }
            }
          }
          &.active-trail {
            margin-bottom: 0;            
            li a {
              &:before {
                content: "— ";
              }
            } 
            > a {
              margin-bottom: 1px;
            }
            .breakpoint(@screen-tablet, {
              li a {
                &:before {
                  content: "";
                }
              }
            });
            ul.menu {
              .breakpoint(@screen-tablet, {
                display: none;
              });
            }

          }
          &.expanded {
            ul.menu {
              margin: 0;
              li {
                margin-bottom: 1px;
              }
            }
            &:not(.active-trail) {
              ul.menu {
                display: none;
              }
            }
          }
          &.expanded, &.expanded:not(.active-trail) {
            .breakpoint(@screen-tablet, {
              ul.menu {
                display: block;
                position: absolute;
                left: 0;
                opacity: 0;
                visibility: hidden;
                background: @gray-trans;
                min-width: 260px;
                padding: 20px 0;
                transition: all 0.1s ease-in-out 0s, visibility 0s linear 0.1s, z-index 0s linear 0.01s;
                z-index: 1;
                li {
                  float: none;
                  display: block;
                  a {
                    display: inline-block;
                    text-transform: none;
                    color: @pitt-blue;
                    line-height: normal;
                    padding: 3px 15px;
                    background: transparent;
                    &:hover, &.active {
                      color: @bright-blue;
                      background: transparent;
                    }
                  }
                  ul.menu {
                    margin-top: 0;
                    position: relative;
                    padding: 0;
                    li {
                      display: none;
                      a {
                        &:before {
                          content: " -";
                          padding: 0 2px 0 10px;
                        }
                      }
                      li {
                        display: none;
                      }
                    }
                  }
                }
              }
              &:hover {
                ul.menu {
                  transition-delay: 0s, 0s, 0.3s;
                  opacity: 1;
                  visibility: visible;
                }
              }
            });
          }
        }
      }
    }
  }
}

.navbar-header {
  position: relative;
  clear: both;
  .navbar-toggle {
    padding: 0;
    margin-top: 9px;
    margin-bottom: 18px;
    margin-right: 20px;
    border: none;
    border-radius: 0;
    float: left;
    .icon-bar {
      width: 24px;
      background-color: #fff;
    }
    &:hover, &:focus {
      background-color: transparent;
    }
  }
}

// Secondary Menu (Sidebar)
// -------------------------------

#block-menu-block-2, #block-menu-block-3, #block-menu-block-4 {
	h2 {
  	.display;
  	.body-size-plus;
  	color: #fff;
  	text-transform: uppercase;
  	letter-spacing: 0.1em;
		padding: 18px 25px 10px;
    margin: 0;
    background: @brand-primary;
	}
  .menu-block-wrapper {
    clear: both;
  }
	ul.menu {
    list-style: none;
		padding: 0 0 18px;
		margin: 0;
    background: @brand-primary;
		li {
      padding: 0;
      margin: 0;
      .body-size;
      line-height: 1.25;
      list-style: none;
			a {
        display: block;
        padding: 10px 25px;
        color: #fff;
			}
      a:hover,
      a:focus,
      a.active {
        color: @pitt-blue;
        background: @pitt-gold;
      }
      ul.menu {
        padding: 0 0 5px;
        margin-top: -3px;
        li a {
          font-size: 90%;
          padding: 3px 25px;
          &:before {
            content: "— ";
          }
        }
      }
      &.active-trail {
        ul.menu {
          margin-top: 0;
        }
      }
		}
	}
}