Theme Navigation #02

<html>
<head>

<!----------------------


       made by Gabriele
     in clamam.tumblr.com


------------------------>

<title>{title}</title><link rel="shortcut icon" href="{favicon}">
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kecu8nj/WB3oec5qi/clamam.css">
<script type="text/javascript" src=""></script>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Days+One|Fjalla+One|Julius+Sans+One|Open+Sans|PT+Sans|Roboto" rel="stylesheet">
<style type="text/css">

body{
background:#fafafa;
font-family:'Open Sans', sans-serif;
letter-spacing:1px;
overflow:hidden;
padding:0;
margin:0;
cursor:default;
height:100%;}

img{opacity:0.8; transition:linear opacity 1s;}
img:hover{opacity:1; transition:linear opacity 1s;}

a{
-webkit-transition:all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-moz-transition:all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-ms-transition:all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-o-transition:all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition:all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
text-decoration:none;
cursor:help;}

.header{
position:relative;
margin-bottom:130px;
text-align:center;
z-index:1;
color:#333;
width:100%;
top:70px;}

.header h1{
letter-spacing:0px;
font-family:helvetica;
font-weight:lighter;
text-transform:uppercase;
font-size:50px;
margin:0;}
.header gabi{font-weight:600;}

.nav{
margin-top:10px;
text-transform:uppercase;
font-weight:600;
font-size:12px;}
.nav a{color:#333; margin:7px;}
.nav a:hover{color:grey; border-bottom:3px solid #333;}

.boxes{
-webkit-transform-style:preserve-3d;
-moz-transform-stle:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
text-transform:uppercase;
position:absolute;
margin-left:-140px;}
.boxes a{display:block; color:#fff;}
.boxes a:hover{text-indent:20px;}

.boxes dt, .boxes dd{
text-indent:10px;
line-height:55px;
margin:0;
height:55px;
width:270px;
color:#fff;}

.boxes dt{
-webkit-transform:translateZ(0.3px);
-moz-transform:translateZ(0.3px);
-ms-transform:translateZ(0.3px);
-o-transform:translateZ(0.3px);
transform:translateZ(0.3px);
font-weight:600;
font-family:helvetica;
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
font-size:15px;}

.boxes dd{
border-top:1px dashed rgba(255,255,255,0.3);
line-height:35px;
font-size:11px;
height:35px;
margin:0;}

.um dt, .um dd, .um a{background:#333;}
.dois dt, .dois dd, .dois a{background:#111;}
.tres dt, .tres dd, .tres a{background:#222;}
.um a:hover{background:#444;}
.dois a:hover{background:#222;}
.tres a:hover{background:#333;}

#tumblr_controls,
.tmblr-iframe.iframe-controls--desktop{display:none;}

</style>
</head>
<body>

<header class="header">
<h1>Navi<gabi>gation</gabi></h1>
<div class="nav">
<a href="/">home</a>
<a href="/ask">message</a>
<a href="/archive">archive</a>
<a href="http://clamam.tumblr.com">credit</a>
</div>
</header>

<section>
<dl class="boxes dois">
<dt>Tag title</dt>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
</dl>

<dl class="boxes tres">
<dt>Tag title</dt>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
</dl>

<dl class="boxes um">
<dt>Tag title</dt>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
<dd><a href="/">name</a></dd>
</dl>
</section>

</body>
</html>