title: How to restyle the draggers of the SplitLayoutPanel in GWT UIBinder template
body: <p>can anyone tell me how I can change the style of the draggers in a UIBinder template for the SplitLayoutPanel.</p>
  
  <p>Here is my MainMenu.ui.xml:</p>
  
  <pre><code>&lt;ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
      xmlns:g="urn:import:com.google.gwt.user.client.ui"&gt;
      &lt;ui:style src="Resources/GlobalStyles.css" /&gt;
  
      &lt;g:SplitLayoutPanel width="100%" height="100%" styleName='{style.splitLayoutPanel}'&gt;
          &lt;g:north size="100"&gt;
              &lt;g:HTMLPanel/&gt;
          &lt;/g:north&gt;
          &lt;g:west size="250"&gt;
              &lt;g:HTMLPanel/&gt;
          &lt;/g:west&gt;
          &lt;g:center&gt;
              &lt;g:HTMLPanel/&gt;
          &lt;/g:center&gt;
          &lt;g:south size="50"&gt;
              &lt;g:HTMLPanel
                  styleName='{style.footerPanel}'&gt;
                  &lt;div&gt;
                      &lt;a href="#"&gt;Contact us&lt;/a&gt;
                      &lt;a href="#"&gt;Privacy&lt;/a&gt;
                      &lt;a href="#"&gt;About&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/g:HTMLPanel&gt;
          &lt;/g:south&gt;
      &lt;/g:SplitLayoutPanel&gt;
  
  &lt;/ui:UiBinder&gt;
  </code></pre>
  
  <p>The Resources/GlobalStyles.css looks like this:</p>
  
  <pre><code>body,table {
      font-size: small;
  }
  
  body {
      font-family: Helvetica, Arial, sans-serif;
      color: #000;
      background: #red;
  }
  
  .splitLayoutPanel { 
      .gwt-SplitLayoutPanel-HDragger { 
          background:#d0e4f6;
          cursor: col-resize;
      }
  
      .gwt-SplitLayoutPanel-VDragger {
          background: #d0e4f6;
          cursor: row-resize;
      }
  
  }
  
  .footerPanel {
      margin-left: 11px;
      padding: 10px;
      border-top: 2px solid #5693d6;
      text-align: right;
  }
  </code></pre>
  
  <p>What's wrong here? My draggers are not visible and there is no cursus change.</p>