title: CSS class doesn't seem to be inheriting/ overwriting properties correctly
body: <p>I'm working on a 'reset password' function for a VB.net application, where an admin user can reset the password for a user when they have been forgotten their password.</p>
  
  <p>The function currently works correctly, however, I now want to disable this 'reset password' button when the user's account is locked- as admin will have to unlock the account before they can reset the password, so disabling the 'reset password' button will give them a visual prompt that the account needs to be unlocked before the password can be reset.</p>
  
  <p>There is a CSS class for the type of button that the 'reset password' button is, called <code>mainsubmit</code>, and I want to inherit from this class to create one for a 'disabled reset password' button.</p>
  
  <p>The CSS currently is:</p>
  
  <pre><code>.mainsubmit {
      padding: 6px;
      font-size: 2.4em;
      width: 100%;
  }
  </code></pre>
  
  <p>and just below this, I've added:</p>
  
  <pre><code>.mainsubmit .disabledpasswordresetbutton {
      pointer-events: none;
      opacity: 0.5;
  }
  </code></pre>
  
  <p>In the VB, I have:</p>
  
  <pre><code>If lockedOutUser.IsLockedOut Then
      btnResetPassword.Enabled = False
      btnResetPassword.CssClass = "mainsubmit.disabledpasswordresetbutton"
  End If
  </code></pre>
  
  <p>However, when I now view the application in the browser, if the user's account is locked, the 'reset password' button is greyed out correctly, but it doesn't seem to have inherited the other properties of the <code>mainsubmit</code> CSS class- for some reason, it's much smaller than the other <code>mainsubmit</code> buttons that are also displayed on that page.</p>
  
  <p>Why hasn't the button belonging to <code>.mainsubmit .disabledpasswordresetbutton</code> inherited the size and other attributes from the <code>.mainsubmit</code> CSS class?</p>