/*
  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 */
  position: absolute;
  top: 0px;
  left: 204px;
  margin: 0px;
  padding: 0px;
  z-index: 25;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  white-space: nowrap;
}

.m2{                         /* Definition for firstly defined menu */
  position:absolute;
  top:3px;
  left: 210px;
  margin:0px;
  padding:0px;
  z-index:50;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  white-space: nowrap;
}

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

.m2 .level2 {
  float:left;                     /* Force the items to be displayed next to each other (instead of below) */
  margin:0px;                       /* Make sure the positioning is properly (remove any margins and padding) */
  padding:0px;
}


/* General settings of level 1 menu items (and further, unless overruled) */

/* All Levels: */

/* Level 1 items (and further), all states */
.m1 .level1 .layer1 {
  display: block;                  /* Make sure the entire bounding box is displayed */
  float:left;
  color: #333355;                   /* background of entire menu (prevent wiping out the background!) */
  font-weight:bold;
  text-decoration: none;           /* Remove the link underline */
  text-transform: uppercase;
  text-align: center;
  height: 17px;                  /* Height exclusive of padding and border */
  padding-left: 14px;                /* room around the text*/
  padding-right: 14px;
  padding-top: 5px;
}

.m2 .level1_sub {
  border solid 1px red;
}

/* Color definitions */
.m1 .level1.selected .layer1 { background-color: #333355; color: #FFFFFF; }	
.m1 .level1.expanded .layer1 { background-color: #333355; color: #FFFFFF; }	
.m1 .dgeel.level1.selected .layer1 { background-color: #E9B77A; }
.m1 .dgeel.level1.expanded .layer1 { background-color: #E9B77A; }
.m1 .doranje.level1.selected .layer1 { background-color: #E16247; }	
.m1 .doranje.level1.expanded. .layer1 { background-color: #E16247; }	
.m1 .dgroen.level1.selected .layer1 { background-color: #95975F; }
.m1 .dgroen.level1.expanded .layer1 { background-color: #95975F; }
.m1 .droze.level1.selected .layer1 { background-color: #AE8298; }	
.m1 .droze.level1.expanded .layer1 { background-color: #AE8298; }	
.m1 .dblauw.level1.selected .layer1 { background-color: #8298AE; }	
.m1 .dblauw.level1.expanded .layer1 { background-color: #8298AE; }	

/* Fix for IE6, which can't handle the definitions above */
/* Make use of the bug that ie6 style is ignored anyway, and the last style prevails. */
.m1 .ie6.level1.selected .layer1 { background-color: #333355; color: #FFFFFF; }	
.m1 .ie6.level1.expanded .layer1 { background-color: #333355; color: #FFFFFF; }	

.m2 .level2 .layer1 {
  display: block;                  /* Make sure the entire bounding box is displayed */
  float: left;
  color: #FFFFFF;                    /* background of entire menu (prevent wiping out the background!) */
  text-decoration: underline;           /* Remove the link underline */
  font-weight:bold;
  text-align: center;
  height: 26px;                  /* Height exclusive of padding and border */
  padding: 0px;
  padding-left: 12px;                /* room around the text*/
  padding-right: 12px;
  margin-top: 3px;                 /* Push the item down */
}

.m2 .level2.selected .layer1 {
  font-weight:bold;
  color: #000000;
  text-decoration: none;
}