Navigation #4 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}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

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

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

<script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Montserrat+Alternates:400,700: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>

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

<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#supernatural").click(function(){
$(".supernatural").slideToggle("slow");
});
});
</script>

<style type="text/css">

body {
    background: #fff;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar-thumb{
    background-color: #000;
    height:auto;}

::-webkit-scrollbar {
    height:auto;width:3px;
    background-color:#fff;}

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

#title {
    font-family: 'Montserrat Alternates', sans-serif;
    width:661px;
    left:50%;
    margin-left:-331px;
    position:fixed;
    top:50%;
    margin-top:-224px;
    font-size:24px;
    text-align:left;
    font-weight: 700;
}

#icons {
    float:right;
    font-size:12px;
    bottom:5px;
    right:45px;
    position:absolute;
}

#icons a {
    color:#000;
    margin-left:10px;
}

#cont {
    width:660px;
    height:400px;
    position:fixed;
    top:50%;
    margin-top:-200px;
    left:50%;
    margin-left:-330px;
}

#column {
    width:148px;
    height:388px;
    border:1px solid #000;
    position:absolute;
    overflow:auto;
    top:0px;
    right:0px;
    border-left:0px;
    padding-bottom:10px;
}

#left {
    width:509px;
    height:398px;
    border:1px solid #000;
    position:absolute;
    overflow:auto;
}

#tags {
    padding:5px;
    text-align:left;
}

#tags a {
    padding:7px 8px;
    margin:5px;
    background:#fff;
    border:#000;
    font-size:9px;
    font-family:trebuchet ms, 'lato', sans-serif;
    text-transform:uppercase;
    border:1px solid #000;
    letter-spacing:1px;
    width:96.4px;
    text-align:center;
    line-height:130%;
}

#tags a:hover {
    border:dotted 1px;
}

.title {
    width:108px;
    padding:10px;
    background:#000;
    margin:10px 10px 0px;
    font-family:trebuchet ms, 'lato', sans-serif;
    font-size:9px;
    font-weight:bolder;
    letter-spacing:2px;
    color:#fff;
    text-transform:uppercase;
    text-align:center;
    line-height:135%;
}

.list {
    font-size:9px;
    font-family:trebuchet ms, 'lato', sans-serif;
    margin:0px 10px;
    text-align:center;
    text-transform:uppercase;
    display:none;
}

.list a {
    color:#000;
    display:block;
    letter-spacing:2px;
    margin:10px 0px 0px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.list a:hover {
    letter-spacing:4px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.isotope-item {
 z-index: 2;
}

.isotope-hidden.isotope-item {
 pointer-events: none;
 z-index: 1;
}

.isotope,
.isotope .isotope-item {
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -ms-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

.isotope {
 -webkit-transition-property: height, width;
 -moz-transition-property: height, width;
 -ms-transition-property: height, width;
 -o-transition-property: height, width;
 transition-property: height, width;
}

.isotope .isotope-item {
 -webkit-transition-property: -webkit-transform, opacity;
 -moz-transition-property: -moz-transform, opacity;
 -ms-transition-property: -ms-transform, opacity;
 -o-transition-property: -o-transform, opacity;
 transition-property: transform, opacity;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
 -webkit-transition-duration: 0s;
 -moz-transition-duration: 0s;
 -ms-transition-duration: 0s;
 -o-transition-duration: 0s;
 transition-duration: 0s;
}

.isotope.infinite-scrolling {
 -webkit-transition: none;
 -moz-transition: none;
 -ms-transition: none;
 -o-transition: none;
 transition: none;
}

#credit {
    font-size:12px;
    font-family: Helvetica, sans-serif;
    letter-spacing:1.5px;
    line-height: 100%;
    z-index:99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
    position:fixed;
    right:-100px;
    bottom:10px;
    transition: all 0.9s linear;
    -webkit-transition: opacity 0.9s linear;
    -webkit-transition: all 0.9s linear;
    -moz-transition: all 0.9s linear;
    }

#credit a {
    color:#000;
    margin-left:15px;
    transition: all 0.9s linear;
    -webkit-transition: opacity 0.9s linear;
    -webkit-transition: all 0.9s linear;
    -moz-transition: all 0.9s linear;
}

#credit:hover {
    right:10px;
    transition: all 0.9s linear;
    -webkit-transition: opacity 0.9s linear;
    -webkit-transition: all 0.9s linear;
    -moz-transition: all 0.9s linear;
}

</style>

<script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
 <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
 <script>
 $(function(){

 var $container = $('.cont');

 $container.isotope({
 itemSelector : '#tags a'
 });


 var $optionSets = $('#column .option-set'),
 $optionLinks = $optionSets.find('a');

 $optionLinks.click(function(){
 var $this = $(this);
 // don't proceed if already selected
 if ( $this.hasClass('selected') ) {
 return false;
 }
 var $optionSet = $this.parents('.option-set');
 $optionSet.find('.selected').removeClass('selected');
 $this.addClass('selected');

 // make option object dynamically, i.e. { filter: '.my-filter-class' }
 var options = {},
 key = $optionSet.attr('data-option-key'),
 value = $this.attr('data-option-value');
 // parse 'false' as false boolean
 value = value === 'false' ? false : value;
 options[ key ] = value;
 if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
 // changes in layout modes need extra logic
 changeLayoutMode( $this, options )
 } else {
 // otherwise, apply new options
 $container.isotope( options );
 }

 return false;
 });


 });
 </script>

</style></head>

<body>

<div id="title">
navigation
<span id="icons">
<a href="/" style="font-size:13px;"><i class="fa fa-home"></i></a>
<a href="/ask"><i class="fa fa-envelope-o"></i></a>
<a href="http://www.tumblr.com/follow/{Name}"><i class="fa fa-plus"></i></a>
</span>
</div>

<div id="cont">

<div id="left">
<div id="tags">
<div class="cont" style="text-align:left">
<a href="/tagged/jake able" class="spn spncast">jake able</a>
<a href="/tagged/charlie" class="spn hunters">charlie bradbury</a>
<a href="/tagged/anna" class="spn angels">anna</a>
<a href="/tagged/abaddon" class="spn demons">abaddon</a>
<a href="/tagged/ash" class="spn spnother">ash</a>
<a href="/tagged/destiel" class="spn spnotp">destiel</a>
<a href="/tagged/demon!dean" class="spn spnextra">demon!dean</a>
<a href="/tagged/dean" class="spn hunters">dean</a>
<a href="/tagged/sam" class="spn hunters">sam</a>
<a href="/tagged/cas"  class="spn angels">cas</a>
<a href="/tagged/cain" class="spn demons">cain</a>
<a href="/tagged/king of sass" class="spn spnother">death</a>
<a href="/tagged/otp: metallicar" class="spn spnotp">dean/impala</a>
<a href="/tagged/twist and shout" class="spn spnextra">twist and shout</a>
<a href="/tagged/impala" class="spn spnextra">impala</a>
</div><!--.cont-->
</div><!--tags-->
</div><!--left-->

<div id="column">

<div class="title" id="supernatural">supernatural</div>
<div class="supernatural list">
<a href="/tagged/spn">main tag</a>
<div id="filters" class="option-set clearfix" data-option-key="filter">
<a href="#filter" data-option-value=".spn">all tags</a>
<a href="#filter" data-option-value=".spncast">the cast</a>
<a href="#filter" data-option-value=".hunters">hunters</a>
<a href="#filter" data-option-value=".angels">angels</a>
<a href="#filter" data-option-value=".demons">demons</a>
<a href="#filter" data-option-value=".spnother">humans/other</a>
<a href="#filter" data-option-value=".spnotp">otp/brotp</a>
<a href="#filter" data-option-value=".spnextra">extra/objects</a>
</div><!--filter-->
</div><!--list-->

<div class="title">marvel</div>

<div class="title">doctor who</div>

<div class="title">sherlock</div>

<div class="title">game of thrones</div>

<div class="title">merlin</div>

<div class="title">teen wolf</div>

<div class="title">hannibal</div>

<div class="title">arrow</div>

<div class="title">harry potter</div>

<div class="title">once upon a time</div>

<div class="title">shameless</div>

<div class="title">in the flesh</div>

<div class="title">tolkien</div>

<div class="title">the hunger games</div>

<div class="title">the maze runner</div>

<div class="title">star trek</div>

<div class="title">fall out boy</div>

<div class="title">american horror story</div>

<div class="title">welcome to night vale</div>

<div class="title">the mortal instrument</div>

<div class="title">revenge</div>

</div><!--column-->

</div><!--cont-->

<div id="credit" style="font-size:14px">©<a href="http://castiiel.tumblr.com" style="font-size:7px; text-transform: uppercase;">theme by castiiel</a></div>

</body></html>