TabPanel within TabPanel styling

My app's layout consists of a TapPanel, which holds another TabPanel. I'd like to have the two TabPanels look differently. Following the GWT tutorial on applying styles I did the following:

TabPanel innerTabPanel= new TabPanel();
//carriersTabPanel.setSize("100%", "100%");
innerTabPanel.addStyleName("inner-tabPanel");


.gwt-TabPanel .inner-tabPanel{
    width: 100%;
    height: 100%;
}

This, however, did not have any effect whatsoever. Then I tried the following, but that didn't work either:

.inner-tabPa开发者_开发问答nel{
    width: 100%;
    height: 100%;
}

So how I can style the two panels separately?

Percentage values for width and height are relative to the parent, not the window. As w3schools notes, % "Defines the width in percent of the containing block".

If you want to see the effect of your rules, try setting the background-color or color CSS property instead. For instance, .inner-tabPanel { color: red} will set the color of the text in the inner tab panel to red, assuming there aren't any other conflicting rules. In this and all other CSS debugging situations, Firebug is the tool of first choice.