Eu tenho uma estrutura div bastante simples - caixas de árvore com caixa do meio destacada com box-shadow:

<div class="offerBox">
  <div class="obOffer">
    <div class="obOfferTitle">Free</div>    
    <div class="obOfferPrice">Free</div>    
  </div>
  <div class="obOffer obHiLight">
    <div class="obOfferTitle">Title</div>    
    <div class="obOfferPrice">$10</div>    
  </div>
  <div class="obOffer">
    <div class="obOfferTitle">Title 2</div>    
    <div class="obOfferPrice">$10</div>    
  </div>
</div>​

CSS:

.offerBox {     
    width: 300px;
    margin:10px;    
}
.obOffer {
    width: 33%; 
    float: left;
    height: 100px; 
    text-align:center; 
}

.obOfferPrice {
    padding: 10px;   
    color: white;
    background-color: #85AADD; 
}

.obHiLight {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

​

Um dos elementos dentro dessas caixas tem um conjunto de propriedades de cor de fundo. Por alguns motivos, essa cor de segundo plano remove a sombra da caixa da direita e apenas da direita.

Alguma idéia por que e como consertar isso?

Exemplo ao vivo do problema:http://jsfiddle.net/SqvUd/