/*

My Custom CSS
=============

Author:  Brad Hussey
Updated: August 2013
Notes:	 Hand coded for Udemy.com

*/


/* --------------------------------------
   Layout
   -------------------------------------- */
#features {
   text-align: center;
}

#features img {
   margin: 0 0 20px;
}

#inputMessage {
   margin-bottom: 15px;
}

footer {
   background: #333;
   color: #eee;
   font-size: 11px;
   padding: 20px;
}

/* --------------------------------------
   Typography
   -------------------------------------- */
body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizelegibility;
}

.well .page-header {
   margin-top: 0;
}

.well .page-header h1 {
   margin-top: 0;
}

ul.unstyled {
   list-style: none;
   padding: 0;
}


/* --------------------------------------
   Navbar
   -------------------------------------- */

#searchInput {
   width: 200px;
}

.navbar-brand {
   padding: 13px 15px;
}
   
/* --------------------------------------
   Carousel
   -------------------------------------- */
#myCarousel {
   margin-top: 60px;
}

.carousel-caption {
   font-size: 24px;
}

.carousel-caption h4 {
   font-size: 32px;
}

#myCarousel .item {
   height: 400px; /* using medium carousel as default */
   }

#slide1 {
   background: url('../../images/carousel_medium_01.jpg') top left no-repeat;
}

#slide2 {
   background: url('../../images/carousel_medium_02.jpg') top left no-repeat;
}

#slide3 {
   background: url('../../images/carousel_medium_03.jpg') top left no-repeat;
}

.jumbotron {
   background: transparent;
   color: white;
   padding: 0px 75px;
}

.blue {
   background-color: #112233;
   width: 100%;
   margin: 0 auto;
   padding: 0;
}



li {
   text-align: left;
}



/* --------------------------------------
   Global Styles
   -------------------------------------- */
.alert {
   margin-top: 20px;
   display: none;
}

.well {
   margin: 20px 0;
}

.tabbable img.thumbnail {
   margin: 0 20px 10px 0;
}

.thumbnails {
   margin: 20px 0;
}

.thumbnail {
   position: relative;
}

.thumbnail h3 {
   font-size: 16px;
   margin: 0 0 10px;
   line-height: 20px;
}

.thumbnail .price {
   font-size: 22px;
   position: absolute;
   top: -10px;
   right: -10px;
   padding: 10px;
}

.thumbnail .price sup{
   font-weight: normal;
   font-size: 12px;
}

.thumbnail span.glyphicon {
   margin-right: 5px;
}

/* --------------------------------------
   Media Queries
   -------------------------------------- */

/* Portrait & landscape phone */
@media (max-width: 480px) {
	.thumbnail .price {
      font-size: 14px;
   }

   .thumbnail .price sup {
      font-size: 10px;
   }
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
   #myCarousel .item { height: 310px; }

   .carousel-caption {
      font-size: 16px;
   }

   .carousel-caption h4 {
      font-size: 22px;
   }

   #slide1 {
   background: url('../../images/carousel_small_01.jpg') top left no-repeat;
   }

   #slide2 {
   background: url('../../images/carousel_small_02.jpg') top left no-repeat;
   }

   #slide3 {
   background: url('../../images/carousel_small_03.jpg') top left no-repeat;
   }	
}

/* Large desktop */
@media (min-width: 1200px) {
   #myCarousel .item {height: 500px;}

	#slide1 {
   background: url('../../images/carousel_large_01.jpg') top left no-repeat;
   }

   #slide2 {
   background: url('../../images/carousel_large_02.jpg') top left no-repeat;
   }

   #slide3 {
   background: url('../../images/carousel_large_03.jpg') top left no-repeat;
   }
}