/* GLOBAL
-------------------------------------------------- */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
  padding-bottom: 20px;
}


/* NAVBAR
-------------------------------------------------- */

/* Reduce vertical padding on logo so it fits */
.navbar-brand {
  padding: 2px 15px 1px 15px;
}

/* Image background for navbar */
.navbar.navbar-inverse.navbar-fixed-top {
  background: url(../img/polished_stonebrick_part.png);
}

/* Better and transparent color for active nav link */
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover {
	background: rgb(40,40,40); /* #282828 */
	background: rgba(40,40,40,0.7);
}

.navbar-inverse .navbar-nav>li>a.shiny {
  color: #bbb;
  text-shadow: 0px 0px 8px #ddd;
}


/* CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 300px;
  margin-bottom: 30px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  text-align: left;
  /*max-width: 800px;*/
}

.carousel-caption h1 {
  font-size: 28px;
}

.carousel-caption p {
  font-size: 14px;
}

.carousel-caption .btn {
  margin-top: 10px;
  font-size: 80%;
  line-height: 1;
  padding: 6px 12px;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 300px;
  background-color: #777;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 300px;
}


/* CAROUSEL RESPONSIVENESS
-------------------------------------------------- */

@media (min-width: 768px) {
  
  .carousel-caption h1 {
  	font-size: 42px;
  }

  .carousel-caption p {
  	font-size: 18px;
  }

  .carousel-caption .btn {
  	font-size: 100%;
  	line-height: 1.33;
  	padding: 10px 16px;
  }

}


/* BUTTONS
-------------------------------------------------- */

/* btn-dark */
.btn-dark {
  color: #ffffff;
  background-color: #666666;
  border-color: #555555;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  color: #ffffff;
  background-color: #555555;
  border-color: #444444;
}
