/*music container*/

#musicPlayer{
  height: 70%;
  width: 98%;
  border-style: solid;
  border-width: 5px;
  border-color: #333333;
  border-radius: 3px;
  position:absolute;
}

/*container pour play button, volume controls, time display, et progress bar*/

#interface{
  position: relative;
  width: 100%;
  height: 64%;
  background-size: 100% auto;
}

/*img file for background, album artwork*/

#albumArt{
  max-width: 100%;
  max-height: 100%;
}

/*container pour play and pause*/

#playButton{
  opacity: 0.80;
  width: 20%;
  height: 20%;
  background-color: #333333;
  position:absolute;
  margin-top: -60%;
  margin-left: 40%;
  border-radius: 50%;
  cursor: pointer;
}

/*play image*/

#play{
  display: block;
  width: 100%;
  height: 100%;
  background-color: green;
  clip-path: polygon(30% 20%, 30% 80%, 85% 50%);
}

/*pause image*/

#pause{
  display: none;
  width: 100%;
  height: 100%;
  background-color: green;
  clip-path: polygon(20% 20%, 40% 20%, 40% 80%, 60% 80%, 
		60% 20%, 80% 20%, 80% 80%, 20% 80%);
}

/*play button opacity*/

#playButton:hover{
  opacity: 0.90;
}

/*progress bar*/

#progressBarContainer{
  position:absolute;
  width: 90%;
  margin-left: 5%;
  height: 10%;
  margin-top: -10%;
}

#progressBar:hover{
  opacity: 1;
}

#progressBar{
  -webkit-appearance: none;
  opacity: 0.7;
  width: 100%;
  height: 30%;
  background: #d3d3d3;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
}

/*style slider thumb - Google Chrome*/

#progressBar::-webkit-slider-thumb {
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: green;
  cursor: pointer;
  border-radius: 50%;
}

/*mozilla firefox*/

#progressBar::moz-range-thumb {
  border-radius: 50%;
  width: 6%;
  height: 160%;
  background: green;
  cursor: pointer;
  border-radius:50%;
}

/*time stamp container*/

#timeStampContainer{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  font-weight: bold;
  color: green;
  position: absolute;
  width: 90%;;
  margin-left: 5%;
  margin-top: -18%;
}

/*current song position*/

#timeStamp1{
  float: left;
  display: inline-block;
}

/*song duration*/

#timeStamp2{
  float: left;
  display: inline-block;
}

/*volume et mute container*/

#volumeContainer{
  position:absolute;
  width: 50%;
  height: 10%;
  margin-top: -95%;
  margin-left: 55%;
}

#muteButton{
  clip-path: polygon(25% 35%, 25% 65%, 40% 65%, 
		85% 90%, 85% 10%, 40% 35%);
		background-color: green;
		width: 20%;
		height: 100%;
		float: left;
		cursor: pointer;
}

/*volume slider*/

#volBar{
  height: 10%;
  width: 60%;
  float: left;
  background: #d3d3d3;
  outline: none;
  border-radius: 5px;
  -webkit-appearance: none;
  margin-top: 10%;
  cursor: pointer;
}

/*chrome slider*/

#volBar::webkit-slider-thumb {
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: green;
  cursor: pointer;
  border-radius: 50%;
}

/*mozilla slider*/

#volBar::-moz-range-thumb {
  border-radius: 50%;
  width: 18%;
  height: 480%;
  background: green;
  cursor: pointer;
  border-radius: 50%;
}

/*class styles pour tracks*/

.tracks{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 4%;
  color: #6fff00;
  background-color: #7D138D;
  display: block;
  width: 100%;
  text-decoration: none;
}

.tracks:hover{
  background-color: #530d5e;
}

/*bottom container*/

#tracklist{
  width: 100%;
  height: 25%;
  background-color: #7D138D;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*default first track*/

#track01{
  background-color: #530d5e;
}