Untitled

dabblet.css

.container > #header > #nav-container {
		width: 570px;
		right: 10px;
		position: absolute;
			
	}
	.container > #header > #nav-container > ul#nav-global {
		padding-top: 8px;
		height: 18px;
		font-weight: bold;
		white-space: nowrap;
		margin: 0;
		padding: 0;
		list-style-type: none;
		float: right;
		clear: right;
		/* fix */
		font-size: 100%;
		padding-top: 10px;
		padding-bottom: 8px;
		border: 1px dashed #DDD;
		border-radius: 6px;
		box-shadow: inset 1px 1px 2px #AAA;
		transition: background .2s ease-in-out;
	}
	.container > #header > #nav-container > ul#nav-global:hover {
		background-image: linear-gradient(rgba(119,116,5,0.1),rgba(0,119,204,0.1));	
	}
	.container > #header > #nav-container > ul#nav-global > li {
		line-height: 14px;
		margin: 0;
		padding: 0 5px;
		list-style-type: none;
		float: left;
		display: inline-block;
	}
	.container > #header > #nav-container > ul#nav-global span.login , 
	.container > #header > #nav-container > ul#nav-global span.logout {
		cursor: pointer;	
	}
	.container > #header > #nav-container > ul#nav-global span.login:hover ,
	.container > #header > #nav-container > ul#nav-global span.logout:hover {
		color: #07C;	
	}
	.container > #header > #nav-container > ul#nav-global > li + li {
		border-left: 1px solid gray;
	}

dabblet.html

<div id="nav-container">
            	<ul id="nav-global" class="nav">
            		<li><a href="sign_up">Sign Up</a></li>
                    <li><a href="sign_in" class="login">Login</a></li>
                    <li><a href="login_facebook">Facebook</a></li>
                </ul>
            	<div id="ux-account">
                </div>
            </div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"html"}