<commit_before>/*
 *       These are the header styles
  header
   topslot (banner ad)
   nav-user (***production has "user")
   pagehdr
       nav-main (foundation)
         logo
         top-bar-section  (foundation)
             ul.nav-elements /
             li:
               'browse'
               'for authors'
               'about us'
               'search'
 */

/// nav spacing stuff
$nav-spacing: 18px;
$nav-spacing-full: $nav-spacing;

header {
  background: $off-white;
  }

.head-top {
  @extend .hide-for-print;
  @extend %bg-dark;
  @extend .text-center;
  @extend %brand-border;
  border-bottom-width: 6px;
  border-bottom-style: solid;
  padding: $pad-xsmall $pad-small;
  .advertisement{
    float:left;
  }
  .center {
    width: 748px;
    margin: 0 auto;
    height: 90px;
    }
  .title {
    width: 18px;
    height: 88px;
    text-indent: -9999px;
    background: image-url('text.vert.ad.gif') no-repeat 0 6px;
    float: left;
    }
  }

$width-logo: 4;
$width-search: 5;
$width-nav: $block-grid-elements - $width-logo;

.nav {
  @extend .plos-row;
  .nav-user {
    @extend .inline-list; // from foundation
    @extend .right; // from foundation
    font-weight: 400;
    > li {
      margin-top: rem-calc(-5);
      margin-left: rem-calc(4);

      > a {
        @include rounded-pill(transparent, rem-calc(14 16 8));
        color: $grey-dark;

        &:hover {
        color: $white;
          @extend %brand-background-hover;

          }

        }
      }
    li.highlighted {
      > a {
        @extend %brand-background;
        color: $clr-highlight-text;

        .plosone & {
          color: $black;

          &:hover {
            color: $white;
              @extend %brand-background-hover;

            }
          }

        }
      }
    }
  }

.logo {
  @include plos-grid-column($columns: $width-logo);
  @extend .title-area; // foundation
  @include icon-offscreen;
  height: 34px;
  width: 100%;
  bottom: 0;
  //brand-specific logo in plos-themes/code/desktop/[BRAND]/resource/img :
  background: image-url('logo.png') no-repeat 0 0;
  background-size: contain;

  a {
    display:block;
    height: 100%;
  }
}

// adding specificity to override included styles
#pagehdr .nav-main .logo {
  position: absolute;
  float: none;
  margin-left: .625rem;
}

.ploscompbiol .logo {
  height: 27px;
}

.plosntd .logo {
  height: 24px;
}

.plosone .logo {
  height: 40px;
}


/* using Foundation Top Bar
 all @extend .class are Foundation
 */

.nav-main {
  @extend .plos-row;
  @extend .top-bar; // foundation
  margin-bottom: $pad-default;
  font-family: $font-face-navigation;
  > .dropdown {<commit_msg>ENG-124 Remove extra margin in logos<commit_after>/*
 *       These are the header styles
  header
   topslot (banner ad)
   nav-user (***production has "user")
   pagehdr
       nav-main (foundation)
         logo
         top-bar-section  (foundation)
             ul.nav-elements /
             li:
               'browse'
               'for authors'
               'about us'
               'search'
 */

/// nav spacing stuff
$nav-spacing: 18px;
$nav-spacing-full: $nav-spacing;

header {
  background: $off-white;
  }

.head-top {
  @extend .hide-for-print;
  @extend %bg-dark;
  @extend .text-center;
  @extend %brand-border;
  border-bottom-width: 6px;
  border-bottom-style: solid;
  padding: $pad-xsmall $pad-small;
  .advertisement{
    float:left;
  }
  .center {
    width: 748px;
    margin: 0 auto;
    height: 90px;
    }
  .title {
    width: 18px;
    height: 88px;
    text-indent: -9999px;
    background: image-url('text.vert.ad.gif') no-repeat 0 6px;
    float: left;
    }
  }

$width-logo: 4;
$width-search: 5;
$width-nav: $block-grid-elements - $width-logo;

.nav {
  @extend .plos-row;
  .nav-user {
    @extend .inline-list; // from foundation
    @extend .right; // from foundation
    font-weight: 400;
    > li {
      margin-top: rem-calc(-5);
      margin-left: rem-calc(4);

      > a {
        @include rounded-pill(transparent, rem-calc(14 16 8));
        color: $grey-dark;

        &:hover {
        color: $white;
          @extend %brand-background-hover;

          }

        }
      }
    li.highlighted {
      > a {
        @extend %brand-background;
        color: $clr-highlight-text;

        .plosone & {
          color: $black;

          &:hover {
            color: $white;
              @extend %brand-background-hover;

            }
          }

        }
      }
    }
  }

.logo {
  @include plos-grid-column($columns: $width-logo);
  @extend .title-area; // foundation
  @include icon-offscreen;
  height: 34px;
  width: 100%;
  bottom: 0;
  //brand-specific logo in plos-themes/code/desktop/[BRAND]/resource/img :
  background: image-url('logo.png') no-repeat 0 0;
  background-size: contain;

  a {
    display:block;
    height: 100%;
  }
}

// adding specificity to override included styles
#pagehdr .nav-main .logo {
  position: absolute;
  float: none;
}

// Adjustments to the height because some logos are longer or shorter
// than others.
.ploscompbiol .logo {
  height: 27px;
}

.plosntd .logo {
  height: 24px;
}

.plosone .logo {
  height: 40px;
}

/* using Foundation Top Bar
 all @extend .class are Foundation
 */

.nav-main {
  @extend .plos-row;
  @extend .top-bar; // foundation
  margin-bottom: $pad-default;
  font-family: $font-face-navigation;
  > .dropdown {
{'fraction_non_alphanumeric': 0.14052651093807936, 'fraction_numerical': 0.018909899888765295, 'mean_word_length': 1.9577850877192982, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, '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': '4044346', 'n_tokens_mistral': 2002, 'n_tokens_neox': 1860, 'n_words': 432}