Theme 46: Charolette

<!--Theme 46: Charolette
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="#fff"/>
<meta name="color:text" content="#000" />
<meta name="color:Posts BG" content="#fff"/>
<meta name="color:Scrollbar" content="#ddd"/>
<meta name="color:Link" content="#888"/>
<meta name="color:Link Hover" content="#ddd"/>
<meta name="color:Posts Border" content="#ddd"/>
<meta name="color:Sidebar BG Border" content="#ddd"/>
<meta name="color:Sidebar Image Border" content="#ddd"/>
<meta name="color:Description BG" content="#fff"/>
<meta name="color:Description Border" content="#ddd"/>
<meta name="color:Banner" content="#999"/>
<meta name="color:Banner Shadow" content="#555"/>
<meta name="color:Favorites Shadow" content="#888"/>
<meta name="color:Navigation Bar BG" content="#fff"/>
<meta name="color:Navigation Bar Border" content="#ddd"/>
<meta name="color:Portrait Icon Border" content="#ddd"/>
<meta name="color:Navigation BG" content="#fff"/>
<meta name="color:Navigation Border" content="#ddd"/>
<meta name="color:Navigation Text" content="#000"/>

<meta name="image:Background" content="" />
<meta name="image:sidebar" content="http://static.tumblr.com/d6ce7d6b41d950b8c38dd25a7d5da9ba/gdh5wux/HVQmi61ms/tumblr_static_tumblr_m42rpbvksr1rqijwao1_500.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: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 5 URL" content=""/>

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

<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:Quote 1" content="Fashion Fades"/>
<meta name="text:Quote 2" content="Style"/>
<meta name="text:Quote 3" content="is Eternal"/>
<meta name="text:QuoteSource" content="-Coco Chanel"/>


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


::-webkit-scrollbar {width: 9px; height: 3px; background:transparent;}
::-webkit-scrollbar-thumb {background:{color:Scrollbar}; border-radius:5px; -webkit-box-shadow: inset 0 0 20px #000000;}

#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:"caviardreams";src:url('http://static.tumblr.com/alux5te/8BFltyod3/caviardreams.ttf'); }

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

@font-face { font-family: "JennaSue"; src: url('http://static.tumblr.com/gdh5wux/vtSmoz1me/jennasue.ttf'); }

@font-face { font-family: "edwardian"; src: url('http://static.tumblr.com/oetadgc/sUtm6d6kz/ufonts.com_edwardian-script-itc-2.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:820px;
margin-left:420px;
}

.entry {
margin:3px;
float:left;
padding:6px;
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:'JennaSue';
text-transform:none;
text-align:center;
font-size:40px;
line-height:40px;
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;}

.infinite {
align:right;
background:#ddd;
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:tinytots;
line-height:1px;
left:-10px;
top:10px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:10px solid #ddd;
}

.askborder{float:left;margin:1px 4px 0 0;}

#side{
position:fixed;
top:0px;
left:20px;
width:400px;
height:100%;
background-image: url('http://static.tumblr.com/gdh5wux/qZ1mp0ig6/fallen-angel-vintage-design-31000.gif');
border:4px solid {color:Sidebar BG Border};
}

#sidebar{
position:absolute;
width:360px;
height:220px;
left:14px;
top:50px;
border:4px solid {color:Sidebar Image Border};
webkit-transition:all 0.9s linear;
-webkit-transition:all 0.9s linear;
-moz-transition:all 0.9s linear;
transition:all 0.9s linear;
}

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

#sidebar:hover #des{
opacity:1;
top:230px;
webkit-transition:all 0.9s linear;
-webkit-transition:all 0.9s linear;
-moz-transition:all 0.9s linear;
transition:all 0.9s linear;
}

#des{
position:absolute;
width:360px;
max-height:280px;
top:200px;
left:-4px;
opacity:0;
z-index:99;
text-align:center;
background-color:{color:Description BG};
border:4px solid {color:Description Border};
webkit-transition:all 0.9s linear;
-webkit-transition:all 0.9s linear;
-moz-transition:all 0.9s linear;
transition:all 0.9s linear;
}

#banner{
position:absolute;
font-family:'pacifico';
font-size:40px;
color:{color:Banner};
text-shadow:1px 0px 1px {color:Banner Shadow};
left:10px;
top:20px;
text-transform:none;
}

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

#faves img {
width:60px;
height:60px;
margin-right:5px;
border-radius:3px;
box-shadow:0px 0px 5px {color:Favorites Shadow};
-webkit-transition-duration:.7s;
}

.heart {
display:block;
line-height:15px;
vertical-align:left;
text-transform:uppercase;
text-align:center;
background:url('http://media.tumblr.com/tumblr_m0ohoyUb7m1qfjy56.gif') no-repeat left;
}

.heart:hover{
background:url('http://media.tumblr.com/tumblr_m0ohp6QJDN1qfjy56.gif')no-repeat left;
}

#navigation{
position:fixed;
width:90px;
height:100%;
padding:10px;
background-color:{color:Navigation Bar BG};
border:4px double {color:Navigation Bar Border};
left:1220px;
top:0px;
}

#iconpic img{
position:absolute;
width:96px;
height:96px;
border:3px double {color:Portrait Icon Border};
top:30px;
left:4px;
}

div.navigate a{
height:20px;
width:90px;
font-size:8px;
float:left;
margin-left:-5px;
margin-top:130px;
margin-bottom:-120px;
display:block;
line-height:20px;
text-align:center;
text-transform:uppercase;
color:{color:Navigation Text};
background-color:{color:Navigation BG};
border:3px double {color:Navigation Border};
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}


{CustomCSS}
</style>
<body>

<div id="side">
<div id="banner">{title}</div>
<div id="sidebar">
<div id="des">
{description}
<br><br>
<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>
<br>
<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>
<a href="{text:Favorite 5 URL}"><img src='{image:Fav 5}'title="{text:Favorite 5}"/></a>
</div>
</div>
<img src="{image:sidebar}">
</div>

<div id="navigation">
<div id="iconpic"><a href="/"><img src="{PortraitURL-96}"></a></div>
<div class="navigate">
<a href="/">Home</a>
<a href="/ask">Inbox</a>
<a href="/submit">Submit</a>
<a href="/links">Links</a>
<a href="http://beautifully-flawless.tumblr.com/">Credit</a>
</div>
</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>