I am stuck on why the background-image of the DivClass '.uparrow' isnít showing up when i hover over the contact button 'a.contact-btn'. Plus if you have any thoughts on making this smoother much would be appreciated

Basically i want to give the user an indication that by clicking the button the div will toggle back up with a watermark of an arrow pointing up displayed on the center of the contact div. If you have opinions on this feel free to give me criticism

http://travismichael.net/new_tmdesigns/index.php

If someone could help me out with why this is not working that would be awesome.

Here is my CSS
<style>
Code:
#contact {
	width:1000px; 
	height:400px; 
	background:#8db510; 
	position:absolute; margin-left:-500px; top:-400px; left:50%;
	display:block;
	z-index:1005;
}
a.contact-btn:hover {
	color:#fff;
	background: #a7d614;
}
a.contact-btn  {
	display:block;
	line-height:100%;
	width:80px;
	height:25px;
	padding:10px 5px 5px 5px;
	position:absolute;
	bottom:-35px; right:0;
	font-size:.8em;
	color:#222222;
	text-align:center;
	text-decoration:none;
	font-family:helvetica;
	-moz-border-radius-bottomright: 3px;
	border-bottom-right-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-left-radius: 3px;
	background:#8db510;
}
#lightbox {  
 display:none;  
 background:#000000;  
 opacity:0.7;  
 filter:alpha(opacity=70);  
 position:absolute;  
 top:0px;  
 left:0px;  
 min-width:100%;  
 min-height:100%;  
 z-index:1000;  
}

#lightcube {  
 display:none;  
 background:#000;
 opacity:0.7;  
 filter:alpha(opacity=70);  
 position:absolute;  
 top:0px;  
 left:0px;  
 min-width:100%;  
 min-height:100%;  
 z-index:1300;  
}
.uparrow {  
 display:block; 
 display:none; 
 background:url(../images/arrowup.png) no-repeat center;  
 z-index:1301;  
 width:150px;
 height:150px;
}
</style>
JAVASCRIPT
Code:
<script>
$(document).ready(function() {
  						
	    	$("a.contact-btn").toggle(
      			 function (e) {
      				e.preventDefault(); // stops link from making page jump to the top
       			 $("#contact").animate( {"top": "0"}, 900, "linear" );
       			 $("#lightbox").fadeIn(300);
     		 },
      		function () {
        		$("#contact").animate( {"top": "-400px"}, 900, "linear" );
        		$("#lightbox").fadeOut(300);  
    	    });
    	  
		    $('body').click(function() {
        		$("#contact").animate( {"top": "-400px"}, 900, "linear" );
        		$("#lightbox").fadeOut(300);
			});

			$('#contact').click(function(event){
 				  event.stopPropagation();
				});
		
		    $("a.contact-btn").mouseover(function(){
   		   		$("body").css("border-color", "#a7d614");
   		   		$("#lightcube").fadeIn(300);
   		   		$(".uparrow").fadeIn(300);
   		   		$("#contact").css("background-color", "#a7d614");

    		}).mouseout(function(){
   		   		$("body").css("border-color", "#8db510");
   		   		$("#lightcube").fadeOut(300);
   		   		$(".uparrow").fadeOut(300);
   		   		$("#contact").css("background-color", "#8db510");
   	 		});
   	 		
   	     	$('a.contact-btn').hover(
      		 	function(){ $(this).addClass('.lightcube')},
      			 function(){ $(this).removeClass('.lightcube')
			})
   	 	
});
</script>
HTML
Code:
<div id="contact">
<h1>Go ahead we're listening</h1>
<section id="contact_wrapper">
<section id="ct_wrapper-left">
	<article id="header">
			<h2>We're based in Atlanta, Georgia.</h2>
			<p>You can contact us using the contact form below.That said, if you have a project
			in mind, our <span>Project Planner</span> might be more suitable. It won't take more than five 
			minutes and the more information you can provide us with, the better equipped 
			we will be to respond to your enquiry.</p>
	</article>
<div class="clear"></div>
<section id="form_wrapper">
	<form id="contact-form" action="FormtoEmail.php">
	<section class="left">
 	 	<input id="full_name" name="full_name" type="name" placeholder="Your Name" required >
 	 	<input id="email_addr" name="email_addr" type="email" placeholder="Your Email" required >
	</section>
	<section id="comment_left">
			<textarea id="comments" form="contact_form" type="text" placeholder="Comment Here"></textarea>  
			<input type="submit" name="submit" value="SUBMIT"/> 
	</form>
	</section><!-- END OF COMMENT_LEFT -->
</section><!-- END OF FORM_WRAPPER -->

</section><!-- END OF CT_WRAPPER -->
<section id="ct_wrapper-right">
<h2>Get In Touch</h2>
<ul>
<li>Email: travis@travismichael.net</li>
<li>Phone: 404-406-2811</li>
<li>Location: Atlanta, GA</li>
</ul>

<ul class="social-list">
<a href=""><li class="youtube">You-Tube</li></a>
<a href=""><li class="facebook">Facebook</li></a>
<a href=""><li class="twitter">Twitter</li></a>
<a href=""><li class="vimeo">Vimeo</li></a>
<a href=""><li class="skype">Skype</li></a>
<a href=""><li class="wordpress">WordPress</li></a>
<a href=""><li class="linkin">LinkedIn</li></a>
<a href=""><li class="rss">RSS</li></a>
</ul>
</section>
<a href="#" class="contact-btn"><h3>CONTACT</h3></a>
</section><!-- END OF CONTACT_WRAPPER -->
<div id="lightcube"><div class="uparrow"></div> </div>
</div><!-- END OF CONTACT -->
travismichael.net/new_tmdesigns/index.php