/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable, .scrollableWork {
	position: relative;
	overflow: hidden;
	width: 700px;
	height: 150px;
}

.viewHScroll {
	overflow: scroll !important;
	height: 200px !important;
}

.scrollableImage {
	overflow: hidden;
	position: absolute;
	bottom: 0;
	right: 0;
	width:1000px;
	height:135px;
}

#fancy_content {
	overflow: hidden;
	margin-top: 25px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items, .scrollableImage .items, .scrollableWork .items, #fancy_content #fancy_ajax {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable .item, .scrollable .ccm-block {
	float:left;
	margin:20px 5px 20px 21px;
	padding:2px;
	width:610px;
	position:relative;
	height:300px;
	
}
.scrollableWork  {margin:20px 5px 20px 21px;}

.scrollableImage .item {
	float: left;
	position: relative;
	width:1000px;
	height:135px;
}

.scrollableImage .items img {
	position: absolute; 
	left:0;s
	bottom:0;
}

.scrollableWork .item {
	float: left;
	position: relative;
	/*width: 270px;
	height: 250px;*/
}

#fancy_content .work {
	float: left;
	position: relative;
	width:820px;
	height:460px;
}

.viewHScroll .item, .viewHScroll .ccm-block {
	/*height: 380px !important;*/
}


.next, .prev 	{left:300px; position:absolute; bottom:108px; z-index:90; cursor:pointer}
.next 			{left:930px}
.disabled { display: none; }

.next	{background:url(http://www.quanthink.com/themes/quanthink/images/fr_next.png) no-repeat left;	width:15px; height:25px}
.prev	{background:url(http://www.quanthink.com/themes/quanthink/images/fr_back.png) no-repeat right; width:15px; height:25px}