$footerHeight: 60px;
$carouselHeight: 500px;

html, body {
  height: 100%;
}

body {
  color: #5a5a5a;
}

#wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto (-$footerHeight);
  padding: 0 0 $footerHeight;
}

footer {
  height: $footerHeight;
  background-color: #f5f5f5;

  > .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .text-muted {
    margin: 20px 0;
  }
}

// Special class on .container surrounding .navbar, used for positioning it into place.
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;

  // Flip around the padding for proper display in narrow viewports
  .container {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.carousel {
  height: $carouselHeight;
  margin-bottom: 60px;

  .item {
    height: $carouselHeight;
    background-color: #777;

    .carousel-caption {
      z-index: 10;
      img {
        margin: 15px auto;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
      }
    }
  }
}

// RESPONSIVE CSS

@media (min-width: 768px) {

  // Navbar positioning foo
  .navbar-wrapper {
    margin-top: 20px;

    .container {
      padding-left: 15px;
      padding-right: 15px;
    }

    .navbar {
      padding-left: 0;
      padding-right: 0;

      // The navbar becomes detached from the top, so we round the corners
      border-radius: 4px;

      .navbar-nav.navbar-right:last-child {
        margin-right: 15px;
      }
    }
  }

  // Bump up size of carousel content
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }
}
