/* CSS */


/* 
 * Named, web-safe WEB fonts.  Allows our web site to be more modern.
 * PROGRAMMERS NOTE:
 *   Use both of these fonts for the footer.html  Want the footer to be
 *   displayable and verifiable via a URL request to the CDN.
 *
 */

@font-face{
    font-family:Nuesa;
    font-style: normal;
    font-weight:400;
    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-style:normal;
    font-weight:400;
    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-style: normal;
    font-weight:700;
    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');
}

/********************************************************* 
 * 
 * Apply across all of these types of elements. 
 *
 *********************************************************/

#F5-Activate-Footer  *, #F5-Activate-Footer :after, #F5-Activate-Footer :before {
    box-sizing: border-box;
}

/*
 *
 * 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.
 *
 */
a:hover {
    text-decoration: underline !important;
}

/********************************************************* 
 * 
 * Apply across specific elements. 
 *
 *********************************************************/

#F5-Activate-Footer h4 {
    font-size: 100%;
    margin-bottom: .25em !important;
}

/* The id for the footer sets up default colors. */
#F5-Activate-Footer {
    background-color: black;
    color: white;
    font-family: Proxima,"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.375;
}

/* Divider that stretches across the whole screen. */
div.col-md-12 {
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    position: relative;
    width: 100%;
}

div.activate-container:before, div.activate-container:after {
    content: " ";
    display: table;
}

div.activate-container:after {
    clear: both;
}

div.activate-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 1170px;
}

/* Containter that has a flex display to help in the layout. */
div.top-row-container {
    display: flex;
    margin-top: 35px;
}

/* Contact divider.  Flex display and only takes 50% of the space. */
div.contact-container {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 50%;
}


/* Set the color for all hyperlinks in the footer. */
#F5-Activate-Footer a, #F5-Activate-Footer a:visited {
    color: white;
    text-decoration: none;
}

/* Footer's H4 header */
h4.contact-header {
    color: white;
    font-family: Nuesa;
    font-size: 18px !important;
    margin-top: 4px;
    padding-bottom: 1rem;
}

/* Icons assoiciated with twitter, linkedIn, etc. */
ul.social-links {
    display: flex;
    font-family: Nuesa;
    list-style-type: none;
    margin-bottom: 0px;
    margin-top: 2px;
    padding-left: 0px;
    width: 300px;
}

li.social-links {
    flex: 1 1;
}

/* Icons colors.  Read in from font awesome */
fa {
    color: white;
}

/* Horizonal ruler/divider on footer */
hr.footer-divider {
    background: #ebebeb;
    border: none;
    flex: 0 0 100%;
    height: 1px;
    margin-top: 35px;
    margin-bottom: 35px;
}

/*  A single row containing 3 columns of hyperlinks */
div.row {
    margin-left: -15px;
    margin-right:-15px;
}

/* Clear floats after the columns */
div.row:after {
    clear: both;
    content: "";
    display: table;
}

/* Footer un-order list.  Want them to be lined up on the left column */
ul.footerList {
    display: inline-block;
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 11px;
    margin-top: 0;
    text-align: left;
    white-space: nowrap;
}

div.threeColumn {
    float: left;
    padding: 0px 10%;
    width: 33.33%;
}

/* Copy right container */
div.copyright-container {
    color: white;
    font-size: 14px;
    margin-top: 30px;
    text-align: center;
}