Theme 62: Mona

<!-- THEME 61: MONA -->
<!-- BY BEAUTIFULLY FLAWLESS -->
<!-- COMES WITH <ACCENT> -->
<!-- PLEASE FOR THE LOVE OF GOD, DON'T REMOVE THE CREDIT LINK -->

<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" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />


<!--Variables-->
<meta name="color:Srollbar" content="#ddd" />
<meta name="color:Background" content="#fff" />
<meta name="color:Text" content="#000" />
<meta name="color:Links" content="#2E2E2E" />
<meta name="color:Links Hover Shadow" content="#A4A4A4" />
<meta name="color:Posts BG" content="#fff" />
<meta name="color:Permalink BG" content="#fff" />
<meta name="color:Permalink Text" content="#888" />
<meta name="color:Permalink Border" content="#aaa" />
<meta name="color:Posts Header" content="#aaa" />
<meta name="color:Asker" content="#888" />
<meta name="color:Asker Text" content="#999" />
<meta name="color:AskBox Border" content="#ddd" />
<meta name="color:ToTop BG" content="#eee" />
<meta name="color:TopBar BG" content="#fff" />
<meta name="color:Blogtitle" content="#aaa" />
<meta name="color:Quote" content="#ffa6c9" />
<meta name="color:SidebarPic BG" content="#fff" />
<meta name="color:Description BG" content="#fff" />
<meta name="color:Description Text" content="#000" />
<meta name="color:Updates BG" content="#fff" />
<meta name="color:Updates Border" content="#aaa" />
<meta name="color:Updates Header" content="#121212" />
<meta name="color:Updates Header Border" content="#8b8b8b" />
<meta name="color:Navigation Bar BG" content="#fff" />
<meta name="color:Navigation Bar Border" content="#ccc" />
<meta name="color:Navigation BG" content="#fff" />
<meta name="color:Navigation" content="#666" />
<meta name="color:Navigation Border" content="#ddd" />
<meta name="color:Asker Portrait BG" content="#fff" />

<meta name="image:Sidebar" content="http://static.tumblr.com/e6a3b60092ae65ab591841a3485a9b66/gdh5wux/SMjmqimel/tumblr_static_hqdiesel2_109.jpg" />
<meta name="image:MiniFavicon" content="http://media.tumblr.com/f3530366d9da6cc20f19ee5080ea833b/tumblr_inline_mq0hpxPwJy1rqir0v.gif" />

<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" />
<meta name="text:Stats 1" content="INSERT STAT HERE" />
<meta name="text:Stats 2" content="INSERT STAT HERE" />
<meta name="text:Updates Header" content="This Is Header" />
<meta name="text:Quote" content="A girl should be two things: classy and fabulous" />

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

::-webkit-scrollbar {width: 9px; height: 4px;}
::-webkit-scrollbar-thumb { background-color:{color:Srollbar};-webkit-box-shadow: inset 0 0 6px #000;-webkit-border-radius: 10px;
border-radius: 10px;
}

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


@font-face { font-family: "ronda"; src: url('http://static.tumblr.com/oct6d4x/Wvalo56tg/pf_ronda_seven.ttf'); }

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

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }

@font-face { font-family: "allura"; src: url('http://static.tumblr.com/gdh5wux/7hFmeryj6/allura-regular.ttf'); }

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

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

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

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

@font-face {font-family: "cicle";src: url('http://static.tumblr.com/exioynw/Grtmbhsn3/cicle_fina.ttf');}

body {
margin: 0px;
background-color:{color:Background};
background-image:url('http://static.tumblr.com/mw3v5cd/pTalvaxis/43.png');
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
}

body, div, p, textarea, submit, input {
font-family:"ronda";
font-size:8px;
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:0px 0px 20px {color:Links Hover Shadow};
}

div#posts {
float:left;
width:1000px;
margin-left:340px;
margin-top:160px;
z-index:10;
}

.entry {
float:left;
margin:5px;
padding:5px;
overflow:hidden;
background-color:{color:Posts BG};
box-shadow:1px 1px 2px #888;
{block:IndexPage}
width:300px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
-webkit-transition: opacity 0.9s ease-in;
-webkit-transition: all 0.9s ease-n;
-moz-transition: all 0.9s ease-in;
transition: all 0.9s ease-in;
}

.entry:hover #permalink{
opacity:1.0;
-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-color:{color:Permalink BG};
width:300px;
height:20px;
top:0px;
left:0px;
padding:5px;
opacity:0.0;
font-family:silkscreen;
font-size:8px;
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;
}

#info{
font-family:'silkscreen';
color:{color:Permalink Text};
font-size:8px;
text-align:right;
line-height:15px;
margin-top:1px;
border-top:1px dotted {color:Permalink Border};
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:'allura';
text-transform:none;
font-size:30px;
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:{color:Posts Header};
}

asker{
font-family:'oregano';
font-size:10px;
text-transform:uppercase;
color:{color:Asker};
}

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

#askbox{
border:3px solid {color:AskBox Border};
margin-top:0px;
margin-left:5px;
background-image:url('http://media.tumblr.com/5f45584ec3611772ab1746d87a8c47f0/tumblr_inline_mq0hqc6sJL1rqir0v.gif');
padding:4px;
box-shadow: 1px 1px 1px #000;
}

blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 10px;
border-left: 7px solid #999999;
}

#ToTop{width:50px; height:50px; text-align:center; background-color:{color:ToTop BG}; line-height:50px; border-radius:60px; bottom:5px; right:5px; position:fixed; opacity:1; font-family:'Bebas Neue'; font-size:20px; color:#fff;}

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

#bar{
position:fixed;
top:-8px;
padding:5px;
width:100%;
left:0px;
height:120px;
background:{color:TopBar BG};
z-index:999;
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

#blogtitle{
position:absolute;
font-family:'lainie';
font-size:60px;
color:{color:Blogtitle};
text-shadow: -1px -1px 1px #fff, 1px 1px 3px #000;
line-height:80px;
text-align:left;
}

#quote{
position:absolute;
font-family:'cicle';
font-size:30px;
color:{color:Quote} !important;
line-height:180px;
text-align:left;
text-indent:60px;
text-shadow:0px 2px 2px #aaa;
z-index:99999;
}

#sidepic{
position:fixed;
width:300px;
height:220px;
top:180px;
left:10px;
padding:6px;
background:{color:SidebarPic BG};
box-shadow: 0px 2px 4px #888, 0px -2px 4px #888;
}

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

#des{
position:fixed;
width:300px;
max-height:200px;
top:420px;
left:10px;
padding:6px;
background:{color:Description BG};
color:{color:Description Text};
font-family:'tinytots';
font-size:8px;
text-align:center;
text-transform:uppercase;
box-shadow: 0px 2px 4px #888;
}

#updates{
position:fixed !important;
top:20px;
right:0px;
height:90px;
width:90px;
overflow:hidden;
text-align:center;
font-family:'consolas';
font-size:10px;
border-radius:60px;
-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;
z-index:99999999;
}

#updates:hover{
background:{color:Updates BG};
border:2px solid {color:Updates Border};
width:300px;
height:500px;
border-radius:20px;
}

.header{
font-family:'Elegant';
text-transform:uppercase;
background-image:url('http://static.tumblr.com/gdh5wux/KGam7hlix/tumblr_m15d51wuud1qe92a9.jpg');
padding-top:0px;
color:{color:Updates Header};
text-shadow:0px 1px 2px #000;
font-size:30px;
border:1px dotted {color:Updates Header Border};
margin-top:3px;
line-height:30px;
z-index:99;
}

#navigation{
position:fixed;
width:100%;
height:20px;
border:4px solid {color:Navigation Bar Border};
top:110px;
left:0%;
z-index:999;
padding:10px;
background:{color:Navigation Bar BG};
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

.navigate a{
text-align:center;
font-family:'Century Gothic';
text-transform:uppercase;
font-size:16px;
letter-spacing:0px;
line-height:15px;
color:{color:Navigation};
padding:5px;
float:center;
width: 120px;
height:15px;
margin-top:-4px;
margin-left:20px;
margin-right:10px;
background:{color:Navigation BG};
border-top:1px solid {color:Navigation Border};
border-bottom:1px solid {color:Navigation Border};
border-left:12px solid {color:Navigation Border};
border-right:12px solid {color:Navigation Border};
display:inline-block;
transition-property:width,height;
-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;
}


.navigate a:hover{
color: #888;
border-radius:30px;
border:1px solid #ddd;
transition-property:width,height;
-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;
}


{CustomCSS}
</style>
<body>
<div id="bar">
<div id="blogtitle">{title}</div>
<div id="quote">{text:Quote}</div>
</div>

<div id="navigation">
<div class="navigate">
<a href="/">Home</a>
<a href="/ask">Ask</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>
</div>
</div>

<div id="sidepic"><img src="{image:Sidebar}"></div>

<div id="des">
{Description}
<br>
{text:Stats 1} / {text:Stats 2}
</div>

<div id="updates">
<img style="position:relative;right:0px;" src="{image:MiniFavicon}">
<div class="header">{text:Updates Header}</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
</div>

<div id="ToTop"><a href="/#top">TOP</a></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>
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</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}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</div>
{block:Link}

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

{block:Audio}
<center>
<div style="width:350px;height:30px;">
<div style="float:left">{AudioPlayerWhite}</div>
<div style="margin-top:10px; float:right;">
{block:ExternalAudio}
{/block:ExternalAudio}
</div></div>
</center>
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</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>&nbsp;
</div>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}
</center>
{/block:PermalinkPage}
{block:Video}

{block:Answer}
<img src="{AskerPortraitURL-40}" width="40" align="left" style="margin-right:6px; box-shadow: 1px 1px 1px #000; padding:3px; background:{color:Asker Portrait BG" };"/>
<div id="askbox">
<asker>{Asker}:</asker>
<div id="ask">{Question}</div>
</div>
{Answer}
<div id="info">
<a href="{Permalink}"><a href="{permalink}">{NoteCountWithLabel}</a> . <a href="{ReblogURL}" target="_blank"> reblog</a>&nbsp;
</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>



{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>