TinyMCE Templates (Remo's Tutorial)

Permalink
I've had success in the past with Remo's tutorial located here:http://www.codeblog.ch/2010/06/concrete5-using-tinymce-templates/co...

But, today, for some reason, the magic escapes me. Even though I add a template in TinyMCE with the following HTML:

<!-- This will not be inserted -->
<div class="mceTmpl">
<div id="#secondaryMainContent">
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="395"><a name="tiered" id="tiered"></a>
<h1>Tiered Giving Levels</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis fringilla neque. Morbi aliquet tempor neque nec euismod. Aliquam risus quam, accumsan vitae porttitor sit amet, faucibus ac mi. Sed et mauris lectus, ut tempus enim. <a href="#">Read More ></a></p></td>
<td width="20">&nbsp;</td>
<td width="235"><img src="<?=$this->getThemePath()?>/images/tiered-giving-levels.jpg" alt="tiered giving levels" /></td>
</tr>
</table>
</div>
</div>

And then my CSS has all the styling for those elements under #secondaryMainContent , it only picks up SOME of the styles. It just ignores the <a href> link styling completely. Apparently, something about being spit out through TinyMCE screws it up, but I can't figure out what.

My CSS looked like this:

#secondaryMainContent {float:left; margin:25px 0px;}
#secondaryMainContent h1 {font:normal 18px/22px 'ArvoRegular', Georgia, Times; color:#428ccd;}
#secondaryMainContent p {font:normal 12px/24px Arial, Helvetica, sans-serif; color:#000; margin-bottom:20px;}
#secondaryMainContent img {margin-bottom:20px;}
#secondaryMainContent a {color:#999;}
#secondaryMainContent a:hover {padding:5px; color:#fff; background-color:#7eb6e7;}
#secondaryMainContent a:visited {color:#999;}