/* video container */ #path{ background: no-repeat; } .myVideo{ background:#000; width: 100% ; height: 100%; position: relative; z-index: -1; } .largevid{ } .cont:-webkit-full-screen { width: 100% !important; height: 100% !important; } .cont{ position:relative; overflow:hidden; background:#000; color:#ccc; display: block; z-index: 1; } .title{ font-size: 20px; color: #fff; font-family: Tahoma; } .user{ margin-top: -10px; font-size: 11.5px; font-family: Tahoma; } /* video caption css */ .caption{ display:none; position:absolute; top:0; left:0; width:100%; padding:10px; font-size:15px; height: 80%; z-index: 2; background:url(skin/caption.png) repeat-x; } /*** 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.hbtn { float:left; width:34px; height:30px; padding:0 5px; border-right:0px solid #404040; cursor:pointer; } .control div.hbtn.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/play_icon.png) no-repeat ; margin-bottom: 8px; margin-left: 5px; } .control div.paused{ background:url(skin/paus_icon.png) no-repeat ; margin-left: 5px; } .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: 4px; margin-left: 10px; } .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: 5px; margin-top: 1px; } .control div.largescr{ background:url(skin/control.png) no-repeat -50px -30px !important; float:right; margin-top: 1px; margin-right: 1px; } .control div.smallscr{ background:url(skin/largescr.png) no-repeat !important; float:right; margin-top: 3px; } /* .control div.logo{ background:url(http://clip-bucket.com/img/logo.png) no-repeat ; float:right; margin-right: -0.5px; margin-top: 3.5px; } */ .control div.small{ background:url(skin/small.png) no-repeat -2px 3px; float:right; margin-right: 10px; margin-top: 4px; } .control div.hdon{ background:url(skin/hd.png) no-repeat -55px -6px ; float:right; margin-right: 5px; } .control div.hdoff{ background:url(skin/hd.png) no-repeat -5px -6px !important; float: right; margin-right: 5px; } .buffer{ background:url(skin/buffer.png) no-repeat 12px -2px ; float:right; margin-right: -8px; display:block; position: relative; z-index: 50; margin-top: -2.3px; } /* .test{ width: 100%; height: 20px; background: #fff; } /* PROGRESS BAR CSS */ /* Progress bar */ .progress { width:100%; height:7.5px; margin-bottom: 2px; float: left; background: #444; /* fallback */ z-index: 50; } .progress span { height:7.5px; position:absolute; top:0px; left:0; display:block; margin-left: 0px; } .timeBar{ z-index:10; width:0; background: #7f090a; } .bufferBar{ z-index:5; width:0; background: #5d5c5c; box-shadow:2px 0 5px #333; -moz-box-shadow:2px 0 5px #333; -webkit-box-shadow:2px 0 5px #333; } /* time and duration */ .time{ color: #fff; margin-top: 11px; width:12%; float:left; text-align:center; font-size:11px; line-height:12px; position:relative; } /* VOLUME BAR CSS */ /* volume bar */ .volume{ background-color: #5d5c5c; position:relative; cursor:pointer; width:70px; height:4px; float:left; margin-top:16px; margin-right:20px; margin-left: 3px; } .volumeBar{ display:block; height:110%; position:absolute; top:0; left:0; background-color: #fff; z-index:11; } /* OTHERS CSS */ /* video screen cover */ .loading, .init{ position:absolute; top:0; left:0; border-top: 4px solid rgba(0, 0, 0, .0); border-left: 4px solid rgba(0, 0, 0, .0); width:100%; height:100%; background:url(skinloading.gif) no-repeat 50% 50% !important; z-index:4; 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:#fff; } .list1{ float: left; } #itemsr { list-style: none; padding: 0px; margin: 5px 0 0 5px; font-size: 20px; } #rightcmenu { display: none; position: fixed; font-size: 12px; height: 20px; width: 250px; background: #E4E4E4 ; color: #000; border-bottom: 1px solid #BBBBBB; z-index: 100; text-align: center; } #ritems{ background: #fff; margin-top: 0px; } .rlist{ border-left: 1px solid #DFDFDF; text-align: left; margin-left: -5px; height: 22px; list-style-type:none; } .rlist:hover { background-color: rgba(92, 161, 255, 0.1); } #op{ text-align: center; } #opacity{ background-color:#000; width:100%; height: 100%; opacity:0.9; position:absolute; display:none; top:0; left:0; z-index: 20; } #cancel_v{ position: absolute; top: 0; right: 0; margin-right: 5px; margin-top: 5px; background-image: url(skin/cancel_v.png); width: 35px; height: 25px; opacity: 1; } #replay_v{ background-image: url(skin/replay_v.png); width: 35px; height: 25px; opacity: 1; margin-top: 5px; margin-left: 5px; } #h_4{ color: #fff; } #related_1{ width:100%; height: 100%; position:absolute; float: right; top:0; left: 0; margin-left: 0; margin-top: 10%; right: auto; left: 1%; z-index:21; text-align: center; display: none; } #link_v{ position: relative; } #name_v{ top :0; left:0; color: #fff; display:block; width: 94.7%; text-align: center; position: absolute; margin-top: 27%; background-color: rgba(0, 0, 0, 0.9); z-index: 1; } #thumb_v{ text-align: center; margin-right: 5px; margin-top:10px; opacity:0.8; position: relative; border: 1px solid #000; /* box-shadow:1px 0 5px #00A4BD; -moz-box-shadow:1px 0 5px #00A4BD; -webkit-box-shadow:1px 0 5px #00A4BD; */ } .windows8 { width: 55px; height:55px; position:absolute; top:40%; right:46.1%; /* margin-left:46.5%; margin-right:50%; margin-top: 18%; */ } .windows8 .wBall { position: absolute; width: 52px; height: 52px; opacity: 0; -moz-transform: rotate(225deg); -moz-animation: orbit 2.75s infinite; -webkit-transform: rotate(225deg); -webkit-animation: orbit 2.75s infinite; -ms-transform: rotate(225deg); -ms-animation: orbit 2.75s infinite; -o-transform: rotate(225deg); -o-animation: orbit 2.75s infinite; transform: rotate(225deg); animation: orbit 2.75s infinite; } .windows8 .wBall .wInnerBall{ position: absolute; width: 7px; height: 7px; background: #1966FF; left:0px; top:0px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; } .windows8 #wBall_1 { -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } .windows8 #wBall_2 { -moz-animation-delay: 0.12s; -webkit-animation-delay: 0.12s; -ms-animation-delay: 0.12s; -o-animation-delay: 0.12s; animation-delay: 0.12s; } .windows8 #wBall_3 { -moz-animation-delay: 0.24s; -webkit-animation-delay: 0.24s; -ms-animation-delay: 0.24s; -o-animation-delay: 0.24s; animation-delay: 0.24s; } .windows8 #wBall_4 { -moz-animation-delay: 0.36s; -webkit-animation-delay: 0.36s; -ms-animation-delay: 0.36s; -o-animation-delay: 0.36s; animation-delay: 0.36s; } .windows8 #wBall_5 { -moz-animation-delay: 0.48s; -webkit-animation-delay: 0.48s; -ms-animation-delay: 0.48s; -o-animation-delay: 0.48s; animation-delay: 0.48s; } @-moz-keyframes orbit { 0% { opacity: 1; z-index:99; -moz-transform: rotate(180deg); -moz-animation-timing-function: ease-out; } 7% { opacity: 1; -moz-transform: rotate(300deg); -moz-animation-timing-function: linear; -moz-origin:0%; } 30% { opacity: 1; -moz-transform:rotate(410deg); -moz-animation-timing-function: ease-in-out; -moz-origin:7%; } 39% { opacity: 1; -moz-transform: rotate(645deg); -moz-animation-timing-function: linear; -moz-origin:30%; } 70% { opacity: 1; -moz-transform: rotate(770deg); -moz-animation-timing-function: ease-out; -moz-origin:39%; } 75% { opacity: 1; -moz-transform: rotate(900deg); -moz-animation-timing-function: ease-out; -moz-origin:70%; } 76% { opacity: 0; -moz-transform:rotate(900deg); } 100% { opacity: 0; -moz-transform: rotate(900deg); } } @-webkit-keyframes orbit { 0% { opacity: 1; z-index:99; -webkit-transform: rotate(180deg); -webkit-animation-timing-function: ease-out; } 7% { opacity: 1; -webkit-transform: rotate(300deg); -webkit-animation-timing-function: linear; -webkit-origin:0%; } 30% { opacity: 1; -webkit-transform:rotate(410deg); -webkit-animation-timing-function: ease-in-out; -webkit-origin:7%; } 39% { opacity: 1; -webkit-transform: rotate(645deg); -webkit-animation-timing-function: linear; -webkit-origin:30%; } 70% { opacity: 1; -webkit-transform: rotate(770deg); -webkit-animation-timing-function: ease-out; -webkit-origin:39%; } 75% { opacity: 1; -webkit-transform: rotate(900deg); -webkit-animation-timing-function: ease-out; -webkit-origin:70%; } 76% { opacity: 0; -webkit-transform:rotate(900deg); } 100% { opacity: 0; -webkit-transform: rotate(900deg); } } @-ms-keyframes orbit { 0% { opacity: 1; z-index:99; -ms-transform: rotate(180deg); -ms-animation-timing-function: ease-out; } 7% { opacity: 1; -ms-transform: rotate(300deg); -ms-animation-timing-function: linear; -ms-origin:0%; } 30% { opacity: 1; -ms-transform:rotate(410deg); -ms-animation-timing-function: ease-in-out; -ms-origin:7%; } 39% { opacity: 1; -ms-transform: rotate(645deg); -ms-animation-timing-function: linear; -ms-origin:30%; } 70% { opacity: 1; -ms-transform: rotate(770deg); -ms-animation-timing-function: ease-out; -ms-origin:39%; } 75% { opacity: 1; -ms-transform: rotate(900deg); -ms-animation-timing-function: ease-out; -ms-origin:70%; } 76% { opacity: 0; -ms-transform:rotate(900deg); } 100% { opacity: 0; -ms-transform: rotate(900deg); } } @-o-keyframes orbit { 0% { opacity: 1; z-index:99; -o-transform: rotate(180deg); -o-animation-timing-function: ease-out; } 7% { opacity: 1; -o-transform: rotate(300deg); -o-animation-timing-function: linear; -o-origin:0%; } 30% { opacity: 1; -o-transform:rotate(410deg); -o-animation-timing-function: ease-in-out; -o-origin:7%; } 39% { opacity: 1; -o-transform: rotate(645deg); -o-animation-timing-function: linear; -o-origin:30%; } 70% { opacity: 1; -o-transform: rotate(770deg); -o-animation-timing-function: ease-out; -o-origin:39%; } 75% { opacity: 1; -o-transform: rotate(900deg); -o-animation-timing-function: ease-out; -o-origin:70%; } 76% { opacity: 0; -o-transform:rotate(900deg); } 100% { opacity: 0; -o-transform: rotate(900deg); } } @keyframes orbit { 0% { opacity: 1; z-index:99; transform: rotate(180deg); animation-timing-function: ease-out; } 7% { opacity: 1; transform: rotate(300deg); animation-timing-function: linear; origin:0%; } 30% { opacity: 1; transform:rotate(410deg); animation-timing-function: ease-in-out; origin:7%; } 39% { opacity: 1; transform: rotate(645deg); animation-timing-function: linear; origin:30%; } 70% { opacity: 1; transform: rotate(770deg); animation-timing-function: ease-out; origin:39%; } 75% { opacity: 1; transform: rotate(900deg); animation-timing-function: ease-out; origin:70%; } 76% { opacity: 0; transform:rotate(900deg); } 100% { opacity: 0; transform: rotate(900deg); } }