/***************************** MAINMENU *******************************/

#mainmenuContainer { 
    position: relative; 
    margin: 37px 0px 0px 175px; 
    z-index:100; 
    text-align: right; 
    height: 26px;
    padding: 0px 0px 0px 2px;
    background: url(/images/mainmenu/mainmenu_streepje.gif) no-repeat 0px 0px; 
}
 
#mainmenu ul { float: left; padding:0; margin:0; list-style:none; background:#FFFFFF;margin: 0px;}

#mainmenu li { float: left; list-style: none; text-align: left;}
#mainmenu li li {float: none;  background-color: #EC1C24; padding: 0px; margin: 0px;}
/* a hack for  IE6 */
* html #mainmenu li li {float:left;}

#mainmenu li a {display:block; float:left; color:#fff; padding: 10px 0px; text-decoration:none; white-space:nowrap; font-weight:bold;}
#mainmenu li a.noLink{cursor: pointer;}

#mainmenu li li a {
    display:block; 
    float:none; 
    background: url(/images/mainmenu/mainmenu_foldout_arrow.gif) no-repeat 0% 50% !important; 
    margin: 0px;
    padding: 7px 8px 8px 26px;
    width: 128px !important;
    color: #FFFFFF;
    font-weight: normal;
}
#mainmenu li li a:hover {
    text-decoration: underline;
}
#mainmenu li li a.fly {}

#mainmenu li:hover {position:relative; z-index:300;}
#mainmenu li.cssplay_hover { position:relative; z-index:300; }
#mainmenu li.cssplay_hover a {color:#000;}

#mainmenu li:hover ul {left:-2px; top:26px; z-index:200;}
#mainmenu li.cssplay_hover ul {left:-2px; top:26px; z-index:500;}

#mainmenu ul {position:absolute; left:-9999px; top:-9999px;}
#mainmenu ul ul {position:absolute; left:-9999px; top:-9999px;}
* html #mainmenu ul { width:2px; }

/* it could have been this simple if all browsers understood */
/* show next level */
#mainmenu li:hover li:hover > ul {left: -1px; margin-left:100%; top: 0px; z-index:500;}
/* keep further levels hidden */
#mainmenu li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto; }

/* but IE5.x and IE6 need this lot to style the flyouts*/
#mainmenu li.cssplay_hover li.cssplay_hover a,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a
{color:#004897; background: #FFFFFF url(/images/mainmenu_subitem_background_white.gif) repeat-y right top; }

#mainmenu li.cssplay_hover li.cssplay_hover li a,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a
{color:#004897; background: #FFFFFF url(/images/mainmenu_subitem_background_grey.gif) repeat-y left top;}

/* show next level */
#mainmenu li.cssplay_hover li.cssplay_hover ul,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul
{left:100%; margin-left:-1px; top:-1px;}

/* keep further levels hidden */
#mainmenu li.cssplay_hover ul ul,
#mainmenu li.cssplay_hover li.cssplay_hover ul ul,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul,
#mainmenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/****** MAINMENU ITEM IMAGES *********/
#mainmenu span { visibility: hidden; }

/* normal states */
#mainmenu .news a {         background: url(/images/mainmenu/mainmenu_news_normal.gif) no-repeat left top; width: 81px; }
#mainmenu .magazine a {     background: url(/images/mainmenu/mainmenu_magazine_normal.gif) no-repeat left top; width: 80px; }
#mainmenu .architects a {   background: url(/images/mainmenu/mainmenu_architects_normal.gif) no-repeat left top; width: 81px; }
#mainmenu .insider a {   background: url(/images/mainmenu/mainmenu_insideinfo_normal.gif) no-repeat left top; width: 80px; }
#mainmenu .work a {         background: url(/images/mainmenu/mainmenu_work_normal.gif) no-repeat left top; width: 81px; }
#mainmenu .study a {        background: url(/images/mainmenu/mainmenu_study_normal.gif) no-repeat left top; width: 76px; }
#mainmenu .inspiration a {  background: url(/images/mainmenu/mainmenu_inspiration_normal.gif) no-repeat left top; width: 81px; }
#mainmenu .blogs a {        background: url(/images/mainmenu/mainmenu_blogs_normal.gif) no-repeat left top; width: 82px; }
#mainmenu .shop a {         background: url(/images/mainmenu/mainmenu_shop_normal.gif) no-repeat left top; width: 83px; }
#mainmenu .news a {         background: url(/images/mainmenu/mainmenu_news_normal.gif) no-repeat left top; width: 81px; }

/* hover states */
#mainmenu li.news:hover > a {         background: url(/images/mainmenu/mainmenu_news_hover.gif) no-repeat left top; margin-left: -2px; width: 83px; }
#mainmenu li.magazine:hover > a {     background: url(/images/mainmenu/mainmenu_magazine_hover.gif) no-repeat left top; margin-left: -2px; width: 82px; }
#mainmenu li.architects:hover > a {   background: url(/images/mainmenu/mainmenu_architects_hover.gif) no-repeat left top; margin-left: -2px; width: 83px; }
#mainmenu li.insider:hover > a {   background: url(/images/mainmenu/mainmenu_insideinfo_hover.gif) no-repeat left top; margin-left: -2px; width: 82px; }
#mainmenu li.work:hover > a {         background: url(/images/mainmenu/mainmenu_work_hover.gif) no-repeat left top; margin-left: -2px; width: 83px; }
#mainmenu li.study:hover > a {        background: url(/images/mainmenu/mainmenu_study_hover.gif) no-repeat left top; margin-left: -2px; width: 78px; }
#mainmenu li.inspiration:hover > a {  background: url(/images/mainmenu/mainmenu_inspiration_hover.gif) no-repeat left top; margin-left: -2px; width: 83px; }
#mainmenu li.blogs:hover > a {        background: url(/images/mainmenu/mainmenu_blogs_hover.gif) no-repeat left top; margin-left: -2px; width: 84px; }
#mainmenu li.shop:hover > a {         background: url(/images/mainmenu/mainmenu_shop_hover.gif) no-repeat left top; margin-left: -2px; width: 83px; }

/* active states */
#mainmenu .news a.active {  background: url(/images/mainmenu/mainmenu_news_active.gif) no-repeat left top; width: 81px; }
#mainmenu .magazine a.active {     background: url(/images/mainmenu/mainmenu_magazine_active.gif) no-repeat left top; width: 80px; }
#mainmenu .architects a.active {   background: url(/images/mainmenu/mainmenu_architects_active.gif) no-repeat left top; width: 81px; }
#mainmenu .insider a.active {   background: url(/images/mainmenu/mainmenu_insideinfo_active.gif) no-repeat left top; width: 80px; }
#mainmenu .work a.active {         background: url(/images/mainmenu/mainmenu_work_active.gif) no-repeat left top; width: 81px; }
#mainmenu .study a.active {        background: url(/images/mainmenu/mainmenu_study_active.gif) no-repeat left top; width: 76px; }
#mainmenu .inspiration a.active {  background: url(/images/mainmenu/mainmenu_inspiration_active.gif) no-repeat left top; width: 81px; }
#mainmenu .blogs a.active {        background: url(/images/mainmenu/mainmenu_blogs_active.gif) no-repeat left top; width: 82px; }
#mainmenu .shop a.active {         background: url(/images/mainmenu/mainmenu_shop_active.gif) no-repeat left top; width: 83px; }
#mainmenu .news a.active {         background: url(/images/mainmenu/mainmenu_news_active.gif) no-repeat left top; width: 81px; }