/* This is the vertical flyout menu on the left hand sidebox */

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     width: 100%;
     margin-top: 0em;
     margin-left: auto;
     margin-right: auto;
     font-size: 1em;
	/* font-size:14px; */
        /* text-transform:lowercase; */
	letter-spacing: 1.5px; 
	/* letter-spacing: 0.08px; */
	/* font-family: Verdana, Arial, Helvetica; */
	font-family: Arial, Verdana, Helvetica;

	/* background-color: transparent;*/ /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */
}
div#nav-cat ul {
     margin: 0em; 
     /* padding: 0em; 
 */
	padding-left:0.6em;
     width: 100%;  
     z-index: 1000;
     line-height: 14px;
     border: none;
}

div#nav-cat li a {
/* background-color: transparent;*/ /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */
    display: block;
    padding: 0.25em 0 0.3em 0em;
    text-decoration: none; 
    width: 100%;
        color:#00A9E0;

    /* color: #1D3755; *//* sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different colors for each level, such as font color changing when you hover, you need to remove any MENU colors  referred to in your stylesheet.css, as they over-ride this stylesheet! (includes/templates/dolomite/css/stylesheet.css) */
}


div#nav-cat ul.level2 {background-color: #ffffff;}
div#nav-cat ul.level3 {/* background-color: #ffffff;*/}
div#nav-cat ul.level4 {/* background-color: #ffffff;*/}
div#nav-cat ul.level5 {/* background-color: #ffffff;*/}
div#nav-cat ul.level6 {/* background-color: #ffffff;*/}

div#nav-cat ul li a{
     font-weight: bold;
}

div#nav-cat ul li a:hover {
/* color:#00A9E0!important;*/
color:#1D3755;
}
div#nav-cat li {
     z-index: 1; 
     position: relative;
     list-style: none; 
     margin: 0;
     margin-top: 0; /* change it to whatever space you want to put space between buttons*/
	/*background: none;*/ /* if this has a bg color, it will partially cover the submenu blocks! */ 
     /* border-bottom: 1px solid black;*/ /* <---this line may help or hinder IE menu shifting issues. */
    
}
/* 2nd level menu blocks */
div#nav-cat li li {
	margin-left: -1.1em;/* This puts space between menu and sub-menu, reccomend to leave at 0 unless you have over-lapping problems. */
	/* margin-left:-10em; */
	border: 1px solid #d0d0d0;
	/* font-family; Candara, Calibri, Arial, Verdana; *//* ANNIKA */
	/* text-transform:lowercase; */
	letter-spacing: 1.5px;
	padding-left:0.3em;
	font-weight:normal;

}
div#nav-cat li li a{
	font-weight:normal;
        font-family: calibri; 
	font-size:14px;
	/* color: #1D3755; */
	color: #555555;
}

div#nav-cat li li a:hover {
	/* color: #1D3755;*/
        color:#00A9E0;

        font-weight:bold;
}
div#nav-cat li:hover {
	/* background-color: white;*/ /* sets the HOVER background of any MENU item that DOES NOT have submenu items */
} 
	/* all types of menu items, with or without submenu items */
div#nav-cat li.submenu, div#nav-cat li {
	margin-right:0.5em;
} 
div#nav-cat li.submenu:hover {
	/* background-color: white;*/} /*sets the HOVER background of any menu item that DOES have submenu items */


div#nav-cat li a:hover {
	/* color:grey; */
}


div#nav-cat ul ul {
    position: absolute; top: 0; left: 100%;
    display: none; z-index: 1000;
}

div#nav-cat ul.level1{ /* the ones without subcategories */
	padding:0 0 0 0.5em;
} 

div#nav-cat ul.level1 li.submenu:hover ul.level2 a{

	background-color:white;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
        display:block;
	background-color:white;
}
div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}