Theme 10: Isabella

<!--Theme 10- Isabella: By beautifully-flawless
Base code by 0racular
Please do not remove the 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 http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="color:Background" content="#fff" />
<meta name="color:Sidebar Background" content="#FFFFFF" />
<meta name="color:Border" content="#AC946D" />
<meta name="color:Navigation BG" content="#FFFFFF" />
<meta name="color:Navigation" content="#000000" />
<meta name="color:Navigation Hover" content="##a7a7a7" />
<meta name="color:Posts Background" content="#FFFFFF" />
<meta name="color:Text" content="#000000"/>
<meta name="color:Link" content="#aaa"/>
<meta name="color:Link Hover" content="#888" />
<meta name="color:Scrollbar" content="#474747"/>
<meta name="color:Scrollbar BG" content="#fff" />
<meta name="color:Posts Border" content="#ddd" />
<meta name="color:Posts Shadow" content="#a7a7a7" />
<meta name="color:Permalink Border" content="#ddd" />
<meta name="color:Sidebar Border" content="#000000" />
<meta name="color:Sidebar Shadow" content="#a7a7a7" />
<meta name="color:Navigation Border" content="#a7a7a7" />
<meta name="color:Navigation Shadow" content="#4D4D4D" />

<meta name="image:Background" content="http://static.tumblr.com/gdh5wux/kGNm653dq/article16931412_large.jpg" />
<meta name="image:Sidebar" content="http://static.tumblr.com/gdh5wux/0KKm6538m/394231_10150552558158278_269814663277_10682639_1941329889_n.jpg"/>

<meta name="image:Fav 1" content="http://i42.tinypic.com/fk2o3r.png" />
<meta name="image:Fav 2" content="http://i40.tinypic.com/33xtz7r.png" />
<meta name="image:Fav 3" content="http://i43.tinypic.com/2nsqr7p.png" />
<meta name="image:Fav 4" content="http://i44.tinypic.com/121vot5.png" />
<meta name="image:Fav 5" content="http://i41.tinypic.com/r0sew6.png" />

<meta name="text:Fav 1" content="BLOG NAME"/>
<meta name="text:Fav 2" content="BLOG NAME"/>
<meta name="text:Fav 3" content="BLOG NAME"/>
<meta name="text:Fav 4" content="BLOG NAME"/>
<meta name="text:Fav 5" content="BLOG NAME"/>

<meta name="text:Fav 1 URL" content="BLOG NAME"/>
<meta name="text:Fav 2 URL" content="BLOG NAME"/>
<meta name="text:Fav 3 URL" content="BLOG NAME"/>
<meta name="text:Fav 4 URL" content="BLOG NAME"/>
<meta name="text:Fav 5 URL" content="BLOG NAME"/>

<meta name="text:Link 1 URL" content="/submit"/>
<meta name="text:Link 2 URL" content="/archive"/>
<meta name="text:Link 3 URL" content="Links"/>
<meta name="text:Link 4 URL" content=""/>
<meta name="text:Link 5 URL" content=""/>

<meta name="text:Link 1" content="Submit"/>
<meta name="text:Link 2" content="Archive"/>
<meta name="text:Link 3" content="Links"/>
<meta name="text:Link 4" content="CUSTOM LINK"/>
<meta name="text:Link 5" content="CUSTOM LINK"/>

<meta name="if:Use Background Image" content="1"/>
<!--Variables-->
<style type="text/css">

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

#tumblr_controls{
position:fixed !important;
}


@font-face { font-family: "ronda"; src: url('http://static.tumblr.com/oct6d4x/Wvalo56tg/pf_ronda_seven.ttf'); }

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

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

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

@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');}



body {
margin: 0px;
{block:ifusebackgroundimage}
background-image:url('{image:Background}');
{/block:ifusebackgroundimage}
{block:ifnotusebackgroundimage}
background-color:{color:Background};
{/block:ifnotusebackgroundimage}
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
}

body, div, p, textarea, submit, input {
font-family:"ronda";
font-size:8px;
line-height:12px;
color:#000;
text-transform:none;
}

a:link, a:active, a:visited{
color:{color:Link};
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;
color:{color:Link Hover};
}

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

.entry {
float:left;
margin:5px;
padding:5px;
overflow:hidden;
background-color:{color:Posts Background};
border:2px solid {color:Posts Border};
box-shadow:1px 1px 2px #888;
{block:IndexPage}
width:250px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
-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;
}

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

#permalink{
position:absolute;
background: rgba(255, 255, 255, 0.9);
border:1px solid {color:Permalink Border};
width:220px;
height:30px;
bottom:15px;
left:15px;
overflow:hidden;
padding:5px;
opacity:0.0;
font-family:calibri;
font-size:8px;
color:#aaa;
line-height:15px;
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;
}

#info{
font-family:'silkscreen';
color:#888;
font-size:8px;
text-align:right;
line-height:15px;
margin-top:1px;
border-top:1px dotted #aaa;
text-transform:uppercase;
}

#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:#333;
text-shadow:1px 0px 2px #000;
text-align:center;
}

.quote{
font-family:'oregano';
font-size:15px;
text-transform:none;
line-height:25px;
text-align:right;
color:#aaa;
}

asker{
font-family:'oregano';
font-size:10px;
text-transform:uppercase;
color:#888;
}

#ask{
padding:3px;
font-family:'silkscreen';
font-size:8px;
text-transform:uppercase;
color:#999;
}

#askbox{
border:3px solid #ddd;
margin-top:0px;
margin-left:5px;
overflow:auto;
padding:4px;
box-shadow: 1px 1px 1px #000;
}

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

ul, ol, li{list-style:circle; margin:5px; margin-left:10px; padding-left:3px;}
.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:text};}

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

#sidebar{
position:fixed !important;
left:10px;
top:5px;
width:320px;
height:635px;
border:1px solid #000000;
font-family:tinytots;
font-size: 8px;
line-height:10px;
background-color:{color:Sidebar Background};
-moz-box-shadow: 0px 0px {color:Sidebar Shadow};
-webkit-box-shadow: 0px 0px {color:Sidebar Shadow};
box-shadow: 0px 2px 20px 5px {color:Sidebar Shadow};
}

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

.heart {
display : block;
-height: 15px;
text-indent : 5px;
vertical-align : left;
text-transform:uppercase;
background:url('http://media.tumblr.com/tumblr_lkl75f072L1qfamg6.gif') no-repeat left;
padding-left : 10px;
padding-bottom : 2px;
}

.heart:hover {
display : block;
line-height: 15px;
text-indent : 5px;
text-transform:uppercase;
vertical-align : left;
background : url('http://media.tumblr.com/tumblr_lkl75omMEM1qfamg6.gif') no-repeat left;
padding-left : 10px;
padding-bottom : 2px;
}

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

#linksbox{
width:70px;
height:auto;
background:#trans;
float:left;
position:fixed;
margin-left:345px;
top:30px;
}

div.navigate a{
z-index:3;
width:60px;
height:60px;
font-size:8px;
margin-bottom:10px;
line-height:55px;
text-align:center;
letter-spacing:1px;
border-radius:60px;
display:inline-block;
font-family:"tinytots";
text-transform:uppercase;
color:{color:Navigation};
background-color:{color:Navigation BG};
border:1px solid {color:Navigation Border};
box-shadow:0 0 10px {color:Navigation Shadow};
-webkit-transform:rotate(0deg);
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
transition:all 1s ease-out;
}

div.navigate a:hover{
border-radius:0px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-transform: rotate(360deg);
}


{CustomCSS}
</style>
<body>
<div id="sidebar">
<center>
<img style="width:320px; height:220px;" src="{image:sidebar}">
<br>
<div id="name2">About the Blogette</div>
{Description}
<br><br>
<div id="name2">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
<div id="name2">Stats</div>
<div class="heart">Insert Stats Here</div>
<div class="heart">Insert Stats Here</div>
<div class="heart">Best viewed in google chrome</div>

<div id="name2">Favorites</div>
<div id="faves" >
<a href="{text:Fav 1 URL}"><img src='{image:Fav 1}' title="{text:Fav 1}"/></a>
<a href="{text:Fav 2 URL}"><img src='{image:Fav 2}' title="{text:Fav 2}"/></a>
<a href="{text:Fav 3 URL}"><img src='{image:Fav 3}' title="{text:Fav 3}"/></a>
<a href="{text:Fav 4 URL}"><img src='{image:Fav 4}' title="{text:Fav 4}"/></a>
<a href="{text:Fav 5 URL}"><img src='{image:Fav 5}' title="{text:Fav 5}"/></a>
</center>

<div id="name2">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>
</div>
</div>



<div id="linksbox">
<div class="navigate">
<a href="/">home</a>
<a href="/ask">inbox</a>
<a href="{text:Link 1 URL}">{text:Link 1}</a>
<a href="{text:Link 2 URL}">{text:Link 2}</a>
<a href="{text:Link 3 URL}">{text:Link 3}</a>
<a href="{text:Link 4 URL}">{text:Link 4}</a>
<a href="{text:Link 5 URL}">{text:Link 5}</a>
<a href="http://beautifully-flawless.tumblr.com/">credit</a>
</div>
</div>



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

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

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

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

{block:Answer}
<img src="{AskerPortraitURL-40}" width="40" align="left" style="margin-right:6px; box-shadow: 1px 1px 1px #000; padding:3px; background:#fff;"/>
<div id="askbox">
<asker>{Asker}:</asker>
<div id="ask">{Question}</div>
</div>
{Answer}
<div id="info">
<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: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>