title: CSS inheritance issue
body: <p>I have one stylesheet (layout.css) that imports the following CSS at the top of the style sheet:</p>
  
  <pre><code>@import "reset.css";
  @import "typography.css";
  @import "forms.css";
  @import "fonts/fonts.css";
  @import "tablecloth.css";
  </code></pre>
  
  <p>Everything seems to be in order apart from that blasted typography style sheet. What I mean by that is when I apply a style to, say, a paragraph, the only styles applied to it are taken from the tyopgraphy style sheet.</p>
  
  <p>Example:</p>
  
  <p>Applied in layout.css:</p>
  
  <pre><code>#three-col-container #right-col.filter p.more { color: #ff0000; font-size: 1.2em; }
  </code></pre>
  
  <p>What Inspector is telling me is applied (these styles are included in the typography style sheet):</p>
  
  <pre><code>p { font-size: 1em; color: #444; }
  </code></pre>
  
  <p>I've never came across this sort of inheritance issue. The other style sheets are working as expected.</p>
  
  <p>Any suggestions welcome. </p>
  
  <p>Thanks.</p>