Styling Individual Widgets

[andoverit]

I need to style a series of widgets on a site so that they have a background image and text over the top. I have set them up but not sure where I am going wrong.

The example I am using is the About Us page as I can then (I think) sort the other pages out.

1. The background image is called "home-lower.jpg" and is located in (root)/images folder.
2. I've created a new full width sidebar called "header-lower-about" which sits just above the content.
3. The sidebar contains a text widget (text-25) so that the client call update the content as and when they want.

Each page has a seperate full width sidebar (eg. "header-lower-services" for the Services page) with a text widget so the client can update them. There may be a better way but this seems to be working okay apart from the styling.

The CSS code I am using for the "header-lower-about" sidebar is:

/* Header Lower About
------------------------------------------------------------ */

#header-lower-about #text-25 .textwidget {
    background-image: url(../../../images/header-lower.jpg)
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    padding: 0;
    width: 960px;
}

#header-lower-about .wrap {
    overflow: hidden;
    padding: 30px 25px 5px;
}

#header-lower-about p {
    padding: 0 0 15px;
}

.header-lower-about {
    float: left;
    padding: 0;
    width: 935px;
}

I am sure I am missing something obvious, but can't see what it is.

The site is using a JF3 plugin so to access the site you need to click here.