/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	height:21px;
	vertical-align:bottom;
}

/* single tab */
ul.tabs li { 
	float:right;	 
	text-indent:0;
	margin:0 !important;
	list-style-image:none !important; 
	width:90px;
	height:21px;
 	padding:0 2px 0 0;
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	display:block;
	height:21px;
	width:90px;
	text-align:center;
	text-decoration:none;
	color:#3889b5;
	background: url('/images/new_kfsc/bg_tabs.gif') bottom no-repeat;
	padding:0px 0 5px 0;
	font-weight:bold;
	font-family:verdana ;
	font-size:14px;
}

ul.tabs a:active {
	outline:none;	
	color:#d6590d;
	background:url('/images/new_kfsc/bg_tab_active.gif') bottom no-repeat;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	color:#d6590d;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs li.current a {
	color:#d6590d;
	background:url('/images/new_kfsc/bg_tab_active.gif') bottom no-repeat;
	
	cursor:default !important; 
	color:#d6590d !important;
}



ul.tabs a.current:hover {
	color:#d6590d;
	background:url('/images/new_kfsc/bg_tab_active.gif') bottom no-repeat;
	
	cursor:default !important; 
	color:#d6590d !important;
}



ul.tabs a.current {
	color:#d6590d;
	background:url('/images/new_kfsc/bg_tab_active.gif') bottom no-repeat;
	
	cursor:default !important; 
	color:#d6590d !important;
}



/* initially all panes are hidden */ 
div.panes div.pane{
	display:none;		
}
div.panes divpan {
	display:none;		
	text-align:right;
	
}



/* this makes it possible to add next button beside scrollable */
.scrollable {
	/*float:left;*/
}
.scrollablevet{
	float:right;	
}

/* prev, next, prevPage and nextPage buttons */

area.browse {
	
	display:block;
	width:43px;
	height:13px;

	
}
area.ebrowse {
	
	display:block;
	width:43px;
	height:13px;
	
	
}

/* right */
area.right 				{ }
area.right:hover 		{ }
area.right:active 	{ } 


/* left */
area.left				{  } 
area.left:hover  		{  }
area.left:active  	{  }

area.eright 				{ }
area.eright:hover 		{ }
area.eright:active 	{ } 


/* left */
area.eleft				{  } 
area.eleft:hover  		{  }
area.eleft:active  	{  }


/* up and down */
area.down		{ 
	background:url('../images/scrolling/vert_large.png') no-repeat; 
	float: none;
	margin: 10px 50px;

}

area.up		{ 
	background:url('../images/scrolling/vert_large.png') no-repeat; 
	float: none;
	margin: 10px 50px;

}

/* up */
area.up:hover  		{ background-position:-30px 0; }
area.up:active  		{ background-position:-60px 0; }

/* down */
area.down 				{ background-position: 0 -30px; }
area.down:hover  		{ background-position:-30px -30px; }
area.down:active  	{ background-position:-60px -30px; } 


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

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 100%;
	height:102px;
	
	/* custom decorations */

}

/*
	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;
	background-color:#a9cee2;
	height:100px;
}

/* single scrollable item */
.scrollable td.newsimg img{
	/*margin: 3px;*/
	background-color:#fff;
	cursor:pointer;
	width:129px;
	height:136px;
	/*padding:5px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;*/
}
.scrollable .divContent {
	float:left;
	margin:10px 10px 10px 10px ;
	cursor:pointer;
	width:430px;
	height:100px;
}

/* active item */
.scrollable .active {
	border:0px solid #000;
	z-index:9999;
	position:relative;
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollablevent{

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 100%;
	height:102px;

	/* custom decorations */

}

/*
	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.
*/
.scrollablevent .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	background-color:#a9cee2;
	height:100px;
}

/* single scrollable item */
.scrollablevent td.newsimg img{
	/*margin: 3px;*/
	background-color:#fff;
	cursor:pointer;
	width:129px;
	height:136px;
	/*padding:5px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;*/
}

.scrollablevent .divContent {
	float:right;
	margin:10px 10px 10px 10px ;
	cursor:pointer;
	width:430px;
	height:100px;
}

/* active item */
.scrollablevent .active {
	border:0px solid #000;
	z-index:9999;
	position:relative;
}