.clear {
clear:both;
}
.jp-row {
display:table-row;
}
.jp-jplayer audio,
.jp-jplayer {
width: 0px;
height: 0px;
}
.jp-audio *:focus,
.jp-audio-stream *:focus,
.jp-video *:focus {
outline: none;
}
.jp-audio button::-moz-focus-inner,
.jp-audio-stream button::-moz-focus-inner,
.jp-video button::-moz-focus-inner {
border: 0;
}
.jp-playlist *, .jp-details * {
font-size:13px;
}
.jp-interface {
border: 1px solid #D5EEFF;
position: relative;
background: #F2FAFF;
width: 100%;
display:table;
}
.jp-interface * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*//////////////////*/
/* Volume */
/*//////////////////*/
.jp-volume-controls {
width: 130px;
padding:10px;
display:table-cell;
}
.jp-volume-bar {
float:left;
background: #C9DFF1;
width: 60px;
height: 24px;
cursor: pointer;
}
.jp-volume-bar-value {
background: #77AEDB;
width: 0px;
height: 24px;
}
/*//////////////////*/
/* Control */
/*//////////////////*/
.jp-controls {
padding:6px;
display:table-cell;
width:88px;
vertical-align:top;
}
/*//////////////////*/
/* Progress */
/*//////////////////*/
.jp-progress {
display:table-cell;
vertical-align:top;
padding:10px;
}
.jp-seek-bar {
background: #C9DFF1;
width: 0px;
height:8px;
cursor: pointer;
}
.jp-play-bar {
background: #77AEDB;
width: 0px;
height:8px;;
}
/*//////////////////*/
/* Toggles*/
/*//////////////////*/
.jp-toggles {
display:table-cell;
vertical-align:top;
padding:10px;
width:28px;
}
/*//////////////////*/
/* Detals*/
/*//////////////////*/
.jp-details {
text-align: center;
cursor: default;
font-size:13px;
padding:8px 0;
font-family: Verdana;
}
/*//////////////////*/
/* Playlists*/
/*//////////////////*/
.jp-playlist ul {
list-style-type: none;
margin:10px 0 0 0;
padding:0;
display:block;
counter-reset: li;
position:relative;
}
.jp-playlist ul li {
padding: 5px 0;
border-bottom: 1px solid #eee;
font-size:13px;
font-family: Verdana;
}
.jp-playlist ul li:before {
position: relative;
left:-10px;
width:20px;
font-size: 10px;
font-weight: bold;
color: #A7A7A7;
counter-increment: li;
content: counter(li);
text-align:right;
display:inline-block;
}
.jp-playlist li:last-child {
border-bottom: none;
}
.jp-playlist li div {
display: inline;
}
.jp-playlist a, .jp-playlist span.jp-free-media a {
color: #333;
text-decoration: none;
}
.jp-playlist a:hover, .jp-playlist a.jp-playlist-current, .jp-playlist a.jp-playlist-item-remove:hover, .jp-playlist span.jp-free-media a:hover {
color: #0d88c1;
}
.jp-playlist a.jp-playlist-item-remove {
float: right;
display: inline;
text-align: right;
margin-right: 10px;
font-weight: bold;
color: #666;
}
.jp-playlist span.jp-free-media {
float: right;
display: inline;
text-align: right;
margin-right: 10px;
}
.jp-artist {
font-size: 11px;
color: #666;
}
/*//////////////////*/
/* Time */
/*//////////////////*/
.jp-current-time,
.jp-duration {
width: 50px;
font-size: 11px;
font-family: Verdana;
}
.jp-current-time {
float: left;
}
.jp-duration {
float: right;
text-align: right;
cursor: pointer;
}
/*//////////////////*/
/* Buttons */
/*//////////////////*/
.jp-controls button, .jp-volume-controls button, .jp-toggles button {
display: block;
float: left;
overflow: hidden;
cursor: pointer;
background: #77AEDB;
color: #FFF;
margin: 4px;
width:30px;
height:30px;
font-size:13px;
border: 0;
}
.jp-volume-controls button, .jp-toggles button {
width:24px;
height:24px;
margin: 0 0 8px 0;
}
.jp-controls button:hover, .jp-volume-controls button:hover, .jp-toggles button:hover {
background: #337ab7;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.jp-state-playing .jp-play i {
display:none;
}
.jp-state-playing .jp-play:before {
font-family: FontAwesome;
content: "\f04c";
}
.jp-state-looped .jp-repeat, .jp-state-shuffled .jp-shuffle, .jp-shuffle:active, .jp-state-full-screen .jp-full-screen, .jp-full-screen:active {
background: #337ab7;
}
.jp-stop, .jp-previous, .jp-next {
width: 28px;
height: 28px;
margin-top: 6px; }
.jp-stop {
margin-left: 10px;
}
/*//////////////////*/
/* Video */
/*//////////////////*/
.jp-video .jp-volume-controls {
right:80px;
}
.jp-video .jp-toggles {
width:76px;
}
.jp-video .jp-toggles .jp-full-screen, .jp-video .jp-toggles .jp-shuffle{
margin-left:8px;
}
.jp-video .jp-type-playlist .jp-toggles {
width:120px;
float:left;
padding:0;
}
/*//////////////////*/
/* Video full */
/*//////////////////*/
.jp-video-full div div {
z-index: 1000;
}
.jp-video-full .jp-jplayer {
top: 0;
left: 0;
position: fixed;
overflow: hidden;
}
.jp-video-full .jp-gui {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001;
}
.jp-video-full .jp-interface {
position: absolute;
bottom: 0;
left: 0;
}
.jp-video-full .jp-video-play {
height: 100%;
}
.jp-video-play {
position: relative;
}
/*//////////////////*/
/* Video icon */
/*//////////////////*/
.jp-video-play-icon {
position: absolute;
display: block;
top: 20px;
width:100%;
font-size:80px;
font-weight:bold;
font-family:Tahoma;
border: none;
cursor: pointer;
color:#77AEDB;
background: transparent;
}
.jp-video-play-icon:hover {
color:#337ab7;
}
/*//////////////////*/
/* no-solution */
/*//////////////////*/
.jp-no-solution {
padding: 5px;
font-size: .8em;
background-color: #eee;
border: 2px solid #009be3;
color: #000;
display: none;
}
.jp-no-solution a {
color: #000;
}
.jp-no-solution span {
font-size: 1em;
display: block;
text-align: center;
font-weight: bold;
}
/*//////////////////*/
/* Block 700px */
/*//////////////////*/
.b700 .jp-progress, .b700 .jp-controls, .b700 .jp-volume-controls, .b700 .jp-toggles,
.b450 .jp-progress, .b450 .jp-controls, .b450 .jp-volume-controls, .b450 .jp-toggles
{
display:block;
float:left;
width:100%;
padding:4px;
}
.b700 .jp-volume-controls, .b450 .jp-volume-controls {
float:right;
position:absolute;
top:6px;
right:48px;
width:120px;
}
.b700 .jp-toggles, .b450 .jp-toggles {
float:right;
position:absolute;
top:6px;
right:0;
width:38px;
}
.b700 .jp-details, .b450 .jp-details {
padding-top:18px;
}
.b700 .jp-type-playlist .jp-volume-controls, .b450 .jp-type-playlist .jp-volume-controls {
right:80px;
}
.b700 .jp-type-playlist .jp-toggles, .b700 .jp-video .jp-toggles, .b450 .jp-type-playlist .jp-toggles, .b450 .jp-video .jp-toggles {
width:70px;
}
.b700 .jp-type-playlist .jp-toggles .jp-shuffle, .b450 .jp-type-playlist .jp-toggles .jp-shuffle{
margin-left:8px;
}
.b700 .jp-video .jp-type-playlist .jp-toggles, .b450 .jp-video .jp-type-playlist .jp-toggles {
right:0;
top:4px;
float:right;
width:104px;
}
.b700 .jp-video .jp-type-playlist .jp-volume-controls, .b450 .jp-video .jp-type-playlist .jp-volume-controls {
top:42px;
left:5px;
width:100%;
}
.b700 .jp-video .jp-type-playlist .jp-progress, .b450 .jp-video .jp-type-playlist .jp-progress{
margin-top:32px;
}
.b700 .jp-video .jp-volume-controls, .b450 .jp-video .jp-volume-controls {
right:80px;
}
.b700 .jp-video-play-icon, .b450 .jp-video-play-icon {
font-size:50px;
}
/*//////////////////*/
/* Block 450px */
/*//////////////////*/
.b450 .jp-type-playlist .jp-volume-controls, .b450 .jp-video .jp-volume-controls {
top:42px;
left:5px;
}
.b450 .jp-type-playlist .jp-toggles, .b450 .jp-video .jp-toggles {
right:0;
top:42px;
}
.b450 .jp-type-playlist .jp-progress, .b450 .jp-video .jp-progress{
margin-top:32px;
}
/*//////////////////*/
/* Responsive */
/*//////////////////*/
@media screen and (max-width: 700px) {
.jp-progress, .jp-controls, .jp-volume-controls, .jp-toggles {
display:block;
float:left;
width:100%;
padding:4px;
}
.jp-volume-controls {
float:right;
position:absolute;
top:6px;
right:48px;
width:120px;
}
.jp-toggles {
float:right;
position:absolute;
top:6px;
right:0;
width:38px;
}
.jp-details {
padding-top:18px;
}
.jp-type-playlist .jp-volume-controls {
right:80px;
}
.jp-type-playlist .jp-toggles, .jp-video .jp-toggles {
width:70px;
}
.jp-type-playlist .jp-toggles .jp-shuffle{
margin-left:8px;
}
.jp-video .jp-type-playlist .jp-toggles {
right:0;
top:4px;
float:right;
width:104px;
}
.jp-video .jp-type-playlist .jp-volume-controls {
top:42px;
left:5px;
width:100%;
}
.jp-video .jp-type-playlist .jp-progress{
margin-top:32px;
}
.jp-video-play-icon {
font-size:50px;
}
@media screen and (max-width: 450px) {
.jp-type-playlist .jp-volume-controls, .jp-video .jp-volume-controls {
top:42px;
left:5px;
}
.jp-type-playlist .jp-toggles, .jp-video .jp-toggles {
right:0;
top:42px;
}
.jp-type-playlist .jp-progress, .jp-video .jp-progress{
margin-top:32px;
}
}