.olControlPanel div {
          display:block;
          width:  28px;
          height: 28px;
          background-color:transparent;
          background-repeat:no-repeat;
          background-position:center;
        }


        .olControlPanel .olControlNavigationItemActive {
          background-color: red;
          background-image: url("pan.png");
        }
        .olControlPanel .olControlNavigationItemInactive {
          background-image: url("pan.png");
        }
        .olControlPanel .olControlDragPanItemActive {
          background-color: red;
          background-image: url("pan.png");
        }
        .olControlPanel .olControlDragPanItemInactive {
          background-image: url("pan.png");
        }
        .olControlPanel .olControlZoomBoxItemInactive {
          background-image: url("drag-rectangle.png");
        }
        .olControlPanel .olControlZoomBoxItemActive {
          background-color: red;
          background-image: url("drag-rectangle.png");
        }
        .olControlPanel .olControlZoomOutItemInactive {
          background-image: url("zoom-out.png");
        }
        .olControlPanel .olControlZoomOutItemActive {
          background-color: red;
          background-image: url("zoom-out.png");
        }
        .olControlPanel .olControlSelectBoxItemInactive {
          background-image: url("identify.png");
        }
        .olControlPanel .olControlSelectBoxItemActive {
          background-color: red;
          background-image: url("identify.png");
        }
        .olControlPanel .olControlZoomToMaxExtentItemInactive {
          background-image: url("mn.png");
        }