Theme 68: Veronica

<!--
Theme 68: Veronica
Made By: Beauifully Flawless
PLEASE LEAVE CREDIT
-->
<html>
<head>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>



<!--Variables-->
<meta name="color:Background" content="#333333" />
<meta name="color:Scrollbar" content="#555" />
<meta name="color:Text" content="#fff" />
<meta name="color:Links" content="#D469C4" />
<meta name="color:Post Border" content="#444" />
<meta name="color:Permalink Border" content="#555555" />
<meta name="color:Permalink Text" content="aaa" />
<meta name="color:Audio" content="#444" />
<meta name="color:Audio Hover" content="#888" />
<meta name="color:Posts Header" content="#aaa" />
<meta name="color:Asker Text" content="#888" />
<meta name="color:Topbar Bg" content="#2E2E2E" />
<meta name="color:Topbar Border" content="#444" />
<meta name="color:Sidepic Bg" content="#333" />
<meta name="color:Sidepic Border" content="#444" />
<meta name="color:Blogtitle" content="#444" />
<meta name="color:Welcome Text" content="#7E7E7E" />
<meta name="color:Icon Border" content="#444" />
<meta name="color:Stats" content="#888" />
<meta name="color:Featured Border" content="#444" />
<meta name="color:Header" content="#666" />
<meta name="color:Faves Border" content="#444" />
<meta name="color:Navigation Bg" content="#2E2E2E" />
<meta name="color:Navigation Border" content="#444" />
<meta name="color:Navigation Text" content="#888" />
<meta name="color:Links Hover Title Bg" content="#333" />
<meta name="color:Links Hover Title Border" content="#444" />


<meta name="image:sidebar" content="http://static.tumblr.com/672c104077a0c868b62ba803979cacd0/gdh5wux/75Imr6k71/tumblr_static_1.jpg" />
<meta name="image:Fav 1" content="http://i.imgur.com/pYTFCP2.png" />
<meta name="image:Fav 2" content="http://i.imgur.com/ZYTS8qa.jpg" />
<meta name="image:Fav 3" content="http://i.imgur.com/9ikQnuz.jpg" />


<meta name="text:Welcome" content="Welcome to my blog" />
<meta name="text:Header 1" content="Featured" />
<meta name="text:Header 2" content="Blogroll" />
<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 1" content="Favorite 1" />
<meta name="text:Favorite 2" content="Favorite 2" />
<meta name="text:Favorite 3" content="Favorite 3" />
<meta name="text:Stats 1" content="INSERT STAT HERE" />
<meta name="text:Stats 2" content="INSERT STAT HERE" />
<meta name="text:Link 1 URL" content="/submit" />
<meta name="text:Link 2 URL" content="/archive" />
<meta name="text:Link 3 URL" content="/links" />
<meta name="text:Link 1" content="Submit" />
<meta name="text:Link 2" content="Archive" />
<meta name="text:Link 3" content="Other Links" />

<!--Variables-->

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

<style type="text/css">

::-webkit-scrollbar {width: 10px; height: 4px; background: {color:Background}; }
::-webkit-scrollbar-thumb { background-color:{color:Scrollbar}; -webkit-box-shadow: inset 0 0 20px #000; -webkit-border-radius: 10px;border-radius: 10px;}

#tumblr_controls{
position:fixed !important;
z-index: 999999999999;
}

@font-face { font-family: "tinytots"; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf'); }

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

@font-face { font-family:"Elegant"; src: url('http://static.tumblr.com/zruguhm/k34mpyt1x/elegantlight.ttf'); }

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

@font-face { font-family: "blackswan"; src: url('http://static.tumblr.com/q54tzar/7POm34eyl/a_s_black_swan_3_.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;
}

b, strong{font-family:'consolas';font-size:10px; color:#aaaaaa; 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;
text-shadow:1px 1px 2px #000;
}

.wrapper{
margin: 0px auto;
width: 802px;
}

.header{
float: left;
width: 100%;
}

.left{
float:left;
margin-right:200px;
width:1000px;
}

.right{
float: right;
width:200px;
}

#container {
position:relative;
margin:auto;
width:1200px;
}

div#posts {
width:1220px;
left:0px;
margin-top:210px;
z-index:999;
float:left;
}

.entry {
margin:6px;
float:left;
padding:10px;
overflow:hidden;
background-color:{color:Background};
border:2px solid {color:Post Border};
box-shadow:1px 1px 2px #000;
{block:IndexPage}
width:250px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
margin-left:230px;
{/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 #info{
opacity:1.0;
bottom:10px;
-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;
}

#info{
position:absolute;
background: rgba(51, 51, 51, 0.9);
border:1px solid {color:Permalink Border};
width:240px;
height:20px;
bottom:0px;
left:10px;
overflow:hidden;
padding:4px;
opacity:0.0;
font-family:'Calibri';
font-size:9px;
color:{color:Permalink Text};
line-height:20px;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
-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;
}

#infoo{
color:{color:Permalink Text};
font-size:8px;
text-align:right;
line-height:20px;
margin-top:10px;
border-top:1px dotted #ddd;
}

#infscr-loading{
bottom:-70px;
position:absolute;
left:50%;
margin-left:-8px;
width:16px;
height:11px;
overflow:hidden;
margin-bottom: 50px;
}

#audiocontainer{
max-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-size:8px;
border-left:15px solid {color:Audio};
}

.audioinfo:hover{
border-left:30px solid {color:Audio Hover};
-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:Audio};
}

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

.margin{
margin-bottom:1px;
}

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

.title{
font-family:'Hasteristico';
text-transform:uppercase;
font-size:23px;
line-height:25px;
color:{color:Posts Header};
text-shadow:2px 1px 2px #222;
text-align:center;
}


.quote{
font-family:quicksand;
font-size:12px;
color:#ccc;
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;
}

asker{
font-family:'Hasteristico';
font-size:12px;
text-transform:uppercase;
color:{color:Asker Text};
}

#ask{
padding:6px;
font-family:'tinytots';
font-size:8px;
text-transform:uppercase;
color:{color:Asker Text};
}

#askbox{
background-color:{color:Background};
margin-top:0px;
margin-left:3px;
overflow:auto;
padding:4px;
}

ul, ol, li{list-style:circle; margin:3px; padding-left:10px;}
.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:15px; position:relative; top:3px;}

#topbar{
position:fixed;
background:{color:Topbar Bg};
width:1140px;
height:200px;
float:center;
top:0px;
z-index:99999;
border:4px solid {color:Topbar Border};
box-shadow:-1px 1px 2px #222, 1px -1px 2px #333;
}

#sidebar{
position:absolute;
width:160px;
height:160px;
top:15px;
left:20px;
background:{color:Sidepic Bg};
border:4px solid {color:Sidepic Border};
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}

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

#blogtitle{
position:absolute;
left:220px;
top:60px;
text-transform:none;
font-size:80px;
color:{color:Blogtitle};
font-family:'blackswan';
z-index:999999;
text-shadow:0px -1px 3px #000;
text-align:center;
}

#welcome{
position:absolute;
color:{color:Welcome Text};
font-family:"Elegant";
font-size:30px;
text-shadow:0px 1px 3px #666;
left:610px;
top:80px;
text-transform:uppercase;
}

#welcome:first-letter{
font-size:40px;
text-transform:uppercase;
}

#des{
position:absolute;
width:380px;
height:80px;
top:100px;
left:210px;
padding:5px;
z-index:9999;
color:{color:Text};
text-align:center;
}

#propic img{
left:2px;
top:0px;
float:left;
width:64px;
border:4px solid {color:Icon Border};
}

#stats{
position:absolute;
width:285px;
top:110px;
left:600px;
padding:10px;
font-family:'silkscreen';
text-transform:uppercase;
text-align:center;
line-height:3px;
color:{color:Stats};
}

#featured{
position:absolute;
width:180px;
height:160px;
top:6px;
left:925px;
padding:10px;
border:2px solid {color:Featured Border};
}

#Header{
font-family:'Elegant';
font-size:25px;
color:{color:Header};
line-height:26px;
border-bottom:1px solid {color:Topbar Border};
text-align:center;
text-transform:uppercase;
}

#faves img {
width:40px;
height:40px;
border:3px solid {color:Faves Border};
margin:5px;
box-shadow:1px 1px 2px #222;
-webkit-transition-duration:.7s;
}

#faves img:hover {
-webkit-transition: 0.5s ease-in;
border-radius:32px;
}


#navigation{
width:330px;
height:auto;
left:600px;
top:150px;
position:absolute;
}

div.navigate a{
background:{color:Navigation Bg};
border:2px solid {color:Navigation Border};
height:25px;
width:25px;
padding:3px;
float:left;
margin-right:20px;
margin-bottom:5px;
font-size:20px;
text-transform:uppercase;
text-align:center;
line-height:25px;
font-family:'calibri';
font-size:20px;
color:{color:Navigation Text};
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}

div#qTip {
padding:6px;
display:none;
text-align: center;
position: absolute;
font-size:11px;
line-height:10px;
font-style:italic;
font-family: calibri;
text-transform:none;
z-index:1000;
z-index: 9999999;
color:{color:Text};
background:{color:Links Hover Title Bg};
border-left:8px solid {color:Links Hover Title Border};
border-right:8px solid {color:Links Hover Title Border};
border-top:1px solid {color:Links Hover Title Border};
border-bottom:1px solid {color:Links Hover Title Border};
letter-spacing:1px;
}


{CustomCSS}
</style>

<title>{title}</title>
<link rel="shortcut icon" href="{favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />

<body>
<div id="container">
<div class="left">
<div id="topbar">
<div id="sidebar"><img src="{image:Sidebar}"></div>
<div id="blogtitle">{title}</div>
<div id="des">
<div id="propic"><a href="/"><img src="{PortraitURL-64}"></a></div>
{description}
</div>

<div id="stats">{text:Stats 1}&nbsp;&hearts;&nbsp;{text:Stats 2}</div>

<div id="navigation">
<div class="navigate">
<a href="/"title="Refresh">01</a>
<a href="/ask"title="Message">02</a>
<a href="{text:Link 1 URL}"title="{text:Link 1}">03</a>
<a href="{text:Link 2 URL}"title="{text:Link 2}">04</a>
<a href="{text:Link 3 URL}"title="{text:Link 3}">05</a>
<a href="http://beautifully-flawless.tumblr.com/"title="Credit">06</a>
</div>
</div>

<div id="welcome">{text:Welcome}</div>

<div id="featured">
<div id="Header">{text:Header 1}</div>
<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>

<div id="Header">{text:Header 2}</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="40px" height="40px" />{/block:Followed}{/block:Following}</marquee>
</div>
</div>

</div>


<div id="posts">
{block:Posts}
<div class="entry">

{block:Text}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}
<span class="entrytext">{Body}</span>
{block:IndexPage}
<div id="infoo">
Posted on {timeago} . <a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:IndexPage}
{/block:Text}

{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}
{Description}
{/block:Description}
{block:IndexPage}
<div id="infoo">
Posted on {timeago} . <a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:IndexPage}
{block:Link}

{block:Photo}
{block:IndexPage}
<div id="info">
&nbsp;<a href="{permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank"> reblog</a> / {timeago}
</div>
{/block:IndexPage}
{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}
<div id="info">
&nbsp;<a href="{permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank"> reblog</a> / {timeago}
</div>
{/block:IndexPage}
{block:IndexPage}
<center>
{Photoset-400}
</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:IndexPage}
<div id="infoo">
Posted on {timeago} . <a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:IndexPage}
{/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:IndexPage}
<div id="infoo">
Posted on {timeago} . <a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:IndexPage}
{/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">{AudioPlayerGrey}</div>
</div>
</div>
{block:IndexPage}
<div id="infoo">
Posted on {timeago} . <a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:IndexPage}
{/block:Audio}

{block:Video}
{block:IndexPage}
<center>
{Video-400}
</center>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}
</center>
{/block:PermalinkPage}
{block:IndexPage}
<div id="infoo">
Posted on {timeago} . <a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/block:IndexPage}
{block:Video}

{block:Answer}
<div id="askbox">
<img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:6px; box-shadow: 1px 1px 1px #000; padding:3px; background:#333;"/>
<asker>{Asker}:</asker>
<div id="ask">{Question}</div>
</div>
{Answer}
{block:IndexPage}
<div id="infoo">
Posted on {timeago} . <a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{/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>
</div>
</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>
</body>
</html>