CSS Style for Table

The rules are applied, but overwritten by the template again because how CSS works. The template has a rule which is set in joomla.css. It is loaded earlier so the priority I said before isn't the issue here. template.css should override it. However there is another priority in CSS: The more detailed rules have priority over more generic ones. The one in joomla.css says: which is applied to each cell of the table, not the whole table. Thus it overwrites our more generic table rule.

So you should adjust your rules to
As said before, using the browser built in developer tools are a big help with this kind of stuff

Of course you could also edit the joomla.css directly and just change the colors there without restricting it to SermonSpeaker only. It would affect every table output by components. Since you seem to have a dark background on the whole site, this would probably fix every table you possibly have on your site.

The player on the other hand is probably a whole other issue. I didn't look at it yet closer.

Thanks for the information. I am going to look into this closer later today.

I also just noticed that the player being completely black does not appear to be an issue in Firefox, but in IE it is.

The player doesn't work in FireFox either. It just displays different.
The reason is that your first sermon is corrupt: it points to a non-existant file: kairos.goldenhills.org/kairos.goldenhill...4-3-2012-197kBit.mp3

It should be:
kairos.goldenhills.org/media/audio/sermo...4-3-2012-197kBit.mp3

More about....... CSS Table Styling

Mercal