Theme 71: Chloe

<!-- THEME 71: Chloe -->
<!-- BY BEAUTIFULLY FLAWLESS -->
<!-- PLEASE KEEP CREDIT -->


<html>
<head>

<!--DO NOT DELETE THIS CODING-->
<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}

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

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!--DO NOT DELETE THIS CODING-->



<!--Variables-->
<meta name="color:Background" content="#fff" />
<meta name="color:Text" content="#000" />
<meta name="color:Links" content="#ababab" />
<meta name="color:Posts Background" content="#fff" />
<meta name="color:Image Permalink" content="#aaa" />
<meta name="color:Permalink" content="#888" />
<meta name="color:Posts Header" content="#aaa" />
<meta name="color:Asker URL" content="#888" />
<meta name="color:BlockQuote Background" content="#F7F7F7" />
<meta name="color:BlockQuote Border" content="#888" />
<meta name="color:BlockQuote Shadow" content="#ccc" />
<meta name="color:Blogtitle" content="#999" />
<meta name="color:Blogtitle Shadow" content="#000" />
<meta name="color:Icon Links Title" content="#777" />
<meta name="color:Ask Icons BG" content="#ddd" />
<meta name="color:Color Scheme" content="#FFB6C1" />
<meta name="color:Des Background" content="#fff" />
<meta name="color:Lines" content="#ddd" />
<meta name="color:Posts Border" content="#eee" />
<meta name="color:Sidebar Bg" content="#fff" />
<meta name="color:Navigation Bg" content="#fff" />

<meta name="image:Sidebar" content="http://static.tumblr.com/ab3831fd25f1166b29c3b42a803b9149/aorjzw7/sfqmrjh25/tumblr_static_hqdiesel_28829_790.jpg" />

<meta name="text:Stat 1" content="INSERT STAT HERE" />
<meta name="text:Stat 2" content="INSERT STAT HERE" />
<meta name="text:Link 1 URL" content="/ask" />
<meta name="text:Link 2 URL" content="/submit" />
<meta name="text:Link 3 URL" content="/archive" />
<meta name="text:Link 4 URL" content="/favorites" />
<meta name="text:Link 5 URL" content="" />
<meta name="text:Link 6 URL" content="" />
<meta name="text:Link 7 URL" content="" />
<meta name="text:Link 1" content="Inbox" />
<meta name="text:Link 2" content="Submit" />
<meta name="text:Link 3" content="Archive" />
<meta name="text:Link 4" content="Favorites" />
<meta name="text:Link 5" content="Link 1" />
<meta name="text:Link 6" content="Link 2" />
<meta name="text:Link 7" content="Link 3" />

<!--Variables-->


<link href='http://fonts.googleapis.com/css?family=Antic|Carrois Gothic SC|Bilbo Swash Caps|Tulpen+One|Fjalla+One|Dawning+of+a+New+Day|Metrophobic|Berkshire+Swash|BenchNine|Euphoria+Script|Rouge+Script|Parisienne|Fredoka+One' rel='stylesheet' type='text/css'>
<style type="text/css">

::-webkit-scrollbar {width: 8px; height: 4px;background:white;}
::-webkit-scrollbar-thumb { background-color:{color:Color Scheme};-webkit-box-shadow: inset 0 0 12px #000;-webkit-border-radius: 6px;border-radius: 6px;}

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

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

body, div, p, textarea, submit, input {
font-family:'calibri';
font-size:11px;
line-height:12px;
color:{color:Text};
text-transform:none;
}

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

div#posts {
float:left;
width:660px;
z-index:99;
padding:6px;
margin-left:390px;
background-image:url('http://static.tumblr.com/gdh5wux/eqSm7hu9j/dc4848_coral-vintage.gif');
background-attachment:fixed;
box-shadow:0px 0px 6px #777;
border:2px solid {color:Color Scheme};
}

.entry {
float:left;
margin:6px;
padding:6px;
overflow:hidden;
background-color:{color:Posts Background};
border:2px solid {color:Posts Border};
{block:IndexPage}
width:300px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
padding:10px;
margin-left:60px;
{/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;
top:20px;
-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: #fff;
width:280px;
height:10px;
top:0px;
left:10px;
padding:6px;
opacity:0.0;
font-family:'Calibri';
color:#aaa;
font-size:8px;
line-height:10px;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
border:1px solid {color:Color Scheme};
-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;
}

#permalink a{color:{color:Permalink};}

#permalink a:hover{color:#aaa;}

#info{
font-family:'Calibri';
color:{color:Permalink};
font-size:10px;
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:'quicksand';
text-transform:uppercase;
font-size:20px;
line-height:20px;
color:{color:Posts Header};
text-shadow:1px 2px 4px #ddd;
text-align:center;
}

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

#audiocontainer{
width:500px;
height:110px;
margin-bottom:5px;
}

.albumart{
width:100px;
height:100px;
position:absolute;
}

.albumart img{
width:100px;
height:100px;
float:left;
}

.defaultalbum{
width:100px;
height:100px;
position:absolute;
}

.defaultalbum img{
width:100px;
height:100px;
float:left;
}

.audioinfo{
padding:3px;
margin:0 0 5px 100px;
text-transform:uppercase;
font-family:'Century Gothic';
font-size:8px;
border-left:15px solid {color:Color Scheme};
}

.audioinfo:hover{
border-left:30px solid {color:Color Scheme};
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
}

.audioinfotwo{
padding:3px;
margin:0 0 5px 100px;
text-transform:uppercase;
font-size:8px;
border-left:15px solid {color:Color Scheme};
}

.audioinfotwo:hover{
border-left:30px solid {color:Color Scheme};
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
}

.margin{
margin-bottom:1px;
}

.player{
margin-left:100px;
margin-top:0px;
float:left;
}

asker{
font-family:'Comic Sans MS';
font-size:10px;
text-transform:uppercase;
color:{color:Asker URL};
}

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

#askbox{
padding:6px;
margin-top:0px;
margin-left:0px;
overflow:hidden;
border-radius:10px;
border-bottom:3px solid {color:Color Scheme};
-moz-box-shadow: 0px 1px 3px {color:BlockQuote Shadow};
-webkit-box-shadow: 0px 1px 3px {color:BlockQuote Shadow};
box-shadow: 0px 1px 3px {color:BlockQuote Shadow};
}

blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 10px;
background-color:{color:BlockQuote Background};
border-left: 7px solid {color:BlockQuote Border};
-moz-box-shadow: 1px 1px 1px {color:BlockQuote Shadow};
-webkit-box-shadow: 1px 1px 1px {color:BlockQuote Shadow};
box-shadow: 1px 1px 1px {color:BlockQuote Shadow};
}

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:{color:text};}

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

@font-face { font-family:"arsenale"; src: url('http://static.tumblr.com/emvmfcr/fVPlulq0f/arsenale_white.ttf'); }

@font-face { font-family:"quicksand"; src: url('http://static.tumblr.com/fxpo5zq/ad0m5vybr/quicksand_light.otf'); }

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

#bg{
position:fixed;
width:120px;
height:100%;
top:0px;
left:0px;
background-image: url('http://static.tumblr.com/gdh5wux/x8Ymp0ibv/2dspqgp__2_.png');
border-right:12px solid {color:Color Scheme};
-moz-box-shadow:1px 0px 5px #888;
-webkit-box-shadow:1px 0px 5px #888;
box-shadow:1px 0px 5px #888;
}

#sidebar{
position:fixed;
width:250px;
height:400px;
top:50px;
left:30px;
padding:12px;
background:{color:Sidebar Bg};
z-index:999999;
border:4px double {color:Color Scheme};
border-radius:0px;
}

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

#sidebar:hover #des{
opacity:1;
bottom:20px;
background: rgba(255, 255, 255, 0.7);
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}

#des{
position:absolute;
width:250px;
height:40px;
left:0px;
bottom:0px;
padding:12px;
font-size:10px;
font-style:italic;
text-align:center;
text-transform:none;
opacity:0;
border-top:2px double {color:Color Scheme};
border-bottom:2px double {color:Color Scheme};
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}

#blogtitle{
position:fixed;
font-family:'Tall';
font-size:70px;
left:140px;
top:560px;
z-index:99999999;
opacity:1;
text-transform:uppercase;
color:{color:Blogtitle};
text-shadow:0px 2px 3px {color:Blogtitle Shadow};
-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;
}

#stats{
position:absolute;
max-width:200px;
height:15px;
top:440px;
left:100px;
background:{color:Sidebar Bg};
font-family:'calibri';
font-size:10px;
line-height:15px;
padding:4px;
border:2px solid {color:Color Scheme};
border-radius:0px 0px 0px 0px;
}

#links{
background-color:{color:Sidebar Bg};
border:1px solid #ddd;
font-family:'Open Sans';
font-size:12px;
color:{color:Text};
position:fixed;
top:60px;       /* EDIT HERE TO MOVE UP OR DOWN */
left:270px;
width:40px;
height:400px;
z-index:999;
-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;}

#links:hover{left:312px;opacity:1;}

#linkstab{
background-color:{color:Sidebar Bg};
border:2px solid #ddd;
position:absolute;
width:30px;
height:265px;
top:-1px;
opacity:.6;
font-family:'quicksand';
font-size:20px;
line-height:24px;
margin-left:40px;
text-align:center;
}

#linksbox{
width:190px;
height:400px;
margin-top:10px;
margin-left:3px;
text-align:center;
font-family:'Calibri';
color:{color:Text};
z-index:99999;
overflow:hidden;
vertical-align:text-bottom;
opacity:1;}

div.navigate a{
margin-bottom:12px;
margin-top:0px;
float:center;
overflow:hidden;
width:20px;
height:20px;
padding:5px;
font-family:'consolas';
font-size:20px;
line-height:20px;
display:block;
background:{color:Navigation Bg};
border:1px solid {color:Color Scheme};
-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;
}

div.navigate a:hover{
-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;
}

div#qTip {
padding:2px 15px 2px 15px;
display:none;
text-align: center;
position: absolute;
font-size:8px;
line-height:15px;
font-family:'Calibri';
font-size:10px;
text-transform:uppercase;
font-style:italic;
z-index: 9999999;
color:{color:Icon Links Title};
}

{CustomCSS}
</style>
<body>

<div id="bg"></div>

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

<div id="sidebar">
<div id="des">{description}</div>
<div id="stats">{text:Stat 1} &#8224; {text:Stat 2}</div>
<img src="{image:Sidebar}">
</div>

<div id="links">
<div id="linksbox">
<div class="navigate">
<a href="/"title="Refresh">01</a>
<a href="{text:Link 1 URL}"title="{text:Link 1}">02</a>
<a href="{text:Link 2 URL}"title="{text:Link 2}">03</a>
<a href="{text:Link 3 URL}"title="{text:Link 3}">04</a>
<a href="{text:Link 4 URL}"title="{text:Link 4}">05</a>
<a href="{text:Link 5 URL}"title="{text:Link 5}">06</a>
<a href="{text:Link 6 URL}"title="{text:Link 6}">07</a>
<a href="{text:Link 7 URL}"title="{text:Link 7}">08</a>
<a href="http://vanillabeaux.co.vu/"title="Credit">09</a>
</div>
</div>

<div id="linkstab">N<br>A<br>V<br>I<br>G<br>A<br>V<br>T<br>I<br>O<br>N</div>
</div>
</div>

<img style="position:fixed;height:600px;right:-10px;bottom:0px;z-index:-99999;" src="http://static.tumblr.com/aorjzw7/0Jnmrjuif/clip.png">

<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> . {timeago}
</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}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a> . {timeago}
</div>
{block:Link}

{block:Photo}
{block:IndexPage}
<div id="permalink">
<a href="{Permalink}">{timeago} / <a href="{permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{LinkOpenTag}
<div class="photo"><a href="{permalink}">
<img 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">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> &#8224; <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}
{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> . {timeago}
</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> . {timeago}
</div>
{/block:Chat}

{block:Audio}
<div id="post audio">
<div id="audiocontainer">
<div class="albumart">
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
</div>
{block:TrackName}
<div class="audioinfo">{TrackName}</div>
{/block:TrackName}
{block:Artist}
<div class="audioinfotwo">{Artist}</div>
{/block:Artist}
{block:Album}
<div class="audioinfo">{Album}
<div class="margin"></div>
</div>
{/block:Album}
<div class="player">{AudioPlayerWhite}</div>
</div>
</div>
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a> . {timeago}
</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> . {timeago}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}
</center>
{/block:PermalinkPage}
{block:Video}

{block:Answer}
<div id="askbox">
<img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:6px;border-radius:8px; padding:3px; background:#ddd;"/>
<asker>{Asker}:</asker>
<div id="ask">{Question}</div>
</div>
{Answer}
{block:IndexPage}
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . {timeago}
</div>
{/block:IndexPage}
{/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>