sub-category images in css

Hi.

My goal is to render a background with rounded corners and matched font for the sub-category images. I found the class 'CategoryListBoxContents' but I suspect this will also change the top-level categories.

1. I would like to implement something like this:

#relevant_class{
text-align:center;
border-radius:3px 3px 0px 0px;
-moz-border-radius:3px 3px 0px 0px;
-webkit-border-radius:3px 3px 0px 0px;
background:url(../images/menu-bg2.gif) repeat-x right top #59890d;

here:

familynowDOTcaSLASHshop/index.php?main_page=index&cPath=55 (It'll be nice when my site is public so I can stop listing the URL like this!)

To be specific, I'm referring to the "And another Rice Pasta" with the green bg. The others we merely examples for my wife to choose from.

2. It appears to me that the current implementation forces an image rather than text. If I turn the text link back on can I simply modify that css(above) entry to get what I want perhaps?

Thank in advance for any assistance.

Okay. I've been working on this all morning...

Turns out my thought about turning text links back on and playing with that CSS was right. And that categoryListBoxContents doesn't change the top-level. So far so good except that I can't seem to figure out why there a break or line being rendered with a darker section at the bottom in the background img. I suspect this might be some trailing code for the initial text link but can't figure it out.

Back again...I appear to be chatting with myself. Anyway. In the interest of potentially helping someone else.

I've managed to work everything out with this:

/sub-cats/
.categoryListBoxContents {
background:url(../images/menu-bg2.gif) repeat-x right top #59890d;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
text-align:center;
vertical-align:center;
padding:15px 15px;
margin:5px 5px;
}
.categoryListBoxContents a {
color:#FFFFFF;
text-decoration:none;
text-transform:none;
text-align:center;
vertical-align:center;
font-weight:bold;
font-size:12px;
}

.categoryListBoxContents a:hover {
color:#0D474E;
}

.categoryListBoxContents img {visibility:hidden;}

/end sub-cats/

in stylesheet_main.css and it looks like this:

familynowDOTcaSLASHshop/index.php?main_page=index&cPath=47

Now I'm stuck at width:auto; somewhere in css and width:20%; auto generated at the browser level. This leaves me with 5 columns which wraps the last columns on the following rows. I want to enforce up to 4 columns max.

I don't think this one is going to come to me...I've been fooling around with this for hours...Help?

Well, it only took an entire day but I got it...

FYI

I copied ../common/tpl_columnar_display.php to my template dir and commented out the <br clear:both /> line

CORRECTION:

If you do the above you've break any sidebox that tries to display below. Changing this:

?>
<br class="clearBoth" />

to this:
?>

Seems to fix the colum/row display issue and still allows sideboxes/content below.