/* The Container for the navigation*/
.menu {
width: 800px;
height:3.5em;
font-size:0.85em;
position:relative;
z-index:100;
margin:-13px 0 0 10px;
}


/* remove all the bullets, borders and padding from the default list styling, add the main background color and height for nav elements */
.menu ul {
padding-left:3px;
margin:0;
list-style-type:none; 
height:3.5em; 
background:#cdb380;
}

/* style the sub-level lists */
.menu ul ul {
width:15em;
}

/* 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:3.5em;
line-height:3em;
}

/* style the sub level list items */
.menu ul ul li {
display:block;
width:12em;
height:auto;
position:relative;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
float:left;
height:100%;
font-size:14px;
font-weight:bold;
font-variant:small-caps;
color:#036564;
background:#cdb380;
padding:0 1em 0 1em;
}

.menu li span {
display:block;
float:left;
height:100%;
font-size:14px;
font-weight:bold;
font-variant:small-caps;
color:#fff;
background:#cdb380;
padding:0 1.5em 0 1em;
}

.menu li li span {
display:block;
float:left;
height:100%;
font-size:14px;
font-weight:bold;
font-variant:small-caps;
color:#036564;
background:#cdb380;
padding:0 1em 0 1em;
width:12em;
line-height:1.7em;
margin-left:-3px;
}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {
display:block;
background:#cdb380; 
color:#fff;
width:12em;
height:100%;
line-height:1em; 
padding:0.5em 1em;
margin-left:-3px;
}

/* style the first level hover */
.menu :hover > a {
color:#fff;
background:#036564;
}

/* style the second level hover */
.menu ul ul :hover > a {
color:#fff;
background:#036564;
}

.menu ul table ul a, .menu ul table ul a:visited  {
width:14em; 
w\idth:12em;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; left:0; top:0; font-size:1em; z-index:-1;}
.menu ul ul table {lef\t:-1px;}
.menu ul ul table ul.left {margin-lef\t:2px;}

.menu li:hover {position:relative;}
* html .menu a:hover {position:relative;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:3em;left:0;width:14em;}


/* 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; height:auto; padding-bottom:3em; background:transparent url(images/trans.gif);}