How do I make my website with drop shadows?

How do I make my website have a dropdown shadow on the top and left side? I need to add another column to the top and left side to make the dropdown shadow work correctly.

Heres the HTML:

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="outer">

</div>
</body>
</html>

Here is an image of how I want the dropdown shadow to look…

OK, I reduced your post, because there was no need for thousands of lines of code for something like this. All you need is a drop shadow on your outer div. Try to keep the questions as focussed as possible. :smile:

You could try something like this, and tweak it to taste:

#outer {
    box-shadow: -10px -10px 30px rgba(0, 0, 0, 0.27); 
}

It worked thanks!

I also use this one.
http://css3gen.com/box-shadow/