/* Media-box */

.MPreview-box {
  position: relative;
  border: 1px solid #DDD;
  background: #FFF;
  height: 100%;
}

.MPreview-mediaPlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 31px;
  overflow: hidden;
}

/* Media-box common */

.MPreview-box img {
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: 0;
}

.MPreview-box .hidden {
  display: none;
}

.MPreview-box .invisible {
  visibility: hidden;
}

.MPreview-box .cle {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.MPreview-box .clefix:after, .MPreview-ppt .MPreview-mediaView:after {
  content: '\20';
  display: block;
  height: 0;
  clear: both;
}

.MPreview-box .clefix, .MPreview-ppt .MPreview-mediaView {
  *zoom: 1;
}

/* Media-box .tool-bar */

.MPreview-box .tool-bar {
  position: absolute;
  width: 70px;
  height: 28px;
  padding-top: 10px;
  top: 0px;
  right: 0px;
  z-index: 28;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.MPreview-box .MPreview-mediaPlay {
  width: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  background: url(../images/loading.gif) no-repeat center center;
}

.MPreview-box .MPreview-mediaView {
  width: 100%;
  text-align: center;
}

.MPreview-box .MPreview-mediaView img {
  max-width: 100%;
}

.MPreview-box .tool-bar ul {
  padding-right: 20px;
}

.MPreview-box .tool-bar ul li {
  float: left;
  display: inline;
  margin: 0px 10px;
}

.MPreview-box .tool-bar ul li a {
  display: block;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.MPreview-box .tool-bar ul li a:hover {
  border-color: #DDD;
}

.MPreview-box .tool-bar ul li a span {
  position: relative;
  top: 3px;
  left: 3px;
  display: block;
  overflow: hidden;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  font: 0 a;
}

/* Media-box => icon */

.MPreview-box .MPreview-zoomBig span, .MPreview-box .MPreview-zoomSmall span, .MPreview-box .MPreview-viewOne span, .MPreview-box .MPreview-viewMulti span, .MPreview-box .MPreview-fullScreen span, .MPreview-box .MPreview-exit span, .MPreview-box .MPreview-pagePrev span, .MPreview-box .MPreview-pageNext span, .MPreview-box .MPreview-arrowTop span, .MPreview-box .MPreview-arrowBottom span {
  background: url(../images/media_icon.png) no-repeat -9999px -9999px;
}

.MPreview-box .MPreview-zoomBig span {
  background-position: 0px -78px;
}

.MPreview-box .MPreview-zoomSmall span {
  background-position: -23px -78px;
}

.MPreview-box .MPreview-viewOne span {
  background-position: 1px -23px;
}

.MPreview-box .MPreview-viewMulti span {
  background-position: -22px -23px;
}

.MPreview-box .MPreview-fullScreen span {
  background-position: -82px -27px;
}

.MPreview-box .MPreview-exit span {
  background-position: -55px -27px;
}

.MPreview-box .MPreview-pagePrev span {
  background-position: -82px -55px;
}

.MPreview-box .MPreview-pageNext span {
  background-position: -82px -80px;
}

.MPreview-box .MPreview-zoomBig.current span {
  background-position: 0px -50px;
}

.MPreview-box .MPreview-zoomSmall.current span {
  background-position: -23px -50px;
}

.MPreview-box .MPreview-viewOne.current span {
  background-position: 1px 2px;
}

.MPreview-box .MPreview-viewMulti.current span {
  background-position: -22px 3px;
}

.MPreview-box .MPreview-fullScreen:hover span, .MPreview-box .MPreview-fullScreen.current span {
  background-position: -82px 0px;
}

.MPreview-box .MPreview-exit:hover span, .MPreview-box .MPreview-exit.current span {
  background-position: -55px 0px;
}

.MPreview-box .MPreview-pagePrev.current span {
  background-position: -55px -55px;
}

.MPreview-box .MPreview-pageNext.current span {
  background-position: -55px -80px;
}

.MPreview-box .MPreview-arrowTop span {
  background-position: -122px -5px;
}

.MPreview-box .MPreview-arrowBottom span {
  background-position: -122px -48px;
}

/* Media-box => scroll-bar */

.MPreview-box .MPreview-scrollBar {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 31px;
  width: 15px;
  border-left: 1px solid #DDD;
  z-index: 30;
}

.MPreview-box .MPreview-scrollBar .MPreview-scrollBtn {
  z-index: 40;
  cursor: default;
  border-radius: 5px;
  position: absolute;
  top: 5px;
  left: -6px;
  width: 9px;
  min-height: 20px;
  background: #DDD;
  border: 1px solid #ccc;
}

.MPreview-box .MPreview-scrollBar .MPreview-scrollBtn:active, .MPreview-box .MPreview-scrollBar .MPreview-scrollBtn.current {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* Media-box => page-bar */

.MPreview-box .page-bar {
  position: absolute;
  z-index: 25;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 30px;
  border-top: 1px solid #DDD;
  z-index: 25;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.MPreview-box .page-bar .page-bar-inner {
  padding-top: 2px;
  margin: 0px auto;
  width: 160px;
}

.MPreview-box .page-bar .page-bar-inner a {
  float: left;
  display: inline;
  margin: 0px 10px;
  overflow: hidden;
  border: 1px solid #FFF;
  width: 16px;
  height: 14px;
  padding: 5px;
  border-radius: 3px;
}

.MPreview-box .page-bar .page-bar-inner a:hover {
  border: 1px solid #DDD;
}

.MPreview-box .page-bar .page-bar-inner a span {
  display: block;
  overflow: hidden;
  width: 16px;
  height: 14px;
  text-indent: -9999px;
  font: 0 a;
}

.MPreview-box .page-bar .MPreview-pageInput {
  float: left;
  background: #FFF;
  border: 1px solid #DDD;
  color: #666;
  border: 0;
  text-align: center;
  margin: 0px;
  width: 30px;
  height: 16px;
  line-height: 16px;
  padding: 0px;
  padding-top: 4px;
  outline: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.MPreview-box .page-bar .MPreview-pageCount {
  float: left;
  width: 36px;
  height: 16px;
  text-align: center;
  padding-top: 3px;
  color: #666;
  font-size: 12px;
}

.MPreview-box .page-bar .MPreview-pageCount em {
  font-style: normal;
  color: #666;
}

/* Media-box => arrow */

.MPreview-box .MPreview-arrowUp, .MPreview-box .MPreview-arrowDown {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 10px;
  left: 0px;
  z-index: 25;
  *background: url(about:blank) no-repeat;
}

.MPreview-box .MPreview-arrowDown {
  top: auto;
  bottom: 40px;
}

.MPreview-box .MPreview-arrowUp div, .MPreview-box .MPreview-arrowDown div {
  display: none;
  margin: 0px auto;
  width: 61px;
  height: 30px;
  overflow: hidden;
  font: 0 a;
  text-indent: -9999px;
  width: 61px;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
}

.MPreview-box .MPreview-arrowUp span, .MPreview-box .MPreview-arrowDown span {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}

.MPreview-box .MPreview-arrowUp a:hover, .MPreview-box .MPreview-arrowDown a:hover, {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.MPreview-box .media-dual .view {
  float: left;
  width: 50%;
}

/* Media-PPT */

.MPreview-ppt .MPreview-mediaPlay {
  bottom: 51px;
}

.MPreview-ppt .MPreview-mediaView {
  width: auto;
  height: 100%;
  text-align: left;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.MPreview-ppt .MPreview-mediaView div {
  float: left;
  text-align: center;
  width: 100%;
  height: 100%;
  background: #FFF url(../images/loading.gif) no-repeat center center;
}

.MPreview-ppt .MPreview-mediaView img {
  max-width: 100%;
  max-height: 100%;
}

.MPreview-ppt .tool-bar {
  width: 50px;
}

.MPreview-ppt .MPreview-scrollBar {
  top: auto;
  bottom: 25px;
  width: 100%;
  height: 15px;
  border-left: 0 none;
  border-top: 1px solid #DDD;
}

.MPreview-ppt .MPreview-scrollBar .MPreview-scrollBtn {
  top: -6px;
  left: 5px;
  height: 9px;
  width: auto;
  min-width: 20px;
  min-height: 9px;
}

.MPreview-ppt .MPreview-arrowUp, .MPreview-ppt .MPreview-arrowDown {
  width: 30px;
  height: 100%;
  top: 0px;
  left: 10px;
}

.MPreview-ppt .MPreview-arrowDown {
  top: 0px;
  bottom: auto;
  left: auto;
  right: 10px;
}

.MPreview-ppt .MPreview-arrowUp div, .MPreview-ppt .MPreview-arrowDown div {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 30px;
  height: 61px;
}

.MPreview-ppt .MPreview-arrowUp span, .MPreview-ppt .MPreview-arrowDown span {
  width: 30px;
  height: 61px;
}

.MPreview-ppt .MPreview-arrowUp span {
  background-position: -206px 0px;
}

.MPreview-ppt .MPreview-arrowDown span {
  background-position: -249px 0px;
}