Skinning UI Shell selected Tabs

Question

Hello everybody. I've been skimming through the net a while for a simple but yet annoying problem.
We've built our webapp based on the UI Shell architecture: http://www.oracle.com/technetwork/developer-tools/adf/uishell-093084.html
Everything works great and our styles are fine as well, but there is one small problem. Older monitors lack contrast, so our tabs are not distinguishable from the background.
http://img211.imageshack.us/img211/5184/pic1sn.png
http://img140.imageshack.us/img140/171/pic2md.png
As you can see, I've tried to work with the style sheet and set the panelTabbed background color to Orange. It shows up(very ugly) on the wrong tab. The "main" tab isn't rendered this way. So obviously my skinning didn't apply to this one.
This is the root tag of the .jspx file: +<af:document id="d1" theme="dark">+
This is in my customCSS file:
af|panelTabbed::tab:selected
+{+
color:Yellow;
background-color: Orange;
cursor: crosshair;
+}+
Any ideas, why only the one tab renders the orange, the main one however doesn't?

Answer 1

Okay so I made some progress with this but still can't quite figure out exactly how to get the look I want.
I modified the .css file:
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-start{
background-color: red;
However it doesn't set the tab itself to be red but rather the area behind the tab. It doesn't do anything if I set color:red;
This is how it looks atm:
http://img211.imageshack.us/img211/6329/tabbed.png
As you can see, the red isn't supposed to be behind the tab but rather the selected tab itself should be red. I know I will have to set tab-content and tab-end as well, but thats not whats important.
Here's also a firebug screenshot:
http://img819.imageshack.us/img819/426/firebugh.png
Any ideas how to get the "tab content background" or whatever one should call it to be skinned?
Any help is greatly appreciated!
Thanks,
Pascal