/********** Styling for a horizontal Menu **************/

/*

	Typically this is used as a local menu for a particular page

	as opposed to an universal menu which is applicable to all pages in the website

	

	Usage

		* all the images used by this tabbed bar should be placed in a folder "img" within the folder in which this CSS file is put

		* 



	This will go hand in hand with the zSGTopMenu01.asp and its derived classes

	very important for the script to work properly

		* selected item (current page of the menu bar) should be coded as <li id="selectedItem"> 

	

	Madhu 21 Jan 2009

*/

#zSGPageMenu

{

	float: left;

	width: 110%;

	height: 42px;

	/* 

		if the menu bar is to be rendered as a single bar, this background image should be uncommented 

		and the individual ul-li background-image style should be commented

	*/

	background-image: url(img/pagemenudiv.png);

}



#zSGPageMenu ul 

{

	margin:0px;

	padding:0px;

	margin-left:50px;

	list-style-type:none;

}



#zSGPageMenu ul li 

{

	float:left;

	margin-top:0px;

	/* 

		if the menu bar is to be rendered transparent and each menu item as a separate button, 

		this background image should be uncommented 

		and the top most element (menu div) background-image should be commented

	background-image: url(img/pagemenudiv.png);

	*/

	margin-left:4px;

}





#zSGPageMenu ul li a 

{

	display:block;

	color:#ffffff;

	font-weight:bold;

	font-family:Arial, sans-serif;

	font-size:12px;

	text-decoration:none;

	padding-left:30px;

	padding-right:30px;

	line-height:42px; /*height or vertical space between lines */

}



#zSGPageMenu ul li a:hover 

{

	/*no need to explicitly mention as it is specified in 'a' above already */

	/*display:block;

	color:#ffffff; 

	font-weight:bold;

	font-family:Arial, sans-serif;

	font-size:12px;

	padding-left:30px;

	padding-right:30px;

	line-height:25px;*/

	text-decoration:underline;

	/*background-image:url(img/PageMenuDivGlowHover.png);*/

	background-image:url(img/PageMenuDivGlow4Sliced.png);

	background-repeat:repeat-x;

	/* on hover, make it look move slightly towards right and bottom ...

	margin-left:1px;

	margin-top:1px;*/

}



#zSGPageMenu #selectedItem a 

{

	/*display:block;

	font-weight:bold;

	font-family:Arial, sans-serif;

	font-size:12px;

	padding-left:30px;

	padding-right:30px;

	line-height:25px;

	color:#ffffff;*/

	text-decoration:none;

	/*background-image:url(img/pagemenudivglow.png);*/

	background-image:url(img/PageMenuDivGlow3Sel.png);

}



#zSGPageMenu #selectedItem a:hover 

{

	/*display:block;

	color:#ffffff;

	font-weight:bold;

	font-family:Arial, sans-serif;

	font-size:12px;

	padding-left:30px;

	padding-right:30px;

	line-height:25px;*/

	/*background-image:url(img/pagemenudivglow.png);*/

	background-image:url(img/PageMenuDivGlow3Sel.png);

}