en se concentrant sur un élément change de l'autre CSS

Je veux changer un élément de couleur Hdr_nav_search_box lorsque l'accent est mis sur un autre élément Hdr_nav_search_input. Voici les codes : http://jsfiddle.net/FJAYk/4/ je ne vois pas pourquoi cela ne fonctionne pas.

<input class="Hdr_nav_search_input" />
<div class="Hdr_nav_search_box" /><span>search for location....</span><i>for example: blah blah</i></div>

-

.Hdr_nav_search_box{
padding: 0 5px;
margin: 7.5px 0;
width:300px;
height: 25px;
background: white;
 }
.Hdr_nav_search_input:focus .Hdr_nav_search_box{
color: #d4d4d4;
 }
.Hdr_nav_search_box span,.Hdr_nav_search_box i{
line-height: 25px;
color: gray;
}
.Hdr_nav_search_input{
padding: 0 5px;
margin: 7.5px 0;
border: 0;
z-index: 2;
position: absolute;
width:300px;
height: 25px;
background: transparent;    
}
Je pense que vous vous êtes liés à un mauvais violon.
Désolé et merci à vous, j'ai mis à jour le lien.

OriginalL'auteur Sami | 2013-03-31