.navTopic { background-color:#0065a2;color:#b6d9ef;font: bold 14px "Lucida Sans", Arial, serif; 

	width: 185px; 
	text-align: left; 
	display: block;
	padding: 3px 28px 2px 18px;}


.menuSpace { 
margin-bottom:8px; 
padding-bottom: 8px; 
border-bottom: 2px solid #666;
}





/* common no extension */
div.subMenuItem,
div.subMenuItemSelected ,
div.menuHome,
div.menuItem,
div.menuItemSelected,
div.menuSection,
div.menuSectionOpen,
div.menuSectionOpenSelected       { 
	display: block; 
	padding:0; 
	clear: both; 
	 }




/*The background image is of the button in it's hover state*/
div.menuHome									{ 	background: url(navigationNew.gif) no-repeat 0 0px ; 					border-bottom: 1px solid #ccc; }
div.menuItem    								{ 	background: url(navigationNew.gif) no-repeat 0 -550px; 					border-top: 1px solid #a1d0ee; 
																																					border-right: 1px solid #487fa0; 
																																					border-bottom: 1px solid #487fa0; 
																																					border-left: 1px solid #a1d0ee;  }

div.menuItemSelected    					{  		background: url(navigationNew.gif) no-repeat 0 0px ; 				border-bottom: 1px solid #ccc; }

div.menuSection   							{ 	background: url(navigationNew.gif) no-repeat 0 -100px ; 				border-top: 1px solid #a1d0ee; 
																																					border-right: 1px solid #487fa0; 
																																					border-bottom: 1px solid #487fa0; 
																																					border-left: 1px solid #a1d0ee;  }

div.menuSectionOpen   						{ 	background: url(navigationNew.gif) no-repeat 0 -50px ; 					border-top: 1px solid #a1d0ee; 
																																					border-right: 1px solid #487fa0; 
																																					border-bottom: 1px solid #487fa0; 
																																					border-left: 1px solid #a1d0ee; }

div.menuSectionOpenSelected   			{ 	background: url(navigationNew.gif) no-repeat 0 -50px ; 					border-bottom: 1px solid #fff; }

div.subMenuItem 								{ 	background: url(navigationNew.gif) no-repeat 0 0px ; 					border-top: 1px solid #a1d0ee; 
																																					border-right: 1px solid #487fa0; 
																																					border-bottom: 1px solid #487fa0; 
																																					border-left: 1px solid #a1d0ee; }	

div.subMenuItemSelected  					{ 	background: url(navigationNew.gif) no-repeat 0 0px ; 					border-top: 1px solid #a1d0ee; 
																																					border-right: 1px solid #487fa0; 
																																					border-bottom: 1px solid #487fa0; 
																																					border-left: 1px solid #a1d0ee; }



/*The background image is of the button in it's normal state	 */	
div.menuHome	 a							{ 	background: url(navigationNew.gif) no-repeat 0 0px ; 				border-bottom: 1px solid #ccc; }

div.menuItem  a  								{ 		background: url(navigationNew.gif) no-repeat 0 -450px ; 										}
div.menuItemSelected   a 					{ 		background: url(navigationNew.gif) no-repeat 0 -500px ; 										}
div.menuSection   a    						{   	background: url(navigationNew.gif) no-repeat 0 -250px ; 									}
div.menuSectionOpen    a    				{ 	  	background: url(navigationNew.gif) no-repeat 0 -200px ; 										}
div.menuSectionOpenSelected    a    	{  		background: url(navigationNew.gif) no-repeat 0 -350px ; 										}	
div.subMenuItem  a							{  		background: url(navigationNew.gif) no-repeat 0 -300px ; 										}	
div.subMenuItemSelected  a 				{  		background: url(navigationNew.gif) no-repeat 0 -400px ; 										}	

.afterSectionRule { border-top: 1px solid #ccc;  } /* this adds a shorter rule above the first indented item */



/*The text color of clickable text */	
div.menuHome,								
div.menuHome a,	
div.menuItem,
div.menuItem   a,
div.menuSection,
div.menuSection   a      
{ color: #fff;  }

/*The text color of clickable text */								
div.subMenuItem,	
div.subMenuItem  a,	
div.menuSectionOpen   a,
div.menuSectionOpen

      
{ color: #000;  }



/*The text color of a selected Item  */	

div.subMenuItemSelected,	
div.subMenuItemSelected  a,	
div.menuItemSelected,
div.menuSectionOpenSelected,
div.menuItemSelected   a,
div.menuSectionOpenSelected    a         
{ 	color: #000;  }




/* font and other common attributes*/
div.subMenuItem  a,	
div.subMenuItemSelected  a,	
div.menuHome	a,
div.menuItem   a,
div.menuItemSelected   a,
div.menuSectionOpen    a,
div.menuSection   a,
div.menuSectionOpenSelected    a       { 
	font:  12px  "Lucida Sans", Arial, serif; 
	font-weight: bold; 
	text-decoration: none; 
	text-align: left; 
	display: block;
	float:left;
	height: 100%; 
	vertical-align: middle; 
	
 }




   
  
/*----------------------------------------------------------- a:hover */	

div.menuHome	 a:hover,	
div.menuItem  a:hover,
div.menuSection  a:hover {
	background-image: none;
	color: #fff;
	text-decoration:none;
	}


div.menuSectionOpen a:hover {
	background-image: none;
	text-decoration:none;
	}

div.subMenuItem  a:hover,	
div.subMenuItemSelected  a:hover {
	background-image: none;
	color: #000;
	text-decoration:none;
	}




/*make the selected section look like it can't be clicked on - keep it the same color as selected state */	
div.subMenuItem  a:hover,	
div.subMenuItemSelected  a:hover,	
div.menuSectionOpenSelected   a:hover,
div.menuItemSelected  a:hover {
	color: #000; 
	}

	
/*The color of the text when the mouse is clicking on the link  */	
div.menuItem  a:active,
div.menuItemSelected  a:active,
div.subMenuItem  a:active,
div.subMenuItemSelected  a:active,
div.menuSection  a:active,
div.menuSectionOpen   a:active,
div.menuSectionOpenSelected   a:active {
	color: #000; 
	}




	
/*----------------------------------------------------------- indent*/	
 
 .L2   {
	padding: 3px 5px 3px 28px;
	display: block;
	margin: 0; 
	}

 .L1   {
	padding: 3px 5px 3px 18px;
	display: block;
	margin: 0; 
	}

/*----------------------------------------------------------- size*/	

 .i2  {
	height: 24px; 
	margin-left:0px;
	width:185px /*185 minus the margin */
	}

  .i2 a   {
	width:185px; /*185 minus the margin */
	}


 .i1  {
	height: 24px; 
	margin-left:0px;
	width:185px /*185 = full width */
	}

  .i1 a   {
	width:185px; /*185 = full width*/
	}
 
 
	
.smallType{font: bold 11px  "Lucida Sans", Arial, serif; line-height:12px;	}

.bigType {font: bold 14px "Lucida Sans", Arial, serif;	line-height:14px;}