How can I change the background color of this part of my page?

Look at the attached graphic and you'll see my dilemma. I want to eliminate the white space that you see on either side of my center section. I've played with some different things, but keep coming up short. How do I get rid of the white space and fill it with the bgcolor: 52d9c

Here's my stylesheet and if you want to see the whole code for the page, head out to http://www.barefoot-bay.com

Thanks!


#wrapper{margin:0;padding:0;min-height:100%;}
html, body{height:100%;margin:0;}

#header{width:1052px;margin:0 auto;height:252px;position:relative;}
/*this is your header graphic */

#logo{width:1052px;height:252px;}

#page{width:1052px;margin:0 auto;border-top:none;padding-bottom:0px;}
/*this is not necessary. This is the gradient that starts just below the menu in your example. However, the content id that you see below gives you your "tray" */

#content{float:left;width:1052px; padding-top:0px;padding-bottom:0px;min-height:450px; background-color:#ffffff;}

#footer{padding-top:735px; background:#264d9c}
#footer p{text-align:center;font-size:9px;color:#FFF;margin:0;padding:0;background-color:transparent; font-family: Myriad Pro, Microsoft Sans Serif;}
#footer a{font-family: Myriad Pro, Microsoft Sans Serif; font-size: 9px; color: #ffffff;}

#bglayout{height:50%;width:100%;position:absolute;left:0px;top:0px;z-index:-1;}
/*this is your background gradient, starts at the top and goes all the way down*/

#bgtop{margin:0;min-height:1000px;height:100%;background:#252d9c url(images/background_sliver.jpg) repeat-x top;}
/*these are your clouds */
.left{position:relative;width:100%; background-color:252d9c; background:url(images/left_graphic.jpg) no-repeat left top;height:100%;float:left;}
.right{position:relative;width:100%;background:url(images/right_graphic.jpg) no-repeat right top;height:1000px;}