T17 - SERENDIPITY

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

<!--

THEME #17 SERENDIPITY
BY ZUVIA @ TUMBLR

-->

<html>
<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:Title" content="#666666" />
<meta name="color:Title Bg" content="#eeeeee" />
<meta name="color:Border1" content="#E2E2E2"/>
<meta name="color:Border2" content="#E9E9E9"/>
<meta name="color:Border3" content="#808080"/>
<meta name="color:Entry" content="#ffffff" />
<meta name="color:Entry text" content="#616161" />
<meta name="color:Entries bold" content="#83A7B6" />
<meta name="color:Entries italic" content="#aeaeae" />
<meta name="color:Link" content="#83A7B6" />
<meta name="color:Link hover" content="#999999" />
<meta name="color:Sidebar" content="" />
<meta name="color:Sidebar text" content="#999999" />
<meta name="color:Mainlink" content="#696969" />
<meta name="color:Mainlink hover" content="#749FB8" />
<meta name="color:Navig" content="#83A7B6" />
<meta name="color:Navig hover" content="#4D4D4D" />
<meta name="color:Perma Link" content="#4D4D4D" />
<meta name="color:Perma Link bg" content="#ffffff" />
<meta name="color:Nextpage" content="#999999" />
<meta name="color:Nextpage bg" content="#eeeeee" />
<meta name="color:Nextpage hover" content="#A0C0D3" />
<meta name="color:Scrollbar face" content="#A0C0D3" />
<meta name="color:Scrollbar bg" content="#ffffff" />

<meta name="image:background" content="http://static.tumblr.com/jtqlgf2/2Snm35ppc/light_wool.png" />
<meta name="image:sidebar" content="http://static.tumblr.com/h5tdsbo/lAkm366iz/200px_.png" />
<meta name="image:Title Bg" content="http://static.tumblr.com/jtqlgf2/D5Jm35tlz/gradient_squares.png" />

<meta name="text:Music" content="" />
<meta name="text:Link1" content="" />
<meta name="text:Link1URL" content=""/>
<meta name="text:Link2" content="" />
<meta name="text:Link2URL" content=""/>
<meta name="text:Link3" content="" />
<meta name="text:Link3URL" content=""/>

<meta name="font:Body" content="tahoma" />

<meta name="if:ShowCaptions" content="0" />
<meta name="if:BoxShadows" content="1" />
<meta name="if:MusicPlayer" content="0" />
<meta name="if:FadingImages" content="1" />
<meta name="if:InfiniteScroll" content="1" />
<meta name="if:Links" content="0" />

<head>

<style type="text/css">

@font-face {
font-family: "dawningofanewday";
src: url('http://static.tumblr.com/jtqlgf2/SeUm2ds6e/dawningofanewday.ttf');

}

@font-face {

font-family: "ruluko-regular";

src: url('http://static.tumblr.com/jtqlgf2/PtUm2dquz/ruluko-regular.ttf');

}


@font-face {
font-family: "economica-regular";
src: url('http://static.tumblr.com/jtqlgf2/EFzm1d5lh/economica-regular.ttf');
}

body {
background-color:{color:background};
background-image: url('{image:Background}');
background-attachment:fixed;
font-family:{font:body};
font-size:10px;
line-height:14px;
text-align:justify;}

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

::-webkit-scrollbar {
height: 30px;
width: 7px;
background-color: {color:scrollbar bg};}

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

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

#posts {
position:relative;
width:610px;
margin-left:5px;
{block:permalinkpage}margin-left:15px;{/block:permalinkpage}
margin-top:95px;
text-align:justify;
font-size:10px;
z-index:9;
font-family:{font:body};}

.entries {
color:{color:entry text};
background-color:{color:entry};
position:relative;
width:250px;
{block:permalinkpage}width:500px;{/block:permalinkpage}
{block:Indexpage}float:left;{/block:indexpage}
overflow:hidden;
margin:8px;
padding:8px;
{block:indexpage}
{block:ifboxshadows}box-shadow: 0px 0px 2px 2px #ccc;{/block:ifboxshadows}{/block:indexpage}
{block:permalinkpage}border-bottom:1px dotted {color:entry text};{/block:permalinkpage}
}

.entries blockquote {
border-left: 3px solid {color:link};
padding-left: 8px;
margin-left: 10px;
}

.entries b, strong{
color: {color:entries bold};}

.entries i, em{
color:{color:entries italic};}

.entries a{
color:{color:link};
text-decoration:none;
}

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

.entries:hover .reblog{
opacity:.8;
top:10px;}

.entries:hover .reb2{
opacity:.9;
margin-top:10px;}

.entries h1 {
font-family: "ruluko-regular";
font-weight:normal;
font-size:14px;
padding-left:10px;
letter-spacing:1px;
font-style:none;
text-align:left;
padding-bottom:2px;
padding-top:3px;}

.entries h3 {
font-family: "ruluko-regular";
font-weight:normal;
font-size:14px;
padding-left:10px;
letter-spacing:1px;
text-align:left;
padding-bottom:3px;
padding-top:3px;}

.entries h2 {
font-family: "ruluko-regular";
font-size:13px;
font-weight:normal;
text-align:center;
padding-bottom:8px;
border-bottom: 1px dotted {color:link};
}

.entries img {
{block:indexpage}max-width:250px;{/block:indexpage}
{block:permalinkpage}max-width:500px;{/block:permalinkpage}
{block:iffadingimages}{block:indexpage}opacity:.7;{/block:indexpage}{/block:iffadingimages}
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;}

.entries img:hover{
opacity:1;}

.photo{
{block:iffadingimages}{Block:indexpage}opacity:.7;{/block:indexpage}{/block:iffadingimages}
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;}

.photo:hover{
opacity:1;}

.ask {
width:235px;
padding-left:8px;
border-bottom:1px dotted {color:link};
padding-top:8px;
padding-bottom:8px;
padding-right:8px;
font-style:none;
font-size:13px;
font-family: tahoma;}

.ask a{
color:{color:link};
font-style:none;
font-size:13px;
font-family: tahoma;}

.ask b, strong{
color:{color:entries bold};
font-weight:normal;
font-size:12px;}

.answer{
padding-bottom:4px;}

.chat{
padding-top:5px;
margin-left:5px;
padding-left:6px;
line-height:14px;}

.chat b{
letter-spacing:1px;
font-weight:normal;}

.audio{
background: #e4e4e4;
display:block;
margin-bottom:0px;
margin-left:30px;
position:relative;
padding-left:5px;
padding-top:4px;
border-radius:200px;
margin-top:0px;}

.cover{
margin-left:0px;
border-radius:200px;}

.cover img{
max-width:30px;
border-radius:100px;
float:left;}

.what{
position:relative;
margin-top:5px;
margin-left:10px;
padding-left:10px;}

{block:indexpage}
.reblog{
position:absolute;
opacity:0;
top:-5px;
width:250px;
background-color:{color:perma link bg};
text-align:center;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;}

.reblog a{
color:{color:perma link};
text-decoration:none;
padding:4px;
font-family: "economica-regular";
text-transform:uppercase;
font-size:11px;
letter-spacing:1px;}

.reb2{
position:absolute;
border-radius:0px 10px 10px 0px;
top:5px;
opacity:0;
background-color:{color:perma link bg};
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;}

.reb2 a{
color:{color:perma link};
text-decoration:none;
padding:4px;
font-family: "economica-regular";
text-transform:uppercase;
font-size:11px;
letter-spacing:2px;}

{/block:indexpage}

.pagination{
position:fixed;
width:40px;
{block:IfInfiniteScroll}opacity:0;{/block:IfInfiniteScroll}
{block:IfNotInfiniteScroll}opacity:1;{/block:IfNotInfiniteScroll}
z-index:9999;
margin-left:840px;
top:10px;
{block:indexpage}{block:IfInfiniteScroll}display:none;{/block:IfInfiniteScroll}
{block:ifnotInfiniteScroll}display:visible;{/block:ifnotInfiniteScroll}{/block:indexpage}
}


.pagination a{
color:{color:nextpage};
background-color:{color:nextpage bg};
text-transform:uppercase;
text-decoration:none;
font-family:consolas;
font-size:10px;
padding:4px;}

.pagination a:hover{
color:{color:nextpage hover};}


{block:PermalinkPage}
.permalink {
width:502px;
position: relative;
text-align: left;
margin-left:6px;
margin-top:-6px;
padding-left:10px;
padding-bottom:10px;
padding-top:10px;
font-size:10px;
line-height:12px;
font-family:tahoma;
color: {color:entry text};
background-color:{color:entry};}

.permalink a {
color: {color:perma link};
text-decoration: none;
font-family:tahoma;
font-size:11px;}

.permalink a:hover {
color: {color:link hover};
text-decoration: none;}

ol.notes {
background-color:{color:entry};
font-family:tahoma;
font-size:11px;
padding-top:10px;
border: 0px;
padding-left:20px;
margin-top:-10px;
width:380px;
list-style-type: decimal;}

ol.notes li.note {
background-color:{color:entry};
padding:5px;
width:380px;
letter-spacing: 0px;
text-align: left;
}

ol.notes li.note a{
color:{color:perma link};
background-color:{color:entry};
font-family:tahoma;
text-transform:none;
letter-spacing:0px;
font-size:11px;}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 0px;
    display:none;}

{/block:PermalinkPage}


#wraps{
position:fixed;
width:575px;
height:40px;
margin-left:0px;
top:50px;
z-index:99;
border-radius: 10px;
background-color:{Color:border1};}

#all{
left:600px;
top:45px;
position:fixed;
text-align:center;
padding:8px;
background-color:{color:sidebar};}

#sidebar{
padding:6px;
border-radius: 0px 0px 200px 200px;
background-color:{color:border2};}

#sidebar img{
max-width:200px;
border-radius: 0px 0px 200px 200px;
opacity:.9;}


#desci{
position:relative;
padding:10px;
padding-right:2px;
width:200px;
font-size:10px;
font-family:tahoma;
text-align:center;
color:{color:sidebar text};}

#desci a{
text-decoration:none;
color:{color:link};}

#fill2{
position:fixed;
z-index:99;
width:828px;
height:45px;
padding:5px;
top:-5px;
border-radius: 10px;
margin-left:-10px;
background-color:{color:background};
background-image: url('{image:Title Bg}');
background-attachment:fixed;
border-bottom:10px solid {color:border3}; }

#fill2 h1{
font-family: "dawningofanewday";
text-align:center;
color:{color:title};
letter-spacing:6px;
margin-top:10px;
font-size:33px;}

#extras{
position:relative;
margin-top:-15px;
margin-bottom:10px;
width:100px;
z-index:7;}

#sd1{
position:relative;
height:auto;
margin-bottom:20px;}

#holder{
position:fixed;
z-index:-1;
background-color:{color:border2};
border-radius:100px;
margin-top:-9px;
margin-left:-9px;
height:62px;
width:62px;
border:2px solid {color:sidebar};}

#port{
position:relative;
width:50px;
text-align:center;
margin-top:-10px;
margin-left:-13px;
border-radius:100px;
padding:8px;
padding-bottom:5px;
z-index:999;}

#port img{
float:left;
border-radius:100px;
z-index:999;}

#extras a{
display:block;
text-decoration:none;
font-family: consolas;
font-size:8px;
letter-spacing:1px;
text-transform:uppercase;
padding:2px;
padding-right:5px;
padding-bottom:0px;
margin-bottom:1px;
width:200px;
text-align:right;
color:{color:navig};
opacity:.7;
border-bottom: 1px dotted {color:navig underline};
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;}

#extras a:hover{
border-bottom: 1px dotted {color:navig underline hover};
color:{color:navig hover};}

#main{
position:fixed;
margin-left:160px;
z-index:9999;
text-align:center;
top:62px;}

#main a{
display:inline-block;
font-family: "economica-regular";
text-transform:uppercase;
font-size:14px;
padding:5px;
width:70px;
letter-spacing:2px;
margin-right:8px;
text-decoration:none;
padding-bottom:10px;
color:{color:mainlink};
border-bottom:0px dotted {mainlink hover bg};
z-index:999;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;}

#main a:hover{
color:{color:mainlink hover};
border-bottom:1px dotted {mainlink hover bg};
padding-bottom:2px;}

{block:IfMusicPlayer}
#lemusic{
text-align:center;
padding-bottom:4px;
padding-top:4px;
top:20px;
margin-left:664px;
width:74px;
position:fixed;
z-index:999;
padding-left:4px;
padding-right:4px;
opacity:.5;}

#lemusic:hover #legif{
    opacity:0;
    margin-top:-10px;
    z-index:-99;}

#legif{
    opacity:1;
    z-index:1;
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#letext{
opacity:0;
z-index:99;
padding:4px;
margin-top:0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#lemusic:hover #letext{
opacity:1;
margin-top:-5px;}

{/block:IfMusicPlayer}

#credits{
position:fixed;
bottom:5px;
right:5px;}

#credits a{
color:#999;
font-size:13px;
text-decoration:none;
opacity:.7;}

#pages{
position:fixed;
margin-left:900px;
top:20px;
color:{color:sidebar text};}

{CustomCSS}

</style>

{block:IndexPage}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

{block:IfInfiniteScroll}
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script>
$(function(){
var $container = $('#posts');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.entries',
});
});
$container.infinitescroll({
itemSelector : ".entries",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
{/block:IndexPage}

</head>

<body>

<div id="credits"><a title="ZuviaThemes" href="http://zuvia.tumblr.com">☡┬</a></div>

{block:IfMusicPlayer}
{block:IndexPage}
<div id="lemusic">
<div id="legif">
<img src="http://media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif"></div>
<div id="letext">
{text:Music}
</div>
</div>
{/block:IndexPage}
{/block:IfMusicPlayer}

<div class="pagination">
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">Back</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
</div>


<div id="wraps"></div>
<div id="wraps1"></div>

<div id="fill2"><h1>{title}</h1></div>



<div id="main">
<a href="/" class="main">home</a>
<a href="/ask" class="main">message</a>
<a href="/archive" class="main">archives</a>
</div>

<div id="all">

<div id="sidebar">
<img src="{image:sidebar}">
</div>

<div id="desci">

{block:IfLinks}
<div id="sd1">

<div id="port">
<img src="{PortraitURL-48}">
<div id="holder"></div>
</div>

<div id="extras">
{block:IfLink1}<a href="{text:Link1URL}" class="extras"> {text:Link1}</a>{/block:IfLink1}
{block:IfLink2}<a href="{text:Link2URL}" class="extras"> {text:Link2}</a>{/block:IfLink2}
{block:IfLink3}<a href="{text:Link3URL}" class="extras"> {text:Link3}</a>{/block:IfLink3}
</div>

</div>
{/block:IfLinks}

{description}
</div>

</div>


<div id="posts">

{block:Posts}

<div class="entries">

{block:Text}
{block:Title}
<h1><a href="{Permalink}">{Title} —  </a></h1>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}">{LinkCloseTag}</center>
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
{Caption}
{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
{/block:Photo}

{block:Photoset}
{block:IndexPage}<div class="photo">{Photoset-250}</div>{/block:IndexPage}
{block:permalinkpage}<div class="photo">{Photoset-500}</div>{/block:permalinkpage}
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
{/block:Photoset}

{block:Quote}
<h2>{Quote}</h2>
{block:Source}
<i><p align="right"><small>{Source}</small>{/block:Source}</i>
{/block:Quote}

{block:Link}
<h3><a href="{URL}" class="link" {Target}>{Name} → </a> </h3>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h1>— {Title}</h1>{/block:Title}
<div class="chat">{block:Lines}
{block:Label}
<b>{Label}</b>
{/block:Label}
{Line}<br />
{/block:Lines}</div>
{/block:Chat}

{block:Video}
{Video-250}
{block:permalinkpage}{Video-500}{/block:permalinkpage}
<center><i>{FormattedPlayCount}</i> plays</center><br />
{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
{Caption}
{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
{/block:Video}

{block:Audio}
<div class="cover">{block:AlbumArt}
<img src="{AlbumArtURL}">
{/block:AlbumArt}</div><div class="audio">{AudioPlayerGrey}</div>
<div class="what">
{block:Artist}
{Artist}
{/block:Artist} | {block:TrackName}
"{TrackName}"
{/block:TrackName} </div>
{block:IfShowCaptions}{block:Caption}<br />{Caption}{/block:Caption}{/block:IfShowCaptions}
{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}<br />
{Caption}
{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
{/block:Audio}

{block:Answer}
<div class="ask">{Asker} asked: {Question}</div>
<div class="answer"> {Answer}</div>
{/block:Answer}

{block:IndexPage}
<div class="reblog">
<a href="{Permalink}">{TimeAgo}</a> | <a href="{Permalink}">{NoteCount}</a>
</div>
<div class="reb2">
<a href="{ReblogURL}" target="_blank">Reblog?</a>
</div>
{/block:IndexPage}

</div>


{block:PermalinkPage}

<div class="permalink">
<div style="font-size: 11px;
font-family:tahoma;
padding-right:20px;
padding-bottom:10px;
margin-bottom:4px;
padding-top:5px;
color: {color:entry text};
text-align: center; ">
{block:Date}<b>Posted:</b> {TimeAgo}{/block:Date} {block:NoteCount} with {NoteCount} note(s){/block:NoteCount}<br>
{block:RebloggedFrom}
<b>Source:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a> & <b>Via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} </br>
{block:HasTags}<b>Tags:</b> {block:Tags}
<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}</div>
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
</div>

{/block:PermalinkPage}

            {/block:Posts}

</div>

</body>
</html>