#6 - Sakura

<!--

theme by @yoongity
06 sakura theme

pls do not steal
pls do not repost/use as a base code
don't hesitate to contact me if you need help or there are any bugs!

have fun customizing! i made this with lots of love <3

video resizing code @shythemes
dropdown menu code @acuite

-->

<!DOCTYPE html>
<head>

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

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>




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


<meta name="color:background" content="#ffffff"/>
<meta name="color:header" content="#ffffff"/>
<meta name="color:container" content="#aaa"/>
<meta name="color:navigation" content="#aaa"/>
<meta name="color:links" content="#aaaaaa"/>
<meta name="color:links border" content="#aaaaaa"/>
<meta name="color:text" content="#000000"/>
<meta name="color:navigation" content="#000000"/>
<meta name="color:posts" content="#000000"/>
<meta name="color:main border" content="#000000"/>
<meta name="color:post border" content="#000000"/>
<meta name="color:tags" content="#666666"/>
<meta name="color:permalink" content="#000000"/>
<meta name="color:permalink border" content="#000000"/>
<meta name="color:scrollbar" content="#aaa"/>
<meta name="color:shadows" content="#aaa"/>
<meta name="color:title" content="#000000"/>
<meta name="color:hover" content="#000000"/>
<meta name="color:selection" content="#000000"/>
<meta name="color:pagination" content="#aaa"/>


<meta name="if:250px" content="1"/>
<meta name="if:300px" content="1"/>
<meta name="if:350px" content="0"/>
<meta name="if:400px" content="0"/>
<meta name="if:shadows" content="1"/>
<meta name="if:fade posts" content="1"/>
<meta name="if:show tags" content="1"/>
<meta name="if:transparent posts" content="1"/>

<meta name="image:header img" content=""/>
<meta name="image:container" content=""/>
<meta name="image:background" content=""/>

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

<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;
    font-family:arial;
    z-index:999999999999999;
    box-shadow:1px 1px {color:navigation};
    background:{color:background};
    border:1px solid {color:navigation};
    font-size:10px;
    padding:4px;
}

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


blockquote {
padding-left:15px;
padding-right:3px;
margin:0px;
border-left:1px solid {color:text};
margin-left:15px;
}

body {
background:{color:background};background-repeat:repeat;background:{color:background} url('{image:background}');
color:{color:text};
font-family:arial;
font-size:11px;
text-align:justify;
margin:0;
line-height:16px;

}


a {
color:{color:links};
text-decoration:none;
border-bottom:1px solid {color:links border};
-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;
}

a:hover {
text-decoration:none;
cursor:help;
color:{color:hover};-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;
}

{block:iffadeposts}
 img{
  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:hover {
  opacity:1;-webkit-filter:none;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;
}

small {
font-size:9px;}

big {
font-size:12px;}


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

#header {text-align:right;
background:{color:header};
position:fixed;border:1px solid {color:main border};padding:15px;
margin-left:0px;border-bottom:none;
margin-top:-38px;;z-index:99999;
width:623px;
{block:if250px}width:362px;{/block:if250px}{block:if300px}width:412px;{/block:if300px}{block:if350px}width:462px;{/block:if350px}{block:if400px}width:512px;{/block:if400px}
}


#header img{
width:40px;border-radius:100%;position:absolute;margin-left:-40px;margin-top:-8px;opacity:1;
}


#links{
    padding-right:60px;text-align:right;margin-bottom:5px;
}
#links a {
    border:none;color:{color:navigation};-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;
}

#links a:hover{
    color:{color:hover};-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;
}


{block:iffadeposts}
 iframe.photoset {
  opacity:0.7;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;
}
{/block:iffadeposts}

iframe.photoset:hover {
  opacity:1;-webkit-filter:none;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;
}



#pagination {
text-transform:lowercase;
font-weight:bold;
margin-bottom:10px;
text-align:center;
}

#pagination a {
padding:8px;border:none;
color:{color:pagination};
}


#con {
margin-top:100px;
left:50%;
margin-left:-250px;
position:absolute;
}


#entries {
width:553px;margin-top:20px;padding:20px;max-height:500px;height:400px;padding-left:50px;padding-right:50px;border:1px solid {color:main border};border-top:none;
overflow:auto;background:{color:container} url('{image:container}');background-repeat:repeat;{block:if250px}width:292px;{/block:if250px}{block:if300px}width:342px;{/block:if300px}{block:if350px}width:392px;{/block:if350px}{block:if400px}width:442px;{/block:if400px}

}

#posts {
{block:ifshadows}
box-shadow:8px 8px {color:shadows};
{/block:ifshadows}border:1px solid {color:post border};
background:{color:posts};padding:20px;{block:ifpostsborder}border:1px solid {color:borders};{/block:ifpostsborder}
{block:if250px}width:250px;{/block:if250px}{block:if300px}width:300px;{/block:if300px}{block:if350px}width:350px;{/block:if350px}{block:if400px}width:400px;{/block:if400px}{block:iftransparentposts}background:transparent;{/block:iftransparentposts}
{block:IndexPage}margin-bottom:90px;{/block:IndexPage}{block:PermalinkPage}
margin-bottom:50px;{/block:PermalinkPage}

}

#posts img {max-width:100%;
}


#posts img, #posts li, #posts blockquote {max-width: 100%;max-height:auto;}
.caption {width:auto;
margin-top:2px;

}
blockquote img {width:auto;height:auto;

}


#titlequote{text-align:left;
font-size:14px;
line-height:18px;
font-weight:bold;
}
#source {
margin-top:15px;
margin-left:15px;}

.playerbuttonbg {
position: absolute;
left: 20px;
top: 20px;
width: 19px;
height: 19px;
background-color: {color:background};
padding: 10px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
opacity: .4;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
transition: opacity .7s ease-in-out;
-moz-transition: opacity .7s ease-in-out;
-webkit-transition: opacity .7s ease-in-out;
}

.playerbuttonbg:hover {
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
}

.newplayerbutton {
position: relative;
width: 19px;
height: 19px;
overflow: hidden;
}

.playerbuttonhug {
position: absolute;
top: -18px;
left: -7px;
}

.tumblr_audio_player {
height: 90px;
width: 270px;
-moz-transform: scale(0.60, 0.60);
-webkit-transform: scale(0.60, 0.60);
-o-transform: scale(0.60, 0.60);
-ms-transform: scale(0.60, 0.60);
transform: scale(0.60, 0.60);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}

.audioimgwrapper {
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
width: 79px;
height: 79px;
}

.audioimgwrapper img {
width: 100%;
height: auto;
}

.trackdetails {
    overflow:auto;
width:200px;
padding:5px;
display:inline-block;
 margin-left: 90px;
 font-size: 11px;
font-style: normal;
text-align: left;
}

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


.bubble {
align:right;
background: #f6f6f6;
margin:7px 0px 10px 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;color:{color:header};
-moz-border-radius:45px 5px 55px 55px;
-webkit-border-radius:45px 55px 0px 55px;
border-radius:15px 15px 15px 15px;

}



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

.label {font-weight:bold;
}


#permalink {
margin-top:15px;{block:IndexPage}padding:8px;padding-bottom:none;{/block:IndexPage}padding-top:8px;text-align:center;border-top:1px solid {color:permalink border};

}

#permalink a {
border:none;color:{color:permalink};{block:IndexPage}font-size:10px;{/block:IndexPage}
}

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

#tags {
{block:ifNotShowTags}display:none;{/block:ifNotShowTags}
opacity:1;
font-size:9px;border:none;color:#aaa;
}

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

#tag {{block:IndexPage}font-size:10px;color:{color:permalink};}

.pagenotes {
{block:IndexPage}
display: none!important;
{/block:IndexPage}
width:500px;
{block:if250px}width:250px;{/block:if250px}{block:if300px}width:300px;{/block:if300px}{block:if350px}width:350px;{/block:if350px}{block:if400px}width:400px;{/block:if400px}
text-align:left;

}
.pagenotes img {
display:none!important;}
.pagenotes li {
list-style-type:none;
padding-left:20px;
padding-top:8px;
text-align:left;
margin:0 0 0 -40px;
}

.tumblr_video_container {
width:auto!important;
height:auto!important;
}

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

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

.pop_head {text-align:center;cursor:help;}
.pop_body {text-align:right;padding-top:8px;display:none;}


</style>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('.video iframe').each(function(){
       var scale = $(this).parents('.video').width() / 500;
       $(this).attr({
           width: Math.floor($(this).attr('width') * scale),
           height: Math.floor($(this).attr('height') * scale)
       });
   });
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".pop_body").hide();
$(".pop_head").click(function(){
$(this).next(".pop_body").slideToggle('fast');
}); }); </script>



</head>

<body>


<div id="con">



<div id="header">
<img title="{Title}" src="{image:header img}"/>
<div id="links">
<a href="{text:link 1 url}" title="{text:link 1 title}"><i class="fa fa-home fa-2x"></i></a>&nbsp;&nbsp;&nbsp;

<a href="{text:link 2 url}" title="{text:link 2 title}"><i class="fa fa-comments fa-2x "></i></a>&nbsp;&nbsp;&nbsp;

<a href="{text:link 3 url}" title="{text:link 3 title}"><i class="fa fa-folder-open fa-2x "></i></a>&nbsp;&nbsp;&nbsp;

<a href="{text:link 4 url}" title="{text:link 4 title}"><i class="fa fa-user fa-2x "></i></a>&nbsp;&nbsp;&nbsp;

<a class="pop_head"><i class="fa fa-bars fa-2x "></a></i><div class="pop_body">{Description}<br>
<p>
    <a href="{text:add link 5 url}">{text:add link 5 title}</a>&nbsp;&nbsp;&nbsp;<a href="{text:add link 6 url}">{text:add link 6 title}</a>&nbsp;&nbsp;&nbsp;<a href="{text:add link 7 url}">{text:add link 7 title}</a>
    </p>
</div>
</div>






</div>




<div id="entries">


<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->{block:Posts}
<div id="posts">


{block:Quote}


<div id="titlequote">“{Quote}”</div>
{block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
{/block:Quote}



{block:Text}

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

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

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

{block:Photo}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{/block:Photo}


{block:Photoset}
<div style="max-width:100%;overflow:hidden;">{Photoset}</div>
{block:Photoset}
<div class="video">{Video-500}</div>

{block:Audio}
{block:AudioPlayer}
<div class="audiowrapper">
{block:AlbumArt}
<div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
{/block:AlbumArt}

<div class="playerbuttonbg">
<div class="newplayerbutton">
<div class="playerbuttonhug">

{AudioPlayerWhite}

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

<div class="trackdetails">

{block:TrackName}{TrackName}{/block:TrackName}<br/>
{block:Artist}Artist: {Artist}{/block:Artist}<br/>
{block:Album}Album: {Album}{/block:Album}<br/>
{PlayCountWithLabel}

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



{/block:Audio}


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

<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->{block:Caption}<div class="caption" style="overflow:auto;">{Caption}</div>{/block:Caption}


{block:Date}<div id="permalink">


<a href="{Permalink}">{24HourWithZero}:{Minutes}&nbsp;{CapitalAmPm} with {NoteCountWithLabel}</a>
<div id="tags">{block:Tags}<a href="{TagUrl}"> #{Tag} </a>&nbsp;&nbsp;{/block:Tags}</div></div>


{/block:Date}



</div>


{block:PostNotes}
<div class="pagenotes">
{PostNotes}
</div>
{/block:PostNotes}
<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->

{/block:Posts}

<div id="pagination">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}"> back</a>&nbsp;/&nbsp;
{/block:PreviousPage}


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



</div>

</div>

<!--do not remove-->

<a href="http:/taehyung.sne.jp" style="position:fixed;padding:5px;color:#aaa;left:3px;bottom:2px;background:transparent;border:none" title="coded by yoongity"><i class="fa fa-code"></i></a>

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

</body></html>