<commit_before>/* global notices (via soapbox) */
.global-notice {
  background: #fff;
  background: light-background-color;
  compat-only(font-size, base-font-size);
  compat-only(border, 0);
  compat-only(color, text-color);
  compat-only(padding, 0);

  .wrap {
    @extend .center;
    @extend .smaller;
    compat-important(padding-left, 24px);
    compat-important(padding-right, 24px);
    compat-important(padding-top, 10px);
    compat-important(padding-bottom, 10px);
  }

  p:last-child {
    margin-bottom: 0;
  }
}

/* header */
#main-header {
  @extend .clear;

  border-color: transparent;
  border-bottom-width: 1px;
  border-bottom-style: solid;

  .logo {
    @extend .text-offscreen;
    bidi-value(float, left, right);
    width: 216px;
    height: 54px;
    background-image: url(media-url-dir + 'mdn_logo-wordmark-full_color.svg');
    background-position: -5px 0;
    background-repeat: no-repeat;
    display: block;
  }
}

#tabzilla {
  bidi-value(float, right, left);
}

#nav-access {
  width: 0;
}

#main-nav {
  > ul {
    bidi-value(float, right, left);
    margin-top: 20px;
    margin-bottom: grid-spacing;

    > li {
      bidi-style(padding-left, 31px, padding-right, 0);
      position: relative;
      opacity: 1;
      max-width: 1000px;
      display: inline-block;
      vendorize(transition-property, width);
      vendorize(transition-duration, default-animation-duration);
      vendorize(transition-delay, default-animation-duration);

      &:first-child {
        padding-left: 0;
      }

      > a i {
        display: none;
      }

      > a, .search-trigger {
        compat-important(text-decoration, none);
        compat-important(text-transform, uppercase);
        compat-important(font-weight, bold);
      }

      > a {
        compat-important(color, menu-link-color);
      }

      > a, .search-wrap {
        padding: 4px 8px;
      }
    }
  }

  .submenu {
    menu-border-width = 5px;
    menu-arrow-top = -19px;
    component-submenu-method(520px, 2, #fff, #333);

    top: 40px;
    left: -200px;
    border-top: menu-border-width solid #404040;
    z-index: 9999;

    .submenu-column {
      min-height: 90px;
      display: inline-block;
    }

    &:before, &:after {
      top: menu-arrow-top;
      left: 269px;
    }

    &:after {
      top: (menu-arrow-top - menu-border-width);
    }
  }

  .submenu-single {
    width: 180px;
    left: -30px;

    .submenu-column {
      width: 100%;
    }

    &:before, &:after {
      top: menu-arrow-top;
      left: 54px;
    }
  }

  &.expand {
    .search-wrap {
      width: 500px;
    }

    > ul > li:not(:last-child) {
      opacity: 0;
      width: 0;
      max-width: 0;
      overflow: hidden;
      padding: 0;
      vendorize(transition-delay, 0);
    }
  }
}

.user-state {
  bidi-style(right, 200px, left, auto);
  position: absolute;
  right: 200px;
  top: 12px;
  font-size: small-bump-font-size;
  compat-only(width, auto);

  li + li {
    bidi-style(border-left, 1px solid #bbb, border-right, 0);
    bidi-style(padding-right, 10px, padding-left, 10px, true); /* compat-important */
    bidi-style(margin-right, 8px, margin-left, 0, true); /* compat-important */
    border-left: 1px solid #bbb;
  }

  a, a:hover, a:focus, a:visited {
    color: link-color;
  }
}

a.persona-button {
  vendorize(border-radius, 3px);

  span {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 14px;
    line-height: 24px;
    color: white;
    font-weight: bold;
    padding: 0 10px 0 20px;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: -12px;
      width: 24px;
      height: 24px;
      z-index: 1;
      vendorize(transform, scale(0.707) rotate(45deg));
      vendorize(border-radius, 0 3px 0 50px);
    }

    &.persona-icon {
      padding-left: 3px;
      vendorize(border-radius, 3px 0 0 3px);
      create-gradient(#43a6e2, #287cc2);

      &:after {
        create-gradient(#43a6e2, #287cc2, left top);
      }

      img {
        position: relative;
        top: 2px;
        left: 5px;
        width: 14px;
        height: 15px;
      }
    }

    &.signin {
      text-shadow: 0px 1.5px 1px rgba(0, 0, 0, 0.35);
      
      &:after {
        z-index: -1;
      }
      
      &, &:after {
        create-gradient(#56565a, #3a3a3a);
      }
    }
  }
}

.search-wrap {
  background: transparent;
  padding: 4px 8px;
  border-radius: 3px;
  position: relative;
  vendorize(transition-property, width);
  vendorize(transition-duration, default-animation-duration);
  width: 60px;
  background-color: rgba(255, 255, 255, 0.9);

  &.expanded {
    background: #fff;
  }

  input {
    background: transparent;
    border: 0;
    color: menu-link-color;
    font-weight: bold;
    width: 20px;
    overflow: hidden;
    compat-only(padding, 0);
    vendorize(transition-property, width);
    vendorize(transition-duration, default-animation-duration);
    position: absolute;
    left: 8px;
    width: 90%;
    z-index: 2;
    cursor: pointer;

    set-placeholder-style(color, text-color);
    set-placeholder-style(text-transform, uppercase);
  }

  .search-trigger {
    position: absolute;
    bidi-style(right, 12px, left, auto);
    z-index: 1;
  }
}

/* main content area */
.wrap {
  compat-only(max-width, none);
  compat-only(min-width, 0);
  compat-only(width, auto);
  compat-only(padding, 0);
}

main {
  background: #fff;

  > .center {
    padding-top: first-content-top-padding;
  }
}


.boxed {
  compat-only(border, 0);
  compat-only(box-shadow, none);
  compat-only(padding, 0);
  compat-only(margin, 0);
}


/* footer */
footer {
  @extend .smaller;
  background: #fff;
  padding:  first-content-top-padding 0 0 0;

  p, label {
    font-style: italic;
  }

  p {
    bidi-style(padding-left, 92px, padding-right, 0, true);
    bidi-style(background-position, -5px 0, background-position, right 0);
    background-image: url(media-url-dir + 'mdn_logo-only_color.svg');
    background-position: -5px 0;
    background-repeat: no-repeat;
    compat-important(padding-top, 10px);
    padding-bottom: 0;

    min-height: 62px;
  }

  .column-strip {
    padding-top: 10px;
  }

  label {
    padding-right: 4px;
  }
}

/* feature testing */
#feature-test-element {
  position: absolute;
  left: 0;
  top: -999999px;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: 1;

  @media media-query-small-desktop { z-index: 2; }
  @media media-query-tablet { z-index: 3; }
  @media media-query-mobile { z-index: 4; }
}



/* tablet updates */
@media media-query-tablet {
  #main-nav {
    > ul {
      > li {
        bidi-style(padding-left, 21px, padding-right, 0);
        
        > a {
          i {
            @extend .larger;
            display: inline-block;
          }
        }
      }
    }
  }
}


/* mobile updates */
@media media-query-mobile {

  #main-header {
    #tabzilla {
      display: none;
    }

    .user-state {
      right: grid-spacing;
      top: grid-spacing;
    }
  }

  #main-nav {
    > ul {
      text-align: right;
      width: 100%;
      clear: both;
      
      > li {
        vendorize(transition-property, none);

        &:first-child {
          padding-left: 0;
        }
      }
    }

    .main-nav-search {
      display: block;
      padding: 0px;
      margin-top: 10px;
      width: auto;

      .search-wrap {
        width: auto;
      }
    }

    &.expand {
      ul {
        > li:not(:last-child) {
          width: auto;
          max-width: none;
          vendorize(transition-property, none);
          overflow: visible;
        }
      }
    }
  }
}


/* redesign beta notice */
.redesign-beta-notice {
  @extend .smaller;
  padding: 6px 0;
}





/* print styling */
@media print {

  header, footer {
    display: none;
  }
}
<commit_msg>fix bug 938078 - Center the two banner elements<commit_after>/* global notices (via soapbox) */
.global-notice {
  background: #fff;
  background: light-background-color;
  compat-only(font-size, base-font-size);
  compat-only(border, 0);
  compat-only(color, text-color);
  compat-only(padding, 0);

  .wrap {
    @extend .center;
    @extend .smaller;
    compat-important(padding-left, 24px);
    compat-important(padding-right, 24px);
    compat-important(padding-top, 10px);
    compat-important(padding-bottom, 10px);
    compat-important(max-width, max-width-default);
  }

  p:last-child {
    margin-bottom: 0;
  }
}

/* header */
#main-header {
  @extend .clear;

  border-color: transparent;
  border-bottom-width: 1px;
  border-bottom-style: solid;

  .logo {
    @extend .text-offscreen;
    bidi-value(float, left, right);
    width: 216px;
    height: 54px;
    background-image: url(media-url-dir + 'mdn_logo-wordmark-full_color.svg');
    background-position: -5px 0;
    background-repeat: no-repeat;
    display: block;
  }
}

#tabzilla {
  bidi-value(float, right, left);
}

#nav-access {
  width: 0;
}

#main-nav {
  > ul {
    bidi-value(float, right, left);
    margin-top: 20px;
    margin-bottom: grid-spacing;

    > li {
      bidi-style(padding-left, 31px, padding-right, 0);
      position: relative;
      opacity: 1;
      max-width: 1000px;
      display: inline-block;
      vendorize(transition-property, width);
      vendorize(transition-duration, default-animation-duration);
      vendorize(transition-delay, default-animation-duration);

      &:first-child {
        padding-left: 0;
      }

      > a i {
        display: none;
      }

      > a, .search-trigger {
        compat-important(text-decoration, none);
        compat-important(text-transform, uppercase);
        compat-important(font-weight, bold);
      }

      > a {
        compat-important(color, menu-link-color);
      }

      > a, .search-wrap {
        padding: 4px 8px;
      }
    }
  }

  .submenu {
    menu-border-width = 5px;
    menu-arrow-top = -19px;
    component-submenu-method(520px, 2, #fff, #333);

    top: 40px;
    left: -200px;
    border-top: menu-border-width solid #404040;
    z-index: 9999;

    .submenu-column {
      min-height: 90px;
      display: inline-block;
    }

    &:before, &:after {
      top: menu-arrow-top;
      left: 269px;
    }

    &:after {
      top: (menu-arrow-top - menu-border-width);
    }
  }

  .submenu-single {
    width: 180px;
    left: -30px;

    .submenu-column {
      width: 100%;
    }

    &:before, &:after {
      top: menu-arrow-top;
      left: 54px;
    }
  }

  &.expand {
    .search-wrap {
      width: 500px;
    }

    > ul > li:not(:last-child) {
      opacity: 0;
      width: 0;
      max-width: 0;
      overflow: hidden;
      padding: 0;
      vendorize(transition-delay, 0);
    }
  }
}

.user-state {
  bidi-style(right, 200px, left, auto);
  position: absolute;
  right: 200px;
  top: 12px;
  font-size: small-bump-font-size;
  compat-only(width, auto);

  li + li {
    bidi-style(border-left, 1px solid #bbb, border-right, 0);
    bidi-style(padding-right, 10px, padding-left, 10px, true); /* compat-important */
    bidi-style(margin-right, 8px, margin-left, 0, true); /* compat-important */
    border-left: 1px solid #bbb;
  }

  a, a:hover, a:focus, a:visited {
    color: link-color;
  }
}

a.persona-button {
  vendorize(border-radius, 3px);

  span {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 14px;
    line-height: 24px;
    color: white;
    font-weight: bold;
    padding: 0 10px 0 20px;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: -12px;
      width: 24px;
      height: 24px;
      z-index: 1;
      vendorize(transform, scale(0.707) rotate(45deg));
      vendorize(border-radius, 0 3px 0 50px);
    }

    &.persona-icon {
      padding-left: 3px;
      vendorize(border-radius, 3px 0 0 3px);
      create-gradient(#43a6e2, #287cc2);

      &:after {
        create-gradient(#43a6e2, #287cc2, left top);
      }

      img {
        position: relative;
        top: 2px;
        left: 5px;
        width: 14px;
        height: 15px;
      }
    }

    &.signin {
      text-shadow: 0px 1.5px 1px rgba(0, 0, 0, 0.35);
      
      &:after {
        z-index: -1;
      }
      
      &, &:after {
        create-gradient(#56565a, #3a3a3a);
      }
    }
  }
}

.search-wrap {
  background: transparent;
  padding: 4px 8px;
  border-radius: 3px;
  position: relative;
  vendorize(transition-property, width);
  vendorize(transition-duration, default-animation-duration);
  width: 60px;
  background-color: rgba(255, 255, 255, 0.9);

  &.expanded {
    background: #fff;
  }

  input {
    background: transparent;
    border: 0;
    color: menu-link-color;
    font-weight: bold;
    width: 20px;
    overflow: hidden;
    compat-only(padding, 0);
    vendorize(transition-property, width);
    vendorize(transition-duration, default-animation-duration);
    position: absolute;
    left: 8px;
    width: 90%;
    z-index: 2;
    cursor: pointer;

    set-placeholder-style(color, text-color);
    set-placeholder-style(text-transform, uppercase);
  }

  .search-trigger {
    position: absolute;
    bidi-style(right, 12px, left, auto);
    z-index: 1;
  }
}

/* main content area */
.wrap {
  compat-only(max-width, none);
  compat-only(min-width, 0);
  compat-only(width, auto);
  compat-only(padding, 0);
}

main {
  background: #fff;

  > .center {
    padding-top: first-content-top-padding;
  }
}


.boxed {
  compat-only(border, 0);
  compat-only(box-shadow, none);
  compat-only(padding, 0);
  compat-only(margin, 0);
}


/* footer */
footer {
  @extend .smaller;
  background: #fff;
  padding:  first-content-top-padding 0 0 0;

  p, label {
    font-style: italic;
  }

  p {
    bidi-style(padding-left, 92px, padding-right, 0, true);
    bidi-style(background-position, -5px 0, background-position, right 0);
    background-image: url(media-url-dir + 'mdn_logo-only_color.svg');
    background-position: -5px 0;
    background-repeat: no-repeat;
    compat-important(padding-top, 10px);
    padding-bottom: 0;

    min-height: 62px;
  }

  .column-strip {
    padding-top: 10px;
  }

  label {
    padding-right: 4px;
  }
}

/* feature testing */
#feature-test-element {
  position: absolute;
  left: 0;
  top: -999999px;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: 1;

  @media media-query-small-desktop { z-index: 2; }
  @media media-query-tablet { z-index: 3; }
  @media media-query-mobile { z-index: 4; }
}



/* tablet updates */
@media media-query-tablet {
  #main-nav {
    > ul {
      > li {
        bidi-style(padding-left, 21px, padding-right, 0);
        
        > a {
          i {
            @extend .larger;
            display: inline-block;
          }
        }
      }
    }
  }
}


/* mobile updates */
@media media-query-mobile {

  #main-header {
    #tabzilla {
      display: none;
    }

    .user-state {
      right: grid-spacing;
      top: grid-spacing;
    }
  }

  #main-nav {
    > ul {
      text-align: right;
      width: 100%;
      clear: both;
      
      > li {
        vendorize(transition-property, none);

        &:first-child {
          padding-left: 0;
        }
      }
    }

    .main-nav-search {
      display: block;
      padding: 0px;
      margin-top: 10px;
      width: auto;

      .search-wrap {
        width: auto;
      }
    }

    &.expand {
      ul {
        > li:not(:last-child) {
          width: auto;
          max-width: none;
          vendorize(transition-property, none);
          overflow: visible;
        }
      }
    }
  }
}


/* redesign beta notice */
.redesign-beta-notice {
  @extend .smaller;
  padding: 6px 0;
}





/* print styling */
@media print {

  header, footer {
    display: none;
  }
}

{'fraction_non_alphanumeric': 0.14543269230769232, 'fraction_numerical': 0.03200910931174089, 'mean_word_length': 2.1144602048857366, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4652255', 'n_tokens_mistral': 6194, 'n_tokens_neox': 5606, 'n_words': 1161}