.olControlPanel {
    margin: 0px 60px;
    padding: 2px 0px 2px 0px;
    background-color: #fff;
    border-right: solid 1px #999;
    border-bottom: solid 1px #999;
}
.olControlPanel div { 
    display:block;
    width:  24px;
    height: 24px;
    float: left; /* remove this if you want a vertical toolbar  */
    margin: 0px 2px 0px 2px;
}    

.olControlPanel .olControlPanMapItemActive { 
    background-image: url("./img/pan-on.png");
}
.olControlPanel .olControlPanMapItemInactive { 
    background-image: url("./img/pan-off.png");
}
.olControlPanel .olControlZoomBoxItemInactive { 
    background-image: url("./img/drag-rectangle-off.png");
}
.olControlPanel .olControlZoomBoxItemActive { 
    background-image: url("./img/drag-rectangle-on.png");
}
.olControlPanel .olControlZoomOutBoxItemActive {
    background-image: url("./img/zoom_out_on.png");
}
.olControlPanel .olControlZoomOutBoxItemInactive {
    background-image: url("./img/zoom_out_off.png");        
}
.olControlPanel .olControlMeasureItemInactive {
    background-image: url( "./img/distance_off.png" );
}
.olControlPanel .olControlMeasureItemActive {
    background-image: url( "./img/distance_on.png" );
}
.olControlPanel .olControlMeasureAreaItemActive {
    background-image: url( "./img/area_on.png" );
}
.olControlPanel .olControlMeasureAreaItemInactive {
    background-image: url( "./img/area_off.png" );
}