.info
 %h1 Flat Navigation
 %span
  Made with
  %i.fa.fa-heart.animated.infinite.pulse
  by
  %a{:href => "http://andytran.me"} Andy Tran
  .spoilers
   (Dropdown Menu) | (Very Cool!)
.nav
 %ul
  %li
   %a.logo{:href => "http://andytran.me"}
    %img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/logo_(1).svg"}
  %li
   %a{:href => "#portfolio"} Portfolio
  %li
   %a{:href => "#calendar"}
    Calendar
    %i.fa.fa-caret-down
   %ul.menu
    %li
     %a{:href => "#event_one"} Event #1
    %li
     %a{:href => "#event_two"} Event #2
    %li
     %a{:href => "#event_three"} Event #3
  %li
   %a{:href => "#resume"} Resume
  %li
   %a{:href => "#blog"} Blog
  %li
   %a{:href => "#contact"}
    .fa.fa-envelope

@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-97/variables.less';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-97/mixins.less';

@accent: #ffce54;

body {
  background: #e9e9e9;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  .font-smoothing;
}

.nav {
  display: inline-block;
  background: @white;
  border-radius: 3px;
  border-top: 2px solid @accent;
  height: 60px;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      position: relative;
      display: inline-block;
      height: 60px;
      border-left: 1px solid fade(@black, 5%);
      vertical-align: middle;
      float: left;
      &:first-child,
      &:nth-child(2),
      &:last-child {
        border-left: 0;
      }
      &:nth-child(2),
      &:nth-last-child(2) {
        a {
          &:before,
          &:after {
            .transitions;
          }            
        }          
      }
      &:nth-child(2) {
        > a {
          &:before {
            z-index: 1;
            position: absolute;
            top: 0;
            left: -15px;
            content: '';
            width: 0;
            height: 0;
            display: block;
            border-right: 15px solid @white;
            border-top: 60px solid transparent;
          }
        }
      }
      &:nth-last-child(2) {
        a {
          &:after {
            position: absolute;
            z-index: 1;
            top: 0;
            right: -15px;
            content: '';
            width: 0;
            height: 0;
            display: block;
            border-left: 15px solid @white;
            border-bottom: 60px solid transparent;
          }
        }
      }
      &:last-child {
        a {
          background: @accent;
          padding: 0 25px 0 30px;
          color: @white;
          &:hover {
            background: @accent;
          }
        }
      }
      a {
        position: relative;
        display: block;
        padding: 0 25px;
        color: @gray;
        font-size: 14px;
        line-height: 60px;
        text-decoration: none;
        .transitions;
        &:hover {
          background: darken(@white, 5%);
          &:before {
            border-right: 15px solid darken(@white, 5%);
          }
          &:after {
            border-left: 15px solid darken(@white, 5%);
          }
        }
        &.logo {
          background: @accent;
          width: 30px;
          height: 30px;
          padding: 15px 30px 15px 15px;
          line-height: 1;
          vertical-align: middle;
          &:hover {
            background: @accent;
          }
          img {
            width: 100%;
          }
        }
        i {
          margin: 0 0 0 6px;
        }
      }
      .menu {
        display: none;
        position: absolute;
        background: @white;
        top: 100%;
        width: 180px;
        border-top: 1px solid fade(@black, 5%);
        border-bottom: 3px solid @accent;
        border-radius: 0 0 3px 3px;
        overflow: hidden;
        li {
          display: block;
          width: 100%;
          height: 45px;
          margin: 0;
          border-bottom: 1px solid fade(@black, 5%);
          &:nth-child(2),
          &:nth-last-child(2) {
            height: 45px;
            a {
              &:before,
              &:after {
                content: '';
                display: none;
              }
            }
          }
          a {
            background: @white;
            padding: 0 15px 0 30px;
            color: @gray;
            line-height: 45px;
            text-align: left;
            &:hover {
              background: darken(@white, 5%);
            }
          }
        }
      }
    }
  }
}

.info {
  width: 300px;
    margin: 50px auto;
  text-align: center;
  h1 {
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    color: @dark_gray;
  }
  span {
    color: @gray;
    font-size: 12px;
    a {
      color: @black;
      text-decoration: none;
    }
    .fa {
      color: @accent;
    }
    .spoilers {
      color: @light_gray;
      margin-top: 5px;
      font-size: 10px;
    }
  }
}

$(".nav li").hover(function () {
	$(this).children("ul").stop().delay(200).animate({height: "toggle", opacity: "toggle"}, 200);
});