windham-brothers/src/css/style.css

body {
	margin: 20px;
	padding: 20px;
	background: #cecece;
	font-size:18px;
}
h1 {
	color:#222;
	margin:15px 0 0;
	font-size: 27px;
	text-shadow: 2px 2px #999;
}
img {
	float:right;
	padding:10px 0;
}
p {
	color: #222;
	list-style:none;
	line-height:16px;
	text-decoration:none;
	margin:7px 10px;
}
a {
	color: #888;
	list-style:none;
	line-height:14px;
	text-decoration:none;
}
li {
	color: #333;
	list-style:none;
	line-height:16px;
	text-decoration:none;
}
a:hover {
	color: #fff;
}
::selection {
	background: #6699ff;
	}
::-moz-selection {
	background: #333;
}
.clear {clear:both}


header {
	background: img(img/back.jpg);
}



#footer {clear:both; text-align:center;}


/***********************************
========== Audio Player ============ 
***********************************/

#audio_player {
  background-color: #f7f7f7;

}

div#player{
	width: 100%;
	color: #555555;
	font-family: 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
}
#song-information{
	text-align: left;
	margin: 0 0 10px;
}
#controls{
	right: left;
}
#amplitude-volume-slider{
	width: 80%;
	margin: 0 auto;
  padding-right:35px;
}
.current-track {
  margin:20px 0 0;
}
input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
  background: #337ab7;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {

  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
  border: 1px solid #333;
  height: 26px;
  width: 16px;
  border-radius: 3px;
  background: #f7f7f7;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #337ab7;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #337ab7;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}
output.volume {
  position: absolute;
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  width: 40px;
  height: 30px;
  text-align: center;
  color: white;
  border-radius: 10px;
  display: inline-block;
  font: bold 15px/30px Georgia;
  bottom: 175%;
  left: 0;
  margin-left: -1%;
}
output.volume:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
meter {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#amplitude-current-time{
	font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
	font-size: 15px;
	font-weight: 400;
  float:left;
}
#amplitude-play-pause {
  height: 50px;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  margin: -30px 0 0 0;
  cursor: pointer;
  float: right;
  position: relative;
	-webkit-transition: all .1s linear;
	transition: all .1s linear;
}
.amplitude-paused {  
  color:rgba(88, 185, 87, .7);
  display: block;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}
@-webkit-keyframes pulseon {to {box-shadow: 0 0 0 15px rgba(88, 185, 87, .1);}}
@-moz-keyframes pulseon {to {box-shadow: 0 0 0 15px rgba(88, 185, 87, .1);}}
@-ms-keyframes pulseon {to {box-shadow: 0 0 0 15px rgba(88, 185, 87, .1);}}
@keyframes pulseon {to {box-shadow: 0 0 0 15px rgba(88, 185, 87, .1);}}
.amplitude-paused:hover {   
  color:#58B957;
  text-shadow: 0px 0px 6px #58B957;
  box-shadow: 0 0 0 0 rgba(88, 185, 87, .7), inset 0px 4px 1px 1px white, inset 0px 4px 1px 1px rgba(204,198,197,.5);
  -webkit-animation: pulseon 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.amplitude-paused:after {
  content:"\e072";
  font-family:"Glyphicons Halflings";
  font-size:25px;
  line-height: 50px;
  padding-left:4px;
  text-shadow: 1px 4px 6px #def, 0 0 0 #555;
}
.amplitude-paused:before { 

}
.amplitude-playing {
  color:#DB524B;
  text-shadow:0px 0px 3px #DB524B;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}
@-webkit-keyframes pulseoff {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulseoff {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulseoff {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
@keyframes pulseoff {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
.amplitude-playing:hover {
  color:#DB524B;
  text-shadow:0px 0px 6px #DB524B;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7), inset 0px 4px 1px 1px white, inset 0px 4px 1px 1px rgba(204,198,197,.5);
  -webkit-animation: pulseoff 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.amplitude-playing:after {
  content:"\e073";
  font-family:"Glyphicons Halflings";
  font-size:25px;
  line-height: 50px;
  padding-left:4px;
}
.amplitude-playing:before {
}
#amplitude-now-playing-name{
}
#amplitude-now-playing-listeners{
}
#amplitude-now-playing-bitrate{
}