.sticky { /* aggiunta dinamicamente al menu in JS quando scrollerebbe fuori dalla vista */
	position: fixed;
  	top: 0;
  	background-color: white;
}

.menuHeaderCls, .menuHeaderCls ul { /* chi ha classe "menuHeaderCls" + qualunque lista sottostante */
	/*padding:1px; /* padding (spazio extra DENTRO un elemento) a zero */
	margin:0;  /* margine (spazio extra ATTORNO ad un elemento) a zero */
	list-style:none; /* non mostra i pallini delle liste */
	text-align:center; /* centrati orizzontalmente */
	font-family:"Open Sans",Arial,Helvetica,sans-serif; /* quello di AC */
	display:table;
	width:99%;
}

div.menu {
	margin-top:40px;
}

div.menuHeaderCls  { /* bordi sopra e sotto la barra di menu */
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	/*padding:0px;*/
}

/* tutti gli item di menu a tutti i livelli */
.menuHeaderCls li { /* tutti i <li> sotto un tag di classe "menu" */
	display:inline-block;
	float:none;
	background:white;
}

/* PRIMO sotto-livello */

/* item top-level */
.menu > li {
    padding:8px;
	border-top: 3px solid white;
	border-bottom: 3px solid white;
}

/* item top-level hovered */
.menu > li:hover {
	border-top: 3px solid #6d9e11;
	/*border-bottom: 3px solid red;###*/
}

.menu ul li:hover a {
	color: #6d9e11;
}

/* sottoitem */
.menu li ul { /* tutti gli <ul> sotto degli <li> sotto un tag di classe "menu" (ovvero, liste di secondo livello) */
	/*###display:none; /* non visibile */
	position:absolute;/* al contrario di come potrebbe sembrare, indica che è RELATIVO al suo primo "genitore" posizionato (ovvero, il <li> sovrastante) */
	left:0;
	width:300px; /* cancella il 100% dell'<ul> di primo livello! */
	margin-top:12px;
	display:block;
	/* ### */
	visibility:hidden;
    opacity:0;
    filter:alpha(opacity=0);
    -webkit-transition:300ms ease;
    -moz-transition:300ms ease;
    -o-transition:300ms ease;
    transition:300ms ease;
}

.menu li ul li {
	display:block;	
	background:#eee;
	border-top:1px solid #ddd;
	padding:10px;
	padding-left:20px;
	text-align:left;
	font-size:13px;
}

.menu li > ul { /* tutti gli <ul> immediatamente sotto degli <li> sotto un tag di classe "menu", per settare top e left in browser != IE */
	top:auto;
	left:auto;
}

/* sottoitem di un item hovered */
.menu li:hover ul, li.over ul { /* tutti gli <ul> che stanno sotto <li> che sono hovered sotto un tag di classe "menu"; in più la condizione "over" per IE */
	display:block; /* lo mostra come elemento a sè, come un <p> */
	/* ### */
	visibility:visible;
    opacity:1;
    filter:alpha(opacity=100);
}

/* ### cancello il colore dei link */
.menu ul li:hover ul li a {
	color:#333333;
}

/* sottoitem hovered (highlight) */
.menu ul li ul li:hover {
	background:#f8f8f8;
}

.menu ul a { /* tutti gli <a> sotto un <ul> di classe "menu", ovvero gli item finali da cliccare */
	text-decoration:none; /* toglie l'underline del link */
	color:#333333;
}

/* SECONDO sotto-livello */

/* sottoitem di secondo livello */
.menu li ul li ul { /* tutti gli <ul> sotto degli <li> sotto un tag di classe "menu" (ovvero, liste di secondo livello) */
	display:none; /* non visibile */
	position:absolute; /* al contrario di come potrebbe sembrare, indica che è RELATIVO al suo primo "genitore" posizionato (ovvero, il <li> sovrastante) */
	top:0px; /* verticalmente in linea con il padre */
	left:0px; /* orizzontalmente spostato alla sua dx */
}

/* sottoitem di secondo livello quando il livello sopra è hovered: mi serve per nascondere il terzo livello di menu quando mostro il secondo */
.menu li:hover ul li ul, li.over ul li ul  { /* tutti gli <ul> sotto degli <li> sotto degli <ul> sotto degli <li> sotto un tag di classe "menu" (ovvero, liste di terzo livello) */
	display:none;
	position:absolute;
}

/* sottoitem di secondo livello di un item hovered */
.menu li ul li:hover ul, li ul li.over ul { /* tutti gli <ul> che stanno sotto <li> che sono hovered sotto un tag di classe "menu"; in più la condizione "over" per IE */
	display:block;
}

.noDesktop {
	display:none;	
}