/*First row of comments.  The settings should be the same as the second row other than the width of the "ul which is 138 px*/
#menu       { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; z-index: 50; width: 650px; float: left }

/*#menu ul              { line-height: 1; text-align: left; list-style-type: none; list-style-position: outside; margin: 1px 2px; padding: 0 0 0 1px; z-index: 100; width: 153px; float: left }*/
#menu ul               { line-height: 1; text-align: left; list-style-type: none; list-style-position: outside; margin: 1px 2px; padding: 0 0 0 1px; z-index: 100; width: 120px; float: left }

#menu a     { color: #666; font-size: 8pt; font-family: arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; list-style-image: url(images/bullet.gif); display: block; margin: 0; padding: 2px 3px; height: 1% }

#menu a:hover    { color: #000; background: #bed45d; list-style-image: url(images/bullet.gif) }

#menu li   { list-style-image: none; position: relative; width: 100%; float: left; border: solid 1px #666 }
#menu ul ul    { background-color: #fbf8dd; margin: 1px; padding: 0 0 0 2px; position: absolute; z-index: 200; left: 0; width: 100%; float: left }
#menu ul ul li  { list-style-image: none; z-index: 500; border-style: solid none none solid; border-width: 1pt 0 0 1pt; border-color: #666   #666 }
#menu ul ul ul li  { list-style-image: none; z-index: 500; border-style: dotted none none solid; border-width: 1pt 0 0 1pt; border-color: #666   #666 }
#menu ul ul ul  { position: absolute; z-index: 500; top: 2px; left: 95%; float: left }

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
  { display: none }

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/*First row of comments.  The settings should be the same as the first row other than the width of the "ul which is ___ px for this second row*/
#menu2    { background: #fbf8dd; z-index: 50; width: 650px; float: left }

#menu2 ul     { line-height: 1; text-align: left; list-style: none; margin: 1px 2px; padding: 0 0 0 1px; z-index: 100; width: 153px; float: left }

#menu2 a    { color: #666; font-size: 8pt; font-family: arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; display: block; margin: 0; padding: 2px 3px; height: 1% }

#menu2 a:hover   { color: #000; background: #bed45d }

#menu2 li  { position: relative; width: 100%; float: left; border: solid 1px #666}
#menu2 ul ul    { background-color: #fbf8dd; margin: 1px; padding: 0 0 0 2px; position: absolute; z-index: 200; left: 0; width: 100%; float: left }
#menu2 ul ul li { z-index: 500; border-top: 1pt solid #666; border-right: 0; border-bottom: 0; border-left: 1pt solid #666}
#menu2 ul ul ul li { z-index: 500; border-top: 1pt dotted #666; border-right: 0; border-bottom: 0; border-left: 1pt solid #666}
#menu2 ul ul ul  { position: absolute; z-index: 500; top: 2px; left: 95%; float: left }

div#menu2 ul ul,
div#menu2 ul li:hover ul ul,
div#menu2 ul ul li:hover ul ul
 { display: none }

div#menu2 ul li:hover ul,
div#menu2 ul ul li:hover ul,
div#menu2 ul ul ul li:hover ul
{display: block;}