Theme 30: Ella

<!--Theme 30: Ella
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.
DO NOT REMOVE CREDIT, OR YOU WILL BE REPORTED.
-->
<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}

<!--Variables-->
<meta name="color:Background"content="#000"/>
<meta name="color:text" content="#000" />
<meta name="color:Posts Border" content="#ddd"/>
<meta name="color:Posts BG" content="#fff"/>
<meta name="color:Background" content="#000"/>
<meta name="color:Link" content="#FFA0C2"/>
<meta name="color:Link Hover" content="#fff"/>
<meta name="color:Scrollbar Shadow" content="#888"/>
<meta name="color:Scrollbar" content="#fff"/>
<meta name="color:Banner" content="#fff"/>
<meta name="color:Banner First Letter" content="#fff"/>
<meta name="color:Banner First Letter Shadow" content="#ddd"/>
<meta name="color:Banner Box Border" content="#fff"/>
<meta name="color:Navigation Bar Border" content="#fff"/>
<meta name="color:Navigation BG" content="#000"/>
<meta name="color:Navigation Border" content="#ddd"/>
<meta name="color:Music Box Border" content="#fff"/>

<meta name="image:Background" content="" />
<meta name="image:sidebar" content="http://static.tumblr.com/gdh5wux/DJHm8am1k/tumblr_m3mjyspyin1qlkaqmo1_500.png"/>

<meta name="text:MusicURL"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" />

<meta name="text:FAV 1 URL" content=""/>
<meta name="text:FAV 2 URL" content=""/>
<meta name="text:FAV 3 URL" content=""/>
<meta name="text:FAV 4 URL" content=""/>
<meta name="text:FAV 5 URL" content=""/>
<meta name="text:FAV 6 URL" content=""/>
<meta name="text:FAV 7 URL" content=""/>
<meta name="text:FAV 8 URL" content=""/>
<meta name="text:FAV 9 URL" content=""/>
<meta name="text:FAV 10 URL" content=""/>


<meta name="text:FAV 1" content="FAVORITES"/>
<meta name="text:FAV 2" content="FAVORITES"/>
<meta name="text:FAV 3" content="FAVORITES"/>
<meta name="text:FAV 4" content="FAVORITES"/>
<meta name="text:FAV 5" content="FAVORITES"/>
<meta name="text:FAV 6" content="FAVORITES"/>
<meta name="text:FAV 7" content="FAVORITES"/>
<meta name="text:FAV 8" content="FAVORITES"/>
<meta name="text:FAV 9" content="FAVORITES"/>
<meta name="text:FAV 10" content="FAVORITES"/>

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


::-webkit-scrollbar {width: 9px; height: 3px; background:black;}
::-webkit-scrollbar-thumb {background:{color:Scrollbar}; border-radius:5px; box-shadow:0px 0px 10px {color:Scrollbar Shadow};}

#tumblr_controls{
position:fixed !important;
}

@font-face{font-family:"tinytots";src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.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:"chopin";src:url('http://static.tumblr.com/gdh5wux/FYdm826v4/chops___.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: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;
}

div#posts {
float:left;
width:720px;
margin-left:425px;
margin-top:0px;
border:1px solid #888;
background-color:#fff;
background-image:url('http://static.tumblr.com/gdh5wux/EVAm7hth0/tumblr_m3sd0v7kfw1qhxwq3.gif');
}

.entry {
margin:4px;
border:1px solid {color:Posts Border};
float:left;
overflow:hidden;
background-color:{color:Posts BG};
{block:IndexPage}
width:350px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
}

.perma{
opacity: 0.0;
filter:alpha(opacity = 0);
margin-top:-21px;
width:0px;
height:30px;
line-height:30px;
font-size:9px;
position:absolute;
text-align:center;
z-index:800;
color:#000;
}

a.p{color:#fff;}


.entry:hover .perma {
opacity: 1;
transition: all 0.4s linear;
filter: alpha(opacity = 100);
-webkit-transition: opacity 0.4s linear;
-moz-transition: all 0.4s linear;
}

.likep{
top:26px;
left:5px;
z-index:99;
width:21px;
height:20px;
overflow:hidden;
position: absolute;
}

.likep img {
width:21px;
height:20px;
webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.rep{
top:26px;
left:29px;
width:24px;
height:20px;
overflow:hidden;
position:absolute;
z-index:99;
}

.rep img{
width:24px;
height:20px;
line-height:30px;
display:inline;
}


.likep a:hover{background-position: 0px 0px;}

.likep a{
background-image: url("http://static.tumblr.com/uiqhh9x/BPnlzww8v/like.png");
background-position:0px 0px;
display:block;
z-index:99;
webkit-transition: all 0s linear;
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
transition: all 0s linear;
}

.not{
position:absolute;
background: url("http://static.tumblr.com/uiqhh9x/X6Ym17xp2/middle.png");
height:20px;
font-size:11px;
line-height:20px;
color:#fff;
position:absolute;
top:26px;
left: 56px;
padding-left:4px;
padding-right:4px;
-moz-border-radius:2px;
border-radius:2px;
}

.not a{
color:#fff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

.entry:hover .not, .entry:hover .rep, .entry:hover .likep{opacity: 0.8;filter: alpha(opacity = 80);}

.not:hover , .rep:hover, .likep:hover{opacity: 1!important;filter: alpha(opacity = 100)!important;}


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

.title{
font-family:tangerine;
text-transform:none;
font-size:30px;
line-height:30px;
color:#000;
}

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

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


#bigbanner{
position:fixed;
font-family:"chopin";
font-size:50px;
line-height:50px;
text-transform:none;
left:50px;
top:5px;
color:{color:Banner First Letter};
}

#bigbanner:first-letter{
font-size:65px;
color:{color:Banner First Letter};
text-shadow:2px 2px 10px {color:Banner First Letter Shadow};
}

#sidebox{
width:420px;
height:auto;
position:fixed;
top:80px;
left:0px;
color:#fff;
font-family:tinytots;
z-index:9999;
}

.heart{font-family:tinytots;display:block;color:#fff;text-indent:5px;vertical-align:left;background:url('http://www.hellostar.org/wp-admin/images/q1.gif')no-repeat left;}

.heart:hover{background:url('http://www.hellostar.org/wp-admin/images/q2.gif')no-repeat left;}

#name{
color:#fff;
font-family:"chopin";
font-size:30px;
line-height:40px;
text-align:center;
text-transform:none;
}

#banners{
width:220px;
height:160px;
top:315px;
left:196px;
position:fixed;
border:1px dotted {color:Banner Box Border};
}

#banners img{
width:100%;
}

#navigation{
position:fixed;
width:100px;
height:100%;
top:-6px;
left:1200px;
border:1px solid {color:Navigation Bar Border};
}

div.navigate a{
height:20px;
width:86px;
float:left;
color:#fff;
font-size:8px;
line-height:20px;
text-align:center;
margin-left:4px;
margin-bottom:12px;
font-family:tinytots;
text-transform:uppercase;
background-color:{color:Navigation BG};
border: 3px double {color:Navigation Border};
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}


div.navigate a:hover{
border-radius:5px;
box-shadow:2px 2px 3px #ddd;
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}

#favesbox{
position:fixed;
width:220px;
height:auto;
top:480px;
left:220px;
color:#FFA0C2;
font-family:tinytots;
}

#music{
position:fixed;
width:220px;
height:20px;
top:280px;
left:195px;
border:1px dotted {color:Music Box Border};
}

#sidebarpic{
top:230px;
left:-30px;
position:fixed;
z-index:-8;
width:280px;
}

#sidebarpic img{
width:280px;
}

{CustomCSS}
</style>
<body>

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


<div id="sidebox">
<div id="name">About The Blogette</div>
<center>{description}</center>
<center>
&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;
</center>
<center>
<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>
</center>
</div>

<div id="music">
<center>
<!--REMOVE THE CODING FROM BELOW AND PASTE YOUR MUSIC PLAYER HERE-->
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="220" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#000" />
    <param name="FlashVars" value="&amp;width=220&amp;height=20&amp;volume=200&amp;autoplay=0&amp;loop=1&amp;showvolume=1&amp;bgcolor1=&amp;bgcolor2=&amp;slidercolor1=dddddd" />
</object>
<!--REMOVE THE CODING FROM ABOVE AND PASTE YOUR MUSIC PLAYER HERE-->
</center>
</div>

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


<!--BANNER-->
<div id="banners">
<div id="bannersimg">
<marquee behavior="scroll" direction="up"style="width:220px; height:160px;">
<!--INSERT BANNER HERE-->
</marquee>
</div>
</div>
<!--BANNER-->


<div id="favesbox">
<div id="name"style="text-align:left;">Favorites</div>

<a href="{text:FAV 1 URL}">{text:FAV 1}</a>&hearts;
<br>
<a href="{text:FAV 2 URL}">{text:FAV 2}</a>&hearts;
<br>
<a href="{text:FAV 3 URL}">{text:FAV 3}</a>&hearts;
<br>
<a href="{text:FAV 4 URL}">{text:FAV 4}</a>&hearts;
<br>
<a href="{text:FAV 5 URL}">{text:FAV 5}</a>&hearts;
<br>
<a href="{text:FAV 6 URL}">{text:FAV 6}</a>&hearts;
<br>
<a href="{text:FAV 7 URL}">{text:FAV 7}</a>&hearts;
<br>
<a href="{text:FAV 8 URL}">{text:FAV 8}</a>&hearts;
<br>
<a href="{text:FAV 9 URL}">{text:FAV 9}</a>&hearts;
<br>
<a href="{text:FAV 10 URL}">{text:FAV 10}</a>&hearts;
<br>
</div>

<div id="navigation">
<a href="/"><img style="border:4px double #ddd; margin-left:12px; margin-top:45px; border-radius:5px;" src="{PortraitURL-64}"></a>
<br><br><br>
<div class="navigate">
<a href="/">Home</a>
<a href="/ask">Inbox</a>
<a href="/submit">Submit</a>
<a href="/links">Links</a>
<a href="/">Custom Links</a>
<a href="/">Custom Links</a>
<a href="/">Custom Links</a>
<a href="/">Custom Links</a>
<a href="/">Custom Links</a>
<a href="/">Custom Links</a>
<a href="http://beautifully-flawless.tumblr.com/">Credit</a>
</div>
<img style="width:100px; margin-top:0px;" src="http://static.tumblr.com/gdh5wux/C2Ambfz64/662681mwe4uu65se.gif">
</div>







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

{block:IndexPage}
<div class="perma">

<div class="likep">
<a id="like{PostID}"href="javascript:likelink('{PostID}','{Permalink}','');"><img src="http://static.tumblr.com/lba83dv/OUUltd958/spacer.gif"width="21" height="20"alt="Like this post"id="likeimage{PostID}"/></a>
</div>

<div class="rep"><a href="{reblogurl}"target="_blank"><img src="http://static.tumblr.com/uiqhh9x/OAClzwwao/reblog.png"width="30"/></a></div>

<div class="not">
<a id="notes{PostID}"href="{Permalink}">{NoteCount}</a></div>
</div>
{/block:IndexPage}

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

{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{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="100%"></a></div>
{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<a href="{permalink}"><img class="photo"src="{PhotoURL-HighRes}"alt="{PhotoAlt}"width="100%"></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>{AudioPlayerWhite}</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}
<img style="border:1px solid #aaa; width:30px; height:30px;"src="{AskerPortraitURL-30}"align="left"class="askborder">
<div class="infinite">
<span>
</span>
{Asker}:{Question}&nbsp;
</div>
<div style="margin-top:-5px;">
<br>{Answer}
</div>
{block:IndexPage}
{/block:IndexPage}
{/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>
</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(400);} );


});
});
});
</script>
{/block:IndexPage}

{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}
</div>
<script type="text/javascript" src="http://.ic.tumblr.com/uiqhh9x/aK8m1cpdr/like2.js"></script>
<iframe id="likeiframe" style="width: 0px; height: 0px; border:0px;"></iframe>
<span id="scriptsinsert"> </span>
</body>
</html>