/* ******************** the CSS menu ******************** */
/* Thanx to MP and helping people of him. */



#menu_holder {
    width: 100%;
    margin: 0;
    padding: 0;
    clear: both;
    border-style: solid;
    border-width: 0 1px;
    float: left;
}



#menu {
/*    width: 100%;
    margin: 0;
    padding: 0;
    clear: both;
    border-style: solid;
    border-width: 0 1px;
    float: left;*/
    position: relative;                   /* This can also be fixed or absolute */
}



#menu a,
#menu a:hover,
#menu a:visited,
#menu a:active {
    text-decoration: none;
}



#menu ul {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: nowrap;
}
#menu li {
}
#menu li:hover {
}



#menu ul li,				/* add more for each extra submenu level */
#menu ul li ul li,
#menu ul li ul li ul li,
#menu ul li ul li ul li ul li
{
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    list-style-type: none;
}
#menu ul li ul,				/* add more for each extra submenu level */
#menu ul:hover li ul li ul,
#menu ul:hover li ul li ul li ul,
#menu ul:hover li ul li ul li ul li ul
{
    display: none;
    z-index: 1000;
}



#menu > ul > li:hover > ul		/* First submenu level */
{
    display: block;			/* unhide it */
    float: right;
    position: absolute;			/* It needs to be absolute for the effect to work. */
    top: 2em;				/* This is the important part of the effect. */
    left: 0;
    width: 20em;
}
#menu ul li:hover ul li
{ 
    display: block;
    float: left;
    width: 100%;
}

#menu ul li ul li:hover ul,		/* For the remaining submenu levels */
#menu ul li ul li ul li:hover ul,
#menu ul li ul li ul li ul li:hover ul
{
    display: block;
    float: right;
    left: 18em;
    position: absolute;
    top: 0.5em;				/* Required with some value or the effect will not work */
    width: 20em;
}



#menu ul li a
{
  display: block;
  float: left;
  padding: 0.5em;
/*  border-style: solid;
  border-width: 0px 1px;*/
}
#menu ul li:hover > a			/* The on state for the link when you are on the submenu. */
{					/* This should be before the hover state for the link itself */
/*  border-color: black;
  border-style: solid;
  border-width: 0px 1px;*/
}
#menu ul li ul li a,
#menu ul li ul li:first-child ul li a,
#menu ul li ul li:first-child ul li:first-child ul li a
{ 
    float: none;
    padding: .5em;
    border-color: #000;
    border-style: solid;
    border-width: 0px 1px 1px 1px !important;
    white-space: normal;
}
#menu ul li ul li:first-child a,
#menu ul li ul li ul li:first-child a,
#menu ul li ul li ul li ul li:first-child a
{
    border-width: 1px 1px 1px 1px !important;
}