Как наложить тень на картинку?

Добрый вечер!

Здесь попробую пояснить суть того, что есть и что не выходит.

HTML:

<ul id="sm" class="sm">
                    <li>
                        <div class="bg">
                            <div class="text">
                                текст <div class="s">текст</div>
                            </div>
                            <div class="line">
                              ещё текст
                            </div>
                            <div class="image_1">
                             
                            </div>                                
                        </div>
                    </li>
</ul>

CSS:

.image_1
{
    width: 340px;
    height: 259px;
    background-image: url('../images/01.jpg');
    position: absolute;
    z-index: 20 !important;
}

* {margin:0; padding:0}
.sm 
{
    list-style:none;
    width:962px;
    height:300px;
    display:block;
    overflow:hidden;
    margin: 0 auto;
    margin-left: 130px;
    margin-top: -27px;
    z-index: 200 !important;
    position: relative;
    box-shadow: 7px 8px 44px 3px #808080;
}

.sm li
{
    float:left;
    display:inline;
    overflow:hidden;
    position: relative;
}

.bg
{
    width: 100%;
    height: 340px;
    background-image: url('../images/accordion_shadow.png');
    background-repeat: no-repeat;
    background-position: 100% 0;
    float: right;
    z-index: 700 !important;
    position: relative;
}

.text
{
    height: 50px;
    width: 200px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    font-family: Tahoma;
    color: #453123;
    margin-left: 15px;
    margin-top: 10px;
}

.s
{
    color: #86bce0;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bolder;
}

В общем-то суть следующая.

В классе image_1 - картинка. Высота 259px. Высота тени (accordion_shadow.png) - 340px.

Вот здесь:

<div class="text">
                                текст <div class="s">текст</div>
                            </div>
                            <div class="line">
                              ещё текст
</div>

дополнительное пространство, как раз те 90px.

Нужно, чтобы тень проходила через это пространство и накладывалась на картинку.

Несмотря на то, что заданы z-index тень не накладывается на картинку.... помогите, где что не так написано?

Заранее всем благодарен за помощь! :)