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

/* style the links for the top level */
.menu a, .menu a:visited {display:block;float:left;height:100%; width:7em; font-size:1em;text-decoration:none;color:#FFF;background: url(../images/1.jpg) repeat-x; padding:0; }

.menu ul li.first a, .menu ul li.first a:visited {width:279px; background:none;}
.menu ul li.first{width:281px; background:url(../images/bg_li1.jpg) no-repeat right; text-align:center;}

.menu ul li.second a, .menu ul li.second a:visited {width:245px; background:none;}
.menu ul li.second{width:247px; background:url(../images/bg_li2.jpg) no-repeat right; text-align:center;}

.menu ul li.third a, .menu ul li.third a:visited {width:177px; background:none;}
.menu ul li.third{width:178px; background:url(../images/bg_li3.jpg) no-repeat right; text-align:center;}

/* style the sub-level lists */
.menu ul ul { z-index:100; background:#93ccef; text-align:left; border-right:1px solid #0082d1;border-left:1px solid #0082d1; border-bottom:1px solid #0082d1; visibility:hidden;position:absolute;height:0; top:33px; left:0;}
/* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul.first {z-index:100;width:269px; text-align:left; padding-top:20px;}
.menu ul ul.second { z-index:100;width:235px; text-align:left; padding-top:20px;}
.menu ul ul.third { z-index:100;width:167px; text-align:left; padding-top:20px;}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block;background:#97ccec; color:#fff; /* */ height:100%; line-height:1em; width:279px; text-decoration:none;}
* html .menu ul ul a, * html .menu ul ul a:visited  {/* */width:279px; w\idth:auto; }

.menu ul ul.first a, .menu ul ul.first a:visited {  width:279px; display:block;}
* html .menu ul ul.first a, * html .menu ul ul.first a:visited  { width:269px; w\idth:259; display:block;}

.menu ul ul.second a, .menu ul ul.second a:visited {width:245px; display:block;}
* html .menu ul ul.seconds a, * html .menu ul ul.second a:visited  { width:245px; w\idth:235px;}

.menu ul ul.third a, .menu ul ul.third a:visited { width:177px; display:block;}
* html .menu ul ul.third a, * html .menu ul ul.third a:visited  {width:177px; w\idth:167px;}


/* hack IE5.x to get the correct the faulty box model and get the width right */
* html .menu a, * html .menu a:visited {width:11em; w\idth:7em;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left; height:34px; line-height:34px; display:block;}

/* style the sub level list items */
.menu ul ul li {display:block; height:28px; line-height:28px; text-align:left;}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {border-collapse:collapse; padding:0; margin:-1px; width:0; height:0; font-size:1em; z-index:1;}

/* style the level hovers */

/* first */
* html .menu a:hover {color:#FFF;position:relative; z-index:100; text-decoration:none;}
.menu li:hover {position:relative;}
.menu :hover > a {color:#FFF; text-decoration:none;}

/* second */
* html .menu ul ul a:hover{color:#1090ca; position:relative; z-index:110;  text-decoration:none;}
.menu ul ul li:hover {position:relative;}
.menu ul ul :hover > a {color:#1090ca;}
.menu ul ul a:hover{color:#1090ca;}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible; height:auto; padding:0; left:0; text-align:left; padding-left:10px;  padding-top:10px;}