/* ========================================================================
   The main masthead bar that contains the site logo, nav links, and search
   ======================================================================== */

.masthead {
  background-color: #ffffff;
  color: black;
}
.masthead .nav > li > a {
  color: black;
  text-shadow: none;
}
/* The "navigation pills" in the masthead (the links to Datasets,
   Organizations, etc) when the user's pointer hovers over them. */
.masthead .navigation .nav-pills li a:hover {
  background-color: #C14531;
  color: black;
}
/* The "active" navigation pill (for example, when you're on the /dataset page
   the "Datasets" link is active). */
.masthead .navigation .nav-pills li.active a {
  background-color: #C14531;
}
/* The "box shadow" effect that appears around the search box when it
   has the keyboard cursor's focus. */
.masthead input[type="text"]:focus {
  -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
}

@media (min-width: 768px) {
  .hero {
    background: url("/header.jpg");
  }
}

/* ====================================
   The footer at the bottom of the site
   ==================================== */

.site-footer,
body {
  background-color: #ffffff;
}
/* The text in the footer. */
.site-footer,
.site-footer label,
.site-footer small {
  color: rgba(128, 128, 128, 1);
}
/* The link texts in the footer. */
.site-footer a {
  color: rgba(128, 128, 128, 1);
}