/*
DOCUMENTATION BRANDING - BRANDING TEMPLATE
----------------------------------------------------------------------
This stylesheet allows you to customize the style and images displayed in the gateway documentation.
To brand your logo, colors and fonts, modify the style parameters listed below.
Then upload the new branding bundle using Merchant Manager.

NOTE:
- IF YOU CHANGE THE STYLE YOU MUST REVIEW THE EFFECT OF YOUR STYLE CHANGES AT EACH PRODUCT RELEASE.
- AN INCOMPATIBLE STYLE MAY PREVENT YOU AND YOUR CUSTOMERS USING THE PRODUCT.
*/

/* General colors */
body {
    color: #333;
    background-color: #999999;
}

/* Link (and highlight) color */
a {
    text-decoration: none;
    color: #cf4500;
}

/* Content background color */
#ContainerMain {
    background-color: #ffffff;
}

/* Header logo */
#Header2 {
    display: block;
    /* Put your header logo filename here and add the file to the branding bundle */
    background: url("logo.png") no-repeat left center;
    /* Set to the pixel height of your logo */
    height: 80px;
}

/* API Reference Landing Page Banner color */
#api-ref-img .brand-color {
    /* Set your brand color for the banner */
    fill: #FF5500;
}

/* Secondary font for API Reference */
.font-family-secondary {
    /* default: MarkForMCNrw, set your brand font */
    font-family: MarkForMCNrw, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}

/* Footer logo */
#Footer2 {
    display: block;
    /* Put your footer logo filename here and add the file to the branding bundle */
    background: url("footer.png") no-repeat right center;
    /* Set to the pixel height of your logo */
    height: 50px;
}

/* Footer text */
#Footer2 p {
    color: #333333;
    line-height: 1rem;
    margin: 0 0 1rem;
}


/* START CUSTOM BRAND CSS */

/*
DIRECT API DOCUMENTATION BRANDING - BRANDING TEMPLATE
----------------------------------------------------------------------
ABOUT BRAND.CSS
----------------------------------------------------------------------
This stylesheet allows you to customize the style and images displayed in the API Documentation.

If you require a simple brand, with just your logo, colors and fonts, then simply modify the
style parameters listed below. Then upload the new branding bundle using Merchant Manager.

If you require a sophisticated brand, then you have (almost) the entire power of CSS at your disposal.
You can:
   . specify local and media type specific styles
   . use multiple style sheets
   . use any supported styling capability
   . rearrange elements on the screen
   . totally change the look of the product to match your corporate image.

You can ONLY use the following style selectors:
   . ID selectors (for example, #ContainerMain), however you must not reference IDs that begin with X_ or filter
   . class selectors (for example,.apiTreeNode), however you not reference classes that begin with X_ or filter
   . you must not use attribute selectors.

We recommend that you use tools such as Firefox Firebug or Internet Explorer Developer Tools
to determine the styleable elements that are available to you in the API documentation.

NOTE:
    . IF YOU CHANGE THE STYLE, THEN YOU MUST REVIEW THE EFFECT OF YOUR STYLE CHANGES AT
      EACH PRODUCT RELEASE.

    . IF YOU UPLOAD A POOR STYLE, THEN YOU AND YOUR CUSTOMERS MAY NOT BE ABLE TO USE THE PRODUCT.
*/

/* Set the overall font and background color */
body {
    background-color: #CCCCCC;
    font-family: "Trebuchet MS",helvetica,arial,clean,sans-serif;
}

/* Set the background for the main content part of the API Documentation. */
#ContainerMain {
    background-color: #FFFFFF;
}

/* Set the image to display in the header */
#ContainerHeader #Header2 {
    display: block;
    /* Put your logo filename here and add the file to the branding bundle. */
    background: url("Chase-JPM-Dual-Logo-Horiz_430x90.jpg") no-repeat center;
    /* Set to the pixel height of your logo. */
    height: 100px;
}

/* Set the small image to display in the footer */
#ContainerFooter #Footer2 {
    display: block;
    /* Put your small logo filename here and add the file to the branding bundle. */
    background: url("chase_blank") no-repeat center;
    /* Set to the pixel height of your logo. */
    height: 44px;
    /* Set to the pixel width of your logo. */
    padding-right: 50px;
}

/*
Other styles that you may find useful are listed below.
Please note that this is not an exhaustive list and we recommend
browser developer tools to help you discover the available elements.

. h1 - page title
. h2 - page sub-title
. breadcrumbs - breadcrumb navigation bar
. #tabsMain - the menu bar

*/
