Another one for you to fluff Scott ;)

First, here's the relevant code from this page for the above box

<div id="ds_demo">
<div id="ds_top_bar" class="ds_bars ds_contents">&nbsp;</div>
<div id="ds_right_shadow" class="ds_shadows">
<div id="ds_content" class="ds_contents">
<h2>Demo</h3>
<p>This is a demonstration of the drop shadow effect without using any images</p>
<p>The depth of the shadow is controlled from css and is easily implemented on any page</p>
<p>This technique has been tested on Firefox, Opera and Interdebt Exploiter</p>
</div>
</div>
<div id="ds_bottom_shadow" class="ds_bars ds_shadows">&nbsp;</div>
</div>

Then the css that controls it all

.ds_contents{
background:#ddddff;
color:#000;
}

.ds_shadows{
background:#ccc;
color:#inherit;
}

#ds_content{
padding:1px 10px;
}

#ds_top_bar{
margin-right:10px;
}

#ds_right_shadow{
padding-right:10px;
}

#ds_bottom_shadow{
margin-left:10px;
}

.ds_bars{
line-height:1px;
font-size:1px;
height:10px;
}

#ds_demo{
width:50%;
margin:0 0 0 10%;
}

The depth of the shadow can be altered by changing the appropriate height in ds_bars and padding/margin in ds_right/bottom_shadow

Geeky Detail: A neat trick to note, if you wrap a div around an element that has margins (ie/ <p>,<h#> tags), then the margins extend beyond the enclosing div, effectively pushing the top and bottom divs away from the middle div. You can overcome this by adding a padding of any size (1px upwards) to the content div ;) ¥

I'll fluff it up a tad more when I next get chance ...... keywords here are tad and chance ;)

Have fun

¥