﻿.audioArea {
    background: linear-gradient( #9B0329, #9D0329, #9D022A, #9A042A, #960629, #82102A );
    background: #818181\9; /* IE9 and IE8 */
    border-radius: 4px;
}

    .audioArea img, .audioArea {
        height: 26px;
    }

@media all {
   .audioArea img:nth-child(2){
        width: 100%;
    }

    .audioArea {
        position: relative;
    }

        .audioArea img:first-child {
            z-index: 1;
            position: absolute
        }

    .audioArea {
        margin-bottom: 10px;
    }
}

@media all and (min-width:400px) {
}

@media all and (min-width:650px) {
    .Html_Aud_Vid .audioPlay {
        width: 67.3%;
        margin-left: 10px;
        float: right;
    }
}

@media all and (min-width:775px) {
}

@media all and (min-width:1024px) {
}
/**********************************************************
Above is imported from prior site.css file as some of the video css was hiding out there
Below here is the start of original file
**********************************************************/

.audioPlayer{
    /*background: linear-gradient(#7B102C, #94062C, #99042A );*/
    /*min-width: 230px;*/
    overflow:hidden;  
}

.audioPlayerBar * {
    -webkit-margin-after:10px; 
}

.audioPlayer audio{
    width:100%;
}



.audioPlayerBar{
    background: linear-gradient(  #9B0329, #9D0329, #9D022A, #9A042A, #960629, #82102A );
    background:#818181\9; /* IE9 and IE8*/
    color:#FFF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.7em;
    height:26px;
    /*position:relative;
    top:-5px;*/
    padding-top: 2px;
    border-radius: 4px;

}
.audioPlayerBar span{
    position: relative;
    top: -5px;
}


.audioPlayerBar .playPauseBtn, .audioPlayerBar .fullScreenBtn, .audioPlayerBar .muteBtn{    
    border:none;
    cursor:pointer;
    width:20px;
    height:20px;
    margin-left:2px;
    opacity:0.7;
    padding-bottom:3px;
   
}
button::-moz-focus-inner {
  border: 0;
}
@-moz-document url-prefix() { /*target mozilla specifically*/
  .audioPlayerBar .playPauseBtn, .audioPlayerBar .fullScreenBtn, .audioPlayerBar .muteBtn {
     vertical-align: super;    
  }
  .audioPlayerBar * {
     margin-bottom:10px;
  }

}


.audioPlayerBar .playPauseBtn:hover, .audioPlayerBar .fullScreenBtn:hover, .audioPlayerBar .muteBtn:hover {
    opacity:1;   
}
.audioPlayerBar .playPauseBtn{
    background:url("../Images/pauseBtn.png");
}
.audioPlayerBar .fullScreenBtn{
    background:url("../Images/fullscreenBtn.png"); 
    margin-right:0;   
}

.audioPlayerBar .muteBtn{
    background:url("../Images/soundIcon.png");     
}



/*NOTES: ----- https://coderwall.com/p/rw6i0q ------*/

.audioPlayerBar input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 75px;
  height: 15px;
  margin: 0;
  border: none;
  padding: 0px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

.audioPlayerBar .seekBar, .audioPlayerBar .volumeBar {
    display:none\9; /* IE9 and IE8*/
}

.audioPlayerBar input[type="range"].seekBar{
    width:35%;
}
.audioPlayerBar input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent; 
 
}

.audioPlayerBar input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent; 
}

.audioPlayerBar input[type="range"]::-ms-fill-lower,
.audioPlayerBar input[type="range"]::-ms-fill-upper {
  background: transparent;
}

.audioPlayerBar input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb  = the track ball*/

.audioPlayerBar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, gainsboro), color-stop(100%,  #c3c1c1)); /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top , gainsboro 0,  #c3c1c1 100%); /* older mobile safari and android > 2.2 */
  background-image: linear-gradient(to bottom, gainsboro 0,  #c3c1c1 100%); /* W3C */
  opacity:0.7;
}
.audioPlayerBar input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, gainsboro 0,  #c3c1c1 100%); /* W3C */
   opacity:0.7;
}

.audioPlayerBar input[type="range"]::-ms-thumb {
  width: 13px;
  height: 13px;
  border-radius: 15px;
  border: 0;
  background-image: linear-gradient(to bottom, gainsboro 0,  #c3c1c1 100%); /* W3C */
  opacity:0.7;
}
.audioPlayerBar input[type="range"]::-webkit-slider-thumb:hover {    opacity:1;     }
.audioPlayerBar input[type="range"]::-ms-thumb:hover{     opacity:1;    }
.audioPlayerBar input[type="range"]::-moz-range-thumb:hover{    opacity:1;      }


@media all{
    .audioPlayer{   min-width:initial;    }
    .audioPlayerBar input[type="range"].seekBar {   width: 20%; }
    .audioPlayerBar input[type="range"].volumeBar {   display:none; }
}
@media all and (min-width:290px){
    .audioPlayerBar input[type="range"].volumeBar {   display:inline; min-width: 35px; max-width: 100px; width: 16%;   }
    .audioPlayerBar input[type="range"].seekBar {   width: 20%; }
}
    
 .audioPlayerBar .currentTime, .audioPlayerBar .durationTime{

 }
