Angel

<!DOCTYPE html>
<html>
    <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}

       <!--angel by iristhms@tumblr-->
       <!--do not remove credit!-->

<!--variables-->
<meta name="color:background" content="#ffffff"/>
<meta name="color:header color" content="#E8E8E8">
<meta name="color:navigation" content="#000"/>
<meta name="color:navigation hover" content="#000"/>
<meta name="color:border" content="#eee"/>
<meta name="color:text" content="#333333"/>
<meta name="color:title" content="#333333"/>
<meta name="color:description" content="#333333"/>
<meta name="color:links" content="#5b5b5b"/>
<meta name="color:links hover" content="#c9c9c9"/>
<meta name="color:scrollbar bg" content="#ffffff"/>
<meta name="color:scroll" content="#CFCFCF">

<meta name="image:header image" content=""/>

<meta name="text:archive title" content="archive">
<meta name="text:link 1 title" content="link">
<meta name="text:link 1 url" content=" ">
<meta name="text:link 2 title" content="link">
<meta name="text:link 2 url" content=" ">
<meta name="text:link 3 title" content="link">
<meta name="text:link 3 url" content=" ">

<meta name="if:square icon to round" content="1" />
<meta name="if:round icon to square" content="0" />
<meta name="if:show link 1" content="1" />
<meta name="if:show link 2" content="1" />
<meta name="if:show link 3" content="1" />
<meta name="if:rounded edges" content="1" />
<meta name="if:250px" content="1" />
<meta name="if:300px" content="0" />
<meta name="if:400px" content="0" />
<meta name="if:Hide Captions" content="0" />
<meta name="if:hover tags" content="1" />
<meta name="if:hide tags" content="0" />

<!-- tooltips script -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:200,
tip_fade_speed:300
});
});
})(jQuery);
</script>

<style type="text/css">
/* tooltips */

#s-m-t-tooltip {
    max-width:300px;
    padding:5px;
    padding-top:3px;
    padding-bottom:3px;
    margin:5px 0px 0px 10px;
    background-color:#fff;
    font-family:{select:font};
    font-size:8px;
    font-weight:normal;
    letter-spacing:1px;
    line-height:8px;
    text-transform:uppercase;
    color:{color:text};
    z-index:2147483647;
}
/* tumblr lightbox */

.vignette{
    opacity:0;
}

.lightbox-image {
    -moz-box-shadow:none!important;
    -webkit-box-shadow:none!important;
    box-shadow:none!important;
    -moz-border-radius:0px!important;
    -webkit-border-radius:0px!important;
    border-radius:0px!important;
    padding:0px!important;
    margin:0px!important;
    border:0!important;
    opacity:1!important;
}

.tmblr-lightbox {
    background-color:rgba(250,250,250,.95) !important;
}

.tmblr-lightbox img {opacity:0;}
}

.lightbox-caption{
    visibility:hidden;
}

/* tumblr controls */

.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
    z-index:99999!important;
    top:10px!important;
    right:10px!important;
    position:fixed!important;
    opacity:0.3!important;
}
/* Scrollbar */

::-webkit-scrollbar {
    width:15px;
    height:17px;
}
::-webkit-scrollbar {
    background-color:{color:scrollbar bg};
}
::-webkit-scrollbar-track {
    border:7px solid {color:scrollbar bg};
    background-color:{color:Scrollbar bg};
}
::-webkit-scrollbar-thumb {
    border:6px solid {color:scrollbar bg};
    background-color:{color:scroll};
}

/* basics */

body{
    background:{color:background};
    color:{color:text};
    font-family:'trebuchet ms';
    line-height:15px;
    font-size:10px;
    margin:0;
    text-align:left;
}
blockquote {
    padding-left:10px;
    border-left:1px solid;
    margin:10px;
    text-align:left;
}

a {
    color:{color:links};
    text-decoration:none;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}

a:hover {
    text-decoration:none;
    color:{color:links hover};

}

img {
    opacity:1;
    text-decoration:none;

}
h1 {
    font-size:11px;
    font-weight:normal;
}

h2 {
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;
}

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

/* header */

.header{
    {block:if250px}
    width:250px;
    {/block:if250px}
    {block:if300px}
    width:300px;
    {/block:if300px}
    {block:if400px}
    width:400px;
    {/block:if400px}
    height:70px;
    left:0%;
    margin:40px auto 0px auto;
    position:relative;


}

.title{
    letter-spacing:1px;
    font-size:13px;
    text-transform:uppercase;
    opacity:0;
    position:relative;
    margin-left:70px;
    color:{color:title};
    {block:if250px}
    width:250px;
    {/block:if250px}
    {block:if300px}
    width:300px;
    {/block:if300px}
    {block:if400px}
    width:400px;
    {/block:if400px}
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.header:hover .title{
    opacity:1;
}
.image {
    width:50px;
    height:50px;
    position:absolute;
    margin-top:0px;
    {block:if250px}
    margin-left:100px;
    {/block:if250px}
    {block:if300px}
    margin-left:125px;
    {/block:if300px}
    {block:if400px}
    margin-left:175px;
    {/block:if400px}
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;

}

.image img{
    background-color:{color:header color};
    {block:ifsquareicontoround}
    display:block;
    width:50px;
    height:50px;
    position:absolute;
    margin-top:0px;
    {/block:ifsquareicontoround}
    {block:ifroundicontosquare}
    display:block;
    width:50px;
    height:50px;
    position:absolute;
    border-radius:50px;
    margin-top:0px;
    {/block:ifroundicontosquare}
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}


.header:hover .image img{
    {block:ifsquareicontoround}
    border-radius:50px;
    {/block:ifsquareicontoround}
    {block:ifroundicontosquare}
    margin-right:10px;
    border-radius:0px;
    {/block:ifroundicontosquare}
}

.header:hover .image{
    margin-left:0px;
    {block:ifsquareicontoround}
    border-right:1px solid {color:border};
    {/block:ifsquareicontoround}
    {block:ifroundicontosquare}
    border-right:1px solid {color:border};
    {/block:ifroundicontosquare}
    padding-right:10px;
}

.description{
    color:{color:description};
    opacity:0;
    position:relative;
    padding-top:3px;
    margin-left:70px;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;

}

.header:hover .description{
    opacity:1;
}

nav {
    opacity:0;
    padding-top:3px;
    margin-left:70px;
    position:relative;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;

}
navi a i{vertical-align:top;}

}

nav a:hover{
    color:{color:navigation hover};
    display:inline-block;
}

nav a{
    color:{color:navigation};
}
.header:hover nav {
    opacity:1;
}

/* posts */

.container {
    left:50%;
    {block:if250px}
    width:250px;
    {/block:if250px}
    {block:if300px}
    width:300px;
    {/block:if300px}
    {block:if400px}
    width:400px;
    {/block:if400px}
    margin:0px auto 100px auto;

}

.posts{
    {block:IndexPage}
    margin-bottom
    {/block:IndexPage}
    {block:PermalinkPage}
     margin-bottom:20px;
    {/block:PermalinkPage}
    {block:if250px}
    width:250px;
    {/block:if250px}
    {block:if300px}
    width:300px;
    {/block:if300px}
    {block:if400px}
    width:400px;
    {/block:if400px}
    padding-top:65px;
    position:relative;
}


.posts img, .posts li {
    max-width: 100%;
    {block:ifroundededges}
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    {/block:ifroundededges}
}

.posts blockquote{
    max-width:100%;
}

.caption {
    margin-top:15px;
    {block:ifhidecaptions}
    {block:indexpage}
    display:none;
    {/block:indexpage}
    {/block:ifhidecaptions}
}

/* audio */

.button {
    position:relative;
    {block:if250px}
    width:230px;
    {/block:if250px}
    {block:if300px}
    width:280px;
    {/block:if300px}
    {block:if400px}
    width:380px;
    {/block:if400px}
    height:33px;
    overflow:hidden;
    background-color:#fff;
    border:1px solid #f3f3f3;
    {block:ifroundededges}
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    {/block:ifroundededges}
}

.hug {
    position: absolute;
    top:-7px;
    left:2px;
}

.tumblr_audio_player {
    height:50px;
    width:500px;

}

.playerbg {
    position:absolute;
    {block:if250px}
    width:230px;
    {/block:if250px}
    {block:if300px}
    width:280px;
    {/block:if300px}
    {block:if400px}
    width:380px;
    {/block:if400px}
    height:35px;
    background:transparent;
    padding:10px;

}


.trackdetails {
    width:200px;
    display:inline-block;
    margin-left:0px;
    margin-top:60px;
    font-size:10px;
    letter-spacing:1px;
    text-transform:lowercase;
    padding:5px;
    line-height:15px;
}

.audiowrapper {
    position:relative;
    display:inline-block;
}

/* photoset */

.photoset{
     {block:ifroundededges}
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    {/block:ifroundededges}
}

/* questions */

.question {
    background:#fafafa;
    padding:10px;
    {block:ifroundededges}
    -webkit-border-radius: 10px;
    {/block:ifroundededges}
}

.asker {
    text-transform:uppercase;
}

.answer {
    padding:10px;
    margin-top:-15px;
}

/* chat */

.chat {
    line-height:20px;
    list-style:none;
}

.line.odd {
    background:#fafafa;
    margin-bottom:2px;
    padding:5px;
    list-style:none;
    font-size:10px;
}

.line.even {
    background:#ffffff;
    margin-bottom:2px;
    padding:5px;
    list-style:none;
    font-size:10px;
}

.label {
    font-weight:bold;
    color:{color:links};
}

/* quotes */

.quote {
    text-transform:none;
    font-size:12px;
    font-weight:bold;
    text-align:left;
}

.quotesource {
    text-align:left;
    letter-spacing:1px;
    font-size:8px;
    margin-top:10px;
}

.quotesource a{
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:1.5px;
}

.quotepermalink {

    padding-top:10px;
    position:relative;
    text-transform:uppercase;
    font-weight:none;
    font-size:8.5px;
    letter-spacing:1px;
}

/* videos */

.video {
    {block:ifroundededges}
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    {/block:ifroundededges}
}

/* permalink and tags */

.permalink {

    border-top:1px solid {color:border};
    padding-top:10px;
    margin-top:15px;
    position:relative;
    text-transform:uppercase;
    font-size:8.5px;
    letter-spacing:1px;
}

.tags {
    margin-top:15px;
    position:relative;
    text-transform:lowercase;
    font-size:8px;
    text-align:right;
    letter-spacing:1px;
    opacity:1;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    {block:indexpage}
    {block:ifhidetags}
    display:none;
    {/block:ifhidetags}
    {/block:indexpage}
    {block:indexpage}
    {block:ifhovertags}
    opacity:0;
    {/block:ifhovertags}
    {/block:indexpage}



}

.posts:hover .tags{
    {block:indexpage}
    {block:ifhovertags}
    opacity:1;
    {/block:ifhovertags}
    {/block:indexpage}
}

.tags a{
    border:0px;
    color:{color:text};
}

.tags a:hover {
     display:inline-block;
     color:{color:links hover};
}

/* notes */

ol.notes {
    height:204px;
    overflow:auto;
    padding:0px;
    margin:15px 0px;
    font-size;10px
    list-style-type:none;
    text-align:left;
    }

 li.note {
    {block:if250px}
    width:224px;
    {/block:if250px}
    {block:if400px}
    width:374px;
    {/block:if400px}
    {block:if500px}
    width:474px;
    {/block:if500px}
    padding:5px 8px;
    margin:0px 5px 4px 0px;
    background:{color:NoteBackground};
    color:{color:NoteText};
    font-family:calibri, arial, sans-serif;
    font-size:8px;
    text-transform:uppercase;
    line-height:10px;
    letter-spacing:1px;
    }

ol.notes li.note {
    padding:10px;
}

ol.notes li.note img.avatar {
    vertical-align:-4px;
    margin-right:10px;
    width:16px;
    height:16px;
}

ol.notes li.note span.action {
    font-weight:none;
}

ol.notes li.note .answer_content {
    font-weight:normal;
}

ol.notes li.note blockquote {
    padding:4px 10px;
    margin:10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration:none;
}

img.avatar { display:none; }

/* pagination */

.pagination {
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:1px;
    border-top:1px solid {color:border};
    {block:if250px}
    width:250px;
    {/block:if250px}
    {block:if300px}
    width:300px;
    {/block:if300px}
    {block:if400px}
    width:400px;
    {/block:if400px}
    margin-top:50px;
    text-align:right;
    padding-top:10px;
}

/* credit */

.credit {
    font-size:8px;
    position:fixed;
    right:0px;
    font-weight:bold;
    bottom:5px;
    font-family:'trebuchet ms';
    right:15px;
    z-index:10;
    text-align:right;
    letter-spacing:1px;
    padding:2px;
}

.credit a {
    color:{color:links};
    text-decoration:none;
}

.credit a:hover {
    color:{color:links hover};
    text-decoration:none;
}

</style>




<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>

    </head>
    <body>
    <div class="header">
    <div class="image"><img src="{image:header image}"></div>
    <div class="title">{Title}</div>

    <div class="description">{description}</div>

    <nav><a href="/">index</a>&nbsp&nbsp&nbsp</a><a href="/ask">ask</a>&nbsp&nbsp&nbsp<a href="/archive">{text:archive title}</a></nav>

    <nav><a href="{text:link 1 url}">{text:link 1 title}</a>&nbsp&nbsp&nbsp</a><a href="{text:link 2 url}">{text:link 2 title}</a>&nbsp&nbsp&nbsp<a href="{text:link 3 url}">{text:link 3 title}</a></nav>
    </div>

    <div class="container">
    {block:Posts}
     <!-- {block:NoRebloggedFrom}
    {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
    {/block:NoRebloggedFrom} -->
    {block:ContentSource}
    <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
    width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
    {/block:SourceLogo}
    {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
    {/block:ContentSource}

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

    {block:Photo}
    <div class="photo">
    <img src="{PhotoURL-highres}" alt="{PhotoAlt}"/>
    {block:Caption}
    <div class="caption">{Caption}</div>
    {/block:Caption}
    </div>
    {/block:Photo}

    {block:Photoset}
    <div class="post photoset">
    {Photoset}{block:Caption}
     <div class="caption">{Caption}</div>
    {/block:Caption}
    {/block:Photoset}

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

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

    {block:Chat}
    {block:Title}
    <h2><a href="{Permalink}">{Title}</a></h2>
    {/block:Title}
    <div class="chat">
    {block:lines}
    <li class="line {Alt}">
    {block:Label}
    <span class="label">{Label}</span>
    {/block:Label}
    {Line}
    </li>
    {/block:Lines}
    </div>
    {/block:Chat}



    {block:Video}
    <div class="video">
    {Video-500}{block:Caption}
    <div class="caption">{Caption}</div>
    {/block:Caption}
    {/block:Video}

    {block:Audio}
    {block:AudioPlayer}
    <div class="audiowrapper">
    <div class="playerbg">
    <div class="button">
    <div class="hug">
    <div class="audio_player" id="{PostID}">{AudioPlayerWhite}</div>
    </div></div></div>
    <div class="trackdetails">
    {block:TrackName}<b><div style="text-transform:uppercase">{TrackName}</b></div>{/block:TrackName}<br>
    {block:Artist}<div style="text-transform:uppercase">{Artist}</div>{/block:Artist}</div></div>
    {/block:AudioPlayer}
    <div class="caption">{Caption}</div>
    {/block:Caption}
    {/block:Audio}

    {block:Answer}
    <div class="question">
    <div class="asker"><b>{Asker} said:</b></div>
    {Question}</div><br>
    <div class="answer">
    {Answer}</div>
    {/block:Answer}

    <div class="permalink">
    {block:Date}
    <b><a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumber}/{ShortYear}</b></a>
    {/block:Date}
    &nbsp &nbsp &nbsp
    <a href="{Permalink}">{NoteCountWithLabel}</a>
    &nbsp &nbsp &nbsp
    {block:RebloggedFrom}
    <a href="{ReblogParentURL}" title="{ReblogParenttitle}">via |</a>
    {block:ContentSource}
    <a href="{ReblogRootURL}" "{ReblogRootName}" title="{ReblogRoottitle}"> src |</a>
    {/block:ContentSource}
    {/block:RebloggedFrom}
    <a href="{ReblogURL}" target="_blank" class="details"> reblog</a>
   {block:HasTags}
    <div class="tags">
    {block:Tags}
    <a href="{TagURL}">&nbsp&nbsp&nbsp#{Tag}</a>
    {/block:Tags}
    </div>
    {/block:HasTags}


</div></div>

    {block:PostNotes}
    {PostNotes}
    {/block:PostNotes}
    {/block:Posts}

    {block:Pagination}
    <div class="pagination">
    {block:PreviousPage}
    <a href="{PreviousPage}">back</a>{/block:PreviousPage}&nbsp;
    {block:NextPage}
    <a href="{NextPage}">next</a>
    {/block:NextPage}
    </div>
    {/block:Pagination}
    {block:indexpage}
    {/block:indexpage}

   <div class="credit">
    <a title="iristhms" href="http://iristhms.tumblr.com/" target="_blank">cr.</a></div>

    </div></div></div></div>

        </p>
        <script type="text/javascript">
$(function () {
    $(".audio_box").each(function () {
    	var d = $(this).attr("id"),
			e = $(this);
		$.ajax({
			url: "http://" + {Name} + ".tumblr.com/api/read/json?id=" + d,
			dataType: "jsonp",
			timeout: 5E4,
			success: function (d) {
				d = d.posts[0]["audio-player"].replace("FFFFFF", "F7F7F7");
				e.html('<div class="audio_player">' + d + "</div>")
			}
		})
	});
});
</script>
    </body>
</html>