Portlets in CSS (2)

Following on from the first css portlet I did, here is one in which I use a background image as the title bar.

I also include an image and a customized list. I wont include the css for that as I basically reuse the style from How to Customize lists using css with a different image.

The main thing to note here is the image is only 1 pixel wide and is set to repeat horizontally across the background (bolded). I just create the image in photoshop with a gradient.

.contentTitle {
clear:left;
padding-left:5px;
font-size:15px;
font-weight:bold;
line-height:29px;
color:#ffffff;
background:url(../images/shade_blue.jpg) repeat-x;
}

.contentPanel {
background-color:#ffffff;
color:#6c6d71;
padding:10px;
border-left:1px solid #3a5f96;
border-right:1px solid #3a5f96;
border-bottom:1px solid #3a5f96;
}

Here is the (shortened)html. For the screenshot effect, it needs to be in a container approx 500px wide:

<div class="contentTitle">
Portlet Title
</div>
<div class="contentPanel">
<img src="images/goldengate.jpg" style="float:right;"/>
<span class="header">title</span><br />
Latin Txt
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>

</div>