Theme 22: Caroline

<!-- Theme 22 Caroline By Beautifully Flawless.
Please do not remove the credit or I will be forced to take actions accodringly.
-->

<html>
<head>

<script type="text/javascript">
// <![CDATA[
// all colours must be in format '#NNNNNN', not 'red' or 'rgb(7,8,9)'
var fgcolour="{color:Neon Banner 1}"; // foreground colour
var hlcolour="{color:Neon Banner Highlights}"; // highlight colour
var bgcolour="{color:Neon Banner 2}"; // background colour
var glcolour="{color:Neon Banner Glow}"; // colour of glow around letters
var speed=75; // speed colours change, 1 second = 1000
var delay=20; // how long to wait between wipes
var alink=""; // page to link text to (set to ="" for no link)

/****************************
*Multi-Wipe Neon Text Effect*
*(c)2003-12 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var w_txt, w_txl;
var w_flp=bgcolour;
var w_sty=Math.floor(Math.random()*8);
var w_cnt=-1;
var wipes=new Array();
var wrand=new Array();
window.onload=function() { if (document.getElementById) {
var i, wiper, wipei;
wiper=document.getElementById("wipe");
w_txt=wiper.firstChild.nodeValue;
w_txl=w_txt.length;
while (wiper.childNodes.length) wiper.removeChild(wiper.childNodes[0]);
for (i=0; i<w_txl; i++) {
wipei=document.createElement("span");
wipei.appendChild(document.createTextNode(w_txt.charAt(i)));
wipes[i]=wipei.style;
wipes[i].textShadow=glcolour+" 0px 0px 5px";
wipes[i].color=fgcolour;
wiper.appendChild(wipei);
}
if (alink) {
wiper.style.cursor="pointer";
wiper.onclick=function() { top.location.href=alink; }
}
for (i=0; i<w_txl; i++) wrand[i]=i;
wiper=setInterval("randwipe()", speed);
}}

function c(i, shade) {
if (shade==bgcolour) wipes[i].textShadow="none";
else wipes[i].textShadow=glcolour+" 0px 0px 15px";
wipes[i].color=shade;
}

function randwipe() {
var w_old;
if (w_cnt++<w_txl+2+delay*(w_flp==fgcolour)) eval("wipe"+w_sty+"();");
else {
w_cnt=-1;
w_flp=(w_flp==fgcolour)?bgcolour:fgcolour;
w_old=w_sty;
while (w_old==w_sty) w_sty=Math.floor(Math.random()*9);
}
}

function dechex(dec) { return ((dec<16)?"0":"")+dec.toString(16); }

function wipe0() { // full curtains
var half=Math.floor(w_txl/2);
if (w_cnt<w_txl) {
c(w_cnt, (w_cnt<half)?hlcolour:w_flp);
c(w_txl-w_cnt-1, (w_cnt<half)?hlcolour:w_flp);
}
}

function wipe1() { // random
var i, rand, temp;
if (w_cnt==0) {
for (i=0; i<w_txl; i++) {
rand=Math.floor(Math.random()*w_txl);
temp=wrand[i];
wrand[i]=wrand[rand];
wrand[rand]=temp;
}
}
if (w_cnt<w_txl) c(wrand[w_cnt], hlcolour);
if (w_cnt>0 && w_cnt<w_txl+1) c(wrand[w_cnt-1], w_flp);
}

function wipe2() { // forwards
if (w_cnt<w_txl) c(w_cnt, hlcolour);
if (w_cnt>0 && w_cnt<w_txl+1) c(w_cnt-1, w_flp);
}

function wipe3() { // backwards
if (w_cnt<w_txl) c(w_txl-(w_cnt+1), hlcolour);
if (w_cnt>0 && w_cnt<w_txl+1) c(w_txl-w_cnt, w_flp);
}

function wipe4() { // searchlight
if (w_cnt<w_txl) c(w_cnt, hlcolour);
if (w_cnt>0 && w_cnt<w_txl+1) c(w_cnt-1, w_flp);
if (w_cnt>1 && w_cnt<w_txl+2) c(w_cnt-2, hlcolour);
if (w_cnt>2 && w_cnt<w_txl+3) c(w_cnt-3, (w_flp==fgcolour)?bgcolour:fgcolour);
if (w_cnt==w_txl+2) w_flp=(w_flp==fgcolour)?bgcolour:fgcolour;
}

function wipe5() { // fade
var i;
if (w_cnt<w_txl+3) {
var start=(w_flp==fgcolour)?bgcolour:fgcolour;
var temp="#";
for (i=1; i<6; i+=2) {
var hex1=parseInt(start.substring(i,i+2),16);
var hex2=parseInt(w_flp.substring(i,i+2),16);
temp+=dechex(Math.floor(hex1+(hex2-hex1)*(w_cnt/(w_txl+2))));
}
for (i=0; i<w_txl; i++) c(i, temp);
}
}

function wipe6() { // flash
var i;
if (w_cnt<6*Math.floor(w_txl/6)+3) {
if (w_cnt%6==0 || w_cnt%6==3) for (i=0; i<w_txl; i++) c(i, hlcolour);
else if (w_cnt%6==1) for (i=0; i<w_txl; i++) c(i, w_flp);
else if (w_cnt%6==4) for (i=0; i<w_txl; i++) c(i, (w_flp==fgcolour)?bgcolour:fgcolour);
}
}

function wipe7() { // checkerboard
var qtr=Math.floor(w_txl/4);
if (w_cnt<qtr) {
c(w_cnt, hlcolour);
c(w_cnt+2*qtr, hlcolour);
}
else if (w_cnt<2*qtr) {
c(w_cnt-qtr, w_flp);
c(w_cnt+qtr, w_flp);
}
else if (w_cnt<3*qtr) {
c(w_cnt-qtr, hlcolour);
c(w_cnt+qtr, hlcolour);
}
else if (w_cnt<w_txl) {
c(w_cnt-2*qtr, w_flp);
c(w_cnt, w_flp);
}
}

function wipe8() { // half curtains
var half=Math.floor(w_txl/2);
if (w_cnt<half) {
c(w_cnt, hlcolour);
c(w_txl-w_cnt-1, hlcolour);
}
else if (w_cnt<w_txl) {
c(w_cnt-half, w_flp);
c(w_txl+half-w_cnt-1, w_flp);
}
}
// ]]>
</script>

<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:Links" content="#f8989a" />
<meta name="color:link hover" content="#999" />
<meta name="color:Neon Banner 1" content="#F65DD0" />
<meta name="color:Neon Banner 2" content="#8b8b8b" />
<meta name="color:Neon Banner Highlights" content="#F8CDED" />
<meta name="color:Neon Banner Glow" content="#ffffff" />
<meta name="color:Banner" content="#fff" />
<meta name="color:Banner Shadow" content="#ddd" />
<meta name="color:Scrollbar BG" content="#000" />
<meta name="color:Scrollbar" content="#fff" />
<meta name="color:PostsBG" content="#fff" />
<meta name="color:Posts Border" content="#ddd" />
<meta name="color:Sidebar Border" content="#fff" />
<meta name="color:Sidebar Hover BG" content="#000" />
<meta name="color:Sidebar Text" content="#fff" />
<meta name="color:Sidebar Shadow" content="#2E2E2E" />
<meta name="color:Navigation BG" content="#f65dd0" />
<meta name="color:Navigation Border" content="#FFF" />
<meta name="color:Navigation Text" content="#fff" />
<meta name="color:Navigation Hover BG" content="#000" />
<meta name="color:Navigation Hover Text" content="#fff" />
<meta name="color:Navigation Hover Shadow" content="#888" />


<meta name="image:Background" content="" />


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

::-webkit-scrollbar {width: 9px; height: 4px;background:transparent;}
::-webkit-scrollbar-thumb {background:{color:Scrollbar}; border-radius:5px; box-shadow:0px 0px 10px {color:Scrollbar Shadow};}

#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:Links};
text-decoration: none;
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
}

a:hover{
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
}

div#posts {
width:820px;
margin-left:580px;
margin-top:0px;
float:left;
}

.entry {
float:left;
margin:2px;
overflow:hidden;
background-color:#fff;
border:1px solid #fff;
{block:IndexPage}
width:380px;
{/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:'oregano';
text-transform:uppercase;
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;}

#banner2{
position:absolute;
font-family:"tangerine";
font-size:50px;
line-height:60px;
text-shadow:1px 1px 1px {color:Banner Shadow};
text-transform:none;
color:{color:Banner};
margin-top:-15px;
margin-left:40px;
text-align:center;
letter-spacing:1px;
}



#name{
color:#ffffff;
font-family:"discipuli";
font-size:20px;
line-height:25px;
text-align:left;
border-bottom:1px dotted #dddddd;
text-transform:none;
}

#sidebar{
position:fixed;
margin-left:218px;
margin-top:180px;
text-align:justify;
z-index:9999;
width:360px;
height:270px;
color:{color:Sidebar Text};
border-radius:10px;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#sidebar:hover{
margin-top:120px;
overflow:hidden;
height:400px;
background:{color:Sidebar Hover BG};
color:{color:Sidebar Text};
border:1px dotted {color:Sidebar Border};
}

#sidebar #description{
opacity:1;
font-family:tinytots;
color:{color:sidebar text};
}

#sidebar:hover #description{
margin-top:5px;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#sidebar:hover #jadore{
opacity:1;
background:#000;
color:#ffffff;
}

#jadore{
opacity:0;
height:auto;
width:360px;
font-family:tinytots;
-webkit-transition: opacity 0.3s linear;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}

div.navigate a{
height:20px;
width: 70px;
background-color:{color:Navigation BG};
border: 1px dotted {color:Navigation Border};
border-radius:5px;
font-family:tinytots;
font-size:8px;
text-transform:uppercase;
margin:3px;
margin-left:10px;
float:left;
text-align: center;
line-height:20px;
color:{color:Navigation Text};
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-transform: rotate(0deg);
}


div.navigate a:hover{
background-color:{color:Navigation Hover BG};
color:{color:Navigation Hover Text};
text-shadow:1px 0px 1px {color:Navigation Hover Shadow};
}

#sidebarpic img{position:fixed;height:648px;margin-left:-120px; margin-top:0px;}

.heart {
display:block;
font-size:8px;
font-family:tinytots;
color:#ffffff;
line-height:10px;
text-transform:uppercase;
text-align:center;
vertical-align:middle;
background: url('http://media.tumblr.com/tumblr_loepcrNSAs1qhcep0.gif') no-repeat left;
padding-left: 20px;
padding-bottom: 2px;
}

{CustomCSS}
</style>
<body>

<div id="sidebar">
<div id="description">
<div id="banner2"><span id="wipe">{title}</span></div>
<br><br><br><br><br>
<div class="navigate">
<center>
<a href="/">Home</a>
<a href="/ask">Inbox</a>
<a href="/submit">Submit</a>
<a href=".faves">Favs</a>
<a href="/links">Links</a>
<a href="http://beautifully-flawless.tumblr.com/">Credit</a>
</center>
</div>
<br><br><br><br><br><br><br><br>
{description}
<div id="jadore">
<div id="name">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 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
<br><br>
<div id="name">Statistics</div>
<div class="heart">STATS HERE</div>
<div class="heart">STATS HERE</div>
<div class="heart">STATS HERE</div>
<div class="heart">This theme is best viewed in google chrome.</div>
</div>
</div>

</div>

<div id="sidebarpic">
<img src="http://static.tumblr.com/gdh5wux/WExm80xbt/candice-swanepoel-victorias-secret-photoshoot-clothes-.png">
</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>