[SOLVED] Recent Stories Block styling iN Shingami Blue

Hi all, I've been tweaking Lazuli's awesome Shingami Blue layout for my 3.2 efiction.  Ran into a snag and I'm all out of ideas of what to look for and try.  What I'm trying to do is have my Recent Stories block list the recently added in a single table.  What's happening right now is the table is created for each story.  You can see what I'm talking about here:

http://www.donnieyen.us/library/index.php [select Shingami_Blue, it's not default and I've unhidden it for people to see what I'm talking about]

The block is set to use .tpl. My index.tpl is this:

<!-- INCLUDE BLOCK : header -->
<!-- Welcome message -->
<div class="welcome">{welcome}</div>
<!-- End Welcome message -->

<p>&nbsp;</p>

<!-- News Area begins here, little tables inside a div container.  -->
<div id="newsArea">
<!-- begin news Block -->
{news_content}
<p>&nbsp;</p>
<!-- End news Block -->
</div>
<!-- News Area Ends here -->

<!-- START BLOCK : recentblock -->
<div id="recentArea">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">Recently Added Stories</th>
  </tr>
  <tr>
    <td style="padding:5px"><ul>
<div class="">
<div class="title">{title} by {author}  {roundrobin}  [{reviews} - {numreviews}] {new} </div>
<div class="content"><span class="label">Summary: </span>{featuredstory}{summary}<br />
<span class="label">Rated:</span> {rating} {score}<br />
<span class="label">Categories:</span> {category} <br />
<span class="label">Characters: </span> {characters}<br />
{classifications}
<span class="label">Series:</span> {serieslinks}<br />
<span class="label">Chapters: </span> {numchapters} {toc}<br />
<span class="label">Completed:</span> {completed}  
<span class="label">Word count:</span> {wordcount} <span class="label">Read Count:</span> {count}
<span class="label"> Published: </span>{published} <span class="label">Updated:</span> {updated} </div>
</div>
</ul></td>
  </tr>
</table>

</div>
<!-- END BLOCK : recentblock -->

<!-- End main content -->
<!-- INCLUDE BLOCK : footer -->

My variables.php is this:

<?php
/* Shinigami Blues variables */
/* Note to self: 0 = off; 1 = header; 2 = index */

$blocks["login"]["status"] = '1';
$blocks["random"]["status"] = '0';
$blocks["recent"]["status"] = '2';
$blocks['recent']['tpl'] = 2;
$blocks["featured"]["status"] = '0';

$blocks["info"]["status"] = '1'; 
$blocks["info"]["style"] = '0';

$blocks["news"]["status"] = '2';
$blocks["news"]["tpl"] = '2';

$blocks["categories"]["status"] = '1';
$blocks["categories"]["columns"] = '0';
$blocks["categories"]["template"] = "{link} [{count}]";
$blocks["categories"]["tpl"] = '0';

/* Menu #1, under the navigation header 
$blocks["menu"]["content"] = array(0 => 'home', 1 => 'members', 2=> 'search', 3 => 'tens', 4 => 'help', 5 => 'contactus', 6 => 'login', 7 => 'logout', 8 => 'adminarea');
$blocks["menu"]["style"] = 0;*/
$blocks["menu2"] = array("status" => "1", "file" => "menu/menu.php", "style" => 1, "content" => array (0 => 'recent', 1=> 'titles', 2 => 'catslink', 3 => 'series', 4 => 'authors', 5 => 'challenges',));
$blocks["menu2"]["style"] = 0;
$blocks["menu3"] = array("status" => "1", "file" => "menu/menu.php", "style" => 1, "content" => array (0 => 'tos', 1=> 'contactus', 2 => 'rules', 3 => 'help',));
$blocks["menu3"]["style"] = 1;

/* NEW & UPDATED STORY INDICATORs
Styled: Plain text surrounded with the superscript HTML tag with font-size set to extra small and italic.*/
$new = "<sup style='font-size:xx-small;font-style:italic'>New!</sup>";
$newupdate = "<sup style='font-size:xx-small;font-style:italic'>Updated!</sup>";
?>

and the css that controls it is this:

/* Main content Styles __________________________________ */

.monthFeatures {
border: 1px solid #C0C0C0;
width:50%;
margin:10px;
float:right;
}

.monthFeatures TH {
color: #FFF;
font-size:12px;
background-color: #4E6394;
height:25px;
line-height:25px;
text-align:left;
}

.monthFeatures TD {
height:180px;
overflow:scroll;
}

#newsarchive {
text-align:center;
}

#newsArea {
width:50%;
margin:10px;
padding:2px;
float:right;
}

#newsArea TABLE {
border: 1px solid #C0C0C0;
margin-bottom:15px;
}

#newsArea TH {
color: #FFF;
font-size:12px;
background-color: #4E6394;
height:25px;
line-height:25px;
}

.newsOptions {
font-size:9px;
color: #fff;
background-color: transparent;
font-weight:normal;
vertical-align:bottom;
text-align:right;
margin-right:3px;
}

.newsOptions A:link, .newsOptions A:visited {
text-decoration:none;
color: #fff;
background-color: transparent;
}

.newsOptions A:hover, .newsOptions A:active {
text-decoration:underline;
}

#newsArea .newsTitle {
text-align:center;
float:left;
padding-right:10px;
padding-left:2px;
}

#newsArea .newsDate {
text-align:right;
float:left;
font-weight: normal;
font-size:xx-small;
}
#newsArea OL, #newsArea UL {
padding:15px;
}

#newsArea P {
margin:7px 0 0 0;
text-indent:15px;
}

.pollArea {
border: 1px solid #C0C0C0;
width:40%;
margin:10px;
padding:2px;
float:left;
}

.pollArea #poll_question {
text-align:center;
font-weight:bold;
}

.pollArea #poll INPUT {
border: 1px solid #999999;
background-color:#244C87;
color:#BAD3ED;
font-family: verdana, helvetica, arial, tahoma, sans-serif;
font-weight: normal;

}

#recentArea {
border: 1px solid #C0C0C0;
width:40%;
margin:15px;
float:left;
clear:left;
}

#recentArea TH {
color: #FFF;
font-size:12px;
background-color: #4E6394;
height:25px;
line-height:25px;
text-align:left;
}

#recentArea TD {
margin:0;
padding:0;
}

#recentArea UL {
padding: 0 3px 0 3px;
margin:0;
}

any insight into why it's creating a table for each story like the news?  Appreciate any suggestions of things to try.  If I use  the recent_content tag and change the block to use default, it'll list in a single table, but I can't seem to style that similar to how it shows now.  I tried doing what Tammy had in the Tutorial section, but it wouldn't print out any of the variables [like title].