/*
  Menu Stylesheet. E.F. de Moor, nov  1204
  Naming conventions: top level = level 1

  Any menu is built as an unordered list with links.
  The behaviour and appearance of the menu is regulated in a stylesheet.
  Tags are used for the following purposes:

  UL : Group the menu items of a menu (level)
       The entire (sub) menu can be hidden by hiding the UL tag
  LI : A single list item.
       If it has a submenu, its surrounding UL tag must be witin the LI
       After processing the tree, The items derived from LI triggers it's submenu (from UL)
       to be displayed or hidden.
       The stylesheet may do some tweaking with the position, e.g. place it over the border of the previous item
  A  : The link, used for rendering the actual menu item.
  Tags are defined in a style sheet.

  Behaviour of these menus is defined by the position attribute of the _sub class
  If UL is defined as:
    fixed     : The submenu is positioned independently of the parent item
    relative  : The submenu is rendered as a folding menu (between the list)
    absolute  : The submenu is rendered as a popup menu (above the list)
*/

a:first-letter {color:#9900E8; text-decoration: none;}
a:visited:first-letter {color:#9900E8; text-decoration: none;}
a:hover:first-letter {color:#000000; text-decoration: none;}
a:hover:visited:first-letter {color:#000000; text-decoration: none;}

.m1{                         /* Definition for secondly defined menu */
  background-color:transparent;   /* background of entire menu (prevent wiping out the background!) */
  position:absolute;              /* Place the entire menu at an absolute position */
  top:0px;
  left:15px;
  margin:0px;
  padding:0px;
  z-index:10;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;                 /* and a smaller font */
}

/* Positioning individual menu items */
.m1 .level1 {
  margin:0px;                       /* Make sure the positioning is properly (remove any margins and padding) */
  padding:0;
}

/* Positioning menu items level 2 and further */
.m1 .level2 {
  margin:0px;
  padding:0px;
}

/* Positioning submenus */

.m1 .level1_sub{
  position:relative;              /* Make this a folding menu */
  padding-top:5px;
}

.m1 .level2_sub{
  position:relative;              /* Make this a popup menu */
  left:0px;                      /* offset from parent item */
  z-index:40;
  width:140px;                    /* Make sure IE7 doesn't clip the level4 items */
}

.m1 .level3_sub{
  position:relative;              /* Make this a popup menu */
  left:0px;                      /* offset from parent item */
  z-index:40;
  width:100px;                    /* Make sure IE7 doesn't clip the level4 items */
}

.m1 .level4_sub{
  position:relative;              /* Make this a popup menu */
  left:0px;                      /* offset from parent item */
  z-index:40;
  width:100px;                    /* Make sure IE7 doesn't clip the level4 items */
}
/* Appearance of the menu items */

/* The actual menu item (Level 1, all states) */
.m1 .layer1 {
  padding-top: 12px;
  display: block;                  /* Make sure the entire bounding box is displayed */
  font-weight: bold;           /* Remove the link underline */
  width: 160px;                    /* Width exclusive of padding and border */
  height: 16px;                    /* Height exclusive of padding and border */
  color:#000000;
}

.m1 .expanded .layer1{
  text-decoration:underline;
}

.m1 .selected .layer1{
  color:#9900E8;
  text-decoration:underline;
}

.m1 .level1 .level2 .layer1 {
  width: 130px;                    /* Width exclusive of padding and border */
  margin: 0px;
  margin-top: -8px;
  padding: 0px;
  padding-top: 8px;
  padding-left: 25px;
  font-size: 10px;                 /* and a smaller font */
  font-weight: bold;
  text-decoration: none;           /* Remove the link underline */
  background-image: url(images/menu/level2.gif);
  background-repeat: no-repeat;
  background-position: -10px 0px;
  color:#000000;
}

/* The actual menu item (Level 3, all states) */
.m1 .level1 .level2 .level3 .layer1 {
  display:block;                  /* Make sure the entire bounding box is displayed */
  text-decoration:none;           /* Remove the link underline */
  text-align: left;
  padding-left: 35px;
  width:125px;                     /* Width exclusive of padding and border */ 
  height:14px;                    /* Height exclusive of padding and border */
  font-size:9px;                  /* and a smaller font */
  background-image: url(images/menu/level3.gif);
  background-repeat: no-repeat;
}

.m1 .level1 .level2 .level3 .level4 .layer1 {
  display:block;                  /* Make sure the entire bounding box is displayed */
  text-decoration:none;           /* Remove the link underline */
  text-align: left;
  padding-left: 75px;
  width:140px;                     /* Width exclusive of padding and border */ 
  height:14px;                    /* Height exclusive of padding and border */
  font-size:9px;                  /* and a smaller font */
}


.m1 .level1 .layer1:first-letter {color:#9900E8;}
.m1 .level1 .layer1:first-letter:visited {color:#9900E8;}
.m1 .level1.selected .layer1:first-letter {color:#000000;}
.m1 .level1.selected .layer1:first-letter:visited {color:#000000;}

.m1 .level1.selected .level2 .layer1 {
  background-image: url(images/menu/level2_sel.gif);
}

.m1 .level1 .level2.expanded .layer1{
  text-decoration:underline;
}

.m1 .level1 .level2.selected .layer1{
  color:#9900E8;
  text-decoration:underline;
}

.m1 .level1 .level2.selected .layer1:first-letter {color:#000000;}
.m1 .level1 .level2.selected .layer1:first-letter:visited {color:#000000;}

.m1 .level1 .level2.selected .level3 .layer1 {
  background-image: url(images/menu/level3_sel.gif);
}

.m1 .layer1:hover,
.m1 .level1 .layer1:hover,
.m1 .level1 .level2 .layer1:hover,
.m1 .level1 .level2 .level3 .layer1:hover {
  color:#9900E8;
}