@charset "utf-8";
/* CSS Document */

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 440px;
	height:345px;
	float:left;	
}
/*
	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 {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.scrollable .items .work {
	float:left;
	cursor:pointer;
	width:400px;
	background: url(../images/bg-work-img.png) no-repeat;
	padding: 19px 20px 0px 19px;
	text-align: center;
}
.scrollable .items .work p {
	font: 10px/15px Verdana, Arial, Helvetica, sans-serif;
	color: #eee;
}
.scrollable .items .work p strong {
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
.scrollable .items .work img {
	border: 1px solid #CCCCCC;
	margin-bottom: 15px;
}


/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:50px;
	height:50px;
	float:left;
	cursor:pointer;
	font-size:1px;
	margin: 150px 0px;
}

/* right */
a.right 		{ background:url(../images/arrow-right.png) no-repeat; clear:right; margin-right: 0px;}
a.right:hover 	{ background-position:-50px 0; }
a.right:active 	{ background-position:-100px 0; } 


/* left */
a.left			{ background:url(../images/arrow-left.png) no-repeat; margin-left: 0px; } 
a.left:hover  	{ background-position:-50px 0; }
a.left:active  	{ background-position:-100px 0; }