Theme 26: Serena

<!--
Theme:26: Serena
Made By: Beauifully Flawless / Vanilla Beaux
Please Do Not Remove the credit from this blog unless I Say you can.
-->
<html>
<head>


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

<!--Variables-->

<meta name="color:Background" content="#000" />
<meta name="color:Text" content="#000000" />
<meta name="color:Link" content="#ddd" />
<meta name="color:Link Hover" content="#888" />
<meta name="color:Navigation BG" content="#fff" />
<meta name="color:Navigation Border" content="#888" />
<meta name="color:Navigation Text" content="#000" />
<meta name="color:Navigation Hover Text" content="#000" />
<meta name="color:Navigation Hover Shadow" content="#888" />
<meta name="color:Posts BG" content="#fff"/>
<meta name="color:Posts Border" content="#ddd"/>
<meta name="color:Title" content="#000"/>
<meta name="color:BigBar Border" content="#888"/>
<meta name="color:Sidebar Pic BG" content="#fff"/>
<meta name="color:Sidebar Pic Border" content="#888"/>
<meta name="color:Box BG" content="#fff"/>
<meta name="color:Box Border" content="#888"/>


<meta name="image:Background" content=""/>
<meta name="image:sidebar" content="http://static.tumblr.com/gdh5wux/5eYm86y3k/tumblr_m5i3ifp5yn1qdksdzo3_250.gif"/>
<meta name="image:fav 1" content="http://i42.tinypic.com/fk2o3r.png"/>
<meta name="image:fav 2" content="http://i42.tinypic.com/fk2o3r.png"/>
<meta name="image:fav 3" content="http://i42.tinypic.com/fk2o3r.png"/>
<meta name="image:fav 4" content="http://i42.tinypic.com/fk2o3r.png"/>
<meta name="image:fav 5" content="http://i42.tinypic.com/fk2o3r.png"/>

<meta name="text:favorite 1" content="BLOG NAME"/>
<meta name="text:favorite 2" content="BLOG NAME"/>
<meta name="text:favorite 3" content="BLOG NAME"/>
<meta name="text:favorite 4" content="BLOG NAME"/>
<meta name="text:favorite 5" content="BLOG NAME"/>
<meta name="text:STATS 1" content="INSERT STAT HERE" />
<meta name="text:STATS 2" content="INSERT STAT HERE" />
<meta name="text:STATS 3" content="INSERT STAT HERE" />
<meta name="text:STATS 4" content="INSERT STAT HERE" />
<meta name="text:signature" content="Your Name"/>

<meta name="if:online" content="0"/>
<meta name="if:offline" content="0"/>
<meta name="if:busy" content="0"/>
<meta name="if:queued" content="0"/>
<meta name="if:post limit" content="0"/>

<meta name="image:Background" content="" />

<!--Variables-->
<style type="text/css">


::-webkit-scrollbar {width: 9px; height: 3px; background:transparent;}
::-webkit-scrollbar-thumb {background:{color:Scrollbar}; border-radius:5px; -webkit-box-shadow: inset 0 0 20px #000000;}

#tumblr_controls{
position:fixed !important;
}

@font-face{font-family:"tinytots";src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}

@font-face{font-family:"caviardreams";src:url('http://static.tumblr.com/alux5te/8BFltyod3/caviardreams.ttf'); }

@font-face{font-family:"lainie";src:url('http://static.tumblr.com/oetadgc/Uialyjfaa/laine.ttf');}

@font-face{font-family:"tangerine";src:url('http://static.tumblr.com/gdh5wux/MAfm61bhn/tangerine_regular.ttf');}

body {
margin: 0px;
background-color:{color:background};
background-image:url('{image:Background}');
background-attachment:fixed;
background-repeat:repeat;
background-position:center;
}

body, div, p, textarea, submit, input {
font-family:"tinytots";
font-size:8px;
line-height:12px;
color:{color:Text};
text-transform:uppercase;
}

a:link, a:active, a:visited{
color:#ddd;
text-decoration:none;
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
}

a:hover{
color:#fff;
-webkit-transition:color 0.4s ease-out;
-moz-transition:color 0.4s ease-out;
}

.left{
float:left;
margin-right:200px;
width:1200px;
}

#container{
position:relative;
margin:auto;
width:1200px;
}

div#posts {
float:left;
width:1200px;
margin-left:20px;
margin-top:200px;
}

.entry {
margin:4px;
float:left;
overflow:hidden;
border:1px solid #ddd;
background-color:#fff;
{block:IndexPage}
width:220px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
}

.perma{
opacity: 0.0;
filter:alpha(opacity = 0);
margin-top:-21px;
width:0px;
height:30px;
line-height:30px;
font-size:9px;
position:absolute;
text-align:center;
z-index:800;
color:#000;
}

a.p{color:#fff;}


.entry:hover .perma {
opacity: 1;
transition: all 0.4s linear;
filter: alpha(opacity = 100);
-webkit-transition: opacity 0.4s linear;
-moz-transition: all 0.4s linear;
}

.likep{
top:26px;
left:5px;
z-index:99;
width:21px;
height:20px;
overflow:hidden;
position: absolute;
}

.likep img {
width:21px;
height:20px;
webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.rep{
top:26px;
left:29px;
width:24px;
height:20px;
overflow:hidden;
position:absolute;
z-index:99;
}

.rep img{
width:24px;
height:20px;
line-height:30px;
display:inline;
}


.likep a:hover{background-position: 0px 0px;}

.likep a{
background-image: url("http://static.tumblr.com/uiqhh9x/BPnlzww8v/like.png");
background-position:0px 0px;
display:block;
z-index:99;
webkit-transition: all 0s linear;
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
transition: all 0s linear;
}

.not{
position:absolute;
background: url("http://static.tumblr.com/uiqhh9x/X6Ym17xp2/middle.png");
height:20px;
font-size:11px;
line-height:20px;
color:#fff;
position:absolute;
top:26px;
left: 56px;
padding-left:4px;
padding-right:4px;
-moz-border-radius:2px;
border-radius:2px;
}

.not a{
color:#fff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

.entry:hover .not, .entry:hover .rep, .entry:hover .likep{opacity: 0.8;filter: alpha(opacity = 80);}

.not:hover , .rep:hover, .likep:hover{opacity: 1!important;filter: alpha(opacity = 100)!important;}


#infscr-loading{
bottom: -70px;
position: absolute;
left: 50%;
margin-left:-8px;
width:16px;
height:11px;
overflow:hidden;
margin-bottom: 50px;
}

.title{
font-family:'caviardreams';
text-transform:uppercase;
text-align:center;
font-size:20px;
line-height:30px;
color:#000;
}

.quote{
font-family:caviardreams;
font-size:12px;
color:#888;
text-transform:none;
line-height:10px;
text-align:center;
}

blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 10px;
border-left: 1px dotted #555555;
}

ul, ol, li{list-style:none; margin:0px; padding:0px;}
.user_1 .label, .user_4 .label, .user_7 .label, .user_2 .label, .user_5 .label, .user_8 .label, .user_3 .label, .user_6 .label,
.user_9 .label {color:{color:text};}
.notes img{width:10px; position:relative; top:3px;}

.infinite {
align:right;
background:#eee;
color:black;
margin:3px 0px 5px 66px;
padding:7px;
padding-top:5px;
position:relative;
border-radius:5px;
}

.infinite span{
display:block;
position:absolute;
width:1px;height:1px;
font-size: 8px;
font-family:tinytots;
line-height:1px;
left:-10px;
top:10px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:10px solid #ddd;
}

.askborder{float:left;margin:1px 4px 0 0;}


#Bigbox{
position:fixed;
width:1200px;
height:200px;
top:0px;
margin-left:0px;
background-image:url('http://static.tumblr.com/gdh5wux/EVAm7hth0/tumblr_m3sd0v7kfw1qhxwq3.gif');
background-position:center;
background-attachment: fixed;
background-repeat: repeat;
border:1px solid {color:BigBar Border};
z-index:999;
}

#Sidebarpic{
position:absolute;
width:180px;
height:180px;
text-align:center;
font-family:tinytots;
background-color:{color:Sidebar Pic BG};
border:1px solid {color:Sidebar Pic Border};
top:8px;
left:10px;
}

#Sidebarpic img{width:100%;height:100%;}

#description{
position:absolute;
top:8px;
left:200px;
height:180px;
width:300px;
text-align:center;
font-family:tinytots;
background-color:{color:Box BG};
border:1px solid {color:Box Border};
}

#Stats{
position:absolute;
top:8px;
left:510px;
height:90px;
width:300px;
text-align:center;
font-family:tinytots;
background-color:{color:Box BG};
border:1px solid {color:Box Border};
}

#Navigation{
position:absolute;
top:108px;
left:510px;
width:300px;
height:80px;
text-align:center;
font-family:tinytots;
background-color:{color:Box BG};
border:1px solid {color:Box Border};
}

#blogs1{
position:absolute;
top:8px;
left:820px;
width:360px;
height:90px;
text-align:center;
background-color:{color:Box BG};
border:1px solid {color:Box Border};
}

#blogs2{
position:absolute;
top:108px;
left:820px;
width:360px;
height:80px;
text-align:center;
background-color:{color:Box BG};
border:1px solid {color:Box Border};
}

#name{
color:{color:text};
font-family:'halohandletter';
font-size:25px;
line-height:20px;
text-align:right;
border-bottom:1px dotted #000;
text-transform:none;
}

#faves img {
width:60px;
height:60px;
padding:0px;
margin:3px;
border-radius:0px;
-webkit-transition-duration:.7s;
}

#faves img:hover {
-webkit-transition: 0.5s ease-in;
border-radius:32px;
opacity:0.5;
padding:0px;
}

div.navigate a{
height:20px;
width: 70px;
font-family:tinytots;
font-size:8px;
text-transform:uppercase;
margin-left:20px;
margin-top:10px;
margin-bottom:5px;
float:left;
text-align:center;
line-height:20px;
color:{color:Navigation Text};
background-color:{color:Navigation BG};
border:1px dotted {color:Navigation Border};
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
transition:all 1s ease-in;
}


div.navigate a:hover{
color:{color:Navigation Hover Text};
text-shadow:1px 0px 1px {color:Navigation Hover Shadow};
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
transition:all 1s ease-out;
}

signature{font-family:'lovenote';font-size:30px;line-height:0px;color:#888; text-shadow:2px 2px 3px #ddd;text-transform:none;}

@font-face { font-family: "halohandletter"; src: url('http://static.tumblr.com/loouiuu/Ttaloide6/halohandletter.ttf'); }

@font-face { font-family: "lovenote"; src: url('http://static.tumblr.com/4yxykdm/k6plrfhwf/ck_love_note.ttf'); }

{CustomCSS}
</style>
<body>
<div id="container">
<div class="left">

<div id="Bigbox">

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

<div id="description">
<br>
<img style="margin-left:5px; margin-top:0px;" src="http://static.tumblr.com/gdh5wux/Ra3m7f5gr/58.png">
<br><br>
{description}
<br><br><br>
<signature>xoxo {text:signature}</signature>
</div>
<div id="Stats">
<div class="heart">{text:STATS 1}</div>
<div class="heart">{text:STATS 2}</div>
<div class="heart">{text:STATS 3}</div>
<div class="heart">{text:STATS 4}</div>
<br>
<font style="font-family:halohandletter; font-size:25px; color:#888; text-transform:none;">Status:</font>
<br>
<!--ONLINE-->
Online
{block:ifonline}
[<img src="http://i1132.photobucket.com/albums/m579/mag1ckingd0m/Heart%20Pixels/th_103.gif">]
{/block:ifonline}

{block:ifnotonline}
[ ]
{/block:ifnotonline}
&nbsp&nbsp
<!--OFFLINE-->
Offline
{block:ifnotonline}
[<img src="http://i1132.photobucket.com/albums/m579/mag1ckingd0m/Heart%20Pixels/th_103.gif">]
{/block:ifnotonline}

{block:ifonline}
[ ]
{/block:ifonline}
&nbsp&nbsp
<!--BUSY-->
Busy
{block:ifbusy}
[<img src="http://i1132.photobucket.com/albums/m579/mag1ckingd0m/Heart%20Pixels/th_103.gif">]
{/block:ifbusy}

{block:ifnotbusy}
[ ]
{/block:ifnotbusy}
&nbsp&nbsp
<!--POST LIMIT-->
Queued
{block:ifqueued}
[<img src="http://i1132.photobucket.com/albums/m579/mag1ckingd0m/Heart%20Pixels/th_103.gif">]
{/block:ifqueued}

{block:ifnotqueued}
[ ]
{/block:ifnotqueued}
&nbsp&nbsp
<!--POST LIMIT-->
Post Limit
{block:ifpostlimit}
[<img src="http://i1132.photobucket.com/albums/m579/mag1ckingd0m/Heart%20Pixels/th_103.gif">]
{/block:ifpostlimit}

{block:ifnotpostlimit}
[ ]
{/block:ifnotpostlimit}
&nbsp&nbsp
</div>
<div id="Navigation">
<div class="navigate">
<center>
<a href="/">Home</a>
<a href="/ask">Inbox</a>
<a href="/submit">Submit</a>
<a href=".faves">Favs</a>
<a href="/links">Links</a>
<a href="http://beautifully-flawless.tumblr.com/">Credit</a>
</center>
</div>
</div>
<div id="blogs1">
<div id="name">Favorites</div>
<div id="faves">
<marquee behavior="scroll" scrollamount="5" direction="left" onmouseover="this.stop();" onmouseout="this.start();"><a href="http://{text:favorite 1}.tumblr.com">
<img src='{image:fav 1}' title="{text:favorite 1}"/></a>

<a href="http://{text:favorite 2}.tumblr.com">
<img src='{image:fav 2}' title="{text:favorite 2}"/></a>

<a href="http://{text:favorite 3}.tumblr.com">
<img src='{image:fav 3}' title="{text:favorite 3}"/></a>

<a href="http://{text:favorite 4}.tumblr.com">
<img src='{image:fav 4}' title="{text:favorite 4}"/></a>

<a href="http://{text:favorite 5}.tumblr.com">
<img src='{image:fav 5}' title="{text:favorite 5}"/></a></marquee>
</div>
</div>
<div id="blogs2">
<div id="name">Blogroll</div>
<marquee behavior="scroll" scrollamount="5" direction="left" onmouseover="this.stop();" onmouseout="this.start();">{block:Following}{block:Followed}<a target='_blank' href='{FollowedURL}'><img border='0' src='{FollowedPortraitURL-96}' width="70px" height="70px" />{/block:Followed}{/block:Following}</marquee>
</div>
</div>


<div id="posts">
{block:Posts}
<div class="entry">

{block:IndexPage}
<div class="perma">

<div class="likep">
<a id="like{PostID}"href="javascript:likelink('{PostID}','{Permalink}','');"><img src="http://static.tumblr.com/lba83dv/OUUltd958/spacer.gif"width="21" height="20"alt="Like this post"id="likeimage{PostID}"/></a>
</div>

<div class="rep"><a href="{reblogurl}"target="_blank"><img src="http://static.tumblr.com/uiqhh9x/OAClzwwao/reblog.png"width="30"/></a></div>

<div class="not">
<a id="notes{PostID}"href="{Permalink}">{NoteCount}</a></div>
</div>
{/block:IndexPage}

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

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

{block:Photo}
{block:IndexPage}
{LinkOpenTag}
<div class="photo"><a href="{permalink}">
<img class="photo"src="{PhotoURL-HighRes}"alt="{PhotoAlt}"width="100%"></a></div>
{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<a href="{permalink}"><img class="photo"src="{PhotoURL-HighRes}"alt="{PhotoAlt}"width="100%"></a>
{LinkCloseTag}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
<center>
{Photoset-250}
</center>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Photoset-500}
</center>
{/block:PermalinkPage}
{/block:Photoset}

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

{block:Chat}
{block:Title}
<span class="title">{Title}</span>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
<center>{AudioPlayerWhite}</center>
{/block:Audio}

{block:Video}
{block:IndexPage}
<center>
{Video-250}
</center>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}
</center>
{/block:PermalinkPage}
{block:Video}

{block:Answer}
<img style="border:1px solid #aaa; width:30px; height:30px;"src="{AskerPortraitURL-30}"align="left"class="askborder">
<div class="infinite">
<span>
</span>
{Asker}:{Question}&nbsp;
</div>
<div style="margin-top:-5px;">
<br>{Answer}
</div>
{block:IndexPage}
{/block:IndexPage}
{/block:Answer}

{block:PermalinkPage}
<center>
<br>
{block:Caption}
{Caption}
{/block:Caption}

{block:NoteCount}
{NoteCountWithLabel}
{/block:NoteCount}

{block:HasTags}
&middot;{block:Tags}<a href="TagURL">#{Tag}</a>{/block:Tags}
{/block:hasTags}
</center>
{/block:PermalinkPage}


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

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

{block:IndexPage}
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function () {
var $content = $('#posts');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextPage',
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
// call masonry as a callback.
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(400);} );


});
});
});
</script>
{/block:IndexPage}

{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>
<script type="text/javascript" src="http://.ic.tumblr.com/uiqhh9x/aK8m1cpdr/like2.js"></script>
<iframe id="likeiframe" style="width: 0px; height: 0px; border:0px;"></iframe>
<span id="scriptsinsert"> </span>
</body>
</html>