title: OpenLayers CSS Styling of Standard Control Buttons
body: <p>I'm using OpenLayers on a script on my page, and I'm trying to use CSS to style the standard buttons that come on the map.  I followed the OpenLayers docs site in styling them like so:</p>
  
  <pre><code>.olControlNavToolbar div {
    display:block;
    width:  28px;
    height: 28px;
    top: 300px;
    left: 6px;
    position: relative;
  }
  .olControlNavToolbar .olControlNavigationItemActive {
    background-image: url("img/panning-hand-on.png");
    background-repeat: no-repeat;
  }
  .olControlNavToolbar .olControlNavigationItemInactive {
    background-image: url("img/panning-hand-off.png");
    background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>But no matter which CSS settings I change in the above code, nothing changes on the map.</p>
  
  <p>Does anyone have any ideas as to how I can style (move/resize/modify) the existing/default OpenLayers buttons that appear on a given map?</p>