Theme: Two melodies

<!DOCTYPE html>

<!--
- theme #21 / caulfielld(tumblr.com) -
don't take parts of this code.
don't remove this comment.
don't remove the credit.
-->

<html>
<head>

<title>{Title}
{block:PostTitle} — {PostTitle}{/block:PostTitle}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="color:background" content="#ffffff" />
<meta name="color:text" content="#999999" />
<meta name="color:link" content="#77b5be" />
<meta name="color:link hover" content="#7e7175" />
<meta name="color:border" content="#f5f5f5" />
<meta name="color:blockquote" content="#f5f5f5" />
<meta name="color:selection bg" content="#77b5be" />
<meta name="color:selection text" content="#ffffff" />
<meta name="color:bold" content="#77b5be" />
<meta name="color:icons bg" content="#dbeaef" />
<meta name="color:info bg" content="#fafafa" />
<meta name="color:text title bg" content="#fafafa" />
<meta name="color:caption bg" content="#fafafa" />
<meta name="color:description bg" content="#fafafa" />
<meta name="color:short title" content="#dbeaef" />

<meta name="text:sb title normal" content="kwon" />
<meta name="text:sb title bold" content="tae" />
<meta name="text:Link 01 URL" content="/" />
<meta name="text:Link 01 title" content="Link 01">
<meta name="text:Link 02 URL" content="/" />
<meta name="text:Link 02 title" content="Link 02">
<meta name="text:Link 03 URL" content="/" />
<meta name="text:Link 03 title" content="Link 03">
<meta name="text:Link 04 URL" content="/" />
<meta name="text:Link 04 title" content="Link 04">
<meta name="text:Link 05 URL" content="/" />
<meta name="text:Link 05 title" content="Link 05">
<meta name="text:Link 06 URL" content="/" />
<meta name="text:Link 06 title" content="Link 06">

<meta name="if:500px posts" content="0">
<meta name="if:infinite scrolling" content="1">
<meta name="if:sidebar picture" content="0">
<meta name="if:bg image" content="0">

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

<!--- extras --->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/nb65v05/XPQmpjoyl/jquery.style-my-tooltips.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});

$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});

});
</script>

<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:false,
tip_delay_time:20,
tip_fade_speed:300,
attribute:"title"
});});})(jQuery);
</script>

<script src="http://tympanus.net/Tutorials/CaptionHoverEffects/js/modernizr.custom.js"></script>
<script src="http://tympanus.net/Tutorials/CaptionHoverEffects/js/toucheffects.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".sub").hide();
//toggle the componenet with class msg_body
jQuery(".cthrough").click(function()
{
jQuery(this).next(".sub").slideToggle(500);
});});
</script>

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

<style type="text/css">

body {
font:09px sans-serif, cambria, calibri;
margin:0;
background:{color:Background} {block:ifBgImage}url('{image:Background}') fixed{/block:ifBgImage};
color:{color:text};}

a {
color:{color:link};
text-decoration: none;
-webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out;/*opera*/
-moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out;/*ie*/
transition:all 0.6s ease-in-out;/*w3c*/}

a:hover {
color:{color:link hover};}

em, strong {
color:{color:bold};}

blockquote {
border-left: 1px solid {color:blockquote};
padding-left: 5px;
margin:05px;}

img {
max-width: 100%;}

ol {
list-style-type:lower-roman;}

sub, sup{
font-size: 10px; /*credit to pohroro*/}

.container {
width:400px;
{block:if500pxPosts}
width:500px;
{/block:if500pxPosts}
margin: auto;}

.entries {
width:400px;
{block:if500pxPosts}
width:500px;
{/block:if500pxPosts}
position:relative;
padding-top:60px;
padding-bottom:60px;}

#posts {
width:400px;
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
{block:if500pxPosts}
width:500px;
{/block:if500pxPosts}
overflow:hidden;
word-wrap: break-word;
{block:IndexPage}
margin-bottom:100px;
{/block:IndexPage}}

#posts img{
display:block;}

#posts .images{
display:block;
max-width:100%;}

#sidebar {
width: 100px;
height:auto;
margin-left:-150px;
margin-top:200px;
position:fixed;}

.sidebar-image{
width:60px;}

.sidebar-image img{
display:block;
padding:20px;
background-color:{color:description bg};
margin-bottom:4px;}

.sb-title a{
color:{color:short title};
display:block;
text-transform:lowercase;
text-align:center;
font:18px sans-serif;
letter-spacing:2px;
padding:05px;}

.line{
width:0px;
height:3px;
background-color:{color:icons bg};
opacity:0;
-webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out;/*opera*/
-moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out;/*ie*/
transition:all 0.6s ease-in-out;/*w3c*/}

.sb-title:hover .line{
width:100px;
opacity:1;}

.descr {
margin-top:5px;
text-align:center;
padding:5px;
margin-left:200px;
width:90px;
background-color:{color:description bg};
height:50px;
overflow:auto;
margin-bottom:5px;
font:09px sans-serif;
opacity:0;
-webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out;/*opera*/
-moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out;/*ie*/
transition:all 0.6s ease-in-out;/*w3c*/}

.descr a{
font:09px sans-serif;
display:inline;
padding:0;}

.sb-title:hover .descr{
margin-left:0px;
opacity:1;}

.navi {
text-align:center;
margin-top:-68px;
-webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out;/*opera*/
-moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out;/*ie*/
transition:all 0.6s ease-in-out;/*w3c*/}

.navi i, #box i{
font-style:normal;}

.sb-title:hover .navi{
margin-top:0;}

.navi a{
padding:5px;
background-color:{color:icons bg};
color:white;
font-size:13px;
display:inline-block;}

.pag {
text-align:center;
font:italic 09px sans-serif;}

.jump_page {
padding: 4px 8px;}

.current_page, .jump_page:hover {
padding: 4px 8px;}

.text-title {
background-color:{color:text title bg};
{block:IndexPage}
width:384px;
{/block:IndexPage}
{block:PermalinkPage}
width:484px;
{/block:PermalinkPage}
{block:if500pxPosts}
width:484px;
{/block:if500pxPosts}
border:3px double {color:background};
padding:5px;
text-align:center;
font:18px sans-serif;
text-transform:lowercase;
opacity:0.5;}

#answer{
padding:10px;
background-color:{color:ask bg};
text-align:center;}

#answer img{
float:left;
border-radius:5px;
display:none;
margin:0 10px 10px 0;}

.answer:first-letter{
text-transform:uppercase;}

.answer{
background-color:{color:ask bg};
padding-left:10px;
padding-right:10px;
border:1px solid {color:border};}

.answer img, .bod img{
{block:if500pxPosts}
max-width:480px;
{/block:if500pxPosts}
{block:ifNot500pxPosts}
max-width:380px;
{block:ifNot500pxPosts}
width:auto!important;
display:inline-block!important;}

.quote {
padding:0 10px 0 10px;}

.quotetext-short {
font-size: 18px;}

.quotetext-medium {
font-size: 14px;}

.quotetext-long {
font-size: 11px;}

.quote-source {
text-align:right;}

.caption img, .answer img{
{block:if500pxPosts}
max-width:500px;
{/block:if500pxPosts}
{block:ifNot400pxPosts}
max-width:400px;
{/block:ifNot400pxPosts}}

.tumblr_audio_player {
height:20px;
{block:if500pxPosts}
width:40px;
{/block:if500pxPosts}
{block:ifNot500pxPosts}
width:20px;
{/block:ifNot500pxPosts}
z-index:9999;
margin:0;
padding:10px;
margin-left:0px;
position:relative;
float:left;
background-color:white;
border:1px solid {color:border};}

.audio {
height:42px;
background:url('http://31.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o3_250.png');
{block:if500pxPosts}
width:500px;
{/block:if500pxPosts}
{block:ifNot500pxPosts}
width:400px;
{/block:ifNot500pxPosts}}

.au-info {
text-align:center;
text-decoration:underline;
font:italic 12px sans-serif;
line-height:100%;
color:white;
text-shadow: 1px 1px 1px #A3A3A3;
padding:14px;}

#posts-info{
padding:3px;
text-align:center;
text-transform:lowercase;
background-color:{color:info bg};
margin-top:05px;
font-family:'trebuchet ms';
text-transform:uppercase;
letter-spacing:1px;
font-size:7px;}

#c{
position:fixed;
bottom:10px;
right:12px;
font: 09px georgia;
letter-spacing:1px;
text-align:right;
z-index:99;}

/* extras */

#s-m-t-tooltip{
z-index:10;
margin:24px 14px 7px 12px;
padding:0 3px 0 3px;
font:08px sans-serif;
text-transform:uppercase;
letter-spacing:1px;
line-height:16px;
background-color:{color:background};
-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);}

::selection {
background: {color:selection bg};
color: {color:selection text};}
::-moz-selection {
background: {color:selection bg};
color: {color:selection text};}
::-webkit-selection {
background: {color:selection bg};
color: {color:selection text};}

iframe#tumblr_controls {
top:0%!important;
right:0%!important;
position:fixed!important;
z-index:999999999!important;
opacity:0.3;
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-o-filter:invert(100%);
-ms-filter:invert(100%);
filter:invert(100%);} /*credit to ladmilk*/

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

::-webkit-scrollbar-thumb {
background-color:{color:background} ;
border: 1px solid #eee;}

#notes{
width:500px;
height:190px;
overflow:auto;
margin-top:05px;}

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

ol.notes li.note {
padding: 10px;}

ol.notes li.note img.avatar {
vertical-align: -4px;
float:left;
margin-right: 10px;
width: 16px;
height: 16px;
display:none!important;}

ol.notes li.note span.action {}

ol.notes li.note .answer_content {
font-weight: normal;}

ol.notes li.note blockquote {
border-color: #eee;
padding: 4px 10px;
margin: 10px 0px 0px 25px;}

.scrollup{
width:30px;
height:30px;
opacity:0.3;
position:fixed;
bottom:10px;
right:0px;
display:none;
text-indent:-9999px;
background: url('http://static.tumblr.com/ii9pnwy/6qRn1ekzg/1393103726_up4.png') no-repeat;}

.scrollup:hover{
cursor:pointer;}

.cthrough{
cursor:pointer;}

.subb{
margin-top:5px;}

.subb a{
display:inline-block;
padding:0;
background-color:transparent;
color:{color:text};
font:09px sans-serif;
font-style:italic;
letter-spacing:0;}

.caption{
background-color:{color:caption bg};
{block:IndexPage}
width:384px;
{/block:IndexPage}
{block:PermalinkPage}
width:484px;
{/block:PermalinkPage}
{block:if500pxPosts}
width:484px;
{/block:if500pxPosts}
border:3px double {color:background};
padding:5px;
margin-top:5px;}

#box{
position:absolute;
margin-left:390px;
opacity:0;
-webkit-transition:all 0.6s ease-in-out 0.1s;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out 0.1s;/*opera*/
-moz-transition:all 0.6s ease-in-out 0.1s;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out 0.1s;/*ie*/
transition:all 0.6s ease-in-out 0.1s;/*w3c*/}

#box a{
padding:5px;
background-color:{color:icons bg};
color:white;
font-size:13px;
display:block;
margin-bottom:3px;}

.hres {
margin-top:-26px;
position:relative;
z-index:9;
-webkit-transition:all 0.6s ease-in-out 0.4s;/*chrome-safari*/
-o-transition:all 0.6s ease-in-out 0.4s;/*opera*/
-moz-transition:all 0.6s ease-in-out 0,4s;/*mozilla firefox*/
-ms-transition:all 0.6s ease-in-out 0.4s;/*ie*/
transition:all 0.6s ease-in-out 0.4s;/*w3c*/}

.reblog{
position:relative;
z-index:99;}

#posts:hover .hres{
margin-top:0px;}

#posts:hover #box{
opacity:1;
margin-left:410px;
{block:if500pxPosts}
margin-left:510px;
{/block:if500pxPosts}}

</style>

<script src="http://tympanus.net/Tutorials/CaptionHoverEffects/js/modernizr.custom.js"></script>
<script src="http://tympanus.net/Tutorials/CaptionHoverEffects/js/toucheffects.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".subb").hide();
//toggle the componenet with class msg_body
jQuery(".cthrough").click(function()
{
jQuery(this).next(".subb").slideToggle(500);
});});
</script>

{block:ifInfiniteScrolling}<script type="text/javascript" src="http://static.tumblr.com/nnl3g6g/vcCnyp3z7/infinitescrolling.js"></script>{/block:ifInfiniteScrolling}

</head>

<body>
<div class="container">

<div id="sidebar">
{block:ifSidebarPicture}<div class="sidebar-image"><img src="{image:sidebar}"></div>{/block:ifSidebarPicture}
<div class="sb-title"><a href="/">{text:sb title normal}<b>{text:sb title bold}</b></a>
<div class="line"></div>
<div class="descr">{Description}</div><!--description-->

<div class="navi">
<a href="/"><span class="fa fa-home" href="/"></span></a>
<a href="/ask"><span class="fa fa-comments"></span></a>

<a class="cthrough"><span class="fa fa-list"></span></a>
<div class="subb">
<a href="{text:Link 01 URL}">{text:Link 01 title}</a>
<a href="{text:Link 02 URL}">{text:Link 02 title}</a>
<a href="{text:Link 03 URL}">{text:Link 03 title}</a>
<a href="{text:Link 04 URL}">{text:Link 04 title}</a>
<a href="{text:Link 05 URL}">{text:Link 05 title}</a>
<a href="{text:Link 06 URL}">{text:Link 06 title}</a>
</div>
</div><!--navigation-->

</div>
</div>

<div id="c">
<a href="http://caulfielld.tumblr.com" target="_blank" title="theme by caulfielld"><em>tc.</em></a>
</div>

<div class="entries">

{block:ifInfiniteScrolling}
<div class= "autopagerize_page_element">{/block:ifInfiniteScrolling}

{block:Posts}

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

<div id="posts">

{block:IndexPage}
<div id="box">
<a href="{ReblogURL}" class="reblog"><i class="fa fa-retweet"></i></a>
{block:HighRes}
<a href="{PhotoURL-HighRes}" class="hres"><i class="fa fa-search"></i></a>{/block:HighRes}
</div>{/block:IndexPage}

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

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

{block:Photoset}
{block:IndexPage}{block:ifNot500pxPosts}{Photoset-400}{/block:ifNot500pxPosts}{block:if500pxPosts}{Photoset-500}{/block:if500pxPosts}{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Answer}
<div id="answer">
<img src="{AskerPortraitURL-24}"/><b><u>{Asker}</u></b><br>
{Question}</div>
<div class="answer">
{Answer}
</div>
{/block:Answer}

{block:Quote}
<div class="quote">
<div class="quotetext-{Length}">{Quote}</div>
{block:Source}
<div class="quote-source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class="text-title">
<a href="{URL}" target="{Target}">
{Name} <b>&rarr;</b></a></div>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<div class="text-title">
{Title}</div>{/block:Title}
{block:Lines}{block:Label}{Label}{/block:Label} {Line}<br>{/block:Lines}
{/block:Chat}

{block:Video}
{block:if500pxPosts}{Video-500}{/block:if500pxPosts}
{block:ifNot500pxPosts}{block:IndexPage}{Video-400}{/block:IndexPage}{/block:ifNot500pxPosts}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}
<div class="audio">
{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
<div class="au-info">{block:TrackName}{TrackName}{/block:TrackName}
{block:Artist}<small><b>{Artist}</b></small>{/block:Artist}</div>
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}

{block:Date}
<div id="posts-info">
posted <a href="{Permalink}">{TimeAgo}</a>
{block:NoteCount}w/ <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom} — <a href="{ReblogParentURL}" title="{ReblogParentTitle}">via</a> <a href="{ReblogRootURL}" title="{ReblogRootTitle}">(source)</a>{/block:RebloggedFrom}
{block:HasTags}<br />tagged as {block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags} {/block:HasTags}
</div>
{/block:Date}

{block:PermalinkPage}
{block:PostNotes}
<div id="notes">{PostNotes}</div>
{/block:PostNotes}
{/block:PermalinkPage}

</div><!--- posts --->

{/block:Posts}

{block:Pagination}{block:ifNotInfiniteScrolling}<div class="pag">
{block:PreviousPage}<a href="{PreviousPage}" class="jump_page">prev</a>{/block:PreviousPage}
{block:JumpPagination length="7"}
{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}" class="jump_page">next</a>{/block:NextPage}</div>{/block:ifNotInfiniteScrolling}
{/block:Pagination}

</div><!-- entries -->
</div><!-- container-->

{block:ifInfiniteScrolling}<a class="scrollup">Scroll</a>{/block:ifInfiniteScrolling}

</body>
</html>