Theme 33: Bonita

<!--Theme 33: Bonita
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="#000000" />
<meta name="color:Scrollbar"content="#e62020">
<meta name="color:text" content="#000" />
<meta name="color:Links" content="#e62020"/>
<meta name="color:LInks Hover" content="#fff"/>
<meta name="color:Posts Border" content="#e62020"/>
<meta name="color:Posts BG" content="#fff"/>
<meta name="color:Title" content="#000"/>
<meta name="color:Sidebar BG" content="#000"/>
<meta name="color:Sidebar Border" content="#e62020"/>
<meta name="color:Sidebar Shadow" content="#e62020"/>
<meta name="color:Banner" content="#e62020"/>
<meta name="color:Banner Shadow" content="#e62020"/>
<meta name="color:Navigation BG" content="#000000"/>
<meta name="color:Navigation Border" content="#e62020"/>
<meta name="color:Navigation Text" content="#fff"/>
<meta name="color:Navigation Shadow Hover" content="#e62020"/>
<meta name="color:Featured Blogs Border" content="#e62020"/>
<meta name="color:Favorites Border" content="#e62020"/>
<meta name="color:Favorites Shadow" content="#e62020"/>
<meta name="color:Favorites Text" content="#e62020"/>

<meta name="image:Background" content="" />
<meta name="image:sidebar" content="http://i.imgur.com/Vup1PXg.jpg"/>

<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:10px;height:3px; background:black;}
::-webkit-scrollbar-thumb{background:{color:Scrollbar};border-radius:5px;box-shadow:inset 0px 0px 40px #000000;}

#tumblr_controls{
position:fixed !important;
}

body {
background-image:url('{image:Background}');
background-attachment:fixed;
background-position:left;
background-repeat:repeat;
background-color:{color:Background};
margin:0px;
}

body, div, p, textarea, submit, input {
font-family:'tinytots';
color:{color:Text};
font-size:8px;
line-height:100%;
text-align:justify;
text-transform:uppercase;
}

a:link, a:visited, a:active {
text-decoration:none;
color:{color:Links};
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

a:hover {
color:{color:Links Hover};
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

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

@font-face{font-family:"lovers";src:url('http://static.tumblr.com/gdh5wux/Lncmeqv31/loversquarrel-regular.ttf');}

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

@font-face{font-family:"aspire";src:url('http://static.tumblr.com/gdh5wux/Mtimequm2/aspire-demibold.ttf');}

@font-face { font-family: "lainie"; src: url('http://static.tumblr.com/oetadgc/Uialyjfaa/laine.ttf'); }

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

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

.entry {
float:left;
margin:2px;
overflow:hidden;
border:1px solid {color:Posts Border};
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:'lainie';
font-size:25px;
line-height:28px;
color:{color:Posts Header};
text-align:center;
text-transform:none;
text-shadow: 0px 2px 3px {color:Posts Header Shadow};
}

.quote{
font-family:'Arial';
font-size:8px;
line-height:12px;
color:{color:Source};
text-transform:uppercase;
text-align:right;
}

.infinite {
align:right;
background:#ddd;
color:#000;
margin:3px 0px 5px 66px;
padding:7px;
padding-top: 5px;
position: relative;
border-radius:5px;
}

.infinite span {
display:block;
position:absolute;
width:1px;height:1px;
font-size: 8px;
font-family: pixel;
line-height: 1px;
left:-10px;
top:10px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:10px solid grey;
}

.askborder{float:left;margin:1px 4px 0 0;padding:2px;background:#ddd;}

asker{
margin-right:5px;
font-family:'lainie';
font-size:19px;
text-align:center;
text-transform:none;
}

blockquote{
border-left:5px solid #888;
padding:5px;
}

ul, ol, li{
list-style:circle;
margin:5px;
margin-left:10px;
padding-left:3px;
}

.user_1 .label {color:#5D5D5D; font-weight:bold;}
.user_2 .label {color:#7D7D7D; font-weight:bold;}

.notes img{width:10px; position:relative; top:3px;}

#sidebar{
width:250px;
min-height:320px;
top:70px;
left:280px;
color:#fff;
position:fixed;
text-align:center;
background:{color:Sidebar BG};
border:1px solid {color:Sidebar Border};
box-shadow:0px 0px 20px {color:Sidebar Shadow};
-webkit-transition:opacity 0.5s linear;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
}

#Banner{
left:8px;
top:0px;
z-index:9999;
font-size:70px;
position:fixed;
text-align:center;
text-transform:none;
font-family:'chopin';
color:{color:Banner Shadow};
text-shadow:1px 1px 10px {color:Banner Shadow};
}

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

#name:first-letter{
font-family:"brock";
font-size:30px;
color:#fff;
line-height:40px;
text-shadow:0px 0px 10px #e62020;
}

#Navigation{
position:fixed;
width:530px;
height:100%;
top:530px;
}

div.navigate a{
height:20px;
width:70px;
margin:4px;
float:left;
font-size:8px;
line-height:20px;
text-align:center;
font-family:'tinytots';
text-transform:uppercase;
color:{color:Navigation Text};
background-color:{color:Navigation BG};
border:1px dotted {color:Navigation Border};
-webkit-transition: all 5s ease-out;
-moz-transition: all 5s ease-out;
transition: all 5s ease-out;
}

#banners{
width:200px;
height:140px;
border:1px dotted {color:Featured Blogs Border};
margin-top:420px;
margin-left:0px;
position:fixed;
}

#banners img{
width:100%;
}

#sidebarpic{
position:fixed;
left:0px;
top:70px;
z-index:-8;
width:260px;
border:1px solid {color:Sidebar Border};
}

#sidebarpic img{
width:100%;
}

#faves img {
opacity:0.5;
width:60px;
height:60px;
padding:0px;
border-radius:0px;
border:1px ridge {color:Favorites Border};
box-shadow:0px 0px 10px {color:Favorites Shadow};
-webkit-transition-duration:.7s;
}

#faves img:hover {
-webkit-transition: 0.2s ease-in;
border-radius:32px;
padding:0px;
width:50px;
height:50px;
}

.heart {display:block;color:#fff;line-height:15px;text-align:center;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;}


{CustomCSS}
</style>
<body>

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

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

<div id="sidebar">
<div id="name">About The Blogette</div>
{description}
<div id="name">Statistics</div>
<div class="heart">Insert Stat Here</div>
<div class="heart">Insert Stat Here</div>
<div class="heart">This theme is best viewed in G.Chrome and Safari</div>
<div id="name">Music</div>
 <center>

<!-- PLACE MUSIC CODE 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="#000000" />
    <param name="FlashVars" value="&amp;width=220&amp;height=20&amp;volume=200&amp;autoplay=1&amp;loop=1&amp;showvolume=1&amp;bgcolor1=&amp;bgcolor2=&amp;slidercolor1=dddddd" />
</object>

<!-- END MUSIC CODE HERE  -->

</center>



<div id="name">Favorites</div>
<font style="color:{color:Favorites Text};">
<a href="{text:FAV 1 URL}">{text:FAV 1}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 2 URL}">{text:FAV 2}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 3 URL}">{text:FAV 3}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 4 URL}">{text:FAV 4}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 5 URL}">{text:FAV 5}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 6 URL}">{text:FAV 6}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 7 URL}">{text:FAV 7}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 8 URL}">{text:FAV 8}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 9 URL}">{text:FAV 9}</a>&hearts;
&nbsp;&nbsp;
<a href="{text:FAV 10 URL}">{text:FAV 10}</a>&hearts;
<br>&nbsp;&nbsp;
</font>
<br>
</div>

<div id="Navigation">
<div id="name">Navigation</div>
<div class="navigate">
<a href="/">Home</a>
<a href="/ask">Inbox</a>
<a href="/faq">Faq</a>
<a href="/submit">Submit</a>
<a href="/links">More</a>
<a href="http://beautifully-flawless.tumblr.com/">Credit</a>
</div>
</div>


<div style="position:fixed;top:390px;left:10px;"id="name">Featured Blogs</div>

<div id="banners">
<marquee behavior="scroll" direction="up"style="width:200px; height:140px;">
<!-- PLACE BANNER CODE HERE  -->


<!-- END BANNER CODE HERE  -->
</marquee>
</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="500"/></a>
{LinkCloseTag}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
{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}
{/block:Quote}

{block:Chat}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
&nbsp;{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 src="{AskerPortraitURL-48}" width=50px; height=50px; align="left" class="askborder"><div class="infinite"><span></span><asker>{Asker}</asker>: {Question}&nbsp;</div>
<div style="margin-top: -5px;"><br>{Answer}</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>