/* ############################################################################
   ## 
   ##  HTML TAG STYLES
   ##
   ######################################################################### */

body {
    margin: 0;
    padding: 0;
    font-family: 'proxima_nova_light', Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    color: #555555;
    background: #f5f5f5;
}

    body.mceContentBody {
        /* Overrides for the CMS visual editor that apply to both website form fields and in the CMS admin back end. See /App_Sites/{siteTextId}/Admin/Css for dedicated admin layout. */
        background: #fff;
        padding: 5px;
    }

a {
}

    a:link {
        color: #004d93;
        text-decoration: underline;
    }

    a:visited {
        color: #004d93;
        text-decoration: underline;
    }

    a:hover {
        color: #007ece;
        text-decoration: underline;
    }

    a:active {
        text-decoration: underline;
    }

p {
    margin: 0 0 10px;
}

h1 {
    margin: 0 0 10px 0;
    font-family: 'proxima_nova_regular', Arial, Helvetica, sans-serif;
    font-size: 171.4%;
    font-weight: normal;
    color: #ee5400;
}

h2 {
    margin: 0 0 10px 0;
    font-family: 'proxima_nova_regular', Arial, Helvetica, sans-serif;
    font-size: 150%;
    font-weight: normal;
    color: #ee5400;
}

h3 {
    margin: 0 0 10px 0;
    font-family: 'proxima_nova_regular', Arial, Helvetica, sans-serif;
    font-size: 128.6%;
    font-weight: normal;
    color: #ee5400;
}

h4 {
    margin: 0 0 10px 0;
    font-family: 'proxima_nova_regular', Arial, Helvetica, sans-serif;
    font-size: 114.33%;
    font-weight: normal;
    color: #ee5400;
}

h5 {
    margin: 0 0 10px 0;
    font-family: 'proxima_nova_regular', Arial, Helvetica, sans-serif;
    color: #777777;
    font-size: 100%;
    font-weight: normal;
    color: #004d93;
}

h6 {
    margin: 0 0 10px 0;
    font-family: 'proxima_nova_regular', Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: normal;
    color: #555555;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

ul {
    list-style-type: square;
}

    ul li {
    }

ol {
}

    ol li {
    }

hr {
    margin: 0 0 1.25em;
    height: 3px;
    background: #e0e0e0;
    border: 0;
}

blockquote { 
    margin: 0 0 1.5em 0; 
    padding: 0; 
    color: #909090;
    font-family: georgia,'times new roman',times,serif; 
    font-size: 125%; 
    line-height: 125%; 
    quotes: "\201C" "\201D";
}

    blockquote:before { 
        content: open-quote; 
        font-weight: bold; 
    }

    blockquote:after { 
        content: close-quote; 
        font-weight: bold; 
    }

    blockquote p { 
        display: inline;
        line-height: 1.3em; 
    }

address {
}

pre {
}

iframe {
    width: 100%; /* A better default */
    max-width: 100%;
    border: 0;
}

/*
    Images
*/

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

    img[style*="height"] {
        height: auto;
    }

    img[style*="display:block"],
    img[style*="display: block"] {
        /* This is how the image editor places an image in the middle of the page. Actually it's "display: block;margin-left: auto;margin-right: auto;" but that's a difficult CSS rule and this should catch the right images. */
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }

figure {
}

    figure.image {
        display: table; /* This + caption handling below is the only way to make all browsers show the image and caption together in a nice box. */
        box-sizing: border-box;
        max-width: 100%;
        margin: 0 0 20px;
        padding: 0;
        line-height: 0;
    }

        img[style*="float:left"],
        img[style*="float: left"],
        figure.image.align-left {
            float: left;
            max-width: 50%;
            height: auto;
            margin: 0 20px 20px 0;
        }

        img[style*="float:right"],
        img[style*="float: right"],
        figure.image.align-right {
            float: right;
            max-width: 50%;
            height: auto;
            margin: 0 0 20px 20px;
        }

        figure.image.align-center {
            /* Note: The visual editor will place this outside <p> blocks. */
            margin: 0 auto 20px; /* margin-left|right: auto; is the centering trick. */
        }

        figure.image img {
            float: none !important;
            max-width: 100%; /* Fix the max-width applied to floated images above, in case the image in the caption is still floated. */
            margin: 0;
        }

        figure.image figcaption {
            display: table-caption;
            caption-side: bottom;
            padding: 20px;
            text-align: center;
            line-height: normal;
            background: #f5f2f0; /* Better than putting a background on the caption, to avoid an occasional 1px top gap in Chrome. */
        }

            figure.image figcaption > :first-child {
                margin-top: 0 !important;
            }

            figure.image figcaption > :last-child {
                margin-bottom: 0 !important;
            }

@media all and (-ms-high-contrast:none) {
    /* Rules for IE only. */

    figure.image.align-left,
    figure.image.align-right,
    figure.image.align-left figcaption,
    figure.image.align-right figcaption {
        display: block; /* IE doesn't like table in this context, but float handles the layout okay. */
    }

}

@media all and (-ms-high-contrast:none) and (max-width: 1024px) {
    /* Rules for IE only. */

    figure.image,
    figure.image figcaption {
        display: block;
    }

        figure.image img {
            width: 100%; /* Fill up the space so the caption looks okay. Not great for small images in centred captions, but if they're small why are they centred? */
        }

}

@media screen and (max-width: 600px) {

    img[style*="float:left"],
    img[style*="float: left"],
    figure.align-left,
    img[style*="float:right"],
    img[style*="float: right"],
    figure.align-right {
        /*max-width: 40%;*/ /* Depending on how much padding is in the design, this might need tweaking. */
    }

}

@media screen and (max-width: 480px) { /* Could consider going to 360px - It depends on the site and design. */

    figure.align-left,
    figure.align-right,
    img[style*="float:left"],
    img[style*="float: left"],
    img[style*="float:right"],
    img[style*="float: right"] {
        float: none !important;
        max-width: 100% !important;
        margin: 0 0 1.5em !important;
    }

    figure.image img {
        margin: 0 !important; /* Fix the margin applied to floated images above, in case the image in the caption is still floated. */
    }

}