HTML Help with Transport Template

The text in this div "Gobblty Gook"

<div id="gbox">
<div id="gbox-top"> </div>
<div id="gbox-bg">
<div id="gbox-grd">
<h2> Gobblty Gook</h2>

does not load in front of the background. the background seems to be in the foreground

#gbox {
width: 431px;
margin-top: 47px;
margin-left: 22px;
}

#gbox-bg { background: url(images/green_bg.gif) repeat-y; }
#gbox-grd { background: bottom url(images/green_grad_bot.gif) repeat-x; }
#gbox-top { background: url(images/green_top.gif) no-repeat; height: 24px; }
#gbox-bot { background: bottom left url(images/green_bot.gif) no-repeat; height: 23px; }
#gbox-grd {
min-height: 300px;
padding: 2px 24px;
}
#gbox h2 {
font: bold 14px arial, sans-serif;
color: #000;
margin: 0;
}
#gbox p {
margin: 1em 0;
}


any ideas?