/*
 * Vanillabox
 * (C) 2013 cocopon.
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 */
.vnbx * {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}

.vnbx-mask {
  left: 0;
  overflow: auto;
  position: absolute;
  top: 0;
  z-index: 999;
}

.vnbx-frame {
  position: absolute;
}

.vnbx-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.vnbx-prev,
.vnbx-next {
  visibility: hidden;
}

.vnbx-group .vnbx-prev,
.vnbx-group .vnbx-next {
  visibility: visible;
}

.vnbx-pager {
  visibility: hidden;
}

.vnbx-group .vnbx-pager {
  visibility: visible;
}

.vnbx-container {
  overflow: hidden;
  position: relative;
}

.vnbx-content {
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
}

.vnbx-content > img {
  vertical-align: middle;
}

.vnbx-content > iframe {
  border-width: 0;
  vertical-align: middle;
}

.vnbx-ios .vnbx-content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.vnbx-ios .vnbx-content > iframe {
  display: block;
  height: 100%;
  width: 100%;
}

.vnbx-empty {
  height: 150px;
  width: 200px;
}

.vnbx-loading,
.vnbx-error {
  height: 150px;
  width: 200px;
}

.vnbx-loading > img,
.vnbx-loading > iframe,
.vnbx-error > img,
.vnbx-error > iframe {
  display: none;
  height: 150px;
  width: 200px;
}

.vnbx-mask {
  background-color: rgba(245, 245, 245, 0.8);
}

.vnbx-frame {
  background-color: rgba(221, 221, 221, 0.9);
  border: rgba(213, 213, 213, 0.9) solid 1px;
  border-radius: 5px;
  padding: 38px 6px 6px;
}

.vnbx-button {
  position: absolute;
}

.vnbx-button.vnbx-disabled {
  display: none;
}

.vnbx-close {
  background-image: url("img/close0.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
  height: 26px;
  right: 6px;
  top: 6px;
  width: 26px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-close {
    background-image: url(img/close0@2x.png);
  }
}

.vnbx-close:hover {
  background-image: url("img/close1.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-close:hover {
    background-image: url(img/close1@2x.png);
  }
}

.vnbx-prev,
.vnbx-next {
  height: 100%;
  margin-top: 16px;
  top: 0;
  width: 44px;
}

.vnbx-prev {
  background-image: url("img/prev0.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
  left: -44px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-prev {
    background-image: url(img/prev0@2x.png);
  }
}

.vnbx-prev:active,
.vnbx-prev:hover {
  background-image: url("img/prev1.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-prev:active,
  .vnbx-prev:hover {
    background-image: url(img/prev1@2x.png);
  }
}

.vnbx-next {
  background-image: url("img/next0.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
  right: -44px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-next {
    background-image: url(img/next0@2x.png);
  }
}

.vnbx-next:active,
.vnbx-next:hover {
  background-image: url("img/next1.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-next:active,
  .vnbx-next:hover {
    background-image: url(img/next1@2x.png);
  }
}

.vnbx-label {
  font-family: sans-serif;
  font-size: 1em;
  position: absolute;
}

.vnbx-title {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #555;
  height: 38px;
  left: 0;
  line-height: 38px;
  overflow: hidden;
  padding-left: 6px;
  text-align: left;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
  width: 100%;
}

.vnbx-close-button-enabled .vnbx-title {
  padding-right: 40px;
}

.vnbx-pager {
  bottom: -30px;
  color: #777;
  font-size: 90%;
  height: 22px;
  left: 0;
  line-height: 22px;
  text-align: center;
  width: 100%;
}

.vnbx-container {
  background-color: #ccc;
  text-align: center;
}

.vnbx-loading {
  background-image: url("img/loading.gif");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-loading {
    background-image: url(img/loading@2x.gif);
  }
}

.vnbx-error {
  background-image: url("img/error.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-error {
    background-image: url(img/error@2x.png);
  }
}
