title: jQuery multiple themes on one page
body: <p>This is driving me NUTS! I've followed the post here which just doesn't seem to be working:
  <a href="http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/" rel="noreferrer">http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/</a></p>
  
  <p>I have a base theme, for examples sake it's the Smoothness theme from the jQuery UI gallery. Then I have a 'red' theme which basically colours the buttons red. <a href="http://jqueryui.com/themeroller/#ffDefault=Arial%2C+Verdana%2C+Lucida+Grande%2C+Lucida+Sans%2C+sans-serif&amp;fwDefault=bold&amp;fsDefault=11px&amp;cornerRadius=4px&amp;bgColorHeader=5c9ccc&amp;bgTextureHeader=03_highlight_soft.png&amp;bgImgOpacityHeader=55&amp;borderColorHeader=4297d7&amp;fcHeader=ffffff&amp;iconColorHeader=d8e7f3&amp;bgColorContent=fcfdfd&amp;bgTextureContent=04_highlight_hard.png&amp;bgImgOpacityContent=100&amp;borderColorContent=a6c9e2&amp;fcContent=222222&amp;iconColorContent=469bdd&amp;bgColorDefault=cd0a0a&amp;bgTextureDefault=03_highlight_soft.png&amp;bgImgOpacityDefault=75&amp;borderColorDefault=8E0404&amp;fcDefault=ffffff&amp;iconColorDefault=6C0303&amp;bgColorHover=cd0a0a&amp;bgTextureHover=03_highlight_soft.png&amp;bgImgOpacityHover=85&amp;borderColorHover=8E0404&amp;fcHover=ffffff&amp;iconColorHover=6C0303&amp;bgColorActive=f5f8f9&amp;bgTextureActive=06_inset_hard.png&amp;bgImgOpacityActive=100&amp;borderColorActive=79b7e7&amp;fcActive=141f48&amp;iconColorActive=f9bd01&amp;bgColorHighlight=fbec88&amp;bgTextureHighlight=01_flat.png&amp;bgImgOpacityHighlight=0&amp;borderColorHighlight=fad42e&amp;fcHighlight=363636&amp;iconColorHighlight=2e83ff&amp;bgColorError=fef1ec&amp;bgTextureError=01_flat.png&amp;bgImgOpacityError=95&amp;borderColorError=cd0a0a&amp;fcError=cd0a0a&amp;iconColorError=cd0a0a&amp;bgColorOverlay=000000&amp;bgTextureOverlay=01_flat.png&amp;bgImgOpacityOverlay=100&amp;opacityOverlay=65&amp;bgColorShadow=aaaaaa&amp;bgTextureShadow=01_flat.png&amp;bgImgOpacityShadow=0&amp;opacityShadow=60&amp;thicknessShadow=6px&amp;offsetTopShadow=-6px&amp;offsetLeftShadow=-6px&amp;cornerRadiusShadow=8px" rel="noreferrer">Here is the theme I created</a>.</p>
  
  <p>So I go to download my theme. Choose Advanced settings, set the scope to 'red' and my theme folder name to 'red' and download. First of all I'm not entirely 100% sure which folder I'm to copy over to my project is it the 'development-bundle\themes' folder (which contains my red folder) or the '\css\red' folder?</p>
  
  <p>I've tried both. The post above seems to suggest if I copy my themes folder and link to my theme in the css it'll work when I add a class of 'red' to a wrapper div or element. So I've linked the themes like so in my file:</p>
  
  <pre><code>&lt;link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /&gt;
  &lt;link type="text/css" href="themes/red/jquery.ui.all.css" rel="stylesheet" /&gt;
  </code></pre>
  
  <p>The base theme loads and works all honkey doorey but the red theme doesn't. I've got a button styled like so:</p>
  
  <pre><code>&lt;input type="submit" id="btn" value="A submit button" class="red" /&gt;
  </code></pre>
  
  <p>I've also tried:</p>
  
  <pre><code>&lt;div class="red"&gt;
      &lt;input type="submit" id="btn" value="A submit button" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Neither work. When I remove the 'themes/base/jquery.ui.all.css' css file link the button's aren't styled at all. Crazy! I'm pulling my hair out. Where am I going wrong? Surely they should just make it easy enough to download JUST the theme folder and reference the ui.all file.</p>