Engage layout

engage.css

#main {
  background: #eee;
  padding: 20px;
}

#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background: #eee;
  margin-bottom: -70px;
}

#push,
footer {
  height: 70px;
}

footer .container {
  padding: 19px;
  background: #fff;
  text-align: right;
}

engage.html

  <div id="wrapper" class="container">
    
    <header>
      <a href="/"><h1 class="logo">FamilySearch</h1></a>
      <ul class="unstyled utilities">
        <li>
          <a href="#" class="utility-trigger">Resources</a>
          <ul class="utility-menu unstyled">
            <li><a href="#">Wiki</a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="utility-trigger">Help</a>
          <ul class="utility-menu unstyled">
            <li><a href="#">Live Chat</a></li>
         </ul>
        </li>
      <% if (user && user.loggedIn) { %>
        <li>
          <a href="#" class="utility-trigger"><%= user.profile.displayName %></a>
          <ul class="utility-menu unstyled">
            <li><a href="/profile">Settings</a></li>
            <li><a href="/logout">Sign out</a></li>
          </ul>
        </li>
      <% } else { %>
        <li>
          <a href="/login" class="utility-trigger">Sign in</a>
        </li>
      <% } %>
        <li>
          <a href="#" class="utility-trigger" id="church-sites">CHURCH WEBSITES</a>
          <ul class="utility-menu unstyled">
            <li><a href="#">LDS.org</a></li>
          </ul>
        </li>
      </ul>
      <nav>
        <ul class="unstyled clearfix">
          <li><a href="/">Home</a></li>
          <li><a href="/tree">Family Tree</a></li>
          <li><a href="/photos">Photos</a></li>
          <li><a href="/temple">Temple</a></li>
          <li><a href="/search" class="active">Search Records</a></li>
      </nav>
    </header>

    <%- body %>

    <div id="push"></div>
  </div>


  <footer>
    <div class="container">
      <p>Copyright 2012 and <a href="#">stuff</a></p>
    </div>
  </footer>