// This is the old biola header.

#wrapperGlobalAppHeader { background:#111; width:100%; }
#globalAppHeader { 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; }
  }

  .custom-dropdown {
    .dropdown-menu { top: 122%; border-radius: 0; min-width: 230px;
      > li {
        > a { color: inherit;
        }
      }

      // 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) {
  #globalAppHeader {
    #apps-list.custom-dropdown {
      .dropdown-menu { right: -80px;
        &::before { right: 87px; }
        &::after { right: 88px; }
      }
    }
  }
}

@media screen and (min-width:549px) {
  #globalAppHeader {
    #apps-list.custom-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) {
  #globalAppHeader {
    .branding .university { display: inline; }
  }
}

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

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

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