Theme 66: Bonnie

<!--
Theme 66: Bonnie
Made By: Beauifully Flawless
Please Do Not Remove the credit from this blog unless I Say you can.
-->
<html>
<head>

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

<!--Variables-->
<meta name="color:Scrollbar" content="#ddd" />
<meta name="color:Background" content="#fff" />
<meta name="color:Text" content="#000" />
<meta name="color:Links" content="#FBCFD0" />
<meta name="color:Links Shadow" content="#000" />
<meta name="color:Posts Bg" content="#fff" />
<meta name="color:Posts Border" content="#ddd" />
<meta name="color:Permalink Bg" content="#fff" />
<meta name="color:Permalink Text" content="#888" />
<meta name="color:Permalink Border" content="#ddd" />
<meta name="color:Posts Header" content="#000" />
<meta name="color:Asker Text" content="#FBCFD0" />
<meta name="color:Asker" content="#555" />
<meta name="color:Asker Box Border" content="#ddd" />
<meta name="color:Sidebar Bg" content="#fff" />
<meta name="color:Stats Text" content="#aaa" />
<meta name="color:Favorites Border" content="#eee" />
<meta name="color:Navigation Bg" content="#fff" />
<meta name="color:Links Hover Title Bg" content="#fff" />
<meta name="color:Links Hover Title Border" content="#ddd" />
<meta name="color:Sidebar Header" content="#888" />
<meta name="color:Networks Bg" content="#fff" />
<meta name="color:Network Tab Bg" content="#fff" />
<meta name="color:Network Tab Border" content="#ddd" />
<meta name="color:Accent Shadow" content="#555" />
<meta name="color:Music Bg" content="#fff" />
<meta name="color:Music Border" content="#bbb" />

<meta name="image:Background" content="http://static.tumblr.com/gdh5wux/9Rwmp0bhf/background-backgrounds-floral-pattern-favim.com-261471.jpg" />
<meta name="image:sidebar" content="http://static.tumblr.com/3ed61d1f303007cf4177bc302d58f016/gdh5wux/TiKmqxhbk/tumblr_static_tumblr_miqkptt6vh1qhj03go1_400.jpg"/>
<meta name="image:Fav 1" content="" />
<meta name="image:Fav 2" content="" />
<meta name="image:Fav 3" content="" />
<meta name="image:Fav 4" 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="Best Viewed on G.Chrome" />
<meta name="text:Favorite 1 URL" content="" />
<meta name="text:Favorite 2 URL" content="" />
<meta name="text:Favorite 3 URL" content="" />
<meta name="text:Favorite 4 URL" content="" />
<meta name="text:Favorite 1" content="" />
<meta name="text:Favorite 2" content="" />
<meta name="text:Favorite 3" content="" />
<meta name="text:Favorite 4" content="" />
<meta name="text:Links 1 URL" content="/favorites" />
<meta name="text:Links 1" content="Favorites" />
<meta name="text:Links 2 URL" content="/links" />
<meta name="text:Links 2" content="More Links" />
<meta name="text:Music Player URL" content="" />

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

::-webkit-scrollbar {width: 9px; height: 4px;background:{color:background};}
::-webkit-scrollbar-thumb { background-color:{color:Scrollbar};-webkit-box-shadow: inset 0 0 6px #000;-webkit-border-radius: 10px;
border-radius: 10px;
}

#tumblr_controls{
position:fixed !important;
-webkit-filter: invert(100%);
}

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

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }

@font-face {font-family:"Tall"; src: url('http://static.tumblr.com/w1f0ilq/4m9lyy51c/tall_film.ttf'); }

@font-face { font-family: "bebas neue"; src: url('http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf'); }

@font-face { font-family: "promocyja"; src: url('http://static.tumblr.com/gdh5wux/88Smoz1xf/promocyja.ttf'); }

@font-face { font-family: "signerica"; src: url('http://static.tumblr.com/yo59jgt/m4om1rino/signerica_fat.ttf'); }

@font-face { font-family: "halohandletter"; src: url('http://static.tumblr.com/loouiuu/Ttaloide6/halohandletter.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:Links};
text-decoration: none;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}

a:hover{
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
text-shadow:1px 0px 2px {color:Links Shadow};
}

div#posts {
width:930px;
margin-left:420px;
z-index:999;
float:left;
}

.entry {
margin:6px;
float:left;
overflow:hidden;
padding:8px;
border:2px solid {color:Posts Border};
background-color:{color:Posts Bg};
box-shadow: 0px 2px 2px #aaa;
{block:IndexPage}
width:250px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
}

.entry:hover #info{
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;
}

#info{
position:absolute;
background-color:{color:Permalink Bg};
width:255px;
height:20px;
top:3px;
left:0px;
overflow:hidden;
padding:5px;
opacity:0.0;
font-family:tinytots;
font-size:8px;
color:{color:Permalink Text};
line-height:25px;
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;
}

#infoo{
font-family:tinytots;
color:{color:Permalink Text};
font-size:8px;
text-align:left;
line-height:15px;
margin-top:5px;
border-top:1px dotted {color:Permalink Border};
}

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

.title{
font-family:'Tall';
text-transform:none;
font-size:30px;
line-height:30px;
color:{color:Posts Header};
}

.quote{
font-family:'arial';
font-size:9px;
text-transform:uppercase;
line-height:10px;
text-align:right;
color:#555;
}

asker{
font-family:'bebas neue';
font-size:16px;
text-transform:none;
color:{color:Asker Text};
}

#ask{
padding:6px;
font-family:'tinytots';
font-size:8px;
text-transform:uppercase;
color:{color:Asker};
}

#askbox{
background-image:url('http://static.tumblr.com/gdh5wux/RpIm7hlh7/bg.jpg');
border: 3px double {color:Asker Box Border};
margin: 0px;
margin-top:-5px;
overflow:auto;
padding:7px;
box-shadow: 0px 2px 2px #888;
}

blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 10px;
border-left: 1px dotted #999999;
}

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:#000;}
.notes img{width:10px; position:relative; top:3px;}


#sidebar{
position:fixed;
width:300px;
height:420px;
background:{color:Sidebar Bg};
padding:10px;
margin-top:40px;
margin-left:40px;
box-shadow: 0px 2px 2px #aaa;
z-index:999;
}

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

#sidebar:hover #side{
opacity:1;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}

#side{
position:fixed;
width:300px;
height:420px;
background:{color:Sidebar Bg};
padding:10px;
margin-top:-10px;
margin-left:-10px;
text-align:center;
opacity:0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.heart {
display:block;
font-size:8px;
font-family:'tinytots';
color:{color:Stats Text};
line-height:10px;
text-transform:uppercase;
text-indent:5px;
vertical-align:middle;
-webkit-transition-duration:.50s;
background:url('http://media.tumblr.com/tumblr_m0ohoyUb7m1qfjy56.gif')no-repeat left;
padding-left:10px;
padding-bottom:2px;
text-align:center;
}

.heart:hover {
-webkit-transition-duration:.50s;
background:url('http://media.tumblr.com/tumblr_m0ohp6QJDN1qfjy56.gif')no-repeat left;
padding-left:10px;
}

#faves img {
opacity:1;
width:50px;
height:50px;
margin:2px;
border-radius:0px;
border:3px solid {color:Favorites Border};
box-shadow: 0px 2px 2px #aaa;
-webkit-transition-duration:.7s;
}

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

#bigbanner{
position:fixed;
font-family:"halohandletter";
font-size:80px;
text-transform:none;
left:0px;
top:560px;
color:#888;
text-shadow:1px 0px 2px #aaa;
}

#navigation{
width:280px;
height:20px;
margin-left:48px;
margin-top:480px;
padding:10px;
position:fixed;
background:{color:Navigation Bg};
border-radius:0px 0px 40px 40px;
box-shadow:-1px 0px 1px #888, 1px 0px 1px #888, 0px 1px 1px #888;
}

div.navigate a img{
height:16px;
width:16px;
margin-left:33px;
float:left;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}

div#qTip {
padding:3px;
display:none;
text-align: center;
position: absolute;
font-size:8px;
line-height:10px;
font-family:silkscreen;
z-index:1000;
z-index: 9999999;
color:{color:Text};
background:{color:Links Hover Title Bg};
border-left:8px solid {color:Links Hover Title Border};
border-right:8px solid {color:Links Hover Title Border};
border-top:1px solid {color:Links Hover Title Border};
border-bottom:1px solid {color:Links Hover Title Border};
letter-spacing:1px;
}

#name2{
font-family:'promocyja';
font-size:30px;
line-height:20px;
color:{color:Sidebar Header};
border-bottom:1px dotted {color:Permalink Border};
text-align:center;
text-transform:none;
}

#contain{
background-color:{color:Networks Bg};
font-family:'Open Sans';
font-size:12px;
color:{color:Text};
text-align:center;
position:fixed;
top:0px;
left:-300px;
width:300px;
height:120px;
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:2px solid {color:Network Tab Border};
top:0px;
width:20px;
height:110px;
opacity:.6;
background-color:{color:Network Tab Bg};
font-family:bebas neue;
font-size:10px;
margin-left:300px;
padding-top:5px;
}

#box{
width:30px;
height:120px;
margin-top:10px;
margin-left:3px;
color:{color:Text};
z-index:99999;
overflow-x:hidden;
overflow-y:scroll;
vertical-align:text-bottom;
opacity:1;}

#badge img{
width:50px;
height:auto;
margin-top:10px;
}


accent{font-family:'calibri';color:{color:Text};text-shadow:0px 0px 1px {color:Accent Shadow};}

#status{
position:fixed !important;
left:5px;
padding-top:12px;
bottom:5px;
padding-bottom:12px;
text-align:center;
height:15px;
width:50px;
overflow:hidden;
background:{color:Music Bg};
border:1px solid {color:Music Border};
border-radius:60px;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
z-index:99999999;
}

#status:hover{
padding:5px;
height:50px;
width:220px;
-moz-border-radius: 17px 17px 17px 17px;
border-radius:17px 17px 17px 17px;
}


{CustomCSS}
</style>
<script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>

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

<!-- NETWORKS -->
<!--

<a href="{URL OF NETWORK}"title="{NAME OF NETWORK}><img src="URL OF IMAGE BADGE"></a>

-->

<div id="contain">
<div id="box"style="float:left">
<div id="badge">



</div>
</div>

<div id="containtab">N<br>E<br>T<br>W<br>O<br>R<br>K<br>S</div>
</div>
</div>

<!-- SIDEBAR -->

<div id="sidebar">
<div id="side">
<br>
<div id="name2">About the Blogette</div>
{description}
<br><br>
<div id="name2">Statistics</div>
<div class="heart">{text:Stats 1}</div>
<div class="heart">{text:Stats 2}</div>
<div class="heart">{text:Stats 4}</div>
<br><br>
<div id="name2">Favorites</div>
<div id="faves">
<a href="{text:Favorite 1 URL}"><img src="{image:Fav 1}"title="{text:Favorite 1}"></a>

<a href="{text:Favorite 2 URL}"><img src="{image:Fav 2}"title="{text:Favorite 2}"></a>

<a href="{text:Favorite 3 URL}"><img src="{image:Fav 3}"title="{text:Favorite 3}"></a>

<a href="{text:Favorite 4 URL}"><img src="{image:Fav 4}"title="{text:Favorite 4}"></a>
<br>
</div>

<img style="position:fixed; width:300px; height:120px; top:350px; left:50px; z-index:-9999;" src="http://i.imgur.com/MS91nQX.jpg">
</div>

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

<div id="navigation">
<div class="navigate">
<a href="/"title="Home"><img src="http://static.tumblr.com/b73ppk6/hGWmp0z0l/home.png"></a>

<a href="/ask"title="Message"><img src="http://static.tumblr.com/b73ppk6/tF0mp0z19/email.png"></a>

<a href="{text:Links 1 URL}"title="{text:Links 1}"><img src="http://static.tumblr.com/b73ppk6/Vflmp0z35/heart.png"></a>

<a href="{text:Links 2 URL}"title="{text:Links 2}"><img src="http://static.tumblr.com/b73ppk6/ZAsmp0z40/plus.png"></a>

<a href="http://beautifully-flawless.tumblr.com/"title="Theme Credit"><img src="http://static.tumblr.com/b73ppk6/Nd2mp0z59/premium.png"></a>
</div>
</div>

<!-- MUSIC PLAYER  -->

<div id="status">
<img src="http://i12.photobucket.com/albums/a213/superkate_2468/favicon-2ico.gif" style="margin-left: 3px; margin-bottom: 3px;"><br><br>
{text:Music Player URL}
</div>

<!-- BLOGTITLE -->

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

<!-- BLACK BOW  -->

<img style="position:fixed; width:200px; top:-40px; left:260px; z-index:9999;" src="http://i.imgur.com/aoAqaZk.png">

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


{block:Text}
{block:Title}
<span class="title">{Title}</span>
{/block:Title}
<span class="entrytext">{Body}</span>
<div id="infoo">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:Text}

{block:Link}
<a href="{URL}"class="title">{Name}</a>
{block:Description}
{Description}
{/block:Description}
<div id="infoo">
<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="info">
<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="250"/></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="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
<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}
<div id="infoo">
<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="infoo">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:Chat}

{block:Audio}
<center>
{AudioEmbed-250}
{AudioPlayerWhite}
{block:ExternalAudio}
{/block:ExternalAudio}
</center>
<div id="infoo">
<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>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}
</center>
{/block:PermalinkPage}
<div id="infoo">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{block:Video}

{block:Answer}
<div id="askbox">
<img src="{AskerPortraitURL-48}" width="35" align="left" style="margin-right:6px; box-shadow: 0px 0px 0px 2px #aaa;"/>
<asker>{Asker}:</asker>
<div id="ask">{Question}</div>
</div>
{Answer}
<div id="infoo">
<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: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>
</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>
</body>
</html>