title: jquery tablesorter CSS arrow icons
body: <p>This is really more of a CSS question than a jQuery question.  I'm using the tablesorter jQuery plugin to sort tables dynamically.</p>
  
  <p>Here's what it looks like currently:
  <img src="https://i.stack.imgur.com/nAmy8.png" alt="enter image description here"></p>
  
  <p>Here's the CSS code that I'm using:</p>
  
  <pre><code>th.sortable{
      font-weight: bold;
      cursor:pointer;
      background-repeat: no-repeat;
      background-position: center right;
  }
  
  th.headerSortUp {
      background-image: url("arrow-up.gif");
  }
  th.headerSortDown {
      background-image: url("arrow-down.gif")
  }
  </code></pre>
  
  <p>The problem that I have with the current implementation is that the arrow is way over on the right of the header.  In the above example, the table is being sorted by level, but it almost looks like it could be by location.</p>
  
  <p>Is there an easy way to move the arrow over to the left, so it's directly to the right of the end of the "level" label?</p>