/*
    Colours:
        Hydro Blue: #0079C1
        TaskBar Blue: #41C2DA
        Light Blue: #C5E9EF

    Fonts:
        Houschka Std Book for content
        Houschka Std DemiBold for headings and large nav
*/

@font-face {
    font-family: 'mh_houschka_std';
    src: url('/assets/fonts/mh_houschka_std_book-webfont.woff2') format('woff2'),
         url('/assets/fonts/mh_houschka_std_book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mh_houschka_std';
    src: url('/assets/fonts/mh_houschka_std_book_italic-webfont.woff2') format('woff2'),
         url('/assets/fonts/mh_houschka_std_book_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'mh_houschka_std';
    src: url('/assets/fonts/mh_houschka_std_thin-webfont.woff2') format('woff2'),
         url('/assets/fonts/mh_houschka_std_thin-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'mh_houschka_std';
    src: url('/assets/fonts/mh_houschka_std_demibold-webfont.woff2') format('woff2'),
         url('/assets/fonts/mh_houschka_std_demibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'mh_houschka_std';
    src: url('/assets/fonts/mh_houschka_std_bold-webfont.woff2') format('woff2'),
         url('/assets/fonts/mh_houschka_std_bold-webfont.woff') format('woff');
    font-weight: 700; /* Equivalent to 'bold'. */
    font-style: normal;
}

/**
 * Legacy code.
 *
 * Alternate font family names for different weights of Houschka.
 *
 * To do: remove these after all dependent CSS has been converted to use the
 * 'font-weight' property to change font weight, instead of 'font-family'.
 */
@font-face {
    font-family: 'mh_houschka_stddemibold';
    src: url('/assets/fonts/mh_houschka_std_demibold-webfont.woff2') format('woff2'),
         url('/assets/fonts/mh_houschka_std_demibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mh_houschka_std_thin';
    src: url('/assets/fonts/mh_houschka_std_thin-webfont.woff2') format('woff2'),
         url('/assets/fonts/mh_houschka_std_thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* End of legacy code. */

*,html { outline: none; }
html, body { min-height: 100%; }

body {
    background: #eee;
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-size: 16px;
    font-family: "mh_houschka_std", Arial, sans-serif;
    color: #000;
    min-width: 250px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

img { border: 0; }

figure { margin: 0; }

sup { font-size: 10px; line-height: 10px; vertical-align: super; }

a:link, a:visited { color: #0079C1; text-decoration: none; }
a:hover, a:active, a:focus { color: #0079C1; text-decoration: underline; }
a[href^="tel"] { white-space: nowrap; }

abbr { cursor: help; border-bottom: 1px solid #dddddd; color: #000000; cursor: help; }
abbr a:link, abbr a:visited { color: #000000; text-decoration: none; }
abbr a:hover, abbr a:active, abbr a:focus { color: #0079C1; text-decoration: none; }

hr {
    display: block;
    border: 0;
    height: 1px;
    margin: 40px 0;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background: transparent;
    border-bottom: 1px solid #C8C8C8;
}


a[data-icon="pdf"], a[data-icon="doc"], a[data-icon="docx"], a[data-icon="xls"], a[data-icon="xlsx"], a[data-icon="ppt"], a[data-icon="pptx"], a[data-icon="zip"], a[data-icon="file"], a[data-icon="img"] {
    background-repeat: no-repeat;
    background-position: left 3px;
    background-size: 16px;
    line-height: 20px;
    display: inline-block;
    padding-left: 25px;
    vertical-align: top;
}
a[data-icon="pdf"] { background-image: url("/assets/img/icon-pdf.png"); }
a[data-icon="doc"], a[data-icon="docx"] { background-image: url("/assets/img/icon-doc.png"); }
a[data-icon="xls"], a[data-icon="xlsx"] { background-image: url("/assets/img/icon-xls.png"); }
a[data-icon="ppt"], a[data-icon="pptx"] { background-image: url("/assets/img/icon-ppt.png"); }
a[data-icon="zip"] { background-image: url("/assets/img/icon-zip.png"); }
a[data-icon="file"] { background-image: url("/assets/img/icon-file.png"); }
a[data-icon="img"] { background-image: url("/assets/img/icon-img.png"); }


strong { font-weight: bold; }

em, i, .italic { font-style: italic; color: inherit; }

h1 { font-size: 28px; font-weight: bold; margin: 0 0 10px 0; }
h2 { font-size: 22px; font-weight: bold; margin: 0 0 3px 0; }
h3 { font-size: 20px; font-weight: bold; margin: 0 0 3px 0; }
h4 { font-size: 18px; font-weight: bold; margin: 0 0 3px 0; }
h5 { font-size: 16px; font-weight: bold; margin: 0 0 3px 0; }
h6 { font-size: 16px; font-weight: bold; margin: 0 0 3px 0; }

h2.project-bar { background: url(/assets/img/project-bar-bg.png) no-repeat left; color: #fff; line-height: 32px; padding: 0 10px; margin: 20px 0px; }
h2.project-bar.keeyask { background-image: url(/assets/img/project-bar-bg-keeyask.png); }

p { margin: 0 0 15px 0; }

ul, ol { margin: 0 0 15px 0; }
ul ul, ol ol { margin: 0 0 0 20px; padding: 0; }
ul ul ul, ol ol ol { margin: 0 0 0 20px; padding: 0; }

li { margin: 0 0 3px; }

blockquote {
    display: block;
    width: auto;
    margin: 40px 0px;
    padding: 20px;
    background-color: #F4F6D4;
}
blockquote:before, blockquote:after { content: " "; display: table; }
blockquote:after { clear: both; }

blockquote.blue { background-color: #E2F1FF; }
blockquote.grey { background-color: #3E3E3E; color: #ffffff; }
blockquote.grey a:link, blockquote.grey a:visited { color: #ffffff; text-decoration: underline; }
blockquote.grey a:hover, blockquote.grey a:active, blockquote.grey a:focus { color: #ffffff; text-decoration: underline; text-shadow: 1px 1px 1px rgba(255,255,255,0.7); }
blockquote.gradient {
    color: #ffffff;
    background: #00a3cf; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #00a3cf 1%, #007bba 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #00a3cf 1%,#007bba 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #00a3cf 1%,#007bba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
blockquote.gradient a:link, blockquote.gradient a:visited { color: #ffffff; text-decoration: underline; }
blockquote.gradient a:hover, blockquote.gradient a:active, blockquote.gradient a:focus { color: #ffffff; text-decoration: underline; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }


table {
    border-collapse: collapse;
    margin: 40px 0;
    border: 1px solid #C8C8C8;
}
table th { padding: 3px; }
table tbody th { border: 1px solid #C8C8C8; }
table td {
    padding: 3px;
    border: 1px solid #C8C8C8;
}

pre {
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    color: #000000;
    background: #f7f7f7;
    padding: 10px 20px;
    overflow-x: scroll;
}

dl { margin: 20px 0; }
dt { font-weight: bold; }
dd { margin: 0 0 10px 20px; }

.container, #wrapperMain {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 538px;
    font-size: 16px;
    overflow: hidden;
    background: #fff;
    border: none;
    width: 100%;
}
.container {
    position: relative; /* Context for absolutely positioned elements. */
}
.container.custom {
    background: transparent;
}

.floating-box {
    margin: 0;
    padding: 20px 20px;
}
.floating-box.light { background: rgba(255,255,255,0.6); color: #000000; }
.floating-box.dark { background: rgba(0,0,0,0.6); color: #ffffff; }

.floating-box h1 { color: #0079C1; font-size: 18px; }

.floating-box + .floating-box {
    margin-top: 20px !important;
}

/********************************
Header Content
********************************/

/**
 * Legacy styles.
 *
 * Maintains support for previous site header.
 *
 * To do: remove this when all external applications have been updated to use
 * the new site header.
 */

header {
    display: block;
    height: 56px;
    background: #0079C1;
    line-height: 45px;
    padding: 0 20px;
    text-align: left;
}

header .logo {
    display: block;
    float: right;
    width: 122px;
    height: 45px;
    margin: 5px;
    background: url("/assets/img/mbhydro_logo.png") no-repeat center;
    background-size: 122px;
    cursor: pointer;
    text-align: left;
    text-indent: -9999px;
}
header .logo:focus, header .logo:active { outline: 1px dotted #ccc; }
header a.util {
    margin: 0 20px 0 0;
    line-height: 50px;
}
header a.util:link, header a.util:visited { color: #ffffff; text-decoration: none; }
header a.util:hover, header a.util:active, header a.util:focus { color: #ffffff; text-decoration: underline; }

.search-container {
    display: inline-block;
    width: 205px;
    line-height: 24px;
    margin: 0 10px 0 0;
    padding: 0 0 0 5px;
    background: #ffffff;
    border: 1px solid #C8C8C8;
    text-align: left;
}
.search-container input[type='search'] {
    display: inline-block;
    border: 0;
    margin: 0;
    padding: 2px 0;
    width: 170px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    -webkit-appearance: none;
    overflow: hidden;
    box-shadow: none !important;
}
.search-container button {
    display: inline-block;
    background: transparent;
    border: 0;
    text-indent: -9999px;
    width: 25px;
    height: 24px;
    margin: 0;
    padding: 0;
    line-height: 24px;
    background-image: url("/assets/img/search_icon.png");
    background-repeat: no-repeat;
    background-size: 23px;
    cursor: pointer;
    overflow: hidden;
}
.search-container button:focus, .search-container button:active { outline: 1px dotted #6AAFD7; }

#menu-button {
    display: inline-block;
    margin: 5px;
    padding: 0 10px 0 30px;
    transition: 0.8s border;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border-radius: 6px;
    background-image: url("/assets/img/menu-icon.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
}
#menu-button:link, #menu-button:visited { color: #ffffff; text-decoration: none; border: 1px solid #0079C1; }
#menu-button:hover, #menu-button:active, #menu-button:focus { color: #ffffff; text-decoration: none; border: 1px solid rgba(255,255,255,0.2); }

#main-nav {
    display: none;
    background: #ffffff;
    border-bottom: 1px solid #0079C1;
    margin: 0;
}
#main-nav ul { list-style: none; margin: 0; padding: 0; }
#main-nav ul li { margin: 0; padding: 0; }
#main-nav ul li a {
    display: block;
    line-height: 44px;
    padding: 0 20px;
}
#main-nav ul li a:link, #main-nav ul li a:visited { color: #000000; text-decoration: none; }
#main-nav ul li a:hover, #main-nav ul li a:active, #main-nav ul li a:focus { color: #ffffff; background-color: #0079C1; text-decoration: none; }

.utility-area {
    padding: 20px 20px 15px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(0,121,193,0.2);
    color: #0079C1;
}
.utility-area a { padding: 0 5px; }
.utility-area a:link, .utility-area a:visited { color: #0079C1; text-decoration: none; }
.utility-area a:hover, .utility-area a:active, .utility-area a:focus { color: #0079C1; text-decoration: underline; }

#main-nav > .utility-area,
#main-nav > ul {
    margin-left: -20px;
    margin-right: -20px;
}

/* Small devices (landscape phones, 570px and up) */
@media screen and (min-width: 570px) {
    header {
        padding-top: 4px;
        padding-left: 30px;
        padding-right: 30px;
    }
    #main-nav > .utility-area,
    #main-nav > ul {
        margin-left: -30px;
        margin-right: -30px;
    }
}
/* Medium devices (desktops, 990px and up) */
@media screen and (min-width: 990px) {
    header {
        padding-left: 0;
        text-align: right;
    }
    header .logo { float: left; }

    #main-nav {display: block; margin: 0; }
    #main-nav ul li a {
        display: inline-block;
        float: left;
        line-height: 24px;
        padding: 0 10px;
        margin: 0 32px 0 0;
        font-size: 14px;
    }
    #main-nav.fr ul li a { margin-right: 17px; }

    #main-nav > .utility-area,
    #main-nav > ul {
        margin-left: -10px;
        margin-right: -10px;
    }
    #main-nav > ul li a {
        padding-top: 3px;
        padding-bottom: 4px;
    }
}

/* Large devices (large desktops, 1210px and up) */
@media screen and (min-width: 1210px) {
    #main-nav ul li a { margin: 0 64px 0 0; }
    #main-nav.fr ul li a { margin-right: 48px; }
}

/* High DPI display swaps */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 120dpi) {
    header .logo { background-image: url("/assets/img/mbhydro_logo_2x.png"); }

    #menu-button { background-image: url("/assets/img/menu-icon_2x.png"); }

    .search-container button { background-image: url("/assets/img/search_icon_2x.png"); }

    .close-button { background-image: url('/assets/img/icon-close_2x.png'); }
}

/* End of legacy styles. */

/**
 * Site header.
 */

.site-header {
    background: #0079C1;
    display: block;
    font-family: 'mh_houschka_stddemibold', Arial, sans-serif;
    height: 56px;
    line-height: 45px;
    padding: 0 20px;
    text-align: left;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/**
 * Site logo.
 */

.site-header .site-logo {
    display: block;
    float: right;
    height: 39px;
    margin: 0;
    position: relative;
    top: 9px;
    width: 104px;
    z-index: 5;
}
.site_header .site-logo:focus,
.site_header .site-logo:active {
    outline: 1px dotted #ccc;
}
.site-header .site-logo img {
    height: auto;
    max-width: 100%;
}

/**
 * Main navigation area.
 */

#main-nav {
    background: #fff;
    border: none;
    display: none; /* Hide until it is toggled. */
    margin: 0;
    padding: 0 20px;
}

#main-nav .nav-container {
    padding: 1em 0;
    /* Change order of elements. */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}
#main-nav .nav-container .utilities-container {
    -ms-flex-order: 2;
    order: 2;
}

/**
 * Primary nav links.
 */

#main-nav .primary-links {
    list-style-type: none;
    margin: 0 -0.5em;
    padding: 0 0 1em;
}
#main-nav .primary-links li {
    margin: 0;
    padding: 0;
}
#main-nav .primary-links li a {
    display: block;
    font-family: 'mh_houschka_stddemibold', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.085em;
    line-height: 24px;
    margin: 0;
    padding: 0.5em 0.5714285714em;
    text-decoration: none;
    text-transform: uppercase;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
#main-nav .primary-links li a:link,
#main-nav .primary-links li a:visited {
    color: #0079C1;
}
#main-nav .primary-links li a:hover,
#main-nav .primary-links li a:active
#main-nav .primary-links li a:focus {
    background-color: #fff;
    color: #000;
}

/**
 * Area for secondary links and search.
 */

#main-nav .utilities-container {
    border: none;
    color: #0079C1;
    padding: 0 0 1em;
    text-align: center;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/**
 * Secondary nav links.
 */

#main-nav .secondary-links {
    display: block;
    font-size: 15px;
    letter-spacing: 0.0111111111111em;
    line-height: 20px;
    list-style-type: none;
    margin: 0 -10px 15px;
    padding: 0;
    text-align: right;
    vertical-align: middle;
}
#main-nav .secondary-links li {
    display: inline-block;
    margin: 0;
}
#main-nav .secondary-links li:after {
    content: ' | ';
}
#main-nav .secondary-links li:last-child:after {
    content: '';
}
#main-nav .secondary-links li a:link,
#main-nav .secondary-links li a:visited {
    color: #0079C1;
    display: inline;
    font-family: 'mh_houschka_stddemibold', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.0111111111111em;
    line-height: inherit;
    padding: 10px;
    text-decoration: none;
    text-transform: none;
}
#main-nav .secondary-links li a:hover,
#main-nav .secondary-links li a:active,
#main-nav .secondary-links li a:focus {
    background: transparent;
    color: #014268;
}

/**
 * Search bar.
 */

.searchform-container {
    background: #fff;
    border: 1px solid #0079c1;
    box-sizing: border-box;
    display: inline-block;
    line-height: 24px;
    margin: 0;
    padding: 0 0 0 7px;
    text-align: left;
    vertical-align: middle;
    width: 100%;
}
.searchform-container form {
    display: -ms-flexbox;
    display: flex;
    margin: 0;
}
#search-terms,
.searchform-container input[type='search'],
.searchform-container input[type='search']::-webkit-input-placeholder {
    font-family: 'mh_houschka_stddemibold', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
#search-terms,
.searchform-container input[type='search'],
.searchform-container button {
    border: 0;
    box-sizing: border-box;
    height: 24px;
    margin: 0;
    overflow: hidden;

}
#search-terms,
.searchform-container input[type='search'] {
    box-shadow: none !important;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 2px 0;
    text-align: left;
    width: auto;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}
.searchform-container input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; /* Remove default text indent. */
}
.searchform-container button {
    background: url('../img/icon-search.svg') no-repeat scroll 50% 50% #fff;
    cursor: pointer;
    -ms-flex: none;
    flex: none;
    line-height: 24px;
    overflow: hidden;
    padding: 0;
    text-indent: 30px; /* Hide text. */
    white-space: nowrap;
    width: 26px;
}
.searchform-container button:focus,
.searchform-container button:active {
    outline: 1px dotted #6AAFD7;
}

/**
 * Menu toggle button.
 */

#menu-button {
    background-image: none;
    border: none;
    border-radius: 0;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.085em;
    line-height: 16px;
    margin: 0 0 0 -20px;
    padding: 20px 22px 20px 44px;
    position: relative;
    text-shadow: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease-out;
}
#menu-button:before {
    background: url('../img/icon-menu.svg') no-repeat scroll 0 0;
    content: '';
    display: inline-block;
    height: 14px;
    left: 20px;
    margin-top: -7px;
    margin-right: 10px;
    position: absolute;
    top: 50%;
    width: 16px;
}
#menu-button:link,
#menu-button:visited {
    border: none;
    color: #fff;
    text-decoration: none;
}
#menu-button:hover,
#menu-button:active,
#menu-button:focus {
    background-color: #005c96;
}

/**
 * Breadcrumbs.
 */

#breadcrumbs {
    background-color: #767676 !important;
    clear: both; /* For browsers without flexbox support. */
    color: #fff;
    font-family: 'mh_houschka_stddemibold', Arial, sans-serif;
    font-size: 1em;
    margin: 0;
    padding: 9px 20px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
#breadcrumbs p {
    color: inherit;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    margin: 0 0 0 -3px;
    padding: 0;
}
#breadcrumbs a,
#breadcrumbs span {
    color: inherit;
    font-size: inherit;
    font-weight: normal;
    margin: 0;
    padding: 3px;
    white-space: nowrap;
}
#breadcrumbs a:link,
#breadcrumbs a:visited {
    color: inherit;
    text-decoration: none;
}
#breadcrumbs a:hover,
#breadcrumbs a:active,
#breadcrumbs a:focus {
    color: #b1b1b1;
}
/**
 * Replace the home link with an icon.
 *
 * We use a convoluted selector to target the home link,
 * it should be replaced with a class.
 */
#breadcrumbs p:first-child > span:first-child + a {
    background: url('../img/icon-home.svg') no-repeat scroll 3px 0;
    display: inline-block;
    height: 20px;
    margin: 0;
    overflow: hidden;
    padding: 0 4px 0 3px;
    text-indent: 25px;
    vertical-align: top;
    white-space: nowrap;
    width: 16px;
}
#breadcrumbs p:first-child > span:first-child + a:hover,
#breadcrumbs p:first-child > span:first-child + a:active {
    background-position: 3px -100px;
}

/********************************
Main Content Area (New)
********************************/

article {
    margin: 0;
    padding: 0;
}

article img { max-width: 100%; }
article table img { max-width: none; }

article.full {
    width: 100%;
}
article.static {
    border-bottom: 20px solid #3E3E3E;
}

img.article-banner { display: block; width: 100%; overflow: hidden; }
#imagestrip { margin: 0; padding: 0; background: none; width: 100%; }
#imagestrip img { width: 100%; margin: 0; padding: 0; border-bottom: 0; }

.content-area {
    padding: 20px 20px;
}

.content-area h1 {
    border-bottom: 1px solid #C8C8C8;
    margin-bottom: 20px;
    margin-top: 0;
}

.adbox {
    display: block;
    text-align: center;
    margin: 20px auto;
}
.adbox:before, .adbox:after { content: " "; display: table; }
.adbox:after { clear: both; }

.adbox img {
    float: none;
    margin-bottom: 10px;
}
.adbox h2 {
    width: 100%;
    margin: 0;
    border-top: 6px solid #0079C1;
    border-bottom: 6px solid #0079C1;
    padding: 10px 0;
    margin: 0;
    font-weight: normal;
}

.videobox {
    display: block;
    border: 1px solid #E2F1FF;
    background: #fcfcfc;
    margin: 20px auto;
    padding: 20px 20px 10px 20px;
}
.videobox:before, .videobox:after { content: " "; display: table; }
.videobox:after { clear: both; }
.vid-thumb {
    display: block;
    width: 160px;
    height: 120px;
    line-height: 140px;
    margin: 10px auto;
    padding: 0;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.vid-thumb.large {
    width: 300px;
    height: 165px;
    line-height: 165px;
    max-width: 100%;
}
.vid-thumb img {
    display: inline-block;
    width: 40px;
    height: auto;
    margin: 0 60px;
    padding: 0;
}
.vid-thumb.large img {
    margin: 0 130px;
}
.vid-desc {
    margin: 0;
}
.vid-desc h3 {
    margin-top: 0;
}

.figurebox {
    display: block;
    background: #F4F6D4;
    padding: 1px;
    margin: 20px auto;
    font-size: 14px;
    width: 150px;
}
.figurebox.large { width: 90%; }
.figurebox.nofloat { float: none; margin: 20px 0; }

.figurebox img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
.figurebox p {
    margin: 0;
    padding: 5px;
}

.callout-box {
    display: block;
    margin: 0px auto 40px;
    padding: 10px 20px 10px 20px;
    background: #f0f0f0;
    border: 6px solid #0079C1;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
.callout-box .danger a:link, .callout-box .danger a:visited { color: #B3130E; text-decoration: none; }
.callout-box .danger a:hover, .callout-box .danger a:active, .callout-box a:focus { color: #117ABF; text-decoration: none; }

.callout-box.blue {
    padding: 10px 20px;
    margin: 0 auto 20px;
    background: #0079C1;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: none;
}
.callout-box.blue h1 { color: #ffffff; }
.callout-box.blue a:link, .callout-box.blue a:visited { color: #ffffff; text-decoration: underline; }
.callout-box.blue a:hover, .callout-box.blue a:active,.callout-box.blue a:focus { color: #ffffff; text-decoration: underline; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); }

.callout-box.dark {
    border: 0;
    background: #4D4E4E;
    color: #ffffff;
    box-shadow: none;
}
.callout-box.dark h1 { color: #ffffff; }
.callout-box.dark h2 { color: #ffffff; margin-bottom: 10px; border-bottom: 1px solid #ffffff; }

table.tabular { width: auto; border-collapse: collapse; margin: 20px 0; padding: 0; empty-cells: show; border: 0px; border-spacing: 0; }
table.tabular thead { background: #595959; color: #ffffff; border-bottom: 5px solid #C9E353; letter-spacing: 0.5px }
table.tabular tfoot { background: #595959; color: #ffffff; font-size: 14px !important; letter-spacing: 0.5px }
table.tabular thead tr th, table.tabular thead tr td { color: #ffffff; padding: 5px; background: none; border: 1px solid #595959 !important; font-weight: normal; }
table.tabular tfoot tr th, table.tabular tfoot tr td { color: #ffffff; padding: 5px; background: none; border: 1px solid #595959 !important; font-weight: normal; font-size: 14px; }
table.tabular thead tr:first-child th { font-weight: bold !important; background-color: #0079C1 !important; border: 1px solid #0079C1 !important; }
table.tabular td, table.tabular th { padding: 5px; border: 1px solid #C8C8C8; }
table.tabular tbody tr:nth-child(even) { background-color: #f0f0f0; }
table.tabular.fullwidth { width: 100%; }

table.tabular thead a:link, table.tabular thead a:visited,
table.tabular tfoot a:link, table.tabular tfoot a:visited { color: #ffffff; text-decoration: underline; }
table.tabular thead a:hover, table.tabular thead a:active, table.tabular thead a:focus,
table.tabular tfoot a:hover, table.tabular tfoot a:active, table.tabular tfoot a:focus { color: #ffffff; text-decoration: underline; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); }

table.tabular.number tr td { text-align: right; }
table.tabular.number tr td:first-child { text-align: left; }

table.tabular.outage-table thead tr:first-child th { background-color: #595959 !important; border: 0 !important; font-weight: normal !important; }
table.tabular.outage-table th { background-color: #595959; color: #ffffff; text-align: left; border: 1px solid #ffffff; font-weight: normal; padding: 5px; width: 45%; }
table.tabular.outage-table tbody tr:nth-child(odd) { background: #ffffff; }
table.tabular.outage-table th a:link, table.tabular.outage-table th a:visited { color: #ffffff; text-decoration: underline; }
table.tabular.outage-table th a:hover, table.tabular.outage-table th a:active, table.tabular.outage-table th a:focus { color: #ffffff; text-decoration: underline; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); }

table.swatch { border: 0; border-collapse: separate; border-spacing: 0 10px; }
table.swatch tr td { padding: 3px 3px 3px 15px; border: 0; }
table.swatch tr td:first-child { width: 75px; height: 45px; padding: 0px; border: 1px solid #C8C8C8; }

.welled-table {
    display: block;
    width: 100%;
    height: auto;
    overflow: auto;
    padding: 10px 0;
    margin: 0;
}
.welled-table table {
    overflow-x: auto;
}

.column-row:before, .column-row:after { content: " "; display: table; }
.column-row:after { clear: both; }

.column-block {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}


.page-gallery {
    margin: 20px 0;
}
.page-gallery:before, .page-gallery:after { content: " "; display: table; }
.page-gallery:after { clear: both; }
.page-gallery .item {
    display: block;
    background: #F4F6D4;
    padding: 1px;
    margin: 0 auto 20px;
    font-size: 14px;
    width: 100%;
    min-height: 75px;
}
.page-gallery .item:last-child { margin-right: 0; }

.page-gallery .item img {
    float: left;
    width: 75px;
    margin: 0 15px 0 0;
    height: auto;
}
.page-gallery .item p {
    margin: 0;
    padding: 5px;
}

img.document-cover {
    display: block;
    margin: 10px auto 20px;
    width: 100px;
    height: auto;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
    transition: 0.4s box-shadow;
}
img.document-cover:hover, img.document-cover:active, img.document-cover:focus { box-shadow: 3px 3px 20px -3px rgba(0,0,0,1); }


.project-status-block {
    display: block;
    width: auto;
    margin: 20px 0px;
    padding: 20px;
    background: #E2F1FF;
}
.project-status-block .status-thumb {
    display: block;
    margin: 0 auto 20px auto;
    text-align: center;
}
.project-status-block .status-thumb img {
    width: 100%;
    max-width: 160px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}
.project-status-block .status-content {
    display: block;
    margin: 0 auto;
}
.project-status-block:before, .project-status-block:after { content: " "; display: table; }
.project-status-block:after { clear: both; }



iframe.embedded-map {
    display: block;
    margin: 20px auto;
    padding: 0;
    border: 0;
    width: 100%;
    height: 300px;
}

.four-step-progress {
    display: block;
    width: 240px;
    height: 26px;
    margin: 20px auto 10px;
    background-image: url('/assets/img/four-steps.png');
    background-size: 240px 104px;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.four-step-progress.step-one { background-position: center 0px; }
.four-step-progress.step-two { background-position: center -26px; }
.four-step-progress.step-three { background-position: center -52px; }
.four-step-progress.step-four { background-position: center -78px; }

/********************************
Main Sidebar Area (New)
********************************/
aside {
    background: transparent;
    display: block;
    line-height: 1.3125;
    margin: 0;
    padding: 20px 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
aside h1,
aside h2  {
    padding: 0;
    margin: 0.5em 20px 1em;
    font-family: 'mh_houschka_stddemibold', Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
aside h1 a,
aside h2 a {
    border-bottom: 1px solid #c8c8c8;
    display: block;
    padding: 6px 0;
}
aside h1 a:link, aside h1 a:visited,
aside h2 a:link, aside h2 a:visited { color: #000; text-decoration: none; }
aside h1 a:hover, aside h1 a:active, aside h1 a:focus,
aside h2 a:hover, aside h2 a:active, aside h2 a:focus { color: #0079c1; text-decoration: none; }

aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
aside ul li {
    margin: 0;
    padding: 0;
}
aside ul li a {
    font-family: 'mh_houschka_stddemibold', Arial, sans-serif;
    font-weight: 400;
    display: block;
    padding: 6px 20px;
}
aside ul li a:link, aside ul li a:visited { color: #0079c1; text-decoration: none; }
aside ul li a:hover, aside ul li a:active, aside ul li a:focus { background: #fff; color: #000; text-decoration: none; }

aside p { padding: 0 20px; }

.subnav-toggle {
    background: url("/assets/img/arrows-up-down.svg") no-repeat right;
    overflow: hidden;
    padding: 0 20px 0 0;
}
.subnav-toggle.up { background-position: 100% 0; }
.subnav-toggle.down { background-position: 100% -100px; }

/********************************
Homepage Content
********************************/
.home-banner {
    display: none;
    height: 55px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center -150px;
    padding: 95px 0 0 0;
    margin: 0;
}

.home-banner p {
    font-size: 14px;
    color: #000;
    text-align: right;
    padding: 10px 20px 10px 0;
    margin: 0;
    text-shadow: 1px 1px 1px #ffffff;

    background: #ffffff;
    background: rgba(255,255,255,0.8);
    background: linear-gradient(to right, rgba(255,255,255,0) 75%, rgba(255,255,255,0.9) 90%);
}
.home-banner p a:link, .home-banner p a:visited { color: #000000; text-decoration: none; }
.home-banner p a:hover, .home-banner p a:active, .home-banner p a:focus { color: #000000; text-decoration: underline; }

.task-button {
    display: block;
    background: #0079C1;
    font-size: 22px;
    font-weight: 600;
    line-height: 85px;
    color: #ffffff;
    border-top: 5px solid #ffffff;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    transition: background 0.4s;
}

.task-button:link, .task-button:visited { color: #ffffff; background: #0079C1; text-decoration: none; }
.task-button:hover, .task-button:active, .task-button:focus { color: #ffffff; background: #005D94; text-decoration: none; }

.task-button.active { text-shadow: 1px 1px 2px rgba(255,255,255,1); }
.task-button.active:link, .task-button.active:visited { color: #3E3E3E; text-decoration: none; background: #CDE855;  }
.task-button.active:hover, .task-button.active:active, .task-button.active:focus { color: #3E3E3E; text-decoration: none; background: #CDE855; }

.task-container {
    display: none;
    background: #CDE855;
    color: #3E3E3E;
    padding-top: 20px;
}

.task-container a:link, .task-container a:visited { color: #3E3E3E; text-decoration: none; }
.task-container a:hover, .task-container a:active, .task-container a:focus { color: #3E3E3E; text-decoration: underline; }

.task-container h1 {
    margin: 0 0 20px 0;
    padding: 0 20px;
    background: #ffffff;
    color: #3E3E3E;
    font-size: 20px;
    line-height: 38px;
    font-weight: normal;
}
.task-container h3 {
    font-weight: bold;
    font-size: 19px;
    padding-bottom: 5px;
}

.task-container blockquote { margin: 0 0 20px 0 !important; padding: 0; }
.task-container blockquote img { display: block; width: 100%; }
.task-container blockquote p { margin: 0; padding: 10px; }
.task-container blockquote .big { display: block; font-size: 26px; padding: 60px 20px; }

.close-button {
    float: right;
    display: inline-block;
    margin: 0 20px 0;
    padding: 0 20px 0 0;
    background-image: url('/assets/img/icon-close.png');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: right;
    line-height: 38px;
}
a.close-button:link, a.close-button:visited { color: #3E3E3E; text-decoration: none; }
a.close-button:hover, a.close-button:active, a.close-button:focus { color: #3E3E3E; text-decoration: none; }

.column { padding: 0 20px; }
.column.full { float: none !important; width: auto !important; }

#outage-tweets p {
    margin: 0px;
    overflow: hidden;

}
#outage-tweets p a {
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}
#outage-tweets p.timePosted {
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 12px;
}
#outage-tweets p.timePosted:before {
    content: " ";
    display: inline-block;
    float: left;
    width: 25px;
    height: 25px;
    margin: -5px 0 0 0;
    background-image: url("/assets/img/social-icons.png");
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: -25px 0px;
}


.grid-container {
    background: #ffffff;
    border-top: 6px solid #ffffff;
}

.grid-box {
    display: block;
    background-color: #E6F2F9;
    color: #3E3E3E;
}
.grid-box .inner {
    padding: 10px 20px;
}
.grid-box.news {
    font-size: 16px;
    line-height: 36px;
}
.grid-box.news h1 {
    background: #ffffff;
    margin: 0px -20px 20px -20px;
    padding: 5px 20px;
    font-size: 20px;
    font-weight: normal;
}
.grid-box.news p { margin: 0; }

a.news-item { display: block; margin: 0px 0px 20px; font-size: 16px; line-height: 18px; }
.date {
    float: left;
    display: block;
    width: 40px;
    margin-right: 20px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}
.month, .day {
    display: block;
    width: 40px;
    line-height: 18px;
    text-align: center;
    text-transform: uppercase;
}
.month {
    font-size: 12px;
    background: #0079C1;
    color: #fff;
}
.day {
    font-size: 18px;
    background: #ffffff;
    color: #3E3E3E;
    padding: 5px 0;
}

.grid-box.news a:link, .grid-box.news a:visited { color: #3E3E3E; text-decoration: none; }
.grid-box.news a:hover, .grid-box.news a:active, .grid-box.news a:focus { color: #3E3E3E; text-decoration: underline; }


.grid-box.advert {
    background-repeat: no-repeat;
    background-size: cover;
    transition: 0.8s box-shadow;
    border-top: 6px solid #ffffff;
}
/* CSS for Specific Featurebox ads will be placed in the homepage stylesheet. */


/********************************
Footer Content
********************************/


/**
 * Legacy styles.
 *
 * Maintains support for previous site footer.
 *
 * To do: remove this when all external applications have been updated to use
 * the new site footer.
 */

footer {
    display: block;
    color: #ffffff;
    padding-bottom: 80px;

    background-color: #3E3E3E;
    background-image: url("/assets/img/footer-bg.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 1120px;
}

footer .contact-area {
    margin-top: 45px;
    padding: 20px 0 20px 20px;
}

a.foot-contact {
    display: block;
    font-size: 24px;
    line-height: 44px;
    margin: 0px 0px 15px 0px;
    padding: 0 20px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    transition: background-color 0.8s;
}
a.foot-contact:link, a.foot-contact:visited { color: #ffffff; text-decoration: none; background: rgba(200,200,200,0.2); }
a.foot-contact:hover, a.foot-contact:active, a.foot-contact:focus { color: #ffffff; text-decoration: none; background: rgba(0,121,193,1); }


.social-media h2 {
    font-weight: normal;
    margin: 15px 0 0 0;
    font-size: 18px;
}

.social-media a.sm {
    display: block;
    float: left;
    width: 60px;
    height: 60px;
    margin: 5px 5px 5px 0;
    text-align: left;
    text-indent: -9999px;

    background-size: 240px;
    background-image: url("/assets/img/social-icons.png");
    background-repeat: no-repeat;
    transition: background-color 0.8s;
}
.social-media a.sm:first-child { margin-left: 0; }

a.sm.facebook { background-position: 0px top; }
a.sm.facebook:link, a.sm.facebook:visited { background-color: rgba(200,200,200,0.2); }
a.sm.facebook:hover, a.sm.facebook:active, a.sm.facebook:focus { background-color: rgba(54,77,140,1); }

a.sm.twitter { background-position: -60px top; }
a.sm.twitter:link, a.sm.twitter:visited { background-color: rgba(200,200,200,0.2); }
a.sm.twitter:hover, a.sm.twitter:active, a.sm.twitter:focus { background-color: rgba(70,154,233,1); }

a.sm.youtube { background-position: -120px top; }
a.sm.youtube:link, a.sm.youtube:visited { background-color: rgba(200,200,200,0.2); }
a.sm.youtube:hover, a.sm.youtube:active, a.sm.youtube:focus { background-color: rgba(205,13,28,1); }

a.sm.linkedin { background-position: -180px top; }
a.sm.linkedin:link, a.sm.linkedin:visited { background-color: rgba(200,200,200,0.2); }
a.sm.linkedin:hover, a.sm.linkedin:active, a.sm.linkedin:focus { background-color: rgba(11,98,166,1); }

footer nav .foot-col {
    padding: 0 20px;
}

footer ul { list-style: none; margin: 0; padding: 0; }
footer ul li { margin: 0; padding: 0; }

footer a {
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
}

footer ul li a { font-size: 16px; margin: 10px 0px; }

footer a:link, footer a:visited { color: #ffffff; text-decoration: none; }
footer a:hover, footer a:active, footer a:focus { color: #ffffff; text-decoration: underline; }

hr.fade {
    margin: 50px 0 0 0;
    border: 0;
    height: 1px;
    width: auto;
    background: none;
    background: linear-gradient(to right, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0) 75%);
}

.subfooter {
    font-size: 12px;
    padding: 0 20px;
    margin-top: 12px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
    text-align: left;
    color: #787878;
}

/* Small devices (landscape phones, 570px and up) */
@media screen and (min-width: 570px) {
    footer { background-size: 1680px; padding-bottom: 50px; }
}

/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    footer .contact-area {
        float: right;
        width: 370px;
        padding-left:0;
    }
    footer nav {
        float: right;
        width: 370px;
        margin-top: 60px;
    }
}

/* Medium devices (desktops, 990px and up) */
@media screen and (min-width: 990px) {
   footer .contact-area {
        width: 238px;
        padding-left:0;
    }
    footer nav {
        margin-top: 0;
        width: 720px;
    }
    footer nav .foot-col {
        float: left;
        width: 194px;
        margin-right: 6px;
        margin-top: 60px;
    }

    .social-media a.sm { width: 50px; height: 50px; background-size: 200px; }
    .social-media a.sm.linkedin { background-position: -150px 0px; }
    .social-media a.sm.youtube { background-position: -100px 0px; }
    .social-media a.sm.twitter { background-position: -50px 0px; }
    .social-media a.sm.facebook { background-position: 0px 0px; }
}

/* Large devices (large desktops, 1210px and up) */
@media screen and (min-width: 1210px) {
    footer .contact-area { width: 293px; }
    footer nav { width: 883px; }
    footer nav .foot-col { width: 248px; }

    .social-media a.sm { width: 60px; height: 60px; background-size: 240px; }
    .social-media a.sm.linkedin { background-position: -180px 0px; }
    .social-media a.sm.youtube { background-position: -120px 0px; }
    .social-media a.sm.twitter { background-position: -60px 0px; }
    .social-media a.sm.facebook { background-position: 0px 0px; }
}
/* High DPI display swaps */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 120dpi) {
    .social-media a.sm { background-image: url("/assets/img/social-icons_2x.png"); }
    footer { background-image: url("/assets/img/footer-bg_2x.png"); }
}

/* End of legacy styles. */

/**
 * Site footer.
 */

.site-footer {
    background: #767676;
    clear: both; /* For browsers without flexbox support. */
    padding: 7em 20px 2.5em;
    position: relative;
    text-align: center;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.site-footer a {
    display: inline; /* Important to pull off underline hack. */
    padding: 3px 0; /* Expand clickable area and prevent underline from being hidden. */
    text-decoration: none;
}
.site-footer a:link,
.site-footer a:visited {
    color: #fff;
    text-decoration: none;
}
.site-footer a:hover,
.site-footer a:active,
.site-footer a:focus {
    background: linear-gradient(0deg, rgba(255,255,255,0.8), rgba(255,255,255,0.8));
    background-size: 1px 1px;
    background-repeat: repeat-x;
    background-position: 0 1.5em;
    text-decoration: none;
}

/**
 * Footer navigation.
 *
 * Contains navigation links, organized into columns.
 */

.site-footer .footer-navigation {
    display: -ms-flexbox;
    display: flex; /* Display in columns as screen widens. */
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    float: none;
    margin: 0;
    overflow: hidden; /* Clearfix. */
    width: 100%;
}
.site-footer .footer-navigation h2 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.085em;
    line-height: 1.5;
    margin: 2.5em 0 1.35714em;
    text-transform: uppercase;
}
.site-footer .footer-navigation h2 a {
    font-size: inherit;
}
.site-footer .footer-navigation ul,
.site-footer .footer-navigation li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.site-footer .footer-navigation li {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.022222222em;
    line-height: 1.26666666666;
    margin: 0.4em auto;
    max-width: 16em;
}
.site-footer .footer-navigation li a {
    font-size: inherit;
}
.site-footer .footer-navigation .footer-column {
    box-sizing: border-box;
    -ms-flex: none;
    flex: none;
    float: none;
    margin: 0 auto;
    max-width: 16em;
    padding: 0 20px;
    width: 100%;
}

/**
 * Links to related social media accounts.
 */

.site-footer .social-media-links {
    left: 0;
    position: absolute;
    text-align: center;
    top: 2.5em;
    width: 100%;
}
.site-footer .social-media-links ul,
.site-footer .social-media-links li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.site-footer .social-media-links li {
    display: inline-block;
}
.site-footer .social-media-links a[class|='link'] {
    background: none;
    display: inline-block;
    height: 32px;
    float: none;
    margin: 5px 0;
    overflow: hidden;
    padding: 5px;
    position: relative;
    text-align: left;
    text-indent: 50px; /* Hide text. */
    white-space: nowrap;
    width: 32px;
}
.site-footer .social-media-links a[class|='link']:after {
    background-color: #a9a9a9;
    background-image: url('../img/social-media-icons.svg');
    background-repeat: no-repeat;
    background-size: 200px;
    bottom: 5px;
    border-radius: 20px;
    content: '';
    display: block;
    left: 5px;
    overflow: hidden;
    position: absolute;
    right: 5px;
    top: 5px;
    transition: background-color 0.1s ease-out;
}
.site-footer .social-media-links a[class|='link']:hover:after {
    background-color: #0079C1;
}
.site-footer .social-media-links a.link-facebook:after {
    background-position: 0 0;
}
.site-footer .social-media-links a.link-twitter:after {
    background-position: -50px 0;
}
.site-footer .social-media-links a.link-youtube:after {
    background-position: -100px 0;
}
.site-footer .social-media-links a.link-linkedin:after {
    background-position: -150px 0;
}

/**
 * Sub-footer.
 *
 * Region at the bottom which contains secondary links and copyright info.
 */

.site-footer .subfooter {
    clear: both; /* For browsers without flexbox support. */
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.03333333333em;
    line-height: 1.5;
    margin: 5em 0 1.5em;
    padding: 0;
    text-align: center;
}

.site-footer .subfooter-links {
    font-size: 15px;
    letter-spacing: 0.022222222em;
    line-height: 1.333333333333;
    margin: 0 -10px 15px;
    padding: 0;
}
.site-footer .subfooter-links ul,
.site-footer .subfooter-links li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.site-footer .subfooter-links li {
    display: inline-block;
}
.site-footer .subfooter-links li:after {
    color: #fff; /* Fallback. */
    color: rgba(255,255,255,0.7);
    content: ' | ';
    cursor: default;
    position: relative;
    top: -1px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.site-footer .subfooter-links li:last-child:after {
    content: '';
}
.site-footer .subfooter-links li a {
    font-size: inherit;
    margin: 0 10px;
}

.site-footer .footnote small {
    font-size: 1em;
}

/********************************
Forms
********************************/


input,
textarea,
select,
option,
form.full-form input,
form.full-form textarea,
form.full-form select,
form.full-form option {
   font-family: "mh_houschka_std", Arial, sans-serif;
   font-size: 14px;
   color: #3E3E3E;
   padding: 3px;
   box-shadow: none;
   border-radius: 0px;
   font-weight: normal;
}

input,
textarea,
select,
form.full-form input,
form.full-form textarea,
form.full-form select {
    border: 1px solid #c8c8c8;
    margin: 2px 0;
    font-weight: normal;
}


input:focus,
textarea:focus,
select:focus,
option:focus,
form.full-form input:focus,
form.full-form textarea:focus,
form.full-form select:focus,
form.full-form option:focus {
    box-shadow: 0px 0px 15px #CCE4F3;
    font-weight: normal;
}

legend,
form.full-form legend {
    white-space: normal;
    width: 100%;
}

.calculator-area {
    border: 1px solid #C8C8C8;
    padding: 20px 20px 0;
    margin-bottom: 20px;
}

form.full-form input[type="text"],
form.full-form input[type="file"],
form.full-form input[type="email"],
form.full-form input[type="tel"],
form.full-form input[type="number"],
form.full-form input[type="date"],
form.full-form select {
    width: 300px;
    height: 25px;
    max-width: 90%;
    display: block;
}
form.full-form select {
    width: 308px;
    height: 33px;
}

form.full-form .indent input[type="text"],
form.full-form .indent input[type="file"],
form.full-form .indent input[type="email"],
form.full-form .indent input[type="tel"],
form.full-form .indent input[type="number"],
form.full-form .indent input[type="date"],
form.full-form input[type="text"].indent,
form.full-form input[type="file"].indent,
form.full-form input[type="email"].indent,
form.full-form input[type="tel"].indent,
form.full-form input[type="number"].indent,
form.full-form input[type="date"].indent {
    width: 280px;
}
form.full-form .indent select,
form.full-form select.indent {
    width: 288px;
}

form.full-form input[type="checkbox"] {
    border: 0 !important;
}
form.full-form input[type="text"].short,
form.full-form input[type="file"].short,
form.full-form input[type="email"].short,
form.full-form input[type="tel"].short,
form.full-form input[type="number"].short,
form.full-form input[type="date"].short  {
    width: 120px;
}
form.full-form select.short {
    width: 128px;
}
form.full-form label.inline,
label.inline { margin-right: 10px; }

label.error,
form.full-form label.error,
form.full-form label.ui-state-error,
 {
    display: none;
    color: #D5412B;
    margin: 5px 0 10px 0;
    font-size: 14px;
}
form.full-form input.error,
form.full-form textarea.error,
form.full-form select.error,
form.full-form .ui-state-error,
input.error,
textarea.error,
select.error {
    border: 1px solid #D5412B;
}

form.full-form textarea {
    width: 90%;
    max-width: 600px;
    height: 150px;
}
form.full-form textarea + .error:before {
    content:"\a";
    white-space: pre;
}

form.full-form input[type=button].button,
form.full-form input[type=submit].button,
form.full-form input[type=reset].button {
    min-width: 150px;
    margin-top: 20px;
    margin-bottom: 20px;
}

form.full-form fieldset,fieldset { border: 1px solid #C8C8C8; margin: 0 0 20px 0; padding: 10px; }
form.full-form fieldset.borderless, fieldset.borderless { border: 0; padding: 0; margin: 0; }
form.full-form fieldset.borderless:last-child, fieldset.borderless:last-child { margin-bottom: 20px; }
form.full-form fieldset.borderless legend, fieldset.borderless legend { margin-bottom: 5px; }
form.full-form fieldset.borderless label, fieldset.borderless label { line-height: 22px; }

.title-box { }

form.full-form .form-group, .form-group { margin: 0 0 10px 0; padding: 5px 0; }
form.full-form .form-group:before, form.full-form .form-group:after, .form-group:before, .form-group:after { content: " "; display: table; }
form.full-form .form-group:after, .form-group:after { clear: both; }
form.full-form .form-group:hover, .form-group:hover { background: #f7f7f7; }

.form-group label { }

.form-control { }

form.full-form .form-indent, .form-indent { margin: 15px 0px 0 18px; }
form.full-form .form-indent .form-group, .form-indent .form-group { margin: 0; }
form.full-form .form-indent input[type="text"], .form-indent input[type="text"],
form.full-form .form-indent input[type="file"], .form-indent input[type="file"],
form.full-form .form-indent input[type="email"], .form-indent input[type="email"],
form.full-form .form-indent input[type="tel"], .form-indent input[type="tel"],
form.full-form .form-indent input[type="number"], .form-indent input[type="number"],
form.full-form .form-indent input[type="date"], .form-indent input[type="date"] {
    width: 240px;
}
form.full-form .form-indent select, .form-indent select {
    width: 248px;
}

#ref_number { white-space: nowrap; }

form.external table.selectLists, form.external table { border: none; margin: 5px 0 20px; }
form.external table tr { background: transparent !important; }
form.external table tr td { padding: 3px 10px 3px 0; border: none; }

#msg_wrapper table { border: none; }
#msg_wrapper table tr { background: transparent !important; }
#msg_wrapper table td { border: none; }
#msg_wrapper table .errMsg { color: #D5412B; }


/********************************
Mapping Stuff
********************************/
.mapcanvas {
    display: block;
    width: 100%;
    min-height: 300px;
}
.esriPopup .titlePane { background-color: #0079C1 !important; }
.esriPopup .pointer.top,
.esriPopup .pointer.topRight,
.esriPopup .pointer.topLeft { background-color: #0079C1 !important; }
.esriPopup .titleButton.maximize { display: none !important; }

/********************************
Utilities
********************************/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.skiplink {
    position: absolute;
    top: 0;
    left: -9999px;
    font-size: 16px;
}
.skiplink:active, .skiplink:focus {
    top: auto;
    left: auto;
    background: #F4F6D4;
    padding: 20px 40px;
    box-shadow: 0 0 20px rgba(0,0,0,1);
}

.hide-mobile-tablet { display: none; }
.hide-phone-only { display: none; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.pull-left { float: left; }
.pull-right { float: right; }
img.pull-left { margin: 10px 20px 10px 0; }
img.pull-right { margin: 10px 0 10px 20px; }

.infographic {
    display: block;
    float: none;
    margin: 15px 0 15px 15px;
    max-width: 450px;
}
.infographic.full {
    display: block;
    float: none;
    max-width: 100%;
    text-align: center;
    margin: 15px auto;
}

.indent { margin-left: 20px; }

.danger { color: #B3130E; }

form.full-form .ui-state-error,
form.full-form .error,
.error { color: #D5412B; }

.nowrap { white-space: nowrap; }

.sr-only {
    position: absolute;
    left: -9999em;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

a.button,
input[type=button].button,
input[type=submit].button,
input[type=reset].button,
button.button {
    float: none;
    display: inline-block;
    padding: 3px 8px;
    margin: 0 10px 10px 0;
    border-radius: 6px;
    text-align: center;
    background: #0079C1;
    transition: 0.4s box-shadow;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border: 2px solid #ffffff;
    text-decoration: none !important;
    font-weight: normal;
    min-height: 44px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    -webkit-appearance: none;
       -moz-appearance: none;
         -o-appearance: none;
}
input[type=button].button:hover,
input[type=submit].button:hover,
input[type=reset].button:hover,
button.button:hover {
    box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.4);
}
a.button.single { line-height: 44px; padding: 3px 20px; }

a.button:first-child { float: left; }
a.button:only-of-type { float: none; }

a.button:link, a.button:visited { color: #ffffff !important;  }
a.button:hover, a.button:active, a.button:focus { color: #ffffff !important; box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.4); }

a.button.reverse { background: transparent; border: 1px solid #ffffff; text-shadow: none !important; transition: 0.2s background-color; }
a.button.reverse:link, a.button.reverse:visited { color: #ffffff !important;  }
a.button.reverse:hover, a.button.reverse:active, a.button.reverse:focus { color: #0079C1 !important; background-color: #ffffff; border: 1px solid #0079C1; box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.4); }

a.button.block { display: block;  margin: 20px auto; }

.owl-carousel .owl-controls .owl-nav {
    text-align: center;
    margin: 20px auto;
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next {
    float: none;
    display: inline-block;
    padding: 3px 8px;
    margin: 0 10px 10px 0;
    border-radius: 6px;
    text-align: center;
    background: #0079C1;
    transition: 0.4s box-shadow;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border: 2px solid #ffffff;
    text-decoration: none !important;
    min-height: 24px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    -webkit-appearance: none;
       -moz-appearance: none;
         -o-appearance: none;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover,
.owl-carousel .owl-controls .owl-nav .owl-next:hover {
    box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.4);
}
.owl-item {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.asterisk { font-size: 0.6em; line-height:0.6em; }
.clickable { cursor: pointer !important; }


#swipebox-overlay {
    background: #000;
    background: rgba(0,0,0,0.8) !important;
}

.pika-table { margin: 0; }

.print-only { display: none; }

/********************************
Media Queries
********************************/

/* Responsive Tables media query */
@media screen and (max-width: 767px) {
    /* Collapse to cards */
    .card-table table, .card-table thead, .card-table tbody, .card-table th, .card-table td, .card-table tr {
    	display: block;
    }

    .card-table thead tr {
    	position: absolute;
    	top: -9999px;
    	left: -9999px;
    }

    .card-table tr:first-child { border-top: 1px solid #ccc; }
    .card-table tr {
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .card-table td {
    	border: none !important;
    	border-bottom: 1px solid #eee !important;
    	position: relative;
    	padding-left: 50% !important;
        text-align: left;
    }

    .card-table td:before {
    	position: absolute;
    	top: 6px;
    	left: 6px;
    	width: 45%;
    	padding-right: 10px;
    	white-space: nowrap;
    }
}



/* Small devices (landscape phones, 570px and up) */
@media screen and (min-width: 570px) {
    body.map-bg { background: url('/assets/img/map-bg.jpg') no-repeat center; background-size: cover; }

    .container, #wrapperMain {
        max-width: none;
        width: 538px;
    }

    .container.no-border, .container.custom { width: 550px; }

    .site-header,
    #breadcrumbs,
    #main-nav,
    .site-footer {
        padding-left: 30px;
        padding-right: 30px;
    }

    .site-header {
        padding-top: 14px;
        padding-bottom: 10px;
    }

    .site-header .site-logo {
        height: 50px;
        top: 2px;
        width: 136px;
    }

    #menu-button {
        border-radius: 4px;
        padding: 18px 18px 18px 40px;
        margin-left: -16px;
    }
    #menu-button:before {
        left: 16px;
    }

    #main-nav .utilities-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
    }
    #main-nav .secondary-links {
        margin-bottom: 0;
        margin-left: 20px;
        -ms-flex-order: 1;
        order: 1;
    }
    .searchform-container {
        -ms-flex: 1;
        flex: 1;
    }

    /* Even-height columns. */
    .content-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .content-container:before,
    .content-container:after {
        display: none; /* Clearfix interferes with flexbox. */
    }

    article { float: right; -ms-flex-order: 1; order: 1; width: 358px; }
    aside { float: right; width: 180px; min-height: 60vh; }
    aside h1,
    aside h2 {
        margin-left: 30px;
    }
    aside ul li a {
        padding-left: 30px;
    }

    .content-container.project {
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: 100%;
        padding-bottom: 200px;
    }

    .content-container.project.bipole { background-image: url("/assets/img/project-footer-bipole.jpg"); }
    .content-container.project.mmtp { background-image: url("/assets/img/project-footer-mmtp.jpg"); }
    .content-container.project.keeyask { background-image: url("/assets/img/project-footer-keeyask.jpg"); }

    .page-gallery .item { float: left; margin: 0 20px 20px 0; }

    .task-button {
        float: left;
        width: 131px;
        line-height: 70px;
        font-size: 16px;
        padding: 0;
        text-align: center;
        border-top: 5px solid #ffffff;
        border-right: 0;
        border-bottom: 0;
        border-left: 5px solid #ffffff;
        border-collapse: collapse;
        background-image: none;
    }
    .task-button:first-child { border-left: 0; width: 130px; }
    .task-button.stacked { line-height: 18px; padding: 17px 0px; }
    .task-container h1 { display: none; }
    .close-button { display: none; }

    .column {
        float: left;
        width: 246px;
        margin-left: 6px;
        padding: 0 10px;
        min-height: 180px;
    }
    .column:first-child { margin-left: 0 !important; }
    .column:nth-child(3) { margin-left: 0; }
    .column.double {
        float: left;
        width: 498px;
        margin: 0;
        min-height: 0;
        padding: 0 20px;
    }
    .column.full { min-height: 0; padding: 0 20px; }

    .show-phone-only { display: none; }
    .hide-phone-only { display: inherit; }
}
/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .container, #wrapperMain {
        width: 768px; /* Full-width on iPad. */
    }
    .container.no-border, .container.custom { width: 758px; }

    #breadcrumbs p {
        font-size: 15px;
    }

    .content-container.project { padding-bottom: 250px; }

    aside { width: 202px; }

    .floating-box {
        max-width: 50%;
        padding: 20px 100px;
        margin: 20px auto;
    }
    .floating-box .callout-box {
        margin-top: 0;
    }

    article { width: 566px; }
    .content-area { padding: 20px 40px; }

    .adbox { text-align: left; }
    .adbox img { float: left; }
    .adbox h2 { float: left; width: 65%; margin: 35px 0 0 20px; }

    .vid-thumb { float: left; margin: 0 20px 10px 0; }
    .vid-thumb.right {float: right; margin: 0 0 10px 20px; }

    .page-gallery .item { width: 190px; min-height: 175px; clear: none; }
    .page-gallery .item img { float: none; width: 100%; margin: 0; }

    .figurebox { float: right; margin: 0 0 20px 20px; }
    .figurebox.large { width: 350px; }

    .infographic { float: right; max-width: 275px; }

    .project-status-block .status-thumb { float: left; width: 160px; margin: 0 20px 0 0; text-align: left; }
    .project-status-block .status-content { float: left; width: 265px; margin: 0; text-align: left; }



    img.document-cover { display: block; float: left; margin: 10px 30px 10px 10px; }

    iframe.embedded-map { height: 480px; }

    .home-banner { display: block; }

    .task-button {
        width: 188px;
        border-right: 0;
        font-size: 22px;
        line-height: 120px;
    }
    .task-button:first-child { width: 189px; }
    .task-button.stacked { line-height: 24px; padding: 36px 0px; }

    .grid-box {
        float: left;
        width: 381px;
        margin: 0;
        margin-left: 5px;
        padding: 0;
    }
    .grid-box.news { font-size: 14px; margin-left: 0; width: 382px; }
    a.news-item { font-size: 14px; }
    .grid-box.advert { margin-top: 0; border-top: 0; }

    .column { width: 162px; min-height: 0px;}
    .column:nth-child(3) { margin-left: 6px;}
    .column.double { width: 330px; margin-left: 6px; }

    .site-footer {
        text-align: left;
    }

    .site-footer .subfooter {
        padding: 0 20px;
    }

    .site-footer .footer-navigation .footer-column {
        float: left; /* Flexbox fallback. */
        margin: 0;
        max-width: none;
        width: 50%; /* 2 columns. */
    }
    .site-footer .footer-navigation li {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }

    .form-group label { float: left; width: 35%; margin-right: 5%; text-align: right; }
    .form-control { float: left; width: 60%; }

    .show-mobile { display: none; }
}

/* Medium devices (desktops, 990px and up) */
@media screen and (min-width: 990px) {
    .container, #wrapperMain { width: 958px; }
    .container.no-border, .container.custom { width: 970px; }

    .site-header,
    #breadcrumbs,
    #main-nav,
    .site-footer {
        padding-left: 40px;
        padding-right: 40px;
    }

    .content-container.project { padding-bottom: 350px; }

    .site-header {
        text-align: right;
    }

    .site-header .site-logo {
        float: left;
    }

    #main-nav {
        display: block;
    }

    #main-nav .nav-container {
        padding-top: 0;
        padding-bottom: 0;
    }

    #main-nav .primary-links {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-top: 0;
        padding-bottom: 0;
    }

    /**
     * Place the search and secondary nav in the top right corner.
     */
    #main-nav .utilities-container {
        background-color: #0079c1;
        box-sizing: border-box;
        color: #fff;
        display: block;
        max-height: 80px; /* Height of header. */
        overflow: hidden;
        padding: 26px 0;
        position: absolute;
        right: 40px;
        text-align: right;
        top: 0;
        z-index: 1;
    }

    #main-nav .secondary-links {
        display: inline-block;
        margin: 0 10px 0 0;
    }
    #main-nav .secondary-links li:after {
        display: none;
    }
    #main-nav .secondary-links li a {
        float: none;
        font-size: 15px;
        margin: 0 !important;
        position: relative;
    }
    #main-nav .secondary-links li a:link,
    #main-nav .secondary-links li a:visited {
        background-color: #0079c1;
        color: inherit;
    }
    #main-nav .secondary-links li a:after {
        content: '';
        border-bottom: 1px solid #fff;
        border-bottom-color: rgba(255,255,255,0.8);
        bottom: 10px;
        display: block;
        height: 0;
        left: 10px;
        opacity: 0;
        position: absolute;
        right: 10px;
    }
    #main-nav .secondary-links li a:hover:after {
        opacity: 1;
    }

    .searchform-container {
        width: 205px;
    }
    .searchform-container #search-terms {
        width: 164px;
    }

    article { width: 710px; }
    aside { width: 248px; }
    aside h1,
    aside h2 {
        margin-left: 40px;
    }
    aside ul li a {
        padding-left: 40px;
    }
    .adbox div { width: 75%; margin: 40px 0 0 20px; }

    .task-button {
        width: 236px;
        font-size: 30px;
        line-height: 150px;
    }
    .task-button:first-child { width: 235px; }
    .task-button.stacked { line-height: 30px; padding: 45px 0px;}

    .grid-box { width: 477px; }
    .grid-box.news { width: 476px; }

    .column { width: 215px; }
    .column.double { width: 436px; }

    .callout-box.warning {
        padding-left: 140px;
        background-image: url("/assets/img/warning_triangle.svg");
        background-repeat: no-repeat;
        background-position: 20px center;
        background-size: 100px 100px;
    }

    .page-gallery .item { margin: 0px 17px 20px 0; }

    .infographic { max-width: 350px; }

    .project-status-block .status-content { width: 405px; }

    iframe.embedded-map { height: 630px; }

    .welled-table { width: 100%; border: 0; border-radius: 0; padding: 0; overflow: auto; }
    .welled-table table th, .welled-table table td { white-space: normal; }
    .welled-table::before, .welled-table::after { display: none; }

    .column-block { float: left; width: 45%; margin: 0; padding: 0; }
    .column-block:first-child { margin-right: 10%; }

    .site-footer .subfooter {
        -ms-flex-align: end;
        align-items: flex-end;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 0;
        text-align: left;
    }
    .site-footer .subfooter-links {
        float: right; /* Flexbox fallback. */
        -ms-flex-order: 2;
        order: 2; /* Place links at far right.  */
    }
    .site-footer .footer-navigation .footer-column {
        width: 25%; /* 4 columns. */
    }

    .form-indent { margin: 15px 0px 0 60px; }

    .hide-mobile-tablet { display: inherit; }
    .show-mobile-tablet { display: none; }
}

/* Large devices (large desktops, 1210px and up) */
@media screen and (min-width: 1210px) {
    .container, #wrapperMain {
        width: 1176px; /* Width easily divided by 2, 3, 4. */
    }
    .container.no-border, .container.custom { width: 1190px; }

    .content-container.project { padding-bottom: 400px; }

    article { width: 928px; }

    .page-gallery .item { margin: 0px 20px 20px 0; }

    .infographic { max-width: 450px; }

    .project-status-block .status-content { width: 625px; }

    iframe.embedded-map { height: 800px; }

    .task-button {
        width: 290px;
        font-size: 36px;
    }
    .task-button:first-child { width: 291px; }
    .task-button.stacked { line-height: 40px; padding: 35px 0px; }

    .column { width: 270px; }
    .column.double { width: 545px; }

    .grid-box { width: 585px; }
    .grid-box.news { width: 586px; }

}

/* High DPI display swaps */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-resolution: 120dpi) {

    .close-button { background-image: url('/assets/img/icon-close_2x.png'); }

    .four-step-progress { background-image: url('/assets/img/four-steps_2x.png'); }

    #outage-tweets p.timePosted:before { background-image: url("/assets/img/social-icons_2x.png"); }

    a[data-icon="pdf"] { background-image: url("/assets/img/icon-pdf_2x.png"); }
    a[data-icon="doc"], a[data-icon="docx"] { background-image: url("/assets/img/icon-doc_2x.png"); }
    a[data-icon="xls"], a[data-icon="xlsx"] { background-image: url("/assets/img/icon-xls_2x.png"); }
    a[data-icon="ppt"], a[data-icon="pptx"] { background-image: url("/assets/img/icon-ppt_2x.png"); }
    a[data-icon="zip"] { background-image: url("/assets/img/icon-zip_2x.png"); }
    a[data-icon="file"] { background-image: url("/assets/img/icon-file_2x.png"); }
    a[data-icon="img"] { background-image: url("/assets/img/icon-img_2x.png"); }

}