/* adapted from http://www.meyerweb.com/eric/css/edge/menus/demo.html */
body, ul, ul li, #menu { margin: 0; padding: 0; }
body { background: #fff; color: #000; font-family: Arial, sans-serif; }
ul { border-bottom: 1px solid #66f; font-size: 1em; }
/* ul li { border: 1px solid #66f; } */
ul li { list-style-type: none; border-width: 1px 1px 0 3px; position: relative; }
ul ul { display: none; }
ul ul { width: 10em; }
ul li:hover > ul { display: block; position: absolute; top: -1px; left: 100%; }
#menu li a { display: block; padding: 5px 7px; text-decoration: none; background: #fff; }
li.sub > a { font-weight: bold; background: #ffe; }

h1 { margin: 0; padding: 1em 0.25em 0; font-weight: bold; font-size: 2.5em; line-height: 0.8em; border-bottom: 1px solid #66f; text-align: right; color: #009; letter-spacing: 2px;}

div#whole { margin: 0 20em 0 1em; padding: 0; border-right: 1px solid #66f; }
div#whole p { margin: 1em 3em 1em 0.5em; }

#menu { position: absolute; top: 6em; right: 0; width: 20em; }
#menu > ul { width: 20em; margin-left: -1px; font-size: 85%; }
#menu ul { border: 1px solid #66f; border-width: 0 0 0 1px; }
#menu ul li { border-width: 1px 0; border-color: white; padding: 0 0 0 5px; line-height: 1.25em; }
#menu ul ul { border-width: 0 1px 1px 1px; border-color: gray #66f gray gray; }
#menu ul ul li { border-color: #FEFEFC; }
#menu li > a, #menu li > .selfref { background-color: transparent; padding: 3px; }
#menu li:hover { background-color: #66f; color: #fff; }
#menu li.sub:hover { margin-left: -18.2em; border: 1px solid gray; background: #DDB; }
#menu li.sub:hover > a { color: #fff; }
#menu li.sub:hover > ul { top: 1.75em; left: -1px; background: #FEFEFC; }

h4 { margin: 0 0.5em 0 0; padding: 0 0.25em; font-size: 90%; border-bottom: 1px solid #66f; }