Extinct by ladyevansrps

<!--
    "Extinct"
    @ladyevansrp
    DO NOT REMOVE CREDITS
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
    <meta name="image:sbarimg" content=""/>
    <meta name="image:bgimg" content=""/>

    <meta name="color:bg" content="#ffffff">
    <meta name="color:text" content="#000000">
    <meta name="color:link" content="#666666">
    <meta name="color:linkhover" content="#f2f2f2">
    <meta name="color:divider" content="#dddddd">

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

    <meta name="text:sbartitle1" content="title here">
    <meta name="text:sbartitle2" content="title here">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{Title}</title> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />

<style type="text/css">
/* scrollbar */
::-webkit-scrollbar
    {
        background-color:{color:sbarbg};
        height:3px;
        width:3px;
    }

::-webkit-scrollbar-thumb:vertical
    {
        background-color:{color:link};
        height:0px;
    }

::-webkit-scrollbar-thumb:horizontal
    {
        background-color:{color:link};
        height:50px!important;
    }

/* entries and posts */
body
    {
        font-family:'verdana';
        font-size:10px;
        background-color:{color:bg};
        background-image:url('{image:bgimg}');
        background-repeat:repeat;
        background-attachment:fixed;
    }

#entries
    {
        position:absolute;
        width:530px;
        margin-top:50px;
        margin-left:450px;
    }

#posts
    {
        padding:10px;
        border-bottom:1px solid {color:divider};
    }

/* links */
a
    {
        color:{color:link};
        text-decoration: none;
    }

a:hover
    {
        color:{color:linkhover};
        text-decoration: none;
    }

/* sbar */
#sbarimg
    {
        position:fixed;
        bottom:0px;
        margin-left:75px;
        width:250px;
        height:500px;
        background-color:#999;
    }
.sbarimg {max-width:250px; max-height:500px;}

#sbar
    {
        position:fixed;
        bottom:0px;
        margin-left:75px;
        width:250px;
        height:500px;
        z-index:100;
        opacity:0;
        -webkit-transition:all 0.5s ease-out;
        -moz-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
    }

#sbar:hover
    {
        background-color:rgba(250,250,250,0.75);
        opacity:1;
        -webkit-transition:all 0.5s ease-out;
        -moz-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
    }

#sbartitle1
    {
        font-size:18px;
        font-family:'helvetica';
        font-weight:bold;
        text-align:center;
        text-transform:uppercase;
    }

#sbartitle2
    {
        font-size:8px;
        font-family:'helvetica';
        font-style:italic;
        text-align:center;
        text-transform:lowercase;
        letter-spacing:2px;
    }

#desc
    {
        position:fixed;
        overflow:hidden;
        bottom:20px;
        margin-left:20px;
        width:210px;
        height:450px;
        z-index:101;
        opacity:1;
        -webkit-transition:all 0.5s ease-out;
        -moz-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
    }

/* navbar */
#navbar
    {
        position:fixed;
        bottom:0px;
        margin-left:45px;
        width:50px;
        height:500px;
    }

#navlinks
    {
        position:fixed;
        bottom:225px;
        margin-left:-188px;
        width:500px;
        height:30px;
        font-size:26px;
        font-family:'helvetica';
        text-align:right;
        font-weight:bold;
        letter-spacing:-1px;
        color:{color:text};
        -moz-transform: rotate(-90.0deg);
        -ms-transform: rotate(-90.0deg);
        -o-transform: rotate(-90.0deg);
        -webkit-transform: rotate(-90.0deg);
        transform: rotate(-90.0deg);
    }

#navlinks a
    {
        width:auto;
        height:30px;
        font-size:26px;
        font-family:'helvetica';
        text-align:center;
        font-weight:bold;
        color:{color:link};
        letter-spacing:-1px;
        -moz-transform: rotate(-90.0deg);
        -ms-transform: rotate(-90.0deg);
        -o-transform: rotate(-90.0deg);
        -webkit-transform: rotate(-90.0deg);
        transform: rotate(-90.0deg);
    }

#navlinks a:hover
    {
        color:{color:linkhover};
    }

/* pagination */
#leftbar
    {
        position:fixed;
        bottom:0px;
        margin-left:60px;
        width:50px;
        height:50px;
        text-align:left;
    }

#rightbar
    {
        position:fixed;
        bottom:0px;
        margin-left:330px;
        width:50px;
        height:50px;
        text-align:right;
    }


#pagelinks
    {
        position:fixed;
        bottom:5px;
        width:20px;
        height:40px;
        font-size:26px;
        font-family:'helvetica';
        font-weight:bold;
        color:{color:text};
    }

#pagelinks a
    {
        line-height:25px;
        padding-right:261px;
        font-size:26px;
        font-family:'helvetica';
        text-align:right;
        font-weight:bold;
        color:{color:link};
        letter-spacing:-1px;
    }

#pagelinks a:hover
    {
        color:{color:linkhover};
    }

/* post titles */
#title1
    {
        line-height:25px;
        text-align:center;
        font-family:'tahoma';
        font-size:26px;
        font-weight:bold;
        text-transform:lowercase;
        color:{color:text};
    }

#title2
    {
        line-height:15px;
        text-align:center;
        font-family:'tahoma';
        font-size:16px;
        color:{color:text};
    }

/* tags, infos and notes */
#info
    {
        width:528px;
        height:25px;
        color:{color:sbartext};
        font-size:8px;
        font-family:'tahoma';
        line-height:15px;
        text-align:center;
    }

#info a
    {
        color:{color:link};
        -webkit-transition:all 0.5s ease-out;
        -moz-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
    }

#info a:hover
    {
        color:{color:linkhover};
        opacity:0.2;
        -webkit-transition: opacity 0.8s linear;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }

/* source */
#source
    {
        margin-top:3px;
        text-align:right;
        font-size:10px;
    }

/* text effects */
h1
    {
        font-size:28px;
        font-family:'tahoma';
        font-weight:bold;
    }

h2
    {
        font-size:14px;
        font-family:'tahoma';
        font-weight:bold;
    }

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

i, em
    {
        color:{color:text};
    }

blockquote
    {
        margin:5px;
        padding-left:6px;
        border-left:2px solid {color:link};
    }

hr
    {
        display:block;
        padding:0px;
        height:1px;
        border:0px;
        border-top:1px solid {color:divider};
    }

pre
    {
        display:block;
        text-align:center;
        font-size:14px;
        font-family:'tahoma';
        color:{color:text};
        padding:5px;
        background-color:{color:divider};
    }


/* chat */
.user_1 .label
    {
        color:{color:link};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_2 .label
    {
        color:{color:text};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_3 .label
    {
        color:{color:link};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_4 .label
    {
        color:{color:text};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_5 .label
    {
        color:{color:link};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_6 .label
    {
        color:{color:text};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_7 .label
    {
        color:{color:link};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_8 .label
    {
        color:{color:text};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_9 .label
    {
        color:{color:link};
        text-transform:uppercase;
        font-weight:bold;
    }

.user_10 .label
    {
        color:{color:text};
        text-transform:uppercase;
        font-weight:bold;
    }

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

/* questions */
#asks
    {
        padding:3px;
        width:500px;
        height:auto;
        word-wrap:break-word;
    }

.arrow-left
    {
	    position:absolute;
	    width: 0;
	    height: 0;
	    margin-left:60px;
	    margin-top:15px;
	    border-top: 5px solid transparent;
	    border-bottom: 5px solid transparent;
	    border-right:10px solid {color:divider};
    }


#question
    {
        color:{color:text};
        text-align: justify;
        font-family: 'tahoma';
        font-size: 9px;
        margin-top:5px;
        margin-left: 70px;
        padding:5px;
        background-color:{color:divider};;
    }

#portrait
    {
        float:left;
        width:48px;
        height:48px;
        position: absolute;
        background-color:#fff;
        border:3px solid #fff;
        box-shadow:0px 1px 1px #999;
    }
#answer
    {
        padding-top:10px;
        text-align: justify;
        margin-top: 15px;
    }

/* audio posts */
#audio
    {
        width:100%;
        height:100px;
        margin-bottom:5px;
    }

.albumart
    {
        float:left;
        width:100px;
        height:100px;
        background-color:#fff;
        box-shadow:1px 1px 1px #999;
    }

.player
    {
        position:absolute;
        width:25px;
        height:25px;
        margin-top:34px;
        margin-left:33px;
        overflow:hidden;
        padding:3px;
        opacity:0.4;
        -webkit-transition:all 0.4s ease-in-out;
        -moz-transition:all 0.4s ease-in-out;
        -o-transition:all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition:all 0.5s ease-in-out;
    }

.player:hover
    {
        opacity:0.7;
        -webkit-transition:all 0.4s ease-in-out;
        -moz-transition:all 0.4s ease-in-out;
        -o-transition:all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition:all 0.5s ease-in-out;
    }

.audioinfo
    {
        margin-left:110px;
        line-height:170%;
        font-family:'tahoma';
        text-transform:uppercase;
        font-size:10px;
    }

/* credit (don't remove) */
#cred a
    {
        position:fixed;
        font-family:'helvetica';
        text-transform:uppercase;
        font-size:10px;
        font-weight:bold;
        text-shadow:1px 1px 1px {color:shadows};
        bottom:3px;
        right:3px;
        padding:8px;
        color:{color:link};
    }

</style>
</head>

<body>
<!-- navbar -->
<div id="navbar"></div>
    <div id="navlinks">
        <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="{text:link 4 URL}">{text:link 4}</a>.
    </div>

<!-- sbar -->
<div id="sbarimg">
    <img src="{image:sbarimg}" />
</div>

<div id="sbar">
    <div id="desc">
        <div id="sbartitle1">
            {text:sbartitle1}
        </div>
        <div id="sbartitle2">
            {text:sbartitle2}
        </div>
        <hr color={color:text}>
        {Description}
    </div>
</div>

<!-- pagination -->
<div id="leftbar">
    <div id="pagelinks">
        {block:Pagination}
        {block:PreviousPage}
            <a href={PreviousPage}>&lang;</a>
        {/block:PreviousPage}
        {/block:Pagination}
    </div>
</div>

<div id="rightbar">
    <div id="pagelinks">
        {block:Pagination}
        {block:NextPage}
            <a href={NextPage}>&rang;</a></p>
        {/block:NextPage}
        {/block:Pagination}
    </div>
</div>

<!-- entries -->
<div id="entries">
{block:Posts}
<div id="posts">

<!-- quote -->
{block:Quote}
    <div id="title2"><i>
        ❝ {Quote} ❞</i>
    </div>
{block:Source}
    <div id="source">
        — {Source}
    </div>
{/block:Source}
{/block:Quote}

<!-- text -->
{block:Title}
    <div id="title1">
        {Title}
    </div>
    <hr>
{/block:Title}
{block:Text}
    {Body}
{/block:Text}

<!-- link -->
{block:Link}
    <div id="title1">
        <a href="{URL}" class="link" {Target}>{Name}</a>
    </div>
{block:Description}
    <div class="description">
        {Description}
    </div>
{/block:Description}
{/block:Link}

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

<!-- chat -->
{block:Chat}
    <br /><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}

<!-- video -->
{block:Video}
    {Video-500}
{block:Caption}
    {Caption}
{/block:Caption}
{/block:Video}

<!-- question -->
{block:Answer}
    <div id="asks">
    <div id="portrait">
        <span style="width:48px;height:48px;"><img src="{AskerPortraitURL-48}"></span>
    </div>

    <div class="arrow-left"></div>
    <div id="question">
        <span style="font-size:11px;font-weight:bold;text-transform:uppercase;font-family:tahoma">{asker}: </span></br>&nbsp;&nbsp;&nbsp;{Question}</br>
    </div>
    </div>

    <div id="answer">
        {Answer}
    </div>
{/block:Answer}

<!-- audio -->
{block:Audio}
    <div id="audio">
        <div class="player">
            {AudioPlayerWhite}
        </div>

        <div class="albumart">
            {block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}
        </div>

        <div class="audioinfo">
            <br>
            <b>SONG:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
            <b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}<br>
            <b>ALBUM:</b> {block:Album}{Album}{/block:Album}<br>
            <b>PLAYS:</b> {PlayCount} times</div></div>
{block:Caption}
    {Caption}
{/block:Caption}
{/block:Audio}

</div>

<!-- info/tags/notes -->
<div id="info">
{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date} {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}{block:ContentSource}, &copy; <a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource} &mdash; <b>&nbsp;&hearts;</b> {block:NoteCount} <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}<p style="margin-top:-5px">{block:HasTags}{block:Tags}#<a href="{TagUrl}">{Tag}</a> {/block:Tags}{/block:HasTags}</p>
</div>

<BR><BR>
{/block:posts}{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
</div>

<!-- credit (don't remove) -->
<div id="cred"><a href="http://ladyevansrps.tumblr.com">LER.</a></div>

</body>
</html>