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

#bodyTips #sideBar {
	float:left;
	width:278px;
	height:488px;
	background: url(/images/tips/tips_sidebar.jpg) no-repeat 0 0;
	}
	
#bodyTips #dailyTip {
	margin-left:22px;
	}
	
#tipsPanel {
	height:400px;
	width:622px;
	overflow:hidden;
	}
	
#tipsPanel ul li label.date {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#000000;
	font-size:16px;
	clear:left;
	width:120px;
	float:left;
	}
#tipsPanel ul {
		padding:35px 0;
		list-style:none;
		margin-left:-622px;
		width:622px;
	}
	
#tipsPanel ul.noScrollBar {	
	margin-left:0px !important;
	}
#tipsPanel li {
		padding:4px 0 14px;
		width:622px;
		display:block;
	}
	
#tipsPanel li div {
	margin-left:120px;
	}
	
#tipsPanel .inner {
	overflow:hidden;
	height:100%;
	}

/* == Scrollbar functionality ==*/

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
	float:left;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	left: 0;
	top: 0;
	height: 100%;
	background: #fcf0e5;
	display:none;
}
.jScrollPaneDrag {
	position: absolute;
	cursor: pointer;
	overflow: hidden;
	/*background: #ea984f url(../images/news/drag_grab.gif) no-repeat 50% 50%;*/
	height:75px;
	display:none;

}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top:0;
	left: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 40px;
	background: url(/images/tips/up_arrow.png) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 40px;
	background: url(/images/tips/down_arrow.png) repeat-x 0 0;


}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
	background: url(/images/tips/down_arrow.png) repeat-x 0 -40px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
	background: url(/images/tips/up_arrow.png) repeat-x 0 -40px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}