Hi everyone,

I'm trying to use css to create a drop shadow effect behind my layout. Before starting on the drop shadow I had everything contained in a wrapper div which correctly centered the layout within the browser window. I've since tried nesting the wrapper in another two divs to try to create the drop shadow effect but when I do this the layout shifts to the left of the browser window and only part of the drop shadow is appearing.

I've uploaded the page to this address:

http://www.officelinkonline.com.au/test/

and the css is at this address:

http://www.officelinkonline.com.au/test/main.css

Just wondered if someone wouldn't mind taking a look to see what might be happening?

The css relating to the shadow is as follows:

.alpha-shadow {
width: 770px;
margin:0 auto;
position: relative;
background: url(images/dropShadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.alpha-shadow div.shadowInner {
background: url(images/shadowPNG.png) no-repeat left top !important;
background: url(images/shadowGIF.gif) no-repeat left top;
padding: 0px 5px 10px 0px;
}

Would really appreciate any help.