Theme 8: Clarabelle

<!--Theme: Clarabelle By Beautifully Flawless-->
<!--Base Code By 0racular-->
<!--Do not remove credit-->
<!--Do not remove credit-->
<!--Do not remove credit-->

<head>


<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(300);} );


});
});
});
</script>

<!--Title Bar Maker-->
<script type="text/javascript">

//Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)
function tb8_makeArray(n){
this.length = n;
return this.length;
}

tb8_messages = new tb8_makeArray(1);
tb8_messages[0] = "ωєℓ¢σмє вєαυтιƒυℓ~!";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 80;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="color:Background" content="#ffffff" />
<meta name="color:Text" content="#000" />
<meta name="color:Title" content="#000000" />

<meta name="color:Navigation BG" content="#FF9FC8" />
<meta name="color:Navigation" content="#000000"/>
<meta name="color:Navigation Hover BG" content="#C9C6E3" />

<meta name="color:Link" content="#000000"/>
<meta name="color:Link Hover" content="#dddddd"/>

<meta name="color:Sidebar BG" content="#ffffff"/>

<meta name="color:Sidebar Hover BG" content="#ffffff"/>
<meta name="color:Sidebar Hover" content="#000000"/>

<meta name="color:Permalink BG" content="#ffffff"/>
<meta name="color:Permalink" content="#333"/>
<meta name="color:Permalink Border" content="#777"/>

<meta name="color:Scrollbar BG" content="#ffffff"/>
<meta name="color:Scrollbar" content="#FF9FC8"/>

<meta name="color:Banner 1" content="#008cff"/>
<meta name="color:Banner 2" content="#74aedf"/>
<meta name="color:Banner" content="#000000"/>
<meta name="color:Banner Shadow" content="#888"/>

<meta name="color:Posts BG" content="#ffffff" />
<meta name="color:Posts Border" content="#008cff"/>
<meta name="color:Posts Shadow" content="#008cff"/>

<meta name="color:HOVER TAB" content="#ffffff" />
<meta name="color:HOVER TAB Border" content="#ff6699" />

<meta name="image:sidebar" content="http://static.tumblr.com/gdh5wux/xHJm5fpdc/tumblr_m5dgwcanse1r2nqjxo1_500.jpg"/>
<meta name="image:background" content="" />
<meta name="image:favorite 1" content="http://i42.tinypic.com/fk2o3r.png"/>
<meta name="image:favorite 2" content="http://i40.tinypic.com/33xtz7r.png"/>
<meta name="image:favorite 3" content="http://i43.tinypic.com/2nsqr7p.png"/>
<meta name="image:favorite 4" content="http://i44.tinypic.com/121vot5.png"/>
<meta name="image:favorite 5" content="http://i41.tinypic.com/r0sew6.png"/>
<meta name="image:Vip 1" content="http://static.tumblr.com/nelpcva/UShm52di5/avatar_66e091343700_96.png" />
<meta name="image:Vip 2" content="http://static.tumblr.com/nelpcva/05Km52diu/avatar_ff8ad78f565a_96.png" />
<meta name="image:Vip 3" content="http://static.tumblr.com/nelpcva/ce5m52dl4/229261437250615815_g2k40yzx_c.jpg" />
<meta name="image:Vip 4" content="http://static.tumblr.com/nelpcva/2Tnm52dlr/adriana-lima-beauty-black-and-white-brazilian-girls-fashion-285549.jpg" />
<meta name="image:Vip 5" content="http://static.tumblr.com/nelpcva/79Lm52dme/avatar_2ffa5e0b52ff_96.png" />
<meta name="image:Favicon" content=""/>

<meta name="if:facebook" content="1" />
<meta name="if:twitter" content="1" />
<meta name="if:skype" content="1" />

<meta name="text:skype" content="" />
<meta name="text:twitter" content="" />
<meta name="text:facebook" content="" />
<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:Vip 1" content="BLOG NAME" />
<meta name="text:Vip 2" content="BLOG NAME" />
<meta name="text:Vip 3" content="BLOG NAME" />
<meta name="text:Vip 4" content="BLOG NAME" />
<meta name="text:Vip 5" content="BLOG NAME" />

<style type="text/css">


@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: "aspire"; src: url('http://static.tumblr.com/gdh5wux/Mtimequm2/aspire-demibold.ttf'); }


body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_m6ani47MHm1rqir0v.png), progress;}

::-webkit-scrollbar {width: 6px; height: 4px; background: {color:Scrollbar BG}; }
::-webkit-scrollbar-thumb { background-color: {color:scrollbar};}

#tumblr_controls{
position:fixed !important;
}

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 {
width:810px;
margin-left:380px;
float:left;
}

.entry {
margin:1px;
float:left;
background-color:#fff;
border: 1px solid #ddd;
{block:IndexPage}
width:400px;
{/block:IndexPage}
{block:PermalinkPage}
width:600px;
{/block:PermalinkPage}
}

.entry .permalink{
position:absolute;
margin-top:0px;
width:400px;
height:15px;
padding-top:0px;
padding-bottom:4px;
background-color:#fff;
overflow:hidden;
font-size:25px;
line-height:20px;
font-family:"lainie";
text-transform:none;
text-align:center;
opacity:0.0;
color:#000;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.entry:hover .permalink{
margin-top:20px;
overflow:visible;
opacity:0.8;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

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

.title{
font-family:lainie;
text-transform:none;
font-size:30px;
line-height:30px;
color:#888;
font-weight: normal;
text-shadow: 1px 0px 5px #888;
}

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

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

div#sidebar{
position:fixed !important;
width:350px;
height:630px;
margin-top:0px;
margin-left:10px;
padding:1px;
padding-bottom:2px;
background-color:{color:Sidebar BG};
overflow:hidden;
overflow-x:hidden;
-moz-box-shadow: 0 0 8px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 8px rgba(0,0,0,.2);
box-shadow: 0 0 8px rgba(0,0,0,.2);
}

#contain{
background-color:{color:Sidebar Hover BG};
font-family:'tinytots';
font-size:8px;
color:#000000;
text-align:center;
position:fixed;
top:0px;
left:-437px;
width:437px;
height:1500px;
z-index:999999;
-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
{left:0px;
opacity:1;}

#containtab {
text-align:center;
border-bottom:2px solid {color:HOVER TAB Border};
border-left: 2px solid {color:HOVER TAB Border};
border-right: 2px solid {color:HOVER TAB Border};
border-top: 2px solid {color:HOVER TAB Border};
margin-top:220px;
height:100px;
opacity:.6;
background-color:{color:HOVER TAB};
border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-left-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
margin-left:430px;
width: 50px;
}

#box
{width:426px;
height:auto;
margin-top:50px;
margin-left:5px;
color:{color:Sidebar Hover};
z-index:99999;
overflow:hidden;
vertical-align:text-bottom;
opacity:1;}

.navbuttons{
background-color:#FF9FC8;
color:{color:Navigation};
width:350px;
height:20px;
margin-top:3px;
border-radius:5px;
display:inline-block;
text-align:center;
font-family:"tinytots";
text-transform:Uppercase;
font-size:8px;
line-height:20px;}

.navbuttons:hover {
background-color:{color:Navigation Hover BG};
width: 250px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#name2{
font-size:20px;
line-height:21px;
margin:2px;
font-family:"caviardreams";
text-align:center;
text-transform:none;
color:#ff6699;
border-bottom:1px dotted #000000;
}

#name3{
font-size:25px;
line-height:21px;
margin:2px;
font-family:"aspire";
text-align:right;
text-transform:none;
color:#ff6699;
border-bottom:1px dotted #000000;
}

#portraitpic{
margin-left:2px;
margin-top:0px;
float:left;
border:0px solid
{color:Portrait Border};
padding:2px;
background-color:{color:Portrait BG};
}

.heart {display : block; font-size: 8px; text-align:center; font-family: 'tinytots'; line-height: 15px; text-indent : 5px; vertical-align : middle; background:
url('http://www.hellostar.org/wp-admin/images/q1.gif') no-repeat left; padding-left : 10px;
padding-bottom : 2px;}


.heart:hover {display : block; font-size: 8px; text-align:center; font-family:'caviardreams'; line-height: 15px; text-indent : 5px; vertical-align : middle; background : url('http://www.hellostar.org/wp-admin/images/q2.gif') no-repeat left;
padding-left : 10px; padding-bottom : 2px;}

#faves img {
opacity:1;
width:50px;
height:50px;
border-radius:0px;
border:1px dotted #fff;
-webkit-transition-duration:.7s;
}

#faves img:hover {
border-radius: 32px;
-webkit-transition: 0.2s ease-in;
border:1px dotted #fff;
opacity:.8;
}

#hover{
font-family:caviardreams;
font-size:20px;
color:#000000;
line-height:17px;
}

{CustomCSS}

</style>

{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(300);} );


});
});
});
</script>

{/block:IndexPage}

<title>{title}</title>

<link rel="shortcut icon" href="{image:favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />


<div id="sidebar">
<img style="width:350px; height:480px;"src="{image:sidebar}">
<div id="name2">Navigation</div>
<center>
<a href="/"><div class="navbuttons">REFRESH</div></a>
<a href="/ask"><div class="navbuttons">MESSAGE</div></a>
<a href="/faq"><div class="navbuttons">faq</div></a>
<a href="/LINK1"><div class="navbuttons">other links</div></a>
<a href="http://beautifully-flawless.tumblr.com/"><div class="navbuttons">Credit</div></a>
</center>
</div>
</div>

<div id="contain">
<div id="box" style="float:left">
<div id="name3">About the Blogette</div>
<div id="portraitpic">
<a href="/"><img src="{PortraitURL-64}"/></a>
</div>
{Description}
<br>

<div id="name3">My Obsessions</div>
Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc!  Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc! Put your obsessions here! Anything you love, crave, adore, etc!

<div id="name3">Stats</div>
<div class="heart">INSERT STAT HERE</div>
<div class="heart">INSERT STAT HERE</div>
<div class="heart">INSERT STAT HERE</div>
<div class="heart">INSERT STAT HERE</div>

<div id="name3">Favs</div>
<div id="faves" >
<center>
<a href="{text:favorite 1}.tumblr.com"><img src='{image:favorite 1}' title="{text:favorite 1}"/></a>
<a href="{text:favorite 2}.tumblr.com"><img src='{image:favorite 2}' title="{text:favorite 2}"/></a>
<a href="{text:favorite 3}.tumblr.com"><img src='{image:favorite 3}' title="{text:favorite 3}"/></a>
<a href="{text:favorite 4}.tumblr.com"><img src='{image:favorite 4}' title="{text:favorite 4}"/></a>
<a href="{text:favorite 5}.tumblr.com"><img src='{image:favorite 5}' title="{text:favorite 5}"/></a>

<div id="name3">Vips</div>
<center>
<a href="{text:Vip 1}.tumblr.com"><img src='{image:Vip 1}'title="{text: Vip 1 Name}"/></a>
<a href="{text:Vip 2}.tumblr.com"><img src='{image:Vip 2}'title="{text: Vip 2 Name}"/></a>
<a href="{text:Vip 3}.tumblr.com"><img src='{image:Vip 3}'title="{text: Vip 3 Name}"/></a>
<a href="{text:Vip 4}.tumblr.com"><img src='{image:Vip 4}'title="{text: Vip 4 Name}"/></a>
<a href="{text:Vip 5}.tumblr.com"><img src='{image:Vip 5}'title="{text: Vip 5 Name}"/></a>

<div id="name3">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="45px" height="45px" />{/block:Followed}{/block:Following}</marquee>
</center>
</div>
</div>
<div id="containtab">
<br>
<div id="hover">H<br>O<br>V<br>E<br>R</div>
</div>
</div>


<div style="width: 10px; no-repeat center scroll; position: fixed; top: 10px; right:170px;"><img src="http://static.tumblr.com/gdh5wux/opWm5foal/05.png"></div>










<div id="posts">

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

{block:IndexPage}
<div class="permalink">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> <img src="http://th98.photobucket.com/albums/l256/SoccerE92/myspace/th_ht13.gif"> <a href="{ReblogURL}" target="_blank"> reblog</a></span></div>
{/block:IndexPage}

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

{block:Link}
<a href="{URL}" class="title">{Name}</a>
{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="400"/></a></div>{LinkCloseTag}{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="450"/></a>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
<center>
{Photoset-400}
</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><div style="width:350px; height:30px;"><div style="float:left">{AudioPlayerBlack}</div><div style="margin-top:10px; float:right;">
{block:ExternalAudio}{/block:ExternalAudio}</div></div></center>
{/block:Audio}

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

{block:Answer}
<img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px; border:1px solid {color:border};"/>
{Asker}: {Question}<br>
{Answer}
{/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>
{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}">&nbsp;&rarr;</a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}">&larr;&nbsp;</a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>

</body>
</html>