Untitled

dabblet.css

body {padding:0; margin:0; outline:none; border:none; overflow-x:none; list-style:none; 
}

input[type=text], input[type=password] {width:50%; height:22px; padding:2px 5px; border:1px solid #c3c3c3; border-top-color:#b0b0b0;}
input[type=text]:hover, input[type=password]:hover {border:1px solid #a3a3a3; box-shadow:0px 2px 6px -2px #c3c3c3 inset }
input[type=text]:focus, input[type=password]:focus {border:1px solid #4d90fe; box-shadow:0px 2px 6px -2px #a3aa3 inset; outline:none;}


#links-nav-top {font:13px/26px Arial, sans-serif; background-color:#333; padding:5px;}
#links-nav-top li {display:inline; width:80%;  padding:2px 10px; font-weight:bold; text-transform:capitalize;}
#links-nav-top li a {text-decoration:none; color:#c3c3c3;}
#links-nav-top li a:hover {color:#fff;}

#nav-top {height:40px; padding:2px 15px; border:1px solid #f3f3f3;}
#nav-top .logo {float:left; width:15%; border:1px solid #333; height:90%;}
#nav-top .pesquisa {float:left; width:50%; margin:4px 10px;}
#nav-top .painel-user {float:right; width:30%; border:1px solid #333; height:90%;} 
.btn {width:60px; font-weight:600; height:28px; border:1px solid #3079ed; border-radius:3px; background-color:#4d90fe; color:#fff; cursor:pointer; margin:0 10px;}
.btn:hover{background:#3079e0;}

#menu-nav-top {font:14px Roboto,arial,sans-serif; white-space:nowrap; background-color:#f3f3f3; font-weight:500; text-shadow:0px 0px 0px rgba(0, 0, 0, 0.6), 0px 1px 0px rgba(255, 255, 255, 0.6); }
#menu-nav-top li {

display: inline-block;
line-height: 1.4;
margin: 0 18px;
max-width: 180px;
min-width: 20px;
padding: 13px 0 10px 0;
text-transform:capitalize;
}
#menu-nav-top li a {text-decoration:none;color: #737373;
transition:all .318s;
border-bottom:2px solid transparent;
padding-bottom:10px;
}
#menu-nav-top li a:hover {color:#333; 
transition:all .318s;
border-color:#3079e0;}



.ativo {color:#333 !important; padding-bottom:10px; border-bottom:2px solid #3079e0 !important;}


#css3-transition {padding:5px; background-color:#333;}
#css3-transition a { color: #333; }
#css3-transition .asterisco { transition: all 0.5s ease; }
#css3-transition a:hover .asterisco { transform: rotate(180deg); }
#css3-transition .texto { transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550); }
#css3-transition a:hover .texto { transform: scale(1.2); }



background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

dabblet.html

<div id="principal">
		<div id="topo">
			</div><!--Div Topo-->
			
		<div id="conteudo">
			<div id="links-nav-top">
					<li><a href="#">+você</a></li>
					<li><a href="#">pesquisar</a></li>
					<li><a href="#">imagens</a></li>
					<li><a href="#">mapas</a></li>
					<li><a href="#">play</a></li>
					<li><a href="#">youtube</a></li>
				</div><!--Div Links-nav-top-->			
								
			<div id="nav-top">
				<div class="logo">
				<img src="" title="" alt=""  />
				</div>
				<div class="pesquisa">
				<input type="text" name="pesquisar"  />
				<input type="submit" name="busca" class="btn" value="Buscar" />
				</div>
				
				<div class="painel-user">
					</div><!--Div painel user-->
				</div><!--Div Nav-top-->
				
				<div id="menu-nav-top">
					<div class="main-menu">
						</div><!--Div main-menu-->
							<div class="sub-menu">
								<li><a href="http://codepen.io" class="ativo">todos</a></li>
								<li><a href="http://createcss3.com">amigos</a></li>
								<li><a href="http://tridiv.com/">família</a></li>
								<li><a href="#">conhecidos</a></li>
								<li><a href="#">seguindos</a></li>
								<li><a href="#">mais</a></li>
							</div><!--Di sub-menu-->
						<div class="api-menu">
							</div><!--Div api-menu-->
						</div><!--Div Menu-nav-top-->
				
			</div><!--Div Conteudo-->
			
		<div id="rodape">
			</div><!--Div Rodape-->


	</div><!--Div Principal-->

dabblet.js

// alert('Hello world!');

settings.json

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