space between navigation page; by belleamerph

<!DOCTYPE html>
<html>
    <head>
        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}"}


<!--------   fonts     ------>

        <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Great+Vibes|Herr+Von+Muellerhoff|Lovers+Quarrel|Parisienne" rel="stylesheet">


        <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title],a[title],img[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>


<!--- for my reference

   font-family: 'Dancing Script', cursive;
   font-family: 'Great Vibes', cursive;
   font-family: 'Parisienne', cursive;
   font-family: 'Herr Von Muellerhoff', cursive;
   font-family: 'Lovers Quarrel', cursive;

--->


<style>

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 2px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
    background-color:#eee;
    font-size: 11px;
    color:#000;
    background-image:url('');
}

a {
    text-decoration:none;
    color:#008080;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

a:hover {
    color:#353535;
}

b, strong {
    color:#008080;
    text-transform:uppercase;
}

i, em {
    color:#008080;
}

h1 {
   font-family: 'Herr Von Muellerhoff';
   text-align:center;
   font-size:30px;
   margin-top:-5px;
}

h2 {
   font-family: 'Herr Von Muellerhoff';
   text-align:center;
   font-size:30px;
    color:#d4859a;
}

blockquote {
    padding:2px 7px;
    margin:3px 0 3px 8px;
    border-left:1px solid #008080;
}

img {
    border-radius:5px;
}

blockquote img {
    max-width:100%;
    height:auto;
}

#s-m-t-tooltip {
    color:#fff;
    margin:15px 10px 10px 10px;
    border-radius:5px;
    font-size:20px;
    text-transform:uppercase;
    font-family: 'Dancing Script';
    text-align:center;
    text-shadow:
   -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
    padding:4px 8px 2px 8px;
    background:#008080;
}

#title {
    position:fixed;
    width:350px;
    left:200px;
    top:250px;
    color:#fff;
    text-align:center;
}

#title h1 {
    text-align:center;
    text-shadow: 5px 7px 10px #008080;
    font-family: 'Herr Von Muellerhoff';
    font-size:65px;
}

#sidebar {
    position:fixed;
    left:200px;
    top:200px;
    height:300px;
    width:350px;
    background:url('https://66.media.tumblr.com/f5a4f9772b66112ec8e007db089b6e8a/tumblr_inline_plijgiJX0t1w4kmn8_1280.jpg');
    background-color:#353535;
    border-radius:30px;
    box-shadow: 4px 4px 5px #008080;
    opacity:0.9;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

#sidebar:hover {
    opacity:1;
}

#description {
    position:relative;
    left:15px;
    top:-215px;
    width:300px;
    height:100px;
    overflow-y:scroll;
    font-size:10px;
    color:#fff;
    background-color:#353535;
    text-align:center;
    padding:10px;
    border-radius:30px;
    box-shadow: 4px 4px 5px #008080;
}

#description::-webkit-scrollbar {
  display:none;
}

#sidebarimg {
    position:relative;
    left:10px;
    top:-150px;
    background:transparent;
}

#links {
    position:fixed;
    left:185px;
    top:427px;
    font-size:12px;
    padding:10px;
}

#links a {
    display:inline-block;
    height:35px;
    width:35px;
    font-size:35px;
    border-radius:100%;
    text-align:center;
    color:#008080;
    padding:10px;
    margin-left:25px;
    background-color:#fff;
    box-shadow: 4px 4px 5px #008080;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

#links a:hover {
    color:#353535;
    background-color:transparent;
    letter-spacing:1px;
    box-shadow: 4px 4px 5px transparent;
}

.container {
    position:absolute;
    width:760px;
    height:470px;
    margin-left:580px;
    margin-top:50px;
    padding-bottom:50px;
    overflow-y:scroll;
}

.list {
    margin-top:10px;
    width:220px;
    height:auto;
    padding:0px;
    background-color:#fff;
    padding:6px;
    border-radius:10px;
    box-shadow: 4px 4px 5px #008080;
}

.list li {
    list-style-type: none;
    text-align:center;
    margin-top:15px;
}

.listtitle {
    margin-top:-10px;
}

.cj {
    position:fixed;bottom:5px;left:5px;color:#008080;
}


</style>
</head>

<body>
<div id="sidebar">

<div id="sidebarimg"><img src="https://66.media.tumblr.com/1ca6d0bd9e1ff152a8496fb071143340/tumblr_inline_plijgh0uia1w4kmn8_1280.png"></div>

<div id="description">description</div>

<div id="links">
<a href="/" title="return"><span class="th th-home-o"></span></a>
<a href="/ask" title="message"><span class="th th-bubble-heart-o"></span></a>
<a href="/" title="link 1"><span class="th th-app-o"></span></a>
<a href="/" title="link 2"><span class="th th-plus-5-o"></span></a>
</div>

<div id="title"><h1>space between</h1></div>

</div>

<div class="cj"><a href="http://etherevlrph.tumblr.com/"><span class="th th-cherry-o"></span></a></div>

<!---    this is your muse table, you can add as many as you want it scrolls. to start a new row you need a <tr> tag between the muse blocks.

where it states onclick="openAlytut(event, 'TabzBioOne'), you need to make sure that the number in both the bio and verse tabs match for your muse pop ups to properly work !
---->

<div class="container">
<table id="all" border="0" cellpadding="0" cellspacing="15">

<td><div class="list">
    <div class="listtitle"><h2>title</h2></div>
    <li><a href="/"> l i n k &nbsp;&nbsp; o n e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t w o</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t h r e e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f o u r</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f i v e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s i x</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s e v e n</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; e i g h t</a>
</div></td>
<td><div class="list">
    <div class="listtitle"><h2>title</h2></div>
    <li><a href="/"> l i n k &nbsp;&nbsp; o n e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t w o</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t h r e e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f o u r</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f i v e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s i x</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s e v e n</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; e i g h t</a>
</div></td>

<td><div class="list">
    <div class="listtitle"><h2>title</h2></div>
    <li><a href="/"> l i n k &nbsp;&nbsp; o n e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t w o</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t h r e e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f o u r</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f i v e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s i x</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s e v e n</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; e i g h t</a>
</div></td>

<tr>

<td><div class="list">
    <div class="listtitle"><h2>title</h2></div>
    <li><a href="/"> l i n k &nbsp;&nbsp; o n e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t w o</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t h r e e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f o u r</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f i v e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s i x</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s e v e n</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; e i g h t</a>
</div></td>

<td><div class="list">
    <div class="listtitle"><h2>title</h2></div>
    <li><a href="/"> l i n k &nbsp;&nbsp; o n e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t w o</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t h r e e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f o u r</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f i v e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s i x</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s e v e n</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; e i g h t</a>
</div></td>

<td><div class="list">
    <div class="listtitle"><h2>title</h2></div>
    <li><a href="/"> l i n k &nbsp;&nbsp; o n e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t w o</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; t h r e e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f o u r</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; f i v e</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s i x</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; s e v e n</a>
    <li><a href="/"> l i n k &nbsp;&nbsp; e i g h t</a>
</div></td>


</table>
</div>


<!--

                                  < *TABS END >

-->

</div>
</body>


</html>