/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#menu 
{
/* we abandoned width constraints on the main elements. the menu's containing element sets the width. in this case it is a <td> that has no set width */
/*width:745px; */
/*width:625px;*/
height:27px; 
/*font-size: 0.85em; 	there is a <a> definition that sets the font size to px. this seems unneccessary */
position:relative; 
z-index:100;
}

/* hack to correct IE5.5 faulty box model */
* html #menu 
{
/*width:746px; 
w\idth:745px;*/
/*width:626px; 
w\idth:625px;*/
}

/* remove all the bullets, borders and padding from the default list styling */
#menu ul 
{
padding:0;
margin:0;
list-style-type:none;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#menu li 
{
float:left;
/*width:149px;*/
position:relative;
}

#menu ul ul 
{
width:149px;
}


/*======================================*/
/* STYLE THE LINKS FOR THE TOP LEVEL */
/* these styles do get inherited. they also get over ridden below for sub menu elements */
/*======================================*/
#menu a, 
#menu a:visited 
{
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
/*width:138px; we are removing the set width. the <a>s are set to block level, so they will take up 100% of their containing parent (ususally a <li>)*/
height:25px; 
/*padding-left:10px; */
padding: 0 6px;
line-height:24px;

border: 1px solid #fff;
border-width: 0 1px 0 0;


}

/* a hack so that IE5.5 faulty box model is corrected */
/*
* html #menu a, 
* html #menu a:visited 
{
w\idth:60px;
}
*/

* html #menu #topLinkHome
{
w\idth: 35px;
}

* html #menu #topLinkAbout
{
w\idth: 70px;
}

* html #menu #topLinkProducts
{
w\idth: 55px;
}

* html #menu #topLinkFeatures
{
w\idth: 50px;
}

* html #menu #topLinkMarkets
{
w\idth: 55px;
}

* html #menu #topLinkLiterature
{
w\idth: 55px;
}

* html #menu #topLinkVDT
{
w\idth: 110px;
}

* html #menu #topLinkSales
{
w\idth: 80px;
}


* html #menu #topLinkContact
{
border-right: 0;
}








/* style the second level background */
#menu ul ul a.drop, 
#menu ul ul a.drop:visited 
{
/*background:#d4d8bd url(/images/header/submenu_flag_white.gif) bottom right no-repeat;*/
background-image: url(/images/header/submenu_flag_white.gif);
background-position: bottom right;
background-repeat: no-repeat;
}

/* style the second level hover */
#menu ul ul a.drop:hover
{
background:#7688BB url(/images/header/submenu_flag_white.gif) bottom right no-repeat;
}

#menu ul ul :hover > a.drop 
{
background: #7688BB url(/images/header/submenu_flag_white.gif) bottom right no-repeat;
}


/* style the third level background */
#menu ul ul ul a, 
#menu ul ul ul a:visited 
{
background: #7688BB;
color: #fff;
}
/* style the third level hover */
#menu ul ul ul a:hover 
{
background:#D8DCEE;
color: #000;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */
#menu ul ul 
{
/*width:149px; i just do not see the need to redefine the ul ul width. we do it above */
visibility:hidden;
position:absolute;
height:0;
top:24px;
left: -1px; 
border-top:1px solid #fff;
}

/* another hack for IE5.5 */
* html #menu ul ul 
{
/*
top:30px;
t\op:31px;
surprisingly, this hack does not seem to be needed now. this sets where the secondary menu is vertically positioned
*/

}



/* style the table so that it takes no part in the layout - required for IE to work */
#menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}


/*======================================*/
/* STYLE THE SECOND LEVEL LINKS */
/*======================================*/
#menu ul ul a, 
#menu ul ul a:visited 
{
background-color: #25408E;
color:#fff;
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:128px;
border-width: 0 1px 1px 1px;
}

/* yet another hack for IE5.5 */
* html #menu ul ul a, 
* html #menu ul ul a:visited 
{
width:150px;
w\idth:128px;
}


/*======================================*/
/* STYLE THE TOP LEVEL HOVER */
/*======================================*/
#menu a:hover, 
#menu ul ul a:hover
{
color: #fff; 
background:#7688BB;
}

#menu :hover > a, 
#menu ul ul :hover > a 
{
color:#fff;
background:#7688BB;
}



/*======================================*/
/* THIRD LEVEL LINKS */
/*======================================*/
/* position the third level flyout menu */
#menu ul ul ul
{
left:149px;
top:-1px; 
/*width:149px; i also believe the ul ul width definition should cover this */
}

/* position the third level flyout menu for a left flyout */
#menu ul ul ul.left 
{
left:-149px;
}

/*======================================*/
/* VISIBILITY DEFINITIONS */
/*======================================*/
/* make the second level visible when hover on first level list OR link */
#menu ul li:hover ul,
#menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
#menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#menu ul :hover ul :hover ul{ visibility:visible;}