Estou tentando usar uma sombra projetada para fazer parecer que uma div (o cabeçalho) está "acima" de outra. meu problema é que a div "média" está cobrindo a sombra projetada. Eu tentei usar o z-index para colocar o cabeçalho div sobre o meio div, mas não está funcionando (a sombra ainda está sendo coberta). Quando faço uma pausa entre os divs, consigo ver a sombra e, portanto, sei que parte do código está funcionando corretamente. Eu tenho o seguinte código html:

<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>

e esse css:

#portal_header_light {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; text-align:center;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    padding: 0px 3px 0px 3px;
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);

    z-index:5;
}

#middle{
    height:308px;
    background-color:white;
    z-index:-1;
}

alguma ideia? obrigado.