@charset "utf-8";
#menu {
    font-family: 'Open Sans', Arial;
    height: 77px;
	letter-spacing: -1px;
}


/* remove all the bullets, borders and padding from the default list styling */

#menu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: transparent;
    display: inline-block;
    *display: inline;
    zoom: 1;
    position: relative;
}


/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */

#menu ul li {
    float: left;
    line-height: 1;
    display: block;
    text-transform: uppercase;
    margin-left: 0px;
    margin-bottom: 0px;
    position: relative;
    background: none;
    padding: 0px;
    font-weight: bold;
}


/* style the sub level list items */

#menu ul ul li {
    display: block;
    width: auto;
    height: auto;
    line-height: 1em;
    float: none;
    padding-left: 0px;
    float: left;
    width: 100%;
    margin-top: 0px;
	text-transform: capitalize; 
	font-weight: normal;
	letter-spacing: 0px;
}

#menu ul ul li span {
    display: block;
    color: #c0ae00;
    text-shadow: none;
    font-size: 14px;
    line-height: 1;
    padding: 10px 0px;
}


/* style the links for the top level */

#menu a,
#menu a:visited {
    color: #0050a2;
    text-decoration: none;
    padding: 30px 20px;
    display: block;
	background: none;
}

#menu>ul>li>span {
    padding: 0px 30px;
    cursor: pointer;
}


/* hack IE5.x to get the correct the faulty box model and get the width right */

* html #menu a,
* html #menu a:visited {
    width: 11em;
    w\idth: 7em;
}


/* style the sub level links */


/* style the third level background */

#menu ul ul a,
#menu ul ul a:visited {
    background-color: #0050a2;
    display: block;
    color: #fff;
    padding: 10px 25px;
    line-height: 1;
    min-width: 175px;
    border-bottom: solid 1px #bcbdc0; 
}

#menu ul ul li:last-child ul li:last-child a {
    border-bottom: 0px;
}

#menu ul ul ul a,
#menu ul ul ul a:visited {
    color: #0050a2;
    display: block;
    height: auto;
    padding: 10px 0px;
    text-transform: none;
    border-bottom: solid 1px #c0ae00;
    text-shadow: none;
    font-size: 14px;
    line-height: 1;
}

#menu ul li ul li ul :hover>a {
    color: #a7a9ac;
}

* html #menu ul ul a,
* html #menu ul ul a:visited {
    width: 16em;
    w\idth: 14em;
}


/* style the table so that it takes no part in the layout - required for IE to work */

#menu table {
    border-collapse: collapse;
    padding: 0;
    margin: -1px;
    width: 0;
    height: 0;
    font-size: 14px;
    z-index: 1;
}


/* style the fourth level background */

#menu ul ul ul ul a,
#menu ul ul ul ul a:visited {
    color: #FFF;
    background-color: #000;
}


/* style the sub level 1 background */

#menu ul :hover a.sub1 {
    background-image: url(themes/nav/MenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 98% center;
}


/* style the sub level 2 background */

#menu ul ul :hover a.sub2 {
    background-image: url(themes/nav/MenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% center;
}


/* style the level hovers */


/* first */

* html #menu a:hover {
    color: rgb(255, 0, 0);
    position: relative;
    z-index: 100;
    background-color: #3e8e41
    /* background-image: url(themes/left-menu-bg.png); */
}

#menu a.active {
    color: #f7a81b;
    position: relative;
    z-index: 100;
}

#menu li:hover {
    position: relative;
}

#menu :hover>a {
    color: #f7a81b;
    position: relative;
    z-index: 100;
}


/* second */

* html #menu ul ul a:hover {
    color: #f7a81b;
    position: relative;
    z-index: 110;
}

#menu ul ul li:hover {
    position: relative;
}

#menu ul ul :hover>a,
#menu ul ul a.active {
    color: #f7a81b;
    z-index: 200;
}


/* third */

* html #menu ul ul ul a:hover {
    position: relative;
    z-index: 120;
    color: #000;
}

#menu ul ul ul :hover>a {
    color: #000;
}


/* fourth */

#menu ul ul ul ul a:hover {
    position: relative;
    z-index: 130;
    color: #000;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */

#menu ul ul {
    padding-top: 26px;
    width: auto;
    z-index: 120;
    list-style: none;
    position: absolute;
    top: 51px;
    left: 0px;
    margin-bottom: -15px;
    overflow: hidden;
    visibility: hidden;
	text-align: left;
}


/* position the third level flyout menu */

#menu ul ul ul {
    top: 0;
    left: 0px;
    width: 210px;
    margin-left: 0px;
    position: relative;
    visibility: hidden;
    padding-left: 0px;
    padding-right: 0px;
}


/* make the second level visible when hover on first level list OR link */

#menu ul :hover ul {
    visibility: visible;
    height: auto;
    z-index: 200;
}


/* keep the third level hidden when you hover on first level list OR link */


/* #menu ul :hover ul ul{visibility:hidden;} */

#menu ul :hover ul ul {
    visibility: visible;
}


/* keep the fourth level hidden when you hover on second level list OR link */

#menu ul :hover ul :hover ul ul {
    visibility: hidden;
}


/* make the third level visible when you hover over second level list OR link */


/* #menu ul :hover ul :hover ul{visibility:visible; }
*/


/* make the fourth level visible when you hover over third level list OR link */

#menu ul :hover ul :hover ul :hover ul {
    visibility: visible;
}