EIGHT

<!DOCTYPE html>
<head>

<!-----
BY @KIRK, DON'T (RE)MOVE THE CREDIT
----->

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

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">

<meta name="image:Side" content="">

<meta name="image:Background" content="">

<meta name="color:Background" content="#fff">
<meta name="color:Title" content="#000">
<meta name="color:Text" content="#000">
<meta name="color:Accent" content="#ee3322" />
<meta name="color:Link" content="#ddd">
<meta name="color:Link Hover" content="#fff">
<meta name="color:Content Link" content="#fff">
<meta name="color:Content Link Background" content="#000">
<meta name="color:Content Link Hover" content="#000">
<meta name="color:Content Link Hover Background" content="#fff">
<meta name="color:Highlight" content="#ff0000">

<meta name="if:No Hover Desc" content="0">

<meta name="if:Content Borders" content="0">
<meta name="if:Title BG" content="0">
<meta name="if:Link BG" content="0">

<meta name="select:Text" content="10px">
<meta name="select:Text" content="11px">
<meta name="select:Text" content="12px">

<meta name="select:Font" content="'Open Sans'">
<meta name="select:Font" content="'Karla'">
<meta name="select:Font" content="'Libre Baskerville'">
<meta name="select:Font" content="arial">
<meta name="select:Font" content="courier new">

<meta name="select:Radius" content="0px">
<meta name="select:Radius" content="7px">

<meta name="select:Post" content="250px">
<meta name="select:Post" content="300px">
<meta name="select:Post" content="400px">

<meta name="text:AccentOpacity" content="0.5" />

<meta name="text:Title" content="title">
<meta name="text:Desc" content="desc goes here, a few lines look good">

<meta name="text:Link One" content="link">
<meta name="text:Link One URL" content="/">
<meta name="text:Link Two" content="link">
<meta name="text:Link Two URL" content="/">
<meta name="text:Link Three" content="link">
<meta name="text:Link Three URL" content="/">

<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Karla" 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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$("#linkh").click(function(){
$("#link").slideToggle("slow");
});
});
</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>

<style type="text/css">

::-webkit-scrollbar {
width: 5px;
background: {color:Background}; }

::-webkit-scrollbar-thumb {
background: {color:Highlight};
}

.tooltip{
display:inline;
position:relative;
}

#s-m-t-tooltip{
padding:5px 7px 5px 7px;
background:{color:Background};
z-index:99999999999999999999;
margin:20px 7px -2px 20px;
}

body {
margin:0px;
background:{color:Background};
background-image:url('{image:Background}');
background-attachment:fixed;
background-repeat:repeat;
 font-family:{select:Font}, Arial;
line-height:140%;
font-size:{select:Text};
color: {color:Text};
}

p{
margin:0 0 10px 0;
padding:0;
}

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

a{
    text-decoration:none;
color:{color:Link};
}

a:hover{
    font-weight:bold;
    color:{color:Link Hover};
}

{block:ifSmallCursor}
*, body {cursor: url(http://i.imgur.com/2qleX.jpg), auto;} a, a:link,a:active,a:visited, a:hover {cursor: url(http://i.imgur.com/IepP2.jpg), auto;}
{/block:ifSmallCursor}

li{
margin-left:-15px;
}

#wrapper{
width:600px;
margin:50px auto;
}

#sidebar{
    {block:ifContentBorders}
border:1px solid {color:Borders};
padding:15px;
background: rgba({RGBcolor:Accent},{text:AccentOpacity});
  {/block:ifContentBorders}
    top:120px;
margin-left:-150px;
width:120px;
text-align:center;
position:fixed;
}

#sidebar img{
    border-radius:{select:Radius};
    width:60px;
}
{block:ifNoHoverDesc}
.hover {
    margin:auto;
position: relative;
width: 60px;
height: 60px;
overflow: hidden;
}

.hover div {
width: 60px;
opacity: 1;
position: absolute;
top: 0;
-webkit-transition: opacity .7s linear;
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear;
}

.hover div.fade{
z-index: 1000;
opacity:1;
}

.hover:hover div.fade {
opacity: 0;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}

{/block:ifNoHoverDesc}


#content{
width:calc({select:Post} + 100px);
margin-left:200px;
overflow:hidden;
}

.post{
    {block:ifContentBorders}
border:1px solid {color:Borders};
padding:15px;
background: rgba({RGBcolor:Accent},{text:AccentOpacity});
  {/block:ifContentBorders}
width:{select:Post};
margin:0px 0px 50px 0px;
overflow:hidden;

}

#link
{
    margin-top:20px;
word-spacing:4px;

}

#link a{
    {block:ifLinkBG}
    color:{color:Content Link};
    background:{color:Content Link Background};
    {/block:ifLinkBG}
    padding:3px 4px 3px 4px;
}

#link a:hover{
 color:{color:Content Link Hover};
    background:{color:Content Link Hover Background};
}

.header{
    {block:ifTitleBG}
    background:{color:Content Link Background};
    {/block:ifTitleBG}
    color:{color:Title};
    margin-bottom:20px;
font-size:14px;
font-weight:{select:Title Weight};

}

.post img{
max-width:100%;
}

#nav{
margin:50px 0 0 0;
}


.media{
margin:0 0 10px 0;
}

.title{
font-weight:normal;
font-size:18px;
margin:0 0 10px 0;
}

.quote{
font-weight:normal;
font-size:16px;
font-style:italic;
margin:0 0 10px 0;
}

.question{
margin-bottom:10px;
}

blockquote{
margin:0 0 10px 10px;
padding:0 0 0 10px;
border-left:solid 1px #000;
}

.post .footer{
text-align:center;
}

.post .footer a{
    color:{color:Link};
}

.post .footer a:hover{
    color:{color:Link Hover};
}

.caption{
padding:10px;
}


::selection {
  background: {color:Highlight};
}
::-moz-selection {
  background: {color:Highlight};
}

ol.notes{
list-style-type:decimal;
padding:0;
margin:0;
padding-left:25px;
}

 ol.notes li.note img{
display:none;
}


ol.notes li.note{
margin-top:10px;
}

#butts{
   position: fixed;
bottom: 4px;
right: 12px;
color:{color:Link};
z-index: 99;
font-size: 16px;
}

#audioplayer {
width:30px;
height:30px;
margin-left:34px;
overflow:hidden;
position:absolute;
margin-top:40px;
}

#line{
    height:1px;
    background:#3d714b;
    margin:10px;
}



{CustomCSS}
</style>

</head>

<body>

<div id="wrapper">


<div id="sidebar">
<div class="header">{text:Title}</div>{block:ifNoHoverDesc}
<div class="hover">
<div class="fade">{/block:ifNoHoverDesc}<a href="/"><img src="{image:Side}" style="width:60px"></a>{block:ifNoHoverDesc}</div>
<center>{text:Desc}
</div>{/block:ifNoHoverDesc}
<div id="link">
 <a href="{text:Link One URL}">{text:Link One}</a>
  <a href="{text:Link Two URL}">{text:Link Two}</a>
   <a href="{text:Link Three URL}">{text:Link Three}</a>
</div>

</div>



{block:HasPages}
{block:Pages}
<a href="{URL}">{Label}</a><br>
{/block:Pages}
{/block:HasPages}



<div id="content">
{block:Posts}

<div class="post">

{block:Text}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>

{/block:Photo}

{block:Photoset}
<div class="media" style="width:{select:Post}">{Photoset}</div>
{/block:Photoset}

{block:Quote}
<div class="quote">"{Quote}"</div>
{block:Source}
<div class="quotesource">{Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}

{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<b>{Label}</b>{/block:Label}
&nbsp;{Line}
</div>
{/block:Lines}
{/block:Chat}

{block:Video}
<div class="media">{Video-400}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}
<div id="audioplayer">{AudioPlayerWhite} </div>
<div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
{block:caption}<div class="caption">{caption}</div>{/block:caption}
{/block:Audio}

{block:Answer}
<div class="question">{Asker}: {Question}</div>
<div class="caption">{Answer}</div>
{/block:Answer}

{block:Date}
<div class="footer">

<a href="{Permalink}">{ShortMonth} {DayOfMonth}</a>
(<a href="{ReblogURL}" target="_blank" class="details">reblog</a>)
{block:RebloggedFrom}<a href="{ReblogParentURL}" style="float:right; font-size:20px" title="via"></a>{/block:RebloggedFrom}
{block:ContentSource}<a href="{SourceURL}" style="float:right; font-size:20px" title="source"></a>{/block:ContentSource}
<a href="{ReblogURL}" target="_blank" class="details" style="float:right; font-size:20px" title="reblog"></a><br>
{block:PermalinkPage}
 {block:HasTags}
       {block:Tags}
          <a href="{TagURL}">#{Tag}</a>
       {/block:Tags}
    {/block:HasTags}
{block:PermalinkPage}
</div>
{block:PermalinkPage}
{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}
{/block:Date}

</div>
{/block:Posts}

{block:Pagination}
<div id="nav">
{block:PreviousPage}<a href="{PreviousPage}">previous</a> / {/block:PreviousPage}

{block:NextPage}<a href="{NextPage}">forward</a>{/block:NextPage}
</div>
{/block:Pagination}
</div>
</div>

<div id="butts"><a href="https://kirk.tumblr.com/">O</a></div>

</div>

    </body>
</html>