Theme: Heartbreaker

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>

<!--
- theme #14 / caulfielld(tumblr.com) -
don't remove the credits.
don't take parts of this theme.
-->

<head>

<title>{Title}{block:PostTitle}, {PostTitle}{/block:PostTitle}</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:text" content="#7e7175" />
<meta name="color:link" content="#b64a6b" />
<meta name="color:link hover" content="#7e7175" />
<meta name="color:border" content="#f5f5f5" />
<meta name="color:blockquote" content="#f5f5f5" />
<meta name="color:selection" content="#b64a6b" />
<meta name="color:selection text" content="#ffffff" />
<meta name="color:ask bg" content="#fafafa" />
<meta name="color:hover title text" content="#ffffff" />
<meta name="color:hover title bg" content="#b64a6b" />
<meta name="color:scrollbar" content="#e6e6e6" />
<meta name="color:date bg" content="#fafafa" />
<meta name="color:notes bg" content="#fafafa" />
<meta name="color:audio bg" content="#fafafa" />

<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:navigation link" content="navigation">

<meta name="image:background" content="">
<meta name="image:sidebar" content="">
<meta name="if:400px Posts" content="0">
<meta name="if:bg image" content="0">

<!--- 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 src="http://static.tumblr.com/nb65v05/Xltmtyug1/jd.js"></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 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>

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


<style type="text/css">

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

a{
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*/
color:{color:link};}

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

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

blockquote{
border-left:3px solid {color:border};
margin:0;
padding-left:5px;}

blockquote a{
font:09px lucida console;}

blockquote img {
max-width: 100%;}

li {
list-style-type:circle; }

#entries {
margin:80px 0 0 480px;
/*top/bottom/right/left*/
{block:if400pxPosts}
width:400px;
{/block:if400pxPosts}
{block:ifNot400pxPosts}
width:500px;
{/block:ifNot400pxPosts}
position:absolute;}

#posts {
{block:if400pxPosts}
width:400px;
{/block:if400pxPosts}
{block:ifNot400pxPosts}
width:500px;
{/block:ifNot400pxPosts}
overflow:hidden;
margin-bottom:0px;
word-wrap: break-word;}

.title{
text-transform:lowercase;
font-weight:bold;
font-size:18px;
letter-spacing:-1px;}

#side{
background-color:#fafafa;
position:fixed;
width:200px;
height:100%;
margin:0px 0 0 0px;
padding:20px;
background-image:url('{image:sidebar}');}

#sidebar{
position:fixed;
width:100px;
text-align:left;
bottom:20px;
margin-left:230px;}

#sidebar img{
width:64px;
overflow:hidden;}

#title{
margin-top:5px;
text-align:left;
font:bold 19px sans-serif;
letter-spacing:-2px;}

.description{
margin:5px 0 0 0;}

#links {
margin-top:50px;
opacity:1;
font:bold 18px sans-serif;
letter-spacing:-1px;
line-height:80%;}

#answer{
padding:10px;
background-color:{color:ask bg};
border-radius:5px;}

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

.answer:first-letter{
text-transform:uppercase;}
.answer{
background-color:{color:ask bg};
border-left:7px solid {color:border};
border-right:7px solid {color:border};}
.caption img, .answer img{
{block:if400pxPosts}
max-width:400px;
{/block:if400pxPosts}
{block:ifNot400pxPosts}
max-width:500px;
{/block:ifNot400pxPosts}}

#audio a:hover{
cursor:help;
color:{color:text};}

#audio a{
color:{color:text};}

#audio{
    400px;}

#player-bg{
width:100%;
height:27px;
font:bold 19px sans-serif;
letter-spacing:-2px;
text-align:left;
text-transform:lowercase;}

.plays{
padding:5px;
background-color: {color:audio bg};}

.artist{
padding:5px;
background-color: {color:audio bg};}

.album{
padding:5px;
background-color: {color:audio bg};}

.player{
overflow:hidden;
width:400px;
position:absolute;
opacity: 0;
filter:alpha(opacity:0);
-moz-opacity: 0;
-khtml-opacity: 0;
/*end of opacity*/
-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*/
/*propiedad css/tiempo/función de tiempo/retardo*/}

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

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

#notes img{
float:left;
margin-right:5px;}

#notes{
margin:0;
font: 08px sans-serif;
text-transform:uppercase;}

#notes li{
padding:10px;
list-style-type: none;}

#info{
padding-left:10px;
padding-right:10px;
text-align:left;
margin-top:10px;
{block:IndexPage}
margin-bottom:120px;
{/block:IndexPage}
{block:PermalinkPage}
margin-bottom:30px;
{/block:PermalinkPage}}

#quotes{
font-style:italic;
margin-left:40px;
padding-top:10px;}

.quotes{
font-family:consolas;
float:left;
font-size:70px;
position:absolute;
color:{color:blockquote};}

#c{
position:fixed;
bottom:10px;
right:10px;
text-transform:lowercase;
padding:3px;
border-bottom:1px solid #cccccc;
text-align:right;
z-index:99;
-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*/}

#c a:hover{
cursor:help;}

/* extras */

#s-m-t-tooltip{
z-index:10;
margin:24px 14px 7px 12px;
padding:0 3px 0 3px;
font-family:calibri;
font-size:09px;
text-transform:uppercase;
letter-spacing:1px;
line-height:16px;
color:{color:hover title text};
background:{color:hover title bg};}

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

iframe#tumblr_controls {
right:3px !important;
position: fixed !important;
-webkit-transition: opacity 0.7s linear;
opacity: 0.2;
-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;}
iframe#tumblr_controls {
top: 0% !important;
right:0% !important;
position: fixed !important;}

::-webkit-scrollbar {
height:08px;
width:08px;
background-color:{color:background};}
::-webkit-scrollbar-thumb:horizontal {
background-color:{color:scrollbar};}
::-webkit-scrollbar-thumb:vertical {
background-color:{color:scrollbar};}
::-webkit-scrollbar-button:vertical{
width:10px;
background-color:{color:scrollbar};}
::-webkit-scrollbar-button:horizontal{
display:none;}

.cthrough:hover{
cursor:help;}

#pagination{
text-align:right;
margin-top:5px;
font:bold 18px sans-serif;
margin-bottom:20px;}

#pagination a{
padding:0 06px 02px 06px;
color:white;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100%;
background-color:{color:link};}


</style>
</head>

<body>

<div id="side">
<div id="sidebar">
<div id="title">{Title}</div>
<div class="description">
{Description}
</div>
<div id="links">
1. <a href="/">refresh</a><br>
2. <a href="/ask">message</a><br>
3. <a class="cthrough" title="click">{text:navigation link}</a>
<div class="sub"><span style="font-size:13px;"><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>
</span>
</div>
</div>

</div><!--- sidebar --->
</div><!---side---->

<div id="entries">
{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:More}
<div class="title">
<a href="{Permalink}">
read more &rarr;</a></div>
{/block:More}

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

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

{block:Photos}
{block:ifNot400pxPosts}
<img src="{Photoset-500}"/>
{/block:ifNot400pxPosts}
{block:if400pxPosts}
<img src="{Photoset-400}"/>
{/block:if400pxPosts}
{block:Caption}
<div class="caption">
{Caption}
</div>
{/block:Caption}
{/block:Photos}

{block:Quote}
<div class="quotes">“</div>
<div id="quotes">
<p>{Quote}</p>
{block:Source}
<span style="text-transform:lowercase;float:right">— <u>{Source}</u></span>
{/block:Source}
</div><br />
{/block:Quote}

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

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

{block:Audio}
<div id="audio">
<div id="player-bg">
<div class="player">{AudioPlayerWhite}</div> {block:TrackName}
{TrackName}{/block:TrackName}</div>

{block:PlayCount}<div class="plays"><span style="font:08px lucida console;text-transform:uppercase;">played:</span> {PlayCount} times</div>{/block:PlayCount}
{block:Artist}<div class="artist"><span style="font:08px lucida console;text-transform:uppercase;">artist:</span>{Artist}</div>{/block:Artist}
{block:Album}<div class="album"><span style="font:08px lucida console;text-transform:uppercase;">album:</span>{Album}</div>{/block:Album}</div>
{block:Caption}<br>{Caption}{/block:Caption}
{/block:Audio}

{block:Video}
{block:ifNot400pxPosts}
{Video-500}
{/block:ifNot400pxPosts}
{block:if400pxPosts}
{Video-400}
{/block:if400pxPosts}
{block:Caption}
<div class="caption">
{Caption}
</div>
{/block:Caption}
{PlayCountWithLabel}
{/block:Video}

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

<div id="info">
{block:IndexPage}
{block:Date}<span style="padding:5px;font:09px lucida console;background-color:{color:date bg};"><a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}</a></span>{/block:Date}
{block:HasTags}<span style="text-transform:lowercase;font-size:08px;"><b>#</b> {block:Tags}<a href="{TagURL}">{Tag} &nbsp; </a>{/block:Tags}</span>{/block:HasTags}
{/block:IndexPage}

{block:PermalinkPage}
{block:RebloggedFrom}<b><a href="{ReblogParentURL}" title="{ReblogParentTitle}">via</a> / <a href="{ReblogRootURL}" title="{ReblogRootTitle}">source</a></b>{/block:RebloggedFrom}

<span style="text-transform:lowercase;font-size:08px;">{block:Date} &nbsp; <a href="{Permalink}">{TimeAgo}</a>{/block:Date}

{block:NoteCount} &nbsp; <a href="{Permalink}">w/ {NoteCountWithLabel}</a>{/block:NoteCount}</span></div>
{/block:PermalinkPage}

{block:PermalinkPage}
{block:PostNotes}
<div style="overflow: scroll;height: 80px;width: 500px;background-color:{color:notes bg};margin-bottom:20px;">
<div id="notes">{PostNotes}</div>
</div>{/block:PostNotes}
{/block:PermalinkPage}

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

{/block:Posts}

{block:Pagination}<div id="pagination">
{block:PreviousPage}<a href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}">&raquo;</a>{/block:NextPage}</div>
{/block:Pagination}

</div> <!--- container --->
</body>
</html>