/* CSS for Teaser Textbox with picture */


.teaser {float: left; width: 660px; padding: 10px 0; 
background: url("..img/page3.jpg") no repeat top left; border: 2px solid .c8cdd2;}

.teaser dl {float: left; width: 620px; /* fix width IE/Mac */
	margin: 10px 20px; padding: 0; display: inline; /* bugfix of double border IE/Win */}

.teaser dt {float: right; width: 433px; /* align dt for other text depends on box width */
	margin: 0; padding: 0; font-size: 130%; letter-spacing: 1px; color: .CC00CC;}

.teaser dd {margin: 0 0 0 118px; padding: 0; font-size: 100%; line-height: 1,5em; color: .666;}
	
.teaser dl dd.img {margin: 0;}
	
.teaser dd.img img {float: left; margin: 0 8px 0 0; padding: 4px; border: 1px solid .d9e0e6;
	border-bottom-color: .c8cdd2; border-right-color: .c8cdd2; background: .fff;}

/* Float img to right side */	
.teaser .alt dt {float: left; width: 453px;/* align dt for other text depends on box width */}

.teaser .alt dd {margin: 0 118px 0 0;}	

.teaser .alt dd.img img {float: right; margin: 0 0 0 8px;}

/*----- Hoverbox Code ------*/
.hoverbox
{
	cursor:default;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview    /* preview bild wird by default ausgeblendet */
{
	display: none;
}

.hoverbox a:hover .preview    /* beim mouseover event des a tags wird das bild mit der klasse "preview" auf display
								block gesetzt und ein wenig herumpositioniert.  liegt somit über dem thumbnail */
{
	display: block;
	position: absolute;
	top: 60px;
	left: -50px;
	z-index: 1;
}

.hoverbox img
{
	background:#FFFFFF none repeat scroll 0 0;
	color:inherit;
	vertical-align: top;
	width: 1px;
	height: 1px;
	margin: 2px;
	padding: 2px;
	border-color: #cccccc;
	border-style: solid;
	border-width: 1px;
}

.hoverbox li
{
	
	background:#EEEEEE none repeat scroll 0 0;	
	display: inline;
	float: left;
	position: relative;
	
}

.hoverbox .preview
{
	border-color: #000;
	width: 466px;
	height: 399px;
}