/* ==========================================================================
   Main navigation bar
   ========================================================================== */

.navbar .brand {
  background-image: asset-url("header-crown.png");
  background-position: 0 0.25em;
  background-repeat: no-repeat;
  color: #fff;
  font-family: "GillSans", "Gill Sans", "Helvetica Neue", Helvetica, sans-serif;
  margin-left: 0;
  padding-left: 2em;
}

.navbar-inner {
  background: #000; /* black */
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  box-shadow: none;
}

.navbar .nav .active > a,
.navbar .nav .active > a:hover {
  background: none;
}

/* ==========================================================================
   Main navigation bar
   ========================================================================== */

.navbar .brand {
  background-image: asset-url("header-crown.png");
  background-position: 0 0.25em;
  background-repeat: no-repeat;
  color: #fff;
  font-family: "GillSans", "Gill Sans", "Helvetica Neue", Helvetica, sans-serif;
  margin-left: 0;
  padding-left: 2em;
}

.navbar-inner {
  background: #000; /* black */
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  box-shadow: none;
}

.navbar .nav .active > a,
.navbar .nav .active > a:hover {
  background: none;
}

/* Environment indicators
   ========================================================================== */

@production-color: #df3034; /* Red */
@preview-color: #ffbf47;    /* Orange */
@dev-color: #bfc1c3;        /* Grey */

.environment-production .navbar-inner {
  border-bottom-color: @production-color;
}

.environment-preview .navbar-inner {
  border-bottom-color: @preview-color;
}

.environment-dev .navbar-inner {
  border-bottom-color: @dev-color;
}

Add environment colours and apply to nav border
Add environment colours and apply to nav border

* Use LESS variables for the different environments
* Use an environment- class to switch environments
  * eg on `body` or `html`
