Over-riding with extra.css

I've added the following to extra.css to try and override the defaults but it's not working.

Code:

/*Showcase*/
    .showcaseItemContainer {
        border: 1px solid @primaryLighterStill;
        border-radius: 5px;
        /*margin: 1em 1em 1em 1em !important;*/
        margin: 3px !important;        
        background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        overflow: hidden; zoom: 1;        
        padding: 5px;        
    }

        .showcaseItemImage {}
        
            .boxModelFixer {
                overflow: hidden; zoom: 1;
                margin-bottom: 10px;
                margin-right: 0px;
                padding: 0px;                
                background-color: @contentBackground;
                border: 1px solid @primaryLighterStill;
                border-radius: 5px;
                text-align: center;
                width:220px;
            }

                .Thumbnail
                {
                    width: 222px;
                    height: 154px;
                    line-height: 112px;
                    display: block;
                    background: @content.background-color;
                    border: 0px solid @primaryLighterStill;
                    text-align: center;
                    vertical-align: middle;
                    float: left;
                }
                
                    .Thumbnail img
                    {
                        max-width: 222px;
                        max-height: 300px;
                        _width: 150px;
                        _height: 100px;
                        padding: 0;
                        margin: 0;
                        vertical-align: middle;
                    }
           
        .showcaseItemInfo {}

            .showcaseItemTitle {
                padding-bottom: 5px;
                overflow: hidden;
                white-space: nowrap;
            }

            .showcaseItemMessage{
                /*padding-bottom: 5px;*/
                height:20px;
                overflow: hidden;
            }

In firebug I see the following:



It seems that it's taking the default values and not showing my edited changes. I assume there's an easier way than marking every one as "important!"?

Cheers

 

Won't the cause problems when it's upgraded in the future?