#controls{
  float: left;
  display: flex;
  align-items: center;
  width: 100%;
}
#controls h4 {
  margin: 5px;
  font-size: 16px;
}
#controls h4 small{
  color:#fff;
  font-weight: 300;
  display: block;
}
#controls .volume-control{
  display: flex;
  align-items: center;
}
#play{
  border-radius: 50%;
  color:#333;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(220, 220, 220);
  line-height: 44px;
  display: block;
  outline: none;
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
  background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
  background-color:#ededed;
}
#play i{
  line-height: 40px;
  font-size: 30px;
}
#player{
  background-color: #333;
  border-radius: 4px;
  display: inline-block;
  padding: 5px 10px;
  color:#fff;
  width: 300px;
  margin-right: 0px;
}
#thumb{
  width: 70px;
  margin:0 10px;
}