Fandom Theme 05

<!--
Theme 05 by Klaroline Fantasies|Tumblr
-->

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

<!--Variables-->
<meta name="color:Selection" content="#ddd" />
<meta name="color:Scrollbar" content="#aaa" />
<meta name="color:Background" content="#fff" />
<meta name="color:Text" content="#000" />
<meta name="color:Link" content="#888" />
<meta name="color:Link Hover" content="#ddd" />
<meta name="color:Posts Bg" content="#fff" />
<meta name="color:Posts Border" content="#ddd" />
<meta name="color:Info Bg" content="#fff" />
<meta name="color:Info Border" content="#ddd" />
<meta name="color:Posts Title" content="#333" />
<meta name="color:Chat 1" content="#5D5D5D" />
<meta name="color:Chat 2" content="#7D7D7D" />
<meta name="color:Asker Text" content="#222" />
<meta name="color:Ask" content="#929292" />
<meta name="color:Ask Border" content="#ddd" />
<meta name="color:Navigation Hover Text" content="#333" />
<meta name="color:Navigation Hover Bg" content="#fff" />
<meta name="color:Navigation Hover Border" content="#ddd" />
<meta name="color:Side Bg" content="#fff" />
<meta name="color:Side Border" content="#ddd" />
<meta name="color:Blogtitle" content="#aaa" />
<meta name="color:Sidebar Image Bg" content="#ddd" />
<meta name="color:Sidebar Image Border" content="#ccc" />
<meta name="color:Description Border" content="#ddd" />
<meta name="color:Main Nav Bg" content="#eee" />
<meta name="color:Main Nav Border" content="#ddd" />
<meta name="color:Main Nav Text" content="#aaa" />
<meta name="color:Main Nav Hover Bg" content="#bbb" />
<meta name="color:Main Nav Hover Text" content="#444" />
<meta name="color:Nav Box Bg" content="#fff" />
<meta name="color:Nav Box Border" content="#ddd" />
<meta name="color:Nav Bg" content="#eee" />
<meta name="color:Nav Text" content="#bbb" />
<meta name="color:Nav Hover Bg" content="#bbb" />
<meta name="color:Nav Hover Text" content="#444" />

<meta name="image:Background" content="" />
<meta name="image:Side" content="http://static.tumblr.com/gdh5wux/Wp9mj7at4/tumblr_mb1ahole7h1qka7zl.png" />
<meta name="image:Sidebar" content="http://static.tumblr.com/b0c3fdf531523a44ddec7c97d0154be0/1r3oeht/tfbmtw2g0/tumblr_static_elijah-1__2_.gif"/>

<meta name="text:Custom Link URL 1" content="/" />
<meta name="text:Custom Link URL 2" content="/" />
<meta name="text:Custom Link URL 3" content="/" />
<meta name="text:Custom Link URL 4" content="/" />
<meta name="text:Custom Link URL 5" content="/" />
<meta name="text:Custom Link URL 6" content="/" />
<meta name="text:Custom Link URL 7" content="/" />
<meta name="text:Custom Link URL 8" content="/" />
<meta name="text:Custom Link 1" content="Custom Link 1" />
<meta name="text:Custom Link 2" content="Custom Link 2" />
<meta name="text:Custom Link 3" content="Custom Link 3" />
<meta name="text:Custom Link 4" content="Custom Link 4" />
<meta name="text:Custom Link 5" content="Custom Link 5" />
<meta name="text:Custom Link 6" content="Custom Link 6" />
<meta name="text:Custom Link 7" content="Custom Link 7" />
<meta name="text:Custom Link 8" content="Custom Link 8" />
<!--Variables-->



<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Antic|Carrois Gothic SC|Bilbo Swash Caps|Tulpen One|Fjalla One|Yanone Kaffeesatz|Metrophobic|Berkshire Swash|Felipa|Pathway Gothic One|Permanent Marker' rel='stylesheet' type='text/css'>

<style type="text/css">
#tumblr_controls{
position:fixed !important;
-webkit-filter: invert(100%);
}

::selection{background:{color:Selection};} ::-moz-selection{background:{color:Selection};} ::-webkit-selection{background:{color:Selection};}

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

/* ~ BASICS ~  */

body {
background-image: url('{image:Background}');
background-attachment:fixed;
background-position:left;
background-repeat:repeat;
background-color:{color:Background};
}


body, div, p, textarea, submit, input {
font-family:'calibri';
color:{color:Text};
font-size:11px;
line-height:100%;
text-align:justify;
 }

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 {
color:{color:Link Hover};
text-shadow: 0px 1px 2px #625E6E;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

#content{width:530px;float:left;margin-left:490px;}

.entry{
float:left;
padding:10px;
overflow:hidden;
margin-bottom:10px;
border:4px solid {color:Posts Border};
background-color:{color:Posts Bg};
box-shadow: 0px 1px 1px #555;
{block:IndexPage}
width:500px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
}

.entry:hover #info{
opacity:1;
margin-left:520px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#info{
position:absolute;
background:{color:Info Bg};
border:2px solid {color:Info Border};
box-shadow: 0px 1px 1px #888;
width:100px;
opacity:0;
padding:3px;
font-size:9px;
margin-left:400px;
text-align:center;
font-family:'Antic';
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;
}

#posttitle{
font-family:'Fjalla One';
font-size:25px;
line-height:28px;
color:{color:Posts Title};
text-align:center;
text-transform:uppercase;
text-shadow: 0px 2px 3px #151515;
}

.user_1 .label{color:{color:Chat 1}; font-weight:bold;}
.user_2 .label{color:{color:Chat 2}; font-weight:bold;}

blockquote{border-left:5px double #888;padding:5px;}

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

quote{
font-family:'Permanent Marker';
font-size:15px;
line-height:20px;
text-transform:uppercase;
text-shadow: 0px 1px 2px #625E6E;
}

#source{
font-family:'Felipa';
font-size:12px;
line-height:12px;
color:#999;
text-transform:none;
letter-spacing:1px;
text-align:right;
}

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

#askbox{
background-image:url('http://static.tumblr.com/gdh5wux/RpIm7hlh7/bg.jpg');
border:2px solid {color:Ask Border};
margin:0px;
margin-top:3px;
overflow:hidden;
padding:7px;
box-shadow: 0px 1px 1px #aaa;
}


/* DESIGN  */


#s-m-t-tooltip{
padding:3px 12px 3px 12px;
display:none;
text-align:center;
position: absolute;
font-size:8px;
line-height:10px;
font-family:Metrophobic;
z-index:9999999;
color:{color:Navigation Hover Text};
background:{color:Navigation Hover Bg};
border:1px solid {color:Navigation Hover Border};
letter-spacing:1px;
text-transform:uppercase;
margin:20px 0px 0px -45px;
}


#bgside{
position:fixed;
width:350px;
height:100%;
left:0px;
top:0px;
border-right:6px solid {color:Side Border};
background:{color:Side Bg};
padding:5px;
background-image:url('{image:Side}');
}

/* ~ BLOG TITLE ~  */
blogtitle{
position:absolute;
font-family:'Bilbo Swash Caps';
color:{color:Blogtitle}; /* ~ COLOR OF TEXT ~  */
font-size:55px; /* ~ SIZE OF TEXT ~  */
top:30px; /* ~ TO MOVE TEXT DOWN OR UP ~  */
left:10px; /* ~ TO MOVE TEXT TO THE RIGHT OR LEFT ~  */
text-transform:none;
text-shadow: 0px 1px 1px #555; /* ~ TEXT SHADOW ~  */
}

/* ~ SIDEBAR IMAGE ~  */
#sideimg{
position:absolute;
width:200px;
height:200px;
left:10px;
top:65px;
border:1px solid {color:Sidebar Image Border};
background:{color:Sidebar Image Bg};
padding:5px;
z-index:9999;
}

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

/* ~ DESCRIPTION BOX ~  */
#des{
position:absolute;
width:320px;
height:auto;
padding:5px;
left:10px;
top:285px;
color:#000;
z-index:9999;
text-align:center;
font-family:'Arial';
font-size:10px;
line-height:11px;
border-top:2px solid {color:Description Border};
-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, IN SIDEBAR ~  */

#navigate{
position:absolute;
width:100px;
height:190px;
left:229px;
top:65px;
padding:10px;
z-index:9999;
}

/* ~ MAIN NAVIGATION LINKS ~  */
#navigate a{
float:center;
width:105px;
height:20px;
display:inline-block;
font-family:'Fjalla One';
font-size:12px;
line-height:20px;
margin:4px -5px 6px;
text-align:center;
background:{color:Main Nav Bg};
border:3px double {color:Main Nav Border};
color:{color:Main Nav Text} !important;
text-transform:uppercase;
text-shadow:1px 1px 1px #555;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#navigate a:hover{
background:{color:Main Nav Hover Bg};
color:{color:Main Nav Hover Text} !important;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

/* ~ NAVIGATION, TO THE LEFT (THE ONE WITH THE NUMBERS) ~  */
#navibox{
position:fixed;
width:30px;
height:100%;
left:400px;
top:0px;
padding:10px;
line-height:24px;
z-index:9999;
background:{color:Nav Box Bg};
border-left:4px double {color:Nav Box Border};
border-right:4px double {color:Nav Box Border};
}

/* ~ MAIN NAVIGATION LINKS ~  */
#navibox a{
float:center;
width:40px;
height:40px;
background:{color:Nav Bg};
display:block;
font-family:Fjalla One;
font-size:16px;
line-height:40px;
margin-top:40px;
margin-left:-5px;
margin-bottom:-25px;
text-align:center;
text-transform:uppercase;
color:{color:Nav Text} !important;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#navibox a:hover{
background:{color:Nav Hover Bg};
color:{color:Nav Hover Text} !important;
-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 a{
float:center;
width:40px;
height:20px;
background:{color:Nav Bg};
display:block;
font-family:Fjalla One;
font-size:13px;
line-height:20px;
margin-top:40px;
margin-left:-5px;
margin-bottom:-25px;
text-align:center;
text-transform:uppercase;
color:{color:Nav Text} !important;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

</style>
<body>

<div id="bgside">
<blogtitle>{title}</blogtitle>
<div id="sideimg"><img src="{image:Sidebar}"></div>

<div id="navigate">
<a href="/">Home</a>
<a href="/ask">Ask</a>
<a href="/submit">Submit</a>
<a href="/archive">Archive</a>
<a href="http://klaroline-fantasies.tumblr.com/">Credit</a>
</div>

<div id="des">{description}</div>

</div>

<div id="navibox">
<a href="{text:Custom Link URL 1}"title="{text:Custom Link 1}">01</a>
<a href="{text:Custom Link URL 2}"title="{text:Custom Link 2}">02</a>
<a href="{text:Custom Link URL 3}"title="{text:Custom Link 3}">03</a>
<a href="{text:Custom Link URL 4}"title="{text:Custom Link 4}">04</a>
<a href="{text:Custom Link URL 5}"title="{text:Custom Link 5}">05</a>
<a href="{text:Custom Link URL 6}"title="{text:Custom Link 6}">06</a>
<a href="{text:Custom Link URL 7}"title="{text:Custom Link 7}">07</a>
<a href="{text:Custom Link URL 8}"title="{text:Custom Link 8}">08</a>

<div id="pagination">
{block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
{block:PreviousPage}<a href="{PreviousPage}">Prev</a>{/block:PreviousPage}
</div>

</div>

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

{Block:IndexPage}
<div id="info">
<a href="{permalink}">{NoteCount} Notes</a> // <a href="{ReblogURL}">Reblog</a>
{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>
{/Block:IndexPage}

{block:Text}
{block:Title}
<div id="posttitle">{Title}</div>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{LinkOpenTag}
<a href="{permalink}">
<img class="photo"src="{PhotoURL-HighRes}"alt="{PhotoAlt}"width="100%"></a>
{LinkCloseTag}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}

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

{block:Quote}
<quote>{Quote}</quote>
{block:Source}
<div id="source">-{Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<a href="{URL}">{Target}<div id="posttitle">{Name}</div></a>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<div id="posttitle">{Title}</div>{/block:Title}
<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:Audio}
{AudioPlayerWhite}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio}

{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 #666;"/>
<asker>{Asker}:</asker>
<div id="ask">{Question}</div>
</div>
{Answer}
{/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>
</body>
</html>