/* styles for home page carousel */

#featured{ 														width:660px; 
																	border: 1px solid #AAAAAA;
																	background-color: #FFF;
																	height:280px;
																	overflow: inherit; 
																	margin: 0 0 20px 0; }

#featured ul.ui-tabs-nav{ 									overflow: inherit;
																	list-style:none; 
																	padding:0;
																	margin:0; 
																	width:660px; 
																	height:30px; 
																	background-color: #CCC;
																	border-top: 1px solid #FFF;
																	border-bottom: 1px solid #999; }

/* 	the combined width of the carousel "buttons" (set below) needs to be equal to 661 pixels, minus one pixel per item.
		the button widths, then, would be the combined width of the container divided by the number of buttons, rounded down (if necessary)
		to the nearest whole number. so for a four-button carousel, 661 - 3 = 658 / 3 = 219.3 = 219 */ 
#featured ul.ui-tabs-nav li { 							display: block;
																	float: left;
																	text-align: center;
																	vertical-align: middle;
																	border-right: 1px solid #999; 
																	font-size: 12px;
																	font-weight: bold;
																	width: 219px; }


/*		in the event the combined width of the buttons doesn't match the width of the button container, the following code can force one
		of the buttons to be slightly larger, so the buttons take up the entire width of the container. */
#nav-fragment-3 {												 }				


/*		the last carousel "button" doesn't need a right border, so take it off here. the number at the end of the selector (i.e. #nav-fragment-4)
		needs to be updated any time buttons are added or removed. */
#nav-fragment-3 { 											border-right-width: 0px!important;
																	width: 220px!important; }


#featured ul.ui-tabs-nav li img {						width: 30px;
																	height: 20px; }

#featured ul.ui-tabs-nav li span { 						font-size:12px;  
																	line-height:16px;
																	display: block;
																	padding-top: 5px; }

#featured li.ui-tabs-nav-item a { 						display:block; 
																	padding: 5px 0;
																	text-decoration:none;
																	color:#FFF;
																	background:#606060; 
																	line-height:20px;
																	outline:none; }

#featured li.ui-tabs-nav-item a:hover { 				background:#999; }

#featured ul.ui-tabs-nav li.ui-tabs-selected a,
#featured ul.ui-tabs-nav li.ui-tabs-active a { 		background:#FFF;
																	color: #606060;  }

#featured .ui-tabs-panel{ 									padding: 0 0 0 0; }

#featured .ui-tabs-hide{ 									display:none;  }






.ui-tabs-panel { 												height: 250px;
																	width:660px; }
														
#fragment-1 {													background: url(/images/redesign/featured-01.jpg) no-repeat; }
#fragment-2 {													background: url(/images/redesign/featured-02.jpg) no-repeat; }
#fragment-3 {													background: url(/images/redesign/featured-03.jpg) no-repeat; }
#fragment-4 {													background: url(/images/redesign/featured-04.jpg) no-repeat; }

.featuredText h2 { 											padding: 0 0 0 0;
																	margin: 0 0 .4em 0; 
																	font-size: 1.8em;
																	font-weight: bold;
																	line-height: 1.2em;
																	background-image: none!important; }

.featuredText p { 											font-size: 1.4em!important;
																	line-height: 1.3em; }




.featuredText a {												font-weight: bold;
																	text-decoration: none; }
														


#fragment-1 .featuredText {					padding: 50px 260px 20px 50px; }
#fragment-1 .featuredText h2 { 				color: #1C5E86;
														line-height: 26px;}
#fragment-1 .featuredText p {					margin: 0 0 20px 0;
														line-height: 1.4em;
														color: #000;}
#fragment-1 .featuredText a { 				color: #1C5E86;}
										
	



	
#fragment-2 .featuredText {					padding: 50px 30px 0px 370px;}
#fragment-2 .featuredText h2 { 				color: #18539c;
														line-height: 21px; 
														font-size: 18px; }
#fragment-2 .featuredText p {					color: #000;
														line-height: 1.4em;
														margin-top: 10px; }
#fragment-2 .featuredText a {					color: #18539c;}

 


	
#fragment-3 .featuredText {					padding: 30px 30px 0px 30px;  }
#fragment-3 .featuredText h2 { 				font-size: 18px;
														line-height: 21px;
														text-align: center;
														color: #1C5E86;}
#fragment-3 .featuredText p {					margin-top: 12px;
														color: #000000;}
#fragment-3 .featuredText a { 				color: #1C5E86; }









/*		styles for the "link box" that sits on top of the carousel, making the entire image clickable. */

.linkBox {														position: absolute; 
																	z-index: 10;
																	height: 250px;
																	width:660px; }

.linkBox a {													display: block;
																	height: 250px;
																	width:660px; }
																	
.linkBox img {													height: 250px;
																	width:660px;
																	border: 0px transparent none!important; }





/* 	a span with the class "fitin" can be used, if necessary, around a word (or words) to 
		to decrease letter spacing, in the event a "legend" item's text is too long for the box. */

.fitin {															letter-spacing: -.02em;
																	display: inline!important; }