BG image of class not showing up on hover

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?

[COLOR=”Blue”][URL=”http://travismichael.net/new_tmdesigns/index.php”]http://travismichael.net/new_tmdesigns/index.php[/URL][/COLOR]

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

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>[/CODE]

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>[/CODE]

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: [email protected]</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 –>
[/CODE]

travismichael.net/new_tmdesigns/index.php

Also in #JavaScript _↴