Theme 25: Felicity

<!----
THEME 25: Felicity
By:Beautifully Flawless
PLEASE KEEP ALL CREDITS! THANK YOU!
PLEASE KEEP ALL CREDITS! THANK YOU!
PLEASE KEEP ALL CREDITS! THANK YOU!
ENJOY:D
----->

<html>
<head>

<script type="text/javascript">
// <![CDATA[
var bgcolour="{color:Header Color 1}"; // background colour
var fgcolour="{color:Header Color 2}"; // foreground colour
var speed=100; // speed of bubbling, lower is faster
var shades=10; // 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="#fff" />
<meta name="color:text" content="#000" />
<meta name="color:Links" content="#535250" />
<meta name="color:link hover" content="#999" />
<meta name="color:Posts BG" content="#fff"/>
<meta name="color:Posts Border" content="#ddd" />
<meta name="color:Permalink BG" content="#fff" />
<meta name="color:Permalink Text" content="#000" />
<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 BG" content="#ddd" />
<meta name="color:Navigation Hover Text" content="#000" />
<meta name="color:Navigation Hover Shadow" content="#888" />
<meta name="color:Banner" content="#000" />
<meta name="color:Banner Shadow" content="#ddd" />
<meta name="color:Header Color 1" content="#d649cd"/>
<meta name="color:Header Color 2" content="#deccdd"/>
<meta name="color:Sidebar Border" content="#DECCDD"/>
<meta name="color:HOVER BG" content="#fff"/>
<meta name="color:HOVER Border" content="#BC12B1"/>
<meta name="color:HOVER Text Shadow" content="#BC12B1"/>
<meta name="color:HOVER Box Shadow" content="#D079CA"/>
<meta name="color:HOVER Sidebar BG" content="#fff"/>
<meta name="color:HOVER Sidebar Shadow" content="#ddd"/>
<meta name="color:HOVER Sidebar Border" content="#ddd"/>
<meta name="color:Blogroll BG" content="#fff"/>
<meta name="color:Blogroll Border" content="#DDA2DA"/>
<meta name="color:Blogroll Box Shadow" content="#888"/>

<meta name="image:sidebar" content="http://static.tumblr.com/gdh5wux/ZY5m856sw/females_detail_face_flow_flowing_fragment-fa233d9a64677f42ea481464d87868c7_h.jpg"/>
<meta name="image:background" content="" />

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

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

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

#tumblr_controls{
position:fixed !important;
-webkit-filter: invert(100%);
}


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

@font-face{font-family:"silkscreen";src:url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf');}

@font-face{font-family:"Tall";src:url('http://static.tumblr.com/w1f0ilq/4m9lyy51c/tall_film.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;
line-height:12px;
color:{color:Text};
text-transform:uppercase;
}

a:link, a:active, a:visited{
color:{color:Links};
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{
color:{color:Link Hover};
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
}

div#posts {
float:left;
width:850px;
z-index:99;
margin-left:450px;
}

.entry {
margin:3px;
float:left;
padding:6px;
border:1px solid {color:Posts Border};
background-color:{color:Posts BG};
{block:IndexPage}
width:320px;
{/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:0.8;
top:6px;
-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-color:{color:Permalink BG};
border:1px solid #ddd;
min-width:150px;
height:15px;
top:-17px;
left:10px;
overflow:hidden;
padding:5px;
opacity:0.0;
font-family:calibri;
font-size:8px;
color:{color:Permalink Text};
line-height:15px;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
border-radius:3px;
-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;
}

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

@font-face { font-family: "lily"; src: url('http://static.tumblr.com/gdh5wux/jMNmoz1x8/lilyscript.ttf'); }

.title{
font-family:'lily';
text-transform:none;
font-size:25px;
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;
}

asker{
font-family:'oregano';
font-size:10px;
text-transform:uppercase;
color:#888;
}

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

#ask{
padding:3px;
font-family:'silkscreen';
font-size:8px;
text-transform:uppercase;
color:#999;
}

#askbox{
border:3px solid #ddd;
margin-top:5px;
overflow:hidden;
padding:4px;
box-shadow: 1px 1px 1px #000;
}

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

#sidebar{
width:400px;
height:350px;
position:fixed;
left:15px;
top:0px;
border-radius:0px;
border:2px inset {color:Sidebar Border};
}

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

#contain{
color:#000;
top:350px;
left:45px;
width:200px;
position:fixed;
text-align:left;
border-radius:15px 0px 0px 15px;
-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;
opacity:1;}

#contain:hover{top:657px;opacity:1;}

@font-face{font-family:"quicksand";src:url('http://static.tumblr.com/fxpo5zq/ad0m5vybr/quicksand_light.otf');}

#containtab{
width:400px;
height:30px;
opacity:1;
color:#000;
font-size:25px;
line-height:10px;
margin-left:-30px;
text-align:center;
margin-bottom:-105px;
font-family:'quicksand';
border-radius:0px 0px 20px 20px;
background-color:{color:HOVER BG};
border:2px inset {color:HOVER Border};
text-shadow:1px 1px 5px {color:HOVER Text Shadow};
box-shadow:2px 1px 10px {color:HOVER Box Shadow};
}

#box{
width:400px;
height:300px;
color:black;
float:left;
z-index:99999;
overflow:hidden;
margin-top:-230px;
margin-left:-30px;
background-color:{color:HOVER Sidebar BG};
border:1px solid {color:HOVER Sidebar Border};
box-shadow: 0 0 20px {color:HOVER Sidebar Shadow};}


#name{
color:#000;
font-size:25px;
line-height:25px;
text-transform:none;
font-family:'Bilbo Swash';
border-bottom:1px solid #888;
}

@font-face { font-family: "Bilbo Swash"; src: url('http://static.tumblr.com/gdh5wux/JN4moz1dn/bilbo.ttf'); }

.heart {
display:block;
font-size:8px;
font-family:'tinytots';
color:#000;
line-height:10px;
text-align:center;
text-transform:uppercase;
vertical-align:middle;
-webkit-transition-duration:.50s;
background: url('http://lh5.ggpht.com/_njDosNyhJmA/TOnR2kjZlqI/AAAAAAAACNk/FnpKEFuCm5c/s400/coracaoroxo-cahveiga.png') no-repeat left;
padding-left:20px;
padding-bottom:2px;
}

div.navigate a{
height:20px;
width:70px;
border-radius:5px;
font-family:tinytots;
font-size:8px;
text-transform:uppercase;
margin:3px;
margin-left:10px;
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{
background-color:{color:Navigation Hover BG};
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;
}

#banner1{
position:fixed;
font-family:"tangerine";
font-size:80px;
line-height:60px;
text-transform:none;
top:10px;
left:20px;
text-align:center;
letter-spacing:1px;
color:{color:Banner};
text-shadow:1px 1px 1px {color:Banner Shadow};
}

#blogroll{
position:fixed;
width:420px;
height:60px;
margin-left:-10px;
margin-top:-60px;
background-color:{color:Blogroll BG};
border:1px solid {color:Blogroll Border};
box-shadow:2px 2px 10px {color:Blogroll Box Shadow};
}

{CustomCSS}
</style>
<body>

<div id="contain">
<div id="containtab"><br>HOVER</div>
<div id="box">
<div id="name">About the Blogette</div>
{description}
<div id="name">Stats</div>
<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>
<div id="name">Navigation</div>
<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>


<div id="sidebar">
<img src="{image:sidebar}">
<div id="blogroll">
<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="60px" height="60px" />{/block:Followed}{/block:Following}</marquee>
</div>
</div>

<div id="banner1"><span id="bubble">{title}</span></div>


<img style="position:fixed;right:0px;bottom:0px;height:260px;"src="http://static.tumblr.com/gdh5wux/1Mnm852h5/07.gif">

<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-250}
{/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>
{AudioPlayerWhite}
</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-250}
</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="askbox">
<div class="askerimg"><img src="{AskerPortraitURL-40}"></div>
<asker>{Asker}:</asker>
<div id="ask">{Question}</div>
</div>
{Answer}
<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>