/* Navigation (with dropdowns) */

.navbar {
  width: 100%;
  min-height: 54px;
  display: block;
  margin-bottom: 3em;
  background: $navbar-color; // Change this color in settings to change the navbar color
  position: relative;
  @include respond(all-phones) {
    border: none;
    .column, .columns {
      min-height: 0;
    }
  }

  &.fixed {
    position: fixed;
    z-index: 99999;
  }
  &.pinned {
    position: absolute;
  }
  a.toggle {
    display: none;

    // Navigation Toggle Mobile styles
    @include respond(all-phones) {
      top: 18%;
      right: 4%;
      width: 46px;
      position: absolute;
      text-align: center;
      display: inline-block;
      color: $navbar-link-color;
      background: $navbar-color;
      @include line-and-height(40px);
      @include border-radius($button-radius);
      @include font-size($larger);
      &:hover {
        background: lighten($navbar-color, 5%);
      }
      &:active, &.active {
        background: darken($navbar-color, 5%);
      }
    }
  }
}

.navbar .logo {
  display: none;
  margin: 0 $gutter 0 0;
  padding: 0;
  @include line-and-height(height-calc($larger - 3));
  font-size: 1.5rem;
  color: $primary-color;
  font-weight: bold;
  a {
    display: block;
    padding: 0;
    overflow: hidden;
	font-family: 'Dancing Script', cursive;
	font-size: 1.5rem;
	color: $primary-color;
    @include line-and-height(height-calc($larger - 3));
    &:hover{text-decoration:none;}
	img {
      max-height: 95%;
    }
  }

  // Navbar Logo Mobile Styles
  @include respond(all-phones) {
    float: $default-float;
    display: inline;
	font-size: 1.5rem;
    a {
	  font-size: 1.5rem;
      padding: 0;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
      }
    }
  }
}

.navbar ul {
  display: table;
  vertical-align: middle;
  margin: 0;
  float: left;

  // Navbar Navigation List Mobile Specific Styles
  @include respond(all-phones) {
    position: absolute;
    display: block;
    width: 100% !important;
    height: 0;
    max-height: 0;
    top: 54px;
    left: 0;
    overflow: hidden;
    text-align: center;
    background: darken($navbar-color, 5%);
    &.active {
      height: auto;
      max-height: 600px;
      z-index: 999998;
      @include transition-duration(.5s);
      @include box-shadow(0 2px 2px darken($navbar-color, 15%));
    }
  }

  li {
    display: table-cell;
    text-align: center;
    padding-bottom: 0;
    margin: 0;
    @include line-and-height(height-calc($larger - 3));

    // Navbar List Item Mobile Specific Styles
    @include respond(all-phones) {
      display: block;
      position: relative;
      min-height: 50px;
      max-height: 320px;
      height: auto;
      width: 100%;
      border-right: 0 !important;
      @include box-shadow(none);
      @include transition-duration(.5s);
    }

    > a {
      display: block;
      padding: 0;
      white-space: nowrap;
      color: $navbar-link-color;
	  text-align:left;
	  font-weight: 700;
	  @include respond(all-phones) {padding: 0 ms(0);};
      //text-shadow: 0 1px 2px darken($navbar-color, 20%),
       //            0 1px 0 darken($navbar-color, 20%);
      @include line-and-height(height-calc($larger - 3));
      @include font-size($norm);
      i.icon-popup {
        position: absolute;
      }
    }
    .btn {
      border-color: darken($navbar-color, 30%) !important;
    }
    &.field {
      margin-bottom: 0 !important;
      margin-right: 0;
      @include respond(all-phones) {
        padding: 0 ms(0);
      }
      input.search {
		@include shape(oval);
        background: darken($navbar-color, 20%);
        border: none;
        color: $default-color;
		max-width: 272px !important;
		float: right;
		@include respond(all-phones) {
			float: left;
		}		
      }
    }
    .dropdown {
      width: auto;
      min-width: 0;
      max-width: $min-device-width;
      height: 0;
      position: absolute;
      background: #ffffff;
      overflow: hidden;
      z-index: 999;
    }
    // Navigation Dropdown Mobile Specific Styles
    @include respond(all-phones) {
      .dropdown {
        width: 100%;
        max-width: 100%;
        position: relative;
        @include box-shadow(none !important);
      }
      &.active .dropdown {
        border-bottom: 1px solid darken($navbar-color, 10%);
      }
      &.active .dropdown ul {
        position: relative;
        top: 0;
        background: darken($navbar-color, 8%);
        min-height: 50px;
        max-height: 250px;
        height: auto;
        overflow: auto;
        @include box-shadow(none !important);
        li {
          min-height: 50px;
          border-bottom: darken($navbar-color, 5%);
          a {
			padding:0 ms(0);
            color:  $navbar-link-color;
            border-bottom: 1px solid darken($navbar-color, 10%);
            &:hover {color: $body-link-color;}
          }
        }
      }
    }
  }
}

.navbar {
  // Mobile Only Navbar Styles
  @include respond(tablets) {
    > ul > li > .btn a {
      padding: 0 $small 0 $small !important;
    }
    ul > li .dropdown ul li.active .dropdown {
      left: -$min-device-width;
    }
  }
}

.navcontain {
  height: $navcontain-height;
  @include respond(portrait-tablets) {
    height: auto;
  }
}


// Dropdown menu styles

.navbar li .dropdown {
  width: auto;
  min-width: 0;
  max-width: $min-device-width;
  height: 0;
  position: absolute;
  background: lighten($default-color, 3%);
  overflow: hidden;
  z-index: 999;
  // Navigation Dropdown Mobile Specific Styles
  @include respond(all-phones) {
    .dropdown {
      width: 100%;
      max-width: 100%;
      position: relative;
      @include box-shadow(none !important);
    }
    &.active .dropdown {
      border-bottom: 1px solid darken($navbar-color, 10%);
    }
    &.active .dropdown ul {
      position: relative;
      top: 0;
      background: darken($navbar-color, 8%);
      min-height: 50px;
      max-height: 250px;
      height: auto;
      overflow: auto;
      @include box-shadow(none !important);
      li {
        min-height: 50px;
        border-bottom: darken($navbar-color, 5%);
        a {
          color: $navbar-link-color;
          border-bottom: 1px solid darken($navbar-color, 10%);
          &:hover {color: $body-link-color;}
        }
      }
    }
  }
}

.navbar li .dropdown ul {
  margin: 0;
  display: block;
  > li {
    position:relative;
    display: block;
    width: 100%;
    float: left;
    text-align: left;
    height: auto;
    @include border-radius(0);
    @include respond(tablets) {
      max-width: $min-device-width;
      word-wrap: break-word;
    }
    a {
      display: block;
      padding: 0 20px;
      color: $navbar-link-color;
      border-bottom: 1px solid $horizontal-rule-color;
      text-shadow: none;
      @include line-and-height(height-calc($large - 3));
      @include respond(all-phones) {
        padding: 0 $gutter-in-px;
      }
    }
    .dropdown {
      display: none;
      background: lighten($default-color, 10%);
    }
  }
  li:first-child a {
    @include border-radius(0);
  }
}

.gumby-no-touch .navbar ul li:hover > a,
.gumby-touch .navbar ul li.active > a {
  position: relative;
  background: #fff;
  color: $header-link-hover-color;
  z-index: 1000;
  text-decoration: none;
}

.gumby-no-touch .navbar ul li:hover .dropdown,
.gumby-touch .navbar ul li.active .dropdown {
  min-height: 50px;
  max-height: $tablet-device-width - 207;
  overflow: visible;
  height: auto;
  width: 100%;
  padding: 0;
  border-top: 1px solid darken($navbar-color, 5%);
  @include box-shadow(0px 3px 4px rgba(0,0,0,.3));
}

.gumby-no-touch .navbar ul li:hover .dropdown ul {
  position: relative;
  top: 0;
  min-height: 50px;
  max-height: 250px;
  height: auto;
  @include box-shadow(none !important);
  @include transition-duration(.5s);
  @include respond(all-phones) {
    overflow: auto;
    background: darken($navbar-color, 8%);
    li {
      border-bottom: darken($navbar-color, 5%);
      a {
        color: $navbar-link-color;
        border-bottom: 1px solid darken($navbar-color, 10%);
        &:hover {color: $body-link-color;text-decoration: none;}
      }
    }
  }
}

.gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown,
.gumby-touch .navbar li .dropdown ul > li.active .dropdown {
  border-top: none;
  display: block;
  position: absolute;
  z-index: 9999;
  left: 100%;
  top: $nav-distance;
  margin-top: 0;
  @include respond(all-phones) {
    position: relative;
    left: 0;
    ul {
      background: darken($navbar-color, 15%) !important;
    }
  }
}

.gumby-no-touch .navbar li .dropdown ul li a:hover {
  background: $default-color;
  text-decoration: none;
  color: $header-link-hover-color !important;
}

.gumby-touch .navbar a:hover {
  color: $header-link-hover-color !important;
  text-decoration: none;
}

.subnav {
  display: block;
  width: auto;
  overflow: hidden;
  margin: 0 0 18px 0;
  padding-top: 4px;
  li, dt, dd {
    float: left;
    display: inline;
    margin-left: 9px;
    margin-bottom: 4px;
    &:first-child {
      margin-left: 0;
    }
  }
  dt {
    color: $default-color;
    font-weight: normal;
  }
  li a, dd a {
    color: $navbar-link-color;
    font-size: 15px;
    text-decoration: none;
    @include border-radius(4px);
  }
  li.active a, dd.active a {
    background: $navbar-color;
    padding: 5px 9px;
    text-shadow: 0 1px 1px $navbar-color;
  }
}