.qc-pg-main * {
  box-sizing: content-box !important; /* page css may specify border-box on everything, but we don't want that for photo gallery elements */
}
.qc-pg-noscript {
  display: none;
}

/* container element default class for preventing F.O.U.C.; this is removed after initalization */
.qc-pg-init {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

#qc-pg-thumbs {
  width: 470px;
  margin-right: 10px;
  display: block;
  position: relative;
  top: -170px;
}

div.qc-pg-content {
  width: 470px;
  display: block;
}

div#qc-pg-slideshow a.qc-pg-advance-link img {
  height: auto;
  width: auto;
  max-width: 430px;
  max-height: 430px;
}

div.qc-pg-content a,
div.qc-pg-navigation a {
  text-decoration: none;
  color: #777;
}
div.qc-pg-content a:focus,
div.qc-pg-content a:hover,
div.qc-pg-content a:active {
  text-decoration: underline;
}
div.qc-pg-controls {
  margin-top: 5px;
  height: 23px;
}
div.qc-pg-controls a {
  padding: 5px;
}
div.qc-pg-ss-controls {
  float: left;
}
div.qc-pg-nav-controls {
  float: right;
}
div.qc-pg-slideshow-container {
  position: relative;
  clear: both;
  height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('loader.gif');
  background-repeat: no-repeat;
  background-position: center;
  width: 450px;
  height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.qc-pg-slideshow {
}
div.qc-pg-slideshow span.qc-pg-image-wrapper {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
div.qc-pg-slideshow a.qc-pg-advance-link {
  display: block;
  width: 450px;
  height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
  line-height: 450px; /* This should be set to be at least the height of the largest image in the slideshow */
  text-align: center;
}
div.qc-pg-slideshow a.qc-pg-advance-link:hover,
div.qc-pg-slideshow a.qc-pg-advance-link:active,
div.qc-pg-slideshow a.qc-pg-advance-link:visited {
  text-decoration: none;
}
div.qc-pg-slideshow img {
  vertical-align: middle;
  border: 1px solid #ccc;
}
div.qc-pg-download {
  float: right;
}
div.qc-pg-caption-container {
  position: relative;
  clear: left;
  height: 175px;
  top: 140px;
}
span.qc-pg-image-caption {
  display: block;
  position: absolute;
  width: 450px;
  top: 0;
  left: 0;
}
div.qc-pg-caption {
  padding: 12px;
}
div.qc-pg-image-title {
  font-weight: bold;
  font-size: 1.4em;
}
div.qc-pg-image-desc {
  line-height: 1.3em;
  padding-top: 12px;
}
div.qc-pg-navigation {
  /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.qc-pg-thumbs {
  clear: both;
  margin: 0;
  padding: 0;
  height: 91px;
  display: -ms-flexbox;
}
ul.qc-pg-thumbs li {
  float: left;
  height: 75px;
  width: 75px;
  padding: 2px;
  border: 1px solid #ccc;
  margin: 5px 10px 5px 0;
  display: list-item;
  list-style: none;
}
a.qc-pg-thumb {
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
  position: relative;
}

ul.qc-pg-thumbs li.qc-pg-selected {
  background: #000;
}

a.qc-pg-thumb:focus {
  outline: none;
}
ul.qc-pg-thumbs img {
  border: none;
  display: block;
}
div.qc-pg-pagination {
  clear: both;
}
div.qc-pg-navigation div.qc-pg-top {
  margin-bottom: 12px;
  height: 11px;
}
div.qc-pg-navigation div.qc-pg-bottom {
  margin-top: 12px;
  margin-bottom: 20px;
  height: 28px;
}
div.qc-pg-pagination a,
div.qc-pg-pagination span.qc-pg-current,
div.qc-pg-pagination span.qc-pg-ellipsis {
  display: block;
  float: left;
  margin-right: 2px;
  padding: 4px 7px 2px 7px;
  border: 1px solid #ccc;
}
div.qc-pg-pagination a:hover {
  background-color: #eee;
  text-decoration: none;
}
div.qc-pg-pagination span.qc-pg-current {
  font-weight: bold;
  background-color: #000;
  border-color: #000;
  color: #fff;
}
div.qc-pg-pagination span.qc-pg-ellipsis {
  border: none;
  padding: 5px 0 3px 2px;
}