.winamp {
  width: 275px;
  box-shadow: 0px 5px 40px #000;
  background: -webkit-linear-gradient(
    left,
    #1a1927 0%,
    #353551 53%,
    #21212d 100%
  );
  border: 2px ridge #7e7e7e;
  margin: 0px auto;
  margin-top: 40px;
  -webkit-text-stroke: 0;
}
.player {
  border: 3px groove #7e7e7e;
  margin: 3px;
  margin-top: 0px;
  height: 103px;
}
.header {
  font-weight: bold;
  color: #fff;
  font-size: 10px;
  text-align: center;
}
.header:before {
  background: -webkit-linear-gradient(
    top,
    #fffcdf 0%,
    #fffcdf 29%,
    #736c50 32%,
    #736c50 66%,
    #d5ceb1 69%,
    #d5ceb1 100%
  );
  content: "";
  height: 8px;
  width: 266px;
  display: block;
  margin-top: 2px;
  position: absolute;
  margin-left: 5px;
  z-index: 0;
}
.header:after {
  content: "WINAMP";
  display: block;
  margin-top: -12px;
  position: absolute;
  margin-left: 110px;
  background: #353551;
  padding: 0px;
  width: 55px;
}
.vis {
  width: 89px;
  height: 42px;
  background: #0f0f0f;
  margin: 8px 3px 3px 5px;
  border: 1px inset #69667b;
  float: left;
  color: lime;
  font-family: monospace;
  font-size: 15px;
  text-align: right;
  padding: 3px 3px 0px 0px;
}
.title {
  float: left;
  width: 150px;
  height: 12px;
  margin-left: 3px;
  text-align: left;
  font-size: 9px;
  text-indent: 5px;
}
.inf {
  border: 1px inset #69667b;
  width: 15px;
  height: 10px;
  background: #0f0f0f;
  float: left;
  margin-left: 3px;
  margin-top: 2px;
  margin-right: 25px;
}
.inf:after {
  content: "Kbps";
  font-size: 8px;
  margin-left: 20px;
  color: white;
  font-weight: bold;
  position: absolute;
}
.khz:after {
  content: "Khz";
}
.mono_stereo {
  float: right;
  color: white;
  font-size: 8px;
  font-weight: bold;
  margin-right: 4px;
  margin-top: 4px;
}
.mono_stereo:after {
  content: "stereo";
  margin-left: 5px;
  text-shadow: 0px 0px 6px #00ff0f;
  color: #20ff17;
}
.bar {
  background: #c51b1e;
  height: 7px;
  width: 64px;
  float: left;
  margin-left: 3px;
  margin-top: 5px;
  box-shadow: 0px 0px 4px black inset;
  border-radius: 2px;
  border-bottom: 1px solid #858585;
}

.bar:after {
  content: "III";
  background: #bbb;
  font-size: 6px;
  padding: 0px 2px;
  margin-top: -1px;
  position: absolute;
  border: 2px outset white;
  font-weight: bold;
  box-shadow: 0px 0px 0px 1px black;
}
.blanced {
  width: 30px;
  margin-left: 6px;
  background: #358a23;
}
.volume:after {
  margin-left: 50px;
}
.blanced:after {
  margin-left: 8px;
}
.btn {
  background: none;
  font-size: 6px;
  padding: 0px 1px 0px 7px;
  
  font-weight: bold;
  float: left;
  color: #333;
  margin-top: 4px;
  margin-left: 1px;
}
.ext:before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  background: #686868;
  position: absolute;
  margin-left: -5px;
  margin-top: 1px;
}
.left {
  margin-left: 15px;
  margin-right: 2px;
}
.sidebar {
  border: 2px inset #7e7e7e;
  float: left;
  height: 8px;
  width: 252px;
  margin: 5px;
  margin-top: 5px;
}
.sidebar:before {
  background: -webkit-linear-gradient(
    top,
    #fffcdf 0%,
    #fffcdf 29%,
    #736c50 32%,
    #736c50 66%,
    #d5ceb1 69%,
    #d5ceb1 100%
  );
  width: 25px;
  height: 4px;
  display: block;
  content: "";
  position: absolute;
  margin-top: -2px;
  border: 4px ridge #fcffbd;
}

.player_b {
  font-size: 13px;
  padding: 0px 7px 6px 7px;
  height: 10px;
  width: 6px;
  color: #7a7a7a;
  text-shadow: 1px 1px 0px white;
  margin: 0px 1px;
}
.player_i {
  font-size: 13px;
  padding: 0px 7px 6px 7px;
  height: 10px;
  width: 6px;
  color: #7a7a7a;
  text-shadow: 1px 1px 0px white;
  margin: 0px 1px;
}
.first {
  margin-left: 7px;
}

.inf::after {
  margin-left: 12px;
}



.player {
  height: 116px;
}

.winamp-button {
  width: 16px;
  position: relative;
  right: 5px;
  top: 1px;
}



.btn-first {
  margin-left: 5px;
}

.player_b:active {
  opacity: 0.6;
}