Theme 49: Serene

<!----
THEME 49: Serene
By:Beautifully Flawless
PLEASE KEEP ALL CREDITS! THANK YOU!
PLEASE KEEP ALL CREDITS! THANK YOU!
PLEASE KEEP ALL CREDITS! THANK YOU!
ENJOY:D
----->

<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" href="{RSS}">
{block:Description}<meta name="description"content="{MetaDescription}"/>{/block:Description}

<!--Variables-->

<meta name="color:text" content="#000" />
<meta name="color:Background" content="#fff" />
<meta name="color:Link" content="#888" />
<meta name="color:Link Hover" content="#bbb" />
<meta name="color:Posts Border" content="#ddd" />
<meta name="color:Posts BG" content="#fff" />
<meta name="color:Title" content="#bbb" />
<meta name="color:Title Shadow" content="#bbb" />
<meta name="color:Source Quote" content="#888" />
<meta name="color:Ask Portrait Border" content="#aaa" />
<meta name="color:Asker BG" content="#fff" />
<meta name="color:Asker Border" content="#ddd" />
<meta name="color:Accent" content="#888" />
<meta name="color:Accent Shadow" content="#888" />
<meta name="color:Sidebar BG" content="#fff" />
<meta name="color:Sidebar Border" content="#ddd" />
<meta name="color:Sidebar Image Border" content="#ddd" />
<meta name="color:Description BG" content="#fff" />
<meta name="color:Description Border" content="#ddd" />
<meta name="color:Stats Border" content="#ddd" />
<meta name="color:Navigation Border" content="#ddd" />
<meta name="color:Blogroll BG" content="#fff" />
<meta name="color:Blogroll Border" content="#ddd" />
<meta name="color:Scrollbar BG" content="#fff" />

<meta name="image:Background" content="" />
<meta name="image:Sidebar" content="http://static.tumblr.com/gdh5wux/lOkmjxa45/hqdiesel_28229_1260.jpg" />


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

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

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

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

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

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

@font-face { font-family: "Espacio"; src: url('http://static.tumblr.com/gdh5wux/cPLmoz1ma/espacio.ttf'); }

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

@font-face { font-family: "Sail"; src: url('http://static.tumblr.com/aorjzw7/b3Jmrt9nk/sail-regular.otf'); }

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:"ronda";
font-size:8px;
line-height:12px;
color:{color:Text};
text-transform:none;
}

a:link, a:active, a:visited{
color:#bbb;
text-decoration: none;
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
}

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

div#posts {
float:left;
width:980px;
z-index:99;
margin-left:340px;
}

.entry {
float:left;
margin:3px;
overflow:hidden;
background-color:{color:Posts Bg};
border:2px solid {color:Posts Border};
{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:'Espacio';
text-transform:none;
font-size:30px;
line-height:30px;
color:{color:Title};
text-shadow:0px 0px 10px {color:Title Shadow};
text-align:center;
}

.quote{
font-family:'oregano';
font-size:15px;
text-transform:none;
line-height:25px;
text-align:right;
color:{color:Source Quote};
}

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

#askerimg img{
border:1px solid {color:Ask Portrait Border};
width:30px;
height:30px;
float:left;
margin:3px;
}

#asker{
background-color:#fff;
border-bottom:1px dotted #ccc;
margin:4px;
overflow:auto;
padding:4px;
}

asker{
font-family:'pacifico';
font-size:15px;
text-transform:none;
color:#888;
line-height:20px;
}

accent{
color:{color:Accent};
text-shadow:0px 0px 1px {color:Accent Shadow};
}

#line{
position:fixed;
width:260px;
height:100%;
left:50px;
top:0px;
padding:6px;
background:{color:Sidebar BG};
border:4px double {color:Sidebar Border};
}

#sidebar{
position:absolute;
width:200px;
height:200px;
left:23px;
top:40px;
padding:8px;
border:4px double{color:Sidebar Image Border};
}

#sidebar img{
width:100%;
height:100%;
opacity:.6;
}

#sidebar:hover #des{
opacity:.9;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

#des{
position:fixed;
background:{color:Description BG};
border:4px double {color:Description Border};
width:200px;
height:200px;
margin-left:-3px;
margin-top:-204px;
z-index:9;
opacity:0;
font-family:tinytots;
text-transform:uppercase;
transition: all 0.9s ease-out;
-o-transition-transition: all 0.9s ease;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
}

#stats{
position:absolute;
width:200px;
height:0px;
border:4px double {color:Stats Border};
left:23px;
top:10px;
padding:8px;
line-height:0px;
font-family:tinytots;
text-transform:uppercase;
}

#nav{
position:absolute;
width:200px;
height:10px;
border:4px double {color:Navigation Border};
left:23px;
top:270px;
line-height:10px;
text-align:center;
padding:8px;
font-family:tinytots;
text-transform:uppercase;
}

#blogs{
position:absolute;
width:220px;
height:200px;
left:16px;
top:310px;
text-align:center;
padding:8px;
font-family:tinytots;
text-transform:uppercase;
}

#blogroll{
position:fixed;
width:60px;
height:100%;
left:1280px;
top:-2px;
background:{color:Blogroll BG};
border:4px double {color:Blogroll Border};
}

#blogtitle{
font-family:'italian';
font-size:50px;
color:#aaa;
position:fixed;
top:560px;
margin-left:-10px;
text-align:center;
text-transform:none;
text-shadow:0px 1px 1px #666;
}

#blogtitle:first-letter{
font-family:'chopin';
font-size:55px;
}

@font-face{ font-family:"chopin"; src:url('http://static.tumblr.com/gdh5wux/FYdm826v4/chops___.ttf'); }

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

{CustomCSS}
</style>
<body>


<div id="line">

<div id="stats">
&nbsp;&nbsp;&nbsp;
INSERT STAT HERE . &nbsp;&nbsp; INSERT STAT HERE .
</div>

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

<div id="nav">
<a href="/">Home</a> . <a href="/ask">Ask</a> . <a href="/submit">Submit</a> . <a href="/archive">Archive</a> . <a href="/links">Links</a> . <a href="http://beautifully-flawless.tumblr.com/">Credit</a>
</div>

<div id="blogs">
This is where you add your obsessions, any other information you want, feel free to add.
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>

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

</div>

<div id="blogroll">
<div id="faves">
<marquee behavior="scroll" height="645px;" scrollamount="4" direction="down" onmouseover="this.stop();" onmouseout="this.start();">{block:Following}{block:Followed}<a target='_blank' href='{FollowedURL}'><img border='0' src='{FollowedPortraitURL-96}' width="50px" height="50px" />{/block:Followed}{/block:Following}</marquee>
</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="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:Audio}

{block:Video}
{block:IndexPage}
<center>
{Video-250}
</center>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}
</center>
{/block:PermalinkPage}
{block:Video}

{block:Answer}
<div id="asker">
<div id="askerimg"><img src="{AskerPortraitURL-30}"align="left"></div>
<asker>{Asker}</asker>: {Question}&nbsp;
</div>
<div style="margin-top:-18px; margin-left:4px;">
<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>