/*
Here's a demo stylesheet used to format a menu and its content.
Feel free to alter the menu layout however you want. All you have to do is ensure the script
has the correct CSS property name (like 'visibility' or 'display') that you want it to change.

One good resource for UL/LI formatting: http://www.alistapart.com/articles/taminglists/
Consult your favourite CSS reference for editing fonts/borders/etc.

Otherwise, even if you're not very experienced at CSS, you can just go through and change
the #RGB border/background colours where suitable to customise for your site!
*/

/* HORIZONTAL FREESTYLE MENU LAYOUT */

/* il primo livello del menu */
.menulist {
    margin: 0;
    padding: 0;
    list-style: none;
  }

/* All <ul> tags in the menu eccetto il primo livello */
.menulist  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
    /*visibility: hidden;*/
    position: absolute;
    top: 3em;
	top: 40px;
/* I'm using ems rather than px to allow people to zoom their font */
	left: 0px;
    width: 150px;
  }

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
    top: 0px;
    left: 155px;
  }

/*
 =Qui cambio lo stile delle celle del primo livello del menu=
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li {
    width:115px;
    float: left;
    position: relative;
    height:134px;
    font : bold medium Verdana;
    margin:0px;
    border-right-color : #ffffff;
    border-right-style : solid;
    border-right-width : 1px;
	 text-align: left;
  }

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
    float: none;
    height:20px;
    margin-right: 0;
    margin-bottom: -1px;
    border:0px;
  }

.menulist ul>li:last-child {
    margin-bottom: 1px;
  }

/* Links inside the menu */
.menulist a {
    display: block;
    color: #0F257A;
    text-decoration: none;
    padding:3px;
  }

  /* Links del primo livello */
.menulist a.firstLevel {
    color: #999999;
    font-size:13px;
    font-weight:bold;
    height:30px;
  }

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
    /*background-color: #0F257A;*/
    color: #ffffff;
  }

#a1 {
    border-bottom-color : #ef5394;
    border-bottom-style : solid;
    border-bottom-width : 3px;
    background-color: #ef5394;
    color: #ffffff;
}
.menulist #a1:hover, .menulist a.a1Active{
    background-color: #ef5394;
	 color: #ffffff;
}
.menulist #b1:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b1_1:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b1_2:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b1_3:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b1_4:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b1_5:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b1_6:hover{
    background-color: #ef5394;
	 color: #000000;
}

#a2 {
    border-bottom-style : solid;
    border-bottom-width : 3px;
    border-bottom-color : #f0eb47;
    background-color: #f0eb47;
    color: #ffffff;
  }
.menulist #a2:hover, .menulist a.a2Active{
    background-color: #f0eb47;
	 color: #ffffff;
}
.menulist #b2:hover{
    background-color: #f0eb47;
	 color: #000000;
}
.menulist #b2_1:hover{
    background-color: #f0eb47;
	 color: #000000;
}
.menulist #b2_2:hover{
    background-color: #f0eb47;
	 color: #000000;
}
.menulist #b2_3:hover{
    background-color: #f0eb47;
	 color: #000000;
}
.menulist #b2_4:hover{
    background-color: #f0eb47;
	 color: #000000;
}
.menulist #b2_5:hover{
    background-color: #f0eb47;
	 color: #000000;
}
.menulist #b2_6:hover{
    background-color: #f0eb47;
	 color: #000000;
}

#a3 {
    border-bottom-style : solid;
    border-bottom-width : 3px;
    border-bottom-color : #84bee6;
    background-color: #84bee6;
 	 color: #ffffff;
}
.menulist #a3:hover, .menulist a.a3Active{
    background-color: #84bee6;
 	 color: #ffffff;
}
.menulist #b3:hover{
    background-color: #84bee6;
	 color: #000000;
}
.menulist #b3_1:hover{
    background-color: #84bee6;
	 color: #000000;
}
.menulist #b3_2:hover{
    background-color: #84bee6;
	 color: #000000;
}
.menulist #b3_3:hover{
    background-color: #84bee6;
	 color: #000000;
}
.menulist #b3_4:hover{
    background-color: #84bee6;
	 color: #000000;
}
.menulist #b3_5:hover{
    background-color: #84bee6;
	 color: #000000;
}
.menulist #b3_6:hover{
    background-color: #84bee6;
	 color: #000000;
}


#a4 {
    border-bottom-style : solid;
    border-bottom-width : 3px;
    border-bottom-color : #92c976;
    background-color: #92c976;
	 color: #ffffff;
  }
.menulist #a4:hover, .menulist a.a4Active{
    background-color: #92c976;
	 color: #ffffff;
}
.menulist #b4:hover{
    background-color: #92c976;
	 color: #000000;
}
.menulist #b4_1:hover{
    background-color: #92c976;
	 color: #000000;
}
.menulist #b4_2:hover{
    background-color: #92c976;
	 color: #000000;
}
.menulist #b4_3:hover{
    background-color: #92c976;
	 color: #000000;
}
.menulist #b4_4:hover{
    background-color: #92c976;
	 color: #000000;
}
.menulist #b4_5:hover{
    background-color: #92c976;
	 color: #000000;
}
.menulist #b4_6:hover{
    background-color: #92c976;
	 color: #000000;
}

#a5 {
    border-bottom-style : solid;
    border-bottom-width : 3px;
    border-bottom-color : #142380;
    background-color: #142380;
	 color: #ffffff;
}
.menulist #a5:hover, .menulist a.a5Active{
    background-color: #142380;
	 color: #ffffff;
}
.menulist #b5:hover{
    background-color: #142380;
	 color: #000000;
}
.menulist #b5_1:hover{
    background-color: #142380;
	 color: #000000;
}
.menulist #b5_2:hover{
    background-color: #142380;
	 color: #000000;
}
.menulist #b5_3:hover{
    background-color: #142380;
	 color: #000000;
}
.menulist #b5_4:hover{
    background-color: #142380;
	 color: #000000;
}
.menulist #b5_5:hover{
    background-color: #142380;
	 color: #000000;
}
.menulist #b5_6:hover{
    background-color: #142380;
	 color: #000000;
}

#a6 {
    border-bottom-style : solid;
    border-bottom-width : 3px;
    border-bottom-color : #ef5394;
    background-color: #ef5394;
	 color: #ffffff;
}
.menulist #a6:hover, .menulist a.a6Active{
    background-color: #ef5394;
	 color: #ffffff;
}
.menulist #b6:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b6_1:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b6_2:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b6_3:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b6_4:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b6_5:hover{
    background-color: #ef5394;
	 color: #000000;
}
.menulist #b6_6:hover{
    background-color: #ef5394;
	 color: #000000;
}

.menulist a.highlighted {
    color: #ffffff;
    background-color: #C3EAA1;
  }

/* links dei sotto livelli */
.menulist a.subLevel {
    border-bottom-color : #ffffff;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    color : #ffffff;
    font-size : 9px;
    font-weight : bold;
	 white-space: nowrap;
    padding-left : 5px;
}

.menulist a.subLevel:hover{
	 color: #000000;
}

/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). */
* html .menulist ul li {
	float: left;
	height: 1%;
}
* html .menulist ul a {
	height: 1%;
}