New Header

dabblet.css

/**
 * New Header
 */
* { margin:0; padding:0 }
body { font:300 100%/1.4 proxima-nova-1,proxima-nova-2,sans-serif;
	color:#444; background:#fff }
a, a:active, a:focus, a:hover { outline:none; text-decoration:none; color:#78B000 }
a:hover,a:active, a:focus { text-decoration:underline }
input { outline:none }

#top { border-top:4px solid #a5cc34; text-align:center }
#top nav { display:inline-block; width:80%; text-align:left; font-size:18px; white-space:nowrap;
	border-bottom:1px solid #eee; position:relative; min-width:910px;
	padding:14px 0;  background:#fff; }
#top nav:after { content:''; position:absolute; z-index:-2;
  top:80%; bottom:0px; left:10px; right:10px; border-radius:100px / 10px;
  box-shadow:0 0 6px rgba(0,0,0,0.8) }
#top nav a { color:#444; font-weight:500 }
#top nav > a { margin-right:30px; vertical-align:middle }
#top #logo { height:1.2em; margin-right:60px; vertical-align:middle }

#search { display:inline-block; position:relative; width:30%; top:1px; vertical-align:middle }
#search input { font-size:16px; padding:6px 8px; display:inline-block; width:100%;
	border:1px solid #ccc; border-radius:4px; box-shadow:inset 0 1px 4px rgba(100,100,100,0.3);
	position:relative }
#search input:focus { border-color:#aaa; box-shadow:0 1px 3px #bbb }
#search menu { display:inline-block }
#search button { text-indent:-9000px;
	border:none; width:30px; height:26px;
	background:url('http://f.cl.ly/items/3u42240y042w022E2w2J/search_icon.png') 5px 4px no-repeat #fff;
	padding:0 10px; position:absolute; top:3px; right:-16px }
#search button:hover { cursor:pointer }

#account { float:right; margin-top:9px } 
#account { display:inline-block; font-size:14px; vertical-align:middle }
#account a { padding:0 10px }
#account a + a { border-left:1px solid #bbb }

dabblet.html

<header id="top">
	<nav>
		<img id="logo" src="http://f.cl.ly/items/0C0O043Z2m0T141t0Y3M/logo_green_flat.svg">
		<a href="">Books</a>
		<a href="">Collections</a>
		<form id=search action="/search">
    		<input name=query placeholder="Search by...">
    		<menu class="bubble autocomplete autocomplete_search_bar"></menu>
    		<input name=filter value=all type=hidden>
    		<button title=Search>Search</button>
		</form>
		<menu id="account">
			<a href="">Register</a>
			<a href="">Sign In</a>
		</menu>
	</nav>
</header>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}