Theme 23: Camilla

<!----
THEME 23: Camilla
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}

<!--Variables-->

<meta name="color:background" content="#000000" />
<meta name="color:text" content="#000" />
<meta name="color:Link" content="#ddd"/>
<meta name="color:link hover" content="#999" />
<meta name="color:Posts BG" content="#fff"/>
<meta name="color:Posts Border" content="#ddd"/>
<meta name="color:Permalink BG" content="#000"/>
<meta name="color:Permalink Text" content="#fff"/>
<meta name="color:Title" content="#000"/>
<meta name="color:Sidebar Text" content="#fff"/>
<meta name="color:Sidebar Border" content="#F5A9E1"/>
<meta name="color:Navigation Text" content="#F5A9E1"/>
<meta name="color:Navigation Border" content="#BDBDBD"/>
<meta name="color:Navigation Text Shadow" content="#F5A9E1"/>
<meta name="color:Navigation Box Shadow" content="#F5A9E1"/>

<meta name="image:Background" content="http://static.tumblr.com/gdh5wux/eIJm74vjo/tumblr_m3sd2nldzm1qhxwq3.jpg" />
<meta name="image:sidebar" content="http://static.tumblr.com/gdh5wux/pJgm81sjc/tumblr_lntvss6ivc1qh07y4o1_500.jpg"/>

<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" />

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

::-webkit-scrollbar {width: 9px; height: 4px;background:transparent;}
::-webkit-scrollbar-thumb {background:#ddd; border-radius:5px; box-shadow:0px 0px 10px #fff;}

#tumblr_controls{
position:fixed !important;
}

@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:"tangerine";src:url('http://static.tumblr.com/gdh5wux/MAfm61bhn/tangerine_regular.ttf');}

@font-face {font-family:"stars";src:url('http://static.tumblr.com/hcfbjje/sfRlpm8t0/starsfromoureyes.ttf');}

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

@font-face { font-family: "discipuli"; src: url('http://static.tumblr.com/gdh5wux/MN6moz1m2/discipuli.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;
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 {
width:940px;
margin-left:380px;
float:left;
}

.entry {
float:left;
margin:2px;
overflow:hidden;
border:1px solid {color:Posts Border};
background-color:{color:Posts BG};
{block:IndexPage}
width:300px;
{/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;
}

.perma
{
opacity: 0.0;
filter: alpha(opacity = 0);
margin-top:-21px;
width: px;
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 {

-webkit-transition: opacity 0.4s linear;
opacity: 1;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
filter: alpha(opacity = 100);

}

select {
font-size: 9px;
width: 100px;
margin-left: 10px;

}
option {
font-size: 9px;
text-align: left;

}
input[type=button]
{
font-size: 9px;
}

.likep {
width:21px;
height:20px;
overflow:hidden;
position:relative;
z-index:99;
position: absolute;
margin-top: 26px;
margin-left: 5px;
}
.rep {
width: 24px;
height: 20px;
overflow: hidden;
position: relative;
z-index: 99;
position: absolute;
margin-top: 26px;
margin-left: 29px;
}
.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;
}
.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 img{
width: 24px;
height: 20px;
line-height: 30px;
display: inline;
}

.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;
margin-top: 26px;
margin-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:'discipuli';
text-transform:none;
font-size:20px;
line-height:30px;
color:#333;
text-align:center;
}

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

.infinite {
align:right;
background: grey;
color:white;
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: #000000;}

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

div#sidebar{
width:350px;
height:640px;
top:5px;
left:5px;
position: fixed;
background-color:rgba(0,0,0,0.5);
color:{color:Sidebar Text};
border:2px solid {color:Sidebar Border};
}

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

#name2{
color:#ffffff;
font-family:"tangerine";
font-size:35px;
line-height:20px;
text-align:right;
border-bottom:1px dotted #F5A9E1;
text-transform:none;
}

.heart {
display: block;
font-size: 8px;
font-family: tinytots;
color:#ffffff;
line-height: 10px;
border-bottom: 0px solid #6aa5c9;
text-indent: 5px;
vertical-align: middle;
-webkit-transition-duration: .50s;
background: url('http://media.tumblr.com/tumblr_m6alyoHbIB1rqir0v.gif') no-repeat left;
padding-left: 20px;
padding-bottom: 2px;
}

.heart:hover{
color:#F5A9E1;
-webkit-transition-duration: .50s;
background:url('http://media.tumblr.com/tumblr_m6alyjPhHg1rqir0v.gif') no-repeat left;
}

#navbox{
width:auto;
height:auto;
margin-top:10px
margin-left:10px;
background-color:transparent;
}

div.navigate a{
height:20px;
width: 70px;
color:{color:Navigation Text};
background-color:transparent;
font-family: tinytots;
font-size:8px;
border:1px solid {color:Navigation Border};
border-radius:5px;
text-transform:uppercase;
text-shadow:0px 0px 1px {color:Navigation Text Shadow};
float:left;
text-align: center;
line-height:20px;
box-shadow:1px 1px 2px {color:Navigation Box Shadow};
margin:5px;
}

{CustomCSS}
</style>
<body>

<div id="sidebar">
<img src="{image:sidebar}">
<br><br>
<div id="name2">About the Blogette</div>
{description}
<div id="name2">Statistics</div>
<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 id="name2">Navigation</div>
<div id="navbox">
<div class="navigate">
<a href="/">Home</a>
<a href="/ask">Message</a>
<a href="/faq">Faq</a>
<a href="/submit">Submit</a>
<a href="/favs">Faves</a>
<a href="/more">More</a>
<a href="http://beautifully-flawless.tumblr.com/">Credit</a>
</div>
</div>
<br><br><br><br><br><br>
<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="55px" height="55px" />{/block:Followed}{/block:Following}</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}
<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:ExternalAudio}
{/block:ExternalAudio}
</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="50";height="50";align="left"class="askborder">
<div class="infinite">
<span></span>
{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>