Theme: Alchemy

<html>

<!---

THEME: ALCHEMY BY HEARTENS (HEARTENS.TUMBLR.COM)

- DO NOT REMOVE THE CREDITS OR MOVE IT TO A SECONDARY PAGE
- DO NOT REUPLOAD OR REDISTRIBUTE
- DO NOT USE AS A BASE CODE

____________________________________


--->

<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="color:background" content="#fcf8f5" />
<meta name="color:sidebar" content="#fff" />
<meta name="color:entry" content="#fff" />
<meta name="color:permalink" content="#FAF4EE" />

<meta name="color:bold" content="#92867A" />
<meta name="color:italic" content="#C09F80" />
<meta name="color:link" content="#C7A17D" />

<meta name="font:body" content="arial" />


<meta name="color:title" content="#D8BDA4" />
<meta name="color:scroll" content="#D8B89A" />
<meta name="color:text" content="#726e77" />
<meta name="color:border" content="#F1E3D6" />
<meta name="color:title border" content="#d7c5b4" />
<meta name="color:hover" content="#FFFFFF" />

<meta name="if:Show Tags" content="1" />
<meta name="if:Infinite Scrolling" content="0" />
<meta name="if:Show Caption" content="0" />
<meta name="if:Show Portrait" content="1" />
<meta name="if:Entry Border" content="1" />
<meta name="if:Fading Images" content="1" />

<meta name="text:Background Repeat" content="repeat"/>

<meta name="image:Sidebar 1" content="http://static.tumblr.com/4hejznv/RU7m9mwtn/1.png"/>
<meta name="image:Sidebar 2" content="http://static.tumblr.com/4hejznv/ynNm9mwu7/2.png"/>
<meta name="image:Background" content=""/>

<meta name="text:Link1" content="" />
<meta name="text:Link1 URL" content="/"/>
<meta name="text:Link2" content="" />
<meta name="text:Link2 URL" content="/"/>
<meta name="text:Link3" content="" />
<meta name="text:Link3 URL" content="/"/>
<meta name="text:Link4" content="" />
<meta name="text:Link4 URL" content="/"/>

<style type="text/css">
body {
background-position:bottom right;
background-attachment: fixed;
text-align:justify;
font-size: 10px;
line-height: 11px;
background-image: url('{image:background}');
background-repeat: {text:Background Repeat};
background-color: {color:background};
color: {color:text};
font-family: {font:body};
}

.entry b, #desc b, strong, #music b, b {
color: {color:bold};
}

.entry i, #desc i, em {
color: {color:italic};
}

.entry blockquote {
border-left: 2px {color:border} solid;
padding-left: 5px;
}

::-webkit-scrollbar {
height: 5px;
width: 5px;
background-color: {color:background};
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: {color:scroll};
}
::-webkit-scrollbar-thumb:vertical:hover{
background-color: {color:scroll};
}
::-webkit-scrollbar-thumb:horizontal:hover{
background-color: {color:scroll};
}

a {
text-decoration:none;
outline:none;
color: {color:link};
-moz-outline-style:none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

a:hover {
color: {color:border};
}

#main {
width: 500px;
float: left;
margin-left: 450px;
}

.page {
margin-left: 205px;
top: 420px;
position: fixed;
z-index: 999;
}

.entry {
float: left;
width: 500px; padding: 10px;
overflow:hidden;
margin: 5px;
{block:IfEntryBorder}border: 1px {color:border} solid; {/block:IfEntryBorder}
background-color: {color:entry};
}

.entry img {
max-width: 500px;
}

{block:IfFadingImages}{block:IndexPage}
.eimages {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}{/block:IndexPage}{/block:IfFadingImages}

{block:IfFadingImages}{block:IndexPage}.eimages:hover {
opacity: 0.9;
filter:alpha(opacity=90);
-moz-opacity: 0.9;
}{/block:IndexPage}{/block:IfFadingImages}

iframe#tumblr_controls {
right:3px !important;
position:fixed !important;
opacity: 0.5;
filter:alpha(opacity=0.5);
-moz-opacity: 0.5;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
}

iframe#tumblr_controls:hover {
opacity: 1;
filter:alpha(opacity=1);
-moz-opacity: 1;
}

.quote {
font-family: arial;
font-weight: bold;
font-size: 12pt;
text-align: left;
line-height: 17px;
padding-left: 10px;
letter-spacing: -1px;
color: {color:title};
}

#quotation {
float: left;
margin-right: -5px;
margin-top: 10px;
font-size: 60px;
z-index: -1;
opacity: 0.1;
filter:alpha(opacity=0.1);
}

#reblog {
font-size: 9px;
font-family: calibri;
text-transform: uppercase;
width: 60px;
margin-top: 0px;
margin-left: 440px;
padding: 4px;
text-align: center;
position: absolute;
height: auto;
z-index: 1;
opacity: 0;
filter:alpha(opacity=0);
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
background-color: {color:permalink};
}

.entry:hover #reblog {
opacity: 1;
filter:alpha(opacity=1);
margin-top: -24px;
}

.header {
font-family: cambria;
font-size: 18px;
text-align: left;
line-height: 15px;
padding-left: 10px;
letter-spacing: -1px;
padding-top: 5px;
padding-bottom: 5px;
width: 98%;
color: {color:title};
text-transform: uppercase;
background-color: {color:permalink};
border-bottom: 4px {color:title border} solid;
}

#tags {
width: 510px;
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
margin-left: -10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 2px;
padding-left: 6px;
text-align: center;
line-height: 10px;
border-top: dotted 1px {color:border};
}

.ask img {
float: left;
max-height: 24px;
margin-right: 5px;
vertical-align:top;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
}

.ask {
position: relative;
width: 480px;
font-size: 11px;
padding: 10px;
margin-top: 5px;
margin-top: 5px;
padding: 5px;
display: block;
margin: 0;
border-bottom: 4px {color:title border} solid;
background-color: {color:permalink};
}

.permalinks {
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
margin-top: 10px;
width: 510px;
padding: 5px 5px 10px 5px;
margin-left: -10px;
overflow:hidden;
margin-bottom: -11px;
background-color: {color:permalink};
}

.asktitle {
font-family: cambria;
font-size: 18px;
text-transform: uppercase;
text-align: left;
margin-bottom: 5px;
color: {color:title};
}

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


.notes img {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}

#artwork {
float:left;
margin-bottom: 10px;
}

#musicp {
width:30px;
height:30px;
overflow:hidden;
position:absolute;
margin-top:40px;
margin-bottom:40px;
margin-left: 35px;
}


#source {
font-family: calibri;
font-size: 7pt;
text-align: center;
text-transform: uppercase;
}

.pagination {
padding: 5px;
font-family: calibri;
font-size: 12px;
margin-left: -90px;
margin-top: 10px;
{block:IfInfiniteScrolling}
display: none;
{/block:IfInfiniteScrolling}
text-align: center;
}

.end {
width: 500px;
color: {color:text};
}


#custom {
width: 160px;
left: 63px;
{block:IfShowPortrait}top: 260px;{/block:IfShowPortrait}
{block:IfNotShowPortrait}top: 200px;{/block:IfNotShowPortrait}
position: fixed;
}

.tlink {
font-family: calibri;
font-size: 8px;
text-transform: uppercase;
width: 65px;
padding: 5px;
letter-spacing: 1px;
margin-top: 2px;
display: block;
text-align: center;
margin-bottom: 3px;
color: {color:link};
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
background-color: {color:sidebar};
}

.tlink:hover {
background-color: {color:permalink};
color: {color:link};
}

#container {
position: fixed;
margin-left: 90px;
top: 60px;
}

.bubble {
margin: 50px;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 240px;
height: 300px;
position: fixed;
background-color: {color:sidebar};
}

.bubble:after {
content: "";
top: 5px;
position: absolute;
left: -50px;
border-top-color: inherit;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px {color:sidebar} solid;
}

{block:IfShowPortrait}
#portrait {
left: 62px;
top: 179px;
position: fixed;
padding: 6px;
text-align: center;
-webkit-border-radius: 64px;
-webkit-border-top-right-radius: 1px;
-moz-border-radius: 64px;
-moz-border-radius-topright: 1px;
border-radius: 64px;
border-top-right-radius: 1px;
background-color: {color:sidebar};
}

#portrait img {
-webkit-border-radius: 64px;
-webkit-border-top-right-radius: 1px;
-moz-border-radius: 64px;
-moz-border-radius-topright: 1px;
border-radius: 64px;
border-top-right-radius: 1px;
}{/block:IfShowPortrait}

#desc {
font-size: 9px;
width: 220px;
height: 280px;
padding: 10px;
z-index: 999;
font-family: {font:body};
background-color: {color:sidebar};
}

#sideimage img.top:hover {
opacity:0;
}

.top {
opacity: 1;
}

#sideimage {
position:relative;
width: 240px;
height: 300px;
margin:0 auto;
z-index: 999;
margin-bottom: -10px;
z-index: 1;
}

#sideimage img {
width: 240px;
height: 300px;
left:0;
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}


.sidebar {
width: 240px;
height: 300px;
margin: auto;
}

.content {
width: 240px;
height: 300px;
background-color: {color:sidebar};
z-index: 999;
}

#ugh {
width: 200px;
index: 999;
text-transform: uppercase;
background-color: {color:sidebar};
}

#jesus:hover #ugh {
margin-top: 40px;

}

.other {
opacity: 0.0;
height: 0px;
width: 240px;
height: 300px;
margin-top: 0px;
position: absolute;
margin-top: -300px;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s
background-color: {color:sidebar};
}


#float {
float: left;
margin-bottom: 10px;
margin-right: 25px;
font-family: {font:body};
}

#track, #artist, #count {
margin-top: 2px;
font-size: 10px;
padding: 10px;
margin-bottom: 2px;
width: 480px;
background-color: {color:permalink};
text-transform: uppercase;
}

.cover {
position: relative;
z-index: 1;
height: 100px;
width: 100px;
}

.control {
width: 20px;
height: 30px;
overflow: hidden;
position: relative;
z-index: 1000;
margin: 15px 24px 13px 16px;
}

.msq {
background-color: #ffffff;
position: absolute;
z-index: 999;
margin-left: 5px;
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
opacity: 0.5;
margin-top: -80px;
margin-left: 18px;
}

.content:hover #vanish {
opacity: 0;
}

#arrive {
opacity: 0.8;
filter:alpha(opacity=0.8);
}

.content:hover .other {
opacity: 0.8;
filter:alpha(opacity=80);
width: 240px;
height: 300px;
margin-top: -300px;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
 -o-transition-duration: 0.6s;
}

.shownotes {
display:none;
}

#anotes {
font-size: 20px;
text-align: center;
font-family: calibri;
color: {color:link};
}

#credits {
right:5px;
position: fixed;
font-family: calibri;
text-transform: uppercase;
font-size: 9px;
bottom:5px;
position:fixed;
opacity: 1;
filter:alpha(opacity=0.8);
z-index: 999;
}

#credits a {
color: {color:text};
}
</style>

{block:IfInfiniteScrolling}
<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfInfiniteScrolling}

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".shownotes").hide();
$(".note").click(function(){
$(this).next(".shownotes").slideToggle('slow');
}); }); </script>
</head>


</head>
<body>
<div id="container">
<div class="bubble">
<div class="content"> <div class="sidebar">
<div id="sideimage">
<img class="bottom" id="arrive" src="{image:sidebar 2}"/>
<img class="top" id="vanish" src="{image:sidebar 1}" />
</div></div>
<div class="other" id="desc">{Description}</div> </div>
<div id="custom"><a href="/" class="tlink">home</a>
<a href="/ask" class="tlink">ask</a>
<a href="/archive" class="tlink" id="jesus">archive</a>
{block:ifLink1}<a href="{text:Link1 URL}" class="tlink">{text:Link1}</a>{/block:ifLink1}
{block:ifLink2}<a href="{text:Link2 URL}" class="tlink">{text:Link2}</a>{/block:ifLink2}
{block:ifLink3}<a href="{text:Link3 URL}" class="tlink">{text:Link3}</a>{/block:ifLink3}
{block:ifLink4}<a href="{text:Link4 URL}" class="tlink">{text:Link4}</a>{/block:ifLink4}
{block:IndexPage}<div class="pagination">
{block:PreviousPage}<a href="{PreviousPage}">« </a>{/block:PreviousPage}{CurrentPage}/{TotalPages}{block:NextPage}<a href="{NextPage}" id="next"> »</a>{/block:NextPage}{/block:Pagination}
</div>{/block:IndexPage}
</div>
</div>
</div>

{block:IfShowPortrait}<div id="portrait"><img src="{PortraitURL-64}"></div>{/block:IfShowPortrait}
</div>​​​​​​

<div class="autopagerize_page_element">
{block:Posts}<div id="main">
<div class="entry">

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

{block:Photo}{LinkOpenTag}<div class="eimages"><img src="{PhotoURL-500}" alt="{PhotoAlt}"></div>{LinkCloseTag}
{block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}
{block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}
{/block:Photo}

{block:Photoset}
<div class="eimages">{Photoset-500}</div>
{block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}
{block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}
{/block:Photoset}

{block:Quote}<div class="quote">
<div id="quotation">❝</div>
{Quote}</div>
{block:Source}<div id="source"> —{Source}</div>{/block:Source}
{/block:Quote}

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

{block:Chat}{block:Title}<div class="header">{Title}</div>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
{/block:Chat}

{block:Audio}
<div id="float">
{block:AlbumArt} <img src="{AlbumArtURL}" class="cover"> {/block:AlbumArt}
<div class="msq">
<div class="control">
{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
</div></div></div>

<div id="artist">{block:Artist}<b>Artist -</b> {Artist}{/block:Artist}</div>
<div id="track">{block:TrackName}<b>Track  Name -</b> {TrackName}
{/block:TrackName}</div>
<div id="count">{block:PlayCount}<b>Play Count-</b> {PlayCount}{/block:PlayCount}</div>
<br>
{block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}
{block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}

{/block:Audio}

{block:Video}
{Video-500}
{block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}
{block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}
{/block:Video}

{block:Answer}
<div class="ask"><img src="{AskerPortraitURL-24}" align="left">
<div class="asktitle">{Asker} asked:</div> {Question}</div>{Answer}
{/block:Answer}

<!-- START OF TAGS -->

{block:Date}
<div class="permalinks"><div id="reblog"><a href="{ReblogURL}">Reblog</a></div>
<b>▶ posted</b> <a href="{Permalink}">{TimeAgo}</a> {block:NoteCount}with <a href="{Permalink}"> {NoteCountWithLabel}</a>
{/block:NoteCount}
{block:RebloggedFrom}(origin:  <a href="{ReblogRootURL}"> {ReblogRootName}</a>){/block:RebloggedFrom}
{block:IfShowTags}{block:HasTags}<br><b>▶ Tags:</b> {block:Tags}#<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}{/block:IfShowTags}
</div>{/block:Date}
</div>

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

{block:PermalinkPage}
{block:PostNotes}
<div class="note" id="anotes">CLICK TO SHOW NOTES</div>
<div class="shownotes">  {PostNotes}
</div>
{/block:PostNotes}
{/block:PermalinkPage}
</div>
{/block:Posts}
</div>

<!--UNDER NO CIRCUMSTANCES MUST YOU REMOVE THE CREDITS FROM THIS PAGE-->
<DIV id="credits"><a href="http://heartens.tumblr.com">© HEARTENS</a></div>
</body>
</html>