/*
    How to use this file:

    Only add global overrides that are absolutely necessary. Provide a multi-line comment for each
    section containing overrides in the following format:

    [Title]
    [Explanation why the override is necessary]
    [- One or more paths
    - at which the override is used to make testing easier in the future
    - (relative to root starting with /)]
 */

/*
    Images
    Needed for large images to be constrained to their container:
    - /resources/general-info/learn-more-about-echo (graphic near the top)
*/
img {
    max-width: 100%;
}

/*
    Breadcrumbs
    Needed for smaller font display and inline positioning of breadcrumbs on all pages:
    - /
 */
.breadcrumb-title {
    float: left;
    margin-right: 0.5em;
}
.breadcrumb-title,
.breadcrumb {
    font-size: 76.4706%;
    line-height: 1.5;
    padding: 0;
}
.breadcrumb > a {
    text-decoration: none;
}
.breadcrumb > a:hover {
    text-decoration: underline;
}

/*
    Top of Page links
    Needed for custom display of "Top of Page" links:
    - /resources/echo-data/about-the-data ("Top of Page" links throughout page)
*/
.pagetop {
    text-align: right;
}
.pagetop > a {
    font-size: 88.2353%;
    margin-right: 0.5em;
    padding: 0 0.25em;
    text-decoration: none;
}
.pagetop > a:before {
    background: no-repeat center/100%
        url(../../img/pagetop.svg);
    content: "";
    display: inline-block;
    height: 1em;
    margin: -0.2667em 0.25em 0 0;
    vertical-align: middle;
    width: 1em;
}
.pagetop > a:hover {
    text-decoration: underline;
}
.site-name span {
    background: url(../../img/epa-logo.svg) no-repeat !important;
}

/*
    tabsnav
    Needed for Related Tools pop-up throughout
*/
.tabsnav.tabs {
    display: inline-block;
    list-style: none !important;
}
.tabsnav.tabs > li.active > a,
.tabsnav.tabs > li.active > a:visited {
    color: #fff;
}
/*
    Tabs
    Needed for tabs to display correctly on loading tool searches:
    - /trends/loading-tool/water-pollution-search/
    - /trends/loading-tool/hypoxia-task-force-annual-loading
    - /trends/loading-tool/effluent-exceedances-search
*/
.tabs > li {
    float: left;
}
.tabs > li.active > a:focus {
    background-color: #323a45;
}
section ul.tabs > li > a {
    padding: 0.25em 0.5em;
}
.tabs > li > a,
.tabs > li > a:visited {
    background-color: #d6d7d9;
    color: #212121;
    line-height: 1;
    margin: 0;
    padding: 0.5882em 1.1765em;
    text-decoration: none;
}
.tabs > li > a:focus,
.tabs > li > a:hover {
    border-color: #aeb0b5;
}
.tabs > li.active > a,
.tabs > li.active > a:hover {
    background-color: #212121;
    color: #fff;
}
.tabs > li > a:hover,
.tabs > li > a:focus,
.tabs > li > a:active {
    background-color: #aeb0b5;
    box-shadow: none;
    color: #212121;
    outline: 0;
    text-decoration: none;
}
.tabs > li:first-child {
    padding-left: 0.5em;
}
.tabs > li > a {
    border-radius: 3px 3px 0 0;
}

/* Region alert */
.region-alert {
    background: #000;
    color: #fff;
}
.region-alert p {
    text-align: center;
    padding: 0px;
    width: 100%;
}
.region-alert a {
    color: #9cf;
}
.region-alert a:visited {
    color: #9dde9d;
}
.region-alert > .block-alert {
    max-width: 100% !important;
}
/*  Region Footer 
    Needed to display images in template footer 
    -- EPA Seal
    -- Social media icons
*/
.region-footer {
    background: url(../../img/epa-seal.svg) no-repeat !important;
	background-size: 5.8824em 5.8824em !important;
}
.menu-link.social-instagram {
	background: url(../../img/epa_icons_Instagram.svg) no-repeat;
}
.menu-link.social-flickr {
	background: url(../../img/epa_icons_Flickr.svg) no-repeat;
}
.menu-link.social-youtube {
	background: url(../../img/epa_icons_YouTube.svg) no-repeat;
}
.menu-link.social-twitter {
	background: url(../../img/epa_icons_Twitter.svg) no-repeat;
}
.menu-link.social-facebook {
	background: url(../../img/epa_icons_Facebook.svg) no-repeat;
}