/*
  Menu Stylesheet. E.F. de Moor, nov  2004
/* In general, these files should be structured as follows:             */
/*                                                                      */
/* Definitions for supported browsers                                   */
/*  - Absolute position and general settings of the entire menu         */
/*  - Relative position and general settings of menu items              */
/*  - Relative position of submenus                                     */
/*  - Appearance of level1 (and further) menu items, normal state       */
/*  - Appearance of level1 menu items, special states,                  */
/*    (order of importance, most important definition should be last)   */
/*  - Overrule appearance of level 2 menu items, normal state           */
/*  - Appearance of level2 menu items, special states,                  */
/*    (order of importance, most important definition should be last)   */
/*  - Overrules of specific menu items, with #id indication             */
/*                                                                      */
/* Definitions for unsupported browsers                                 */
/*  - Position for the entire menu                                      */
/*  - Relative position and general settings of submenus                */
/*  - Position and general settings of level 1 menu items               */
/*  - Overrule position and general settings of level 2 items           */
/*  - Appearance the link within each menu item                         */
/*  - Appearance of hover link within each menu item                    */
/*  - Overrule appearance of level 2 links                              */
/*  - Overrule appearance of level 2 hover                              */
/*                                                                      */
/* The following states are valid:                                      */
/*  .layer1    : The first (often only) text layer of an item           */
/*  .layer2    : (etc.) if defined by javascript: additional layers     */
/*  .level1    : First level items. Note that definitions apply to      */
/*               further levels too, unless they are overruled.         */
/*  .level2    : (etc.) submenu items                                   */
/*  .level1_sub: (etc.) Positioning of the submenu (below level 1)      */
/*  .parent    : The item has children                                  */
/*  .expanded  : The item has children, that are currently visible.     */
/*               Either the parent, or one of the children is selected. */
/*  .selected  : The item is the currently selected (active) one.       */
/*  .first     : The item is the first child (first item of this level) */
/*  .last      : The item is the last child (last item of this level)   */
/*  .nolink    : The item has no associated link                        */
/*               (not clickable, but can have sub items)                */
/*  :hover     : over state                                             */
/*                                                                      */
/* If level2 items (sub,etc) are defined, all previous levels should    */
/* be mentioned in the definitions too, or IE will apply the styles     */
/* wrongly. Example:                                                    */
/* .m1 .level1 .level2 .layer1 {...}                                    */
/*                                                                      */
/* Definitions may combine several states, to be more specific.         */
/* Example:                                                             */
/* .m1 .level1 .level2 .layer1 {...} (appearance of normal level2 items */
/* .m1 .level1.selected .level2 .layer1 (overrule if parent is selected */
/* .m1 .level1 .level2.selected .layer1 (overrule if I'm selected)      */
/*                                                                      */
/* NOTE: Later definitions overrule earlier definitions                 */
/* So if expanded is defined after selected, the expanded state has     */
/* preceedence. For IE this doesn't apply to the :hover subclass,       */
/* that can only be overruled by specific hover states (sigh!)          */
/*                                                                      */
/* Okee, let's start                                                    */

/* Definitions for supported browsers   */

.m1{                         /* Definition for firstly defined menu */
  background-color:transparent;   /* background of entire menu (prevent wiping out the background!) */
  position:relative;
  top:2px;
  _top:0px;
  margin:0px;
  margin-top: 0px;
  margin-left:15px;
  padding:0px;
  padding-top:0px;
  z-index:10;
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

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

/* Positioning individual menu items */
.m1 .level1 {
  float:left;                     /* Force the items to be displayed next to each other (instead of below) */
  margin-left:2px;                       /* Make sure the positioning is properly (remove any margins and padding) */
  margin-top: 0px;
  margin-bottom: 0px;
  padding:0;
}

/* Positioning menu items level 2 and further */
.m1 .level1 .level2 {
  float:none;                     /* Levels 2 and further should be displayed below each other (neutralise level 1 definition) */
  margin:0px;
  margin-top: 1px;
  margin-left:1px;
}

/* Positioning submenus */

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

/* Appearance of the menu items */

/* The actual menu item (Level 1, all states) */
.m1 .level1 .layer1 {
  display: block;                  /* Make sure the entire bounding box is displayed */
  text-decoration: none;           /* Remove the link underline */
  text-align: center;
  font-weight: normal;
  color: #000000;
  width: 110px;                    /* Width exclusive of padding and border */
  height: 25px;                    /* Height exclusive of padding and border */
  padding-top: 5px;                /* room around the text*/
  margin-top: 0px;                 /* Push the item down */
  margin-bottom: 2px;
  font-size: 12px;
  background-image: url(/p-httpd/_cache/_style/images/knop1.gif);
  background-repeat: no-repeat;
}

.m1 .selected .layer1{
  color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop1_sel.gif);
  background-repeat: no-repeat;
}

.m1 .expanded .layer1{
  color: #FFFFFF;
  text-decoration: none;background-image: url(/p-httpd/_cache/_style/images/knop1_sel.gif);
  background-repeat: no-repeat;
}


.m1 .layer1:hover {
  background-image: url(/p-httpd/_cache/_style/images/knop1_over.gif);
  background-repeat: no-repeat;
  color: #664498;
}

  
.m1 .selected .layer1:hover{
  color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop1_sel.gif);
  background-repeat: no-repeat;
}

  
.m1 .expanded .layer1:hover{
  color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop1_sel.gif);
  background-repeat: no-repeat;
}


.m2 .level2 .layer1 {
  margin:0px;
  color: #FFFFFF;
  padding: 0px;                /* room around the text*/
  padding-top: 6px;
  padding-left: 10px;
  display: block;                  /* Make sure the entire bounding box is displayed */
  width: 165px;                    /* Width exclusive of padding and border */
  height: 29px;                    /* Height exclusive of padding and border */
  font-size: 12px;                 /* and a smaller font */
  text-decoration: none;           /* Remove the link underline */
  text-align: left;
  background-image: url(/p-httpd/_cache/_style/images/knop2.gif);
  background-repeat: no-repeat;
}

.m2 .level2.selected .layer1{
    color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop2_sel.gif);
  background-repeat: no-repeat;
}

.m2 .level2.expanded .layer1{
    color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop2_sel.gif);
  background-repeat: no-repeat;
}


.m2 .layer1:hover {
  background-image: url(/p-httpd/_cache/_style/images/knop2_over.gif);
  background-repeat: no-repeat;
    color: #000000;
}

  
.m2 .level2.selected .layer1:hover{
    color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop2_sel.gif);
  background-repeat: no-repeat;
}

.m2 .level2.expanded .layer1:hover{
    color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop2_sel.gif);
  background-repeat: no-repeat;
}


/* The actual menu item (Level 3, all states) */
.m2 .level2 .level3 .layer1,
.m2 .level2 .level3 .level4 .layer1 {
  display:block;                  /* Make sure the entire bounding box is displayed */
  text-decoration:none;           /* Remove the link underline */
  text-align: left;
  font-weight: bold;
  width: 150px;                    /* Width exclusive of padding and border */
  height: 24px; 
  padding-top:5px;                /* room around the text*/
  margin-left:15px;
  font-size:12px;                  /* and a smaller font */
  background-image: url(/p-httpd/_cache/_style/images/knop3.gif);
  background-repeat: no-repeat;
}

.m2 .level2 .level3.selected .layer1,
.m2 .level2 .level3 .level4.selected .layer1 {
  color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop3_sel.gif);
  background-repeat: no-repeat;
}

.m2 .level2 .level3.expanded .layer1,
.m2 .level2 .level3 .level4.expanded .layer1 {
  color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop3_sel.gif);
  background-repeat: no-repeat;
}
.m2 .level2 .level3 .layer1:hover,
.m2 .level2 .level3 .level4 .layer1:hover {
  background-image: url(/p-httpd/_cache/_style/images/knop3_over.gif);
  background-repeat: no-repeat;
  color: #000000;
}


.m2 .level2 .level3.selected .layer1:hover,
.m2 .level2 .level3 .level4.selected .layer1:hover {
  color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop3_sel.gif);
  background-repeat: no-repeat;
}
.m2 .level2 .level3.expanded .layer1:hover,
.m2 .level2 .level3 .level4.expanded .layer1:hover {
  color: #FFFFFF;
  text-decoration: none;
  background-image: url(/p-httpd/_cache/_style/images/knop3_sel.gif);
  background-repeat: no-repeat;
}