/* ------------------------------------------------------------
        				//! VARIABLES
---------------------------------------------------------------*/

@import '/css/fonts.css';

/* ------------------------------------------------------------
        //! CUSTOM GRID SPACING
---------------------------------------------------------------*/
/* below sets left & right margins to zero, but KEEPS padding on inside .col */
.row.zero-gutter {
  margin-left: 0;
  margin-right: 0;
}
/* below sets left & right margins to zero, and REMOVES padding on inside columns */
.row.zero-gutter-zero-pad {
  margin-left: 0;
  margin-right: 0;
}
.row.zero-gutter-zero-pad > [class^="col-"],
.row.zero-gutter-zero-pad > [class*=" col-"] {
  padding-left: 0;
  padding-right: 0;
}
/*--------------------------------------------------------------
            //! FRAMEWORK
---------------------------------------------------------------*/
:root {
  font-size: 14px;
}
@media (min-width: 768px) {
  :root {
    font-size: 13px;
  }
}
BODY {
  font-size: 1rem;
}
@media (min-width: 992px) {
  BODY {
    background-color: #7b8c98;
  }
}
#pageFrame {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 992px) {
  #pageFrame {
    /* constrain width at largest viewport */
    width: 980px;
    background-color: #ffffff;
  }
}
/* put more left and right edge padding on the main containers */
.pageContainer {
  padding: 0 15px;
}
@media (min-width: 768px) {
  .pageContainer {
    padding: 0 30px;
  }
}
/* end */
/* bannerContainer */
#bannerContainer {
  background-color: #283266;
}
@media (min-width: 768px) {
  #bannerContainer {
    color: #ffffff;
  }
}
/* end */
/* ------------------------------------------------------------
            //! STANDARDS
---------------------------------------------------------------*/
.marTop {
  margin-top: 15px;
}
.marRight {
  margin-right: 15px;
}
.marBottom {
  margin-bottom: 15px;
}
.marLeft {
  margin-left: 15px;
}
.padTop {
  padding-top: 15px;
}
.padRight {
  padding-right: 15px;
}
.padBottom {
  padding-bottom: 15px;
}
.padLeft {
  padding-left: 15px;
}
.marTop2x {
  margin-top: 30px;
}
.marRight2x {
  margin-right: 30px;
}
.marBottom2x {
  margin-bottom: 30px;
}
.marLeft2x {
  margin-left: 30px;
}
.padTop2x {
  padding-top: 30px;
}
.padRight2x {
  padding-right: 30px;
}
.padBottom2x {
  padding-bottom: 30px;
}
.padLeft2x {
  padding-left: 30px;
}
.marTop3x {
  margin-top: 45px;
}
.marRight3x {
  margin-right: 45px;
}
.marBottom3x {
  margin-bottom: 45px;
}
.marLeft3x {
  margin-left: 45px;
}
.noPadLeft {
  padding-left: 0 !important;
}
.noPadRight {
  padding-right: 0 !important;
}
.noPadTop {
  padding-top: 0 !important;
}
.noPadBottom {
  padding-bottom: 0 !important;
}
.noMarLeft {
  margin-left: 0 !important;
}
.noMarRight {
  margin-right: 0 !important;
}
.noMarTop {
  margin-top: 0 !important;
}
.noMarBottom {
  margin-bottom: 0 !important;
}
.padded {
  padding: 15px;
}
.noPad {
  padding: 0 !important;
}
.clear-left {
  clear: left;
}
.ie8-and-below {
  display: none;
}
IMG {
  vertical-align: top;
}
A IMG {
  border: none;
}
.icon {
  padding-left: 4px;
  margin-right: 5px;
  vertical-align: baseline;
}
/* Allow images to scale UP to fit the entire width of the parent element.
(this overrides the .img-responsive class that doesn't allow scaling more than 100%) */
.img-responsive {
  width: 100% !important;
}
/* end */
h1 {
  color: #283266;
  margin-top: 15px;
  font-weight: 700;
}
h2 {
  color: #f8485e;
}
h3 {
  color: #283266;
}
/* ------------------------------------------------------------------------ 
                             GENERAL
--------------------------------------------------------------------------*/
#contentContainer ul > li {
  margin-bottom: .5rem;
}
#contentContainer ul.noPad > li {
  margin-bottom: 0;
}
/* --- CALLOUT AND CAPTIONS --- */
.calloutBox {
  font-size: 14px;
  color: #fff;
  background-color: #283266;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.calloutHeading {
  color: #f8485e;
  font-weight: bold;
  font-size: 1.2rem;
}
.calloutText {
  color: #f8485e;
  font-weight: bold;
  font-size: 1.1rem;
}
.calloutTextLarge {
  font-weight: bold;
  font-size: 1.2rem;
}

.btn-primary {
    color: #fff;
    background-color: #283266;
    border-color: #283266;
}
.btn-primary:hover {
    color: #fff;
    background-color: #4a5dbf;
    border-color: #4a5dbf;
}

/* --- colorized version of logo in right column of Contact Us page ---*/
@media screen and (max-width: 767px) {
    .brandLogoColor {width: 90%; margin: auto;}
}
@media (min-width: 360px) {
    .brandLogoColor {width: 250px;}
}
@media (min-width: 768px) {
    .brandLogoColor {width: 100%;}
}
/* end */



/* ------------------------------------------------------------------------ 
                             BANNER/NAVBAR
--------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .navbar-header {
    margin-bottom: 10px;
  }
  .navbar-collapse {
    margin: 0 -15px;
  }
  .navbar-default .navbar-nav > li > a {
    color: #39454e;
    border-top: 1px dotted #c9cfd4;
    background-color: #e3e3e3;
  }
}
.brandLogo {
  padding: 20px 20px 5px 20px;
  width: 100%;
  margin: auto;
}
@media (min-width: 768px) {
  .brandLogo {
    padding: 20px 0;
    margin: 0;
    width: 100%;
  }
  .brandLogo > img {width: 100%;}
}
@media (min-width: 768px) {
  .navbar-default .navbar-nav > li > a {
    color: #ffffff;
    border-top: none;
    padding: 5px 10px;
  }
}
.navbar-default .navbar-toggle {
  background-color: #7b8c98;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #FFF;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #283266;
  color: #fff;
}
.navbar-default .navbar-nav > li.open > a.active,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a.active,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff !important;
  font-weight: normal !important;
  background-color: #283266 !important;
  background-image: none !important;
}
.thumbnail {
  margin-top: 20px;
}
.thumbnail .caption {
  text-align: center;
}
/* ------------------------------------------------------------
            //! TABLES
---------------------------------------------------------------*/
.table {
  font-size: 0.9rem;
  margin-bottom: 20px;
  border-collapse: separate;
  border-spacing: 2px 0;
}
.table .numerical {
  text-align: right;
}
.table > tbody > tr.bolded > td {
  font-weight: bold;
}
.table > tbody > tr > td {
  font-size: 0.8rem;
  line-height: 1.2;
  padding: 4px;
}
@media (min-width: 768px) {
  .table > tbody > tr > td {
    font-size: 0.9rem;
  }
}
.table > tbody > tr > td.indent {
  padding-left: 20px;
}
@media (min-width: 480px) {
  .table > tbody > tr > td.indent {
    padding-left: 40px;
  }
}
@media (min-width: 768px) {
  .table > tbody > tr > td.indent {
    padding-left: 20px;
  }
}
@media (min-width: 992px) {
  .table > tbody > tr > td.indent {
    padding-left: 40px;
  }
}
.table > tbody > tr > th {
  font-family: "OpenSansCondensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  line-height: 1.2;
  color: #FFFFFF;
  background-color: #60c5f1;
  border: none;
  vertical-align: middle;
  padding: 5px;
}
@media (min-width: 768px) {
  .table > tbody > tr > th {
    font-size: 1.0rem;
  }
}
.table > tbody > tr > th.tableHd {
  font-size: 0.9rem;
  background-color: #283266;
  padding: 8px;
}
@media (min-width: 768px) {
  .table > tbody > tr > th.tableHd {
    font-size: 1.0rem;
  }
}
.table > tbody > tr > th.borderTop {
  border-top: 2px solid #ffffff;
}
.table > tbody > tr.highlight > td {
  font-weight: bold;
  color: #283266;
  background-color: #e8ebec;
  border-top: 1px solid #7b8c98;
  border-bottom: 1px solid #7b8c98;
}
.table > tbody > tr.highlight > td:first-child {
  padding-left: 20px;
}
@media (min-width: 480px) {
  .table > tbody > tr.highlight > td:first-child {
    padding-left: 40px;
  }
}
@media (min-width: 768px) {
  .table > tbody > tr.highlight > td:first-child {
    padding-left: 20px;
  }
}
@media (min-width: 992px) {
  .table > tbody > tr.highlight > td:first-child {
    padding-left: 40px;
  }
}
.table > tbody > tr.highlight.noTopBorder > td {
  border-top: none;
}
/* ------------------------------------------------------------------------ 
                             HOMEPAGE
--------------------------------------------------------------------------*/
#heroImg {
  max-height: 400px;
}
body#Home .jumbotron {
  margin-bottom: 30px;
}
/* ------------------------------------------------------------------------ 
                             FORMS
--------------------------------------------------------------------------*/
.form-control {
  color: #39454e !important;
}
.contactForm {
  text-align: left;
  width: 100%;
}
.instructions {
  color: #f8485e;
  font-weight: bold;
  font-size: 1.1rem;
}
/* ------------------------------------------------------------------------ 
                             FOOTER
--------------------------------------------------------------------------*/
#footerContainer {
  margin-top: 15px;
  background-color: #283266;
  padding: 1.5rem 0;
  font-size: 11px;
  color: #FFFFFF;
}
#footerContainer P {
  margin-bottom: 5px;
}
#footerContainer P A {
  color: #FFFFFF;
}
#footerContainer P A:link,
#footerContainer P A:visited,
#footerContainer P A:hover,
#footerContainer P A:active,
#footerContainer P A.active {
  color: #FFFFFF;
}
#footerContainer P A:hover {
  text-decoration: underline;
}
#footerContainer P A.btn {
  font-weight: 600;
  color: #283266;
}
#footerContainer P A.btn:hover,
#footerContainer P A.btn:focus {
  text-decoration: none;
  background-color: #60c5f1;
  color: #ffffff;
  border-color: transparent;
}
#footerContainer P A.btn.btn-xs {
  padding: 2px 8px;
  font-size: 9px;
}
#footerContainer P A.btn.btn-sm {
  padding: 6px 5px;
  font-size: 10px;
}
#footerContainer .legal {
  font-size: 10px;
  border-top: 1px solid #c9cfd4;
  padding-top: 10px;
  margin-top: 10px;
}
#footerContainer .legal .btn {
  font-size: 10px;
}
/* ------------------------------------------------------------ 
                         ACCESSIBILITY
---------------------------------------------------------------*/
#skiptocontent a {
  position: absolute;
  top: -40px;
  left: 0px;
  font-family: "OpenSansSemiBold", Arial, Helvetica, sans-serif;
  font-size: .8em;
  color: #ffffff;
  padding: 5px 20px;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-bottom-right-radius: 8px;
  background: #283266;
  -webkit-transition: top 1s ease-out, background 1s linear;
  transition: top 1s ease-out, background 1s linear;
  z-index: 100;
}
#skiptocontent a:focus {
  position: absolute;
  left: 0px;
  top: 0px;
  background: #404E59;
  outline: 0;
  -webkit-transition: top 0.1s ease-in, background 0.5s linear;
  transition: top 0.1s ease-in, background 0.5s linear;
}
/* --------------------------------------------------------------------------- 
                             PRINT
------------------------------------------------------------------------------*/
/* ---- Below overrides the default print styles from the bootstrap.css file ---- */
@media print {
  BODY {
    font-size: 11px;
    line-height: 1.4;
    background-color: transparent;
  }
}
/*------- end print -------*/