css help - I need to move header image down from top of the page

Hello again

I got some great help here last week with a css issue. http://www.boards.ie/vbulletin/showthread.php?t=2056040456 But now I'm back again in need of a little guidance.
The website in question is : http://www.monorail.ie

I need to push the header.png image down from the top of the page, so that I have a view of the background wood-panel at the top of my site. Once I have this figured out in the code I will then reconnect my header and wrapper images again, and generally clean up this area.

I have pasted code from my template.css file and I'm pretty sure the change/extra code must be added to the header section. Can anyone help me with this please?


/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 0;
background: url(../images/bodybg.jpg) top left repeat;
/* background: url(../images/monorail_image.jpg) top left repeat; */
/* this image is now the wood panel background */
}

div.center {
text-align: center;
margin: 0 auto;
padding: 0;
width: 954px;
}

div#wrapper {
margin: 0 auto;
width: 954px;
text-align: left;
/* background: url(../images/content.jpg) top center repeat-y; */
background: url(../images/monorail_image.png) top center repeat-y;
/* this imiage is the original monorail black and white photo */
}

#header {
height: 300px;
/* this is the distant between the top of the screen and the black/white image */
/* background: url(../images/header.jpg) top center no-repeat; */
margin: 0 auto;
width: 954px;
text-align: left;
background: url(../images/header1.png) top center no-repeat;
/* this my new header image that was stripped from the top of our main picture */
}

#content {
height:1100px;
/* this height figure is to keep the full monorail poster without the wrapper resizing itself */
width: 900px;
margin: 0 auto;
padding: 0 42px 14px 14px;
overflow: hidden;
}