CSS for Legend doesn't work correctly

[EricPfirman]

The Legend widget doesn't seem to be reading all of the style settings. In the sample below, it sets the background-color correctly, but not the font-size, font-style or color. Is this a bug?

<style type="text/css">
    .esriLegendGroupLayer
    {
     background-color:Blue
    }
    .esriLegendLayer
    {
     background-color:Silver;
     font-size:xx-small;
     font-style:italic;
     color:Green
    }
    .esriLegendLayerLabel
    {
     background-color:Gray;
     font-size:xx-small
    }
    .esriLegendService
    {
     display:none;
     background-color:transparent
    }
    .esriLegendServiceLabel
    {
     display:none;
        background-color:transparent
    }
</style>
...
    function showLegend() {
        var legend = new esri.dijit.Legend({ map: map }, "legendDiv");
        legend.startup();
    }

[MattLane]

If you are overriding esri's css and it isn't working, you can try adding !important to the styles.

For example

.esriLegendLayer
{
  background-color:Silver;
  font-size:xx-small !important;
  font-style:italic !important;
  color:Green !important;
}

[EricPfirman]

The !important did not have any effect.

[RamaChintapalli]

Eric,

I was able to override the legend dijit CSS. See the attached sample and screenshot.