Theme 27: Jasmine

<!--
Theme:27: Jasmine by Beautifully-Flawless / Vanilla Beaux
Please Do Not Remove the credit from this blog unless I Say you can.
-->
<html>
<head>
<script type="text/javascript">
// <![CDATA[
// all colours must be in format '#NNNNNN', not 'red' or 'rgb(7,8,9)'
var fgcolour="{color:Banner 1}"; // foreground colour
var hlcolour="{color:Banner 2}"; // highlight colour
var bgcolour="{color:Banner 3}"; // background colour
var glcolour="{color:Banner 4}"; // colour of glow around letters
var speed=75; // speed colours change, 1 second = 1000
var delay=10; // 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="#000" />
<meta name="color:Text" content="#000000" />
<meta name="color:Links" content="#aaa" />
<meta name="color:Links Hover" content="#aaa" />
<meta name="color:Posts Bg" content="#fff" />
<meta name="color:Posts Border" content="#ddd" />
<meta name="color:Posts Header" content="#000" />
<meta name="color:Sidebar Bg" content="#fff" />
<meta name="color:Sidebar Border" content="#fff" />
<meta name="color:Sidebar Header" content="#555" />
<meta name="color:Navigation Bg" content="#000" />
<meta name="color:Navigation Border" content="#fff" />
<meta name="color:Navigation Text" content="#fff" />
<meta name="color:Navigation Hover Bg" content="#fff" />
<meta name="color:Navigation Hover Text" content="#000" />
<meta name="color:Banner 1" content="#F5A9F2" />
<meta name="color:Banner 2" content="#FFADFF" />
<meta name="color:Banner 3" content="#dddddd" />
<meta name="color:Banner 4" content="#dddddd" />

<meta name="image:Background" content=""/>
<meta name="image:sidebar" content="http://static.tumblr.com/ff9f415b8413f010d98f9f4a86cd79e4/gdh5wux/5LImsrelb/tumblr_static_hqpics_281029_3.jpg"/>

<meta name="text:Link 1 URL" content="/submit" />
<meta name="text:Link 2 URL" content="/faq" />
<meta name="text:Link 3 URL" content="/links" />
<meta name="text:Link 1" content="Submit" />
<meta name="text:Link 2" content="Faq" />
<meta name="text:Link 3" content="Links" />
<meta name="text:Stats 1" content="INSERT STAT HERE" />
<meta name="text:Stats 2" content="INSERT STAT HERE" />
<meta name="text:Stats 3" content="Best Viewed on Google Chrome" />

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

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

@font-face{font-family:"Splendid";src:url('http://static.tumblr.com/gdh5wux/83pmsrgmh/windsong.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:Links};
text-decoration:none;
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
}

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

div#posts {
float:left;
width:920px;
margin-left:400px;
}

.entry {
margin:1px;
float:left;
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}
}

.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:'Splendid';
text-transform:none;
text-align:center;
font-size:30px;
line-height:30px;
color:{color:Posts Header};
}

.quote{
font-family:caviardreams;
font-size:12px;
color:#888;
text-transform:none;
line-height:10px;
text-align:center;
}

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:#eee;
color:black;
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;}

#sidebar{
position:fixed;
width:340px;
height:600px;
left:8px;
top:5px;
background:{color:Background};
border:1px dotted {color:Sidebar Border};
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

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

#sidebar:hover #des{
opacity:1;
top:0px;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

#des{
position:absolute;
width:340px;
height:600px;
left:0px;
top:-100px;
background:{color:Sidebar Bg};
opacity:0;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

#name{
color:{color:Sidebar Header};
font-family:"Reprox";
font-size:30px;
line-height:25px;
text-align:center;
border-bottom:1px dotted #dddddd;
text-transform:none;
}

div.navigate a{
height:20px;
width:70px;
float:left;
margin-bottom:6px;
margin-right:10px;
background-color:{color:Navigation Bg};
border:2px ridge {color:Navigation Border};
color:{color:Navigation Text};
font-size:8px;
line-height:20px;
text-align:center;
font-family:'tinytots';
text-transform:uppercase;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}


div.navigate a:hover{
color:{color:Navigation Hover Text};
background-color:{color:Navigation Hover Bg};
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

#banner1{
position:fixed;
font-family:"Splendid";
font-size:70px;
line-height:50px;
text-shadow:2px 1px 2px #D8D8D8;
text-transform:none;
left:0px;
top:530px;
color:#fff;
}

.heart{
display:block;
text-indent:5px;
vertical-align:left;
background:url('http://static.tumblr.com/sqpojvq/eRQltqnnj/09.gif')no-repeat left;
}

{CustomCSS}
</style>
<body>

<div id="sidebar">
<div id="des">

<center>
<img style="margin-top:-0px; width:300px;height:auto;"src="http://static.tumblr.com/gdh5wux/z6Mm8c5pt/stock-vector-calligraphical-design-elements-elements-for-page-decormmmation-103785554.png">
</center>

<div id="name">About Me</div>
{description}
<br>
<div id="name">Statistics</div>
<center>
<div class="heart">{text:Stats 1}</div>
<div class="heart">{text:Stats 2}</div>
<div class="heart">{text:Stats 3}</div>
</center>
<br>
<div id="name">Advice for the Week</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
<div id="name">Navigation</div>
<div class="navigate">
<center>
<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="http://beautifully-flawless.tumblr.com/">Credit</a>
</center>
</div>

<center>
<img style="width:300px;height:auto;"src="http://static.tumblr.com/gdh5wux/z6Mm8c5pt/stock-vector-calligraphical-design-elements-elements-for-page-decormmmation-103785554.png">
</center>

</div>
<img src="{image:Sidebar}">
<div id="banner1"><span id="wipe">{title}</span></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>