C33 boxshadow question

HTML & CSS
1

I thought it would be nifty to have a page shadow neatly done using the new CSS3 box-shadow proprieties. I had read that the box-shadow is NOT part of the box model so I thought this would be easy and only a matter or determining how wide i wanted the shadow to be, applying it to the wrapper. I was assuming the top and bottom edges would be “offscreen” and without consequences, since the shadow is not part of the box model … this wasn’t the case . I get a bottom “margin” making the bottom shadow visible and breaking the effect… I tried compensating by adding negative margins but it had NO EFFECT.

however I am probably just doing something WAY WRONG.

CSS
*{margin:0; padding:0}
body, html{ height:100%; background: tan;}
#page{ margin: -0px auto 0px auto; -webkit-box-shadow: 0 -0px 8px #000;-moz-box-shadow: 0 0 8px #000;width:960px;min-height:100%; background: silver; margin-bottom:-8px; }
#head{height:200px; background: #333; border-bottom: #000 10px solid;}
#main{float:left; width:640px;background: #aeab0e; }
#sidebar { -webkit-box-shadow: 0 -3px 4px #000;float:left ;width:300px; padding-bottom: 60px; margin-top:-60px;background: url(grad.jpg) bottom left orange repeat-x ; margin-left:10px; position: relative; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;-moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;}
#sidebar .top{background: orange; width: 280px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;-moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;
padding:10px }
#sidebar p {padding:0 10px 20px 10px;}
Content{ background: #aeab0e;}
#foot {background: silver; min-height:100px; clear: both}
.nav {padding:10px;}
#main_content{padding:10px;}
Content .nav li{ display:inline;}
.nav li+li:before{ content:" | "}

MARKUP

	<div id="page">
		<div id="head">
			<h1>PAGE NAME</h1>
		<!--head--></div>
		<div id="content">
			<div id="main">
				<ul class="nav">
					<li><a href="#">link</a></li><li>
					<a href="#">link</a></li><li>
					<a href="#">link</a></li><li>
					<a href="#">link</a></li><li>
					<a href="#">link</a></li><li>
					<a href="#">link</a></li><li>
					<a href="#">link</a></li><li>
					<a href="#">link</a></li>
				</ul>
				<div id="main_content">
					<p> main content</p>
					<p> main content</p>
				</div>
			<!--main--></div>
			<div id="sidebar">
				<h2 class="top">Sidebar</h2>
				<p>sidebar</p>
				<p>sidebar</p>
				<p>sidebar</p>
			<!--sidebar--></div>
			<div id="foot">
			</div>
		<!--content--></div>
	<!--page--></div>
2

Not a perfect solution, but better than nothing:

#page { 
  margin: 0px auto; -webkit-box-shadow: 0 [COLOR="Red"]-8px [/COLOR]8px #000;
  -moz-box-shadow: 0 [COLOR="Red"]-8px[/COLOR] 8px #000;
  width:960px;
  min-height:100%; 
  background: silver; 
}