navigation page 01

<link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:200,
tip_fade_speed:300
});
});
})(jQuery);
</script>

<!--

THEME BY SPIDERMN

FEEL FREE TO EDIT AS YOU PLEASE, BUT DO NOT STEAL

DO NOT TOUCH THE CREDIT

changing the accent color instructions:
1. press 'ctrl' and the 'f' key twice on your keyboard ('⌘' + 'f' for mac users)
2. in the box that comes up enter "#6d7690" in the find tab and in the replace tab enter the color code you want to change it to (you can find the color code of your icon using this website: http://html-color-codes.info/colors-from-image/)
3. click 'all' and save your html

-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>
<head>

    <title>{title} - navigation</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="altertnate" type="application/rss+xml" href="{RSS}">
    <meta name="description" content="" />
    <meta http-equiv="x-dns-prefetch-control" content="off"/>


<style type="text/css">

::-webkit-scrollbar {height:0px; width:3px; background:#ffffff;}
::-webkit-scrollbar-thumb:vertical {height:auto; width:3px; background:#313131;}
::selection {background:#313131; color:#ffffff; padding-left:3px;}
::-webkit-selection {background:#313131; color:#ffffff;}
::-moz-selection {background:#313131; color:#ffffff;}
::-o-selection {background:#313131; color:#ffffff;}
.bt::-webkit-scrollbar {background:#313131;}

body {
margin:0px;
background:#fff;
font-size:10px;
font-family:verdana;
color:#000;
line-height: 100%;
}

a {
color:#000;
font-style:normal;
text-decoration:none;
}

li {margin-left:-20px !important;}

.h {
height:120px;
margin:0px auto;
background:#6d7690;
text-align:center;
text-transform:lowercase;
width:100%;
display:absolute;
padding:4px 0px;
}

.ht {
margin-top:-90px;
}

.hh {
margin-left:270px;
font-size:35px;
color:#ffffff;
text-align:left;
text-transform:lowercase;
letter-spacing:0px;
display:inline;
}

.l {
margin-top:-10px;
margin-right:22px;
text-align:right;
}

.l a {
margin-left:5px;
font-size:13px;
color:#ffffff;
text-transform:lowercase;
letter-spacing:1px;
padding:4px;
display:inline;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}

.l a:hover {
background:#ffffff;
color:#6d7690;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}

.icon img {
width:100px;
height:100px;
}

.icon {
margin-left:120px;
margin-top:-65px;
background:#ffffff;
padding:8px;
border:2px solid #6d7690;
}

.container {
margin-top:15px;
margin-left:32%;
height:auto;
width:350px;
padding-top:56px;
}

.boxc {
height:485px;
width:485px;
padding:20px;
border:3px solid #fbfbfb;
}

.box {
height:500px;
width:488px;
overflow-y:auto;
}

.bh {
margin-top:32px;
margin-left:110px;
width:260px;
background:#313131;
font-family:sans-serif;
font-size:13px;
color:#ffffff;
text-transform:uppercase;
line-height:18px;
letter-spacing:2px;
text-align:center;
padding:8px;
}

.bt {
margin-top:9px;
margin-left:23px;
margin-bottom:32px;
width:425px;
font-family:sans-serif;
font-size:10px;
color:#222222;
letter-spacing:1px;
border-left:3px solid #6d7690;
padding:2px 9px;
text-align:left;
}

.bt a {
margin-right:9px;
color:#222222;
font-weight:bold;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}

.bt a:hover {
color:#6d7690;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}

#s-m-t-tooltip {
max-width:300px;
margin:15px;
padding:4px;
border-radius:0px;
background:#6d7690;
color:#ffffff;
z-index:999999;
font-size:8px;
font-style:none;
letter-spacing:2px;
font-family:arial;
text-transform:uppercase;
box-shadow:1px 1px 3px rgba(0,0,0,.0);
}

.credit a {
font:verdana;
font-size:11px;
position:fixed;
color:#000000;
font-weight:bold;
bottom:14px;
right:14px;
}

</style>
</head>

<div class="h"></div>
<div id="icon"><img class="icon" src="http://i.imgur.com/EMfapQm.png"></div>
<div class="ht">
<div class="hh">navigation.</div>
<div class="l">
<a href="/">index.</a> <a href="/ask">inbox.</a> <a href="/">link 1.</a> <a href="/">link 2.</a></div>
</div>

<div class="container">
<div class="boxc">
<div class="box">

<div class="bh">heading</div>
<div class="bt">
<a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a> <a href="">link</a>
</div>

<div class="bh">heading</div>
<div class="bt">
<a href="">link</a>
</div>

<div class="bh">heading</div>
<div class="bt">
<a href="">link</a>
</div>

</div>
</div>

</div>

<div class="credit"><a href="http://spidermn.tumblr.com">cr.</a></div>
</br></br></br>
</body>