1190 lines
20 KiB
CSS
1190 lines
20 KiB
CSS
/*@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') format('truetype'),
|
|
url('fonts/icomoon.woff') 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";
|
|
}*/
|
|
|
|
@font-face {
|
|
font-family: 'icomoon';
|
|
src:url('fonts/icomoon.eot?-5ejonp');
|
|
src:url('fonts/icomoon.eot?#iefix-5ejonp') format('embedded-opentype'),
|
|
url('fonts/icomoon.ttf?-5ejonp') format('truetype'),
|
|
url('fonts/icomoon.woff?-5ejonp') format('woff'),
|
|
url('fonts/icomoon.svg?-5ejonp#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-setting:before {
|
|
content: "\e613";
|
|
}
|
|
.icon-pause2:before {
|
|
content: "\e60b";
|
|
}
|
|
.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";
|
|
}
|
|
.icon-pause3:before {
|
|
content: "\e60c";
|
|
}
|
|
.icon-play2:before {
|
|
content: "\e60d";
|
|
}
|
|
.icon-play22:before {
|
|
content: "\e60e";
|
|
}
|
|
.icon-volume12:before {
|
|
content: "\e60f";
|
|
}
|
|
.icon-volume22:before {
|
|
content: "\e610";
|
|
}
|
|
.icon-volumefull:before {
|
|
content: "\e611";
|
|
}
|
|
.icon-volumemute:before {
|
|
content: "\e612";
|
|
}
|
|
|
|
|
|
|
|
/* video container */
|
|
|
|
#path{
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 55px;
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.caption .title{
|
|
font-size: 20px;
|
|
text-align: left;
|
|
width: 60%;
|
|
font-family: 'PT Sans', sans-serif;
|
|
}
|
|
|
|
.caption .user{
|
|
text-align: right;
|
|
width: 40%;
|
|
font-size: 12px;
|
|
font-family: 'PT Sans', sans-serif;
|
|
}
|
|
|
|
.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: -4px;
|
|
width: 24px;
|
|
height: 16px;
|
|
color: #757575;
|
|
}
|
|
.control div.btnFS:before {
|
|
content: '\e602';
|
|
font-family: 'icomoon';
|
|
font-size: 16px;
|
|
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: -4px;
|
|
margin-right: 10px;
|
|
}
|
|
.control div.largescr:before{
|
|
content: '\e601';
|
|
font-family: 'icomoon';
|
|
font-size: 16px;
|
|
line-height: 18px;
|
|
|
|
}
|
|
.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.res{
|
|
margin-right: 6px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 18px;
|
|
height: 16px;
|
|
}
|
|
.control div.res:before {
|
|
content: "\e613";
|
|
font-family: 'icomoon';
|
|
font-size: 18px;
|
|
line-height: 16px;
|
|
}*/
|
|
.control div.small{
|
|
background:url(skin/small.png) no-repeat -2px 3px;
|
|
float:right;
|
|
margin-right: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
.control div.res{
|
|
margin-right: 6px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 18px;
|
|
height: 16px;
|
|
}
|
|
.control div.res:before {
|
|
content: "\e613";
|
|
font-family: 'icomoon';
|
|
font-size: 18px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.control div.hdon{
|
|
/*background:url(skin/hd.png) no-repeat -55px -6px ;
|
|
float:right;*/
|
|
margin-right: 10px;
|
|
margin-left: -3px;
|
|
color: #0086b9;
|
|
width: 25px;
|
|
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;*/
|
|
color: #757575;
|
|
margin-right: 10px;
|
|
margin-left: -3px;
|
|
width: 25px;
|
|
height: 16px;
|
|
}
|
|
.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;
|
|
font-family: 'PT Sans', sans-serif;
|
|
}
|
|
|
|
/* 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;
|
|
color: #393939;
|
|
z-index: 100;
|
|
|
|
|
|
}
|
|
|
|
#ritems
|
|
{
|
|
background: #fff;
|
|
margin: 0px;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.rlist
|
|
{
|
|
list-style-type:none;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
padding: 5px ;
|
|
}
|
|
|
|
.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{
|
|
font-family: 'PT Sans', sans-serif;
|
|
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;
|
|
font-family: 'PT Sans', sans-serif;
|
|
}
|
|
|
|
#link_v{
|
|
position: relative;
|
|
font-family: 'PT Sans', sans-serif;
|
|
}
|
|
#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);
|
|
font-family: 'PT Sans', sans-serif;
|
|
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;
|
|
}
|
|
}
|