CSS: Place child element "underneath" parent element's inset box shadow?

Question

Please see this fiddle, or the code below:

http://jsfiddle.net/MegaMatt3/92G6X/9/

HTML:

<div id="outer">
    <div id="inner"></div>
</div>

CSS:

#outer {
    border: 1px solid black;
    box-shadow: 0 0 20px rgba(0, 0, 0, 1) inset;
    height: 200px;
    position: relative;
    width: 200px;
}

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

If I have a parent element, with an inset box shadow, and a child element inside it, the child element appears over top of the box shadow. I'd like for the child element to be "underneath" the box shadow, if possible. The effect would essentially show the inset box shadow on top of the child element.

I've messed with the z-index, but with no luck. Is this possible? Any help would be much appreciated. Thanks.

EDIT:

This question is kind of a mess now, but my original question should have indicated that I'm looking for a solution that works when the outer div has a non-transparent background. I've updated my original fiddle and code to reflect this scenario. The other answers here are valid, but the one I've marked as correct works for me in that scenario.

Answer 1

Another solution that works with non transparent backgrounds: Set the shadow on a pseudo element

CSS

#outer {
    border: 1px solid black;
    height: 200px;
    position: relative;
    width: 200px;
    background-color: white;
}

#outer:after {
    content: "";
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
}

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

demo