#01: centered ver.

<!DOCTYPE html>
<head>

<!-----
theme by @youngjaes.tumblr.com
pls don't steal or copy. don't edit or remove the credit.
feel free to tweak as much as you'd like for personal use only.
----->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<title>{Title}</title>

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

<script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>

<meta name="select:font" content="Poppins"/>
<meta name="select:font" content="Karla"/>
<meta name="select:font" content="Nunito"/>
<meta name="select:font" content="Lora"/>
<meta name="color:background" content="#fff"/>
<meta name="color:text"content="#000"/>
<meta name="color:link"content="#000"/>
<meta name="color:link Hover"content="#000"/>
<meta name="text:font Size"content="10px"/>
<meta name="text:search placeholder"content="explore"/>

<meta name="text:link1 URL" content="/"/>
<meta name="text:link1" content="about"/>
<meta name="text:link2 URL" content="/"/>
<meta name="text:link2" content="navi"/>
<meta name="text:link3 URL" content="/"/>
<meta name="text:link3" content=""/>
<meta name="image:header image" content="1"/>
<link href="https://fonts.googleapis.com/css?family={select:font}:400,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,700,800" rel="stylesheet">
<style type="text/css">

body {
margin:0px;
background:{color:background};
font-family: '{select:font}', sans-serif;
font-size:{text:font size};
line-height:180%;
color: {color:text};
}

p{
margin:0 0 10px 0;
padding:0;
}

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

a{
color:{color:Link};
}

a:hover{
color:{color:Link Hover};
}

li{
margin-left:-15px;
}

#wrapper{
width:600px;
margin:40px auto;
}

#sidebar{
margin-left:50px;
top:15px;
height:200px;
position:relative;
}

#header{margin-left:494px;z-index:999;top:82px;position:relative;}
#header img{
-moz-border-radius-topleft: 50%;
  -webkit-border-top-left-radius: 50%;
  border-top-left-radius: 50%;
  -moz-border-radius-topright: 50%;
  -webkit-border-top-right-radius: 50%;
  border-top-right-radius: 50%;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft: 50%;
  -webkit-border-bottom-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

#title {
letter-spacing:.8px;font-size:10.5px;text-transform:uppercase;padding:0px;padding-left:0px;margin-bottom:-2px;;font-weight:800;font-family:'Karla'
}

#navigation{
margin-top:-30px
text-transform:uppercase;
}

#content{
margin-top:40px;
width:500px;
margin-left:50px;
overflow:hidden;
}

.post{
width:500px;
margin:0 0 120px 0;
overflow:hidden;
}

.tags {opacity:0;
-webkit-transition: all 0.8s ease;
   transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   -o-transition: all 0.8s ease;}

.tagsp {opacity:1;}


.post:hover .tags{opacity:1;
-webkit-transition: all 0.8s ease;
   transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   -o-transition: all 0.8s ease;};


#sidebar img, .post img{
max-width:100%;
}

#nav{
bottom:50px;
}

.media{
margin:0 0 10px 0;
}

.title{
font-weight:normal;
font-size:18px;
margin:0 0 10px 0;
}

.quote{
font-size:12px;
}

.question{
margin-bottom:10px;
}

blockquote{
margin:0 0 10px 10px;
padding:0 0 0 10px;
border-left:solid 1px #000;
}

.post .footer{
margin:0;
text-align:left;
line-height:20px;
}

.postnotes {
height:100px; overflow:auto;}


ol.notes {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

ol.notes li.note {
    display:block;
    padding:0;
    margin:5px 0;
}

ol.notes li.note img.avatar {display:none!important;}

.player {
    width:29px;
    height:29px;
    position:absolute;
    left:15px;
    padding:5px;
    border-radius:100px;
    background:#f2f2f2;
    display:block;
    overflow:hidden;
    top:calc(50% - 20px);
    opacity:.4;
}

.hold {
    text-align:left;
    background:#fff;
    border:1px solid #e5e5e5;
    position:relative;
    display:block;
    min-height:24px;
    padding:20px;
}


.audio_info {
    vertical-align:left;
    text-align:left;
    line-height:16px;
    margin-left:55px;
    max-width:calc(100% - 35px);
}

.audio_info span {
    white-space:nowrap;

     text-overflow:ellipsis;
    display:block;
}


#credit {
    position:fixed;right:20px;bottom:20px;letter-spacing:0px;z-index:999999;}

#credit a {
    text-decoration:none;}

::-webkit-scrollbar{
    height:11px;
    width:11px;
    background:inherit;
}

::-webkit-scrollbar-thumb {background:#000;}

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

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid #fff;}

.search .query {
   border:0;
   outline:0;
   padding:0;
   text-align:left;
   font-family:inherit;
   font-size:inherit;
   letter-spacing:inherit;
   background-color:transparent;
    width:120px;
    opacity:0.5;
}

{CustomCSS}
</style>
</head>

<body>
<div id="wrapper">


<div id="credit">
<a href="http://youngjaes.tumblr.com/" title="@youngjaes">💘</a>

</div>

<div id="header"><a title="index" href="/"><img src="{image:Header Image}" style="width:60px;"></a></div>

<div id="sidebar" style="margin-bottom:55px;line-height:23px">

<div id="title">{Title}</div>
{Description}

<br>
<a href="/">index</a>&nbsp;
<a href="/ask">contact</a>&nbsp;
<a href="{text:Link1 URL}">{text:Link1}</a>&nbsp;
<a href="{text:Link2 URL}">{text:Link2}</a>&nbsp;
<a href="{text:Link3 URL}">{text:Link3}</a>&nbsp;

<form action="/search" method="get" class="search">
            <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="{text:Search Placeholder}">
</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}

<div class="post {TagsAsClasses}">

{block:Text}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="media">{Photoset-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

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

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

{block:Chat}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}

{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<b>{Label}</b>{/block:Label}
&nbsp;{Line}
</div>
{/block:Lines}
{/block:Chat}

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

{block:Audio}
    {block:audioplayer}
        <div class="hold">
            <div class="player">{audioplayerblack}</div>
            <div class="audio_info">
                {block:trackname}<span class="track"><b>track:</b> {trackname}</span>{/block:trackname}
                {block:artist}<span class="artist"><b>artist:</b> {artist}</span>{/block:artist}
            </div>
        </div>
    {/block:AudioPlayer}
    <p>
{/block:Audio}


{block:Answer}
<div class="question"><b>{Asker}</b>: {Question}</div>
<div class="caption">{Answer}</div>
{/block:Answer}


{block:Date}
<div class="footer">
<a href="{Permalink}">{DayOfMonth}.{MonthNumberWithZero}.{Year}</a>{block:PermalinkPage} +<a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount} </a>
{block:HasTags}
<div class="tagsp" style:"margin-top:5px">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}</div>

 {block:RebloggedFrom}
            <span style="margin-top:5px">via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
                {block:ContentSource} &mdash; source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}
            </span>
    {/block:RebloggedFrom} {/block:PermalinkPage}
{block:IndexPage}
<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:IndexPage}
{block:PermalinkPage}
{block:NoteCount}
{block:PostNotes}<p><div class="postnotes" stlye="margin-top:20px; height:100px; overflow:auto;">{PostNotes}</div>{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}
{/block:Date}
</div>
</div>
{/block:Posts}

{block:Pagination}
<div id="nav">
{block:PreviousPage}<a href="{PreviousPage}">prev.</a>{/block:PreviousPage}

{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
</div>
{/block:Pagination}<p><br>
</div>
</div>


</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>

    </body>
</html>