css nested divs

I want to make the password field hidden for the styling below on .css.

<div id="header">
<div id="header-bottom">
<div class="login-box">
<br>
<form id="login-form" method="post" name="login-form">
<input class="text click-clear" type="text" name="uname" title="Username" value="Username">
<input class="text fake_pass" type="text" name="fake_pass" title="Password" value="Password">
<input class="text hidden_pass" type="password" name="pass" title="Password" value="" style="display: none;">
</div>
</div>
</div>

The code I have below is not working.
.header div#header-bottom .hidden_pass { display:none; }

I also tried:
.header div#header-bottom .login-box .hidden_pass { display:none; }

EDIT:
What does work is forcing the input box itself to hide with a style="display:none;" I could go with that.

you have <div id="header">
but your css looks for an elements with class="header"

And there is no need for defining the parent of a #.
your css suggest that you have a div with #header-bottom that is a child of the header div, AND another div with #header-bottom that is either not a div or not inside the header div.
There can be only one element with a specific id in the document at a time.
so #header-bottom .hidden_pass { display:none; } will suffice