Theme 21 by armyofghosts

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

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

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



<!--- THEME #21 BY ARMYOFGHOSTS :) --->



<!---ON SCROLL--->

<script>
$(window).scroll(function() {
    var scrollTopVal = $(this).scrollTop();
    if ( scrollTopVal > 200 ) {
        $('#sidebar').css({'opacity':'1'});

    } else {
        $('#sidebar').css({'opacity':'0'});
    }
});
</script>





<!---POP UP ASK--->

<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
});
return false;
});
});
</script>




<!---jquery--->

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:30,

tip_fade_speed:300,

attribute:"title"

});

});

})(jQuery);

</script>






<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

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

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>



<meta name="color:Background" content="#fff"/>
<meta name="color:Text" content="#a8a8a8"/>
<meta name="color:Links" content="#ccc"/>
<meta name="color:Hover" content="#f2f2f2"/>
<meta name="color:SidebarLinks" content="#000"/>
<meta name="color:SidebarLinksHover" content="#fff"/>
<meta name="color:GradientC1" content="#fff"/>
<meta name="color:GradientC2" content="#000"/>
<meta name="color:Bold" content="#a8a8a8"/>
<meta name="color:Italics" content="#a8a8a8"/>
<meta name="color:Border" content="#f7f7f7"/>
<meta name="color:Tooltip" content="#fff"/>
<meta name="color:TooltipBg" content="#000"/>
<meta name="color:Scrollbar" content="#000"/>
<meta name="color:ScrollbarBg" content="#fff"/>

<meta name="text:Title" content="" />
<meta name="text:Ask Title" content="" />
<meta name="text:Ask Info" content="" />
<meta name="text:URL" content="" />
<meta name="text:Link 1 Text" content="" />
<meta name="text:Link 1 URL" content="" />
<meta name="text:Link 2 Text" content="" />
<meta name="text:Link 2 URL" content="" />
<meta name="text:Link 3 Text" content="" />
<meta name="text:Link 3 URL" content="" />

<meta name="if:Sidebar" content="1" />
<meta name="if:Pop Up Ask" content="1" />
<meta name="if:Gradient" content="" />
<meta name="if:Show Captions" content="" />

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



<style type="text/css">



/*---TOOLTIP---*/

#s-m-t-tooltip {
    max-width:300px;
    padding:2px;
    margin:10px 0px 0px 10px;
    padding:3px 5px;
    background-color:{color:TooltipBg};
    text-transform:none;
    font-size:9px;
    font-family:helvetica;
    letter-spacing:1px;
    color:{color:Tooltip};
    z-index:999999;
}



/*---SCROLLBAR---*/

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

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background:#333;
}



/*---BODY---*/

body {
    background:url('{image:background}') 50%50% repeat {color:background};
    background-attachment:fixed;
    color:{color:text};
    font-family:helvetica;
    letter-spacing:1px;
    font-size:10px;
    line-height:120%;
    text-align:justify;
    word-break:keep-all;
    overflow-x:hidden;
}



/*---LINKS---*/

a {
    text-decoration:none;
    color:{color:Links};
    -moz-transition-duration:0.3s;
    -webkit-transition-duration:0.3s;
    -o-transition-duration:0.3s;
}

a:hover {
    color:{color:Hover};
    -moz-transition-duration:0.3s;
    -webkit-transition-duration:0.3s;
    -o-transition-duration:0.3s;
}



/*---POST STYLES---*/

blockquote {
    border-left:2px solid {color:border};
    padding-left:4px;
    margin-left:30px;
}

blockquote img {
    max-width:380px;
}

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

i {
    color:{color:italics};
}

b {
    color:{color:bold};
}

li {
    margin-left:-20px;
}

small {
    font-size:9px;
    letter-spacing:1px;
}

h1 {
    text-align:center;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:2px;
    font-family:helvetica;
    line-height:100%;
    color:#555;
}

h1 a {
     color:{color:text};
}



/*---ENTRIES---*/

#cont {
    top:145px;
    width:600px;
    left:51.25%;
    margin-left:-245px;
    position:absolute;
}

#posts {
    display:block;
    position:relative;
    width:400px;
    margin:70px 45px 185px 45px;
    {block:PermalinkPage}
    margin:70px 45px 80px 45px;
    {/block:PermalinkPage}
}

#posts:first-of-type {
    margin-top:50px;
}

#posts:last-of-type {
    margin-bottom:100px;
}



/*---HEADER---*/

#header {
    z-index:999999;
    position:absolute;
    background:url('{image:header}') no-repeat center center fixed #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    {block:ifGradient}
    background: -webkit-gradient(linear, left bottom, left top, from({color:GradientC1}), to({color:GradientC2})) !important;
    {/block:ifGradient}
    margin-top:-10px;
    margin-left:-10px;
    width:100%;
    padding:20px;
    text-align:center;
}



/*---TITLE---*/

#title {
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:15px;
    padding:10px 10px 0px 10px;
}

#title a {
    display:inline-block;
    width:160px;
    padding:10px;
    color:#fff;
    border:2px solid #fff;
}

#title a:hover {
    letter-spacing:6px;
}



/*---LINKS---*/

#links {
    margin-top:20px;
    margin-left:2px;
    font-size:7px;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:2px;
}

#links a {
    color:#fff;
    padding:4px;
}

#links a:hover {
    color:#fff;
}



/*---SIDEBAR---*/

#sidebar {
    opacity:0;
    position:fixed;
    height:200px;
    top:20%;
    margin-bottom:-100px;
    width:200px;
    left:25%;
    margin-left:-100px;
    -moz-transition-duration:0.4s;
    -webkit-transition-duration:0.4s;
    -o-transition-duration:0.4s;
}



/*---SIDEBAR LINKS---*/

#sblinks a {
    display:block;
    padding:10px;
    font-weight:normal;
    text-transform:lowercase;
    font-size:9px;
    letter-spacing:2px;
    color:{color:SidebarLinks};
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#sblinks a:hover {
    color:{color:SidebarLinksHover};
    box-shadow: inset 170px 0 0 0 {color:SidebarLinks};
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

{block:ifGradient}
#sblinks a:hover:nth-child(even) {
    color:{color:SidebarLinksHover};
    box-shadow: inset 170px 0 0 0 {color:GradientC1};
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#sblinks a:hover:nth-child(odd) {
    color:{color:SidebarLinksHover};
    box-shadow: inset 170px 0 0 0 {color:GradientC2};
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}
{/block:ifGradient}

#sblinks:last-of-type {
    margin-bottom:10px;
}



/*---SIDEBAR TITLE---*/

#title2 {
    margin-bottom:10px;
}

#title2 a {
    width:160px;
    margin-bottom:10px;
    padding:10px 10px 10px 0px;
    text-transform:lowercase;
    font-weight:bold;
    letter-spacing:4px;
    font-size:18px;
    color:#000;
}

#title2 a:hover {
    background:#fff;
    color:#000;
    letter-spacing:7px;
}



/*---PAGINATION---*/

#pagination {
    width:160px;
    border-top:1px solid #e8e8e8;
    padding:10px 0px 0px 10px;
    word-spacing:25px;
}

#pagination a {
    font-weight:normal;
    text-transform:lowercase;
    font-size:9px;
    letter-spacing:2px;
    color:{color:SidebarLinks};
}

#pagination a:hover {
    font-weight:bold;
}



/*---PAGINATION #2---*/

#pagination2 {
    width:450px;
    left:50%;
    margin-left:-215px;
    bottom:0px;
    background:{color:Background};
    padding-top:15px;
    height:25px;
    text-align:center;
    text-transform:uppercase;
    font-weight:normal;
    font-size:10px;
    letter-spacing:1px;
    position:fixed;
    z-index:1000;
}



/*---INFO---*/

#info {
    text-align:center;
    font-weight:normal;
    width:400px;
    margin-top:10px;
    padding-top:10px;
    padding-bottom:5px;
    font-size:9px;
    letter-spacing:1px;
    text-transform:uppercase;
    line-height:100%;
}

#info a {
    color:#444;
}



/*---TAGS---*/

#tags {
    font-family:helvetica;
    letter-spacing:1px;
    text-align:center;
    margin-top:5px;
    padding-bottom:5px;
    font-size:9px;
    line-height:160%;
    opacity:0;
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#posts:hover #tags {
    opacity:1;
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#tags a:last-of-type {
    padding-right:0px;
}

#tags a {
    padding-right:10px;
    color:#444;
}



/*---CAPTION---*/

.caption {
    text-align:left;
}



/*---NOTES---*/

.note {
    padding-left:30px;
    padding-bottom:2px;
    text-align:left;
    width:380px;
}

.note li {
    list-style:none;
    font-size:7px;
    letter-spacing:2px;
    text-transform:uppercase;
    border-bottom:1px solid #f1f1f1;
    padding:2%;
}

.note li img.avatar{
    border-radius:30px;
    width:15px;
    height:15px;
    margin-right:10px;
    margin-bottom:-5px;
}

.more_notes_link {
    font-size:8px;
    font-weight:bold;
    letter-spacing:2px;
    color:#000;
}

#rebloggedfrom {
	font-family:helvetica;
	text-align:center;
	margin-top:-5px;
	font-size:10px;
}



/*---ASKS---*/

#asker {
    margin-bottom:5px;
    padding:8px;
    margin-bottom:5px;
    text-align:left;
    border:2px solid #000;
}

#asker a {
    font-size:11px;
    font-weight:bold;
    color:#000;
    letter-spacing:0px;
    text-transform:lowercase;
}



/*---AUDIO---*/

#songinfo {
    margin-left:40px;
    padding-top:6px;
    padding-left:10px;
    margin-bottom:10px;
    height:27px;
    text-align:left;
}

#songtitle {
    text-transform:uppercase;
    font-size:9px;
    font-weight:bold;
    color:#000;
}

#songimg img {
    float:left;
    width:40px;
}

#play {
    width:26px;
    height:26px;
    overflow:hidden;
}

#playbtn {
    opacity:0;
    background:#fff;
    padding:7px;
    width:26px;
    height:26px;
    position:absolute;
    overflow:hidden;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}

#posts:hover #playbtn {
    opacity:0.8;
}



/*---QUOTES---*/

.quote {
    font-size:15px;
    letter-spacing:1px;
    text-align:right;
    font-family:times;
    font-style:italic;
    padding:5px;
}

#source {
    padding-top:5px;
    text-align:right;
}



/*---CHAT---*/

#chat {
    padding:5px;
    text-align:left;
}

#chat:nth-of-type(odd) {
    background:#f1f1f1;
}



/* --- POP UP ASK ---*/

#fade {
    display: none;
    background:url('{image:background}');
    background-color:{color:background};
    position: fixed; top:0; left:0;
    width: 100%; height: 100%;
    opacity:1;
    z-index: 9999;
}

.popup_block {
    display: none;
    padding: 10px;
    float: left;
    position: fixed;
    top: 50%;
    left: 52.3%;
    z-index: 99999;
}

.heading {
    font-family:helvetica;
    text-transform:uppercase;
    font-size:10px;
    margin-bottom:10px;
    color:#000;
    letter-spacing:2px;
    font-weight:bold;
    padding:5px;
    border:1px solid #000;
}



/*---CREDIT---*/

#cred {
        position:fixed;
        bottom:10px;
        right:10px;
        font-size:12px;
        font-family:arial;
        font-weight:bold;
        letter-spacing:-2px;
        padding:5px;
}

#cred a {
    color:#000;
}



/*---END CSS---*/



</style></head><body>





<!---SIDEBAR--->

{block:ifSidebar}

<div id="sidebar">

<div id="title2"><a href="/">{text:title}</a></div>

<div id="sblinks">

{block:ifPopUpAsk}
<a href="#?w=500" rel="02" class="poplight">✕ &nbsp; ask</a>
{/block:ifPopUpAsk}

{block:ifNotPopUpAsk}
<a href="/ask">✕ &nbsp; ask</a>
{/block:ifNotPopUpAsk}

<a href="{text:Link 1 URL}" target="_blank">✕ &nbsp; {text:Link 1 Text}</a>

<a href="#?w=500" class="poplight1" rel="TES1">✕ &nbsp; {text:Link 2 Text}</a>

<a href="#?w=500" class="poplight2" rel="TES2">✕ &nbsp; {text:Link 3 Text}</a>
</div>

{block:Pagination}
<div id="pagination">
{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
{block:PreviousPage}<a href="{PreviousPage}">last</a>{/block:PreviousPage}
</div>
{/block:Pagination}

</div>

{/block:ifSidebar}





<!---HEADER--->

<div id="header">

<div id="title"><a href="/">{text:title}</a></div>

<div id="links">

<a {block:ifPopUpAsk}href="#?w=500" rel="02" class="poplight"{/block:ifPopUpAsk} {block:ifNotPopUpAsk}href="/"{block:ifNotPopUpAsk}>ask</a>

<a href="{text:Link 1 URL}">{text:Link 1 Text}</a>

<a href="{text:Link 2 URL}">{text:Link 2 Text}</a>

<a href="{text:Link 3 URL}">{text:Link 3 Text}</a>

</div>
</div>





<!---PAGINATION--->

{block:ifNotSidebar}

<div id="pagination2">
{block:Pagination}<div class="pagination2">
{block:PreviousPage}<a href="{PreviousPage}">back</a>   {/block:PreviousPage} —
{block:NextPage}<a href="{NextPage}">forth</a> {/block:NextPage}
</div>{/block:Pagination}
</div>

{block:ifnotSidebar}







<!---CONTAINER--->

<div id="cont">





<!---POSTS--->

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





<!---TEXT--->

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}
<span style="text-align:left;">{Body}</span>
{/block:Text}



<!---PHOTOS--->

{block:Photo}
<center>{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
{block:Caption}
{block:ifShowCaptions}
<span class="caption" style="text-align:left;">{Caption}</span>
{/block:ifShowCaptions}
{block:ifnotShowCaptions}
{block:PermalinkPage}<span class="caption" style="text-align:left;">{Caption}</span> {/block:PermalinkPage}
{/block:ifnotShowCaptions}
{/block:Caption}
{/block:Photo}



<!---PHOTOSETS--->

{block:Photoset}
{Photoset-400}
{block:Caption}
{block:ifShowCaptions}
<span class="caption" style="text-align:left;">{Caption}</span>
{/block:ifShowCaptions}
{block:ifnotShowCaptions}
{block:PermalinkPage}<span class="caption" style="text-align:left;">{Caption}</span> {/block:PermalinkPage}
{/block:ifnotShowCaptions}
{/block:Caption}
{/block:Photoset}



<!---QUOTES--->

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



<!---LINKS--->

{block:Link}
<h1><a href="{URL}" {Target}>{Name}</a></h1>
{block:Description}
<div style="padding-left:5px;padding-right:5px;text-align:left;">{Description}</div>
{/block:Description}
{/block:Link}



<!---CHAT--->

{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
{block:Lines}
<div id="chat">
{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
</div>
{/block:Lines}
{/block:Chat}



<!---AUDIO--->

{block:Audio}
{block:AlbumArt}
<div id="songimg"><img src="{AlbumArtURL}"/></div>
{/block:AlbumArt}
<div id="playbtn"><div id="play">{AudioPlayerWhite}</div></div>
<div id="songinfo">
<div id="songtitle">{block:TrackName}{TrackName}{/block:TrackName}</div>
{block:Artist}{Artist}{/block:Artist}
</div>
{block:ifShowCaptions}
<span class="caption">{Caption}</span>
{/block:ifShowCaptions}
{block:ifnotShowCaptions}
{block:PermalinkPage}<span class="caption">{Caption}</span> {/block:PermalinkPage}
{/block:ifnotShowCaptions}
{/block:Audio}



<!---VIDEO--->

{block:Video}
{Video-400}
{block:Caption}
{block:ifShowCaptions}
<span class="caption" style="text-align:left;">{Caption}</span>
{/block:ifShowCaptions}
{block:ifnotShowCaptions}
{block:PermalinkPage}<span class="caption" style="text-align:left;">{Caption}</span> {/block:PermalinkPage}
{/block:ifnotShowCaptions}
{/block:Caption}
{/block:Video}



<!---ANSWERS--->

{block:Answer}
<div id="asker"><a href="{askerURL}">{askername}:</a> {Question}</div>
<div style="text-align:left;">{Answer}</div>
{/block:Answer}




<!---POST INFO--->
<div id="info">

{block:PermalinkPage}
<div style="text-align:left; background:#f9f9f9; padding:5px;">
{/block:PermalinkPage}

<!---DATE--->
{block:Date}
<b><a href="{Permalink}" title="{TimeAgo}"> {DayOfMonth} {ShortMonth}</a></b>
{/block:Date}

<!---NOTE COUNT--->
{block:NoteCount}
&nbsp;&nbsp;&nbsp;<a href="{Permalink}" {block:PermalinkPage} title="{NoteCountWithLabel}" {/block:PermalinkPage}>{block:PermalinkPage} {NoteCount} {/block:PermalinkPage} {block:IndexPage} {NoteCountWithLabel} {/block:IndexPage}</a>
{/block:NoteCount}

{block:PermalinkPage}
<div style="float:right;">
<!---VIA--->
{block:RebloggedFrom}
<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> /
{/block:RebloggedFrom}

<!---SOURCE--->
{block:ContentSource}
<a href="{SourceURL}" title="{SourceTitle}">src</a> /
{/block:ContentSource}

<!---REBLOG--->
<a href="{ReblogURL}">reblog</a></div></div>
{/block:PermalinkPage}

</div>

<!---END POST INFO--->




<!---TAGS--->
<div id="tags">
{block:HasTags}
{block:Tags}
<a href="{TagURL}">#{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div>





</div>
{/block:Posts}





<!---NOTES--->

{block:PermalinkPage}
{block:PostNotes}
    <div class="note">{PostNotes}</div>
{/block:PostNotes}
{/block:permalinkpage}

</div></div>





<div id="cred">

<a href="http://armyofghosts.tumblr.com/" title="armyofghosts">AG</a>

</div>





</body>



<div id="02" class="popup_block">

<div class="heading">{text:Ask Title}<a class="close" href="#" style="float: right; font-size: 13px; color: #000;" title="close">✖</a></div>
<iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/{text:URL}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
</div>



</html>