/*		------	Basic style	------		*/
#barraIconos {
	display: block;
	float:right;
	width:500px;
	padding-left:0;
}

#barraIconos ul {
	margin: 0;
	padding: 0;
	/*border: 0;*/
	list-style-type: none;
}

#barraIconos li {
	margin: 0;
	padding: 0;
	/*border: 0;*/
	display: block;
	float: right;
	position: relative;
}

#barraIconos a {
	display: block;
}

* html #barraIconos li a {
	position: relative;
}

#barraIconos li ul {
	visibility: hidden;
	position: absolute;
	z-index: 100;
}

html>body #barraIconos li ul {
	display: none;
}

#barraIconos li li {
	width: 100%;
}

/* fix the position */
#barraIconos li li ul {
	top: 0;
	left: 100%;
}

/* simulate child selector for IE */
div#barraIconos li:hover ul,
#barraIconos li:hover li:hover ul,
#barraIconos li:hover li:hover li:hover ul {
	visibility: visible;
}
div#barraIconos li:hover li ul,
#barraIconos li:hover li:hover li ul,
#barraIconos li:hover li:hover li:hover li ul {
	visibility: hidden;
}

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


/*		------   Make-up	--------			*/

#barraIconos {
	font-family: verdana, sans-serif;
	font-size: 0.9em;
	background-color:#000;
	background-image:url(../catala/img/composicion/bgBarraNegro.gif);
	background-repeat:repeat-x;
	background-position:0% 0%;
	
	margin:0;
}

#barraIconos a {
	text-decoration: none;
	text-align: center;
	color:#fff;
	padding:1px 3px 1px 4px;
}

#barraIconos li {
	margin:0;
	padding:0 0 0 0;
	font-weight:bold;
	height:18px;
}
#barraIconos li:hover {
	padding:0 0 0 0;
}
#barraIconos li a {
	background-position:4px 2px;
	background-repeat:no-repeat;	
	color: #fff;
}
#barraIconos li:hover a {
	background-position:4px 2px;
	background-repeat:no-repeat;	
	color: #fff;
}

		/*----- ICONOS-------*/		
		#barraIconos li span{
			padding:0 10px 0 20px;
		}
		/* Agenda */
		#barraIconos li.agenda{
			background-image:url(../catala/img/composicion/bgBarra01.gif);
			background-repeat:repeat-x;
			background-position:0% 0%;
		}
		#barraIconos li.agenda a{
			background-image:url(../catala/img/iconos/icoAgendaB.gif);
		}
		/* Info */
		#barraIconos li.Butlletí{
			background-image:url(../catala/img/composicion/bgBarra02.gif);
			background-repeat:repeat-x;
			background-position:0% 0%;
		}
		#barraIconos li.Butlletí a{
			background-image:url(../catala/img/iconos/icoInfoB.gif);
		}

		/* planol */
		#barraIconos li.Plànol{
			background-image:url(../catala/img/composicion/bgBarra03.gif);
			background-repeat:repeat-x;
			background-position:0% 0%;
		}
		#barraIconos li.Plànol a{
			background-image:url(../catala/img/iconos/icoPlanolB.gif);
		}

		/* tramits */
		#barraIconos li.Tràmits{
			background-image:url(../catala/img/composicion/bgBarra04.gif);
			background-repeat:repeat-x;
			background-position:0% 0%;
		}
		#barraIconos li.Tràmits a{
			background-image:url(../catala/img/iconos/icoTramitB.gif);
		}

		/* mapaWeb */
		#barraIconos li.mapaWeb{
			background-image:url(../catala/img/composicion/bgBarra05.gif);
			background-repeat:repeat-x;
			background-position:0% 0%;
		}
		#barraIconos li.mapaWeb a{
			background-image:url(../catala/img/iconos/icoMapaWebB.gif);
		}

#barraIconos li li {
	width: 175px;/* 	we can't use 100% because LIs have margin and padding (although latter is more important) */
	height:auto;
	font-weight:normal;
	border-top:1px solid #E8FFEB;
	border-bottom:1px solid #E8FFEB;
	background-color:#F1FAF2;
}
#barraIconos li li:hover{
	border-top:1px solid #A4C1A5;
	border-bottom:1px solid #5B895C;
	background-color:#CBE7CE;
	background-image:url(../catala/img/composicion/bgOpciones.gif);
	background-position:0% 50%;
	background-repeat:repeat-x;
}

#barraIconos li li:hover a{
}

#barraIconos li ul {
	color: #000;
	background-color: #E8FFEB;
	border: 1px solid #5F7062;
	width: 175px;
}

#barraIconos li ul a {
	text-align: left;
	padding-left: 18px;
	color:#000;
	background-image: url(../catala/img/iconos/flechaD2.gif);
	background-repeat: no-repeat;
	background-position: 2px 3px;
	
}

#barraIconos ul li a.opciones {
	color:#223322;
	background-image: url(../catala/img/iconos/flechaD2.gif);
	background-repeat: no-repeat;
	background-position: 2px 3px;
	
}
#barraIconos ul li a.opciones:hover {
	background-image: url(../catala/img/iconos/flechaD2.gif);
	background-repeat: no-repeat;
	background-position: 2px 3px;
	/*color:#fff;*/
}

#barraIconos li ul a.submenu {
	background-image: url(../catala/img/iconos/flechaD2.gif);
	background-repeat: no-repeat;
	background-position: 2px 5px;
}

/*		------   Specific fixes	(thank to W3C for these) --------			*/
/* 
		I'm gonna move the submenus 5px up
		5px works fine here and it is roughly calculated as:
			padding-bottom + margin-bottom + border-bottom of the LI
			+
			*-top values of the LI
			
		Mostly it needs a bit of trial and error.
		Basic idea is to remove the scrollbar when menu re-positioning is perfomed. Of course, script could take care of that, but that takes too much code - this is easier.
*/
#barraIconos li li ul {
	margin-top: -5px;
}