Theme 9: Stella

<!--
Theme by Beautifully Flawless
Named After coolcutestylish.tumblr.com
Base cody by LuxuriousIndulgence
DONT REMOVE CREDIT.
----->

<html>
<head>

<script type="text/javascript">
// <![CDATA[
var bgcolour= "#AD79AA"; // background colour
var fgcolour= "#8b8b8b"; // 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:Banner" content="#000000" />
<meta name="color:HOVER Color" content="#000000" />
<meta name="color:Player Border" content="#f8989a" />
<meta name="color:Player Border Hover" content="#ffdfdf" />
<meta name="color:Posts BG" content="#ffffff" />
<meta name="color:Scrollbar" content="#000000" />
<meta name="color:Scrollbar BG" content="#ffffff" />
<meta name="color:Sidebar BG" content="#ffffff" />
<meta name="color:Sidebar Border" content="AD79AA"/>
<meta name="color:Text" content="#000000" />
<meta name="color:Scrollbar" content="#B289A9" />
<meta name="color:Scrollbar BG" content="#000000" />
<meta name="color:Link" content="#000000" />
<meta name="color:Link Hover" content="#B289A9" />
<meta name="color:Navigation BG" content="#ffffff" />
<meta name="color:Navigation" content="#000000" />
<meta name="color:Navigation Border" content="#e7318e" />
<meta name="color:Posts Border" content="#AD79AA" />
<meta name="color:Permalink BG" content="#ffffff" />
<meta name="color:Permalink" content="#000000" />
<meta name="color:Title" content="#B289A9" />

<meta name="image:Sidebar" content="http://static.tumblr.com/gdh5wux/6Brm63kp1/glamourous.jpg"/>
<meta name="image:Background" content=""/>
<meta name="image:Right Sidebar" content="http://static.tumblr.com/gdh5wux/PSim63knj/140174607122135194_mni0mvt0_c.jpg" />
<meta name="image:Left Sidebar" content="http://static.tumblr.com/gdh5wux/wRem63koc/174866398001883573_jrtoymm0_b.jpg" />

<meta name="image:Fav 1" content="http://i42.tinypic.com/fk2o3r.png" />
<meta name="image:Fav 2" content="http://i40.tinypic.com/33xtz7r.png" />
<meta name="image:Fav 3" content="http://i43.tinypic.com/2nsqr7p.png" />
<meta name="image:Fav 4" content="http://i44.tinypic.com/121vot5.png" />
<meta name="image:Fav 5" content="http://i41.tinypic.com/r0sew6.png" />

<meta name="text:Fav 1" content="BLOG NAME"/>
<meta name="text:Fav 2" content="BLOG NAME"/>
<meta name="text:Fav 3" content="BLOG NAME"/>
<meta name="text:Fav 4" content="BLOG NAME"/>
<meta name="text:Fav 5" content="BLOG NAME"/>

<meta name="text:Fav 1 URL" content="BLOG NAME"/>
<meta name="text:Fav 2 URL" content="BLOG NAME"/>
<meta name="text:Fav 3 URL" content="BLOG NAME"/>
<meta name="text:Fav 4 URL" content="BLOG NAME"/>
<meta name="text:Fav 5 URL" content="BLOG NAME"/>


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

::-webkit-scrollbar {width: 9px; height: 4px;background:transparent;}
::-webkit-scrollbar-thumb { background-color:#ddd;-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: "blackswan";
src: url('http://static.tumblr.com/q54tzar/7POm34eyl/a_s_black_swan_3_.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: {color:Link};
text-decoration: none;
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
}

a:hover{
color:{color:Link Hover};
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
text-shadow:0px 0px 1px {color:Link Hover Shadow};
}

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

.entry {
float:left;
margin:5px;
overflow:hidden;
background-color:{color:Posts BG};
border:1px solid {color:Posts Border};
{block:IndexPage}
width:250px;
{/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(255, 255, 255, 0.9);
border-bottom:3px solid {color:Posts Border};
width:250px;
height:30px;
top:0px;
left:0px;
overflow:hidden;
padding:5px;
opacity:0.0;
font-family:calibri;
font-size:8px;
color:#aaa;
line-height:15px;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
-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;
}

.title{
font-family: blackswan;
text-transform:none;
font-size: 40px;
line-height:100%;
text-align: center;
color: {color:Title};
text-shadow:0px 0px 5px #888;
}

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

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

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

#askbox{
border:3px solid #ddd;
margin-top:0px;
margin-left:5px;
overflow:auto;
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{
position:fixed !important;
width:350px;
height:640px;
left:0px;
top:0px;
overflow:hidden;
background-position:center;
background-repeat:no-repeat;
background-color:#000000;
background-image:url('{image:sidebar}');
border: 1px solid {color:Sidebar Border};
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}

#sidebar:hover #des{
opacity:1;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}

#des{
position:absolute;
width:350px;
height:640px;
left:0px;
top:0px;
overflow:hidden;
opacity:0;
background-color:#ffffff;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}

.heart {
display : block;
-height: 15px;
border-bottom : 1px  #f4f4f3;
text-indent : 5px;
vertical-align : left;
background:
url('http://www.hellostar.org/wp-admin/images/q1.gif') no-repeat left; padding-left : 10px;
padding-bottom : 2px;
}

.heart:hover {
display : block;
-height: 15px;
border-bottom : 1px  #E0DCD6;
text-indent : 5px;
vertical-align : left;
background : url('http://www.hellostar.org/wp-admin/images/q2.gif') no-repeat left;
padding-left : 10px;
padding-bottom : 2px;
}

#faves img {
width:60px;
height:60px;
border:3px solid #ddd;
-webkit-transition-duration:.7s;
}

div.navigate a{
float:center;
width:70px;
height:20px;
padding:2px;
margin:3px;
line-height:20px;
text-align:center;
display:inline-block;
text-transform:uppercase;
color:{color:Navigation};
background-color:{color:Navigation BG};
border:1px solid {color:Navigation Border};
}

#name2{
font-size:25px;
line-height:20px;
margin:0px;
font-family:"lainie";
text-align:right;
text-transform:none;
color:{color:Text};
border-bottom:1px dotted {color:Text};
}

div#sidebanner{
color: {color:Banner};
position:fixed !important;
top:0px;
left:30px;
font-family:"blackswan";
font-size:60px;
text-align:center;
text-shadow:1px 1px 11px #ffffff;
text-transform:none;
}

#portraitpic img{
margin-left:2px;
margin-top:0px;
float:left;
padding:3px;
width:80px;
background-color:#ddd;
}

#rightpic img{
float:right;
width:90px;
height:90px;
margin-right:0px;
margin-top:-5px;
padding:3px;
background-color:#ddd;
}

{CustomCSS}
</style>
<body>

<div id="sidebar">
<div id="des">
<div id="sidebanner"><span id="bubble">{title}</span></div>

<br><br><br><br><br><br>

<div id="name2">About the Blogette</div>
<div id="portraitpic"><a href="/"><img src="{PortraitURL-96}"/></a></div>
{description}

<div id="name2">Jadore</div>
<br>
<div id="rightpic"><img src="{image:Right Sidebar}"></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
<br><br><br><br><br><br><br><br>

<div id="name2">Disclaimer</div>
None of the pictures reblogged or posted are mines unless stated or watermarked.


<div id="name2">Stats</div>
<center>
<div class="heart">WRITE STATS HERE</div>
<div class="heart">WRITE STATS HERE</div>
<div class="heart">WRITE STATS HERE</div>
<div class="heart">best viewed on google chrome</div>
</center>


<div id="name2">Navigation</div>
<div class="navigate">
<a href="/">Home</a>
<a href="/ask">Ask</a>
<a href="/submit">Submit</a>
<a href="/">Favs</a>
<a href="http://beautifully-flawless.tumblr.com/">Credit </a>
</div>

<div id="name2">Favs</div>
<div id="faves" >
<a href="{text:Fav 1 URL}"><img src='{image:Fav 1}' title="{text:Fav 1}"/></a>
<a href="{text:Fav 2 URL}"><img src='{image:Fav 2}' title="{text:Fav 2}"/></a>
<a href="{text:Fav 3 URL}"><img src='{image:Fav 3}' title="{text:Fav 3}"/></a>
<a href="{text:Fav 4 URL}"><img src='{image:Fav 4}' title="{text:Fav 4}"/></a>
<a href="{text:Fav 5 URL}"><img src='{image:Fav 5}' title="{text:Fav 5}"/></a>
</div>

<div id="name2">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="60px" height="60px" />{/block:Followed}{/block:Following}</marquee>
</div>
</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">
posted {timeago}<br>
<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">
posted {timeago}<br>
<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>
<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-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}
<img src="{AskerPortraitURL-40}" width="40" align="left" style="margin-right:6px; box-shadow: 1px 1px 1px #000; padding:3px; background:#ddd;"/>
<div id="askbox">
<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>