/* BEGIN: You'll probably only need to touch this part ============== */
.rtsUL{
	height:22px;
	margin:0;
	padding:20px 20px 0;
	background:lightyellow
}

.rtsUL li a{
	margin:0 1px 0 0;
	/*
	margin-right:-12px
	Uncomment this if you want the tabs to overlay each other a little
	*/
}

.rtsUL li a.rtsSelected{
	color:#1252B2;
	font-weight:bold
}

.rtsUL a{
	color:#888;
	font-weight:bold
}

.rtsUL a:hover{
	color:#000
}

.tab-area{
	border-top:1px solid #bbb; 
	margin:-1px 0 10px 0; 
	padding:20px;
	background:lightblue
}
/* END: You'll probably only need to touch this part ============== */




.rtsUL li{
	float:left;
	display:inline;
}

.rtsUL li a{
	display:block;
	float:left;
	height: 22px;
	text-decoration:none;
	outline:none;
	overflow:hidden
}

.rtsUL li a span{
	display:block;
	_position:relative;
	_z-index:0;
}

.rtsUL li a.rtsAfter{
	position:relative;
	z-index:1;
}

.rtsUL li a.rtsSelected{
	position:relative;
	z-index:2;
	cursor:default
}

.rtsUL li .rtsTxt{
	line-height: 22px;
	padding: 1px 6px;
	background:transparent url('/Images/tabMiddle.png') 0 0 repeat-x;
	text-align: center
}

.rtsUL li a.rtsSelected .rtsTxt{
	background-position:0 -22px;
	padding: 2px 6px;
	
}

.rtsUL li .rtsIn{
	padding-top: 0px;
	padding-left: 18px;
	background: transparent url('/Images/tabLeft.png') 0px 0px no-repeat;
	line-height: 28px;
}

.rtsUL li .rtsOut{
	background:transparent url('/Images/tabRight.png') right 0px no-repeat;
	line-height: 22px;
	padding-right: 17px;
}

.rtsUL li a.rtsSelected .rtsIn{
	background-position:0 -22px
}

.rtsUL li a.rtsSelected .rtsOut{
	background-position:100% -22px;
	line-height: 22px;
	padding-right: 17px;
}

a:hover .rtsIn{
	background-position:0 -22px
}

a:hover .rtsOut{
	background-position:100% -22px
}

a:hover .rtsTxt{
	background-position:0 -22px
}