html,body{
	
	overflow: hidden;
}
body {background: #f8f8f8;
/*解决在火狐浏览器上面用户可以选择的问题*/
-moz-user-select: none; 
cursor: default;
margin:0px
    
}
#sidebar {position: absolute;background: #f8f8f8;top: 40px;bottom: 0;left: -16%;width: 16%;overflow: auto;transition: left .45s cubic-bezier(.23, 1, .32, 1); overflow-x: hidden;}
#mainbody {position: absolute;left: 0px;right: 0px;bottom:0px;top: 40px;background-position: center;background-repeat: no-repeat;background-size: contain;border: solid 10px transparent;transition: left .45s cubic-bezier(.23, 1, .32, 1);overflow:auto}
.thumbnail {margin: 10px 10px 0;text-align: center;}
.thumbnail img {display: block; margin: auto; max-width: 100%;padding: 2px;border: solid 1px #eee;display: block; border-radius: 5px;cursor: pointer;box-sizing: border-box;}
.thumbnail.active img {border-color: darkorange;box-shadow: 0 0 0 2px darkorange;cursor: default;}
.thumbnail.active .side-pager {color: darkorange}
#header {position: absolute;top: 0;left: 0;right: 0;background: #333;height: 40px;color: #fff;}
#title {margin: 0 0 0 10px;line-height: 38px;font: 400 20px/38px 'Microsoft Yahei';width: 60%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#loading {bottom: 0;left: 0;right: 0;}
.loader {position: fixed;overflow: hidden;height: 3px;z-index: 100;}
.loader div {height: 100%;width: 1%;transition: width .45s cubic-bezier(.23, 1, .32, 1);background: #39f;}
.side-pager {text-align: center;height: 25px;line-height: 25px;font-size: 16px;font-weight: bold;}
#next,#prev {position: absolute;top: 50%;width: 60px;font: 60px/160px '宋体';margin-top: -80px;cursor: pointer;text-align: center;opacity: .1;-webkit-user-select: none;-khtml-user-select: none; -moz-user-select: none;-ms-user-select: none;user-select: none;display:none}
#next:hover,#prev:hover {background: rgba(0, 0, 0, .1);opacity: .5}
#prev {left: 0;}
#next {right: 0;}
.hbtn{width:40px;height: 40px;display: inline-block;cursor: pointer;}
.hbtn:hover{background: #444;}
		.border{display:block;width:30px;height:30px;position:absolute;top:10px;left:10px;background-image:url(full.png);background-size:cover}
/*左右切换*/
.ppt-turn-left-mask, .ppt-turn-right-mask {
    position: absolute;
    width: 35%;
    height: 100%;
    top:0px;
    z-index: 500;
     background-image:url(about:blank);
    display: block;
}
.ppt-turn-right-mask {
    right: 15%;
    cursor: url("arr_right.cur"), auto;
}
.ppt-turn-left-mask{
	left:15%;
	cursor: url("arr_left.cur"), auto;
}
@media (min-width: 960px) {
	.playimg{width:70%;}
	
	
	
	
}
@media( max-width:960px){
	.playimg{width:100%;vertical-align: middle;}
	.ppt-turn-left-mask, .ppt-turn-right-mask{width:50%}
	.ppt-turn-right-mask {right: 0%;}
	.ppt-turn-left-mask{left:0%;}
	#mainbody{border:0px}
	
}
.media #sidebar {display: block;left: 0;}
.media #mainbody {left: 16%;}
.media #sideBtn{display: none;}



#fullScreen{
	display: none\9;
}
.playimg{
	
	display:block;
	margin:auto;
}
.pull-right {float: right;}
.fullScreen #sidebar {left:-16%;}
.openSide #sidebar{left:0 !important;}
.openSide #sideBtn{background: #444;}
.openSide #mainbody{left:16% !important;}
.openSide .side-pager{cursor: pointer;}
.fullScreen #mainbody {left:0;background-color: #000;}
.fullScreen #sideBtn {display: inline-block;}
.fullScreen .thumbnail img{display: block;}
.fullScreen #next,.fullScreen #prev {color: #fff;}
#sideBtn{float: left;padding-top: 8px;height: 32px;margin-right: 10px;}
#sideBtn em{height: 2px;background: #fff;margin:5px 9px;display: block;}