/* Define the body style */
body 
{
    font-family:Arial;
}

/*Togliamo il margine, padding, e la lista di stile dei componenti UL e LI */

#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* Applichiamo il colore di sfondo e bordo inferiore bianco e larghezza 150px */

#menuwrapper ul li{
    background-color:#65BAD3;
    border-bottom:solid 2px white;
    border-left:solid 1px white;
    cursor:pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size:16px;
    font-weight:bold;
}

/* Applichiamo il colore di sfondo passaggio del mouse quando l'utente passa il mouse sopra del componente li */

#menuwrapper ul li:hover{
    background-color:#6679e9;
    position:relative;
}

/* Applichiamo lo stile di link */

#menuwrapper ul li a{
  padding: 15px;
  color:#ffffff;
  display: block;
  text-decoration:none;
}

/**** MENU SECONDO LIVELLO ****/

/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */

#menuwrapper ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */

#menuwrapper ul li:hover ul{
	/* left:220px;
	*/
	left: 99%;
	top:0px;
	display:block;
}

/* applichiamo diverso colore di sfondo alle voci di menu 2 ° livello */

#menuwrapper ul li ul li{
    background-color:#cae25a;
}

/* Cambiamo il colore di sfondo per il sottomenu di livello 2 quando passa il mouse */

#menuwrapper ul li:hover ul li:hover{
    background-color:#b1b536;
}

/* Cambiamo il link colore livello 2 */

#menuwrapper ul li ul li a{
    color:#454444;
    display:inline-block;
    width:220px;
}

/**** MENU TERZO LIVELLO ****/

/* Abbiamo bisogno di nascondere il 3 menù, quando in bilico il menu di primo livello */

#menuwrapper ul li:hover ul li ul{
    position:absolute;
    display:none;
}

/* Mostriamo il menu di terzo livello solo quando si posiziona il mouse il secondo genitore menu di livello */

#menuwrapper ul li:hover ul li:hover ul{
    display: block;
    left: 99%;
    top: 0px;
}

/* Cambiamo il colore di sfondo per il sottomenu livello 3 */

#menuwrapper ul li:hover ul li:hover ul li{
    background:#F89C24;
}

/* Cambiamo il colore di sfondo per il sottomenu di livello 3 quando passa il mouse */

#menuwrapper ul li:hover ul li:hover ul li:hover{
    background:#358ebc;
}

/* Cambiamo il link colore livello 3 */

#menuwrapper ul li:hover ul li:hover ul li a{
    color:#ffffff;
}

/* Clear float */

.clear{clear:both;}