body { margin: 0; }
#wrapperBiolaHeader { background:#111; width:100%; }
#biolaHeader { margin:0 auto; padding:0 15px; height: 42px;
  a { text-decoration:none; color:#FFF; }

  .branding { float:left; font-weight:bold; font-size:13px; height:42px; line-height:42px; margin:0; font-family:'proxima-nova', 'avenir next',Helvetica,Arial,sans-serif; text-transform:uppercase; letter-spacing:0.25em;
    img { width:22px; height:22px; vertical-align:top; display:inline-block; margin:0.75em 0.5em 0 0; }
    .university { display: none; }
  }


  // Customize header dropdown menus. These will still use Bootstrap but will overwrite some of it's default styles.
  .dropdown { float: right;
    .dropdown-toggle { display: block; text-align:center; line-height:42px; padding:0 15px; color:#CCC; cursor:pointer; background:transparent; border:0; outline:0; -webkit-user-select: none; -webkit-appearance:none;
      i.fa { vertical-align: middle; }
    }
    .dropdown-menu { top: 122%; border-radius: 0; min-width: 230px;
      > li {
        > a { color:inherit; padding: 10px 20px;
          i { margin-right: 8px; }
        }
      }

      // Add the little carret to the dropdown.
      &::before { position: absolute; top: -15px; right: 9px; display: inline-block; border-right: 10px solid transparent; border-bottom: 15px solid #CCC; border-left: 10px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; }
      &::after { position: absolute; top: -14px; right: 10px; display: inline-block; border-right: 9px solid transparent; border-bottom: 14px solid white; border-left: 9px solid transparent; content: ''; }
    }

    &.open {
      .dropdown-toggle { background: white; color: #333; }
    }

    &#global-alerts { font-size:14px;
      .dropdown-menu { padding: 0;
        > li { border-bottom: 1px solid #ddd; position: relative;
          &:last-child { border: none; }
          > a { white-space: initial; }
        }
      }
    }

    &#apps-list { font-size:12px;
      .dropdown-toggle {
        .desktop { display:none; }
        .mobile .app-list-icon { font-size: 18px; padding-right: 10px; }
        .mobile .fa-home { font-size: 18px; }
      }
    }

    &#current-user-profile {
      #profile-img { height: 30px; width: 30px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 20px; display: inline-block; vertical-align: middle; }

      .fa-lg { font-size: 1.1em; }
      .dropdown-toggle .fa-stack-2x { color: white; }
      .dropdown-toggle .fa-stack-1x { color: #333; }
      &.open {
        .dropdown-toggle .fa-stack-2x { color: #333; }
        .dropdown-toggle .fa-stack-1x { color: white; }
      }

      .dropdown-menu {
        // Adjust where the little carret points so that it is right under the profile picture
        &::before { right: 19px; }
        &::after { right: 20px; }
      }
    }
  }
}


@media screen and (max-width:360px) {
  #biolaHeader {
    #apps-list.dropdown {
      .dropdown-menu { right: -80px;
        &::before { right: 87px; }
        &::after { right: 88px; }
      }
    }
  }
}

@media screen and (min-width:549px) {
  #biolaHeader {
    #apps-list.dropdown {
      .dropdown-toggle {
        .mobile { display:none; }
        .desktop { display: block; }
        .desktop .version { padding-left: 5px; font-size: 10px; }
        .desktop .label { margin-left: 8px; margin-right: 5px; }
      }
    }
  }
}

@media screen and (min-width:768px) {
  #biolaHeader {
    .branding .university { display: inline; }
  }
}

@media screen and (min-width:768px) {
  #biolaHeader { width:750px; }
}

@media screen and (min-width:992px) {
  #biolaHeader { width:970px; }
}

@media screen and (min-width:1200px) {
  #biolaHeader { width:1170px; }
}