/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 240px;
	height:225px;
                  margin-top: 20px;
	/* custom decorations */
	border: 1px solid #3659bc;
	background-color: #FFF;
                  /*color: white;*/
}
.scrollable .title{
 padding: 5px;
 margin-bottom: 5px;
 text-align: center;
 background-color: #366ebc;
 color: #FFF;
 font-weight: bold;
 
}
/*
	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;
	text-align: center;
}

/* single scrollable item */
.scrollable .item {
	float:left;
	margin-left: 2px;
 	border: none;
	background-color:#FFF;
	cursor:pointer;
	width:236px;
	height: 192px;
	text-align: center;
	/*-moz-border-radius:4px;*/
	/*-webkit-border-radius:4px;*/
}
.scrollable .item a.headlineText{
 display: block;
 margin:0;
 color: #444;
 text-align: center;
 text-decoration: none;
}
.scrollable .item a.headlineText:hover{
 text-decoration: underline;
}
.scrollable .item img{
 width: 232px;
 height: 152px;
 border: 1px solid #fff;
}
.scrollable .item .textOnly{
  font-size: 15px;
  margin-top: 10px;
  color: #666;
  text-shadow: #DDD 1px 1px 1px;
}
.scrollable .item a.readMore{
 text-decoration: none;
 color: #444;
 float: right;
 font-size: smaller;
  text-shadow: none;
}
.scrollable .item .readMore:hover{
 text-decoration: underline;
}
/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

/******************************/
#scrollableControls{
position: relative;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;
border-bottom: 1px solid #AAA;
width: 240px;
height: 18px;
}
/* prev, next, prevPage and nextPage buttons */
.browse {	
	display:block;
	width: 18px;
	height: 18px;
	/*float:left;*/
	margin: 0px;
	/*margin: 0px 10px 0px 10px;*/
	cursor:pointer;
	font-size:1px;
}

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

} 


/* left */
a.left{ 
	background: url(../../images/scrollable/arrow/left.png) no-repeat;
	background-position: 0 0px; 
	float: left;
	/*clear: right;*/
} 
a.left:hover  	{ background-position: 0 -18px; }
a.left:active  	{ background-position: 0 -18px; }


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

/**********************************************/
/* position and dimensions of the navigator */
.navi {
	
/* 
	How to calculate width:
	(3+8+3)x nos of items(.navi a)
*/
	width: 70px;
	max-width: 204px;
/*
	how to calculate left padding:
		(204-width)/2
*/
	padding-left: 67px;
	/*margin-right: 47px;*/
	margin-top:0;
	margin-bottom: 0;
	height:12px;
	float: left;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:2px;
	background:url(../../images/scrollable/arrow/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
	cursor: pointer;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

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