* { padding:0px; margin:0px; }
body { background-image: url(../images/banner/linkin_park.jpg); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color: #464646; height:100%;}
.mainContainer > .twoColumn { width:100%; max-height:100%; }
.col-1 { width: 6%; height: 100%;}
.toolsPane { background-color: black; position: absolute; opacity:0.8; }
.ctrls { width: 40px; height: 40px; display:block; margin:0 auto; margin-top:50%; cursor:pointer; }
.playlist { background: url(../images/controls/grey/playlist.png) no-repeat; background-size:75%; }
.playAudio { background: url(../images/controls/grey/play.png) no-repeat; background-size:75%; }
.pauseAudio { background: url(../images/controls/grey/pause.png) no-repeat; background-size:75%; }
.previous { background: url(../images/controls/grey/previous.png) no-repeat; background-size:75%; }
.next { background: url(../images/controls/grey/next.png) no-repeat; background-size:75%; }
.replay { background: url(../images/controls/grey/replay.png) no-repeat; background-size:75%; }
.replay-all{ background: url(../images/controls/grey/replay-all.png) no-repeat; background-size:75%; }

.playlistContainer { position: relative; height:10%; background-color: black; opacity:0.8; margin-left:6%; }
.playlistContainer li a { font-size:0px; line-height:0px; color:transparent; }
.playlistContainer li { display:inline-block; padding:7px; }
.playlistContainer li img { width:100px; height:100px; border:1px solid white; }
.playlistContainer li img:hover , .playlistContainer li.activeAudio img{ border:1px solid yellow; }

.titleContainer { position: absolute; right: 0px; margin-right: 5%; bottom: 5%; font-size: 40px; }
.titleContainer p { color: #fff; font-family: fantasy; }

.progress { margin-left:6%; clear:both; height:10px; background-color:#666666; width:93.8%; cursor:pointer; position:relative; }
.progress .updateProgress { width:0px; background-color:#cc0000; height:100%; float:left; position:relative; }
.seekableTrack { width: 0%; background-color:#000; position:absolute; height:10px; z-index:0; display: block; }
.seekableTrack, .progress .updateProgress { border:1px inset #ccc;  -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; }


/* ------- Title Animation ------ */ 

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulse { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
}

/* ------- EOF Title Animation ------ */ 
/* ------------ Volume Control ------ */ 
.volumeControlContainer { position: absolute; bottom:5%; left:8%;}
#volumeSlider {
    border-width: 1px;
    border-style: solid;
    border-color: #333 #333 #777 #333;
    border-radius: 25px;
    width: 125px;
    height: 10px;
    background: url('../images/controls/bg-track.png') repeat top left;
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 0 1px 0 0px rgba(250, 250, 250, .5);
}
.tooltip {
    position: absolute;
    display: none;
    top: -25px;
    width: 35px;
    height: 20px;
    color: #fff;
    text-align: center;
    font: 10pt Tahoma, Arial, sans-serif;
    border-radius: 3px;
    border: 1px solid #333;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: -moz-linear-gradient(top, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(69, 72, 77, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.5)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
    /* IE10+ */
    background: linear-gradient(top, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8045484d', endColorstr='#80000000', GradientType=0);
    /* IE6-9 */
}

.volume {
    content:"";
    display: inline-block;
    width: 25px;
    height: 25px;
    right: -30px;
    background: url('../images/controls/volume.png') no-repeat 0 -50px;
    position: absolute;
    margin-top: -19px;
}

#volumeSlider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: url('../images/controls/handle.png') no-repeat 50% 50%;
    font-weight: bold;
    color: #1C94C4;
    outline: none;
    top: -7px;
    margin-left: -12px;
	border:none;
}

#volumeSlider .ui-slider-range {
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #eaeaea 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #eaeaea));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #eaeaea 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #eaeaea 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #eaeaea 100%);
    /* IE10+ */
    background: linear-gradient(top, #ffffff 0%, #eaeaea 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaeaea', GradientType=0);
    /* IE6-9 */
    position: absolute;
    border: 0;
    top: 0;
    height: 100%;
    border-radius: 25px;
}
/* ------- EOF Volume Control ------- */