wolves (all in one page)

<html>
<head>

<!-- THEME BY TEA --->

<!-- DON’T REMOVE THE CREDIT --->

<!-- DON’T JUST TAKE THE UPDATE CODE FROM THEME --->

<title>wolves</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"});});
})(jQuery);
</script>
<script src="http://static.tumblr.com/7bmjmb1/7alncayzs/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#teas li").click(function(e){
if (!$(this).hasClass("chemical")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$("#teas li.chemical").removeClass("chemical");
$(this).addClass("chemical");
$("#tea li.chemical").removeClass("chemical");
$("#tea li:nth-child("+nthChild+")").addClass("chemical");}
});});
</script>

<style type="text/css">

body {
    color:#888888; /** change text color **/
    font-family:calibri;
    font-size:8px;
    text-transform:uppercase;
    text-align:left;
    letter-spacing:0.5px;
    }

a:link, a:active, a:visited {
    color:#6a8da2; /** change link color **/
    text-decoration:none;
    }

a:hover {
    color:#d4e5f0; /** change link color hover **/
    -webkit-transition:0.7s;
    -moz-transition:0.7s;
    transition:0.7s;
    }

::-webkit-scrollbar-thumb:vertical {
    background-color:#ede5f3;
    }

::-webkit-scrollbar-button:horizontal {
    display:none;
    }

::-webkit-scrollbar {
    background-color:#ffffff;
    border:1px solid #eeeeee;
    height:0px;
    width:3px;
    }

::-moz-selection {
    background-color:#ebeff1;
    }

::selection {
    background-color:#ebeff1;
    }

b {
    color:#367987;
    }

#box {
    width:500px;
    height:400px;
    padding:25px;
    background-color:#ffffff;
    border:1px solid #eeeeee; /** change box border color **/
    margin-left:400px;
    margin-top:120px;
    position:fixed;
}


#sidebar {
    text-align:justify;
    height:370px;
    width:120px;
    padding:15px;
    background-color:#ffffff;
    border-right:1px solid #eeeeee; /** change sidebar border right color **/
    margin-top:0px;
    margin-left:-20px;
    position:fixed;
}

#sidebar img {
    margin-top:10px;
    width:87px;
    height:87px;
    padding:15px;
    background-color:#ffffff;
    border:solid 1px #eeeeee; /** change sidebar image border color **/
    -webkit-transition: opacity 0.8s linear;
    opacity: 0.7;
    }

#sidebar img:hover{
    -webkit-transition: opacity 0.8s linear;
    opacity: 1;
    }


#l {
    width:120px;
    margin-top:20px;
    }

#l a {
    text-align:center;
    display:block;
    padding:5px;
    background-color:#f6f6f6; /** change first link box background color **/
    box-shadow:0px 0px 0px 0px #ebeff1 inset; /** change first link box background color hover **/
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    }

#l a:hover {
    color:#ffffff; /** change first link box text color hover **/
    box-shadow:0px 100px 0px 0px #ebeff1 inset; /** change first link box background color hover **/
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    }

#tea {
    margin:0px;
    padding:0px;
    list-style-type:none;
    }

#tea li.chemical {
    display:block;
    }

#tea li {
    display:none;
    }

#teas {
    padding:0px;
    margin:0px;
    }

#teas li {
    margin-top:10px;
    padding:5px;
    text-align:center;
    display:block;
    background-color:#f6f6f6; /** change 3 links boxes background color **/
    box-shadow:0px 0px 0px 0px #ede5f3 inset; /** change 3 links boxes background color hover **/
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    }

#teas li:hover {
    color:#ffffff; /** change 3 links boxes text color hover **/
    box-shadow:0px 100px 0px 0px #ede5f3 inset; /** change 3 links boxes background color hover **/
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    cursor:pointer;
    }

#box2 {
    width:325px;
    text-align:justify;
    margin-top:20px;
    margin-left:150px;
    height:350px;
    overflow:auto;
    padding:10px 10px 10px 10px;
    }

#about {
    width:170px;
    text-align:left;
    padding:5px;
    margin:10px 0px 10px 0px;
    background:#f6f6f6; /** change about boxex (name, birthday, location) background color **/
    }

#aboutimage {
    margin-left:200px;
    margin-top:-90px;
    }

#aboutimage img {
    width:115px;
    height:280px;
    }

#abouttext {
    margin-top:-190px;
    width:180px;
    height:190px;
    }

#outsideinterest {
    margin-top:20px;
    width:295px;
    height:20px;
    background:#f6f6f6; /** change about box (outside interest) background color **/
    padding:10px;
    }

#blogroll {
    margin-left:20px;
    }

#blogroll img {
    display:table;
    float:left;
    max-height:30px;
    margin:5px 5px 5px 5px;
    padding:5px;
    border:1px solid #eeeeee; /** change follow image border color **/
    -webkit-transition: opacity 0.8s linear;
    opacity: 0.60;
    }

#blogroll:hover img {
    border:1px solid #def4f9; /** change follow image border color hover **/
    -webkit-transition: opacity 0.8s linear;
    opacity: 1;
    }

#tagtitle {
    font-size:10px;
    font-family:tahoma;
    padding:5px;
    width:305px;
    margin:10px 0px 10px 0px;
    color:#823f75; /** change tag title text color **/
    background:#f6f6f6; /** change tag title background color **/
    text-transform:uppercase;
    }

#tag {
    text-align:left;
    }

#tag a {
    width:130px;
    margin-top:1px;
    text-align:left;
    display:inline-block;
    padding:4px 14px 4px 10px;
    background-color:#fff; /** change tags background color **/
    border:1px solid #eeeeee; /** change tags border color **/
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;
    }

#tag a:hover {
    border:1px solid #def4f9; /** change tags border color hover **/
    padding:4px 4px 4px 20px;
    background-color:#fff; /** change tags background color hover **/
    -webkit-transition:all 0.6s ease-out;
    -moz-transition:all 0.6s ease-out;
    transition:all 0.6s ease-out;
    }

#credit a {
    width:auto;
    height:auto;
    bottom:10px;
    left:10px;
    padding:10px;
    background-color:#f6f6f6; /** change tea credit background color **/
    box-shadow:0px 0px 0px 0px #ebeff1 inset; /** change tea credit background color hover **/
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    position:fixed;
    text-align:center;
    }

#credit a:hover {
    color:#ffffff; /** change tea credit text color hover **/
    box-shadow:0px 30px 0px 0px #ebeff1 inset; /** change tea credit background color hover **/
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transition: all .5s linear;
    }

#s-m-t-tooltip {
    background-color:#ebeff1; /** change tooltip background color **/
    color:#888888; /** change tooltip text color **/
    font-size:8px;
    font-family:calibri;
    letter-spacing:1px;
    text-transform:uppercase;
    max-width:400px;
    padding:2px 5px;
    margin:20px 0px 0px 20px;
    z-index:999999999999;
    }

</style>
</head>
<body>

<!-- please don't delete credit-->
<div id="credit">
<a href="http://my-chemical-tea.tumblr.com/" title="codes by my-chemical-tea">tea</a>
</div>
<!-- please don't delete credit-->

<!-- sidebar -->
<div id="box">
<div id="sidebar">
<img src="http://s017.radikal.ru/i412/1411/14/227dcbd8dca6.jpg"/>
<div style="margin-top:20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor massa ac consectetur lobortis. Cras vitae aliquam metus, nec sagittis sapien.
</div>
<div id="l">
<a href="/">back</a>
<div id="teas">
<li class="chemical">about</li>
<li>blogroll</li>
<li>tags</li>
</div></div></div>
<!-- sidebar -->

<!-- about box -->
<div id="tea">
<li class="chemical">
<div id="box2">
<div id="about">
<b>name:</b> ???
</div>
<div id="about">
<b>birthday:</b> ??/??/??
</div>
<div id="about">
<b>location:</b> where you live
</div>
<div id="aboutimage">
<img src="http://s020.radikal.ru/i712/1411/bb/bdf64ea6467f.jpg"/>
</div>
<div id="abouttext">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR. EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM.
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA.</div>
<div id="outsideinterest">
<b>outside interest:</b> drawing, making themes and icons, tw shows and food (is it generally a hobby?)
</div>
</div>
</li>
<!-- about box -->

<!-- brogroll box -->
<li>
<div id="box2">
{block:Following}{block:Followed}
<div id="blogroll"><a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-40}"/></a></div>
{/block:Followed}{/block:Following}
</div>
</li>
<!-- brogroll box -->

<!-- tags box -->
<li><div id="box2">
<div id="tagtitle">tw show</div>
<div id="tag">
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
</div>
<div id="tagtitle">movies</div>
<div id="tag">
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
</div>
<div id="tagtitle">books</div>
<div id="tag">
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
</div>
<div id="tagtitle">comics</div>
<div id="tag">
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
<a href="/tagged/tag">tag</a>
</div>
</div>
</div>
</li>
<!-- tags box -->
</ul></div>
</body>
</html>