Tags: Fiction

<!--

    TAG PAGE: FICTION
    by acuite

- don't steal this pls
- enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

- @acuite for more themes

-->

<!DOCTYPE html>
<html>
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/dxh5xq2/v6Gn8ju1e/tabs.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,700italic' rel='stylesheet' type='text/css'>
<style type="text/css">

::-webkit-scrollbar {height:4px;width:4px;background:#fff;}
::-webkit-scrollbar-thumb {background:#eee;border-radius:5px;}

/* General */

body {
    margin:0px;
    color:#555;
    font-family: 'Open Sans',Helvetica,Arial, sans-serif;
    font-size:9px;
    background:#f8f8f8;
}

a:hover {color:#bbb;}
a {
    color:#999;
    text-decoration:none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.c,.r{position:fixed;text-transform:uppercase;letter-spacing:1px;font-size:8px;}
.r {top:30px;left:30px;}
.r i {margin-right:3px;font-size:10px;}
.c {bottom:30px;right:30px;}

/* Containers */

#center {width:300px;margin:120px auto 0px;}
ul#tab {list-style-type:none;margin:0px;padding:0px;}
ul#tab li.active {display:block;}
ul#tab li {
    display:none;
    padding:36px;
    margin:0px;
    overflow:hidden;
    margin-top:35px;
    background:#fff;
    border:1px solid #eee;
}

/* Header */

ul#tabs {
    list-style-type:none;
    margin:0px
    height:0px;
    padding:0px;
    background:#fff;
    overflow:hidden;
    text-align:left;
    border:1px solid #eee;
    font-size:0px;
}

ul#tabs li.active {font-weight:600;}
ul#tabs li:hover, ul#tabs li.active {color:#222;}
ul#tabs li {
    display:inline-block;
    font-size:9px;
    height:10px;
    padding:8px 6px;
    text-align:center;
    line-height:11px;
    margin:0px 0px -1px -1px;
    border-left:1px solid #eee;
    border-bottom:1px solid #eee;
    text-transform:capitalize;
    color:#aaa;
    cursor:pointer;
}

/* Titles */

h2{
    margin:0px 0px 10px;
    font-size:10px;
    font-weight:400;
    color:#222;
    letter-spacing:1px;
    text-transform:uppercase;
}

.tags b {
    font-size:9px;
    padding:8px 6px;
    display:block;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    border-bottom:1px solid #eee;
}

/* Tags */

.tags {max-height:260px;overflow:auto;font-size:0px;}
.tags a:hover {border-bottom:1px dotted;}
.tags a {
    display:inline-block;
    padding:6px;
    font-size:9px;
    width:calc(50% - 12px);
    text-transform:capitalize;
    border-bottom:1px solid #eee;
}

/*
    Header Links

    to change the size / amount of links, change the percentage below
    5 links: 20%
    4 links: 25% (default)
    3 links: 33.33%
    2 links: 50%
    1 link: 100%

    pls do not alter the 12px part
*/

ul#tabs li {width:calc(25% - 12px);}

</style>
</head>
<body>
<!-- Do not edit -->
<a class ="r" href="/"><i class="fa fa-angle-left"></i> return to blog</a>
<a class="c" href="http://acuite.tumblr.com">acuite</a>
<div id="center">
<!-- Do not edit -->


<!-- Start Header -->
<ul id="tabs">
    <li class="active">category 1</li>
    <li>category 2</li>
    <li>category 3</li>
    <li>category 4</li>
</ul>
<!-- End Header -->


<ul id="tab"><!-- Do not edit this -->


<!-- Box 1 Start (the first box has an "active" class --><li class="active">

<h2>category 1</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>

</li><!-- Box 1 End -->


<!-- Box 2 Start --><li>

<h2>category 2</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>

</li><!-- Box 2 End -->


<!-- Box 3 Start --><li>

<h2>category 3</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>

</li><!-- Box 3 End -->


<!-- Box 4 Start (keep copying & pasting these boxes as necessary) --><li>

<h2>category 4</h2>
<div class="tags">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>

</li><!-- Box 4 End -->


<!-- Do not edit below this line -->
</ul>
</div>
</body>
</html>