/* VERTICAL MENU LAYOUT */



/* All <ul> tags in the menu including the first level */

.verticalMenuList, .verticalMenuList ul {

 margin: 0;

 padding: 0px;

 width: 166px;

 list-style: none;

 background: none;

 padding-left:18px;

}



/* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */

.verticalMenuList ul {

 display: none;

 position: absolute;

 top: -1px;

 left: 166px;

 width: 176px;

 background-color: #fff;

 border: 1px solid #d0d0d0; 

 

}



.verticalMenuList ul li ul{



left: 176px;



}



.verticalMenuList li ul li{



height: 22px;

}



.verticalMenuList li ul li a{

width: 158px;

padding-top: 3px;

}



/* All menu items (<li> tags) are relatively positioned (to correctly offset submenus). */

.verticalMenuList li {

 position: relative;

 height: 22px;

 width: 176px;

 background: url('/gfx/grot_menu.gif') no-repeat left;

 background-position: left center;

}



.verticalMenuList img{

margin-right: 5px;

margin-top: 3px;

}



/* Links inside the menu */

.verticalMenuList li a {

 display: block;

 height: 22px;

 width: 148px;

 padding: 3px 0px 0px 18px;

 text-decoration: underline;

 color: #2f6daa;

 margin: 0;

}



/* HACKS: MSIE6 doesn't support transparent borders, mimic with margins */

* html .verticalMenuList li a {

 border-width: 0;

 /*margin: 1px;*/

}



/*

 Lit items: hover/focus = the current item. 'highlighted' = parent items to visible menus.

 Here, active items are given a border, and a padding tweak to 'elevate' the text within.

 Feel free to use background-image:url(file.gif) instead of background-color:#nnn here...

*/

.verticalMenuList a:hover, .verticalMenuList a.highlighted:hover, .verticalMenuList a:focus {





}

.verticalMenuList a.highlighted {



 

}





/* level 2+ submenu items */



.verticalMenuList li  {

 opacity:.95;



 /*

filter: alpha(opacity=95);

*/



 -moz-opacity: 0.95;

/*

 display:block;

 width: 100px;

*/ /* stupid IE */

}





/*

 If you want per-item background images in your menu items, here's how to do it.

 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">

 2) Copy and paste these next lines for each link you want to have an image:

    .verticalMenuList a#xyz {

      background-image: url(out.gif);

    }

    .verticalMenuList a#xyz:hover, .verticalMenuList a.highlighted#xyz, .verticalMenuList a:focus {

     background-image: url(over.gif);

    }

*/





/* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */

.verticalMenuList a .subind {

 float: right;

}



/*

 HACKS: IE/Win:

 A small height on <li> and <a> tags and floating prevents gaps in menu.

 * html affects <=IE6 and *:first-child+html affects IE7.

 You may want to move these to browser-specific style sheets.

*/

*:first-child+html .verticalMenuList li {

 float: left;

 width: 100%;

}



* html .verticalMenuList li {

 float: left;

 height: 1%;

}

* html .verticalMenuList a {

 height: 1%;

}

/* End Hacks */