@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-dwmpo'); src:url('fonts/icomoon.eot?#iefix-dwmpo') format('embedded-opentype'), url('fonts/icomoon.ttf?-dwmpo') format('truetype'), url('fonts/icomoon.woff?-dwmpo') format('woff'), url('fonts/icomoon.svg?-dwmpo#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-hd:before { content: "\e603"; } .icon-togglescreen:before { content: "\e601"; } .icon-cb:before { content: "\e600"; } .icon-fullscreen:before { content: "\e602"; } .icon-pause:before { content: "\e604"; } .icon-pause-big:before { content: "\e605"; } .icon-play:before { content: "\e606"; } .icon-play-big:before { content: "\e607"; } .icon-volume1:before { content: "\e608"; } .icon-volume2:before { content: "\e609"; } .icon-volume3:before { content: "\e60a"; } /* video container */ #path{ display: inline-block; vertical-align: middle; width: 32px; height: 18px; 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; font-family:'Myriad Set Pro'; } /* video caption css */ .caption{ display:none; position:absolute; top:0; left:0; width:100%; padding:10px 10px 6px; font-size:15px; background-color: rgba(0,0,0,0.5); z-index: 2; color: #fff; /* height: 80%; background:url(skin/caption.png) repeat-x; */ } .align-middle { display: inline-block; vertical-align: middle; } .align-middle-marginLeft { display: inline-block; vertical-align: middle; margin-left: -3px; } .title{ font-size: 20px; font-weight: 700; text-align: left; width: 60%; } .user{ text-align: right; width: 40%; font-size: 12px; } .video_files { display: none; position:absolute; bottom:0; right:0; background: #fff; width: 100px; padding-bottom: -10%; margin-bottom: 5.5%; margin-right: 5%; z-index: 10; } #ul_files { list-style-type: none; background:#1D1D1D; margin-left: 0%; z-index: 1000; padding: 0px; margin:0; } .selected_player { font-style: italic; font-family: sans-serif; background :#09C; color: #fff; background:url(skin/check.png) no-repeat -3.5px -7px ; } /*** 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: rgba(0,0,0,0.8); /*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%);*/ padding: 2px 10px 6px; color: #757575; } .btmControl-left{ width: 65%; } .btmControl-right { width: 35%; text-align: right; } .control div.hbtn { /*float:left; width:34px; height:30px; padding:0 5px; border-right:0px solid #404040;*/ cursor:pointer; display: inline-block; } .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;*/ width: 16px; height: 16px; } .control div.btnPlay:before { content: '\e606'; font-family: 'icomoon'; font-size: 16px; line-height: 16px; } .control div.paused{ /*background:url(skin/paus_icon.png) no-repeat ; margin-left: 5px;*/ } .control div.paused:before { content: '\e604'; font-family: 'icomoon'; font-size: 16px; line-height: 16px; } .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; width: 21px; height: 17px; } .control div.sound:before { content: '\e609'; font-family: 'icomoon'; font-size: 16px; line-height: 17px; } .control div.sound2{ /*background:url(skin/control.png) no-repeat -87px -59px !important;*/ } .control div.sound2:before { content: '\e608'; font-family: 'icomoon'; font-size: 16px; line-height: 17px; } .control div.muted{ /*background:url(skin/control.png) no-repeat -88px -2px !important;*/ } .control div.muted:before { content: '\e60a'; font-family: 'icomoon'; font-size: 16px; line-height: 17px; } .control div.btnFS{ /*background:url(skin/control.png) no-repeat -50px -2px; float:right; margin-right: 5px; margin-top: 1px;*/ text-align: right; margin-left: 8px; width: 18px; height: 16px; color: #757575; } .control div.btnFS:before { content: '\e602'; font-family: 'icomoon'; font-size: 18px; line-height: 16px; } .control div.largescr{ /*background:url(skin/control.png) no-repeat -50px -30px !important; float:right; margin-top: 1px; margin-right: 1px;*/ width: 18px; height: 16px; display: inline-block; vertical-align: middle; margin-left: 15px; } .control div.largescr:before{ content: '\e601'; font-family: 'icomoon'; font-size: 18px; line-height: 16px; } .control div.smallscr{ /*background:url(skin/largescr.png) no-repeat !important; float:right; margin-top: 3px; width: 20px; height: 16px;*/ } .control div.smallscr:before{ /*content: '\e601'; font-family: 'icomoon'; font-size: 20px; line-height: 16px;*/ } /* .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.res{ background:url(skin/res.png) no-repeat -3.5px -7px ; float:right; margin-right: 5px; } .control div.ress{ background:url(skin/res.png) no-repeat -3.5px -7px ; float:right; margin-right: 5px; } .control div.hdon{ /*background:url(skin/hd.png) no-repeat -55px -6px ; float:right;*/ margin-right: 10px; color: #0086b9; width: 14px; height: 16px; } .control div.hdon:before { content: '\e603'; font-family: 'icomoon'; font-size: 14px; line-height: 16px; } .control div.hdoff{ /*background:url(skin/hd.png) no-repeat -5px -6px !important; float: right; margin-right: 5px;*/ opacity: 0.4; color: #0086b9; } .control div.hdoff:before{ content: '\e603'; font-family: 'icomoon'; font-size: 14px; line-height: 16px; } .buffer{ /*background:url(skin/buffer.png) no-repeat 12px -2px ;*/ float:right; margin-right: -8px; display:block; position: relative; z-index: 50; margin-top: -4px; background-color: #b2b1b1; width: 16px; height: 16px; border-radius: 50%; border: 5px solid #fff; } /* .test{ width: 100%; height: 20px; background: #fff; } /* PROGRESS BAR CSS */ /* Progress bar */ .progress { width:100%; height:8px; margin-bottom: 2px; float: left; background: #474747; /* fallback */ z-index: 50; } .progress span { height:8px; position:absolute; top:0px; left:0; display:block; margin-left: 0px; } .timeBar{ z-index:10; width:0; background: #0086b9; } .bufferBar{ z-index:5; width:0; background: #757575; 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; float:left;*/ width:16%; text-align:center; font-size:11px; position:relative; } /* VOLUME BAR CSS */ /* volume bar */ .volume{ background-color: #757575; position:relative; cursor:pointer; width:70px; height:4px; /*float:left; margin-top:16px; margin-right:20px;*/ margin-left: 10px; } .volumeBar{ display:block; height:100%; position:absolute; top:0; left:0; background-color: #0086b9; 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; top: 50%; left: 50%; width: 80px; height: 80px; margin: -50px 0 0 -50px; background-color: #0086b9; border-radius: 50%; color: #fff; } .init:before { content: '\e606'; font-family: "icomoon"; font-size: 25px; height: 30px; left: 50%; line-height: 30px; margin: -17px 0 0 -10px; position: absolute; top: 50%; width: 25px; } .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; } #rightcmenu { display: none; position: fixed; font-size: 14px; height: 20px; width: 180px; background: #E4E4E4; color: #393939; z-index: 100; } #ritems { background: #fff; margin-top: 0px; left : -5; } .rlist { margin-left: -25px; height: 22px; list-style-type:none; cursor: pointer; } .rlist:hover { background-color: #428BCA; color: #fff; } #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); } } @media (max-width: 400px) { .fduration, #volSec, #path, .soundm, .title, .user, .init { display: none; } .init { background:url() no-repeat 50% 50% !important; cursor:pointer; } }