/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	Autor: Daniel Simões Augusto
	E-mail: daniel.simoes@arcasolutions.com
	
	Path: layout/
	
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	Welcome to wonderful world of CSS style!
	
	This CSS controls the styles that's using in the navbar!
	This navbar is all it was made with the CSS, we use Java Script only for make the actions in the buttons...All 
	rollover and replacement of image we made in this file!
	
	Be careful with the changes!!!!
	
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/*		------	:hover simulator for IE		------	This code fix the bug of Drop-Down in IE (bug with menu CSS)	*/

body { 
	behavior:url(layout/csshover.htc);	/* Define here the path for the Javascript 												*/
}


#navbar { 
	width: 781px;				/* False value for IE, more 30px																*/
	height: 32px;				/* Define the height that the menu need be showed												*/
	font-size: 82%;
	margin: 0 7px 0 7px;		
	padding: 0;

	border: 1px solid #4A0A62;
	border-top: 0;
	border-bottom: 3px solid #4A0A62;
	background: #69507A url("../images/layout_yrem/bg_navbar.gif") repeat-x top left;
								/* Define here the Background Color 															*/
	
	voice-family: "\"}\""; 		/* The Hack start here																			*/
	voice-family:inherit;		/* This code tricks the IE5win to get the correct value											*/									
	width: 753px;				/* This the correct value																		*/
	}
html>body #navbar				/* Be nice to Opera																				*/
{
	width: 753px;				/* Opera Browser has some problems with reder...So this code helps to render the correct value 	*/ 
								/* IE5win fudge ends 																			*/
}

#navbar ul { 					/* This code control the UL inside of div '#navbar'												*/
	width: 100%;
	padding: 0;					/* Remove all spaces inside 'padding'															*/
	margin: 0;					/* Remove all margins																			*/
	border:0;
	list-style-type: none;
}

.first
{
	background: transparent url("../images/layout_yrem/bg_navbar_li.gif") no-repeat top left;
}

#navbar li {					/* This code control the IL inside of UL div '#navbar'											*/
	display: none;
	float: left;				/* Float left to be one to the side of the other												*/
	margin: 0;
	padding: 0 1px 0 0;
	list-style: none;			/* This code remove the style list																*/
	background: transparent url("../images/layout_yrem/bg_navbar_li.gif") no-repeat top right;
								/* This background is the verge image 															*/

	display: block;				/* This option make the LI like Block element 													*/
	position: relative;
	width: auto;
}

#navbar a { 					/* This code control the visual of the tag A inside of the LI									*/
	font-size: 120%;
	font-weight: 100;
	padding: 7px 13px;
	color: #FFF;

	display: block;
	float: left;/* \*/float: none;/*  */
	text-decoration: none;
}

#navbar a:hover, #navbar a.active , #navbar li:hover  
								/* code for hover and active effects															*/
{
	color: #DCD5E1;
	background: #735983 url("../images/layout_yrem/bg_navbar_on.gif") repeat-x top center;
								/* This background is the image that we replacement when the mouse is over the link				*/
}

#navbar a.active
{
	font-weight: bold;
	background: #735983 url("../images/layout_yrem/bg_navbar_on.gif") repeat-x top center;
								/* This background is the image that we replacement when the link is atived						*/
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Here Start the code that control the structure of the DropDown menu!

	Below is all code that control the Submenu in DropDown.
	Be careful with the changes!!!!
	
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#navbar li ul a					/* Here we have the code that control ths a isinde the #navbar > li > ul...You can define the 
									height of the links and the visual															*/

{ 
	font:	8pt/10px Arial, Helvetica, sans-serif;
	text-align: left;
	padding: 5px;

	border-bottom: 1px solid #857094;
	background: #8F7B9C;
}

#navbar li ul a:hover 			/* Here you can define the link hover isinde the #navbar > li > ul								*/
{
	background: #867393;
	color: #4A2E5D;
}

#navbar li ul a.subnavbar 		/* Here we have the code that you can put one image in the sublink in the dropdown menu
									For use this you need define the class .subnavbar in the link ' A '							*/
{
	background: #867393 url("../images/layout_yrem/icon_seta_menu.gif") no-repeat right ;
	color: #4A2E5D;
}

#navbar li ul a, #navbar li ul a:active, #navbar li ul a:visited, #navbar li ul a:link{
	font-weight: 100;
}

#navbar li ul a:hover.subnavbar {
	background: #867393 url("../images/layout_yrem/icon_seta_menu.gif") no-repeat right ;
}



* html #navbar li a 			/* This code fix error in IE6's in to expand the area that the mouve is hover					*/
								/* Corrige erro do IE6's em expandir area clicavel 												*/
{
	position: relative;
}

#navbar li ul 					/* Here you can define the style in the UL (dropdown)											*/
{ 
	width: 150px;				/* Define the width size for the Dropdown														*/	
	visibility: hidden;
	position: absolute;
	z-index: 10;
	
	border: 1px solid #9885A7;
	border-top: 3px solid #4A0A62;
	border-right:0;
	background: #8F7B9C left repeat-x;
}


html>body #navbar li ul 		/* Previne barra de rolagem no carregamento 													*/
{
	display: none;
}

#navbar li li {
	width: 100%;
}


#navbar li li ul 				/* Corrige posição 																				*/
{
	top: 0;
	left: 100%;
}


div#navbar li:hover ul, #navbar li:hover li:hover ul, #navbar li:hover li:hover li:hover ul 
								/* Simula child selector no IE																	*/	
{ 
	visibility: visible;
}

div#navbar li:hover li ul, #navbar li:hover li:hover li ul, #navbar li:hover li:hover li:hover li ul { 
	visibility: hidden;
}

#navbar ul#navbarList li:hover>ul /* do the normal show, with increased specificity, for good browsers 							*/
{ 
	display: block;
	visibility: visible;
}