Hi, I am working on a contact card that will slide out from the bottom of a page and so far all seems to be working but for some reason I amgetting a white background even though a color isn't defined anywhere.

in the exampled code (striped to the basics) I'm trying to get the red box to slide up behind the main content area, this works fine.
But in production my content area has a png bg that has a shadow and for some reason the area that it takes up is still displaying white, I haven't linked to the bg image as it is on a clients site but the problem is still occuring I have no bg color set on the main content area so the red box should be showing under the text but isn't.

any ideas?

Here is all the code I am currently working with:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{padding:0; margin:0; font-family:Arial, Helvetica, sans-serif;}
body{font-size:10pt;}

#main-content-container{width:986px; min-height:100px; padding:0 0 0 12px; margin:0 auto; overflow:hidden; position:relative; z-index:60; border-bottom:1px solid #111;}
#footer{width:974px; margin:0 auto; overflow:hidden; border-bottom:1px solid #d6d6d6;}
.card{background:#f00; padding:20px 0 0 20px; width:310px; height:185px; position:relative;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>

<body>

<div id="main-content-container">
<h2>Main container</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non massa nunc. Nullam tincidunt justo sit amet nunc vehicula posuere. Proin ornare vestibulum urna, eu luctus erat cursus vitae. Duis mollis, nunc quis lobortis lobortis, enim tortor euismod enim, vitae ultrices nisi lacus non augue. Sed venenatis tortor sit amet turpis commodo pellentesque. Morbi malesuada leo at ipsum faucibus ornare. Maecenas lacinia ultricies nibh eget malesuada. Etiam rhoncus enim ut lorem placerat rhoncus.</p>	
</div>
<div id="footer">

<div class="card">

</div><!-- /.card -->

</div><!-- /#footer -->
<script type="text/javascript">
$(document).ready(function(){
	$('.card').delay(400).animate({"margin-top":"-170px",}, 1000).stop();
});
</script>

</body>
</html>
P.S. I know everything should be external, this is purely for development at this stage

All help is really appriciated.

Thanks for looking.