#volume {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  -moz-transition: opacity 0.5s ease;
  pointer-events: none;
  display: none;
  background-image: url("images/header_bg.png");
}

#volume > * {
  line-height: 40px;
  height: 40px;
  display: inline-block;
  float: left;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

#volume span {
  display: inline-block;
  width: 25px;
  float: left;
}

#volume span.vibration {
  visibility: hidden;
  margin-left: 5px;
  background-image: url('images/vibration_disabled_icon.png');
}

#volume.vibration span.vibration {
  background-image: url('images/vibration_enabled_icon.png');
}

#volume.mute span.mute-state {
  background-image: url('images/speaker_mute_icon.png');
}

#volume span.mute-state {
  background-image: url('images/speaker_regular_icon.png');
}

#volume span.volume {
  margin-left: 5px;
  background-image: url('images/speaker_loud_icon.png');
}

#volume.visible {
  display: block;
}

#volume[data-channel="notification"] span.vibration {
  visibility: visible;
}

#volume[data-channel="bt_sco"] div:nth-child(n+4),
#volume[data-channel="content"] div:nth-child(n+4),
#volume[data-channel="alarm"] div:nth-child(n+4),
#volume[data-channel="notification"] div:nth-child(n+4) {
  width: 12px;
  margin-left: 2px;
  background-image: url('images/volume_center_disabled.png');
}

#volume[data-channel="telephony"] div:nth-child(n+4) {
  width: 42px;
  margin-left: 2px;
  background-image: url('images/volume_center_disabled.png');
}

#volume[data-channel="bt_sco"] div.active:nth-child(n+4),
#volume[data-channel="content"] div.active:nth-child(n+4),
#volume[data-channel="alarm"] div.active:nth-child(n+4),
#volume[data-channel="notification"] div.active:nth-child(n+4),
#volume[data-channel="telephony"] div.active:nth-child(n+4) {
  background-image: url('images/volume_center_active.png');
}

#volume div:nth-child(3) {
  background-image: url('images/volume_left_disabled.png');
}

#volume div.active:nth-child(3) {
  background-image: url('images/volume_left_active.png');
}

#volume[data-channel="bt_sco"] div:nth-child(17),
#volume[data-channel="alarm"] div:nth-child(17),
#volume[data-channel="notification"] div:nth-child(17),
#volume[data-channel="content"] div:nth-child(17),
#volume[data-channel="telephony"] div:nth-child(7) {
  background-image: url('images/volume_right_disabled.png');
}

#volume[data-channel="bt_sco"] div.active:nth-child(17),
#volume[data-channel="alarm"] div.active:nth-child(17),
#volume[data-channel="notification"] div.active:nth-child(17),
#volume[data-channel="content"] div.active:nth-child(17),
#volume[data-channel="telephony"] div.active:nth-child(7) {
  background-image: url('images/volume_right_active.png');
}

#volume[data-channel="telephony"] div:nth-child(n+8) {
  display: none;
}

#volume[data-channel="notification"] > div:nth-child(n+3),
#volume[data-channel="alarm"] > div:nth-child(n+3),
#volume[data-channel="bt_sco"] > div:nth-child(n+3),
#volume[data-channel="content"] > div:nth-child(n+3) {
  width: 12px;
  background-size: 12px 10px;
}

#volume[data-channel="telephony"] > div:nth-child(n+3) {
  width: 42px;
  background-size: 42px 10px;
}

@media (orientation: landscape) and (width: 480px) {
  #volume[data-channel="bt_sco"] div:nth-child(n+4),
  #volume[data-channel="content"] div:nth-child(n+4),
  #volume[data-channel="alarm"] div:nth-child(n+4),
  #volume[data-channel="notification"] div:nth-child(n+4),
  #volume[data-channel="telephony"] div:nth-child(n+4) {
    width: 36px;
    margin-left: 2px;
    background-size: 36px 10px;
    background-image: url('images/VolumeOverlay_Landscape_SegmentOff.png');
  }

  #volume[data-channel="telephony"] div:nth-child(n+8) {
    display: none;
  }

  #volume[data-channel="bt_sco"] div.active:nth-child(n+4),
  #volume[data-channel="content"] div.active:nth-child(n+4),
  #volume[data-channel="alarm"] div.active:nth-child(n+4),
  #volume[data-channel="notification"] div.active:nth-child(n+4),
  #volume[data-channel="telephony"] div.active:nth-child(n+4) {
    background-image: url('images/VolumeOverlay_Landscape_SegmentOn.png');
  }

  #volume div:nth-child(3) {
    background-image: url('images/VolumeOverlay_Landscape_SegmentOff_left.png');
  }

  #volume div.active:nth-child(3) {
    background-image: url('images/VolumeOverlay_Landscape_SegmentOn_left.png');
  }

  #volume[data-channel="bt_sco"] div:nth-child(17),
  #volume[data-channel="content"] div:nth-child(17),
  #volume[data-channel="alarm"] div:nth-child(17),
  #volume[data-channel="notification"] div:nth-child(17),
  #volume[data-channel="telephony"] div:nth-child(7) {
    background-image: url('images/VolumeOverlay_Landscape_SegmentOff_right.png');
  }

  #volume[data-channel="bt_sco"] div.active:nth-child(17),
  #volume[data-channel="content"] div.active:nth-child(17),
  #volume[data-channel="alarm"] div.active:nth-child(17),
  #volume[data-channel="notification"] div.active:nth-child(17),
  #volume[data-channel="telephony"] div.active:nth-child(7) {
    background-image: url('images/VolumeOverlay_Landscape_SegmentOn_right.png');
  }

  #volume[data-channel="notification"] > div:nth-child(n+3),
  #volume[data-channel="alarm"] > div:nth-child(n+3),
  #volume[data-channel="bt_sco"] > div:nth-child(n+3),
  #volume[data-channel="content"] > div:nth-child(n+3) {
    width: 22px;
    background-size: 22px 10px;
  }

  #volume[data-channel="telephony"] > div:nth-child(n+3) {
    width: 74px;
    background-size: 74px 10px;
  }
}