/* @override 
	http://127.0.0.1/SitiPicov/Italiani/www.italianisrl.com/_templates/italiani_template/css/navigation.css */

/* @group Browser CSS RESET */

/* BROWSERS CSS RESET */
/* E già impostato sul folgio di stile principale

/* @end */


/* @group elf-navmenu */

/* contenitore esterno */
.elf-navmenu {
	float: left; /* cosi l'altezza si adatta al contenuto */
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}

/* barra orizzontale principale */
.elf-navmenu ul {
	float: left; /* cosi l'altezza si adatta al contenuto */
	width: 100%; /* lo devo sovrascrivere per i livelli successivi */
	position: relative; /* cosi l'absolute interno diventa relativo a questo ul -> se nell ul ul (prima tendina) metto left=0 mi posiziono alla left di questo ul e non della pagina web (margine sx) */
	background-image: url('../img/menubar_bg.gif');
}
/* Annullo la formattazione per il livello successivo */
.elf-navmenu ul ul {
	background-image: none;
}

 /* li barra orizzontale principale */
.elf-navmenu ul li {
	display: block;	
	float: left;
	margin-left: 4px;	
	margin-right: 4px;
	width: 15%;
	height: 35px;

	background: orange;
	background-image: url('../img/menutitle_bg_tile_off.gif');
}
/* Annullo la formattazione per il livello successivo */
.elf-navmenu ul ul li {
	background: none;
}

/* sfondo comune del li della barra menu con versione bg */
.elf-navmenu ul li span {
	background-image: url('../img/menutitle_bg_flex_off.png');
	height: 35px;
	margin-top: -35px; /* lo metto qui cosi se non uso i bg non devo inserirlo in ul li a */
	display: block;
}
/* sfondo meta-sx del li */
.elf-navmenu ul li span.bg-l {	
	background-position: left center;
	width: 50%;
}
/* sfondo meta-dx del li */
.elf-navmenu ul li span.bg-r {	
	background-position: right center;
	margin-left: 50%; /* IMP IMP FIX evita la sovrapposizione degli sfondi ed il problema del pixel aggiuntivo sulle width dispare */
}
/* Annullo la formattazione per il livello successivo */
.elf-navmenu ul ul li span {	
}


/* effetto over su elemento diretto  */ 
.elf-navmenu ul li:hover,
.elf-navmenu ul li.iehover {
	background-image: url('../img/menutitle_bg_tile_over.gif');
}
/* Annullo la formattazione per i livelli successivi */
.elf-navmenu ul li:hover li,
.elf-navmenu ul li.iehover li {
	background-image: none;
}

/* effetto over su elementi bg aggiuntivi */ 
.elf-navmenu ul li:hover span,
.elf-navmenu ul li.iehover span {
	background-image: url('../img/menutitle_bg_flex_over.png');
}
/* Annullo la formattazione per i livelli successivi */
.elf-navmenu ul li:hover ul span,
.elf-navmenu ul li.iehover ul span {
	background-image: none;
}

/* effetto on su elemento diretto  */
.elf-navmenu ul li.currentpath  {
	background-image: url('../img/menutitle_bg_tile_on.gif');
}
/* Annullo la formattazione per i livelli successivi */
.elf-navmenu ul ul li.currentpath {
	background-image: none;
}

/* effetto on su elementi bg aggiuntivi */
/* su IE6 posso togliere il > cosi almeno il titolo del menu corrente viene evidenziato*/
/* .elf-navmenu ul li.currentpath span IE6 */
.elf-navmenu ul li.currentpath > span  {
	background-image: url('../img/menutitle_bg_flex_on.png');
}
/* Annullo la formattazione per i livelli successivi */
.elf-navmenu ul ul li.currentpath span {
	background-image: none;
}

.elf-navmenu ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	color: black;
	position: relative; /* mette il testo davanti SU IE e consente di evitare lo z-index sugli sfondi*/
	
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;

	/* margin-bottom1: -35px;  IMP IMP: serve solo se uso gli span di bg*/
	height: 35px; /* 35 height - 5x2 margin - 1x2 border */
	line-height: 35px;
}







/* I tendina (e successive se non li sovrascrivo) */
/* Per annullarle devo sovrascrivere le proprietà del livello precedente che è la barra principale orizzontale */
.elf-navmenu ul ul { /* second-level lists */
	/* resetto le proprietà inpostate al primo livello (barra principale) */
	float: none; /* è irrilevante */
	padding: 0px;
	background: none;
	width: auto; /* sovrascrive il width del primo ul */

	position: absolute;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	
	padding: 1px;
}
.elf-navmenu ul ul li { /* li prima tendina (ed anche gli altri se non li sovrascrivo) */
	/* resetto le proprietà inpostate al primo livello (barra principale) */
	float: left; /* FIX IE 6-7: potrei mettere float none senza clear successivo ma in questi browser si creano degli spazi aggiuntivi fra i li che contengono ul*/
	clear: left; /* necessario per i float precedente se volgio impostare la larghezza qui e non sul parent ul (imposto la largheza in un punto solo e se qui non la metto viene ereditata qualla del precedente livello ) */
	width: 170px;  /* lo devo impostare qui per sovrascrivere quello del livello 1 */
	height: auto;
	/* height1: 24px; */
	padding: 0px;
	margin: 0px;
}

/* sfondo elemento diretto li di II livello e successivi */
.elf-navmenu ul li ul li,
.elf-navmenu ul li:hover ul li,
.elf-navmenu ul li.iehover ul li {
	background-image: url('../img/menuitem_bg_tile_off.gif');
}

/* sfondo elementi bg aggiuntivi li di II livello e successivi */
.elf-navmenu ul li ul span,
.elf-navmenu ul li:hover ul span,
.elf-navmenu ul li.iehover ul span {
	background-image: url('../img/menuitem_bg_flex_off.png');
	margin-top: -24px;
	height: 24px;
}

/* effetto over elemento li di II livello */ 
.elf-navmenu ul li:hover ul li:hover,
.elf-navmenu ul li.iehover ul li.iehover {
	background-image: url('../img/menuitem_bg_over.gif');
}

/* effetto over elementi bg aggiuntivi */ 
.elf-navmenu ul ul li:hover > span,
.elf-navmenu ul ul li.iehover > span {
	background-image: url('../img/menuitem_bg_flex_over.png');
}

/* effetto on elementi li di II livello */
.elf-navmenu ul ul li.currentpath,
.elf-navmenu ul li:hover ul li.currentpath,
.elf-navmenu ul li.iehover ul li.currentpath {
	background-image: url('../img/menuitem_bg_tile_on.gif');
}
/* effetto on elementi bg aggiuntivi on */
.elf-navmenu ul ul li.currentpath > span {
	background-image: url('../img/menuitem_bg_flex_on.png');
}


/* link delle sottotendine (in poi se non li sovrascrivo) */
.elf-navmenu ul ul li a {
	/* resetto le proprietà impostate al primo livello (barra principale) */
	text-align: left;
	font-size: 13px;
	color: black;
	font-weight: normal;

	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	overflow: hidden;
	margin-bottom: 0px; /* IMP cosi il float left considera l'altezza esterna */
	
	/* height1: auto;  35 height - 5x2 margin - 1x2 border */
	height: 24px; /* 35 height - 5x2 margin - 1x2 border */
	line-height: 24px;
}



.elf-navmenu ul li ul li a:hover  {
	background-image: url('../img/submenu_arrow.gif') ;
	background-position: 96% center;
	background-repeat: no-repeat;
	border-color: #ccc;
	color: black;
}


.elf-navmenu ul ul {
	z-index: 999; /* FIX per il position relative altrimenti le tendine dei livelli successivi non stanno davanti */
}

/* GLI ELEMENTI CARTELLA HANNO LA FRECCIA */
.elf-navmenu ul li ul li.noleaf a {
	/* NB: eredita tutte le proprietà di ul ul li a -> metto solo le differeze */
	background-image: url('../img/submenu_arrow_over.gif');
	background-position: 96% center;
	background-repeat: no-repeat;
}
.elf-navmenu ul li ul li.noleaf a:hover {
	/* NB: eredita tutte le proprietà di ul ul li a:hover -> metto solo le differeze */
	background-image: url('../img/submenu_arrow_over.gif');
}
/* GLI ELEMENTI LEAF NON HANNO MAI LA FRECCIA */
.elf-navmenu ul li ul li.leaf a {
	/* NB: eredita tutte le proprietà di ul ul li a -> metto solo le differeze */
	background-image: none;
}
.elf-navmenu ul li ul li.leaf a:hover {
	/* NB: eredita tutte le proprietà di ul ul li a -> metto solo le differeze */
	background-image: none;
}


/* II tendina (e successive se non li sovrascrivo) */
.elf-navmenu ul ul ul { /* third-and-above-level lists */
	margin: -20px 0 0 173px; /* Dipende dalla larghezza del menu */
}


/* rollover delle tendine + ie patch via js */
/* posizione iniziale */
.elf-navmenu ul li:hover ul ul,
.elf-navmenu ul li:hover ul ul ul,
.elf-navmenu ul li:hover ul ul ul ul,
.elf-navmenu ul li:hover ul ul ul ul ul,
/* patch per IE<=7 */
.elf-navmenu ul li.iehover ul ul,
.elf-navmenu ul li.iehover ul ul ul,
.elf-navmenu ul li.iehover ul ul ul ul, 
.elf-navmenu ul li.iehover ul ul ul ul ul { 
	left: -999em;
}
/* rollover*/
.elf-navmenu ul li:hover ul,
.elf-navmenu ul li li:hover ul,
.elf-navmenu ul li li li:hover ul,
.elf-navmenu ul li li li li:hover ul,
.elf-navmenu ul li li li li li:hover ul,
/* patch per IE<=7 */
.elf-navmenu ul li.iehover ul,
.elf-navmenu ul li li.iehover ul,
.elf-navmenu ul li li li.iehover ul
.elf-navmenu ul li li li li.iehover ul,
.elf-navmenu ul li li li li li.iehover ul {
	left: auto; 
	display: block; /* FIX IE7 altrimenti le tendine non scompaiono */
}
/* FIX IE 6 per livelli successivi alla prima tendina (dal 3 in poi fino al 5 -> vedo il 6 livello) che altrimenti, malgrado il patch JS applichi correttamente lo stile iehover, stranamente perdono l'hover e non fanno comparire i successivi */
.elf-navmenu ul li.iehover li.iehover li.iehover ul ul, 
.elf-navmenu ul li.iehover li.iehover li.iehover li.iehover ul ul,  
.elf-navmenu ul li.iehover li.iehover li.iehover li.iehover li.iehover ul ul { 
	left: -999em;
}
.elf-navmenu ul li.iehover li.iehover li.iehover ul, 
.elf-navmenu ul li.iehover li.iehover li.iehover li.iehover ul, 
.elf-navmenu ul li.iehover li.iehover li.iehover li.iehover li.iehover ul { 
	left: auto;
}


/* Evidenziazione del path dinamico (con IE <=6 non funziona ma non è un problema critico) */
/* I livello titolo del menu*/
.elf-navmenu li.noleaf:hover > span a {
}
/* Livelli successivi */
.elf-navmenu li.noleaf:hover li.noleaf:hover > a {
	background-image: url('../img/submenu_arrow.gif');
	background-position: 96% center;
	background-repeat: no-repeat;
	border-color: #ccc;
	color: black;
}


/* ACCESS KEY */
.elf-navmenu a b {
	font-weight: normal; /* annullo la formattazione del b */
	border-bottom: 1px #fff solid;
}


/* @end */




/* @group elf-navmenu custom istances */


.elf-navmenu {
}

/* barra orizzontale principale */
.elf-navmenu ul {
	float: right;
	background: none;
	height: 40px;
	width: 100%;
}

/* titoli menu */
/* off */
.elf-navmenu ul li {
	background: none;
	width: 120px;
	margin: 0;
	padding: 0;
	border: 0;
	margin-left: 10px;
	color: #454b3e;
}
/* over */ 
.elf-navmenu ul li:hover,
.elf-navmenu ul li.iehover {
	background: none;
}
/* on */
.elf-navmenu ul li.currentpath  {
	background: none;
}
.elf-navmenu ul li a {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;

	color: #999;
	height: 40px; /* 35 height - 5x2 margin - 1x2 border */
	line-height: 44px;
	font-weight1: bold; 
	-webkit-tap-highlight-color: rgba(255,255,255,0); /* Elimino il lampeggio dovuto all'evidenziazione del link su IOS */
}
.elf-navmenu ul li a:hover,
.elf-navmenu ul li a:focus,
.elf-navmenu ul li.currentpath a {
	font-weight1: bold;
	color: #333;
	background-color: #eee;
}
/* annullo l'effetto per i successivi livelli */
.elf-navmenu ul li.currentpath ul li a {
	font-weight: normal;
	color: black;
	line-height: 24px; /* pari al'altezza della linea di menu */
}



.elf-navmenu ul li a {
	background-image1: url('../img/btn_mainmenu_combo_all.png');
	background-repeat: no-repeat;
	background-position: 0 0; /* center 100%; KO IE 6*/
	-webkit-transition: background-position 600ms; /* Safari and Chrome */ 
	-moz-transition: background-position 600ms; /* Firefox */
	-o-transition: background-position 600ms; /* Opera */
	transition: background-position 600ms; /* W3C */
}
.elf-navmenu ul li a:hover,
.elf-navmenu ul li a:focus,
/*.elf-navmenu ul li.id-home_menuitem.currentpath a NON OK SU IE6 -> nella generazione faccio aggiungere la classe a.currentpath anche sul a interno al li */
.elf-navmenu ul li a.currentpath
{
	background-position: 0 -40px;
	-webkit-transition: background-position 200ms; /* Safari and Chrome */ 
	-moz-transition: background-position 200ms; /* Firefox */ 
	-o-transition: background-position 200ms; /* Opera */
	transition: background-position 200ms; /* W3C */
	color: #333;
	}

/* off su bg aggiuntivi */
.elf-navmenu ul li span {
	background-image1: url('../img/menutitle_bg_flex_off.png');
	height: 35px;
	margin-top: -35px; /* lo metto qui cosi se non uso i bg non devo inserirlo in ul li a */
}
/* over su bg aggiuntivi */
.elf-navmenu ul li:hover span,
.elf-navmenu ul li.iehover span {
	background-image1: url('../img/menutitle_bg_flex_over.png');
	
}

/* on su bg aggiuntivi */
/* su IE6 posso togliere il > cosi almeno il titolo del menu corrente viene evidenziato*/
/* .elf-navmenu ul li.currentpath span per IE6 */
.elf-navmenu ul li.currentpath > span  {
	background-image1: url('../img/menutitle_bg_flex_on.png');
	
}


/* voci menu */
/* off */
.elf-navmenu ul li ul li,
.elf-navmenu ul li:hover ul li,
.elf-navmenu ul li.iehover ul li {
	background-image1: url('../img/menuitem_bg_tile_off.gif');
	background-image: none;
	background-color: #eee;
	opacity: 0.90;
	color:  black;
	padding: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
}
/* over */
.elf-navmenu ul li:hover ul li:hover,
.elf-navmenu ul li.iehover ul li.iehover {
	background-image1: url('../img/menuitem_bg_over.gif');
	background-image: none;
	text-decoration: underline;
}
/* on */
.elf-navmenu ul ul li.currentpath,
.elf-navmenu ul li:hover ul li.currentpath,
.elf-navmenu ul li.iehover ul li.currentpath {
	background-image1: url('../img/menuitem_bg_tile_on.gif');
	background-image: none;
	background-color: #999;
	text-decoration: underline;

}









.elf-navmenu .disabled {
	/* sui menu visibility: hidden cedrebbe un buco */ 
	display: none;
}

/* @end */



/* @group elf-navbar */

/* In genere è usato per una larghezza variabile dei tasti */


/* contenitore esterno */
.elf-navbar {
	float: left; /* cosi l'altezza si adatta al contenuto */
	width: 100%;
	/* overflow1: hidden; */
}

/* barra orizzontale principale */
.elf-navbar ul {
	float: left; /* cosi l'altezza si adatta al contenuto */
	width: 100%;
	background: url(../img/sfondo_submenu_on.gif) repeat-x;
}

.elf-navbar ul li {
	display: block;
	float: left;
	
	/* *display: inline; zoom: 1;  IMP FIX IE 6 è meglio di lasciare display block che causa extra margini */
    
	margin-left: 4px;	
	margin-right: 4px;
	/* width1: 22%;  se uso gli span di BG è necessario per IE6 */
	height: 35px;
}
/* NB bg causano problemi su IE& se non è impostata la larghezza del li*/
.elf-navbar ul li span {
	background-image: url('../img/menutitle_bg_flex_off.png');
	height: 35px;
	margin-top: -35px; /* lo metto qui cosi se non uso i bg non devo inserirlo in ul li a */
	display: block;
 }
/* sfondo meta-sx del li */
.elf-navbar ul li span.bg-l {	
	background-position: left center;
	width: 50%;
	background-color: lightsalmon;
}
/* sfondo meta-dx del li */
.elf-navbar ul li span.bg-r {	
	background-position: right center;
	margin-left: 50%; /* IMP IMP FIX evita la sovrapposizione degli sfondi ed il problema del pixel aggiuntivo sulle width dispare */
	background-color: lightcoral;
}

.elf-navbar ul li a {
	display: block;
	float: left; /* IMP: Eliminare se voglio gestire il bg con gli span  (per IE& devo impostare la larghezza del li (è un FIX necessario per IE 6 se non imposto la larghezza del li e non uso i bg con gli span) */
	text-align: center;
	text-decoration: none;
	
	font-size: 10px;
	letter-spacing: 1px;
	color: white;
	position: relative; /* mette il testo davanti SU IE e consente di evitare lo z-index sugli sfondi*/
	
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden; /* se imposto width nasconde il testo in eccesso */

	/* margin-bottom1: -30px;  FIX IE 6: ONLY SET IF BG HTML CODE IS GENERATED (useItemBackground=true) */
	height: 35px; /* 24 height - 5x2 margin - 1x2 border */
	line-height: 35px;
}




/* background, rollover e highlight */
.elf-navbar ul li:hover span.bg-l,
.elf-navbar ul li.iehover span.bg-l,
.elf-navbar ul li.currentpath span.bg-l,
.elf-navbar ul li.currentitem span.bg-l  {
	background: url('../img/bg_common_over_trasp.png') left center;
}
.elf-navbar ul li:hover span.bg-r,
.elf-navbar ul li.iehover span.bg-r,
.elf-navbar ul li.currentpath span.bg-r,
.elf-navbar ul li.currentitem span.bg-r  {
	background: url('../img/bg_common_over_trasp.png') right center;
}

.elf-navbar li a:hover,
.elf-navbar li.currentpath a,
.elf-navbar li.currentitem a {
	color: #fdf504;
	background: url(../img/sfondo_tastosubmenu_on.gif) no-repeat center 2px;
	
}


/* ACCESS KEY */
.elf-navbar a b {
	font-weight: normal; /* annullo la formattazione del b */
	border-bottom: 1px #fff solid;
}


/* @end */

/* @group elf-bar custom istances */


/* contenitore esterno */
#categorie-prodotti.elf-navbar {
	float: none;
}
/* barra orizzontale principale */
#categorie-prodotti.elf-navbar ul {
	float: none;
	text-align: center;
	
}
#categorie-prodotti.elf-navbar ul li {
	float: none;
}

#categorie-prodotti.elf-navbar {

}
	

#categorie-prodotti.elf-navbar li.disabled {
	display: none;
}

#categorie-prodotti.elf-navbar {
	background: none;
}
#categorie-prodotti.elf-navbar ul {
	background: none;
	padding-top: 28px;
}
#categorie-prodotti.elf-navbar li {
	/*width1: 104px;*/
	height: 84px;
	margin-left: 1px;
	margin-right: 0px;
	display: none; /* cosi se aggiungo categorie di primo livello il menu non si scombina -> dopo riabilito solo quelli da visualizzare in base adli id */
}
#categorie-prodotti.elf-navbar li.id-products_bycategories_1,
#categorie-prodotti.elf-navbar li.id-products_bycategories_2,
#categorie-prodotti.elf-navbar li.id-products_bycategories_3,
#categorie-prodotti.elf-navbar li.id-products_bycategories_4,
#categorie-prodotti.elf-navbar li.id-products_bycategories_5,
#categorie-prodotti.elf-navbar li.id-products_bycategories_6,
#categorie-prodotti.elf-navbar li.id-products_bycategories_7,
#categorie-prodotti.elf-navbar li.id-products_bycategories_8,
#categorie-prodotti.elf-navbar li.id-products_bycategories_9 {
	display: inline-block;	
}

#categorie-prodotti.elf-navbar li {
	width: 30%;
}

#categorie-prodotti.elf-navbar li a {
	/* hasLayout: true; messo su CSS specifico IE6 */
	-ms-filter: "alpha(opacity=33)";
	float: none;
	text-align: center;
	height: 84px;
	line-height: 152px;
	background-repeat: no-repeat;
	background-position: center top;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	opacity: 0.33;
	letter-spacing: 0px;
	/* width1: 200px; */
}

#categorie-prodotti.elf-navbar li.id-products_bycategories_1 a {
	background-image: url(../img/icona_uomo.png);	
	/*background-position1: 0 -100px;  50% non Ok su IE6 */
	-webkit-transition: background-position 500ms, height 50ms; /* Safari and Chrome */	
	-moz-transition: background-position 500ms, height 50ms; /* Firefox */
	-o-transition: background-position 500ms, height 50ms; /* Opera */	
	transition: background-position 500ms, height 50ms; /* W3C */	
}
#categorie-prodotti.elf-navbar li.id-products_bycategories_2 a {
	background-image: url(../img/icona_donna.png);	
}
#categorie-prodotti.elf-navbar li.id-products_bycategories_3 a {
	background-image: url(../img/icona_accessori.png);	
}

#categorie-prodotti.elf-navbar li a:hover,
#categorie-prodotti.elf-navbar li a.iehover,
#categorie-prodotti.elf-navbar li a.currentitem,
#categorie-prodotti.elf-navbar li a.currentpath
{
	opacity: 1;
	-ms-filter: "alpha(opacity=100)";
	/*background-position1: 0 0;  50% non Ok su IE6 */
}

/* @end */




/* @group elf-navpath */

/* contenitore esterno */
.elf-navpath {
	float: left; /* cosi l'altezza si adatta al contenuto */
	width: 100%;
	background-color: #fff;	
	border-top: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
}

/* barra orizzontale principale */
.elf-navpath ul {
	float: left; /* cosi l'altezza si adatta al contenuto */
	width: 100%; /* lo devo sovrascrivere per i livelli successivi */
	padding: 0px;
	background: url('bg_bar.png') right top repeat-x;
	overflow: hidden;
}
.elf-navpath ul li { /* li barra orizzontale principale (ed anche gli altri se non li sovrascrivo) */
	display: block;	
	width: 15%;
	float: left;
	margin-left: 10px;	
}
/* sfondo meta-sx del li */
.elf-navpath ul li span.bg-l {	
	display: block;
	height: 35px;
	width: 50%;
	background: url(bg_common.png);
	background-position: left -000%;
	background-color: purple;
	}
/* sfondo meta-dx del li */
.elf-navpath ul li span.bg-r {	
	display: block;
	height: 35px;
	margin-top: -35px;
	margin-left: 50%; /* IMP IMP FIX evita la sovrapposizione degli sfondi ed il problema del pixel aggiuntivo sulle width dispare */
	background: url(bg_common.png);
	background-position: right -000%;
	background-color: orange;
}
.elf-navpath ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 10px;
	color: white;
	font-weight: normal;
	position: relative; /* mette il testo davanti SU IE e consente di evitare lo z-index sugli sfondi*/
	
	top: 7px;
	margin: 0;
	margin-bottom: -35px;
	padding: 0;
	padding-right: 10px; /*NB: se c'è l'icona che aggiunge spazio a sx posso compensare qui per mantenere la centratura */
	padding-left: 10px;
	border: 0;
	overflow: hidden;

	height: 35px; /* 24 height - 5x2 margin - 1x2 border */
	line-height: 35px;
}
.elf-navpath ul li a:hover {
	background-color: orange;
}

/*
.elf-navpath ul li:hover span.bgl, .elf-navpath ul li.iehover span.bgl {
	background: url('bg_common_over.png') left top;
}
.elf-navpath ul li:hover span.bgr, .elf-navpath ul li.iehover span.bgr {
	background: url('bg_common_over.png') right top;
}
*/


/* I tendina (e successive se non li sovrascrivo) */
/* Per annullarle devo sovrascrivere le proprietà del livello precedente che è la barra principale orizzontale */
.elf-navpath ul li ul { /* second-level lists */
	/* resetto le proprietà impostate al primo livello (barra principale) */
	padding: 0;
	margin: 0;
	border: 0;
	width: 100%; /* sovrascrive il width del primo ul */
	position: relative;
	overflow: visible;
}

.elf-navpath ul li ul li {
	width: 100%;
	position: absolute;	
	top: -35px;
	left: 100%;
}


/* ACCESS KEY */
.elf-navpath a b {
	font-weight: normal; /* annullo la formattazione del b */
	border-bottom: 1px #fff solid;
}


/* @end */




/* @group elf-navpath-flat */

.elf-navpath-flat {
	font-size: 13px;
}
.elf-navpath-flat {
	padding: 12px;
	padding-top: 2px;
	padding-bottom: 4px;
}
.elf-navpath-flat .navtitle a {
	display: inline;
	color: #999;
	text-decoration: none;
}
.elf-navpath-flat ul {
	display: inline;
	color: #888;
}

.elf-navpath-flat li {
	display: inline;
}

.elf-navpath-flat li a {
	display: inline;
	color: #aaa;
	text-decoration: none;
}
.elf-navpath-flat li a:hover,
.elf-navpath-flat .navtitle a:hover {
	text-decoration: underline;
	/*color1: red;*/
}
.elf-navpath-flat li.currentitem a {
	text-decoration: underline;
	color: #7d8970;
}
.elf-navpath-flat li:before {
	font-size: 100%;
	content: " » ";
}


/* @end */







/* @group elf-navlist */

/* CRITERIO di styling: gli elementi sono innestati -> definisco i livelli sovrascrivendo i valori dei precedenti che non devono essere ereditati da quel punto in poi */
.elf-navlist {
	width: 100%;
	float: left;
	font-family: inherit;
	font-size: 14px; /* il resto è in % su questo*/
	line-height: 16px;
	color: #000;
}
.elf-navlist .navtitle {
	display: block;
	padding: 4px;
	border-bottom: 1px #ccc solid;
}
.elf-navlist .navtitle a {
	font-size: 110%;
	/*color1:  #c00;*/
	text-decoration: none;
	line-height: 24px;
	color: #000;
}
.elf-navlist ul {
	width: 100%;
	float: left;
	margin: 0;
}
.elf-navlist ul li {
	padding: 0;
	background-image: none;
}
.elf-navlist ul li ul {
}

/* li interni */
.elf-navlist ul li {
	width: 100%;
	float: left;
	clear: left;
	border-bottom: 1px #ccc solid;
}
.elf-navlist ul li ul li {
	border: 0; /* resetta il border precedente per i livelli successivi */
}
.elf-navlist ul li ul li ul li {

}
.elf-navlist ul li ul li ul li ul li {
	border: 0; /* elimina i separatori sull'ultimo livello */
}
.elf-navlist ul li ul li ul li ul li ul li {
	border: 0; /* elimina i separatori sull'ultimo livello */
}
.elf-navlist ul li ul li ul li ul li ul li ul li {
	border: 0; /* elimina i separatori sull'ultimo livello */
}
.elf-navlist ul li ul li ul li ul li ul li ul li ul li {
	border: 0; /* elimina i separatori sull'ultimo livello */
}

.elf-navlist ul li ul li ul li ul li ul li ul li ul li ul li {
	border: 0; /* elimina i separatori sull'ultimo livello */
}
.elf-navlist ul li ul li ul li ul li ul li ul li ul li ul li ul li {
	border: 0;
	color: #000;
}

/* link interni ai li */
.elf-navlist ul li a {
	font-size: 100%;
	line-height: 140%;
	
	display: block;
	color: #000;
	
	text-decoration: none;

	padding:2px;
	padding-left: 18px;
}
.elf-navlist ul li.noleaf > a {
	background1: url('../img/icon_accordion_closed.gif') no-repeat;
	background-position: 2px 2px;	
}
.elf-navlist ul ul li.noleaf > a {
	background-position: 18px 2px;	
}
.elf-navlist ul ul ul li.noleaf > a {
	background-position: 34px 2px;	
}

.elf-navlist ul li.leaf > a {
	background1: url('../img/icon_accordion_spacer.gif') no-repeat;
	background-position: 0px 2px;	
}
.elf-navlist ul ul li.leaf > a {
	background-position: 18px 2px;
	font-weight: normal;
	font-size:  14px;
	/*color1: #6daa2a;*/
}
.elf-navlist ul ul ul li.leaf > a {
	background-position: 34px 2px;	
}
.elf-navlist ul ul ul ul li.leaf > a {
	background-position: 50px 2px;	
}
.elf-navlist ul ul ul ul ul li.leaf > a {
	background-position: 66px 2px;	
}

.elf-navlist ul li.currentitem > a {
	background1: url('../img/icon_accordion_selected.gif') no-repeat;
	background-position: 2px 2px;	
	font-weight: bold;
}
.elf-navlist ul ul li.currentitem > a {
	background-position: 18px 2px;	
	font-weight: bold;
}
.elf-navlist ul ul ul li.currentitem > a {
	background-position: 34px 2px;	
}
.elf-navlist ul ul ul ul li.currentitem > a {
	background-position: 50px 2px;	
}
.elf-navlist ul ul ul ul ul li.currentitem > a {
	background-position: 66px 2px;	
}

.elf-navlist ul li.currentpath > a {
	background1: url('../img/icon_accordion_opened.gif') no-repeat;
	background-position: 2px 2px;	
}
.elf-navlist ul ul li.currentpath > a {
	background-position: 18px 2px;	
}
.elf-navlist ul ul ul li.currentpath > a {
	background-position: 34px 2px;	
}
.elf-navlist ul ul ul ul li.currentpath > a {
	background-position: 50px 2px;	
}
.elf-navlist ul ul ul ul ul li.currentpath > a {
	background-position: 66px 2px;	
}



.elf-navlist ul li ul li a {
	font-size: 100%;

	padding: 2px;
	color: #555;
	padding-left: 34px;
	/*color1: #c00;*/
}
.elf-navlist ul li ul li ul li a {
	font-size: 95%;
	padding-left: 50px;
	color: #834302;	
}
.elf-navlist ul li ul li ul li ul li a {
	font-size: 90%;
	padding-left:66px;
	color: #a38342;
}
.elf-navlist ul li ul li ul li ul li ul li a {
	padding-left: 82px;
}
.elf-navlist ul li ul li ul li ul li ul li ul li a {
	padding-left: 98px;
}
.elf-navlist ul li ul li ul li ul li ul li ul li ul li a {
	padding-left: 114px;
}

.elf-navlist ul li.currentitem {
}
/* Annullo l'effetto precedente nel caso in cui il currentItem non è una foglia */
.elf-navlist ul li.currentitem li {

}
.elf-navlist ul li.currentitem > a {
	/*color1: #6daa2a;*/
}

.elf-navlist ul li a:hover {
	background-color: #fff;
}





/* ACCORDION EFFECT */
/* ci possono essere altri span -> devo specificare */
.elf-navlist span.accordion {
	display: block;
	width: 16px;
	height: 16px;
	float: left;	
	margin-top: 2px;
}

.elf-navlist ul li.currentitem span.accordion  {
	background1: url('../img/icon_accordion_selected.gif') no-repeat
}
/* Annullo l'effetto per i livelli successivi*/
.elf-navlist ul li.currentitem li.leaf span.accordion {
	background1: url('../img/icon_accordion_spacer.gif') no-repeat
	
}
.elf-navlist ul li.currentitem li.noleaf span.accordion {
	background1: url('../img/icon_accordion_closed.gif') no-repeat
}



.elf-navlist span.accordion_toggler_1,
.elf-navlist span.accordion_spacer_1 {
	margin-left: 2px;
	display: inline; /* FIX IE 6 Double Margin Bug */
}
.elf-navlist span.accordion_toggler_2,
.elf-navlist span.accordion_spacer_2 {
	margin-left: 18px;
	display: inline; /* FIX IE 6 Double Margin Bug */
}
.elf-navlist span.accordion_toggler_3,
.elf-navlist span.accordion_spacer_3 {
	margin-left: 34px;
	display: inline; /* FIX IE 6 Double Margin Bug */
}
.elf-navlist span.accordion_toggler_4,
.elf-navlist span.accordion_spacer_4 {
	margin-left: 50px;
	display: inline; /* FIX IE 6 Double Margin Bug */
}
.elf-navlist span.accordion_toggler_5,
.elf-navlist span.accordion_spacer_5 {
	margin-left: 66px;
	display: inline; /* FIX IE 6 Double Margin Bug */
}
.elf-navlist span.accordion_toggler_6,
.elf-navlist span.accordion_spacer_6 {
	margin-left: 82px;
	display: inline; /* FIX IE 6 Double Margin Bug */
}
.elf-navlist span.accordion_toggler_7,
.elf-navlist span.accordion_spacer_7 {
	margin-left: 98px;
	display: inline; /* FIX IE 6 Double Margin Bug */
}


.elf-navlist span.accordion_toggler_1,
.elf-navlist span.accordion_toggler_2,
.elf-navlist span.accordion_toggler_3,
.elf-navlist span.accordion_toggler_4,
.elf-navlist span.accordion_toggler_5,
.elf-navlist span.accordion_toggler_6,
.elf-navlist span.accordion_toggler_7 {
	background-color: red;
	background: url('../img/icon_accordion_closed.gif') no-repeat
}

.elf-navlist span.accordion_spacer_1,
.elf-navlist span.accordion_spacer_2,
.elf-navlist span.accordion_spacer_3,
.elf-navlist span.accordion_spacer_4,
.elf-navlist span.accordion_spacer_5,
.elf-navlist span.accordion_spacer_6,
.elf-navlist span.accordion_spacer_7 {
	background: url('../img/icon_accordion_spacer.gif') no-repeat
}

.elf-navlist span.accordion.opened {
	background-color: green;
	background: url('../img/icon_accordion_opened.gif') no-repeat	
}


.elf-navlist ul li.currentpath span.accordion_toggler_1,
.elf-navlist ul li.currentpath ul li.currentpath li span.accordion_toggler_2,
.elf-navlist ul li.currentpath ul li.currentpath ul li.currentpath span.accordion_toggler_3,
.elf-navlist ul li.currentpath li span.accordion_toggler_4,
.elf-navlist ul li.currentpath span.accordion_toggler_5,
.elf-navlist ul li.currentpath span.accordion_toggler_6,
.elf-navlist ul li.currentpath span.accordion_toggler_7 {
	background: url('../img/icon_accordion_opened.gif') no-repeat	

}

/* @end */


/* @group elf-navlist custom instance */

.elf-navlist .disabled {
	/* sulla lista posso usare anche visibility: hidden */ 
	display: none;
}



/* @group icons */

/* Faccio in modo da poter avere stili applicabili ad un qualunque elemento 
-> posso definire e caricare le icone in un file cs separato e poi condividerle */

/* Stile COMUNE per l'icona */
.icon {
	width: 16px;
	margin-right: 4px;
	height: 100%; /* si adatta all'altezza del container centrando l'icona */
	display: block;
	position: relative;
	left: 0; /* in % o px */
	float: left; /* se metto right l'icona va a dx */
}
/* over COMUNE dell'icona COMUNE A TUTTE */
a:hover .icon {
	background-position: 100% center;
}
/* Opacizzo l'icona dello stato disabilitato */
.disabled .icon {
	/* opacity: 0.5; */
}
/* Disabilito esplicitamente l'hover dell'icona su IE PRE 6 */
.disabled *:hover .icon {
	background-position: 0 center; /* icona di default */
}


/* Qui metto l'elenco delle icone definita dalla propria classe */
.icon-email {
	background: url(img/icona_email_2state.png) no-repeat 0 center;
}

.icon-annulla {
	background: url(img/publish_x_2stati.png) no-repeat 0 center;
}

/* @end */