html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/**
 * caption and headline
 */
.caption {
  font-weight: 500;
  font-size: 16px;
  color: "#003333";
  margin-top: 6px;
  margin-bottom: 6px;
}

.headline {
  font-size: 22px;
  color: #999999;
  margin-top: 20px;
  margin-bottom: 10px;
}

.headline, .caption:first-of-type {
  margin-top:0;	
}

/**
 * rounded sidebar
 */
.rounded-box {
  border: 2px solid dimgrey;
  border-radius: 8px;
  padding: 8px;
  width: 300px;
}

@media (max-width: 767px) {
  .sidebar-right {
    border-top: 1px dashed dimgrey;
    padding-top: 15px;
    margin-top: 10px;
  }

  .rounded-box {
    margin-left: -4px;
    margin-right: -4px;
  }
}

@media (min-width: 768px) {
  .sidebar-right {
    border-left: 1px dashed dimgrey;
  }
}

/**
 * simple slideshow
 */
.slideshow {
}

.slide {
  display: none;
}

/**
 * Page footer
 */
#page_footer {
  background-color: #F8F8F8; 
  background-color: #eee;
  border-top: 1px solid lightgray;
}

#page_footer p {
  padding: 2px 8px 2px 8px;
  font-style: italic;
  font-size: small;
  color: dimgray;
}

/* Set the fixed height of the footer */
#page_push, #page_footer {
  height: 24px;
}
 
/* Wrapper for page content to push footer down */
#page_wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height + margin-top */
  margin: 0 auto -24px;
  padding-bottom: 15px;
}

@media (max-width: 767px) {
  #page_footer p {
    font-size: x-small;
  }
}

/**
 * navigation bar
 */
.navbar #brand {
  padding-top: 6px;
  padding-bottom: 2px;
}

.navbar #social {
  padding-top: 12px;
  padding-bottom: 2px;
}

#social .buttons {
  float: right;
}

@media (max-width: 767px) {
  #social {
    padding-top: 0 !important;
  }
  #social .buttons {
    float: none;
  }
  #social .buttons>img {
    margin-top: 0;
    margin-bottom: 16px;
  }
}

/**
 * fix for dropdown-menu on iPad
 */
.navbar-collapse {
  position:relative;
  z-index: 10000;
}

/**
 * Emphasize disabled buttons
 */
.btn.disabled,
.btn[disabled] {
  opacity: 0.25;
}

/**
 * major emphasis
 */
.shoutout {
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  color: red;
}

/**
 * quotation sidebar
 */
#cudos {
  padding-top: 20px;
  border: 1px solid dimgrey;
  background-color:#FFFFCC;
}

/**
 * various styles
 */
.row-spaced {
  margin-top: 15px;
}

.grey {
  color: lightgrey;
}

.center {
  margin-left: auto; margin-right: auto; width: 50%;
}

.company-name {
  font-weight: bold;
  color: dimgray;
}

.product-name {
  font-weight: 600;
  color: dimgray;
}

.product-badge {
  padding-top: 35px;
}