box-shadow z-index craziness

If you take a peek at the attachment, you can imagine my dilemma. This main window has a box shadow, but it fades away as it gets closer to the top. I don't want to use images. That would suck.

So, I used CSS gradients, generated content, and some z-index trickery.

The main content window (.main-content) has a box-shadow (around the whole thing). I then put another div (.main-content-inner) inside that.

On the body, I placed the repeating background pattern and then used generated content (body:after) to create an absolutely-positioned full-screen CSS3 gradient that starts white at the top and fades out. I then z-indexed the gradient on top of .main-content window. I then z-indexed .main-content-inner on top of the gradient. Therefore, the content is now on top of the fading gradient while the box shadow appears to fade.

Whew!