.thumbnail-item { 
	/* position relative so that we can use position absolute for the tooltip */
	position: relative; 
	float:left;  
	margin:0px 0px 0px 10px;
	width:200px;
	padding:10px 0px 10px 0px;
	background:url(../images/list_bottom_line.jpg) no-repeat bottom;
}

.thumbnail-item em
{
	font-weight:bold;
	font-style:normal;
	padding: 0px 10px 0px 13px;
	border-left:1px solid #000;
	background:#FFF;
}

.thumbnail-item a { 
	font-size:12px;
	color:#353535;
	font-weight:bold;
	text-decoration:none;
	padding-left:25px;
	background:url(../images/bullet.gif) no-repeat;
	background-position:10px 3px;
}

.thumbnail-item a:hover
{
	color:#F00;
	background:url(../images/bullet_hover.gif) no-repeat;
	background-position:15px 3px;	
}

.thumbnail-item a.sub { 
	font-size:12px;
	color:#666;
	font-weight:normal;
	text-decoration:none;
	padding-left:45px;
	background:url(../images/bullet.gif) no-repeat;
	background-position:27px 3px;
}

.thumbnail-item a.sub:hover
{
	color:#F00;
	background:url(../images/bullet_hover.gif) no-repeat;
	background-position:32px 3px;	
}


.thumbnail-item img.thumbnail {
	border:3px solid #ccc;	
}
		
.tooltip { 
	/* by default, hide it */
	display: none; 
	/* allow us to move the tooltip */
	position: absolute; 
	/* align the image properly */
	padding:8px 0 0 8px;
	z-index:1000;
}

	.tooltip span.overlay { 
		/* the png image, need ie6 hack though */
		background: url(images/overlay.png) no-repeat; 
		/* put this overlay on the top of the tooltip image */
		position: absolute; 
		top: 0px; 
		left: 0px; 
		display: block; 
		width: 350px; 
		height: 200px;
}