Beasts 0.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
Beasts 0.1
Theme by gyapo.tumblr.com,
don't remove this comment
-->

<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}

<meta name="image:Background" content="http://static.tumblr.com/s2ymoja/vBulxgu59/patttern.png"/>
<meta name="image:Bar Background" content="http://static.tumblr.com/s2ymoja/IzZlxgu77/p3.png"/>
<meta name="image:Sidebar" content="http://static.tumblr.com/..."/>


<meta name="color:Background" content="#000000" />
<meta name="color:Scroll" content="#333" />
<meta name="color:ScrollBG" content="#000" />

<meta name="color:Description" content="#222" />
<meta name="color:Title" content="#fff" />

<meta name="color:Link" content="#ccc" />
<meta name="color:Link hover" content="#da013c" />

<meta name="color:Bar Background" content="#222222" />
<meta name="color:Navigation" content="#000000" />
<meta name="color:Navigation hover" content="#222222" />
<meta name="color:Navigation Background" content="#000000" />
<meta name="color:Post Title" content="#fff" />
<meta name="color:Texts" content="#777" />

<meta name="if:250" content="0"/>
<meta name="if:400" content="1"/>
<meta name="if:500" content="0"/>
<meta name="if:Caption" content="0"/>
<meta name="if:Sidebar" content="0"/>
<meta name="if:DescriptionFixed" content="0"/>
<meta name="if:CustomLink" content="1"/>
<meta name="if:Permalink" content="1"/>
<meta name="if:Reblog" content="1"/>
<meta name="if:EndlessScroll" content="0"/>

<meta name="text:CustomLinkURL" content="URL" />




{block:IfEndlessScroll}
<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
<script src="http://static.tumblr.com/ko3o6ju/QzNls3n3y/smoothscroll.js" type="text/javascript"></script>
{/block:IfEndlessScroll}

 <style type="text/css">

 iframe#tumblr_controls {right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}

iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}

::-webkit-scrollbar-thumb:vertical {background-color:{color:Scroll};height:75px;}
::-webkit-scrollbar {height:0px;width:5px;background-color:{color:ScrollBG};}

 body
{font-family:arial;
font-size:10px;
color:{color:Texts};
background-color:{color:Background};
background-image:url('{image:Background}');
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;}

blockquote
{border-left:2px solid {color:Post Title};
padding-left:5px;}

a
{text-decoration:none;
color:{color:Link};
-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;
opacity:1;}

a:hover
{text-decoration:none;
color:{color:Link hover};
opacity:1;}

#bar
{background-color:{color:Bar Background};
background-image:url('{image:Bar Background}');
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;
position:fixed;
float:left;
top:0px;
left:0px;
width:90px;
height:100%;}

#menu
{position:fixed;
top:160px;
left:35px;}


#sidebar
{position:fixed;
width:250px;
top:215px;
left:145px;
padding:5px;
overflow:hidden;
background-color:#000;}

#description
{{block:IfNotDescriptionFixed}
padding:0px 10px 0px 10px;
height:0px;
{/block:IfNotDescriptionFixed}
{block:IfDescriptionFixed}
max-height:150px;
{block:IfDescriptionFixed}
text-align:justify;
overflow:auto;
color:{color:Description};
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;}

#description b
{color:{color:Title};
opacity:0.8;}

#description i
{color:{color:Title};
opacity:0.4;}

{block:IfNotDescriptionFixed}
#sidebar:hover #description
{height:100px;}
{/block:IfNotDescriptionFixed}

#title
{color:{color:Title};
text-align:center;
letter-spacing:5px;
padding-top:2px;
padding-left:5px;
text-transform:uppercase;
font-family:trebuchet ms;}



.navigation
{background-color:{color:Navigation Background};
color:{color:Navigation};
text-align:center;
width:15px;
padding-top:8px;
padding-bottom:8px;
height:auto;
font-family:consolas;
-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}

a.nav
{background-color:{color:Navigation Background};
color:{color:Navigation Background};
-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}

a.nav:hover
{background-color:{color:Navigation hover};}

.navigation:hover
{background-color:{color:Navigation hover};}








#posts
{width:{block:If250}250px{block:If250} {block:If400}400px{block:If400} {block:If500}500px{block:If500};
height:autolength;
overflow:hidden;
margin-left:450px;
margin-top:0px;
overflow:hidden;
}

  .post
{width:{block:If250}250px{block:If250} {block:If400}400px{block:If400} {block:If500}500px{block:If500};
overflow:hidden;
height:autolength;
margin-top:0px;
margin-bottom:0px;
font-size:10px;
overflow:hidden;
text-align:justify;
}

.post img
{max-width:{block:If250}250px{block:If250} {block:If400}400px{block:If400} {block:If500}500px{block:If500};}

.titre
{font-size:14px;
border-left:18px solid;
padding-left:5px;
font-family:trebuchet ms;
letter-spacing:5px;
margin-bottom:-5px;
color:{color:Post Title};}


#linkpost
{color:{color:Link hover};}

.name
{letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
color:{color:Post Title};
font-family:trebuchet ms;}

#audioplayer
{width:{block:If250}250px{block:If250} {block:If400}400px{block:If400} {block:If500}500px{block:If500};
background-color:#000;}
#permabar
{width:{block:If250}250px{block:If250} {block:If400}400px{block:If400} {block:If500}500px{block:If500};
font-size:10px;
overflow:hidden;}

#per
{margin-top:-5px;}

#per .name
{color:{color:Texts};}

.quote
{font-size:14px;font-family:trebuchet ms;font-style:italic;}

.source {letter-spacing:1px;
text-transform:uppercase;
font-size:9px;font-size:9px;
color:{color:Texts};
font-family:trebuchet ms;}

.perbar
{position:absolute;
font-size:10px;
margin-left:{block:If250}250px{block:If250} {block:If400}400px{block:If400} {block:If500}500px{block:If500};
text-align:center;
width:15px;
height:12px;
overflow:hidden;
padding-top:5px;
padding-bottom:5px;
font-family:arial;
background-color:{color:Navigation Background};
-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}

.perbar:hover
{color:{color:Link hover};
height:120px;}

.perbar2
{position:absolute;
font-size:10px;
margin-left:{block:If250}250px{block:If250} {block:If400}400px{block:If400} {block:If500}500px{block:If500};
text-align:center;
width:15px;
height:12px;
overflow:hidden;
{block:IfPermalink}margin-top:18px;{/block:IfPermalink}
padding-top:5px;
padding-bottom:5px;
font-family:arial;
background-color:{color:Navigation Background};
-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}

.perbar2:hover
{color:{color:Link hover};
height:85px;}


#pagination
{font-size:10px;
text-align:center;
width:{block:If250}250px{block:If250} {block:If400}400px{block:If400} {block:If500}500px{block:If500};
padding:10px 5px 10px 10px;
letter-spacing:5px;
text-transform:uppercase;
font-family:trebuchet ms;
color:{color:Link};}





</style>
</head>


<body>




{block:IfEndlessScroll}<div id="top"></div>
 <a style="position:fixed;bottom:10px;right:10px;font-size:10px;font-family:arial" href="#top" class="texte">back to top</a>{/block:IfEndlessScroll}



<div id="bar">
<div id="menu">
<a href="/" class="nav">
<div class="navigation">h<br/>o<br/>m<br/>e</div>
</a>
<a href="/ask" class="nav">
<div class="navigation">a<br/>s<br/>k</div>
</a>
{block:IfCustomLink}
<a href="{text:CustomLinkURL}" class="nav">
<div class="navigation">l<br/>i<br/>n<br/>k<br/>s</div>
</a>
{/block:IfCustomLink}
<a href="/archive" class="nav">
<div class="navigation">a<br/>r<br/>c<br/>h<br/>i<br/>v<br/>e</div>
</a>
<a Title="Beasts theme" href="http://gyapo.tumblr.com" class="nav">
<div class="navigation">t<br/>h<br/>e<br/>m<br/>e</div>
</a>
</div><!--menu-->
</div><!--bar-->


{block:IfSidebar}
<div id="sidebar">
<div id="image"><img width="250px" style="margin-bottom:7px;" src="{image:Sidebar}"/></div>
<div id="description">{Description}</div>
<div id="title">{Title}</div>
</div><!--sidebar-->
{/block:IfSidebar}


<div id="posts">
<table width="500px" border="0" cellpadding="0" cellspacing="0" align="center">
{block:Posts}

<div class="post">
{block:IfReblog}
<a href="{ReblogURL}" target="_blank"><div class="perbar2">r<br/>e<br/>b<br/>l<br/>o<br/>g</div></a>
{/block:IfReblog}
{block:IfPermalink}
<a href="{Permalink}"><div class="perbar">p<br/>e<br/>r<br/>m<br/>a<br/>l<br/>i<br/>n<br/>k</div></a>
{/block:IfPermalink}

{block:Text}
{block:Title}
<a href="{Permalink}"><div class="titre">{Title}</div></a>
{/block:Title}
<div>{Body}</div>
{/block:Text}

{block:Photo}
{block:IndexPage}
<a href="{Permalink}"><div><img style="margin-bottom:-3px;" src="{PhotoURL-500}" width="{block:If250}250px{/block:If250} {block:If400}400px{/block:If400} {block:If500}500px{/block:If500}"/></div></a>
{block:IfCaption}{block:Caption}
<div class="texte">{Caption}</div>
{/block:Caption}{/block:IfCaption}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}<div><img src="{PhotoURL-500}" width="{block:If250}250px{/block:If250} {block:If400}400px{/block:If400} {block:If500}500px{/block:If500}"/></div>
{LinkCloseTag}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
<div>
{block:If250} {Photoset-250} {/block:If250}
{block:If400} {Photoset-400} {/block:If400}
{block:If500} {Photoset-500} {/block:If500}
</div>
{block:IfCaption}{block:Caption}
{block:IndexPage}
<div class="texte">{Caption}</div>
{/block:IndexPage}
{/block:Caption}{/block:IfCaption}
{/block:Photoset}

{block:Quote}
<a href="{Permalink}"><div class="quote"> "{Quote}"</div></a>
{block:Source}
<div class="source">— {Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<a href="{URL}" {Target}><div class="titre" id="linkpost">{Name}</div></a>
{block:Description}
<div class="texte">{Description}</div>
{/block:Description}
</div>
{/block:Link}

{block:Chat}
{block:Title}
<a href="{Permalink}"><div class="titre">{Title}</div></a>
{/block:Title}
<div class="chat">
{block:Lines}
<div class="{Alt} user_{UserNumber}">
<div>{block:Label}<span  class="name">-{Label}</span>{/block:Label} {Line}</div>
</div>
{/block:Lines}
</div>
{/block:Chat}

{block:Video}
<div>
{block:If250} {Video-250} {/block:If250}
{block:If400} {Video-400} {/block:If400}
{block:If500} {Video-500} {/block:If500}
</div>
{block:IfCaption}{block:Caption}
{block:IndexPage}
<div class="texte">{Caption}</div>
{/block:IndexPage}
{/block:Caption}{/block:IfCaption}
{/block:Video}

{block:Audio}
<div id="audioplayer">{AudioPlayerBlack}</div>
<div id="per"><ul>
<li><div class="name">{block:TrackName}
{TrackName}
{/block:TrackName}</div></li>
<li>{block:Artist}
<div class="name" id="artist">by {Artist}</div>
{/block:Artist} </li>
<li><div class="name">{PlayCountWithLabel}</div></li>
</ul>
</div>
{block:IfCaption}{block:Caption}
{block:IndexPage}
<div class="texte">{Caption}</div>
{/block:IndexPage}
{/block:Caption}{/block:IfCaption}
{/block:Audio}



{block:PermalinkPage}
{block:Caption}
<div class="texte">{Caption}</div>
{/block:Caption}

<div id="permabar">
<div>{block:Date}Posted <a href="{Permalink}">{TimeAgo}</a> // {/block:Date}{NoteCountWithLabel} {block:RebloggedFrom} (via <a href="{ReblogParentURL}">{ReblogParentName}</a> , org. <a href="{ReblogRootURL}">{ReblogRootName}</a> ){/block:RebloggedFrom}</div>
{block:HasTags}<div id="tags">tagged :{block:Tags}
&#160#<a href="{TagURL}">{Tag}</a>&#160{/block:Tags}</div>{/block:HasTags}

{PostNotes}

{/block:PermalinkPage}

{/block:Posts}
</td></tr>
<tr><td>
{block:IfNotEndlessScroll}{block:Pagination}

<div id="pagination">
{block:PreviousPage}
<a href="{PreviousPage}">back</a>&#160| {CurrentPage}/{TotalPages} |&#160 {/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">next</a>
{/block:NextPage}
<div><!--pagination-->

{/block:Pagination}{block:IfNotEndlessScroll}
</td></tr>
</table>
</div>

</body>
</html>