piece of mind navi only

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<!----------------✧ ☾ ☆ ☄ ⁛ THEMES BY ASTRAEAWRITES ⁛ ☄ ☾ ✧
                          DO NOT STEAL OR CLAIM AS YOURS!
              report problems or questions @ astraeawrites.tumblr.com----------->

<!----------------------✧ ☾ ☆ ☄ ⁛ CREDITS !! ⁛ ☄ ☾ ✧
          THE TABS SCRIPT IS FROM @nbthm.tk & I CALIM NO CREDIT FOR IT---------->

<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

 <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>

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

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

<link href="https://fonts.googleapis.com/css?family=Inconsolata|Lato|Montserrat|Muli|Open+Sans|Quicksand|Raleway|Roboto|Source+Sans+Pro" rel="stylesheet">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">



<style type="text/css">




/*---------------BODY & BASICS---------------*/

#s-m-t-tooltip {
    max-width:400px;
    background-color:#ececec;
    font-family:"Roboto", sans-serif;
    font-size:8.5px;
    color:#000;
    letter-spacing:2px;
    text-transform:lowercase;
    padding:6.5px;
    line-height:100%;
    margin:20px 0px 0px 20px;
    z-index:99999999999999999999999999999999;
    border-radius:1px;
    box-shadow:1px 1px 3px rgba(0,0,0,.0);
}

::-webkit-scrollbar-thumb:vertical {
    display:none;
}

::-webkit-scrollbar-thumb:horizontal {
    display:none;
}

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

::selection {
    background-color:#bbb;
    color: #fff;
    }


body{
    background-color:#f6f6f6;
    font-size:10px;
    font-family:"calibri";
    color:#333;
}

a{
    text-decoration:none;
    color:#333;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

a:hover{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-shadow:0px 0px 0.5px #000;
    color:#464646;
}





/*---------------BOX & STRUCTURE---------------*/

#box{
    width:620px;
    height:450px;
    background-color:#fff;
    left:50%;
    margin-left:-325px;
    top:50%;
    margin-top:-225px;
    position:fixed;
    border-radius:2.5px;
    border:1px solid #eee;
    overflow:auto;
}

#box2{
    width:459px!important;
    height:450px;
    left:50%;
    margin-left:-163.5px;
    top:50%;
    margin-top:-224.5px;
    position:fixed;
    z-index:999999999;
    overflow:auto;
}




/*---------------SIDEBAR---------------*/

.sidebar{
    margin-top:-1px;
    margin-left:-1px;
    width:160px;
    height:450px;
    border-top-left-radius:2.5px;
    border-bottom-left-radius:2.5px;
    background-color:#fff;
    border:1px solid #eee;
    overflow-y:hidden;
    position:fixed;
}

.sidebar img{
    width:110px;
    height:110px;
    max-width:110px;
    border-radius:3px;
    padding:10px;
    background-color:#eee;
    margin:20px 10px 0px 15px;
    overflow:hidden;
}

.description{
    line-height:120%;
    margin:17px;
    text-align:center;
    max-height:85px;
    font-size:9.5px;
    font-family:"roboto";
    overflow:scroll;
}





/*---------------LINKS---------------*/

.sb-links{
    max-width:130px;
    margin-top:-10px;
    margin-left:-25px;
}

.sb-links i{
    margin-right:3px;
}

.sb-links ul{
    list-style:none;
    margin-left:0px;
    padding-left:0px;
}

.sb-links li{
    list-style:none;
    line-height:40px;
    margin-left:0px;
    padding-left:0px;
    border-bottom:1px solid #ddd;
}

.sb-links a{
    font-size:9px;
    text-decoration:none;
    text-transform:uppercase;
    margin-left:5px;
    font-family:"roboto";
    color:#808080;
    letter-spacing:1px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.sb-links a:hover{
    padding-left:20px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color:#464646;
}

.tab {
    display:none;
}

.tab.active {
    display:block;
}




/*---------------TABS---------------*/

.tabcontent{
    max-width:460px!important;
    max-height:450px;
}

.tabs {
    width:460px;
    margin-left:10px;
    display:inline-block;
}




/*---------------TAB 1 // NAVIGATION TAB // ACTIVE---------------*/

.navigationtab{
    margin:0px;
    padding:20px;
}

.navigationtab h1{
    margin:0px;
    font-size:15px;
    font-family:"open sans";
    text-transform:uppercase;
    letter-spacing:1px;
    border-bottom:2px solid #eee;
    margin-bottom:3px;
    padding:0px;
    font-weight:700;
}

.navigationtab table{
    margin:5px 5px 10px 5px;
}

.navigationtab td{
    font-size:10.8px;
    padding:5px 15px 5px 15px;
    line-height:110%;
}

.navigationtab a{
    color:#808080;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-transform:lowercase;
    text-decoration:none;
}

.navigationtab a:hover{
    color:black;
    text-shadow:0px 0px 0.5px #000;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}




/*---------------CREDIT, DO NOT MOVE OR MAKE LESS VISIBLE!!---------------*/
.credit a{
     font-size:11px;
     position:fixed;
     font-family:"lato";
     font-weight:900;
     color:black;
     text-align:right;
     right:25px;
     bottom:25px;
}

.credit a:hover{
     color:white;
}


{CustomCSS}
</style>
</head>
<body>



<!---------------STRUCTURE--------------->

<div id="box">

   <div class="sidebar">

    <img src="http://68.media.tumblr.com/b22674e7c522aaffcc4cd0eca2f16768/tumblr_inline_otoq9yBj4D1slfjc1_250.png">

    <div class="description">i didn't know what to put here so the navi tab now has a description if you want it.</div>

            <ul class="sb-links">
               <li><a href="url here"><i class="fa fa-home"></i> return</a></li>
               <li><a href="url here"><i class="fa fa-envelope"></i> message</a></li>
               <li><a href="url here"><i class="fa fa-user"></i> link</a></li>
               <li><a href="url here"><i class="fa fa-briefcase"></i> link</a></li>
            </ul>
         </div>
    </div>

   </div>






<!---------------TABS--------------->

<div id="box2">




<!---------------NAVIGATION !!

                   IMPORTANT NOTE ****
    since i set up the links in a TABLE, you can't just add links to the row, otherwise it will throw the entire thing off.

    you need to create a new row to add links to be sure that EACH ROW ONLY HAS FIVE LINKS. if you know css and know how to edit it to all fit, feel free to do whatever you wish. if you do not know css well, however, i urge you to follow my instructions.

    in order to add a new row, copy and paste the following:

            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>

    make sure you are putting this in between the <tbody> and </tbody> tags.

    in order to add a completely new title and a new set of links, copy and paste the following within the <div class="navigationtab"> and the corresponding </div> tag:


     <br>
     <table>
      <h1>title4</h2>
        <tbody>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
        </tbody>
    </table>

Just make sure that each tag has a closing tag.

Also, if the links are moving into two lines, just shift around the number of links in one row or keep your link titles short. Alternatively, you can change the padding settings in the .navigationtab td part of the CSS
--------------->

<div class="navigationtab">
    <table>
      <h1>title1</h1>
        <tbody>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
        </tbody>
     </table>
     <br>
     <table>
      <h1>title2</h1>
        <tbody>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
        </tbody>
    </table>
     <br>
     <table>
      <h1>title3</h1>
        <tbody>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
        </tbody>
    </table>
     <br>
     <table>
      <h1>title4</h1>
        <tbody>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
            <tr>
                <td><a href="URL">wow 1</a></td>
                <td><a href="URL">wow 2</a></td>
                <td><a href="URL">wow 3</a></td>
                <td><a href="URL">wow 4</a></td>
                <td><a href="URL">wow 5</a></td>
            </tr>
        </tbody>
    </table>

</div>
</div>




<!---------------CREDIT // DO NOT REMOVE OR ALTER PLS !! --------------- -->

<div class="credit"><a href="http://astraeawrites.tumblr.com/">AW</a></div>





</body>
</html>