How Do I make this menu close when i press somewhere else in the page?

<script type="text/javascript">
    $(document).ready(function() {

        $(".sign_in").click(function() {
            $("#sign_box").show();
            return false;
        });
        $("body #main").click(function() {
            $("#sign_box").hide();
            return false;
        });
    });
</script>

<style type="text/css">

a
{
color:#ffffff;
font-family: Tahoma;
font-size: 11px;
text-decoration:none;

}
a:hover
{
color:#000000;
text-decoration:none;

}
#sign_box
{
    font-family: Tahoma;
    font-size: 11px;
    color:White;
margin-top: 5px;
background-color:#333333; border:solid 1px #ffffff; padding:8px;position:absolute;display:none;
-moz-border-radius-topright:6px;-moz-border-radius-bottomleft:6px;-moz-border-radius-bottomright:6px;-webkit-border-top-right-radius:6px;-webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;
}
#sign_box input[type="text"],#sign_box input[type="password"]
{
    font-family:Tahoma;
    font-size: 11px;
    width: 12000px;
    padding: 3px;

}
#sign_box input[type="submit"]
{
    font-family:Tahoma;
    font-size: 11px;
}
.sign_in
{
background-color:#333333;
border:solid 1px #999;
padding:6px;
}

</style>

<div id="sign_box">
<table>
<tr><td><td height= 15px></td></td></tr>
    <tr><td>Username:</td><td><asp:TextBox ID="user" runat="server" width=100px/></td></tr>
    <tr><td><td  height= 15px></td></td></tr>
    <tr><td>Password:</td><td><asp:TextBox ID="pass" runat="server" width=100px TextMode=Password/></td></tr>
    <tr><td><td height= 15px></td></td></tr>
    <tr><td colspan="2"><center><asp:Button ID="Button1" runat="server" Text="Login"
            onclick="Button1_Click1" /></center></td></tr>
            <tr><td><td  height=10px></td></td></tr>
    <tr><td colspan="2">
        <asp:Label ID="Label4" runat="server" Text="*Username And Password Don`t Much" Font-Size=XX-Small ForeColor=Red></asp:Label></td></tr>

</table>