Javascript onclick close div

Javascript onclick close div

I have a div that whenever the user clicks it, a form for a newsletter
pops out, at the moment the code is set that an overflow fills the rest of
the webpage an that is where the user has to click in order for the form
to close, however i want the form to only close when the user clicks
anywhere inside the form (except the sign up/email input section) and not
outside.
http://jsfiddle.net/KarinaMcG/FpEZg/
HTML:
<div class="newsletter">
<div id="newslettertext1">
Newsletter bestellen<br>
<br>
Lassen Sie sich per Newsletter &#252;ber Neuheiten und <br>
Aktionen von Tempur informieren. Jetzt anmelden
</div>
<div id="signup">
<form id="leftnewsletter" action="" method="get">
<input type="email" name="email" id="emailsignup" placeholder="E-MAIL
ADDRESS" style="margin-left:76px; margin-top:16px; width:187px;">
<input type="submit" name="signupbtn" id="signupbtn" value="SIGN UP"
class="signupbutton">
</form>
</div>
<div id="newslettertext2">
*Sie k&#246;nnen jederzeit Ihre Einwilligung zum Erhalt des<br>
Newsletters zurückziehen und sich abmelden.
CSS:
body
{
font-family: Arial;
}
.newsletter
{
background-color:#f94798;
position: fixed;
top: 200px;
left: -390px;
width: 450px;
height: 200px;
z-index: 9999;
cursor: pointer;
}
#newslettertext1
{
font-size: 11px;
padding-top:40px;
padding-left:75px;
font-weight: bold;
color:#164e82;
}
#newslettertext2
{
font-size:10px;
color:#eaeaea;
margin-left:76px;
margin-top:7px;
}
#overflow {
background-color: #fdf291;
position: absolute;
top: 0;
left: 0;
display: none;
}
.text {
display: block;
width: 180px;
margin: 80px 0 0 196px;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
color: #ffffff;
cursor: pointer;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.signupbutton
{
background-color: #164e82;
color:#ffffff;
border-radius: 5px;
cursor: pointer;
}
Javascript:
$(function() {
$('.newsletter').click(function() {
var overflow = ('<div id="overflow"><div>');
$(this).stop().animate({ left: '-35' }, 650);
if($('#overflow').length < 1) {
$('body').append(overflow);
}
var wWth = $(window).innerWidth(),
wHgt = $(window).innerHeight();
$('#overflow').fadeIn('slow').css({ width: wWth, height: wHgt });
$('#overflow').click(function() {
$(this).fadeOut('slow')
$('.newsletter').stop().animate({ left: '-390px' }, 650);
});
});
$(window).resize(function() {
var wWth = $(window).innerWidth(),
wHgt = $(window).innerHeight();
$('#overflow').fadeIn('slow').css({ width: wWth, height: wHgt });
});
});