/* The status bar disregard the rem rule because we have only 16px icons for now */

body, html {
  font-family: MozTT, sans-serif;
  font-weight: 500;
  font-size: 10px;
}

#screen.lockscreen-camera > #statusbar {
  display: none;
}

#statusbar {
  overflow: hidden;
  position: absolute;

  width: 100%;
  height: 20px;
  top: 0;
  left: 0;
  background-color: #000;

  padding: 2px 0;
  -moz-box-sizing: border-box;
}

#statusbar > * {
  pointer-events: none;
  float: right;
  margin: 0 2px;
}

#statusbar > .sb-start {
  float: left;
  -moz-transition: visibility 0.5s ease, -moz-transform 0.5s ease;
}

*[dir=rtl] #statusbar > * {
  float: left;
}

*[dir=rtl] #statusbar > .sb-start {
  float: right;
}

#statusbar > .sb-start-upper {
  visibility: hidden;
  position: absolute;
  top: -20px;
  left: 0;

  -moz-transition: visibility 0.5s ease, -moz-transform 0.5s ease;
}

*[dir=rtl] #statusbar > .sb-start-upper {
  left: auto;
  right: 0;
}

.utility-tray #statusbar > .sb-start-upper {
  visibility: visible;
  -moz-transform: translateY(20px);
}

.utility-tray #statusbar > .sb-start {
  visibility: hidden;
  -moz-transform: translateY(20px);
}

#statusbar-label {
  color: #919899;
  font-size: 1.49rem; /* 6.5pt */
  position: relative;
  bottom: 1px;
}

#statusbar-time {
  color: #fff;
  font-size: 1.49rem; /* 6.5pt */
  position: relative;
  bottom: 2px;
}

#statusbar-time span {
  margin: 0 0.3rem;
  font-size: 1rem;
}

#screen.locked #statusbar-time {
  display: none;
}

.sb-icon {
  width: 16px;
  height: 16px;

  background: url('images/icons.png') no-repeat;
}

.sb-icon-battery {
  width: 21px;
}
.sb-icon-battery:not([data-level]) {
  background-position: -286px 0;
}
.sb-icon-battery[data-level="0"] {
  background-position: 0 0;
}
.sb-icon-battery[data-level="10"] {
  background-position: -26px 0;
}
.sb-icon-battery[data-level="20"] {
  background-position: -52px 0;
}
.sb-icon-battery[data-level="30"] {
  background-position: -78px 0;
}
.sb-icon-battery[data-level="40"] {
  background-position: -104px 0;
}
.sb-icon-battery[data-level="50"] {
  background-position: -130px 0;
}
.sb-icon-battery[data-level="60"] {
  background-position: -156px 0;
}
.sb-icon-battery[data-level="70"] {
  background-position: -182px 0;
}
.sb-icon-battery[data-level="80"] {
  background-position: -208px 0;
}
.sb-icon-battery[data-level="90"] {
  background-position: -234px 0;
}
.sb-icon-battery[data-level="100"] {
  background-position: -260px 0;
}

.sb-icon-battery:not([data-level])[data-charging="true"],
.sb-icon-battery[data-level="0"][data-charging="true"] {
  background-position: 0 -20px;
}
.sb-icon-battery[data-level="10"][data-charging="true"] {
  background-position: -26px -20px;
}
.sb-icon-battery[data-level="20"][data-charging="true"] {
  background-position: -52px -20px;
}
.sb-icon-battery[data-level="30"][data-charging="true"] {
  background-position: -78px -20px;
}
.sb-icon-battery[data-level="40"][data-charging="true"] {
  background-position: -104px -20px;
}
.sb-icon-battery[data-level="50"][data-charging="true"] {
  background-position: -130px -20px;
}
.sb-icon-battery[data-level="60"][data-charging="true"] {
  background-position: -156px -20px;
}
.sb-icon-battery[data-level="70"][data-charging="true"] {
  background-position: -182px -20px;
}
.sb-icon-battery[data-level="80"][data-charging="true"] {
  background-position: -208px -20px;
}
.sb-icon-battery[data-level="90"][data-charging="true"] {
  background-position: -234px -20px;
}
.sb-icon-battery[data-level="100"][data-charging="true"] {
  background-position: -260px -20px;
}

.sb-icon-wifi[data-level="0"][data-connecting="true"] {
  background: url('images/wifi-connecting.gif') no-repeat;
  background-position: 0 0;
}

.sb-icon-wifi:not([data-level]),
.sb-icon-wifi[data-level="0"] {
  background-position: 0 -60px;
}
.sb-icon-wifi[data-level="1"] {
  background-position: -21px -60px;
}
.sb-icon-wifi[data-level="2"] {
  background-position: -42px -60px;
}
.sb-icon-wifi[data-level="3"] {
  background-position: -63px -60px;
}
.sb-icon-wifi[data-level="4"] {
  background-position: -84px -60px;
}

.sb-icon-data[data-type="H+"] {
  background-position: 0 -80px;
}

.sb-icon-data[data-type="H"] {
  background-position: -21px -80px;
}

.sb-icon-data[data-type="4G"] {
  background-position: -42px -80px;
}

.sb-icon-data[data-type="3G"] {
  background-position: -63px -80px;
}

.sb-icon-data[data-type="E"] {
  background-position: -84px -80px;
}

.sb-icon-data[data-type="2G"] {
  background-position: -105px -80px;
}

.sb-icon-data[data-type="circle"] {
  background-position: -126px -80px;
}

.sb-icon-flight-mode {
  background-position: 0 -40px;
}

.sb-icon-signal[data-level="-1"][data-searching="true"] {
  background: url('images/signal-searching.gif') no-repeat;
  background-position: 0 0;
}

.sb-icon-signal[data-level="-1"] {
  background-position: -21px -40px;
}

.sb-icon-signal[data-emergency="true"],
.sb-icon-signal[data-level="0"] {
  background-position: -42px -40px;
}

.sb-icon-signal[data-level="1"] {
  background-position: -63px -40px;
}

.sb-icon-signal[data-level="2"] {
  background-position: -84px -40px;
}

.sb-icon-signal[data-level="3"] {
  background-position: -105px -40px;
}

.sb-icon-signal[data-level="4"] {
  background-position: -126px -40px;
}

.sb-icon-signal[data-level="5"] {
  background-position: -147px -40px;
}

.sb-icon-signal {
  /* default icon is the "no sim" icon */
  background-position: -147px -80px;
  position: relative;
}

.sb-icon-signal[data-roaming="true"]::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 5px;
  top: 0;
  left: 0;
  background: url('images/icons.png') no-repeat;
  background-position: -168px -40px;
}

.sb-icon-network-activity {
  background: url('images/network-activity.gif') no-repeat;
  background-position: 0 0;
}

.sb-icon-headphones {
  background-position: -189px -40px;
}

.sb-icon-geolocation {
  background-position: -231px -40px;
}

.sb-icon-geolocation[data-active="true"] {
  background-position: -210px -40px;
}

.sb-icon-recording {
  background-position: -273px -40px;
}

.sb-icon-recording[data-active="true"] {
  background-position: -252px -40px;
}

.sb-icon-alarm {
  background-position: -294px -40px;
}

.sb-icon-tethering {
  background-position: -126px -60px;
}

.sb-icon-tethering[data-active="true"] {
  background-position: -105px -60px;
}

.sb-icon-bluetooth {
  background-position: -252px -60px;
}

.sb-icon-bluetooth[data-active="true"] {
  background-position: -231px -60px;
}

.sb-icon-mute {
  background-position: -273px -60px;
}

.sb-icon-mute.vibration {
  background-position: -210px -60px;
}

.sb-icon-usb {
  background-position: -294px -60px;
}

.sb-icon-notification {
  background: #000;
  width: 32px;
  position: relative;
}

.sb-icon-notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;

  background: url('images/icons.png') no-repeat;
  background-position: -189px -60px;
}

*[dir=rtl] .sb-icon-notification::before {
  right: 0;
  left: auto;
}

.sb-icon-notification[data-unread="true"]::before {
  background-position: -168px -60px;
}

.sb-icon-notification::after {
  content: attr(data-num);
  position: absolute;
  color: #666;
  width: 16px;
  height: 16px;
  top: -2px;
  right: 0;
  padding: 0 1px;
  font-size: 1.49rem; /* 6.5pt */
}

*[dir=rtl] .sb-icon-notification::after {
  right: auto;
  left: 0;
}
.sb-icon-notification[data-unread="true"]::after {
  color: #27b9cf;
}

.sb-icon-sms {
  background-position: -147px -60px;
  position: relative;
}

.sb-icon-sms::before {
  content: attr(data-num);
  position: absolute;
  color: #000;
  top: 4px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.15rem; /*5pt  was 8px */
}

/* JW: should we show how many current download we have
 * as in sb-icon-ms or sb-icon-notification ? */
.sb-icon-system-downloads {
  /* JW: waiting for the correct icon; in the mean time I made this one */
  background: url('images/system-downloads.gif') no-repeat;
  background-position: 0 0;
}

.sb-icon-call-forwarding {
  /* Waiting for the correct icon. In the mean time we use this one. */
  background: url('images/call-forwarding.png') no-repeat;
  background-position: 0 0;
}