/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

/* style for error message */
.error {
    color: red;
    font-size: 3rem;
}

/* Add top margin to the main section of the home page */
div.main-section {
    margin-top: 7rem;
}

/* Set a style for price label */
span.price-label {
    font-weight: bold;
    color: brown;
}

/* Add a gap between two divs*/
div.top-gap-sm {
    margin-top: 1rem;
}

/* Add a gap between two divs*/
div.top-gap-md {
    margin-top: 2rem;
}

/* Add a top padding to a div */
div.top-padding {
    padding-top: 3rem;
}

/* Add a bottom padding to a div */
div.bottom-padding {
    padding-bottom: 1rem;
}

/* Set a style for price tag */
div.price-tag {
    font-size: 2rem;
}

/* Add a margin to the right side of the cart glyphicon */
span.glyphicon-shopping-cart {
    margin-right: 0.5rem;
}

/* a style for error message */
.field-validation-error {
    color: #e74949;
    font-weight: bold;
}

/* a style to highlight error input */
.input-validation-error {
    background-color: #f6a8a8;
    border: 1px solid red;
}

/* This is a style for summary errors */
div.validation-summary-errors ul {
    color: #e74949;
    font-weight: bold;
    list-style: none;
    padding-left: 0px;
}

/* Make search box in the middle of the nav bar */
@media (min-width: 768px) {
    .navbar-form.navbar-center {
        position: absolute;
        width: 70%;
        left: 15%;
        text-align: center;
    }

    .navbar-form.navbar-center .input-group .form-control {
        min-width: 420px;
    }
}

/* the followings are for rating stars 
   reference: http://codepen.io/leogono/pen/pvaKNO
*/
.glyphicon-star {
  font-size: 120%;
  color: #e67e22;
}

.glyphicon-star.empty {
  font-size: 120%;
  color: #bdc3c7;
}

.glyphicon-star.half {
  position: relative;
}

.glyphicon-star.half:before {
  position: relative;
  z-index: 9;
  width: 50%;
  display: block;
  overflow: hidden;
}

.glyphicon-star.half:after {
  content: '\e006';
  position: absolute;
  z-index: 8;
  color: #bdc3c7;
  top: 0;
  left: 0;
}