#nav2 *{
	font-size:14px;
	text-decoration:none;
	color:#FFF;
	list-style:none;
	margin:0;
	padding:0;
	line-height:1em;
		background: #FFFFFF;
} /*Reset browsers and apply basic formatting*/
#nav2 li{display:inline}
#nav2 li *{height:30px;float:left;}
#nav2 a{
	background: #FFFFFF url(../images/left.jpg) left no-repeat;
	padding-left:30px;

} 



/*Applys the left segment of the image and adds the grey bottom border*/
#nav2 .right{padding-right:30px}
#nav2 .center{background:url(../images/center.jpg) repeat-x;margin-right:-30px;min-width:30px;height:30px;padding:7px 0; height:16px;} /*Applys the seamless background*/
#nav2 .start{background:url(../images/farleft.jpg) left no-repeat} /*Applys the far left corner*/
#nav2 .end{background:url(../images/farright.jpg) right no-repeat;padding-right:60px} /*Applys the far right corner*/



/*The following controls the hover states of the individual image slices. It's important to remember that IE6 will only recognise :hover when applied to a link element*/
#nav2 a:hover{background:url(../images/right.jpg)}
#nav2 a.start:hover{background:url(../images/farlefthover.jpg)}
#nav2 a:hover .end{background:url(../images/farrighthover.jpg) right}
#nav2 a:hover .center{background:url(../images/centerhover.jpg);color:#333}
#nav2 a:hover .right{background:url(../images/lefthover.jpg) right;padding-right:60px;margin-right:-30px;position:relative}





/*The following is the ON state*/
#nav2 a.current{background:url(../images/right.jpg)}
#nav2 .right2{background:url(../images/lefthover.jpg) right;padding-right:60px;margin-right:-30px;position:relative}
#nav2 .center2{background:url(../images/centerhover.jpg) repeat-x;margin-right:-30px;min-width:30px;height:30px;padding:7px 0; height:16px;} /*Applys the On state background*/

#nav2 a.start2:hover{background:url(../images/farlefthover.jpg)}
#nav2 .start2{background:url(../images/farlefthover.jpg) left no-repeat} /*Applys the far left corner*/
#nav2 .end2{background:url(../images/farrighthover.jpg) right no-repeat;padding-right:60px} /*Applys the far right 
corner*/


/*The following is the hover tabe before the tab during the ON state*/
#nav2 .right3{padding-right:30px}
#nav2 .start3{background:url(../images/farleft.jpg) left no-repeat} /*Applys the far left corner*/
#nav2 .end3{background:url(../images/farright.jpg) right no-repeat;padding-right:60px} /*Applys the far right corner*/
#nav2 a.start3:hover{background:url(../images/farlefthover.jpg)}
#nav2 a:hover .right3{background:url(../images/lefthoverdouble.jpg) right;padding-right:60px;margin-right:-30px;position:relative}


/*The following is the hover during the ON state RIGHT SIDE OF TAB*/
#nav2 a.after{background:url(../images/lefthover.jpg)} /*Appearence of left side of the Tab during ON state*/
#nav2 a.after:hover{background:url(../images/righthover.jpg)} /*Appearence of left side of the Tab during rollover*/