Docs Header Recurly

by kizer

HTML

<section class="section" id="top">
    <!-- header -->
    <header class="section" id="header">
      <a class="section" href="/" id="masthead" title="Home">
        <img src="http://docs.recurly.com/images/recurly-logo.png" width="203" height="76" alt="Recurly">
      </a>
      
      <!-- nav -->
       <nav class="subsection" id="top-nav">
        <ul class="subsection" id="menu-util">
          <li id="nav-home">
              <a href="http://recurly.com/" title="Home">Home</a>
            </li>
          <li id="nav-blog">
              <a href="http://blog.recurly.com/" onclick="_gaq.push(['_trackPageview','/blog']);" title="Blog">Blog</a>
            </li>
          <li id="nav-signin">
              <a href="https://app.recurly.com/login" onclick="_gaq.push(['_trackPageview','/login']);" title="Sign In">Sign In</a>
            </li>
          <li id="nav-signup">
              <a href="https://app.recurly.com/signup" onclick="_gaq.push(['_trackPageview','/signup']);" title="Sign Up">Sign Up</a>
            </li>
        </ul>
      </nav>
      <!-- /nav -->
    </header>
    <!-- /header -->
</section>

CSS

body {
 margin: 0; padding: 0;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

#main, #top, #bottom {
display: block;
margin: 0 auto;
padding: 0;
}

#header {
height: 74px;
background: #5F4D89 url(http://kizer.me/recurly/new-header.png) repeat-x;
}

#content {
/* kill the UGLY background streams over content(replace ID on docs.recurly.com with this one! */
min-height: 400px;
}

ul#menu-util {
 position: relative;
 top: -52px;
 list-style: none;   
}

#menu-util li {
border-bottom: none;
float: left;

font-size: 12px;
font-weight: 700;
    height: 28px;
}

#menu-util li a {
 color: #fff;
 text-decoration: none;
 text-shadow: #000 0px 1px 0px;
    height: 28px;
        -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #2a2a2a;
margin: 0px 10px;
padding: 6px 10px 6px 10px;
-webkit-box-shadow:
        rgba(255,255,255, .1648) 0px 1px 0px inset,
        rgba(255,255,255, .3694) 0px 1px 0px;
}

/* fixes the sidebar colors */
h1,h2,h3,h4,h5,h6 {
color: #2a2a2a;
font-size: 1.5em;
font-weight: 700;
line-height: 1em;
margin: 1em 0;
}

#top-nav #menu-util {
float: right;
margin: 0 1.5em 0 0;
padding: 0;
text-align: right;
}