/* video container */ .videoContainer{ width:700px; margin-left: 300px; height:370px; position:relative; overflow:hidden; background:#000; color:#ccc; } /* video caption css */ .caption{ display:none; position:absolute; top:0; left:0; width:100%; padding:10px; font-size:15px; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background: #1F1F1F; /* fallback */ background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%); background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%); background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%); } /*** VIDEO CONTROLS CSS ***/ /* control holder */ .control{ background:#000; color:#000; position:absolute; bottom:0; left:0; width:100%; z-index:5; display: block; } /* control top part */ /* control bottom part */ .btmControl{ clear:both; background: #000; /* fallback */ background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%); background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%); background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%); } .control div.btn { float:left; width:34px; height:30px; padding:0 5px; border-right:0px solid #404040; cursor:pointer; } .control div.btn.sound_btn{ float:left; } .control div.text{ font-size:12px; font-weight:bold; line-height:30px; text-align:center; font-family:verdana; width:20px; border:none; color:#777; } .control div.btnPlay{ background:url(skin/control.png) no-repeat 0 0; border-left:1px solid #404040; margin-bottom: 5px; } .control div.paused{ background:url(skin/control.png) no-repeat 0 -29px; } .control div.btnStop{ background:url(skin/control.png) no-repeat 0 -57px; } .control div.spdText{ border:none; font-size:14px; line-height:30px; font-style:italic; } .control div.selected{ font-size:15px; color:#ccc; } .control div.sound{ background:url(skin/control.png) no-repeat -88px -28px; border:none; float:left; margin-top: 3px; margin-left: 4px; } .control div.sound2{ background:url(skin/control.png) no-repeat -87px -59px !important; } .control div.muted{ background:url(skin/control.png) no-repeat -88px -2px !important; } .control div.btnFS{ background:url(skin/control.png) no-repeat -50px -2px; float:right; margin-right: 10px; } .control div.smallscr{ background:url(skin/control.png) no-repeat -50px -30px !important; float:right; margin-right: 7px; } .control div.largescr{ background:url(skin/control.png) no-repeat -50px -30px !important; } .control div.logo{ background:url(skin/control.png) no-repeat -52px -57px; float:right; margin-right: 10px; } .control div.small{ background:url(skin/small.png) no-repeat -2px 3px; float:right; margin-right: 10px; } .control div.quality{ background:url(skin/quality.png) no-repeat -5px -6px; float:right; margin-right: 10px; } /* PROGRESS BAR CSS */ /* Progress bar */ .progress { width:100%; height:7px; margin-bottom: 0px; position:relative; float:left; cursor:pointer; background: #444; /* fallback */ background:-moz-linear-gradient(top,#666,#333); background:-webkit-linear-gradient(top,#666,#333); background:-o-linear-gradient(top,#666,#333); box-shadow:0 2px 3px #333 inset; -moz-box-shadow:0 2px 3px #333 inset; -webkit-box-shadow:0 2px 3px #333 inset; } .progress span { height:100%; position:absolute; top:0; left:0; display:block; } .timeBar{ z-index:10; width:0; background: #7f090a; /* fallback */ } .bufferBar{ width:0; background: #5d5c5c; } /* time and duration */ .time{ color: #fff; margin-top: 10px; width:15%; float:left; text-align:center; font-size:11px; line-height:12px; } /* VOLUME BAR CSS */ /* volume bar */ .volume{ background-color: #5d5c5c; position:relative; cursor:pointer; width:70px; height:4px; float:left; margin-top:15px; margin-right:20px; margin-left: 3px; } .volumeBar{ display:block; height:100%; position:absolute; top:0; left:0; background-color: #7f090a; z-index:10; } /* OTHERS CSS */ /* video screen cover */ .loading, #init{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(skinloading.gif) no-repeat 50% 50%; z-index:2; display:none; } #init{ background:url(skin/bigplay.png) no-repeat 50% 50% !important; cursor:pointer; } .qualityopt{ background-color: black; width: 90px; position: absolute; margin-top: 244px; margin-left: 500px; border:2px solid black; border-radius:2px; display :none; } .list{ color: #e7e7e7; } .list1{ float: left; }