/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
	margin-top:5px;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(http://www.harvard-temp.de/fileadmin/bilder/arrow/left.png) no-repeat;
	float:left;
	margin:4px;

	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background:url(http://www.harvard-temp.de/fileadmin/bilder/arrow/right.png) no-repeat;
	float:left;	

}



/*********** navigator ***********/


/* position and dimensions of the navigator 
div.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}
*/

/* items inside navigator 
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/navigator.png) 0 0 no-repeat;     
	cursor:pointer;	
}
*/


/* mouseover state 
div.navi a:hover {
	background-position:0 -8px;      
}
*/
/* active state (current page state) 
div.navi a.active {
	background-position:0 -16px;     
} 	
*/




/* root element for the whole scrollable setup */
div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 454px;	 
	height:232px;	
/* 	border-right:1px solid #dadbdc;
		border-left:1px solid #dadbdc;*/
}

/* 
	root element for scrollable items. It is 
	absolutely positioned with large width. 
*/
#thumbs {	
	position:absolute;
	width:20000em;	
	clear:both;
	border-top:1px solid #eee;
		border-bottom:1px solid #dadbdc;

}

/* custom positioning for navigational links */
a.prev, a.next {
	margin-top:105px;	
}



/* single item */
#thumbs div {
	float:left;
	width:150px;
	height:220px;
	background: white;
	color:#385f8a;
	border-left:1px solid #eee;
	cursor:pointer;
}

/* style when mouse is over the item */
#thumbs div.hover {
	background-color:#f1f1f1;	
}

/* style when element is active (clicked) */
#thumbs div.active {
	background-color:#eef3f7;
	cursor:default;
}

#thumbs h3 {
	margin:10px 10px 5px 10px;		
  font-size:11px;
	color:#385f8a;


/*font-family: "ArnoPro-Regular"; src: local("ArnoPro-Regular"), url("http://www.harvard-temp.de/fileadmin/font/ArnoPro-Regular.otf") format("TrueType");*/
  }

#thumbs h2 {
	margin:10px 10px 2px 10px;		
  font-size:9px;
	color:#385f8a;	
}

/*    
#thumbs span {
background: url(http://www.harvard-temp.de/fileadmin/bilder/maske_scrollable.gif) no-repeat scroll 0 0;
width:755px;
height:80px;
left:0;
top:0;
position:absolute;
z-index:1111;

}
*/

#thumbs p{
	margin:0 10px 10px 10px ;		
  font-size:9px;
	color:#385f8a;	
}



#thumbs h3 em {
	font-style:normal;
	color:#385f8a;
}

#thumbs img {

	width:100%;
	height:80px;
	z-index:111;
}



#thumbs a:link { color: #677588; text-decoration: none; font-weight:bold; font-size:9px;}
#thumbs a:visited { color: #677588; font-weight: normal; font-weight:bold; text-decoration: none; font-size:9px;}
#thumbs a:hover { color: #385f8a; text-decoration: underline; font-weight:bold; font-size:9px;}
#thumbs a:active { color: #000000; font-weight: normal; font-weight:bold; text-decoration: underline; font-size:9px;}



#thumbs ul {
padding: 0px 0px 0px 10px;
margin:0px;
font-weight:bold;
}



.scrollable_clear{
clear:both;
}