/**
 * FILE : nav_menus.css
 *
 * CREATED : 16 July 2004
 *
 * LAST MODIFIED : $Revision: 1.6 $ ($Date: 2006/11/30 03:29:40 $ by $Author: slyon $)
 *
 * AUTHOR : Warren Hedley, AfCS, SDSC
 *
 * DESCRIPTION : This stylesheet defines the rendering rules for the links in the navigation menus
 *   in the header and footer of almost every page in the Molecule Pages website. A lot of effort
 *   has been made to separate content and presentation as completely as possible so that multiple
 *   versions of the content are not required, and stylistic updates can be applied as easily as
 *   possible in the future. The stylesheet and corresponding HTML also attempts to satisfy
 *   accessiblity recommendations and work reasonably well on non-CSS capable clients.
 *
 *   Material was shamelessly stolen from Jeffre Zeldman's "Designing With Web Standards"
 *   (ISBN 0-7357-1201-8) and website http://www.alistapart.com/.
 */

/**
 * The text to be displayed inside each navigation link can be put inside a <span> element with
 * a class of "invis" to hide it from CSS-capable browsers that can display the image associated
 * with each link.
 */
.invis {
  display: none;
}


/**
 * The nav 1 and 2 menus will be unordered lists with no bullet mark displayed.
 */
#n1-menu, #n2-menu {
  list-style-type: none;
  border: 0;
  margin: 0;
  padding: 0;
}

/**
 * All items in each list will be displayed inline and floated to the left. The combination ensures
 * there are no linebreaks after each item.
 */
#n1-menu li, #n2-menu li {
  display: inline;
  float: left;
}

/**
 * All links in each menu item will be displayed as blocks (i.e., boxes) with no link decoration.
 */
#n1-menu li a, #n2-menu li a {
  display: block;
  text-decoration: none;
}


/**
 * This is applied to the <ul> containing the nav 1 menu. A repeating background image is set that
 * extends across the whole screen.
 */
#n1-menu {
  width: 100%;
  background: url(/molecule/rsc/img/nav/n1_background.gif) repeat-x;
  height: 23px;
}

/**
 * The next set of rules specify the images for each of the links in the nav 1 menu. The width and
 * height of each link are set (they are all displayed as blocks) and the background image is set.
 * A hover rule is used to do mouseovers, and an 'always on' ID is always supported, so that an
 * active link can be set.
 */
#n1_home, #n1_home_on {
  width: 53px;
  height: 23px;
  background: url(/molecule/rsc/img/nav/nav_home.gif) no-repeat;
}

#n1_home_on, #n1_home:hover {
  background: url(/molecule/rsc/img/nav/nav_home_on.gif) no-repeat;
}

#n1_update, #n1_update_on {
  width: 100px;
  height: 23px;
  background: url(/molecule/rsc/img/nav/nav_update.gif) no-repeat;
}

#n1_update_on, #n1_update:hover {
  background: url(/molecule/rsc/img/nav/nav_update_on.gif) no-repeat;
}

#n1_molecule, #n1_molecule_on {
  width: 88px;
  height: 23px;
  background: url(/molecule/rsc/img/nav/nav_molecule.gif) no-repeat;
}

#n1_molecule_on, #n1_molecule:hover {
  background: url(/molecule/rsc/img/nav/nav_molecule_on.gif) no-repeat;
}

#n1_datacenter, #n1_datacenter_on {
  width: 72px;
  height: 23px;
  background: url(/molecule/rsc/img/nav/nav_datacenter.gif) no-repeat;
}

#n1_datacenter_on, #n1_datacenter:hover {
  background: url(/molecule/rsc/img/nav/nav_datacenter_on.gif) no-repeat;
}

#n1_aboutus, #n1_aboutus_on {
  width: 63px;
  height: 23px;
  background: url(/molecule/rsc/img/nav/nav_aboutus.gif) no-repeat;
}

#n1_aboutus_on, #n1_aboutus:hover {
  background: url(/molecule/rsc/img/nav/nav_aboutus_on.gif) no-repeat;
}


/**
 * The logout link, if present, is defined with an absolute horizontal location that puts its right
 * edge at 760px. Defining it as the last nav-1 menu entry ensures it has the right vertical
 * location. Previously the vertical location was hardcoded to 0px, but this looked bad in the
 * google cache (and presumably other contexts where content is inserted above the menu). Note
 * that his button never seems to show up in IE on the Mac.  The login link, if present, has the
 * same properties as the logout button. Only one or the other will be present in any one page.
 */
#n1_logout, #n1_login {
  width: 76px;
  height: 23px;
  position: absolute;
  left: 684px;
}

#n1_logout {
  background: url(/molecule/rsc/img/nav/nav_logout.gif) no-repeat;
}

#n1_logout:hover {
  background: url(/molecule/rsc/img/nav/nav_logout_on.gif) no-repeat;
}

#n1_login {
  background: url(/molecule/rsc/img/nav/nav_login.gif) no-repeat;
}

#n1_login:hover {
  background: url(/molecule/rsc/img/nav/nav_login_on.gif) no-repeat;
}


/**
 * The nav 2 menu has a width of 760 pixels (not actually important) and a height of 62 pixels.
 */
#n2-menu {
  width: 760px;
  height: 62px;
}

/**
 * The next set of rules specify the size of and background images for each of the links in the
 * nav 2 menu, along with mouseover highlights.
 */
#n2_registration {
  width: 78px;
  height: 20px;
  background: url(/molecule/rsc/img/nav/nav_registration.gif) no-repeat center center;
}

#n2_registration:hover {
  background: url(/molecule/rsc/img/nav/nav_registration_on.gif)
}

#n2_ealert {
  width: 51px;
  height: 20px;
  background: url(/molecule/rsc/img/nav/nav_ealert.gif) no-repeat center center;
}

#n2_ealert:hover {
  background: url(/molecule/rsc/img/nav/nav_ealert_on.gif)
}

#n2_help {
  width: 39px;
  height: 20px;
  background: url(/molecule/rsc/img/nav/nav_help.gif) no-repeat center center;
}

#n2_help:hover {
  background: url(/molecule/rsc/img/nav/nav_help_on.gif)
}

#n2_contact_us {
  width: 66px;
  height: 20px;
  background: url(/molecule/rsc/img/nav/nav_contactus.gif) no-repeat center center;
}

#n2_contact_us:hover {
  background: url(/molecule/rsc/img/nav/nav_contactus_on.gif)
}

#n2_site_guide {
  width: 66px;
  height: 20px;
  background: url(/molecule/rsc/img/nav/nav_site_guide.gif) no-repeat center center;
}

#n2_site_guide:hover {
  background: url(/molecule/rsc/img/nav/nav_site_guide_on.gif)
}

#n2_search {
  width: 76px;
  height: 20px;
  background: url(/molecule/rsc/img/nav/nav_search.gif) no-repeat center center;
}

#n2_search:hover {
  background: url(/molecule/rsc/img/nav/nav_search_on.gif)
}

#lg_afcs_nature {
  width: 98px;
  height: 62px;
  background: url(/molecule/rsc/img/nav/logo_afcs_nature.gif) no-repeat center center;
}

#lg_ucsd_nature {
  width: 384px;
  height: 62px;
  background: url(/molecule/rsc/img/nav/logo_ucsd_sig.gif) no-repeat center center;
}

#lg_sig_gtway {
  width: 286px;
  height: 62px;
  background: url(/molecule/rsc/img/nav/hdr_signaling_gateway.gif) no-repeat center center;
}


/**
 * The nav 3 and nav 4 menus are implemented as <table>s, because tables provide good scaling as
 * font sizes change across platforms. Each table is inside a <div> which extends the width of
 * the display and provides the background colour.
 */
#n3-menu-container {
  width: 100%;
  background: #336666;
}

#n4-menu-container {
  width: 100%;
  background: #669999;
}

/**
 * Table cells in the nav 3 and 4 menus have right aligned text and a height of 22 pixels.
 */
#n3-menu-container td, #n4-menu-container td {
  text-align: right;
  height: 22px;
}

/**
 * The left most cell in the nav 3 and nav 4 menus (which are identified by IDs to force this CSS
 * rule to override the one above) are left aligned and have a left padding of 12 pixels.
 */
#n3-menu-container tr #n3-mp-logo, #n4-menu-container tr #n4-welcome {
  text-align:left;
  padding-left: 12px;
}

/**
 * All text in the nav 3 and 4 menus is 11 pixels, bold, and white.
 */
#n3-menu-container td a, #n4-menu-container td, #n4-menu-container td a {
  font-size: 11px;
  font-weight: bold;
  color: white;
}

/**
 * Any cell with a class of active is orange.
 */
#n3-menu-container td a.active, #n4-menu-container td a.active {
  color: #FF9900;
}

/**
 * This rule defines the look of the left most cell in the nav 3 menu, which contains a molecule
 * pages logo.
 */
#lg_mp {
  display: block;
  width: 134px;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background: url(/molecule/rsc/img/nav/hdr_molecule.gif) no-repeat bottom left;
}


/**
 * The following rules apply to the page footer, which contains the same navigation menus as the
 * header. This rule is used to specify the size and background image of the link to Nature that
 * is displayed just above the footer break. The width is set to 146px (bigger than the image
 * itself) to make sure it is center aligned below the homepage menus.
 */
#ft_npg_logo {
  display: block;
  width: 146px;
  height: 96px;
  background: url(/molecule/rsc/img/nav/logo_nature_pub_group.gif) no-repeat center center;
}

/**
 * The first footer menu is 760 pixels wide and each line of text is centered.
 */
#ft-menu-1 {
  width: 760px;
  text-align: center;
}

/**
 * All text in the footer menu is green.
 */
#ft-menu-1, #ft-menu-1 a {
  color: #336666;
}

/**
 * The second footer menu is 760 pixels wide, centered, and has 8 pixels of padding above and below.
 */
#ft-menu-2 {
  width: 760px;
  text-align: center;
  padding: 8px 0 8px 0;
}

/**
 * Links in the second footer menu are bold and black.
 */
#ft-menu-2 a {
  color: black;
  font-weight: bold;
}


/**
 * The "spacers" are 1 pixel high dotted lines that span the width of the screen. The
 * "dk-dot-spacer" contains dark and light green dots and appears between the nav 1 and 2 menus.
 * The "lt-dot-spacer" contains dark green and white dots and appears between the nav 2 and 3
 * menus, and in the login page. The "lt-dot-spacer-big" has 6 pixels of padding above and below.
 *
 * Because IE 6 doesn't allow 1 pixels high <div>s or <hr>s, it seems we have to use a <table> to
 * achieve the spacer. This seems to work:
 *
 * <table class="dk-dot-spacer" cellspacing="0" border="0" cellpadding="0"><tr><td></td></tr></table>
 */
.dk-dot-spacer, .lt-dot-spacer, .lt-dot-spacer-big {
  width: 100%;
}

.dk-dot-spacer td {
  background: url(/molecule/rsc/img/nav/dot_horiz_2.gif) repeat-x;
  height: 1px;
}

.lt-dot-spacer td, .lt-dot-spacer-big td {
  background: url(/molecule/rsc/img/nav/dot_horiz.gif) repeat-x;
  height: 1px;
}

.lt-dot-spacer-big {
  margin: 6px 0 6px 0;
}