Tag Page 2

<!DOCTYPE html>
<html>
<head>

<!--

Tag Page 02
by yukoki/houtarubi

1. Light/Heavy CSS editting is allowed.
2. Do not use as base code.
3. Do not remove credit.
4. Do not claim theme as your own.
5. Do not redistribute.

-->

<title>tags</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>

<style type="text/css">

iframe#tumblr_controls { right:3px; position:fixed; opacity: 0.4;}
iframe#tumblr_controls:hover { opacity: 1;
-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;}

body {
    background-color: #ffffff;
    background-image: url(http://i1246.photobucket.com/albums/gg607/mogimochi/backgrounds/bg-woodverticallight_zpsb9111c79.png);
    /**background image**/
    background-attachment: fixed;
    margin: 0;
    word-wrap: break-word;
    text-decoration: none;
}
a {
    text-decoration:none;
}

#main {
    width: 480px;
    margin-top: 30px;
    padding: 10px;
}
.title {
    font-family: courier new;
    font-size: 38px;
    text-transform: uppercase;
    color: #97a7b7; /** "- TAGS -" colour**/
}
.nav {
    font-family: consolas;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: -5px 10px 10px 10px;
    color: #888; /** nav dots (dividers) colour**/
}
.nav a {
    color: #adadad; /** nav text colour**/
-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;
}
.nav a:hover {
    text-shadow: -2px 0 0 #8dcad7; /** nav text shadow colour**/
-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;
}
.pic {
    width: 410px;
    height: 120px;
    overflow: hidden;
    margin-left: -8px;
    margin-bottom: 5px;
}

#content {
    width: 500px;
    height: auto;
}
.maintag {
    width: 205px;
    padding: 10px;
    float: left;
    margin: 5px;
    background-color: #ededed; /** fandom background colour**/
}
.tagtitle {
    color: #707070; /** fandom title colour**/
    text-align: center;
    font-family: lekton;
    text-transform: uppercase;
    border-bottom: 1px dashed #c1c1c1; /** fandom title underline colour**/
    padding: 5px 5px;
    font-size: 16px;
    line-height: 17px;
    margin-bottom: 10px;
}
.tag {
    color: #999; /** tag colour**/
    border-left: 10px solid #b1c1d2; /** tag border colour**/
    margin: 3px 0;
    text-align: left;
    line-height: 13px;
    font-family: consolas;
    font-size: 12px;
    line-height: 13px;
    padding: 0 10px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.tag:hover {
    border-left: 20px solid #809cbb; /** hover tag colour**/
    color: #5e5e5e; /** hover tag border colour**/
}

</style>

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

<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.maintag',
});
});
$container.infinitescroll({
itemSelector : ".maintag",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>

<body>

<center>
<div id="main">
<div class="title">- tags -</div>
<div class="nav">
<a href="/">index</a> ●
<a href="/ask">message</a> ●
<a href="/archive">memories</a> ●
<a href="/">link 1</a> ● <!--custom link 1-->
<a href="/">link 2</a> ● <!--custom link 2-->
<a href="/">link 3</a> ● <!--custom link 3-->
<a href="http://yukoki.tumblr.com">credit</a>
</div>
<img class="pic" src="http://i1246.photobucket.com/albums/gg607/mogimochi/asdfgh_zps539dc3cc.png"><!--header image-->

<div id="content">

<div class="maintag">
<div class="tagtitle">fandom #1</div>
<a href="/tagged/"><div class="tag">tag 1</div></a>
<a href="/tagged/"><div class="tag">tag 2</div></a>
<a href="/tagged/"><div class="tag">tag 3</div></a>
<a href="/tagged/"><div class="tag">tag 4</div></a>
<a href="/tagged/"><div class="tag">tag 5</div></a>
</div>

<div class="maintag">
<div class="tagtitle">fandom #2</div>
<a href="/tagged/"><div class="tag">tag 1</div></a>
<a href="/tagged/"><div class="tag">tag 2</div></a>
</div>

<div class="maintag">
<div class="tagtitle">fandom #3</div>
<a href="/tagged/"><div class="tag">tag 1</div></a>
<a href="/tagged/"><div class="tag">tag 2</div></a>
<a href="/tagged/"><div class="tag">tag 3</div></a>
<a href="/tagged/"><div class="tag">tag 4</div></a>
<a href="/tagged/"><div class="tag">tag 5</div></a>
<a href="/tagged/"><div class="tag">tag 6</div></a>
<a href="/tagged/"><div class="tag">tag 7</div></a>
</div>

<div class="maintag">
<div class="tagtitle">fandom #4</div>
<a href="/tagged/"><div class="tag">tag 1</div></a>
<a href="/tagged/"><div class="tag">tag 2</div></a>
<a href="/tagged/"><div class="tag">tag 3</div></a>
</div>

<div class="maintag">
<div class="tagtitle">fandom #5</div>
<a href="/tagged/"><div class="tag">tag 1</div></a>
<a href="/tagged/"><div class="tag">tag 2</div></a>
<a href="/tagged/"><div class="tag">tag 3</div></a>
<a href="/tagged/"><div class="tag">tag 4</div></a>
<a href="/tagged/"><div class="tag">tag 5</div></a>
<a href="/tagged/"><div class="tag">tag 6</div></a>
<a href="/tagged/"><div class="tag">tag 7</div></a>
<a href="/tagged/"><div class="tag">tag 8</div></a>
<a href="/tagged/"><div class="tag">tag 9</div></a>
<a href="/tagged/"><div class="tag">tag 10</div></a>
</div>

<div class="maintag">
<div class="tagtitle">fandom #6</div>
<a href="/tagged/"><div class="tag">tag 1</div></a>
<a href="/tagged/"><div class="tag">tag 2</div></a>
<a href="/tagged/"><div class="tag">tag 3</div></a>
<a href="/tagged/"><div class="tag">tag 4</div></a>
<a href="/tagged/"><div class="tag">tag 5</div></a>
<a href="/tagged/"><div class="tag">tag 6</div></a>
</div>

</div><!--content-->

</div><!--main--></center>

</body>
</html>