FF7 Tumblr Theme

<!--



　 __＿＿＿＿＿
==| |───────　／    FINAL FANTASY VII THEME
  ￣￣￣￣￣￣            [ complexglitch.tumblr.com ]



-->

<!DOCTYPE html><html><head>
 <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}

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<meta name="image:Background" content="">
<meta name="text:Name" content="Cloud">
<meta name="text:Level" content="98">
<meta name="text:HP" content="9000/9999">
<meta name="text:HP Percent" content="89">
<meta name="text:MP" content="300/877">
<meta name="text:MP Percent" content="89">
<meta name="text:Next Level Percent" content="30">
<meta name="text:Limit Level" content="1">
<meta name="text:Limit Level Percent" content="80">
<meta name="if:Max BG" content="0">
<meta name="if:Sword Cursor" content="0">
<meta name="if:Right Sidebar" content="0">
<meta name="select:Via Materia" content="http://i.imgur.com/SoKkPHi.png" title="Support">
<meta name="select:Via Materia" content="http://i.imgur.com/edU0hEf.png" title="Command">
<meta name="select:Via Materia" content="http://i.imgur.com/F6GBHZn.png" title="Magic">
<meta name="select:Via Materia" content="http://i.imgur.com/C6U0dkx.png" title="Summon">
<meta name="select:Via Materia" content="http://i.imgur.com/yrn7mhx.png" title="Independent">
<meta name="select:Source Materia" content="http://i.imgur.com/SoKkPHi.png" title="Support">
<meta name="select:Source Materia" content="http://i.imgur.com/edU0hEf.png" title="Command">
<meta name="select:Source Materia" content="http://i.imgur.com/F6GBHZn.png" title="Magic">
<meta name="select:Source Materia" content="http://i.imgur.com/C6U0dkx.png" title="Summon">
<meta name="select:Source Materia" content="http://i.imgur.com/yrn7mhx.png" title="Independent">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'><style type="text/css">

body {
background: #000 url({image:Background})
top fixed repeat; {block:ifMaxBG}
background-size: cover;{/block:ifMaxBG}
margin: 0;
color: #fff;
font: 12px 'Source Sans Pro', calibri;
text-shadow: 2px 2px #212121;
letter-spacing: 1px;
word-wrap: break-word; }

img { border: 0;
max-width: 100%; }

::-webkit-scrollbar
{ width: 14px;
height: 0;
background: transparent; }

::-webkit-scrollbar-thumb
{ border: 2px ridge #dfdde8; }
{block:ifswordcursor}body, a, a:active, a:hover {

cursor: url('http://i.imgur.com/AXKFFZA.png'),
auto; }{/block:ifswordcursor}

a {
color: #00f0f6;
text-decoration: none; }

b, strong, i, em { color: #ffff00; }

h1 { font-size: 22px; margin: -5px 0 -4px 0; }

h2 { font-size: 19px; }

h3 { font-size: 17px; }

h4 { font-size: 15px; }

blockquote {margin-left: 5px;
padding-left: 9px;
border-left: 1px
solid #fff; }

pre {border: 3px ridge #dfdde8;
padding: 10px;
margin-left: 5px;
padding: 7px; }

#container {margin: 35px auto 0 auto;
width: 800px;
overflow: visible;}

.posts { margin: auto;
width: 500px;
padding: 12px;
margin-bottom: 40px;
position: relative; }

.bubble { position: relative;
display: block;
min-height: 35px;
padding: 10px;
border: 3px
ridge #dfdde8; }

.bubble a { color: #fff; }

.bubq { margin-top: 2px;
padding-left: 12px;
text-indent: -7px;}

.posts:hover

.arra {opacity: 1;}

.arra { opacity: 0;
position: absolute;
margin-left: -60px;
width: 60px;
margin-bottom: 8px;
transition: .2s ease-in-out; }

.infobox { border: 3px ridge #dfdde8;
margin-top: -14px;
position: fixed;
width: 150px;
padding: 10px;
{block:ifnotrightsidebar}
margin-left: 560px;
{/block:ifnotrightsidebar}
{block:ifrightsidebar}
margin-left: -250px;
{/block:ifrightsidebar}
transition: .2s ease-in-out;
text-align: center; }

.infobox a { color: #fff; }

.sourceslink { width: 56px;
height: 22px;
display: block;
background: url('http://i.imgur.com/Xc1Nrnq.png') no-repeat; }

.matlinka img {position: fixed;
width: 15px;
height: 15px;
margin: 4px 0 0 -23px;}

.matlinkb img { position: fixed;
width: 15px;
height: 15px;
margin: 4px 0 0 9px;}

.tags, .notecontainer { display: block;
margin: -33px auto 30px auto;
font-family: calibri;
border: 3px ridge #dfdde8;
padding: 10px;
width: 505px; }

{block:permalinkpage}

.tags { margin-bottom: 50px; }

{/block:permalinkpage}

.comm:last-child { display: none; }

.notecontainer { line-height: 17px;
max-height: 280px;
overflow: auto;}

.notecontainer ol.notes li.note { padding: 2px; }

.notecontainer img { display: none; }

#sidebar { width: 300px;
{block:ifnotrightsidebar}
margin-left: -250px;
{/block:ifnotrightsidebar}
{block:ifrightsidebar}
margin-left: 710px;
{/block:ifrightsidebar}
position: fixed; }

.descript, .pagi { width: 300px;
border: 3px ridge #dfdde8;
padding: 12px; }

.mater { border: 3px ridge #dfdde8;
width: 120px;
padding: 12px;
margin-left: 180px;
margin-top: 20px; }

.mater img { vertical-align:
middle; margin: 3px; }

.mater a { text-transform: uppercase;
display: inline-block;
margin-right: 3px;
vertical-align: middle;
color: #fff;
font-size: 11px;}

.tit { font-size: 14px;
margin: -15px -15px 5px 0;
border: 2px ridge #dfdde8;
border-radius: 5px;
text-align: right;
padding-right: 8px;}

.pagi { margin-top: 20px;
width: 130px;
display: block;
position: fixed;
margin-bottom: 20px;
text-align: center; }

.jump_page {padding: 2px 4px;
font-size: 12px;}

.current_page, .jump_page:hover { padding: 2px 4px;
font-size: 12px;
border-bottom: 1px solid #ff0000; }

.stats { font: 11px consolas; }

.stats b, .stats strong { font-family: lucida console;
text-transform: uppercase;
color: #00f0f6; }

.statbar { background: #370108;
width: 50px;
height: 2px;
overflow: hidden; }

.hpbar, .mpbar { display: block;
height: 1px;
border-bottom: 1px solid #370108; }

.hpbar { background-color: #bedae5;
width: {text:HP Percent}%; }

.mpbar { background-color: #bedae5;
width: {text:MP Percent}%; }

.level { width: 80px;
height: 4px;
margin-left: 10px;
overflow: hidden;
background: #5b5b5b;
background: -moz-linear-gradient(top, #5b5b5b 0%, #c7c7d1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%,#c7c7d1));
background: -webkit-linear-gradient(top, #5b5b5b 0%,#c7c7d1 100%);
background: -o-linear-gradient(top, #5b5b5b 0%,#c7c7d1 100%);
background: -ms-linear-gradient(top, #5b5b5b 0%,#c7c7d1 100%);
background: linear-gradient(to bottom, #5b5b5b 0%,#c7c7d1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#c7c7d1',GradientType=0 );
border: 2px ridge #dfdde8; }

.nextlev, .limitlev { display: block; }

.nextlev { background-color: #f4cbc9;
width: {text:Next Level Percent}%;
height: 4px;}

.limitlev { background-color: #cbe8a5;
width: {text:Limit Level Percent}%;
height: 4px; }

.creep {position: fixed;
right: 4px;
bottom: 2px;}

.poot {text-align: center;
font-size: 11px;
text-transform: uppercase;}

#s-m-t-tooltip { padding: 5px;
margin: 24px 14px 7px 12px;
border: 2px ridge #dfdde8;}

.tumblr_audio_player { height: 120px;
width: 100%;}

pre, #s-m-t-tooltip, ::-webkit-scrollbar-thumb, .bubble, .infobox, .tags, .notecontainer, .pagi { display: block;
background: #110e7f; background: -moz-linear-gradient(top, #110e7f 0%, #0d0b3a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#110e7f), color-stop(100%,#0d0b3a));
background: -webkit-linear-gradient(top, #110e7f 0%,#0d0b3a 100%);
background: -o-linear-gradient(top, #110e7f 0%,#0d0b3a 100%);
background: -ms-linear-gradient(top, #110e7f 0%,#0d0b3a 100%);
background: linear-gradient(to bottom, #110e7f 0%,#0d0b3a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#110e7f', endColorstr='#0d0b3a',GradientType=0 ); border-radius: 7px; }

.descript, .posts, .mater { background: #0036b5;
background: -moz-linear-gradient(-45deg, #0036b5 0%, #000021 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0036b5), color-stop(100%,#000021));
background: -webkit-linear-gradient(-45deg, #0036b5 0%,#000021 100%);
background: -o-linear-gradient(-45deg, #0036b5 0%,#000021 100%);
background: -ms-linear-gradient(-45deg, #0036b5 0%,#000021 100%);
background: linear-gradient(135deg, #0036b5 0%,#000021 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0036b5', endColorstr='#000021',GradientType=1 );
border: 4px ridge #dfdde8;
border-radius: 7px; }


</style>


</head>

<body>

<div class="displayimg">
<img src="{image:sidebar}">

</div>

<div id="container">
<div id="sidebar">
<div class="descript">
<table>
<tr>
<td><img src="{PortraitURL-64}"></td>

<td style="padding-left: 10px;">
<div class="stats"> {text:Name}<br> <strong>LV</strong>{text:Level}<br> <strong>HP</strong>{text:HP} <div class="statbar"><span class="hpbar"></span></div>
<strong>MP</strong>{text:MP} <div class="statbar"><span class="mpbar"></span></div> </div> </td>

<td style="padding-left: 12px;"> Next level<br> <div class="level"><span class="nextlev"></span></div> Limit level {text:limit level}<br>

<div class="level"><span class="limitlev"></span></div> </td> </tr> </table> <p>{Description}<p> </div> {block:Pagination} <div class="pagi"> {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">&laquo;</a>{/block:PreviousPage} {block:JumpPagination length="4"} {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage} {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination} {block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage} </div> {/block:Pagination} <div class="mater"> <div class="tit">Materia</div> <img src="http://i.imgur.com/F6GBHZn.png"><a href="/">Index</a><br> <img src="http://i.imgur.com/edU0hEf.png"><a href="/ask">Message</a><br> <img src="http://i.imgur.com/yrn7mhx.png"><a href="/submit">Submit</a><br> <img src="http://i.imgur.com/SoKkPHi.png"><a href="/archive">Archive</a>{block:HasPages}<br> <img src="http://i.imgur.com/C6U0dkx.png">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".sub").hide();
//toggle the componenet with class msg_body
jQuery(".cthrough").click(function()
{
jQuery(this).next(".sub").slideToggle(500);
});});
</script>
 <a href="#" class="cthrough">More Links</a> <div class="sub"> {block:Pages}<a href="{url}" style="margin-left:21px;display:block;">{Label}</a>{/block:Pages} </div> {/block:HasPages}</div></div> {block:Posts} {block:ContentSource}<!-- {SourceURL} {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --> {/block:ContentSource} <!-- {block:NoRebloggedFrom} {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom} {/block:NoRebloggedFrom} --> <div class="posts"> {block:Date} {block:IndexPage}<div class="arra"> <a href="{Permalink}" title="{TimeAgo}{block:NoteCount} / {NoteCount}{/block:NoteCount}"> <img src="http://i.imgur.com/MD5KE0Z.png"> </a> </div>{/block:IndexPage} {block:Permalinkpage} <div class="infobox"> {Month} {DayOfMonth}, {Year} <br> {12Hour}:{Minutes} {AmPM} <br> {block:Notecount}{NoteCountWithLabel}{/block:Notecount} {block:RebloggedFrom} <p><center> <span class="sourceslink"> <span class="matlinka"> <a href="{reblogparenturl}" title="via"> <img src="{select:Via Materia}"> </a> </span> <span class="matlinkb"> <a href="{reblogrooturl}" title="source"> <img src="{select:Source Materia}"> </a> </span> </span></center> {/block:RebloggedFrom} </div>{/block:Permalinkpage} {/block:Date} {block:Text} {block:Title}<h1>{Title}</h1>{/block:Title} {Body} {/block:Text} {block:Photo} {LinkOpenTag} <img style="width:100%" src="{PhotoURL-500}"> {LinkCloseTag} {block:Caption}{Caption}{/block:Caption} {/block:Photo} {block:Photoset} {Photoset} {block:Caption}{Caption}{/block:Caption} {/block:Photoset} {block:Video} <div style="width:100%; overflow:hidden;">{VideoEmbed-500}</div> {block:Caption}{Caption}{/block:Caption} {/block:Video} {block:Audio} {AudioEmbed} {block:Caption}{Caption}{/block:Caption} {/block:Audio} {block:Answer} <div class="bubble">{Asker}: <br> <div class="bubq">{Question}</div> </div> {Answer} {/block:Answer} {block:Quote} <h2>“{Quote}”</h2> {block:Source}– {Source}{/block:Source} {/block:Quote} {block:Link} <h1><a href="{URL}">{Name}</a></h1> {block:Description}{Description}{/block:Description} {/block:Link} {block:Chat} {block:Title}<h1>{Title}</h1><br>{/block:Title} {block:Lines} <div style="margin-bottom:8px;"> {block:Label}<strong>{Label}</strong>{/block:Label} {Line} </div> {/block:Lines} {/block:Chat} </div> {block:HasTags} <div class="tags"> {block:Tags} <a style="text-decoration:none;" href="{TagURL}">#{Tag}</a> {/block:Tags} </div> {/block:HasTags} {block:PostNotes} <div class="notecontainer"> {PostNotes} </div> {/block:PostNotes} {/block:Posts} </div><div class="creep"> <a href="http://complexglitch.tumblr.com/" title="THEME"> <img src="http://i.imgur.com/9t5FgZA.png"> </a> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:20,
               tip_fade_speed:100
           }
               );
       });
   })(jQuery);
</script></body></html>