Horrible CSS

This is wrong.

<div class="wid200 text_right border_top pad3">
  <div class="clear">
   ...

Basically, authoring CSS like this is the same way people authored HTML before stylesheets. You are explicitly itemizing style hierarchically and ignoring encapsulation and the semantic bridge that CSS is meant to provide. If you prefer to code like this, You should probably actually write like this

<big>
 <big>
  <br>  <br>  <br>  <br>
  <font color=red>
   <strong>
    Markup like this, in circa 1996 style --- because when you are explicit 
    with every style declaration, you are doing the Exact Same  
    Thing.
   </strong>
  </font> 
  and I wrote code like this, it was the mid 90s ... I used Navigator 3.04 gold,
  and connected to the internet via 14400 bps. We've moved one.
 </big> 
 If you ever profess that you do "MVC" and then code like this, you are
 just using buzzwords and totally mistaken.  End of story.
</big>

Here is what a good piece of CSS would look like

<span class="profile cta container">
 <button onclick=dosomething()>Something</button>

The Most Important Thing here is to notice that the class does not dictate a layout or a style - it dictates a higher level, encapsulated, semantic meaning for the content. If you want consistency in layout, design, and theme; this is what it should look like. Then when you do your JS coding, using your fancy jquery, you do

$(".profile .cta button")

And you don't have to add an additional id tag to reference the section semantically. The principle here is simple:

De-couple, but do not de-correlate