@charset "UTF-8";

header.banner {
	border-top: 0;
	min-width: 100%;
	width: auto;
  background: $ubuntu-orange;
  display: block;
  position: relative;
  z-index: 2;

	.nav-primary {
	  border: 0;
		margin: 0 auto;
		overflow: hidden;

		ul {
		  border-right: 1px solid lighten($ubuntu-orange, 10%);
		  float: left;
		  margin: 0;
		  position: relative;

			li {
			  border-left: 1px solid darken($ubuntu-orange, 5%);
			  float: left;
			  list-style-image: none;
			  margin: 0;
			  text-indent: 0;
			  vertical-align: bottom;
			}

			li:last-child {
			  border-right: 1px solid darken($ubuntu-orange, 5%);
			}

			li a:link,
			li a:visited {
			  font-size: 14px;
			  border-left: 1px solid lighten($ubuntu-orange, 7%);
			  color: #fff;
			  display: block;
			  margin-bottom: 0;
			  padding: 14px 14px 13px;
			  position: relative;
			  text-align: center;
			  text-decoration: none;
			    -webkit-font-smoothing: subpixel-antialiased;
			    -moz-font-smoothing: subpixel-antialiased;
			    -o-font-smoothing: subpixel-antialiased;
			  font-smoothing: subpixel-antialiased;
			}

			a.active {
			  background: #B83A10;
			  border-left: 1px solid lighten($ubuntu-orange, 7%);
			}

			li a:hover {
				background: #e1662f;
				border-top: 0;
				@include box-shadow(inset 0 2px 2px -2px #777);
			}
		} // end ul
	} // nav-primary

} // end header.banner


// Responsive header navigation
#main-navigation-link { display: none; }

header.banner .nav-toggle {
	position:absolute;
	right: 0;
	display: block;
	width: 48px;
	height: 48px;
	text-indent: -99999px;
	background-image: url(#{$asset-path}icons/navigation-menu-plain.svg);
	@include background-size(25px auto);
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

header.banner .no-script {
	display: none;
}

.opera-mini header.banner .nav-toggle,
.no-svg header.banner .nav-toggle {
	background-image: url(#{$asset-path}icons/navigation-menu-plain.png);
}

header.banner nav ul {
	background-color: $nav-bg;
	display: none;
	float: left;
}
header.banner .nav-primary.active {
	@include box-shadow(0 1px 2px 1px rgba(120, 120, 120, 0.2));
	padding: 0;
	border-bottom: 1px solid $nav-border-dark;
}

header nav ul.active {
	display: block;
}

header.banner .nav-primary ul li,
header.banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:active {
	display: block;
	padding: 0;
	margin: 0;
	border: none;
}

header.banner .nav-primary ul li a:hover {
	@include box-shadow(none);
	background-color: $nav-hover-bg;
}
header.banner .nav-primary ul li a.active {
	background-color: $nav-active-bg;
}

header.banner .nav-primary ul li {
	border-bottom: 1px solid #F2F2F4;
	font-size: 16px;
}

header.banner .nav-primary ul li:last-child {
	border: 0;
}

header.banner nav.nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active {
	padding: 14px 14px 13px;
	text-align: left;
}

header.banner nav.nav-primary ul.active li ul {
	display: none;
}

#menu.active:after {
  background-image: url(#{$asset-path}patterns/nav-arrow.svg);
  background-repeat: no-repeat;
  background-position: 50% 26px;
  content: "";
  display: block;
  height: 23px;
  margin-left: 0;
  padding-bottom: 17px;
  position: relative;
  top: -3px;
  width: 48px;
  z-index: 999;
}
html.no-svg, .opera-mini {
  #menu.active:after {
    background-image: url(#{$asset-path}patterns/nav-arrow.png);
  }
} // End responsive navigation

/* nav-secondary */
.nav-secondary {
  border-bottom: 1px solid #dfdcd9;
  margin-bottom: 0;


  ul {
    float: left;
    margin-bottom: 10px;
    margin-left: 2px;

    li {
      float: left;
      margin-top: 16px;
      font-size: 14px;
	    margin-right: 15px;

      a:link,
      a:visited {
        color: #333;
        font-size: 14px;
        float: left;
      }

      a:hover,
      a:active {
        color: $ubuntu-orange;
        text-decoration: none;
      }
    }

    li,
    li.active a:link,
    li.active a:visited {
      color: $ubuntu-orange;
      text-decoration: none;
    }
  }
  ul.breadcrumb {
    margin-left: 20px;

    li,
    li a:link,
    li a:visited {
      color: $warm-grey;
      margin-right: 8px;
    }

    li.active a:link,
    li.active a:visited {
      color: $ubuntu-orange;
    }
  }
}

header.banner h2 {
	@include font-size (25);
	display: block;
	left: 4px;
	margin-bottom:0;
	position: relative;
	text-transform: lowercase;
	top: 14px;
}

header.banner h2 a:link, header.banner h2 a:visited, header.banner a {
	color: #fff;
	float: left;
	text-decoration:none;
}

header.banner {
	.logo {
	  border-left: 0;
  	float: left;
    height: 48px;
  	overflow: hidden;
	}

  .logo-ubuntu {
  	background: url("#{$asset-path}ubuntu-logo.png") no-repeat scroll 0 10px transparent;
    font-size: 18px;
    margin-bottom: 0;
    position: relative;
    text-transform: lowercase;
    float: left;
    margin: 0;
    display: inline-block;
    height: 32px;
    min-width: 128px;
    margin-right: -20px;
		margin-left: 10px;
    padding: 7px 14px 9px 0;

    img {
      margin-right: 8px;
      position: absolute;
      left: -999em;
    }

    span {
      float: left;
      font-size: 23px;
      font-weight: 300;
      padding-left: 122px;
      padding-right: 20px;
      position: relative;
      top: 5px;
    }

  }
  .nav-primary.nav-left {
    .logo-ubuntu {
      float: right;
    }
  }
  .nav-primary.nav-right {
    .logo-ubuntu {
			background-image: url("#{$asset-path}logos/logo-ubuntu-white.svg");
			background-size: 107px 25px;
      float: left;
    }
  }
}

html.no-svg, .opera-mini {
  header.banner .nav-primary.nav-right .logo-ubuntu {
    background-image: url("#{$asset-path}logos/logo-ubuntu-white.png");
  }
}

@media only screen and (max-width: 295px) {

// this changes the logo to the circle of friends on screens below 295px
	header.banner {
		.nav-primary.nav-right .logo-ubuntu,
		.logo-ubuntu {
			@include background_size(20px 20px);
			background: url('#{$asset-path}logos/logo-ubuntu_cof-white_orange-hex.svg') 0 50% no-repeat;
			min-width: 0;
			width: 38px;
		}
	}
	header.banner .logo-ubuntu span {
		padding-left: 38px;
	}
	
} // end @@media only screen and (max-width: 295px)

html.no-svg, .opera-mini {
  header.banner .logo-ubuntu {
		background-image: url('#{$asset-path}logos/logo-ubuntu_cof-white_orange-hex.png');
  }
}

@media only screen and (max-width : 768px) {
  header.banner .nav-primary {
    @include box-shadow(0 1px 2px 1px rgba(0, 0, 0, 0.2));
  }
  
  header.banner .nav-primary.active {
    @include box-shadow(none);
    padding: 0;
  }

  header nav ul.active {
    float: left;
  }
  
  header nav ul.active li:last-child a:link,
  header nav ul.active li:last-child a:visited {
		border-bottom: 0;
	}
	  
  header.banner .nav-primary ul {
    position: relative;
    width: 100%;
  }

  header.banner .nav-primary ul li.active {
    a:link,
    a:visited {
      color: #333;
      font-weight: 700;
    }
  }

  header.banner .nav-primary ul li,
  header.banner .nav-primary ul li a:link,
  header.banner .nav-primary ul li a:visited,
  header.banner .nav-primary ul li a:active {
    @include box-sizing();
    background: transparent;
    border: none;
    display: block;
    font-weight: 300;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  header.banner .nav-primary ul li a:link,
  header.banner .nav-primary ul li a:visited,
  header.banner .nav-primary ul li a:hover,
  header.banner .nav-primary ul li a:active {
    background-color: $nav-bg;
    border-bottom: 1px solid $nav-border-dark;
    color: #333333;
    font-size: 1em;
  }
  
  header.banner .nav-primary ul li:nth-last-child(-n+2) a:link,
  header.banner .nav-primary ul li:nth-last-child(-n+2) a:visited  {
		border: 0;
	}	

  header.banner .nav-primary ul li a:hover {
    @include box-shadow(none);
  	background: lighten($nav_bg, 3%);
  }
  header.banner .nav-primary ul li a.active {
    background-color: $nav-active-bg;
  }

  header.banner nav.nav-primary ul li a:link,
  header.banner .nav-primary ul li a:visited,
  header.banner .nav-primary ul li a:hover,
  header.banner .nav-primary ul li a:active {
    padding: 8px 10px;
    text-align: left;
  }

  header.banner .nav-primary ul li {
    @include box-sizing();
    background: transparent;
    border-bottom: 0;
    border-right: 1px solid $nav-border-dark;
    float: left;
    width: 50%;
  }

  .nav-secondary {
    background: #fff;

    ul.second-level-nav {
      border-top: 1px solid $nav-border-dark;
      display: none;
      margin-bottom: 0;
      margin-left: 0;
      padding-bottom: 10px;
      padding-top: 10px;
      width: 100%;

      li {
        @include box-sizing();
        width: 50%;
        margin: 0;
        float: left;

        a,
        a:link,
        a:visited {
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: block;
          height: 100%;
          padding: 10px 10px 10px 20px;
          width: 100%;
        }
        &.active {
          a,
          a:link,
          a:visited {
            color: #333;
            font-weight: 700;
          }
        }
      }
    } /* end .second-level-nav */
    ul.third-level-nav {
      display: none;
      margin-bottom: 0;
      width: 100%;
      padding-bottom: 20px;

      li {
        @include box-sizing();
        width: 50%;
        margin: 0;
        float: left;
        padding-left: 30px;

        a,
        a:link,
        a:visited {
          @include box-sizing();
          padding: 10px 10px 10px 0;
          display: block;
          width: 100%;
          height: 100%;
        }

        &.active {
          a,
          a:link,
          a:visited {
            color: #333;
            font-weight: 700;
          }
        }

        &.single-link {
          width: 100%;
        }
      } /* end li */

      li:only-child {
        width: 100%;
      }
    } /* end third-level-nav */

    ul.breadcrumb {
      @include box-sizing();
      width: 100%;
      margin-left: 0;
      margin-bottom: 0;

      li:first-of-type {
        border-bottom: 1px solid $nav-border-dark;
        margin-bottom: -1px;
      }

      li {
        @include box-sizing();
        color: #fff;
        width: 100%;
        display: block;
        height: 40px;
        margin: 0;

        a,
        a:link,
        a:visited {
          @include box-sizing();
          font-size: 16px;
          width: 100%;
          color: #333333;
          display: block;
          margin-right: 0;
          text-decoration: none;
          padding: 8px 10px 0 10px;
        }


        &.active {
          margin-top: 12px;

          a,
          a:link,
          a:visited {
            color: #333;
            font-weight: 700;
          }
        }

        &:nth-of-type(2n) {
          margin-top: 12px;
        }

        .after {
          background-image: url(#{$asset-path}patterns/nav-down-arrow.svg);
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 18px;
          float: right;
          height: 18px;
          margin-right: -5px;
          margin-top: -6px;
          padding: 10px;
          position: relative;
          right: 0;
          top: 0;
          width: 18px;
        }
      }

      li + li {
        display: none;

        a:link,
        a:active,
        a:visited {
          padding-left: 20px;
        }

        a.after {
          background-image: none;
        }
      }
    }

    &.open {
      ul.breadcrumb li a:after,
      ul.breadcrumb li a:link:after,
      ul.breadcrumb li a:visited:after {
        background-image: url(#{$asset-path}patterns/nav-up-arrow.svg);
      }
      ul.breadcrumb li + li a.after {
        background-image: none;
      }
      ul.breadcrumb li .after {
        background-image: url(#{$asset-path}patterns/nav-up-arrow.svg);
        margin-top: -7px;
      }
      ul.second-level-nav,
      ul.third-level-nav,
      ul.breadcrumb li + li {
        display: block;
      }
    }
  }/* end nav-secondary */

  .no-js {
    .nav-secondary ul.second-level-nav { display: block; }

    #main-navigation-link {
      position: absolute;
      right: 10px;
      top: 12px;
      width: 20px;
      height: 28px;
      z-index: 999;
      text-indent: -999em;
      display: block;

      a {
        background-image: url("#{$asset-path}icons/navigation-menu-plain.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 25px auto;
        display: block;
        width: 28px;
        height: 28px;
        position: absolute;

      }
    }
  }

  html.no-svg, .opera-mini {
  .nav-secondary ul.breadcrumb {
      li .after {
        background-image: url(#{$asset-path}patterns/nav-down-arrow.png);
      }
      &.open {
        ul.breadcrumb li a:after,
        ul.breadcrumb li a:link:after,
        ul.breadcrumb li a:visited:after {
          background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
        }
        ul.breadcrumb li .after{
          background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
        }
      }
    }
    header.banner .nav-primary #google-appliance-search-form button[type="submit"] {
      background-image: url("#{$asset-path}search-black.png");
    }
  }

  html.no-svg, .opera-mini {
    .nav-secondary ul.breadcrumb {
      li .after {
        background-image: url(#{$asset-path}patterns/nav-down-arrow.png);
      }
      &.open {
        ul.breadcrumb li a:after,
        ul.breadcrumb li a:link:after,
        ul.breadcrumb li a:visited:after {
          background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
        }
        ul.breadcrumb li .after{
          background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
        }
      }
    }
    header.banner .nav-primary #google-appliance-search-form button[type="submit"] {
      background-image: url("#{$asset-path}search-black.png");
    }
  }

  header.banner {
    .nav-toggle {
      background-image: url("#{$asset-path}icons/navigation-menu-plain.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 25px auto;
      cursor: pointer;
      display: block;
      height: 48px;
      position: absolute;
      right: 0;
      text-indent: -99999px;
      width: 48px;
    }
  }


  html.no-svg, .opera-mini {
    header.banner .nav-toggle {
      background-image: url("#{$asset-path}icons/navigation-menu-plain.png");
    }
  }

}

@media only screen and (min-width : 768px) {

  header.banner .nav-primary ul li {
    border-bottom: 0;
  }
}

@media only screen and (min-width : 769px) {

  header.banner {
      -moz-box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
      -webkit-box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
    box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;

    nav.nav-primary {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
      box-shadow: none;
			border-bottom: 0;

    }
  }

  header.banner .nav-toggle {
   display: none;
  }

  header.banner nav ul {
    background-color: transparent;
    display: block;
  }

  header.banner .nav-primary ul li {
    border-left: 1px solid #C64012;
  }

  header.banner .nav-primary ul li a:active,
  header.banner .nav-primary ul li a:hover,
  header.banner .nav-primary ul li a:visited,
  header.banner nav.nav-primary ul li a:link {
    border-left: 1px solid #EC5B29;
  }
  header.banner .nav-primary ul li:last-child {
    border-right: 1px solid #C64012;
    border-left: 1px solid #C64012;
  }
  header.banner .nav-primary ul li a.active {
    background-color: #B83A10;
  }
  header.banner .nav-primary ul li a:hover {
    background-color: #E1662F;
  }

  .nav-secondary {
    ul:last-child li:last-child {
      padding-bottom: 10px;
    }

    ul.breadcrumb,
    ul.second-level-nav,
    ul.third-level-nav {

      li {
        margin-right: 15px;
      }
    }

    ul.breadcrumb {
      float: left;

      li {
        margin-bottom: 10px;
      }
    }

    ul {
      float: none;
      margin-bottom: 0;
    }
    ul li {
      margin-bottom: 5px;
    }
  }

}

@media only screen and (min-width: 984px) {

  header.banner {
    margin-bottom: 20px;
  }

  header.banner nav.nav-primary ul {
		display: block;
  }

  header.banner .nav-primary,
  #nav-global .nav-global-wrapper {
    width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
  }

  header.banner .nav-primary.nav-right .logo-ubuntu {
    margin-left: 0;
  }

}

/*
 * Main navigation dropdown styles
 */

header.banner .nav-primary ul { position: static; }

header.banner .nav-primary li ul {
	@include box_shadow(0 2px 2px -1px #777777);
	@include rounded_corners(10px);
	background: #f7f7f7;
	border: 1px solid #d5d5d5;
	display: none;
	float: none;
	margin: 0;
	padding: 5px 0;
	position: absolute;
	top: 51px;
	width: 200px;
}

// the new arrow that appears if there is secondary nav when you hover over the main nav
header.banner .nav-primary li:hover ul:after {
	background: url("#{$asset-path}patterns/arrow-up-smaller.png") no-repeat;
	content: '';
	display: block;
	height: 8px;
	left: 20px;
	position: relative;
	top: -13px;
	width: 200px;
	z-index: 999;
}

// show secondary nav differently if :after isn't supported, remove arrow and move secondary nav up to meet the bottom of the navbar
.no-generatedcontent header.banner .nav-primary li ul {
	@include rounded_corners(0 0 10px 10px);
	top: 48px;
}

// the old arrow that appears if there is secondary nav when you hover over the main nav
header.banner .nav-primary li ul .arrow-up {
    display: none;
}

header.banner .nav-primary li ul li {
    border: 0;
    float: none;
}
header.banner .nav-primary li ul li a:link,
header.banner .nav-primary li ul li a:visited {
    border: 0;
    color: #333333;
    padding: 0 0 11px 14px;
    text-align: left;
    width: 170px;
}
header.banner .nav-primary li ul li a:hover {
    background: none repeat scroll 0 0 transparent;
    @include box_shadow(none);
    color: #DD4814;
}
header.banner .nav-primary li ul li.first a:link,
header.banner .nav-primary li ul li.first a:visited,
header.banner .nav-primary li ul li:first-of-type a:link {
    padding: 10px 14px;
}
header.banner .nav-primary li ul li.active a:link,
header.banner .nav-primary li ul li.active a:visited {
    background: none repeat scroll 0 0 transparent !important;
}
header.banner .nav-primary li ul .promo {
    border-top: 1px solid #D5D5D5;
    float: left;
    margin-top: 5px;
    padding: 15px 0 0;
}
header.banner .nav-primary li ul .promo a:link,
header.banner .nav-primary li ul .promo a:visited {
    background: none repeat scroll 0 0 transparent;
    border-left: 0 none;
    color: #333333;
    height: auto;
    padding: 0;
    text-align: left;
}
header.banner .nav-primary li ul .promo p { margin: 0 10px; }

header.banner .nav-primary li ul .promo a:hover {
    box-shadow: none;
    color: #DD4814;
}
header.banner .nav-primary li ul .promo img {
    margin-top: 14px;
    margin-bottom: -6px;
    @include rounded_corners(0 0 10px 10px);
    position:relative;
    top:1px;
}
header.banner .nav-primary li ul .promo .category {
    color: $warm_grey;
    font-size: 11px;
    margin: 0 10px;
    text-transform: uppercase;
}
header.banner .nav-primary li:hover ul { display: block; }

html.lt-ie8 header.banner .nav-primary li:hover ul { display: none; }

