/* Play/Pause Button */
#pButton2{
	height:60px;
	width: 60px;
	border: none;
	background-size: 50% 45%;
	background-repeat: no-repeat;
	background-position: center;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%) !important;
  position: relative;
  margin: 0;
  top: 50%;
}

/*Container for audio player*/
#audioplayer{
	width: 200px;
	height: 200px;
	border: solid;
	border-color: black;
	border-width: 2px;
  border-radius: 100%;
  margin: auto;
  text-align: center;
}

/* Play/Pause Button */
#pButton{
	height: 80px;
	width: 80px;
	border: none;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	background-position: center;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%) !important;
  position: relative;
  margin: 0;
  top: 50%;
}


/* Play/Pause Button */
#pButton2{
	height: 60px;
	width: 60px;
	border: none;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	background-position: center;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%) !important;
  position: relative;
  margin: 0;
  top: 50%;
}

/*Classes for play/pause button background*/
.play{background: url('/images/play.png') ;}
.pause{background: url('/images/pause.png') ;}

#timeline{
	width: 60%;
	height: 2px;
	background: rgba(0,0,0,.3);
  border-radius: 15px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;

}
/*Grabable Playhead*/
#playhead{
  cursor: crosshair;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: black;
  margin-top: -4px;
}



/* Classes introduced by coder */
.audioplayer-style {
    width: 200px;
    height: 200px;
    border: solid;
    border-color: black;
    border-width: 2px;
    border-radius: 100%;
    margin: auto;
    text-align: center;
    }
    
    .playhead-style {
    cursor: crosshair;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black;
    margin-top: -4px;
    }
    
    .timeline-style {
    width: 60%;
    height: 2px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    }
    
    .pButton-style {
    height: 60px;
    width: 60px;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%) !important;
    position: relative;
    margin: 0;
    top: 50%;
    }