Reflection

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


        <!--theme REFLECTION by iristhms-->
        <!-- please do not copy or remove credit! -->


<!--variables-->
<meta name="color:background" content="#ffffff"/>
<meta name="color:post background" content="#fafafa">
<meta name="color:header background" content="#fafafa">
<meta name="color:header links" content="#a9a9a9">
<meta name="color:profile background" content="#e2ecf5">
<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:profile" content=""/>

<meta name="select:post width" content="250px"/>
<meta name="select:post width" content="300px"/>
<meta name="select:post width" content="350px"/>
<meta name="select:post width" content="400px"/>
<meta name="select:post width" content="450px"/>


<meta name="if:hide captions" content="1" />
<meta name="if:hide tags" content="1" />
<meta name="if:show more links" content="1" />

<meta name="text:ask title" content="Contact">
<meta name="text:archive title" content="Archive">

<meta name="text:link 4 url" content=" ">
<meta name="text:link 4 title" content="Navigate">
<meta name="text:more link 1 title" content="link">
<meta name="text:more link 1 url" content=" ">
<meta name="text:more link 2 title" content="link">
<meta name="text:more link 2 url" content=" ">
<meta name="text:more link 3 title" content="link">
<meta name="text:more link 3 url" content=" ">





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

<link href='https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<!-- 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 src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.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:7px solid {color:scrollbar bg};
    background-color:{color:scroll};
}

/* basics */

body{
    background:{color:background};
    color:{color:text};
    font-family:'karla',sans-serif;
    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};
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
    text-decoration:none;
}

a:hover {
    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 {
    position:absolute;
    background:{color:header background};
    width:360px;
    height:140px;
    left:50%;
    transform: translate(-50%, 0%);
    top:50px;


}
.profile {
    width:60px;
    position:relative;
    left:40px;
    margin-top:20px;
    opacity:1;
}

.profile img {
    position:relative;
    width:50px;
    -webkit-border-radius: 50px;
    opacity:1;
    background:{color:profile background};

}

.title {

    letter-spacing:1px;
    margin-left:15px;
    font-size:14px;
    text-transform:uppercase;
    font-weight:bold;
    width:100px;
    text-align:center;
    color:{color:title};
    bottom:35px;
    position:absolute;
}

.links {
    position:absolute;
    width:210px;
    height:10px;
    text-align:center;
    margin-top:-45px;
    margin-left:115px;
    color:{color:header links};
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:1px;
    opacity:1;
    border-top:1px solid #eeeeee;
    padding-top:10px;
    cursor:pointer;
}

.links a {
    color:{color:header links};
}

.links a:hover{
    color:{color:links hover};
    cursor:pointer;
}


.navigate{
    background:none;
    border:none;
    padding:none;
    outline:none;
    color:{color:header links};
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:1px;
    opacity:1;
    font-family:'karla',sans-serif;
    -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;
}

.navigate:hover{
    color:{color:links hover};
    cursor:pointer;

}



#morelinks{
    display:none;
    {block:ifshowmorelinks}
    position:absolute;
    width:210px;
    height:10px;
    text-align:center;
    margin-top:-35px;
    margin-left:115px;
    color:{color:header links};
    font-style:italic;
    text-transform:uppercase;
    font-size:8px;
    letter-spacing:1px;
    padding-top:10px;
    {/block:ifshowmorelinks}

}

.description {
    position:absolute;
    width:180px;
    margin-left:145px;
    text-align:right;
    margin-top:-10px;
    color:{color:description};
    font-family:'karla',sans-serif;

}



/* posts */

.container {
    width:{select:post width};
    position:absolute;
    left:50%;
    transform: translate(-50%, 0%);
    padding-right:30px;
    margin-bottom:120px;
}

.posts{

  width:{select:post width};
   padding:15px;
    background:{color:post background};
    margin-top:100px;
}


.posts img, .posts li {
    max-width: 100%;
}

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

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


 /* audio */

.button {
    position:relative;
    width:50px;
    height:50px;
    background-color:#fff;
    margin-left:0px;
}

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

.tumblr_audio_player {
    margin-top:5px;
    height:50px;
    width:50px;
    margin-left:-2px;
    overflow:hidden;
}

.playerbg {
    position:absolute;
    width:33px;
    height:35px;
    background:transparent;
    padding:10px;
    margin-left:0px;
}


.trackdetails {
    width:calc({select:post width} - 50px);
    display:inline-block;
    margin-left:80px;
    margin-top:10px;
    font-size:10px;
    letter-spacing:1px;
    text-transform:lowercase;
    padding:5px;
    line-height:15px;
}

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


/* questions */

.question {
    background:#fff;
    padding:10px;

}

.asker {
    text-transform:uppercase;
}

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


/* chat */

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

.line.odd {
    background:#fafafa;
    padding:5px;
    border-bottom:none;
    list-style:none;
    font-size:10px;
    margin-left:0px;
    width:calc({select:post width} - 10px);

}

.line.even {
    background:#ffffff;
    padding:5px;
    border-bottom:none;
    margin-left:0px;
    list-style:none;
    font-size:10px;
    width:calc({select:post width} - 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;
}


/* link post */

.link {
    letter-spacing:1px;
    font-style:italic;
}


/* permalink and tags */


.permalink {
    font-weight:none;
    position:absolute;
    display:block;
    margin-left:calc({select:post width} + 20px);
    text-transform:uppercase;
    font-size:8.5px;
    text-align:center;
    letter-spacing:1px;
    width:120px;
    padding:10px;
}

.tags{
    margin-top:15px;
    position:relative;
    text-transform:lowercase;
    font-size:8px;
    text-align:center;
    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}

}


.tags a{
    border:0px;
}

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


/* notes */

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

 li.note {
   width:calc({select:post width} - 30px);
    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:10px;
    text-align:left;
    letter-spacing:1px;
    padding-top:50px;
    margin-left:12px;
    position:relative;
    letter-spacing:2px;
    font-style:italic

}

a.extra { cursor:help; }
.hide { display:none;margin-top:5px;color:#bebcbc;}



/* credit */
.credit{
    position:fixed;
    bottom:10px;
    right:10px;
    font-weight:bold;
}

</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="credit">
        <a href="http://iristhms.tumblr.com" title="theme">i</a>
    </div>

    <div class="header">
        <div class="profile"><a href="/"><img src={image:profile}></a></div>
    <div class="links">
        <a href="/">home</a>
        &nbsp&nbsp
        <a href="/ask">{text:ask title}</a>
        &nbsp&nbsp
        <a href="/archive">archive</a>&nbsp&nbsp&nbsp
        {block:ifnotshowmorelinks}<a href="{text:link 4 url}">{text:link 4 title}</a>{/block:ifnotshowmorelinks}
        {block:ifshowmorelinks}<button class="navigate" span style="cursor:pointer" >navigate</button>{/block:ifshowmorelinks}
</div><p>
        <div id="morelinks">
            <a href="{text:more link 1 url}">{text:more link 1 title}</a>&nbsp&nbsp&nbsp&nbsp
            <a href="{text:more link 2 url}">{text:more link 2 title}</a>&nbsp&nbsp&nbsp&nbsp
            <a href="{text:more link 3 url}">{text:more link 3 title}</a>
</div><br>
        <div class="description">{description}</div>
        <div class="title">{Title}</div>






    {block:Posts}
    <div class="container">
    <div class="posts">
    <div class="permalink">
        {block:Date}<b>
        <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumber}/{ShortYear}</a>
        {/block:Date}</b>
        <br>
        <a href="{Permalink}">{NoteCount} NOTES</a>
        <br>

        {block:RebloggedFrom}
        <a href="{ReblogParentURL}" title="{ReblogParenttitle}"><i class="fa fa-reply" aria-hidden="true"></i> </a>&nbsp &nbsp
        {block:ContentSource}
        <a href="{ReblogRootURL}" "{ReblogRootName}" title="{ReblogRoottitle}"> <i class="fa fa-reply-all" aria-hidden="true"></i> </a>&nbsp &nbsp
        {/block:ContentSource}
        {/block:RebloggedFrom}
        <a href="{ReblogURL}" target="_blank" class="details"> <i class="fa fa-refresh" aria-hidden="true"></i></a>

        {block:HasTags}
        <div class="tags">
        {block:Tags}
        <a href="{TagURL}">&nbsp&nbsp&nbsp#{Tag}</a>
        {/block:Tags}
        </div>
        {/block:HasTags}
        </div>

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


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

    {block:Photo}
    <div class="photo">
    <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>
    {block:Caption}
    <div class="caption">{Caption}</div>
    {/block:Caption}
    </div>
    {/block:Photo}

    {block: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>{Title}</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="tumblr_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="topline"></div>

   </div>

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

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


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






<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#morelinks").toggle();
    });
});
</script>

    </body>
</html>