Hello operapixie,
You wrap the entire site in .shadowbox and put a 100% height on it so, of course, that's what it does.
If you want your shadow to stop at the bottom of .outer and not enclose #copyright, you will need to close .shadowbox sooner. The 100% height would have to go too.
Look at it like this -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kaleco Floral Design</title>
<link href="kaleco.css" rel="stylesheet" type="text/css" />
<script src="js-image-slider.js" type="text/javascript"></script>
</head>
<body>
<div class="shadowbox">
<div id="header">
<div id="xcontainer">
<ul class="social">
<li class="facebook"><a href="#"><strong>Facebook</strong></a></li>
<li class="twitter"><a href="#"><strong>Twitter</strong></a></li>
<li class="pinterest"><a href="#"><strong>Pinterest</strong></a></li>
<li class="rss"><a href="#"><strong>RSS</strong></a></li>
</ul>
<!--end xcontainer--></div>
<div id="banner">
<img class="top_logo" src="kalecologoa.png" width="235" style="margin-top:-97px;margin-left:40px;">
<h1>KALECO DESIGN</h1>
<ul id="button">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!--end header--></div>
<div class="main">
<!--end .main--></div>
<div class="outer">
<div class="inner"></div>
<!--end .outer--></div>
<!--end .shadowbox--></div>
<div id="copyright">
<span class="nav4">
© 2012 Kaleco Designs, all rights reserved. | Web Design by
<a href="http://www.yourbusybee.com/" title="YourBusyBee.com" target="_blank">YourBusyBee.com</a>.
</span>
<!--end copyright--></div>
</body>
</html>
And, like I mentioned earlier -
Code:
.shadowbox {
width: 1020px;
/*height:100%;*/
margin-left:auto;
margin-right:auto;
-moz-border-top-left-radius: 15px;
border-top-left-radius: 15px;
-moz-border-top-right-radius: 15px;
border-top-right-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-left-radius: 15px;
-moz-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 0px -2.6px 7px #ccc;
-moz-box-shadow: 0px -2.6px 7px #ccc;
box-shadow: 0px -2.6px 7px #ccc;
}