/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */

@import url("slider.css");

html {
    background-color: #00579E;
}
body {
    font-family: helvetica, Arial, sans-serif;
    color: #282828;
    font-size: 12px;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9 {
    clear: left;
    font-family: inherit;
}
h2 {
    margin: .5em 0 .25em 0;
}
a, a:link, a:visited {
    text-decoration: none;
    color: #00579E;
}
a:hover, a:active {
    text-decoration: underline;
}
a.close {
    border: none;
    width: 16px;
    height: 16px;
}
.block-title {
    display: none;
}
#page {
    background-color: #00579E;
    background-image: url("../gradation_black_to_clear.png");
    background-position: top;
    background-repeat: repeat-x;
    background-attachment: fixed;
}
#zone-content-wrapper {
    background-color: #00579E;
    background-image: url("../gradation_black_to_clear.png");
    background-position: top;
    background-repeat: repeat-x;
    background-attachment: fixed;
}
#zone-content {
    background-color: white;
}
#zone-branding-wrapper {
    background-color: white;
    background-image: url("../gradation_gray_to_white.png");
    background-position: 0% 100%;
    background-repeat: repeat-x;
}
#zone-branding-wrapper, #zone-menu, #zone-content {
    background-color: #D1D1D1;
}
#zone-branding section {
    margin: 0;
    text-transform: uppercase;
    display:inline-block;
}
#zone-branding p {
    margin:auto 0;
}
#zone-branding {
    background-color: white;
    position: relative;
}
#zone-content {
    padding-bottom: 10px;
}
#region-menu {
    background-color: #00579E;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
#main-menu {
    font-size:.8em;
}
#main-menu a {
    color:#d1d1d1;
    text-decoration:none;
}
#main-menu a:hover {
    text-decoration: underline;
}
.views-field-field-image {
    text-align: center;
}
.field-name-title-field, .swx-views-field-title {
    font-family: LeagueGothicRegular;
    font-size: 1.75em;
    text-transform: uppercase;
}

.field-item, .field-label {
    margin: 10px;
}

.views-view-grid {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px;
    border: none;
}

.views-view-grid tr td {
    vertical-align: top;
    background-color: #D1D1D1;
    border: solid 1px black;
    padding: 10px;
}
.views-view-grid tr td img {
    width: 100%;
    height: auto;
    margin: 0;
}

/* Products and Dashboards page layout. */
.product-grid-cell-title {
    font-family: LeagueGothicRegular;
    font-size: 1.75em;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: normal;
    font-weight: normal;
}
.product-grid {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px;
    border: none;
    margin: -10px;
    width: calc(100% + 20px);
}
.product-grid tr td {
    vertical-align: top;
    background-color: #D1D1D1;
    border: solid 1px black;
    text-align: center;
}
.product-grid tr td img {
    width: 100%;
    height: auto;
    margin: 0;
}
.credit {
    margin: .25em 0;
}

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../League_Gothic-webfont.eot');
    src: url('../League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../League_Gothic-webfont.woff') format('woff'),
         url('../League_Gothic-webfont.ttf') format('truetype'),
         url('../League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
}
nav.node-links {
    display: none;
}
#page-title {
    background-color: #D1D1D1;
    color: #264178;
    text-transform: uppercase;
    margin: 0;
    padding: 0 .5em;
    box-sizing: border-box;
    border: solid 1px black;
    margin-top: -1px;
    border-right: none;
    border-left: none;
    font-family: inherit;
    font-size: 2em;
}
#block-system-main {
    border: solid 1px black;
    background-color: white;
}
#block-system-main tbody td {
    vertical-align: top;
}
#block-system-navigation {
    background-color: #002A5B;
}

/* Breadcrumb styling */
#breadcrumb {
    margin-left:10px;
    line-height: 25px;
}
#breadcrumb * {
    margin:0;
    padding:0;
}
#breadcrumb a {
    text-decoration: none;
    color:#00579E;
}
#breadcrumb a:hover {
    text-decoration:underline;
}
.breadcrumb li:not(.last):after {
    content:" > ";
}

/* Search styling */
#search-block-form {
    text-align: right;
}
#search-block-form .form-text {
    width:15em;
}

#zone-header {
    background-color: rgb(209, 209, 209);
    padding: .25em 0;
}
#region-header-first {
    min-height: 1em;
}
.view-header {
    margin: 10px 10px 0 10px;
    overflow: auto;
    background-color: #D1D1D1;
    border: solid 1px black;
    padding: 10px;
}
.view-header img {
    float: right;
    width: 66%;
    margin-left: 10px;
}
.view-header h1 {
    font-family: "LeagueGothicRegular";
    font-size: 1.75em;
    text-transform: uppercase;
    margin:0;
}
#region-footer-first, #region-footer-second, #region-footer-third {
    margin:0;
    width:100%;
}
#region-footer-first {
    background-color: #00579E;
    text-align: right;
}
#region-footer-first p {
    margin:0;
}
#section-footer .region-inner {
    padding:5px;
}
.region-footer-first-inner {
    padding:0 !important;
}
#region-footer-second {
    background-color: #002A5B;
}
#region-footer-third {
    background-color: white;
}
#region-footer-second .menu ul li {
    list-style-type: none;
}
table {
    margin-bottom: 0;
}
#region-footer-third p {
    margin:0;
}
/* Dynamic resizing logo and disclaimer */
#usaGovLogo {
    float:left;
    width: 200px;
    margin-bottom: 1em;
}
#disclaimer {
    clear: both;
    margin-left: auto;
}
@media screen and (min-width: 670px) {
    #disclaimer {
        clear: none;
        margin-left: 210px;
    }
    #usaGovLogo {
        margin-bottom: auto;
    }
}

.disclaimer-header {
    color: #00579E;
    font-size: larger;
    font-weight: bolder;
    text-transform: uppercase;
}
#block-menu-menu-footer-menu a, #block-menu-block-1 a {
    text-decoration: none;
}
#block-menu-menu-footer-menu a:hover, #block-menu-block-1 a:hover, #block-menu-menu-footer-menu a:active, #block-menu-block-1 a:active {
    text-decoration: underline;
}
#block-menu-menu-footer-menu ul.menu li, #block-menu-block-1 ul.menu li {
    list-style: none;
}
#block-menu-menu-footer-menu > div > div > ul > li a, #block-menu-block-1 > div > div > div > ul > li a {
    color: #D4E5EC;
}
#block-menu-menu-footer-menu > div > div > ul > li > a, #block-menu-block-1 > div > div > div > ul > li > a {
    color: #5FA5F3;
    font-size: larger;
    font-weight: bolder;
    text-transform: uppercase;
}
#block-menu-menu-footer-menu, #block-menu-block-1 {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}
.expanded {
    -webkit-break-inside:avoid;
    -moz-break-inside:avoid;
    break-inside:avoid;
}
.field-items sub {
    vertical-align: sub;
    font-size: smaller;
}
.field-items sup {
    vertical-align: super;
    font-size: smaller;
}
#region-branding {
    background-image: url("../header_background.svg");
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}
#organizations {
    display: table-cell;
    vertical-align: middle;
    height: 75px;
}
.logo {
    width:65px;
    height:65px;
    margin: 5px 5px 5px 0;
}
#organization_name {
    font-size: 1.5em;
    line-height: .9em;
    text-transform: uppercase;
}
#parent_organization_name {
    text-transform: uppercase;
}
#clock {
    background-color: rgba(255,255,255,0.75);
    padding: 0 10px;
    position: absolute;
    right:0;
    bottom:0;
}
#swx_communities{
    border: solid 1px black;
    padding: 0px 10px 0px 10px;
}
#swx_communities ul{
   list-style: none;
   margin-bottom: 10px;
}
#swx_communities ul > li {
    width:23%;
    display:inline-block;
    text-align: left;
}
#swx_communities a {
    font-weight: bolder;
    color: #000000;
    text-decoration: none;
}

@media screen and (max-width: 979px) {
  #swx_communities ul > li {
    display: inline;
    width:auto;
  }
  #swx_communities ul > li:after {
    content: " | ";
  }
  #swx_communities ul > li:last-child:after {
    content: "";
  }
}

.bx-wrapper {
	position: relative;
	margin: 0 auto;
	padding: 0;
}
.bx-pager {
    display: none;
}
.bx-viewport {
    margin-left: 5px;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}
.G_Scales, R_Scales, S_Scales table, th, td {
  border: 1px solid;
}
.block-inner {
    margin-bottom: -1px;
}
.block-subject-teasers-block {
    background-color: white;
    border: solid 1px black;
}

/* Big Ass Menu (BAM) Definitions */
section.block-system-main-menu div.content > ul {
    position: relative;
}

/* Make BAM white. */
section.block-system-main-menu a {
    color: white;
}

/* Make all BAM sub menu fonts black. */
.menu.level-2 > li > a, .menu.level-3 > li > a {
    color: black;
}

/* Formats the first level list items as horizontal menu options. */
section.block-system-main-menu div.content > ul > li {
    display: inline-block;
    padding: .5em;
}

.level-1 > li > a {
    text-decoration: none;
}

.level-1 > li:hover > a {
    text-decoration: underline;
}

.level-2 > li > a, .level-3 > li > a {
    text-decoration: none;
    color: rgb(40,40,40) !important;
}

.level-3 > li > a {
    text-transform: none;
}

section.block-system-main-menu div.content li > a:hover {
    text-decoration: underline;
}

section.block-system-main-menu div.content > ul > li > ul {
    display: none;
    position: absolute;
    top: 2.5em;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(255,255,255,.95);
}

.menu.level-2 {
    border: solid 10px #00579E;
    border-top: none;
    padding: 1em;
}

.menu.level-2 > li {
    margin: 1em;
}

/* Make first level titles stand out */
.menu.level-2 > li > a {
    font-size: 1.25em;
    text-decoration: none;
}

/* Removes predefined list style */
ul.level-2 > li, ul.level-3 > li {
    list-style: none inside none;
    margin-left: 0;
    padding-left: 0;
}

.visible {
    display: block !important;
}

.visible > li {
    display: inline-block;
    vertical-align: top;
    width: auto;
}

.highlighted {
    background-color: white;
}

.highlighted > a {
    color: black !important;
}

.menu.level-3 {
    max-width: 25em;
}

.menu.level-3 > li {
    margin-left: 2em;
}

.menu.level-3 > li:first-letter {
    margin-left: -2em;
}
.field-name-field-product-body iframe {
  width:100%;
  height:400px;
  border:none;
}
#search-block-form input.form-text {
    background: white;
    border-radius:25px;
}

/* Lightbox Styling */
#lightBox {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10;
    text-align: center;
    overflow: auto;
}

#lightBox div.animation, #lightBox img.lightBoxable {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow: visible;
}

#lightBox div.animation.tooTall, #lightBox img.lightBoxable.tooTall {
    transform: none;
    top: 0;
}

/* Section Page Styling */

/* CSS Reset */
.menu-block-2 ul, .menu-block-2 li {
    padding: 0;
    margin: 0;
    font-size: 100%;
    line-height: 1;
}
.menu-block-2 ul li {
    list-style: none;
}
.menu-block-2 {
    column-count: 3;
    column-gap: 1em;

    -webkit-column-count: 3;
    -webkit-column-gap: 1em;

    -moz-column-count: 3;
    -moz-column-gap: 1em;

    padding: 10px;
}
.menu-block-2 .expanded:not(.leaf) {
    break-inside: avoid;

    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
}
.menu-block-2 li.expanded:not(.leaf) > a {
    background-color: #D1D1D1;
    display: block;
    padding: .25em;
    font-weight: bold;
    font-size: 1.5em;
}
.menu-block-2 li {
    line-height: 2em;
}

/* Dynamically scale Impacts, Phenomena and Top News header images. */
.field-name-field-main-impact-image img, .field-name-field-main-image img, article.node-top-news img {
    display: inline-block;
    width: 100%;
    height: auto;
}
.field-name-field-main-impact-image img, .field-name-field-main-image img {
    max-width: 620px;
}
article.node-top-news img {
    max-width: 940px;
}

/* Dynamically scale product page content. */
article.node-product div.field-content, article.node-product div.field-content {
	display: inline-block;
}
article.node-product div.field-content img, article.node-product div.field-content canvas {
	width: 100%;
}

/* Correct for misaligned side margins. */
div.view-top-news-archive {
    margin: 0 -11px;
}

/* Updated timestamp style for top news item */
article.node-top-news div.field-name-title-field {
  margin-bottom:0px;
  line-height:1;
}
.updated-date {
  margin-left: 10px;
  font-weight: normal;
  color: rgb(102,102,102);
}

/* The animation controls style and behavior. */
.animation {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.progressBar {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 10px;
    margin-top: -40px;
}
.animationToolbar {
    position: relative;
    display: block;
    text-align: left;
    padding: 5px;
    background-color: #3f3f3f;
    overflow: hidden;
}
button.animationButton {
    float: left;
}
.animationToolbarSlider {
    width: auto;
    height: 20%;
    margin: auto 13px auto 57px;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
button.animationButton.play {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    border: 5px solid #CCC;
    background-color: #CCC;
    background: url(../images/media_control_icons.svg);
    background-size: 200% 200%;
    background-repeat: no-repeat;
    background-position: bottom left;
}
button.animationButton.pause {
    background-size: 200% 200%;
    background-position: bottom right;
}
button.animationButton.play:active {
    border-color: #FFF;
    background-position: top left;
}
button.animationButton.pause:active {
    border-color: #FFF;
    background-position: top right;
}
.animationCanvas {
    width: 100%;
    display: block;
}

/* Hide the selection outline after a button is clicked. This is purely aesthetic. */
button.animationButton:focus {
    outline:none;
}
button.animationButton::-moz-focus-inner {
    border:0;
}

table.cols-2 td {
    width: 50%;
}

table.cols-3 td {
    width: 33.33%;
}
.attribution {
    margin: .5em 0;
    color: gray;
    text-align: right;
}

/* Override the library's default padding. */
.ui-tabs .ui-tabs-panel {
    padding: 10px;
}