/* CSS */

/*
** Named, web-safe WEB fonts.  Allows our web site to be more modern.
** PROGRAMMERS NOTE:
**   Loading up this font up front so there is no delay loading up fonts.
*/

@font-face{
    font-family:Nuesa;
    font-weight:400;
    font-style :normal;
    src:url(//cdn.f5.com/websites/support/assets/fonts/NeusaMedium.woff) format('woff'),
        url(//cdn.f5.com/websites/support/assets/fonts/NeusaMedium.woff2) format('woff2');
}

@font-face{
    font-family:Nuesa;
    font-weight:400;
    font-style :normal;
    src:url(//cdn.f5.com/websites/support/assets/fonts/NeusaRegular.woff) format('woff'),
        url(//cdn.f5.com/websites/support/assets/fonts/NeusaRegular.woff2) format('woff2');
}

@font-face {
    font-family:Nuesa;
    font-weight:700;
    font-style :normal;
    src:url(//cdn.f5.com/websites/support/assets/fonts/NeusaBold.woff) format('woff'),
        url(//cdn.f5.com/websites/support/assets/fonts/NeusaBold.woff2) format('woff2');
}

@font-face{
    font-family:Proxima;
    font-weight:100;
    font-style: normal;
    src:url(//cdn.f5.com/websites/product/resources/fonts/ProximaThin.woff2?f5v=6) format('woff2'),
        url(//cdn.f5.com/websites/product/resources/fonts/ProximaThin.woff?f5v=6) format('woff');
}

@font-face{
    font-family:Proxima;
    font-weight:400;
    font-style:normal;
    src:url(//cdn.f5.com/websites/product/resources/fonts/ProximaMedium.woff2?f5v=6) format('woff2'),
        url(//cdn.f5.com/websites/product/resources/fonts/ProximaMedium.woff?f5v=6) format('woff') ;
}

@font-face{
    font-family:Proxima;
    font-weight:700;
    font-style:normal;
    src:url(//cdn.f5.com/websites/product/resources/fonts/ProximaBold.woff2?f5v=6) format('woff2'),
        url(//cdn.f5.com/websites/product/resources/fonts/ProximaBold.woff?f5v=6) format('woff');
}

/*
** The ID for the Secure Header
*/
#F5-Secure-Header {
    border-color: transparent transparent black transparent;
    border-style: solid;
    border-width: thin;
    top: 0;
    width: 100%;
    z-index: 1030;
}

#F5-Secure-Header.meta-open {
    transform: translate(0,0);
}

#F5-Secure-Header .meta-row:after, .meta-row:before, .container:after,  .container:before, .nav:before {
    content: " ";
    display: table;
}

#F5-Secure-Header .meta-row:after, .container:after {
    clear: both;
}


#F5-Secure-Header div.meta-row {
    height: 36px;
    padding-top: 6px;
    position: relative;
    z-index: 1;
}

#F5-Secure-Header div.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 1170px;
}

#F5-Secure-Header div.padding-none {
    padding: 0;
}

#F5-Secure-Header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#F5-Secure-Header ul.pull-right {
    float:  right!important;
}

#F5-Secure-Header .brand-main {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 42px;
    vertical-align: middle;
    width: 45px;
}

#F5-Secure-Header ul.piped li {
    display: inline-block;
}

#F5-Secure-Header nav.li {
    position: relative;
}

ul.piped>li+li:before {
    color: #808285;
    content: "|";
    font-family: Georgia, "Times New Roman", Times, serif;
}

*, :after, :before {
    box-sizing: border-box;
}

#F5-Secure-Header ul.nav a {
    line-height: 22px;
    padding: 1px 12px;
    position: relative;
}

#F5-Secure-Header .meta-row a, #F5-Secure-Header .meta-row a.visited {
    color: #343434;
    display: inline-block;
    font-family: Proxima;
    font-size: 14px;
}

#F5-Secure-Header a, #F5-Secure-Header a:visited {
    text-decoration: none;
}

/*
** Want UNDERLINE to appear on hover on footer.
** TODO: Want this feature across the whole site.  Need to move to the main style.css.  Quick fix for now.
*/
#F5-Secure-Header a:hover {
    color:  blue;
    text-decoration: underline !important;
}

/* F5 red ball */
#F5-Secure-Header div.main-row {
    background-color: #FFF;
    height: 66px;
    position: relative;
    z-index: 1;
}

#F5-Secure-Header .outside {
    align-items: center;
    display: flex;
    height: 66px;
}