03 aphelion theme

<!DOCTYPE html>
<html>
<head>

<!--

03 aphelion theme by miyoong
please don't remove/move the credits
i'd be happy to entertain theme help!
-->

<meta name="color:background" content="#fff"/>
<meta name="color:text" content="#aaa"/>
<meta name="color:link" content="#aaa"/>
<meta name="color:blog title" content="#000"/>
<meta name="color:navigation" content="#aaa"/>
<meta name="color:permalink" content="#aaa"/>
<meta name="color:post bg" content="#fff"/>
<meta name="color:perma bg" content="#fff"/>
<meta name="color:navi borders" content="#eee"/>
<meta name="color:sidebar borders" content="#eee"/>
<meta name="color:border" content="#ccc"/>
<meta name="color:header" content="#fff"/>
<meta name="color:header txt" content="#aaa"/>
<meta name="color:hover" content="#eee"/>
<meta name="color:selection" content="#aaa"/>
<meta name="color:scrollbar" content="#aaa"/>

<meta name="image:background" content=""/>
<meta name="image:sidebar" content=""/>

<meta name="if:header" content="1"/>
<meta name="if:infinite scroll" content="1"/>
<meta name="if:3 columns" content="1"/>
<meta name="if:fade posts" content="1"/>
<meta name="if:sidebar img border" content="1"/>
<meta name="if:round sidebar img" content="1"/>

<meta name="text:header" content=""/>
<meta name="text:link 1" content=""/>
<meta name="text:link 1 url" content=""/>
<meta name="text:link 2" content=""/>
<meta name="text:link 2 url" content=""/>
<meta name="text:link 3" content=""/>
<meta name="text:link 3 url" content=""/>
<meta name="text:link 4" content=""/>
<meta name="text:link 4 url" content=""/>
<meta name="text:link 5" content=""/>
<meta name="text:link 5 url" content=""/>
<meta name="text:link 6" content=""/>
<meta name="text:link 6 url" content=""/>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />

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

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

<style type="text/css">

#s-m-t-tooltip{
position:absolute;
margin-top: 15px;
z-index:9999;
background:{color:background};
border:1px solid #ccc;
font-size:9px;
padding:3px;
color:#aaa;
}

::selection {
background:#fff;
color:{color:selection};

}


#content {
margin-left:10%;
margin-top:60px;
width: 700px;
{block:if3columns}
width:1000px;
{/block:if3columns}



}

body {
background-color: {color:background};
background-image: url({image:background});
background-attachment:fixed;background-repeat:repeat;
background-position:center;
font-family: arial;
font-size: 11px;
color: {color:text};
}

a {
color: {color:link};
text-decoration:none; -webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}

a:hover{
   color: {color:hover}; -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

blockquote {
padding-left:8px;
border-left:2px solid;
color: {color:text};
margin-left:5px;
margin-bottom:5px;
}

iframe, img, embed, object, video {
max-width: 100%;  {block:iffadeposts}opacity:0.7;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;
}
{/block:iffadeposts}
}

img {
height: auto;
width: auto;
{block:iffadeposts}
opacity:0.7;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;{/block:iffadeposts}
}

{block:ifheader}

#bangtan{
    margin-left:10%;
    width:555px;
    top:0;
    opacity:0.8;
    z-index:100;
    background:{color:header};
    color:{color:header txt};
    padding:15px;
    text-align:center;
    font-size:15px;
    position:fixed;
    {block:IndexPage}
    width:555px;
    {block:if3columns}
    width:874px;
    {/block:if3columns}
    {/block:IndexPage}
    {block:PermalinkPage}
    width:505px;
    {/block:PermalinkPage}
}
{/block:ifheader}


#sidebar {text-align:left;
position:fixed;
{block:IndexPage}
margin-left:795px;
{block:if3columns}
margin-left:1075px;
{/block:if3columns}
{/block:IndexPage}
{block:PermalinkPage}
margin-left:795px;
{/block:PermalinkPage}
z-index:1;
margin-top:100px;
width:165px;
background:transparent;
padding:15px;


}


#sidebarim {margin-bottom:10px;text-align:left;}

#sidebarim img {
width:65px;height:65px;
{block:ifsidebarimgborder}
border:1px solid {color:sidebar borders};
{/block:ifsidebarimgborder}
-moz-border-radius:45px 5px 55px 55px;
-webkit-border-radius:45px 55px 0px 55px;
border-radius:15px 15px 15px 15px;
{block:ifroundsidebarimg}
border-radius:100%;
{/block:ifroundsidebarimg}
padding:3px;opacity:0.7; -moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;

}


#blogt {font-size:18px;background:transparent;;padding-left:6px;
font-weight:bold;border-left:3px solid {color:sidebar borders};}

#blogt a{color:{color:blog title};
}

#blogt a:hover{
    letter-spacing:4px;
}

#syuga {
line-height:16px;
text-transform:lowercase;
}


#syuga a {
margin-right:5px;
display:inline-block;
margin-bottom:5px;
color:{color:navigation};
border-bottom:1px dotted {color:navi borders};
}

#syuga a:hover{
color:{color:blog title};
letter-spacing:3px;
}

#description {
margin-top:10px;
margin-bottom:10px;


}

#title {
font-size:18px;
line-height:18px;
font-weight:bold;
margin-bottom:10px;
text-transform:uppercase;
text-align:left;}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(0.871) skew(0deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(0.871) skew(0deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(0.871) skew(0deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}
article {
background: {color:post bg};
margin: 20px;
margin-left:5px;
margin-bottom:8px;
padding: 12px;
width: 250px;
{block:PermalinkPage}
width:500px;{/block:PermalinkPage}
border: 1px solid {color:border};  -webkit-animation: cssAnimation 1s 1 ease-in-out;
-moz-animation: cssAnimation 1s 1 ease-in-out;
-o-animation: cssAnimation 1s 1 ease-in-out;
}

.chat span {
margin-left:0px;

}

.chat ol {
padding:0;
list-style:none;
}
.line {padding:5px 0;}

.label {font-weight:bold;
}
#permalink {
width:100%;text-align:left;margin-top:20px;margin-bottom:20px;opacity:1;{block:IndexPage}padding-left:8px;border-left:1px solid {color:navigation};{/block:IndexPage}
-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}

#permalink:hover{
   {block:IndexPage}padding-left:20px;{/block:IndexPage}
}


#permalink a{
    border:none;color:{color:permalink};
}

#permalink a:hover {color:#000000;
}

 #perma{
    {block:PermalinkPage}
    display:none;
    {/block:PermalinkPage}
    position:absolute;
    top:10px;
    right:10px;
    background-color:{color:perma bg};
    opacity:0;
    padding:5px;
    width:auto;
    height:auto;
     -webkit-transform: scale(0);
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    text-align:right;
    z-index:1000;
}

#perma a{
font-size:11px;z-index:1;
color:{color:permalink};
}

#perma a:hover{
    color:#000;
}

article:hover #perma{
    margin-left:10px;
    opacity:1;
     -webkit-transform: scale(1);
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}

.tumblr_audio_player {
width: 250px;
height: 100px;
overflow: hidden;
position: relative;
z-index: 1000;
}

{block:ifnotinfinitescroll}
.pagi {
text-transform:lowercase;
font-weight:bold;
bottom:10px;
position:fixed;
right:10%;
}

.pagi a {
padding:8px;
color:{color:pagination};

}
{/block:ifnotinfinitescroll}

{block:ifinfinitescroll}
.pagi {
display:none;
}
{/block:ifinfinitescroll}
.pagenotes {
{block:IndexPage}
display: none!important;
{/block:IndexPage}
width:500px;
}
.pagenotes img {
display:none!important;}
.pagenotes li {
list-style-type:none;
padding:5px 0px;
text-align:left;
margin:0 0 0 -40px;

}

.bubble {
align:right;
background: #f6f6f6;
margin:7px 0px 25px 66px;
padding:10px;
position:relative;
-moz-border-radius:5px;-webkit-border-radius:5px;
border-radius:5px;

}

.bubble p {margin:1px 0px;}

.bubble span {
display:block;position:absolute;width:1px;height:1px;font-size: 0;line-height: 1px;left:-10px;top:10px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid #f6f6f6;

}

.askborder {
float: left;margin: 1px 5px 0 0;padding: 2px; background: {color:border};

}

::-webkit-scrollbar-thumb:vertical {
background-color: {color:scrollbar};
height: 50px;

}
::-webkit-scrollbar {
height: 0px;
width: 5px;
background-color: {color:background};
}

</style>
</head>
<body>

<title>{Title}</title>
{block:ifheader}<div id="bangtan"><font size="3px">❝ </font> {text:header} <font size="3px">❞</font></div>{/block:ifheader}
<div id="sidebar">
<div id="sidebarim"><img src="{image:sidebar}"></div>
<div id="blogt"><a href="/">{Title}</a></div>
<div id="description">{Description}</div>
<div id="syuga">
    <a href="{text:link 1 url}">{text:link 1}</a>&nbsp;&nbsp;
    <a href="{text:link 2 url}">{text:link 2}</a>&nbsp;&nbsp;
    <a href="{text:link 3 url}">{text:link 3}</a>&nbsp;&nbsp;
    <a href="{text:link 4 url}">{text:link 4}</a>&nbsp;&nbsp;
    <a href="{text:link 5 url}">{text:link 5}</a>&nbsp;&nbsp;
    <a href="{text:link 6 url}">{text:link 6}</a>
</div>
  </div>


{block:Pagination}
<div class="pagination">
<div class="pagi">

{block:PreviousPage}
<a href="{PreviousPage}">←</a>
{/block:PreviousPage}

{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current_page">{PageNumber}</span>
{/block:CurrentPage}

{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}">→ </a>
{/block:NextPage}


</div></div>
{/block:Pagination}
</div>


<div id="content">
{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}
<article>
{block:Text}
<div class="text">
{block:Title}<div id="title">
<a href="{Permalink}">{Title}</a>
</h1>{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<div class="photo">
{block:IndexPage}
{LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}" />{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{/block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="photoset">
{block:IndexPage}
{Photoset-250}
{/block:IndexPage}
{block:PermalinkPage}
{Photoset-500}
{/block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

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

{block:Link}
<div class="link">
<h1 class="title"><a href="{URL}">{Name}</a></h1>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
<div class="chat">
<ul>
<ol>{block:Lines}
<li class="line {Alt}">
{block:Label}
<span class="label">
{Label}</span>
{/block:Label}{Line}</li>
{/block:Lines}
</ol>
</ul>
{/block:Chat}

{block:Audio}
<div class="audio">
{block:AlbumArt}
<img src="{AlbumArtURL}" width="100px" height="100px"/>
{/block:AlbumArt}
{AudioPlayerWhite}
{block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}<br><br>
{block:TrackName}<b>track:</b> {TrackName}{/block:TrackName}</span><br>
{block:Artist}<b>artist:</b> {Artist}{/block:Artist}
{block:Caption}{Caption}{/block:Caption}

{/block:Audio}

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

{block:Answer}<img src="{AskerPortraitURL-40}" align="left" class="askborder"><div class="bubble"><span></span>{Asker} whispered: {Question}&nbsp;</div>{Answer}{/block:Answer}

<div id="perma">
<a href="{Permalink}" style="font-weight:bold;font-size:13px;color:{color:navigation}">
{Month} {DayOfMonthWithZero}</a><br>
<a href="{ReblogURL}" >reblog?</a> <br>
{block:Date}
</div>
{block:PermalinkPage}
<div id="permalink"><a href="{Permalink}" >{12Hour}:{Minutes} {AmPm}</a>{block:NoteCount}&nbsp; | &nbsp;<a href="{Permalink}">+ {NoteCountWithLabel}</a>{/block:NoteCount}&nbsp; | &nbsp;{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}&nbsp; | &nbsp;<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}{/block:RebloggedFrom}<div id="tags">tagged as:{block:Tags}<a href="{TagUrl}"> #{Tag} </a>&nbsp;&nbsp;{/block:Tags}</div></div>
{/block:PermalinkPage}
{/block:Date}
{block:PostNotes}
<div class="pagenotes">
{PostNotes}
</div>
{/block:PostNotes}

</footer>
</article>
{/block:Posts}
</div>

<!-- heres the stuff that will make your multicolumn theme look nice, so messing around with it shouldnt be necessary!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
{block:IfInfiniteScroll}
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
{/block:IfInfiniteScroll}

<script>
(function() {
    var $tumblelog = $('#content');
    {block:IfInfiniteScroll}
    $tumblelog.infinitescroll({
        navSelector  : ".pagination",
        nextSelector : ".pagination a:first",
        itemSelector : "article",
        bufferPx     : 50,
        done : "",
        loading: {
            img : "",
            msgText: ""
        },
    },
      function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $tumblelog.masonry( 'appended', $newElems);
            });
          }
    );
    {/block:IfInfiniteScroll}
    $tumblelog.imagesLoaded( function(){
      $tumblelog.masonry({
        columnWidth: function( containerWidth ) {
            return containerWidth / 100;
          }
      });
    });
})();
</script>
<!-- do not move or remove credit , thank youu :) -->
<a href="http://taehyung.sne.jp" style="bottom:0px;left:5px;position:fixed;padding-bottom:3px;" title="code by miyoong">❤</a>
</body>
</html>