Theme 21: Anna

<!--
Theme 21- Anna By Beautifully Flawless
DO NOT REMOVE CREDIT, OR YOU WILL BE REPORTED.
DO NOT REMOVE CREDIT, OR YOU WILL BE REPORTED.
DO NOT REMOVE CREDIT, OR YOU WILL BE REPORTED.
DO NOT REMOVE CREDIT, OR YOU WILL BE REPORTED.
DO NOT REMOVE CREDIT, OR YOU WILL BE REPORTED.
-->

<html>
<head>

<script type="text/javascript">
// <![CDATA[
var bgcolour="{color:Bubble Banner 1}"; // background colour
var fgcolour="{color:Bubble Banner 2}"; // foreground colour
var speed=90; // speed of bubbling, lower is faster
var shades=15; // number of shades of bubble

/****************************
* Bubbling Text Effect *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bubbcol=new Array();
var bubbler, bubbtxt;
var bubbchr=new Array();
window.onload=function() { if (document.getElementById) {
for (bubbler=0; bubbler<=shades; bubbler++) {
bubbtxt="#";
for (var i=1; i<6; i+=2) {
var bg=parseInt(bgcolour.substring(i,i+2),16);
bubbtxt+=dechex(Math.floor(bg+(parseInt(fgcolour.substring(i,i+2),16)-bg)*(bubbler/shades)));
}
bubbcol[bubbler+1]=bubbtxt;
}
bubbler=document.getElementById("bubble");
bubbtxt=bubbler.firstChild.nodeValue;
while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]);
for (var i=0; i<bubbtxt.length; i++) {
var bubbi=document.createElement("span");
bubbi.setAttribute("id", "bubb"+i);
bubbi.appendChild(document.createTextNode(bubbtxt.charAt(i)));
bubbler.appendChild(bubbi);
}
bubbler=setInterval ("bubbling()", speed);
}}

function dechex(dec) {
var hex=dec.toString(16);
if (dec<16) return "0"+hex;
else return hex;
}

function bubbling() {
for (var i=0; i<bubbtxt.length; i++) {
var bubbme=document.getElementById("bubb"+i);
if (bubbchr[i]) {
bubbme.style.color=bubbcol[bubbchr[i]];
bubbchr[i]=(bubbchr[i]+1)%bubbcol.length;
}
else if (Math.random()<0.75/bubbchr.length) bubbchr[i]=1;
}
}
// ]]>
</script>

<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="#000000" />
<meta name="color:text" content="#000" />
<meta name="color:Links" content="#f8989a" />
<meta name="color:link hover" content="#999" />
<meta name="color:Bubble Banner 1" content="#FA58D0" />
<meta name="color:Bubble Banner 2" content="#F5A9F2" />
<meta name="color:Scrollbar BG" content="#000" />
<meta name="color:Scrollbar" content="#fff" />
<meta name="color:PostsBG" content="#fff" />
<meta name="color:Permalink BG" content="#fff" />
<meta name="color:Permalink Text" content="#bbb" />
<meta name="color:Sidebar Image Border" content="#2E2E2E" />
<meta name="color:Sidebar BG" content="#000" />
<meta name="color:Sidebar Text" content="#fff" />
<meta name="color:Sidebar Border" content="#2E2E2E" />
<meta name="color:Sidebar Shadow" content="#2E2E2E" />
<meta name="color:Navigation Text" content="#fff" />
<meta name="color:Navigation Hover Text" content="#ddd" />
<meta name="color:Navigation Hover Border" content="#FA58D0" />
<meta name="color:Navigation Hover Shadow" content="#FA58D0" />
<meta name="color:Welcome To" content="#fff" />
<meta name="color:Welcome To Shadow" content="#FA58D0" />
<meta name="color:Banner" content="#fff" />
<meta name="color:Banner Shadow" content="#FA58D0" />
<meta name="color:Status BG" content="#000" />
<meta name="color:Status Text" content="#fff" />

<meta name="image:sidebar" content="http://static.tumblr.com/gdh5wux/8J5m7zpfa/tumblr_llbp3if4sa1qc1j5so1_500.png"/>
<meta name="image:background" content="" />

<meta name="text:Stats 1" content="INSERT STATS HERE" />
<meta name="text:Stats 2" content="INSERT STATS HERE" />
<meta name="text:Stats 3" content="INSERT STATS HERE" />
<meta name="text:Stats 4" content="Best Viewed With Google Chrome" />
<meta name="text:Link 1 URL" content="/submit" />
<meta name="text:Link 2 URL" content="/links" />
<meta name="text:Link 1" content="Submit" />
<meta name="text:Link 2" content="Links" />

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


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

::-webkit-scrollbar {width: 9px; height: 4px;background:transparent;}
::-webkit-scrollbar-thumb { background-color:{color:scrollbar};-webkit-box-shadow: inset 0 0 6px #000;-webkit-border-radius: 10px;
border-radius: 10px;
}

#tumblr_controls{
position:fixed !important;
}



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

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

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

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

@font-face {font-family:"stars";src:url('http://static.tumblr.com/hcfbjje/sfRlpm8t0/starsfromoureyes.ttf');}

@font-face{font-family:"oregano";src:url('http://static.tumblr.com/gdh5wux/mmimerymw/oregano-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;
color:{color:Text};
text-transform:uppercase;
}

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

a:hover{
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
text-shadow:0px 0px 20px #A4A4A4;
}

div#posts {
width:860px;
margin-left:500px;
float:left;
}

.entry {
float:left;
margin:2px;
overflow:hidden;
background-color:#fff;
border:1px solid #fff;
{block:IndexPage}
width:400px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
}

.entry:hover #permalink{
opacity:1.0;
-webkit-transition: opacity 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#permalink{
position:absolute;
background:rgba(0, 0, 0, 0.7);
border:1px solid #ddd;
width:auto;
height:20px;
bottom:15px;
left:15px;
overflow:hidden;
padding:3px;
opacity:0.0;
font-family:'stars';
font-size:15px;
color:{color:Permalink Text};
line-height:20px;
text-align:center;
letter-spacing:1px;
text-transform:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-transition: opacity 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

#permalink a{color:{color:Permalink Text};}

#info a{color:{color:Permalink Text};}

#info{
font-family:'silkscreen';
color:#888;
font-size:8px;
text-align:right;
line-height:15px;
margin-top:1px;
border-top:1px dotted #aaa;
text-transform:uppercase;
}

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

.title{
font-family:'stars';
text-transform:none;
font-size:20px;
line-height:30px;
color:#333;
text-align:center;
}

.quote{
font-family:'oregano';
font-size:15px;
text-transform:none;
line-height:25px;
text-align:right;
color:#aaa;
}

#ask{
border:2px solid #ddd;
margin-top:0px;
margin-left:5px;
overflow:hidden;
padding:4px;
box-shadow: 1px 1px 1px #000;
}

.askerimg img{
width:30px;
align:left;
float:left;
padding:1px;
background:#ddd;
margin-right:3px;
border-radius:3px;
box-shadow: 0px 0px 0px 2px #ddd;
}

blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 10px;
border-left: 7px solid #999999;
}

ul, ol, li{list-style:circle; margin:5px; margin-left:10px; padding-left:3px;}
.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:text};}

.notes img{width:10px; position:relative; top:3px;}

#bite{
position:fixed;
left:0px;
top:0px;
width:400px;
height:320px;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
z-index:10;
}

#bite img{
width:400px;
height:100%;
border:1px solid {color:Sidebar Image Border};
}

#bite a{
display:block
}

#bite .death {
margin-top:-40px;filter: alpha(opacity = 0);
opacity:0;-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}

#bite:hover .death {
margin-top:10px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
filter: alpha(opacity = 100);
filter: alpha(opacity = 100);
opacity:100;
}

.death{
width:395px;
height:300px;
margin-left:0px;
padding:3px;
color:{color:Sidebar Text};
background-color:{color:Sidebar BG};
border:1px solid {color:Sidebar Border};
box-shadow:1px 1px 1px {color:Sidebar Shadow};
}

#name{
color:#ffffff;
font-family:"caviardreams";
font-size:15px;
line-height:20px;
text-align:center;
border-bottom:1px dotted #dddddd;
text-transform:uppercase;
text-shadow:1px 0px 1px #FA58D0;
}

.heart {
display:block;
font-size:8px;
font-family:tinytots;
color:#ffffff;
line-height:10px;
text-transform:uppercase;
vertical-align:middle;
background: url('http://media.tumblr.com/tumblr_loepcrNSAs1qhcep0.gif') no-repeat left;
padding-left:20px;
padding-bottom:2px;
}

div#title1{
position:fixed;
font-family:"tangerine";
font-size:60px;
letter-spacing:1px;
text-transform:none;
text-align:center;
left:50px;
float:left;
top:400px;
color:{color:Welcome To};
text-shadow:1px 1px 2px {color:Welcome To Shadow};
}

div#title2{
position:fixed;
font-family:"lainie";
font-size:40px;
letter-spacing:3px;
text-transform:none;
left:90px;
top:460px;
float:left;
color:{color:Banner};
text-shadow:1px 1px 2px {color:Banner Shadow};
}

#status{
width:400px;
height:20px;
line-height:20px;
top:290px;
left:1px;
position:fixed;
z-index:99999;
text-align:center;
font-family:tinytots;
text-shadow:0px 0px 1px #FF00BF;
background-color:{color:Status BG};
opacity:0.5;
color:{color:Status Text};

}

#linkbox{
width:75px;
height:auto;
position:fixed;
left:413px;
top:5px;
z-index:999;
}

div.navigate a{
margin-bottom:20px;
font-size:36px;
text-align:center;
letter-spacing:2px;
text-transform:none;
display:block;
font-family:tangerine;
color:{color:Navigation Text};
}

div.navigate a:hover{
color:{color:Navigation Hover Text};
border-top:1px solid {color:Navigation Hover Border};
text-shadow:1px 0px 1px {color:Navigation Hover Shadow};
}

{CustomCSS}
</style>
<body>

<div id="title1">Welcome to</div>
<div id="title2"><span id="bubble">{title}</span></div>

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

<div class="death">
<div id="name">About The Blogette</div>
{description}
<div id="name">My Obsessions</div>
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
<div id="name">Statistics</div>
<center>
<div class="heart">INSERT STAT HERE</div>
<div class="heart">INSERT STAT HERE</div>
<div class="heart">INSERT STAT HERE</div>
</center>
<div id="name">Advice for the week</div>
<br><br><br><br>
</div>
</div>

<div id="linkbox">
<div class="navigate">
<a href="/">Home</a>
<a href="/ask">Inbox</a>
<a href="{text:Link 1 URL}">{text:Link 1}</a>
<a href="{text:Link 2 URL}">{text:Link 2}</a>
<a href="http://beautifully-flawless.tumblr.com/">Credit</a>
</div>
</div>

<div id="status">
Status:

<!--ONLINE-->
Online
{block:ifonline}
[<img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/bullets/58.gif">]
{/block:ifonline}

{block:ifnotonline}
[ ]
{/block:ifnotonline}
&nbsp&nbsp
<!--OFFLINE-->
Offline
{block:ifnotonline}
[<img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/bullets/58.gif">]
{/block:ifnotonline}

{block:ifonline}
[ ]
{/block:ifonline}
&nbsp&nbsp
<!--POST LIMIT-->
Post Limit
{block:ifpostlimit}
[<img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/bullets/58.gif">]
{/block:ifpostlimit}

{block:ifnotpostlimit}
[ ]
{/block:ifnotpostlimit}
&nbsp&nbsp
</div>

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

{block:Text}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}
<span class="entrytext">{Body}</span>
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:Text}

{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}
{Description}
{/block:Description}
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{block:Link}

{block:Photo}
{block:IndexPage}
<div id="permalink">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{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="500"/></a>
{LinkCloseTag}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
<div id="permalink">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{Photoset-400}
{/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}
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/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>
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:Chat}

{block:Audio}
<center>
<div style="width:350px;height:30px;">
<div style="float:left">{AudioPlayerWhite}</div>
<div style="margin-top:10px; float:right;">
{block:ExternalAudio}
{/block:ExternalAudio}
</div></div>
</center>
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:Audio}

{block:Video}
{block:IndexPage}
<center>
{Video-400}
</center>
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}
</center>
{/block:PermalinkPage}
{block:Video}

{block:Answer}
<div id="ask">
<div class="askerimg"><img src="{AskerPortraitURL-30}"></div>
{Asker} was like: {Question}</div>
<div style="font-family: tinytots; font-size: 8px;">
{Answer}<br>
</div>
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:Answer}

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

{block:ContentSource}<a href="{SourceURL}"> </a>{block:ContentSource}

{block:RebloggedFrom}
<a href="{ReblogParentURL}"> </a>
<a href="{ReblogRootURL}"> </a>
{/block:RebloggedFrom}

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


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

{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}
</div>
</body>
</html>