/* root element for the whole scrollable setup */
#scrollablewrapper {height: 200px;width: 590px;  clear:all;  float: left;
}
.carlmug {padding-top: 20px;}

div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 522px;	 
	height:200px;	
}

/* 
	root element for scrollable items. it is 
	absolutely positioned with large width. 
*/
#items {	
	position:absolute;
	width:20000em;	
	clear:both;
}

/* custom positioning for navigational links */
a.prev, a.next {
	margin:80px 0 0;
}


/* single item */
#items div {
	float: left;
	width:522px;
	height:200px;
	background:#fff url(testscrollableh150.png) repeat-x 0 ;
	cursor:pointer;
}

#items div img {float: left;} 
#items div div { width: 250px; padding: 10px 5px; } 

/* style when mouse is over the item */
#items div.hover {
}

/* style when element is active (clicked) */
#items div.active {
	cursor:default;
}

#items h3, #items p, #items span {
	margin:4px 13px;
	padding: 0;		
	font-family:"bitstream vera sans";
	font-size:13px;
}
#items p a {color: #004890; font-weight: bold;}
#items p a:hover {color: #000;}
#items .remarks {font-size: 10px;}
#items h3 {color: #004890; }


/* catalog */
#catalog {clear: left; padding-left: 8px; width: 757px;}
#catalog div {text-align: center; width: 145px; float: left; margin: 2px; border: solid 1px #000;height: 215px;  }
#catalog div.imgmask {margin:0; border: none; width: 145px; height: 96px; overflow: hidden; position: relative;}
#catalog div.imgmask img {width: 145px; height:109px; top: -7px; left:0; position: absolute; clear: both;}
#catalog div h3 {color: #004890; margin: 0; padding: 2px 0 ;}
#catalog div p {text-align:center;margin: 0; padding: 2px 0 ; }
#catalog div p.mlsnum {font-size: 9px;}
#catalog div p.listprice {font-weight: bold;}

#catalog div .link {text-align: right; font-weight: bold; padding-right: 5px; }
#catalog div .link a {color: #004890;}
#catalog div .link a:hover {color: black;}