how to set css to element in ui binder?

I want to set the background color to a decorator panel middle class of a GWT application. But how do I do that in the the UIBinder file?

I can set the css property in the css file of the GWT app but this will set all my decorator panels to the same color.

I think I'm confused on how does the CSS work in UiBinder. For now I've been doing this:

.test {
    background-color: #d0e4f6
}

    <g:north size="100">
        <g:DecoratorPanel addStyleNames="{styles.test}">
            <g:HorizontalPanel>
                <g:Label>NEW PROJ开发者_运维问答ECT</g:Label>
                <g:Label>Doe, John</g:Label>
            </g:HorizontalPanel>
        </g:DecoratorPanel>
    </g:north>

For the decorator panel, I can't figure out how to do this. Other properties work.

Thank you!

EDIT

GWT has defined style properties to set only the center of the decorator panel. But how to I apply it to a single panel in a UIBinder file?

.gwt-DecoratorPanel .middle, .gwt-DecoratorPanel .middle { background-color: blue; }

http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Hello_Stylish_World

Basically:

 <ui:style>
     .pretty { background-color: #d0e4f6 }
 </ui:style>

<g:north size="100">
    <g:DecoratorPanel>
        <g:HorizontalPanel addStyleNames="{style.pretty}">
            <g:Label>NEW PROJECT</g:Label>
            <g:Label>Doe, John</g:Label>
        </g:HorizontalPanel>
    </g:DecoratorPanel>
</g:north>