Fandom Theme 03

<!--
THEME MADE SPECIFICALLY FOR ANASTASIA AND HER ORIGINALS BLOG
DO NOT STEAL~!
-->

<html>
<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/7fjp0ap/8qemg20tu/jquery.style-my-tooltips.js"></script>


<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:50,
tip_fade_speed:100,
attribute:"title"
});
});
})(jQuery);
</script>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

<meta name="color:Selection" content="#fae2d7" />
<meta name="color:Text" content="#b1b1b1" />
<meta name="color:Background" content="#fff" />
<meta name="color:Link" content="#d6aeae" />
<meta name="color:Link Hover" content="#afa8a8" />
<meta name="color:Link Hover Shadow" content="#dddddd" />
<meta name="color:Bold" content="#a7a6a5" />
<meta name="color:Blockquote Border" content="#a7a6a5" />
<meta name="color:Posts Header" content="#ddd" />
<meta name="color:Posts BG" content="#fdfdfd" />
<meta name="color:Info Border" content="#e7e6e6" />
<meta name="color:Quotation" content="#ccc" />
<meta name="color:Asker Text" content="#222" />
<meta name="color:Question Text" content="#929292" />
<meta name="color:AskBox Border" content="#dddddd" />
<meta name="color:AskBox Shadow" content="#eeeeee" />
<meta name="color:Chat Text" content="#d6aeae" />
<meta name="color:ScrollBar BG" content="#ffffff" />
<meta name="color:Scrollbar" content="#dfa6a6" />
<meta name="color:Bar 1" content="#FFEAEA" />
<meta name="color:Bar 2" content="#FFE1E1" />
<meta name="color:Bar 3" content="#FFD7D7" />
<meta name="color:Sidebar Img Border" content="#ddd" />
<meta name="color:Sidebar Img BG" content="#fff" />
<meta name="color:Description Border" content="#ddd" />
<meta name="color:Navigation Box BG" content="#ddd" />
<meta name="color:Custom Links BG" content="#FFEAEA" />
<meta name="color:Custom Links BG Hover" content="#ddd" />
<meta name="color:Custom Links Text Shadow Hover" content="#F99999" />
<meta name="color:Custom Links Text Hover" content="#F99999" />
<meta name="color:Pagination" content="#5e595b" />
<meta name="color:Blogtitle Text" content="#FFC4C4" />
<meta name="color:Blogtitle Text Shadow 1" content="#111111" />
<meta name="color:Blogtitle Text Shadow 2" content="#FFC4C4" />
<meta name="color:Main Navigation Hover Text" content="#ee9999" />
<meta name="color:Main Navigation Hover Text Border" content="#ffdddd" />

<meta name="image:Sidebar" content="http://static.tumblr.com/1b80962cc29badfbe2b654651b543642/1r3oeht/CuSmobfno/tumblr_static_the-originals.gif" />
<meta name="image:Background" content="http://25.media.tumblr.com/tumblr_ltqq73Kh5g1qhvdofo2_250.png" />

<meta name="text:Custom Link 1 URL" content="" />
<meta name="text:Custom Link 2 URL" content="" />
<meta name="text:Custom Link 3 URL" content="" />
<meta name="text:Custom Link 4 URL" content="" />

<meta name="text:Custom Link 1" content="Example URL 1" />
<meta name="text:Custom Link 2" content="Example URL 2" />
<meta name="text:Custom Link 3" content="Example URL 3" />
<meta name="text:Custom Link 4" content="Example URL 4" />


<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Antic|Carrois Gothic SC|Bilbo Swash Caps|Tulpen+One|Fjalla+One|Dawning+of+a+New+Day|Metrophobic|Berkshire+Swash' rel='stylesheet' type='text/css'>

<style type="text/css">
::selection {
background:{color:Selection};
}
::-moz-selection {
background:{color:Selection};
}
::-webkit-selection {
background:{color:Selection};
}

/* ~ BASICS ~ */

body {
font-family:'calibri';
font-size: 11px;
line-height: 100%;
text-align: justify;
color:{color:Text};
background-color:{color:Background};
background-image: url('{image:Background}'); /* ~ BACKGROUND IMAGE ~ */
background-attachment: fixed;
background-position: left top;
background-repeat: repeat;
}

a:link, a:visited, a:active {
text-decoration: none;
color:{color:Link};
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

a:hover {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
text-shadow: 0px 1px 5px {color:Link Hover Shadow};
color:{color:Link Hover};
}

l {
padding: 1px 7px 2px 3px;
text-decoration: none;
font-size: 12px;
font-family:'calibri';
color:#d6aeae;
border: 1px solid #fcf2f0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
border-bottom: 0px solid transparent;
}

b, strong {
color:{color:Bold};
}

blockquote {
margin-left: 0px;
padding-left:4px;
border-left: 4px double {color:Blockquote Border};
}

#title {
padding-bottom: 4px;
font-size: 14px;
text-align: center;
}

#link {
margin-top: 5px;
padding-bottom: 4px;
font-size: 16px;
text-align: center;
}

h1 {
font-family:'Fjalla One';
font-size:30px;
line-height:25px;
letter-spacing:0px;
text-transform:uppercase;
font-weight: normal;
text-align:center;
margin-top:0px;
margin-bottom:-5px;
color:{color:Posts Header};
}

/* ~ POSTS ~ */

#entries {
font-family:'calibri';
margin-left: 500px;
margin-top: 0px;
margin-bottom: 20px;
width: 520px;
}

#posts {
overflow: hidden;
font-family: 'calibri';
box-shadow: 0px 1px 5px rgba(0,0,0,0.13);
margin-bottom: 10px;
padding: 10px 10px 0px 10px;
background:{color:Posts BG};
}

/* ~ POST INFO ~ */

#info {
font-size:10px;
text-align:center;
padding:3px;
font-family:'Antic';
opacity:1;
padding-bottom: 5px;
border-top: 2px solid {color:Info Border};
margin-top:3px;
text-transform:uppercase;
}

/* ~ QUOTE & SOURCE ~ */

#speechmark{
margin-top:10px;
position:absolute;
font-family:georgia;
font-size:60px;
font-weight:bold;
color:{color:Quotation};
}

#speechmarkk{
margin-top:-3px;
margin-left:460px;
position:absolute;
font-size:60px;
font-family:georgia;
font-weight:bold;
color:{color:Quotation};
}

#quote {
font-family:'Berkshire Swash';
font-size: 16px;
}

#source {
font-size:11px;
margin-top:10px;
text-align:left;
}

/* ~ AUDIO ~ */

#audio {
padding: 0px;
}

.qu {
opacity: 0.7;
font-family:'georgia';
font-size: 25px;
font-weight: bold;
line-height: 33px;
}

.ote {
opacity: 0.9;
margin-top: -34px;
text-indent: 15px;
}

.audio {
background-color :white;
display: block;
}

/* ~ QUESTION ~ */

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

#ask{
padding:6px;
font-family:'Antic';
font-size:12px;
text-transform:none;
color:{color:Question Text};
}

#askbox{
background-image:url('http://24.media.tumblr.com/tumblr_luvtrlZDsC1qiav1uo1_250.png');
border: 3px double {color:AskBox Border};
border-radius:5px;
margin: 0px;
margin-top: -5px;
overflow:auto;
padding: 5px;
box-shadow: 0px 0px 5px 3px {color:AskBox Shadow};
}

/* ~ CHAT ~ */

.user_1 .label {color:{color:Chat Text}; font-weight:bold;}
.user_2 .label {color:{color:Chat Text}; font-weight:bold;}
.user_3 .label {color:{color:Chat Text}; font-weight:bold;}
.user_4 .label {color:{color:Chat Text}; font-weight:bold;}

ul.chat, .chat ol, .chat li {
padding:0px;
list-style:none;
}

/* ~ SCROLLBAR ~ */

::-webkit-scrollbar-thumb:vertical {
height:10px;
background-color:{color:Scrollbar};
}
::-webkit-scrollbar-thumb:horizontal {
height:10px;
background-color:{color:Scrollbar};
}

::-webkit-scrollbar {
height: 10px;
width: 5px;
background-color: {color:ScrollBar BG};
}


/* ~ PERMALINK NOTES PAGE ~ */

#postnotes {
margin:0px 0px 0px 0px;
width:510px;
padding:5px;
font-family:'calibri headings';
font-size: 12px;
background-color: none;
}

#postnotes a {
margin-top:1px;
}

ol.notes li.note {
padding:1px;
border-bottom: solid 0px;
}

ol.notes li.note img.avatar {
vertical-align:-4px;
margin-right:0px;
width:16px;
height:16px;
}

/* ~ LIKE BUTTON ~ */

.my-like {
background-image: url('http://media.tumblr.com/tumblr_mdchhfS8rc1qj1ywv.png') !important;
height:8px;
width:10px;
cursor:pointer;
display:inline-block;
vertical-align:top;
margin-top:1px;}
.my-liked, .my-like:hover{
margin-top:1px;
background-image: url(http://media.tumblr.com/tumblr_mdmgj7MUPn1qj1ywv.png ) !important;
height:8px;
width:10px;
cursor:pointer;
display:inline-block;
vertical-align:top;
}

/* ~ SIDEBAR & OTHERS ~ */

/* ~ THREE BARS TO THE TOP (PINK) ~ */
#bar1{
position:fixed;
width:160px;
height:10px;
background:{color:Bar 1}; /* ~ COLOR OF BAR ~ */
margin-left:-10px;
margin-top:10px;
z-index:999;
border-radius:0px 10px 10px 0px;
}

#bar2{
position:fixed;
width:220px;
height:10px;
background:{color:Bar 2}; /* ~ COLOR OF BAR ~ */
margin-left:-10px;
margin-top:30px;
z-index:999;
border-radius:0px 10px 10px 0px;
}

#bar3{
position:fixed;
width:190px;
height:10px;
background:{color:Bar 3}; /* ~ COLOR OF BAR ~ */
margin-left:-10px;
margin-top:50px;
z-index:999;
border-radius:0px 10px 10px 0px;
}

/* ~ SIDEBAR IMAGE BOX ~ */
#sideimg{
position:fixed;
width:200px;
height:160px;
border:4px solid {color:Sidebar Img Border};
margin-left:120px;
margin-top:90px;
background:{color:Sidebar Img BG};
z-index:9999;
}

/* ~ SIDEBAR IMAGE ~ */
#sideimg img{
position:fixed;
width:200px;
height:160px;
margin-left:0px;
margin-top:0px;
background:{color:Sidebar Img BG};
z-index:9999;
-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 IMAGE HOVER: FADE ~ */
#sideimg img:hover{
opacity:0.7;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}


/* ~ DESCRIPTION BOX ~ */
#des{
position:fixed;
width:200px;
height:auto;
padding:3px;
border-bottom:3px double {color:Description Border}; /* ~ DOUBLE BORDER BELOW DESCRIPTION ~ */
margin-left:118px;
margin-top:260px;
z-index:9999;
color:#000;
text-align:center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}


/* ~ MAIN NAVIGATION, TO THE LEFT (THE ONE WITH THE NUMBERS) ~ */
#navibox{
position:fixed;
width:20px;
height:168px;
background:{color:Navigation Box BG};
margin-left:100px;
margin-top:90px;
z-index:999;
}

/* ~ MAIN NAVIGATION LINKS ~ */
#navibox a{
display: block;
float:left;
font-family:Fjalla One;
font-size:12px;
width:20px;
margin-top:15px;
line-height:20px;
overflow:hidden;
height:20px;
text-align:center;
text-transform: uppercase;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}


/* ~ CUSTOM NAVIGATIN LINKS BOX ~ */
#navigation{
position:fixed;
width:20px;
height:168px;
margin-left:320px;
margin-top:90px;
z-index:999;
}

/* ~ CUSTOM NAVIGATION LINKS ~ */
div .navigate a{
display: block;
float:left;
font-family:Fjalla One;
font-size:12px;
width:120px;
margin-top:15px;
margin-left:8px;
line-height:22px;
overflow:hidden;
height:20px;
text-align:center;
background:{color:Custom Links BG Hover}; /* ~ BACKGROUND COLOR: GREY ~ */
text-transform: uppercase;
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .3);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

div .navigate a:hover{
width:70px;
font-size:10px;
background:{color:Custom Links BG};
color:{color:Custom Links Text Hover} !important;
text-shadow:0px 0px 3px {color:Custom Links Text Shadow Hover};
-webkit-box-shadow: 0px 0px 5px 1px rgba(230, 0, 0, .3);
box-shadow: 0px 0px 5px 1px rgba(230, 0, 0, .3);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

/* ~ PAGINATION OR ARROW THAT GOES TO THE NEXT PAGE ~ */
#pagination{
position:fixed;
width:30px;
height:30px;
border:4px solid trans;
margin-left:350px;
margin-top:230px;
}

#pagi{
margin-left:0px;
width:80px;
text-align:center;
margin-top:0px;
}

#pagi a{
width:70px;
padding:5px;
text-align:center;
font-size:30px;
font-family:calibri;
color:{color:Pagination};
}

/* ~ BLOG TITLE ~ */
#blogtitle{
position:fixed;
font-family:'Bilbo Swash Caps';
color:{color:Blogtitle Text}; /* ~ COLOR OF TEXT ~ */
font-size:35px; /* ~ SIZE OF TEXT ~ */
margin-top:60px; /* ~ TO MOVE TEXT DOWN OR UP ~ */
margin-left:220px; /* ~ TO MOVE TEXT TO THE RIGHT OR LEFT ~ */
text-transform:none;
text-shadow: 2px -1px 1px {color:Blogtitle Text Shadow 1},2px 2px 1px {color:Blogtitle Text Shadow 2}; /* ~ TEXT SHADOW ~ */
}

#s-m-t-tooltip{
padding:3px;
display:none;
text-align:center;
position: absolute;
font-size:8px;
line-height:10px;
font-family:Metrophobic;
z-index:9999999;
color:{color:Main Navigation Hover Text};
background:#fff;
border:4px double {color:Main Navigation Hover Text Border};
letter-spacing:1px;
text-transform:uppercase;
margin:14px 14px 7px -54px;
}




</style>

<script> window.onload = function () { document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' ); document.addEventListener( 'click', function ( event ) { var myLike = event.target; if( myLike.className.indexOf( 'my-like' ) > -1 ) { var frame = document.getElementById( 'my-like-frame' ), liked = ( myLike.className == 'my-liked' ), command = liked ? 'unlike' : 'like', reblog = myLike.getAttribute( 'data-reblog' ), id = myLike.getAttribute( 'data-id' ), oauth = reblog.slice( -8 ); frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id; liked ? myLike.className = 'my-like' : myLike.className = 'my-liked'; }; }, false );
};</script>

</head>
<body>

<!-- BARS -->
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>

<!-- PAGINATION -->
<div id="pagination">
<center>
<div id="pagi">{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">« </a>{/block:PreviousPage}<br/>{block:NextPage}<a href="{NextPage}"> »</a>{/block:NextPage}{/block:Pagination}
</div>
</center>
</div>

<!-- SIDEBAR IMAGE -->
<div id="sideimg">
<img src="{image:Sidebar}">
</div>

<!-- BLOG TITLE -->
<div id="blogtitle">{title}</div>

<!-- DESCRIPTION BOX -->
<div id="des">{description}</div>

<!-- MAIN NAVIGATION (DO NOT CHANGE UNLESS YOU KNOW WHAT YOU ARE DOING) -->
<div id="navibox">
<a href="/" title="Home">01</a>
<a href="/ask" title="Inbox">02</a>
<a href="/submit" title="Submit">03</a>
<a href="http://klaroline-fantasies.tumblr.com/"title="Credit">04</a>
</div>

<!-- THIS IS WHERE YOU ADD OTHER LINKS TO YOUR BLOG -->
<div id="navigation">
<div class="navigate">
<a href="{text:Custom Link 1 URL}">{text:Custom Link 1}</a>
<a href="{text:Custom Link 2 URL}">{text:Custom Link 2}</a>
<a href="{text:Custom Link 3 URL}">{text:Custom Link 3}</a>
<a href="{text:Custom Link 4 URL}">{text:Custom Link 4}</a>
</div>
</div>


<!-- POSTS (DO NOT MESS WITH THIS CODING UNLESS YOU KNOW WHAT YOU ARE DOING) -->
<div id="entries">
{block:Posts}
<div id="posts">

<div id="title">
{block:Title}
<h1>{Title}&nbsp;</h1>
{/block:Title}
</div>
{block:Text}
{Body}
{/block:Text}

{block:Quote}
<div id="quote">

<center>
<div id="speechmark">“</div>{Quote}<div id="speechmarkk">”</div>
</center>
</div>
{block:Source}
<div id="source">
{Source}
</div>
{/block:Source}
{/block:Quote}

{block:Link}
<a href="{URL}" class="link" {Target}><h1>{Name}&nbsp;</h1></a>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Photo}
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{LinkCloseTag}<br>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}

{block:Chat}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
&nbsp;{Line}</li>
{/block:Lines}</ul>
{/block:Chat}

{block:Video}
{Video-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}

{block:Answer}
<div id="askbox">
<img src="{AskerPortraitURL-30}" width="40" align="left" style="margin-right:6px; box-shadow: 0px 0px 0px 2px #E6DFDF; border-radius: 3px;"/>
<asker>{Asker}:</asker>
<div id="ask">"{Question}"</div>
</div>
{Answer}
{/block:Answer}

{block:Audio}
<div id="audio">
{block:AlbumArt}
<img src="{AlbumArtURL}" width="55px" height="55px" align="left" style="margin-right:10px" />
{/block:AlbumArt}
{block:TrackName}
Song: <b>{TrackName}</b><br>
{/block:TrackName}
{block:Artist}
Artist: <b>{Artist}</b><br><br>
{/block:Artist}<br>
{AudioPlayerBlack}<br>
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio}


<div id="info">
<a href="{Permalink}">{NoteCount} Notes</a> / <a href="{ReblogURL}" target="_blank" class="details">Reblog</a> / <div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like"></div>
{block:ContentSource}
<a href="{SourceURL}" title="source"> </a>
{block:ContentSource}
{block:RebloggedFrom}
<a href="{ReblogParentURL}"> </a>
<a href="{ReblogRootURL}"> </a>
{/block:RebloggedFrom}
<br>
{block:HasTags}
{block:Tags}# <a href="{TagURL}">{Tag}</a> {/block:Tags}
{/block:HasTags}
</div>
</div>
<br>
{/block:Posts}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Posts}
</div>
</div>
</div>
</body>
</html>