title: JQuery UI Tabs - How to prevent styles being applied to content within tabs?
body: <p>I have implemented the JQuery UI tabs and they work great, except for one problem...</p>
  
  <p>All my content's styles / classes are being overriden by JQuery's, which I do not want to happen.For example, I have a text box:</p>
  
  <pre><code>&lt;input type="text" id="profileFirstName" name="profileFirstName" class="textMedium" /&gt;
  </code></pre>
  
  <p>If I inspect the styles in Firebug, I see this (in this order):</p>
  
  <pre><code>.ui-widget :active {
  outline:medium none;
  }
  
  .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family:Verdana,Arial,sans-serif;
  font-size:1em;
  }
  
  input.textMedium {
  width:200px;
  }
  </code></pre>
  
  <p>As you can see, JQuery has added the ui-widget styles before my own, thus overriding mine.</p>
  
  <p>It is doing this everywhere I have implemented the tabs. How do I set it GLOBALLY so that its styles don't override mine?? I do not want any of the jquery styles affecting the tabbed content.</p>
  
  <p>I suppose I could override their ui-widget styles and put nothing under the definitions? But I would like to know if there is a cleaner way so that their ui-widget styles don't get applied at all.</p>
  
  <p>Thanks in advance!</p>