Navigation #3 for tumblr

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lato:300,400:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

<!---- Navigation #3 by Sofi (castiiel.tumblr.com). DON'T REMOVE THE CREDIT OR CLAIM THE THEME AS YOURS. DON'T USE IT AS A BASE --->

<style type="text/css">

::-webkit-scrollbar {width: 2px; height: 2px; background: transparent; }
::-webkit-scrollbar-thumb { background-color: #dfdfdf; -webkit-border-radius: 0ex; }

.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {

display: none;

}

body{
font-family:Arial;
background: #f3f3f3;
margin:-10px;
overflow-x:hidden;
}

a{
text-decoration:none;
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}

a:hover{
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}

#content {
margin:auto;
margin-top:50px;
width:770px;
text-align:center;
}

#pannel {
width:215px;
height:279px;
background:white;
border:1px solid #dfdfdf;
position: relative;
margin:18px;
display:inline-block;
overflow:hidden;
}

.title {
padding:17px 0px 17px;
background:rgba(0,0,0, 0.8);
border:8px solid #fff;
color:#fff;
font-size:12px;
font-weight:bolder;
font-family: trebuchet ms, consolas, 'lato', sans-serif;
text-transform:uppercase;
letter-spacing:2px;
}

.links {
    height:215px;
    width:215px;
    overflow-y:auto;
    overflow-x:hidden;
}

.links a {
padding:15px 0px;
border-top:1px solid #dfdfdf;
font-size:11px;
font-family: 'lato', sans-serif;
letter-spacing:1px;
text-transform:uppercase;
color:#000;
display:block;
}

.links a:hover {
    font-style:italic;
}

#topbar {
width: 100%;
margin:auto;
background:#fff;
border-bottom:1px solid #dfdfdf;
font-size:14px;
font-family: trebuchet ms, consolas, 'lato', sans-serif;
text-transform:uppercase;
padding: 25px 0px 15px;
letter-spacing:1.4px;
color:#000;
text-align:right;
}

#topbar a {
color: #000;
font-size:10px;
margin-right:15px;
}

#uptownfunk {
    margin:auto;
margin-top:50px;
width:770px;
text-align:center;
font-family: trebuchet ms, 'lato', sans-serif;
margin-bottom:50px;
font-size: 10px;
letter-spacing:2px;
text-transform:uppercase;
}

#uptownfunk a {
    color:#000;
}

</style>
</head>
<body>

<div id="topbar">
<a href="http://tumblr.com">dash</a>
<a href="/">index</a>
<a href="/ask">mail</a>
<a href="/">about</a>
<b><span style="margin-right:25px;">Navigation</span></b>
</div>

<div id="content">

<div id="pannel">
<div class="title">title number 1</div>
<div class="links">
<a href="/">link 1</a>
<a href="/">link 2</a>
<a href="/">link 3</a>
<a href="/">link 4</a>
<a href="/">link 5</a>
<a href="/">link 6</a>
<a href="/">link 7</a>
</div>
</div>

<div id="pannel">
<div class="title">title number 2</div>
<div class="links">
<a href="/">link 1</a>
<a href="/">link 2</a>
<a href="/">link 3</a>
<a href="/">link 4</a>
<a href="/">link 5</a>
<a href="/">link 6</a>
<a href="/">link 7</a>
</div>
</div>

<div id="pannel">
<div class="title">title number 3</div>
<div class="links">
<a href="/">link 1</a>
<a href="/">link 2</a>
<a href="/">link 3</a>
<a href="/">link 4</a>
<a href="/">link 5</a>
<a href="/">link 6</a>
<a href="/">link 7</a>
</div>
</div>

<div id="pannel">
<div class="title">title number 4</div>
<div class="links">
<a href="/">link 1</a>
<a href="/">link 2</a>
<a href="/">link 3</a>
<a href="/">link 4</a>
<a href="/">link 5</a>
<a href="/">link 6</a>
<a href="/">link 7</a>
</div>
</div>

<div id="pannel">
<div class="title">title number 5</div>
<div class="links">
<a href="/">link 1</a>
<a href="/">link 2</a>
<a href="/">link 3</a>
<a href="/">link 4</a>
<a href="/">link 5</a>
<a href="/">link 6</a>
<a href="/">link 7</a>
</div>
</div>

<div id="pannel">
<div class="title">title number 6</div>
<div class="links">
<a href="/">link 1</a>
<a href="/">link 2</a>
<a href="/">link 3</a>
<a href="/">link 4</a>
<a href="/">link 5</a>
<a href="/">link 6</a>
<a href="/">link 7</a>
</div>
</div>

</div>

<div id="uptownfunk"><a href="http://castiiel.tumblr.com">theme by castiiel</a></div>

</body>
</html>