Theme 42: Belle

<!----
THEME : 41- Belle
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"
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}

<meta name="color:Background" content="#000000"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Scrollbar" content="#fff"/>
<meta name="color:Link" content="#1B73CB"/>
<meta name="color:Link Hover" content="#888"/>
<meta name="color:Link Hover Shadow" content="#ddd"/>
<meta name="color:Navigation BG" content="#000" />
<meta name="color:Navigation Border" content="#1B73CB" />
<meta name="color:Navigation Text" content="#fff" />
<meta name="color:Navigation Hover BG" content="#0F87FF" />
<meta name="color:Navigation Hover Text" content="#fff" />
<meta name="color:Navigation Hover Shadow" content="#0F87FF" />
<meta name="color:Posts BG" content="#fff"/>
<meta name="color:Posts Border" content="#1B73CB"/>
<meta name="color:Posts Shadow" content="#1B73CB"/>
<meta name="color:Title" content="#888"/>
<meta name="color:Title Shadow" content="#1B73CB"/>
<meta name="color:Side BG" content="#1E90FF"/>
<meta name="color:Side Shadow" content="#000"/>
<meta name="color:Sidebar BG" content="#000"/>
<meta name="color:Sidebar Border" content="#1B73CB"/>
<meta name="color:Sidebar Shadow" content="#1E90FF"/>
<meta name="color:Banner" content="#fff"/>
<meta name="color:Banner Shadow" content="#1B73CB"/>
<meta name="color:Banner F.Letter" content="#1B73CB"/>
<meta name="color:Banner F.Letter Shadow" content="#1B73CB"/>
<meta name="color:Sidebar Hover BG" content="#000"/>
<meta name="color:Header" content="#fff"/>
<meta name="color:Header Shadow" content="#ddd"/>
<meta name="color:Header Border" content="#1B73CB"/>
<meta name="color:Header F.Letter" content="#1B73CB"/>
<meta name="color:Header F.Letter Shadow" content="#1B73CB"/>
<meta name="color:Favorites Shadow" content="#1E90FF"/>
<meta name="color:Permalink BG" content="#000"/>
<meta name="color:Permalink Text" content="#fff"/>
<meta name="color:ScrollBar" content="#1E90FF"/>

<meta name="image:Background" content=""/>
<meta name="image:sidebar" content="" />
<meta name="image:fav 1" content="http://static.tumblr.com/nelpcva/UShm52di5/avatar_66e091343700_96.png"/>
<meta name="image:fav 2" content="http://i42.tinypic.com/fk2o3r.png"/>
<meta name="image:fav 3" content="http://static.tumblr.com/gdh5wux/Vfom59kuk/avatar_c6bfafc8cd14_96.png"/>
<meta name="image:fav 4" content="http://static.tumblr.com/gdh5wux/9qmm59ku4/avatar_2ffa5e0b52ff_96.png"/>
<meta name="image:fav 5" content="http://static.tumblr.com/gdh5wux/mgam59kul/avatar_81e6ccc38792_96.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"/>

<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: "blackswan"; src: url('http://static.tumblr.com/q54tzar/7POm34eyl/a_s_black_swan_3_.ttf'); }

@font-face { font-family: "brock"; src: url('http://static.tumblr.com/gdh5wux/aMcmequju/brockscript.ttf'); }

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


@font-face{ font-family:"chopin"; src:url('http://static.tumblr.com/gdh5wux/FYdm826v4/chops___.ttf'); }


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

::-webkit-scrollbar {width: 6px; height: 4px; background:black; }
::-webkit-scrollbar-thumb {background-color:{color:ScrollBar};
-webkit-box-shadow: inset 0 0 20px #000000;border-bottom-left-radius:10px; border-bottom-right-radius:10px;}

#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:920px;
margin-left:430px;
float:left;
}

.entry {
margin:2px;
float:left;
background-color:{color:Posts BG};
border:1px solid {color:Posts Border};
box-shadow:0px 0px 5px {color:Posts Shadow};
{block:IndexPage}
width:300px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
}

.entry .permalink{
position:absolute;
width:auto;
height:30px;
padding:1px;
border-radius:10px;
margin-top:10px;
margin-left:5px;
background-color:{color:Permalink BG};
color:{color:Permalink Text};
overflow:hidden;
font-family: "caviardreams";
text-transform: uppercase;
font-size:15px;
line-height:25px;
text-align:center;
opacity:0.0;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.entry:hover .permalink{
margin-top:0px;
overflow:visible;
-webkit-transition: all 0.4s linear; 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:{color:Title};
font-weight: normal;
text-shadow: 1px 0px 5px {color:Title Shadow};
}

#ask{
border-radius:5px;
border:1px solid #888;
margin:3px;
min-height:30px;
padding:3px;
background-color:transparent;
box-shadow:0px 0px 5px #ddd;
font-family:tinytots;
font-size:8px;
}

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

#sidee{
position:fixed;
background-color:{color:Side BG};
-webkit-box-shadow: inset 0 0 20px {color:Side Shadow};
width:10px;
height:100%;
margin-left:150px;
margin-top:-1px;
}

#side{
position:fixed;
background-color:{color:Side BG};
-webkit-box-shadow: inset 0 0 20px {color:Side Shadow};
width:10px;
height:100%;
margin-left:170px;
margin-top:-1px;
}

.heart {display:block; line-height:10px; color:#fff; text-align:center; font-family:tinytots; text-indent : 5px; vertical-align : middle; background:
url('http://i171.photobucket.com/albums/u300/ferny-dust/sozai/bullets/10.gif') no-repeat left; padding-left:10px;
padding-bottom:2px;}


#butterfly img{
position:fixed;
width:200px;
margin-left:50px;
margin-top:350px;
z-index:99;
}

#sidebar{
position:fixed;
background-color:{color:Sidebar BG};
border:4px double {color:Sidebar Border};
box-shadow: 0 0 20px {color:Sidebar Shadow};
width: 350px;
height:280px;
margin-left:50px;
margin-top:50px;
z-index:999;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}

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

#sidebar:hover #box{
opacity:1;
margin-top:10px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

#sidebar:hover #titlee{
opacity:1.0;
margin-left:-10px;
margin-top:-340px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

#sidebar:hover #desc {
opacity: 0.8;
transition: all 0.9s ease-out;
-o-transition-transition: all 0.9s ease;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
}

#titlee{
position:fixed;
margin-left:-450px;
margin-top:-340px;
color:{color:Banner};
text-shadow: 0px 0px 20px {color:Banner Shadow};
font-family:halohandletter;
font-size:50px;
line-height:-55px;
text-align: center;
text-transform:none;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

#titlee:first-letter{
font-family:brock;
font-size:40px;
color:{color:Banner F.Letter};
text-shadow: 0px 0px 20px {color:Banner F.Letter Shadow};
letter-spacing:3px;
}


#box{
position:fixed;
background-color:{color:Sidebar BG};
border:4px double {color:Sidebar Border};
box-shadow: 1px 1px 20px {color:Sidebar Shadow};
width:350px;
height:290px;
margin-left:-5px;
margin-top:-680px;
color:#fff;
line-height:10px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

#desc{
position:fixed !important;
opacity:0;
width:350px;
height:280px;
margin-top:-280px;
margin-left:-2px;
color:#fff;
font-size: 8px;
background-color:{color:Sidebar Hover BG};
line-height:12px;
z-index: 9999;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}

#header{
font-family:blackswan;
font-size:30px;
line-height:30px;
color:{color:Header};
text-shadow:0px 0px 10px {color:Header Shadow};
text-transform:none;
border-bottom:1px dotted {color:Header Border};
}

#header:first-letter{
font-family:'chopin';
font-size:30px;
color:{color:Header F.Letter};
text-shadow:0px 0px 20px {color:Header F.Letter Shadow};
letter-spacing:2px;
text-transform:uppercase;
}

#faves img {
width:50px;
height:50px;
margin-left:10px;
border-radius:0px;
box-shadow:0px 0px 10px {color:Favorites Shadow};
-webkit-transition-duration:.7s;
}

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

}



div.navigate a{
height:20px;
width: 70px;
background-color:{color:Navigation BG};
border: 1px dotted {color:Navigation Border};
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};
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-transform: rotate(0deg);
}


div.navigate a:hover{
background-color:{color:Navigation Hover BG};
color:{color:Navigation Hover Text};
text-shadow:1px 0px 1px {color:Navigation Hover Shadow};
}

{CustomCSS}
</style>
<body>

<div id="side">  </div>
<div id="sidee"> </div>

<div id="butterfly"><img src="http://static.tumblr.com/gdh5wux/DIImemi83/blue_butterfly.png"></div>

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

<div id="titlee">{title}</div>

<div id="desc">
<div id="header">About the Blogette</div>
{description}
<br>
<div id="header">Statistics</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>
<br>
<div id="header">Blogroll</div>
<div id="faves">
<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="40px" height="40px" />{/block:Followed}{/block:Following}</marquee>
</div>
</div>

<div id="box">
<div id="header">Jadore</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 TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
<br>
<div id="name">Favorites</div>
<div id="faves">
<center>
<a href="{text:favorite 1}.tumblr.com">
<img src='{image:fav 1}' title="{text:favorite 1}"/></a>

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

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

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

<a href="{text:favorite 5}.tumblr.com">
<img src='{image:fav 5}' title="{text:favorite 5}"/></a>
</center>
</div>
<br>
<div id="header">Navigation</div>
<div class="navigate">
<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>
</div>
</div>
</div>


<img style="position:fixed; width:120px;margin-left:120px; margin-top:470px; -webkit-transform: rotate(28deg);" src="http://static.tumblr.com/gdh5wux/nx6memt6a/th_hearts.png">

<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="300"/></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}
<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><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-250}</center>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}</center>
{/block:PermalinkPage}
{block:Video}

{block:Answer}
<div id="ask">
<img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px; box-shadow: 0px 0px 0px 2px #ddd; border-top-right-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-bottom-left-radius:3px;"/>
{Asker} was like: {Question}</div>
<div style="font-family: tinytots; font-size: 8px;">
{Answer}<br>
</div>
{/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}
<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}
{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>