Koi Theme

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

<!--KOI THEME BY RAMYEONS // http://ramyeons.tumblr.com / http://hobakjeon.tumblr.com

*DO NOT USE MY THEME CODES AS BASE CODES FOR YOUR OWN THEME
*DO NOT CLAIM AS YOUR OWN OR I WILL HUNT YOU DOWN
*DO NOT BREAK ANY RULES OR YOU WILL BE REPORTED
*YOU MAY EDIT THIS THEME, BUT LEAVE THE CREDITS ALONE
*DO NOT TAKE MY CREDITS OUT

-->


<head>


 <!--BASIC FLUFF-->
 <meta name="if:500px posts" content="1"/>
<meta name="if:400px posts" content="0"/>
<meta name="if:250px posts" content="0"/>
<meta name="if:infinite scrolling" content="1"/>
<meta name="if:cute cursor" content="1"/>
<meta name="if:extra links" content="1"/>



<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=""/>

<meta name="image:sidebar pic" content="http://static.tumblr.com/iuggpng/HR8m3w7fx/koiside.jpg"/>
<meta name="image:background pic" content="http://static.tumblr.com/iuggpng/S08m3w7gy/dotsie.jpg"/>
<meta name="image:nav bg" content="http://static.tumblr.com/iuggpng/CPMm3w7gl/stripedgray.png"/>


<meta name="color:scrollbar" content="#aaa"/>
<meta name="color:scrollbar bg" content="#eee"/>
<meta name="color:background" content="#ddd"/>
<meta name="color:posts bg" content="#fff"/>
<meta name="color:links" content="#85ccc4"/>
<meta name="color:link hover" content="#eee"/>
<meta name="color:text" content="#000"/>
<meta name="color:ask bg" content="#fff"/>
<meta name="color:ask text" content="#aaa"/>
<meta name="color:blockquote bg" content="#eee"/>
<meta name="color:blockquote text" content="#aaa"/>
<meta name="color:description bg" content="#eee"/>
<meta name="color:description text" content="#999"/>
<meta name="color:perm bg" content="#fff"/>
<meta name="color:perm text" content="#aaa"/>
<meta name="color:perm border top" content="#000"/>
<meta name="color:nav bg" content="#fff"/>
<meta name="color:nav hover border" content="#eee"/>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<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 type="text/javascript">$(document).ready(function(){$( '.content' ).fadeIn("slow");});</script>

<script type="text/javascript" src="http://static.tumblr.com/twte3d7/BH7lio0yf/jquery.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/RhUlio0y7/lazyload.js"></script>

<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(function() {
if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
$j("img").lazyload({
placeholder : "",
effect: "fadeIn",
});
});
</script>


<style type="text/css">
{CustomCSS}
::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar};height:75px;}

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


iframe#tumblr_controls {
right:3px !important;
position: fixed !important;
-webkit-transition: opacity 0.7s linear;
opacity: 0.7;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

iframe#tumblr_controls:hover {
-webkit-transition: opacity 0.7s linear;
opacity: 1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}


body{
background-image:url("{image:background pic}");
    background-color:{color:background};
    background-repeat:repeat;
    background-attachment:fixed;
    color:{color:text};
    font-family:georgia;
font-size:9px;
line-height:14px;
 {block:ifcutecursor}cursor: url(http://static.tumblr.com/iuggpng/zbmm1rrrg/cursor.png), progress !important;{/block:ifcutecursor}
    }

a, a:link, a:visited, a:active{
    color:{color:links};
    text-decoration:none;
    letter-spacing:1px;
    -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
    }

a:hover {
    color:{color:link hover};
    text-decoration:none;
    {block:ifcutecursor}cursor: url(http://static.tumblr.com/iuggpng/zbmm1rrrg/cursor.png), progress !important;{/block:ifcutecursor}
    -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
    }


#posts {
    overflow:auto;
    margin-top:0px;
    height:auto;
    margin-left:300px;

}

.posteu {
    {block:PermalinkPage}width:500px;{block:PermalinkPage}
    {block:IndexPage}{block:if500pxposts}width:500px;{/block:if500pxposts}
{block:if400pxposts}width:400px;{/block:if400pxposts}
{block:if250pxposts}width:250px;{/block:if250pxposts}{/block:IndexPage}
    height:auto;
    padding:0px;
    margin-top:10px;
border:3px solid {color:posts bg};
    color:{color:text};
    background-color:{color:posts bg};
    opacity:1;
    -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;


}


.title {
font-family:arial;
font-size:11px;
line-height:16px;
text-align:right;
border-top:0px solid #eee;
letter-spacing:3px;
border-bottom: 0px dashed {color:post titles bottom border};
    color:{color:post titles};
    text-transform:uppercase;
}

.texts, .chat, .link, .quote, .audio{
font-family:georgia;
font-size:9px;
line-height:14px;
    padding:1px;
    border:2px solid {color:posts bg};
    letter-spacing:0px;
    background-color:{color:posts bg};
    color:{color:text};
    -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}


.posteu img {
    background-color:{color:posts bg};
    opacity:1;
    -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
    }

.posteu img:hover, a .posteu img:hover{
    opacity:.85;
    -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}


blockquote {
    background-color:{color:blockquote bg};
    color:{color:blockquote text};
    border-left:0px solid #eee;
    padding:3px;
}

#perm{
 background-color:{color:perm bg};
position:absolute;
height:auto;
text-align:center;
margin-top:-10px;
    margin-left:0px;
 z-index:998;
 font-size:9px;
 padding:2px;
 color:{color:perm text};
 text-transform:uppercase;
 font-family:consolas;
 font-size:8px;
 letter-spacing:1px;
width:156px;
 opacity:0;
 border-left:0px solid white;
 -webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

#inpiniteu:hover #perm{
opacity:.8;
border-top:3px solid {color:perm border top};
margin-left:10px;
padding-top:2px;
width:156px;
margin-top:0px;
color:#555;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
filter: alpha (opacity=7)
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}




#inpiniteu {
    {block:PermalinkPage}width:500px;{block:PermalinkPage}
    {block:IndexPage}{block:if500pxposts}width:500px;{/block:if500pxposts}
{block:if400pxposts}width:400px;{/block:if400pxposts}
{block:if250pxposts}width:250px;{/block:if250pxposts}{/block:IndexPage}
    -webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}


#permalink {
    display:block;
    {block:PermalinkPage}width:500px;{block:PermalinkPage}
    {block:IndexPage}{block:if500pxposts}width:500px;{/block:if500pxposts}
{block:if400pxposts}width:400px;{/block:if400pxposts}
{block:if250pxposts}width:250px;{/block:if250pxposts}{/block:IndexPage}
    padding:2px;
    height:auto;
    background-color:{color:posts bg};
    color:{color:text};
}

#taemin {
    display:block;
    background-color:{color:posts bg};
    width:500px;
    padding:0px;
}

#asku {
    background-color:{color:ask bg};
    color:{color:ask text};
    font-size:8px;
    font-family:consolas;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:2px;
}

    @font-face {font-family: "tinytots";src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}

@font-face {font-family: "silkscreen";src: url('http://static.tumblr.com/qbwrk8v/zmWlpdkl0/slkscr.ttf');}

@font-face {font-family: "bitcapital";src: url('http://static.tumblr.com/iuggpng/qZbm10ac9/font__bitcapital_by_emotikonz-d2zem0k.ttf');}

 @font-face {font-family: "open sans";src: url('http://static.tumblr.com/iuggpng/jrXm0dlyf/opensans-condlight.ttf');}



#eunhyuk {
    opacity:1;
    position:fixed;
    height:auto;
    padding:2px;
width:180px;
top:200px;
left:120px;
z-index:10;
background-color:transparent;
}

#name { opacity:1; font-family:arial; font-size:10px;}
#name:hover {
    opacity:.96;
    }

#main {
    font-family:arial;
    font-size:8px;
    letter-spacing:2px;
    border-top:0px solid #ccc;
    text-align:center;
    width:180px;

    -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

#eunhyuk:hover #desc{
    opacity:1;
    margin-top:0px;
    -webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}

#desc {opacity:0;
margin-top:-50px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}

#main a {
    color:{color:links};
    letter-spacing:2px;
    }

#main a:hover {
    border-bottom:0px solid black;
    color:{color:link hover};
    letter-spacing:2px;
}


@font-face {font-family: "open sans";src: url('http://static.tumblr.com/iuggpng/jrXm0dlyf/opensans-condlight.ttf');}


    #nabubox {
        height:auto;
        width:100px;
        position:fixed;
        {block:PermalinkPage}left:820px;{/block:PermalinkPage}
    {block:IndexPage}{block:if500pxposts}left:820px;{/block:if500pxposts}
{block:if400pxposts}left:720px;{/block:if400pxposts}
{block:if250pxposts}left:570px;{/block:if250pxposts}{/block:IndexPage}
      top:210px;
font-family:arial;
            text-align:right;
            font-size:8px;
-moz-border-radius:10px 10px 10px 10px;

border-radius:10px 10px 10px 10px;
padding:5px;
        background-image:url({image:nav bg});
    }

        .nabu {
            display:block;
            width:95px;
            padding:3px;
            min-height:10px;
            line-height:12px;
            padding-top:0px;
            font-family:arial;
            text-align:right;
            font-size:8px;
            letter-spacing:2px;
            background-color:{color:nav bg};
                -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
    }

    .nabu:hover {
        border-bottom:5px solid {color:nav border hover};
        letter-spacing:2px;
            -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
    }

    #nabu1{
        -moz-border-radius:5px 5px 0px 0px;
border-radius:5px 5px 0px 0px;

}

#nabu1:hover {
        -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

#nabu2
{
    -moz-border-radius:0px 0px 5px 5px;

border-radius:0px 0px 5px 5px;
}
</style>


    </head>
<body>


<div id="eunhyuk">


<img src="{image:sidebar pic}" width="180px">


 <div id="main">
<a href="/">index</a> •
<a href="/ask">message</a> •
<a href="/archive">history</a> •
<a href="http://hobakjeon.tumblr.com" target="new">theme</a>

<p><span id="desc" style="background-color:{color:description bg}; color:{color:description text}; padding-right:3px; padding-left:3px; font-family:consolas; letter-spacing:1px; line-height:12px;">{Description}</span>

</div>


</div>

     {block:ifextralinks}<div id="nabubox">
   {block:iflink1}<a href="{text:link 1 url}" id="nabu1" class="nabu">{text:link 1}</a>{/block:iflink1}
   {block:iflink2}<a href="{text:link 2 url}" class="nabu">{text:link 2}</a>{/block:iflink2}
   {block:iflink3}<a href="{text:link 3 url}" class="nabu">{text:link 3}</a>{/block:iflink3}
   {block:iflink4}<a href="{text:link 4 url}" class="nabu">{text:link 4}</a>{/block:iflink4}
   {block:iflink5}<a href="{text:link 5 url}" class="nabu">{text:link 5}</a>{/block:iflink5}
   {block:iflink6}<a href="{text:link 6 url}" id="nabu2" class="nabu">{text:link 6}</a>{/block:iflink6}
   </div>
        {/block:ifextralinks}
         <div id="posts">
           {block:ifinfinitescrolling}<div class="autopagerize_page_element"><script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:ifinfinitescrolling}{block:Posts}

           <div id="inpiniteu">

                {block:IndexPage}<div id="perm">{TimeAgo} → <a href="{permalink}">{notecountwithlabel}</a></div>
                {block:IndexPage}



                {block:Text}
                <div class="posteu">
                    <div class="texts">
                        {block:Title}
                            <div class="title"><a href="{Permalink}">{Title}</a></div>
                        {/block:Title}

                        {Body}

                    </div>


                    </div>
                {/block:Text}

                {block:Photo}<div class="posteu">

                    <div class="photo">
                    {block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{/block:PermalinkPage}

                     {block:IndexPage}{block:if500pxposts}<a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>{/block:if500pxposts}
{block:if400pxposts} <a href="{Permalink}"><img src="{PhotoURL-400}" alt="{PhotoAlt}"/></a>{/block:if400pxposts}
{block:if250pxposts} <a href="{Permalink}"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></a>{/block:if250pxposts} {/block:IndexPage}
                    </div>
                  {block:PermalinkPage}{block:Caption}
                            {Caption}
                        {/block:Caption}{/block:PermalinkPage}
                    </div>
                {/block:Photo}

                {block:Photoset}<div class="posteu">
                    <div class="photoset">
       {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}{block:if500pxposts}<a href="{Permalink}">{Photoset-500}</a>{/block:if500pxposts}
{block:if400pxposts}<a href="{Permalink}">{Photoset-400}</a>{/block:if400pxposts}
{block:if250pxposts}<a href="{Permalink}">{Photoset-250}</a>{/block:if250pxposts}{/block:IndexPage}

                        {block:PermalinkPage}{block:Caption}
                            {Caption}
                        {/block:Caption}{/block:PermalinkPage}
                    </div>
                    </div>
                {/block:Photoset}

                {block:Quote}<div class="posteu">
                    <div class="quote">
                        <center>"{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}</center>
                    </div></div>
                {/block:Quote}

                {block:Link}<div class="posteu">
                    <div class="link">
                        <center><a href="{URL}" class="link" {Target}>{Name}</a></center>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </div></div>
                {/block:Link}

                {block:Chat}<div class="posteu">
                    <div class="post chat">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <div class="chat">
                            {block:Lines}
                                <div class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </div>
                            {/block:Lines}
                        </div>
                    </div>
                    </div>
                {/block:Chat}

                {block:Video}<div class="posteu">
                    <div class="video">

{block:if500pxposts}{Video-500}{/block:if500pxposts}
{block:if400pxposts}{Video-400}{/block:if400pxposts}
{block:if250pxposts}{Video-250}{/block:if250pxposts}

                        {block:PermalinkPage}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}{/block:PermalinkPage}
                    </div></div>
                {/block:Video}

                {block:Audio}<div class="posteu">
                    <div class="audio">
                        <center>{AudioPlayerWhite}


                       {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}</center>
                    </div></div>
                {/block:Audio}

{block:Answer}<div class="posteu">
                <div class="askeu">
        <div id="asku"><img src="{AskerPortraitURL-30}" align="left" style="margin-right:5px; border:3px solid {color:links};"> → <b>{Asker}</b> whispered : {Question}</div>
            {Answer}
            </div></div>
    {/block:Answer}

                {block:PermalinkPage}
<div id="permalink">
<center>Posted {block:Date}<a href="{Permalink}">{TimeAgo}</a> with {NoteCountWithLabel}{/block:Date}{block:PostNotes} {/block:PostNotes}{block:RebloggedFrom} (via <a href="{ReblogParentURL}">{ReblogParentName}</a> , org. <a href="{ReblogRootURL}">{ReblogRootName}</a> ){/block:RebloggedFrom}
<div>
{block:HasTags}tagged :{block:Tags}
&#160<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}</center>
<div id="taemin">{PostNotes}</div></div></div> {/block:PermalinkPage}
</div>

            {/block:Posts}

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

    </body>
</html>