/***********************************************************/
/* TOP-LEVEL NAVIGATION MENU                               */
/***********************************************************/

/***********************************************************/
/* Common to All Browsers                                  */
/***********************************************************/

#menu {
  float:left;
  width:1000px;
  height: 30px;
  background-color:#fff;
  padding-bottom: 0;
  z-index: 10;
}
#menu ul {
  padding:0;
  margin:0;
  list-style-type:none;
  list-style-image:none;
}
#menu ul li {
  float:left;
  position:relative;
  background-color:#fff;
}
#menu ul li a, #menu ul li a:visited {
  float:left;
  display:block;
  border-right:1px solid #fff;
  text-indent: -5000px;
  text-decoration: none;
  color:#FFF;
  height:30px;
}

#menu ul li:hover { width:auto; z-index: 10;}
#menu ul li ul { display: none; }
#menu table { margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0; }

/* colors and background images for each element */
#menu ul li.home a         { width: 89px; height: 30px; background: #fff url('/images/menu-home.gif') no-repeat center -5px; }
#menu ul li.profiles a     { width: 119px; height: 30px; background: #fff url('/images/menu-profiles.gif') no-repeat center -5px; }
#menu ul li.tools a        { width: 114px; height: 30px; background: #fff url('/images/menu-tools.gif') no-repeat center -5px; }
#menu ul li.publications a { width: 114px; height: 30px; background: #fff url('/images/menu-publications.gif') no-repeat center -5px; }
#menu ul li.topics a       { width: 99px; height: 30px; background: #fff url('/images/menu-topics.gif') no-repeat center -5px; }
#menu ul li.projects a  { width: 109px; height: 30px; background: #fff url('/images/menu-projects.gif') no-repeat center -5px; }
#menu ul li.media a        { width: 114px; height: 30px; background: #fff url('/images/menu-media.gif') no-repeat center -5px; }
#menu ul li.about a        { width: 114px; height: 30px; background: #fff url('/images/menu-about.gif') no-repeat center -5px; }
#menu ul li.donate a        { width: 120px; height: 30px; background: #fff url('/images/menu-donate.gif') no-repeat center -5px; border-right: none; }


/* highlight menu button when on the page (for pages that don't have drop-downs) */
div.home #menu li.home a  { background-position: center -45px; }
div.profiles #menu li.profiles a  { background-position: center -45px; }
div.media #menu li.media a  { background-position: center -45px; }
div.donate #menu li.donate a  { background-position: center -45px; }

/* highlight menu button when on the page (for pages that have drop-downs) */
div.topics #menu li.topics a { background-image: url('/images/menu-topics-o.gif'); }
div.projects #menu li.projects a { background-image: url('/images/menu-projects-o.gif'); }
div.about #menu li.about a { background-image: url('/images/menu-about-o.gif'); }
div.tools #menu li.tools a { background-image: url('/images/menu-tools-o.gif'); }
div.publications #menu li.publications a { background-image: url('/images/menu-publications-o.gif'); }

/* make sure that the submenus don't also change the background image! */
div.topics #menu li.topics li a { background-image: none; }
div.projects #menu li.projects li a { background-image: none; }
div.about #menu li.about li a { background-image: none; }
div.tools #menu li.tools li a { background-image: none; }
div.publications #menu li.publications li a { background-image: none; }

/***********************************************************/
/* Non-IE Browsers Only                                    */
/***********************************************************/

#menu ul li:hover ul {
  display:block;
  position:absolute;
  top:30px;
  left:0;
  width:178px;
  border-bottom:1px solid #0082c0;
}

#menu ul li.projects:hover ul {
  width:248px;	
}

/* menu-specific background when item is highlighted */
#menu ul li:hover a { background-position: center -45px; }

/* how far over do we move the last drop-down menu so that it fits flush right? */
#menu ul li:hover ul.endstop { left:-58px; }

#menu ul li:hover ul li a {
  text-indent: 0;
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:100%;
  font-weight:normal;
  text-transform: none;
  display:block;
  background: #eeebe3;
  color:#333;
  height:auto;
  line-height:14px;
  padding:4px 8px;
  width:160px;
  border:1px solid #125687;
  border-bottom: none;
}
#menu ul li:hover ul li a:hover { background-color: #125687; color: #fff; }  /* text color for highlighted drop-down item (non-IE) */
#menu ul li:hover ul li a { background-color: #eae6db; }  /* background color for non-highlighted drop-down item (non-IE) */

#menu ul li.projects:hover ul li a {
  width:230px;	
}

/* For the headers in the topics menu */
#menu ul li:hover ul li a.header, #menu ul li:hover ul li a.header:hover {
  font-size: 88%;
  line-height: 80%;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: -0.05em;
  color: white;
  background-color: #006699;
}
/***********************************************************/
/* IE 5 and IE 6                                           */
/***********************************************************/

#menu ul li a:hover ul {
  background:#e9f3f4;
  color:#333;
  display:block;
  position:absolute;top:32px;
  t\op:30px;
  background:#fff;
  left:0;
  border-bottom:1px solid #125687;
}

/* how far over do we move the last drop-down menu so that it fits flush right? (IE) */
#menu ul li a:hover ul.endstop { left:-58px; }

#menu ul li a:hover ul li a {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:100%;
  font-weight:normal;
  text-indent: 0;
  text-decoration: none;
  text-transform: none;
  display:block;
  background:#FFF;
  color:#000;
  height:auto;
  line-height:14px;
  padding:4px 8px;
  width:178px;
  w\idth:160px;
  border:1px solid #125687;
  border-bottom:0;
}
#menu ul li a:hover ul li a:hover { background-color: #e9f3f4; color: #222; } /* background color for highlighted drop-down item (IE) */
#menu ul li a:hover ul li a { background-color: #e9f3f4; }  /* background color for non-highlighted drop-down item (IE) */

#menu ul li.projects a:hover ul li a {
	width: 248px;
	w\idth: 230px;
}

/* menu-specific backgrounds (colors + image) when item is highlighted (IE) */
#menu ul li a:hover { background-position: center -45px; }

/***********************************************************/
/* SECOND-LEVEL SIDE NAVIGATION MENU                       */
/***********************************************************/

div.submenu ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  list-style-image: none;
  background-color: #fff;
  font-family: Georgia, "Palantino", Times, serif;
  font-size: 100%;
}

div.submenu ul li {
  list-style-type: none;
  list-style-image: none;
  padding: 0;
  margin: 0;
}

div.submenu ul li a, div.submenu ul li a:visited {
  display: block;
  background-color: #914452;
  border-bottom: 1px solid #a2ad00;
  border-right: 1px solid #914452;
  border-left: 1px solid #914452;
  color: #fff;
  height: 20px;
  line-height: 20px;
  padding: 2px 2px 2px 9px;
}

div.submenu ul li a:hover {
  background-color: #8684a4;
  color: #fff;
}

div.submenu ul li a.inactive {
  background-color: #BDBDBD;
}

div.submenu ul li a.inactive:hover {
  text-decoration: none;
  background-color: #005a8c;
}

div.submenu ul li div {
  border: 1px solid #914452;
  border-top: none;
  font-size: 88%;
  padding: 0;
}

/* This is for the sidemenu boxes that contain FRS steps rather than links */
div.submenu ul li div.text {
  padding: 5px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 82%;
  line-height: 105%;
}
div.submenu ul li div.text ul {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  list-style-image: url('/images/bullet.gif');
  font-size: 100%;
  margin: 0;
  padding: 0;
}
div.submenu ul li div.text ul li {
  padding-left: 12px;
  background: url('/images/bullet.gif') left 2px no-repeat;
}

div.submenu ul li ul {
  margin: 0 0 9px 0;
  padding: 4px 0 0 0;
  border: 1px solid white;
}

div.submenu ul li ul li {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

div.submenu ul li ul h2 {
  margin: 0 6px;
  padding: 4px 1px 1px 2px;
  text-transform: uppercase;
  font-size: 90%;
  color: #853c47;
  border-bottom: 2px solid #853c47;
}

div.submenu ul li ul li a, div.submenu ul li ul li a:active, div.submenu ul li ul li a:visited {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 90%;
  background-color: transparent;
  line-height: 1.1em;
  display: block;
  color: #8e9300;
  border: none;
  height: auto;
}

/* hover/active submenu colors */
div.submenu ul li.active a, div.submenu ul li.active a:hover {
  background-color: #fff;
  color: #8e9300;
  border-bottom: 1px solid #a2ad00;
}

/* border color of active expanding/collapsing submenu section */
div.submenu ul li.active div {
  border-color: #914452;
}

div.submenu ul li ul li,   div.submenu ul li ul li {
  margin: 2px 0;
  background-color: white;
}

div.submenu ul li ul li a:link, div.submenu ul li ul li a:active, div.submenu ul li ul li a:visited, div.submenu ul li ul li a:hover {
  margin: 0;
  background-color: white;
  border-bottom: none;
}

div.submenu ul li ul li a:link {
  color: #005a8c;
}

div.submenu ul li ul li a:link {
  color: #005a8c;
}

div.submenu ul li ul li a:hover {
  text-decoration: none;
  color: #a2ad00 !important;
}

div.submenu ul li ul li a:visited {
  color: #005a8c;
}

div.submenu ul li ul li a:link.activesub, div.submenu ul li ul li a:active.activesub, div.submenu ul li ul li a:visited.activesub, div.submenu ul li ul li a:hover.activesub {
  background-color: #fff !important;
  color: #a2ad00 !important;
}

/* A couple of special styles just for the submenu on the Tools */

div.tools div.submenu ul li.active a {
  background-color: #569bbd;
}

div.tools div.submenu ul li a {
  background-color: #569bbd;
}

div.tools div.submenu ul li a:hover {
  background-color: #76AE99;
}

div.tools div.submenu ul li a.inactive {
  background-color: #BDBDBD;
}

div.tools div.submenu ul li a.inactive:hover {
  text-decoration: none;
}