CSS - Lightbox Shadow Overlay

#header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background-image: url(images/headerbg.gif);
	background-repeat:repeat-x;
	height: 128px;
	z-index: 1;
}

#logo {
	position:relative;
	width:231px;
	height:94px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/logo.jpg);
}

#menuspacer {
	position: absolute;
	top:110px;
	left: 0px;
	height: 41px;
	width: 100%;
	z-index: 2;
	border-bottom: 1px solid #FF8000;
}

#menubg {
	position:relative;
	top:116px;
	height: 25px;
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	z-index: 3;
	border-left: 1px solid #FF8000;
	border-right: 1px solid #FF8000;
	border-bottom: 1px solid #FF8000;
		background-color:#FFFFFF;

}
#menufakeborder {
	position:relative;
	top:89px;
	height: 20px;
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	z-index: 4;
	border-left: 1px solid #ffcb9d;
	border-right: 1px solid #ffcb9d;
}

#menucontainer {
	position:relative;
	top:0px;
	height: 23px;
	width: 500px;
	margin-right: 0px;
	margin-left: 0;
	z-index: 5;
}

#menu li
{
	display: inline;
	list-style-type: none;
	padding-right: 9px;
	margin-left: auto;
	margin-right: auto;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color: #550000;
	text-decoration: none;
	text-align:center;
	z-index:6;
	background-color:#FFFFFF;
}

#photobg {
	position:absolute;
	top: 152px;
	left: 0px;
	width:100%;
	height: 161px;
	background-image:url(images/horsebg.gif);
	background-repeat:repeat-x;
	z-index:2;
	
}

#horse {
	position: relative;
	top: 91px;
	margin-left: auto;
	margin-right: auto;
	background-image:url(images/horse2.jpg);
	width:1035px;
	height: 161px;
	z-index:2;
}

#border-right {
	position:absolute;
	top: 0px;
	right: 137px;
	width:22px;
	height:97%;
	background-image:url(images/border-right.gif);
	background-repeat:repeat-y;
	z-index:2324235;
	background-color:#003366;
}

#border-left {
	position:absolute;
	top: 0px;
	left: 137px;
	width:20px;
	height:97%;
	background-image:url(images/border-left.gif);
	background-repeat:repeat-y;
	z-index:512;
	
}

#border-left-end {
	position:absolute;
	bottom: -18px;
	left: 139px;
	width:18px;
	height:58px;
	background-image:url(images/border-left-end.gif);
	z-index:1;
}

#border-right-end {
	position:absolute;
	bottom: -18px;
	right: 141px;
	width:18px;
	height:58px;
	background-image:url(images/border-right-end.gif);
	z-index:1;
}

#horse-tail {
	position:absolute;
	top: 161px;
	left: 63px;
	width:94px;
	height:61px;
	background-image:url(images/horsetail.gif);
	z-index:1;
	
}

#footer {
	position:absolute;
	bottom: -175px;
	width:100%;
	height:22px;
	background-image:url(images/footerbg.gif);
	background-repeat:repeat-x;
	left: 0px;
	border-top: 1px solid #FF8000;
	z-index:0;
}

#footer-text {
	position:relative;
	bottom: 3px;
	width:420px;
	height:22px;
	margin:0 auto;
	z-index:2;
	border-right: 1px solid #FF8000;
	border-bottom: 1px solid #FF8000;
	border-left: 1px solid #FF8000;
	background-color:#FFFFFF;
}

#page {
	position: relative;
	top: 0px;
	left:0px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 1035px;
	z-index: 0;
}

#header {
	width: 101.5%;
	left:0px;
}

#photobg {
	width: 101.5%;
	left:0px;
}

#menuspacer {
	width: 101.5%;
	left:0px;
}

#menu
{
	list-style-type: none;
	margin-right: auto;
	width: 498px;
	margin:auto auto;
	padding:0px 0;
}

#menu li {
	display: inline;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align:center;

}

#footer {
	width: 101.5%;
	left:0px;
}

#border-right {
	right: 136px;
}

<div id="header">
  <div id="logo"></div>
</div>
<div id="menuspacer"></div>
<div id="menubg">
  <!--[if ! IE 6]><div id="menucontainer"><![endif]-->
  <!--[if IE 6]><div id="menucontainer" align="center"><![endif]-->
  <ul id="menu" align="center">
menu items
  </ul>
</div>
</div>
<div id="menufakeborder"></div>
<div id="photobg"></div>
<div id="horse">
  <div id="horse-tail"></div>
</div>
<div id="page">
  <div id="border-right"></div>
  <div id="border-right-end"></div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  content
   <p>&nbsp;</p>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="border-left"></div>
  <div id="border-left-end"></div>
</div>
<div id="footer">
  <div id="footer-text" align="center"><img src="images/footer.jpg" /></div>
</div>

<html>

	<head>
	
		<script language="javascript" type="text/javascript">
		// This event is fired after all images on the page have loaded... therefore 
		// we know that image 1 is being displayed 
		window.onload = function() { 
		var innertext = "<p>Loading Colors...<\/p>";
		
		//start displaying here
		
		
		loadImg("ge64bw.jpg", image2Done); 
		
		//stop displaying here
		
		} 
		
		//This function loads an image from a url then calls a method 
		function loadImg(url, handler) { 
			//Declare a new image 
			var img = new Image(); 
		
			//Call the passed in method but change the signature as we are not interested  
			// in onload event args 
			img.onload = function() { handler(this); } ; 
		
			//Initiate the download of the image 
			img.src = url; 
		} 
		
		//Called when the second image has finished downloading 
		function image2Done(img) { 
			//Swap the images 
			document.getElementById("myImageTag").src = img.src; 
			//Go get the third 
			loadImg("ge64c.jpg", image3Done); 
		} 
		
		//Called when image 3 has finished downloding 
		function image3Done(img) { 
			//Swap the images 
			document.getElementById("myImageTag").src = img.src; 
			//FINISHED 
		} 
		</script>
		
		
		<title>Ge64 Tech Repairs</title>
	
		<style type="text/css">
			
			.image {    
				display: block;
				margin-left: auto;
				margin-right: auto;
				width: 924px
				height: 668px;
				margin-top: 45px;
				z-index:2 
			}
			
			.box {
				text-align: center;
				height:20px;
				margin-top: 15px
			}
			
		</style>
		
	</head>
	
	<body>
	
		<img src="load.gif" id="myImageTag" name="myImageTag" class="image">
	
	</body>
	
</html>

#myDiv{-moz-box-shadow: 0px 10px 33px #000; -webkit-box-shadow: 0px 10px 33px #000; box-shadow: 0px 10px 33px #000; /* For IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000');}

div.products {
     border: 1px solid green;
     left: 485px;
     position: relative;
     top: -433px;
     width: 250px;
 }

<table width="775" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td width="50%">Text and more text</td>
    <td width="50%">and yet more text again.</td>
  </tr>
</table>

<table width="775" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Sidenote Text</td>
    <td width="475">(This would be empty to allow the view of the table undernearth. That has all the text.)</td>
    <td width="150">Sidenote Text</td>
  </tr>
</table>