title: Customizing jQuery theme, but some CSS is not being applied
body: <p>I am customizing a jQuery theme to add custom icons for some buttons. Here is a jsfiddle - <a href="http://jsfiddle.net/Apeksha82/nctPc/2" rel="nofollow">http://jsfiddle.net/Apeksha82/nctPc/2</a> (My custom CSS definitions are at the bottom)</p>
  
  <p>What I have done is taken some CSS definitions which were already there, and made them more specific like so: </p>
  
  <pre><code>.black-tie .lnkHeader .ui-state-hover .ui-icon, .black-tie .lnkHeader .ui-state-focus .ui-icon {
  background-image: url("http://jqueryui.com/resources/images/themeroller/st-stephens.jpg");
  </code></pre>
  
  <p>}</p>
  
  <p>"lnkHeader" is a class defined by me. Some of my custom styles are not being applied and I cannot figure out why. e.g. </p>
  
  <p><code>.black-tie .lnkHeader .ui-icon .menu-home {
      background-position: 50px 50px;
  }</code></p>
  
  <p>I have made sure the button has all these classes either assigned to itself or to its parents. I have tried switching around the order of the classes in the CSS definition file. If I remove "lnkHeader" from the above definitions, the CSS for hover image works, but background-position and margin still does not. </p>
  
  <blockquote>
    <p><code>.black-tie .lnkHeader .ui-icon .menu-newPage {
        background-position: 10px 10px;
    }
    .black-tie .lnkHeader .ui-button-text-icon-primary .ui-icon, .black-tie .lnkHeader .ui-button-text-icons .ui-icon {
        margin-top: -14px;
    }</code></p>
  </blockquote>
  
  <p>I need lnkHeader to be part of the definition so that my customizations do not affect other buttons.</p>
  
  <p>I believe I have considered the two factors that affect CSS - inheritance &amp; specificity, in the way I have defined my custom CSS. But obviously I am missing something. Please help. TIA!</p>