banners.css

/* Layout */
#ucsf-banner-nav, #ucsf-banner-nav div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#ucsf-banner-nav {
    background: #052049;
    height: 32px;
    font-family: "Helvetica Neue", "arial", sans-serif;
    font-size: 14px;
    text-align: center;
    width: 100%;
}

#ucsf-banner-nav .inner {
    margin: 0 auto;
    width: 1230px;
}

#ucsf-banner-nav div.inner div {
    float: left;
    padding: 8px 0 7px 30px;
    text-align: left;
}

#ucsf-banner-nav.logo div.inner div {
    padding: 13px 0 13px 0;
}

#ucsf-banner-nav.logo,#ucsf-banner-nav.logo .inner,#ucsf-banner-nav.logo div.inner div {
    height: 40px;
}

#ucsf-banner-nav div.inner div.nav {
    float: right;
    padding-right: 16px;
    text-align: right;
}

#ucsf-banner-nav ul, #ucsf-banner-nav li {
    display: inline;
    margin: 0;
    padding: 0;
}

#ucsf-banner-nav a {
    color: #ffffff;
    display: inline;
    text-decoration: none;
}

#ucsf-banner-nav a:hover {
    text-decoration: underline;
}

#ucsf-banner-nav.logo .inner {
    height: 40px;
    background: url("ucsf-logo-banner.png") 30px 50% no-repeat;
    padding-left: 97px;
}

/**
  * Browser-hack, targets everything but IE8 and below.
  * @link http://browserhacks.com/#hack-1aaa2cce9e371d212109d5b1b8229ef6
  */
:root #ucsf-banner-nav.logo .inner {
    background: url("ucsf-logo-banner.svg") 30px 50% no-repeat;
    background-size: 45px 22px;
}

#ucsf-banner-nav-menu a {
    padding: 0 14px;
}

/* Variations */
#ucsf-banner-nav.arial {
    font-family: arial,sans-serif;
}

#ucsf-banner-nav.teal {
    background: #18a3ac;
}

#ucsf-banner-nav.green {
    background: #90bd31;
}

#ucsf-banner-nav.blue {
    background: #178ccb;
}

#ucsf-banner-nav.orange {
    background: #f48024;
}

#ucsf-banner-nav.grey {
    background: #b4b9bf;
}

#ucsf-banner-nav.purple {
    background: #716fb2;
}

#ucsf-banner-nav.red {
    background: #ec1848;
}

#ucsf-banner-nav.yellow {
    background: #ffdd00;
}

#ucsf-banner-nav.white {
    background: #ffffff;
}

#ucsf-banner-nav.yellow a,#ucsf-banner-nav.white a {
    color: #000000;
}

/* Responsive */
@media screen and (min-width:660px) and (max-width:1229px) {
    #ucsf-banner-nav .inner {
        width: 100%;
    };
}

@media screen and (max-width:659px) {
    #ucsf-banner-nav.logo, #ucsf-banner-nav.logo .inner, #ucsf-banner-nav.logo div.inner div {
        height: 30px;
    }

    #ucsf-banner-nav .inner {
        width: 100%;
    }

    #ucsf-banner-nav.logo .inner {
        background: url("ucsf-logo-banner-mobile.png") 30px 50% no-repeat;
        padding-left: 87px;
    }

    :root #ucsf-banner-nav.logo .inner {
        background-size: 37px 18px;
    }

    #ucsf-banner-nav div.inner div {
        height: 30px;
        padding: 8px 0 8px 30px;
        width: 100%;
    }

    #ucsf-banner-nav.logo div.inner div {
        padding: 8px 0 8px 0;
    }

    #ucsf-banner-nav .logo span,#ucsf-banner-nav div.inner div.nav {
        display: none;
    };
}