Navigation Page Theme

<!--Navigation Page Theme by confers
http://fluorescent-themes.tumblr.com/
Please do not remove the credit---->

<html lang="en">

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/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>

<style type="text/css">
 @font-face {font-family:moon flower; src: url(http://static.tumblr.com/zwjywvf/pjwn7l7z6/moon_flower_1_.ttf)}
#s-m-t-tooltip{
max-width:300px;
margin:15px;
padding:2px 8px;
border:1px solid #ccc;
border-radius:4px;
background:#FFF;
z-index:999999;
letter-spacing:1px;
font-size:9px;
text-transform:uppercase;
box-shadow:1px 1px 3px rgba(0,0,0,.1);}

body{
background-color:#fff;
color:#000;
font-family:consolas;
font-size:10px;
}

::selection {
background:#ccc;
color:#fff;
}
::-moz-selection {
background:#ccc;
color:#fff;
}

::-webkit-scrollbar{
width:8px;
height:8px;
background:#fff;}

::-webkit-scrollbar-thumb{
background:#000;
height:5px;
border:#fff solid 3px;}

a:link, a:active, a:visited{
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
color:#000;
text-decoration:none;
}

a:hover{
background:#ccc;
color:#fff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-o-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}


#sidebar{
    margin-top:200px;
text-align:center;
background:transparent;
border:1px solid #ccc;
width:700px;


height:510px;
}


<!--if you want to erase/add links change the height above accordingly:

if you erase 4 the height will be 430px
if you erase 8 the height will be 350px
if you erase 12 the height will be 280px
if you add 4 the height will be 580px
-->


#desc{
}

.title{
width:700px;
text-align:center;
position:absolute;
margin-top:-50px;
font-family:moon flower;
font-size:46px;}


.links{
 text-transform:uppercase;
font-family:consolas;
font-size:9px;
margin-top:2px;
letter-spacing:1px;}

.links a{
 border:1px solid #ccc;
 padding:2px;
}

#blogs{
margin-top:0px;
font-size:9px;
position:absolute;
width:680px;
padding:10px;
 text-transform:uppercase;
line-height:65px;
}

#blogs a{
display:inline-block;
width:150px;
 text-transform:uppercase;
line-height:65px;
margin:6px 1px 1px 1px;
border:1px solid #ccc;
padding:1px;
}

#blogs a:hover{
background:#ccc;
color:#fff;
}


#credit {
position:fixed;
font-family:consolas;
font-size:10px;
bottom:10px;
z-index:999999999999;
right:10px;
text-transform:uppercase;
}


</style>

</head>
<body>
 <center>

<div id="sidebar">

<!--This is the title-->
<div class="title"> navigation/favorites page </div>

<div id="desc">  </div>
<div class="links">
<a href="/">go back</a>
<a href="/ask">message</a>
<a href="http://fluorescent-themes.tumblr.com/">theme</a>
</div>
<!---MAKE THE LINK TITLES SHORT, MAIXMUM OF ABOUT 30 LETTERS-->
<div id="blogs">
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
<a href="LINK">LINK TITLE</a>
</div>


</div>


</div>
<div id="credit"><a href="http://fluorescent-themes.tumblr.com">credit</a></div>
</div>
</body>
</html>