sco/jw-nav.html

## jw-nav.html
<html>
  <head>
    <title>JW Nav</title>

    <style>

    /* reset margins and padding on every element */
    * { margin: 0; padding: 0; }

    /* style the whole page */
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 80%;
      color: #222;
      padding-bottom: 40px;
    }

    /* style the container element that holds everything */
    #container {
      width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    /* style the header div */
    #header {
      padding: 0px 9px 0px 9px;
      height: 177px;
    }

    /* style the nav list */
    #nav {
      list-style-type: none;
      font-family: arial;
      font-size: 14px;
      background: #f2f2f2 url('http://jacobswellchurch.org/images/nav_background.gif') no-repeat center;
      height: 35px;
      margin-left: 0px;
      padding-left: 100px; /* rough centering */
      margin-bottom: 0px;
      text-align: center;
    }

    /* style the nav items */
    #nav li {
      display: block;
      margin-right: 10px;
      text-decoration: none;
      height: 21px;
      float: left;
      width: 104px;
      padding-top: 14px;
    }

    /* style the nav links */
    #nav li a {
      color: #666;
      text-decoration: none;
    }

    /* make the nav links darker on hover */
    #nav li a:hover {
      background-color: transparent;
      color: #555555;
      text-decoration: none;
    }

    /* give the "about us" nav item a selected background. in the full version, there is one rule for every nav item */
    body.aboutus #nav li.aboutus {
      background: transparent url('http://jacobswellchurch.org/images/navitem_background.gif') no-repeat center;
    }

    /* special case for the sermon audio tab, since it's wider */
    #nav li.sermonaudio { width: 115px; }

    /* style the subnav list */
    #subnav {
      list-style-type: none;
      font-family: arial;
      margin-bottom: 0px;
      padding-top: 6px;
      font-size: 12px;
      background-color: #fff;
      margin-left: 0px;
      text-align: center;
    }

    /* style the subnav items */
    #subnav li {
      display: inline;
      margin-right: 31px;
      color: #555555;
      text-decoration: none;
    }

    /* style the subnav links */
    #subnav li a {
      color: #757575;
      text-decoration: none;
    }

    /* make the subnav items underlined when you hover */
    #subnav li a:hover {
      background-color: transparent;
      color: #555555;
      text-decoration: underline;
    }

    /* make the "home" subnav tab bold. in the full version, there is one rule for every possible subnav item */
    body.home #subnav li.home a {
      color: #000;
      font-weight: bold;
      text-decoration: none;
    }

    </style>
  </head>

  <!-- these two body classes determine the highlighted nav and subnav items, respectively -->
  <body class="aboutus home">

    <div id="container">
      <div id="header">
        <ul id="nav">
          <li class="aboutus"><a href="/">About Us</a></li>
          <li class="community"><a href="/community">Community</a></li>
          <li class="getinvolved"><a href="/serviceteams">Get Involved</a></li>
          <li class="sermonaudio"><a href="/messages">Sermon Audio</a></li>
          <li class="contactus"><a href="/contactus">Contact Us</a></li>
        </ul>

        <ul id="subnav">
          <li class="home"><a href="/">Home</a></li>
          <li class="news"><a href="/announcements">News</a></li>
          <li class="calendar"><a href="/events">Calendar</a></li>
          <li class="worship"><a href="/worship">Worship</a></li>
          <li class="story"><a href="/story">Our Story</a></li>
          <li class="beliefs"><a href="/beliefs">Our Beliefs</a></li>
          <li class="leadership"><a href="/leadership">Leadership</a></li>
          <li class="finances"><a href="/finances">Finances</a></li>
        </ul>
      </div>
    </div>

  </body>
</html>