CSS3 box-shadow for overlapping-like divs

I'm trying to achieve this effect with css3:

The HTML code is cleanly something like

...
<header>
    ...
</header>

<div id="wrapper">
    ...
</div>
...

and the css is, for the moment, something like

header {
    display: block;
    width: 900px;
    height: 230px;
    margin: 0 auto;
    border: 1px solid #211C18;
    ...
    box-shadow: 2px 4px 20px #005377;
    -moz-box-shadow: 2px 4px 20px #005377;
    -webkit-box-shadow: 2px 4px 20px #005377;
}

#wrapper {
    width: 820px;    
    margin: 0 auto;
    ...
    border-right: 1px solid #211C18;
    border-bottom: 1px solid #211C18;
    border-left: 1px solid #211C18;
    ...
    box-shadow: 2px 4px 20px #005377;
    -moz-box-shadow: 2px 4px 20px #005377;
    -webkit-box-shadow: 2px 4px 20px #005377;
}

In order to obtain the desired result, I need to:

1. Hide the top shadow of the main div (no problem with that)
2. Bring header's bottom shadow in front of the main div, and not behind as it is right now.

I've been reading a lot about box-shadow, and I haven't found a solution that really pleases me... Any idea?