/* this is a div with ALL status icons
   NOTE: the icons follow a convention in their placement,
   top is "none", middle is "on", bottom is "off".
   In this way, they share the positioning rules*/
.status {
    height: 20px;
}
/* a single one of the actual icons */
.status .bg {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin: 0 0 0 2px;
    background-image: url(../images/status/icobg_20x20.png);
}
/* individual icons, each inside the .bg container */
.status .fg {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(../images/status/icons_20x20.png);
}
.gsm .fg, .gsm.fg {
    background-position: 0 -20px;
}
.ignition .fg, .ignition.fg {
    background-position: 0 -40px;
}
.accessory .fg, .accessory.fg {
    background-position: 0 -0px;
}
.battery .fg, .battery.fg {
    background-position: 0 -180px;
}

/* foreground image: battery indicator */
.battery.batt_5 .fg {
    background-position: 0 -60px;
}
.battery.batt_4 .fg {
    background-position: 0 -80px;
}
.battery.batt_3 .fg {
    background-position: 0 -100px;
}
.battery.batt_2 .fg {
    background-position: 0 -120px;
}
.battery.batt_1 .fg {
    background-position: 0 -140px;
}
.battery.batt_0 .fg {
    background-position: 0 -160px;
}
.battery.none .fg {
    background-position: 0 -180px;
}
.battery.bad .fg {
    background-position: 0 -200px;
}

/* background colors of icons */
.battery.batt_5, .live .bg.on {
    background-position: 0 -0px;
}
.battery.batt_4 {
    background-position: 0 -20px;
}
.battery.batt_3 {
    background-position: 0 -40px;
}
.battery.batt_2 {
    background-position: 0 -60px;
}
.battery.batt_1 {
    background-position: 0 -80px;
}
.battery.batt_0, .battery.bad, .live .bg.off {
    background-position: 0 -100px;
}
.live .bg.none {
    background-position: 0 -120px;
}