/* style the outer div to give it width */
.menu-side {
width: 200px;
padding: 0px;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu-side ul {
padding: 0 15px 10px 20px;
margin: 0;
list-style-type: none;
height: auto;
}
	.menu-side ul ul {
	width: 200px;
	height: auto;
	}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu-side li {
position: relative;
}

/* style the links for the top level */
.menu-side a, .menu-side a:visited {
display: block;
text-decoration: none;
padding: 7px 1px;
line-height: 15px;
font-size: 14px;
width: 100%;
background: #5a7bff url(../img/menuit.jpg) bottom right no-repeat;
border-top: 1px solid #637bf7;
border-right: 1px solid #219cff;
border-bottom: 1px solid #2963e7;
border-left: 1px solid #637bf7;
margin: 3px 0;
color: #fff;
text-shadow: 0px 1px 2px #000;
text-transform: uppercase;
font-weight: bold;
text-align: center;
font-size: 11px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu-side a, * html .menu-side a:visited {
}

/* style the second level background */
.menu-side ul ul a.drop, .menu-side ul ul a.drop:visited {
background: #4879b4 url(../img/triangolino.gif) center right no-repeat;
background-position: 190px 50%;
}

/* style the second level hover */
.menu-side ul ul a.drop:hover{
/* background: #c9ba65; */
background-color: #2e2d73;
}
.menu-side ul ul :hover > a.drop {
background-color: #2e2d73;
}

/* style the third level background */
.menu-side ul ul ul a, .menu-side ul ul ul a:visited {
/* background:#e2dfa8; */
}

/* style the third level hover */
.menu-side ul ul ul a:hover {
/* background:#b2ab9b; */
}
.menu-side ul ul ul :hover > a {
/* background:#b2ab9b; */
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu-side ul ul {
visibility: hidden;
position: absolute;
top: 0px;
left: 169px;
width: 200px;
background: #2e2d73;
padding: 2px 12px 4px 3px;
}

/* another hack for IE5.5 */
* html .menu-side ul ul li {
display: none;
}
	* html .menu-side ul ul ul li {
	display: none;
	}
* html .menu-side ul ul {
/* display: none; */
margin: 0;
padding: 0;
/* top: 0px; */
/* height: 100px; */
/* t\op: 0px; */
/* left: 160px; */
}

	/* position the third level flyout menu */
	.menu-side ul ul ul{
	left: 205px;
	top: -5px;
	width: 200px;
	height: auto;
	}
	* html .menu-side ul ul ul{
	height: 0;
	}
/* position the third level flyout menu for a left flyout */
.menu-side ul ul ul.left {
left: -150px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
/* .menu-side table {position:absolute; top:0; left:0; height: 0;} */

/* style the second level links */
.menu-side ul ul a, .menu-side ul ul a:visited {
background: #4879b4;
border: 0;
height: auto;
/* color: #000; */
/* height: auto; */
/* line-height: 1em; */
/* padding: 5px 10px; */
/* width: 129px; */
margin: 3px;
padding: 5px 1px;
/* font-size: 12px; */
/* text-align: left; */
}
/* yet another hack for IE5.5 */
* html .menu-side ul ul a{
/* width: 100px; */
/* w\idth: 129px; */
/* color: white; */
}


/* style the top level hover */
.menu-side :hover > a, .menu-side ul ul :hover > a {
background: #2e2d73;
color: #fff;
border-color: #2e2d73;
}
/* IE */
.menu-side a:hover, .menu-side ul ul a:hover{
background: #2e2d73;
color: #fff;
border-color: #2e2d73;
/* color: #006; */
text-decoration: underline;
}

/* make the second level visible when hover on first level list OR link */
.menu-side ul li:hover ul,
.menu-side ul a:hover ul{
visibility: visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu-side ul :hover ul ul{
visibility: hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu-side ul :hover ul :hover ul ul{
visibility: hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu-side ul :hover ul :hover ul{
visibility: visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu-side ul :hover ul :hover ul :hover ul {
visibility: visible;
}
