html, css help plz 2

i found it out had to delete the first line of code i didnt need it and it was
messing up the IE version. now im almost there all i want to do now is add
these two shadow effects to the side of the site just like on my jpeg version
but i dont know how to but then straight up to the site?

http://www.funnycrew.co.uk/nwms/New_css/photography.html

source updated so view from page above

CSS
--------------------------------------------------------------------------------
----------------

body, html{
margin: auto;
padding: 0px;
height: 100%;
text-align: center;
background-image: url(Images/bg_pattern.jpg);
}
#links {
height: 38px;
margin: auto;
width: 769px;
text-align: center;
}
#banner {
padding-bottom: 11px; /* LOOK MA! NO GREEN BAR !!! */
margin: auto;
height: 166px;
width: 769px;
background-color: #6DCC3E;
}
#content {
margin: auto;
padding: 20px 0px;
width: 769px;
background-image: url(Images/Content_bg.jpg);
}
#description { /* used to be left column */
height: 721px;
width: 201px;
float: left;
background-color: #C9C9C9;
margin: 0px 0px 0px 11px;
}
#LeftShadow {
float: left;
width: 67px;
background-image: url(Images/Left_shadow.jpg);
height: 1034px;
}
#RightShadow {
float: Right;
width: 67px;
background-image: url(Images/Right_shadow.jpg);
height: 1034px;
}
.descriptionText { /* Text within description */
padding: 10px;
font-size: 11px;
text-align: left;
color: #ffffff;
background-color: #999999;
margin: 0px 15px;
font-family: tahoma, sans-serif;
}
h1 { /* custom header */
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #6DCC3E;
padding: 2px 20px;
border-left: 4px solid #6DCC3E;
border-bottom: 1px solid #6DCC3E;
font-family: Arial, Helvetica, sans-serif;
}
h2 { /* second custom header within category */
margin-bottom: 0px;
margin-top: 10px;
font-size: 16px;
text-align: left;
font-weight: normal;
padding: 2px 0px;
color: #ffffff;
border-bottom: 4px dotted #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
h2:first-letter { /* Dotted box used as number */
margin: 0px 4px;
padding: 5px;
font-size: 30px;
float: left;
display: block;
color: #ffffff;
background-color: #6DCC3E;
font-family: Arial, Helvetica, sans-serif;
}
.category { /*category container box */
float: right;
width: 503px;
margin-top: 0px;
margin-right: 11px;
margin-bottom: 7px;
margin-left: 0px;
}
.categoryText { /* Text within each category */
color: #ffffff;
padding: 0px 0px 0px 10px;
line-height: 16px;
font-family: Arial, Helvetica, sans-serif;
}
img.cagetoryImageLeft { /* Left category image */
float: left;
}
img.cagetoryImageRight { /*Right category image */
float: right;
}
#footer { /* new and improved footer */
margin: auto;
height: 15px;
width: 769px;
font-size: 10px;
text-align: center;
background-color: #000000;
color: #eeeeee;
font-family: Arial, Helvetica, sans-serif;
}
.holderLeft { /* green box in category */
background-color: #66CC33;
float: left;
height: 175px;
width: 248px;

}
.holderRight { /* green box in category */
float: right;
width: 248px;
background-color: #66CC33;
height: 175px;
}

many thanks again martin

any one know?

It looks like your shadow is only a background image... I believe you wish for
the shadow to flow around the sides regardless of screen size & resolution.

Sorry kid, but I'd say you need to redesign it from scratch in order to
achieve the effect you want.