Customizing category menu bar with different images for every item

Hello Flynn!!
First of course thank you and congratulations for this amazing theme. I have just made a little contribution to mean it. I´ve been tweaking it for a while with the help of this forum reading other people posts, but now I´ve got stuck. I have to say I am a complete newby in php, coding and all that stuff, but I know how to cut and paste and follow instructions, hehehe! So this is our blog:
http://www.geoparadise.org/blog

I was trying to have a category menu bar that shows different color backgrounds and icons for each category item and the link text under it. In hover state would be the same background, but only changing the text color. All the tabs with the same width (around 100px)

I tried first to put an horizontal bar1 with all the icons and background colors on top of the category bar, but I found it a bit tricky to match the exact sizes of both bar tabs and also, I want them both centered. So I did well with the category bar, following your instructions on another post to do the same thing with the pages menu bar (making a table in the bfa_header_config.php file) and somehow it worked perfectly (at least in my safari). After that, I hadnt got a clue how to center the horizontal bar.

So I decided to change my strategy, get rid of the horizontal bar1 and try to insert the background with the image for each cat-item, making them high enough to fit text at the bottom (62 px),
and following an explanation I found in this post http://forum.bytesforall.com/showthread.php?t=644 and changing page-item for cat-item. I did it for the first tab (cat-item-1), stating the new height and text alignment like this:

ul.rMenu li a {
width: 99px !important;
height: 62px !important;
text-align: bottom center !important;
}
ul.rMenu li.cat-item-1 a:link,
ul.rMenu li.cat-item-1 a:visited,
ul.rMenu li.cat-item-1 a:active,
ul.rMenu li.cat-item-1 a:hover {
background: url(/blog/wp-content/themes/atahualpa332/images/geo.jpg) no-repeat !important;
}

and I found three problems.

1.- The sub-categories had gone same size as the parents (62px high) which doesn´t look good.
2.- The sub-category "Travels" with no children is showing the icon and background also.
3.- Text has not gone to the bottom.

I would like the sub-categories to have the same background color of the parent category, but no icon and smaller size. By the way: Is it possible to make the fonts smaller in them?

Also, I have to say that before all this I have deleted the arrows and the padding for them.

Could you please give me an advice of the best option to get the results I need?
Thanks in advance
Noa

GeoParadise