all in one

<!--all in one theme by lmb themes (bonivur) leave al credit-->

<!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>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">

<meta name="description" content="" />

<meta http-equiv="x-dns-prefetch-control" content="off"/>

<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,400,700' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">

body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #000;}

::selection {background: #000; color:#FFF;}
::-moz-selection {background: #000; color:#FFF;}
::-webkit-selection {background: #000; color:#FFF;}

body {
background: #fff;
font-family: 'Roboto Condensed', Arial, sans-serif;
font-size: 12px;
}

a:link, a:active, a:visited {
color: #1C140D;
text-decoration: none;
}

a:hover {
color: #CCC;
text-decoration: none;
}

b {
color: #CCC;
}

p {
margin: 0px 0px 8px;
}

#tabs {
width: 460px;
margin: 10px 0px 10px 282px;
list-style: none;
text-align: center;
z-index: 9999;
overflow: hidden;
}

#tabs li {
float: left;
margin: 2px 10px;
width: 110px;
padding: 6px 10px;
font-family: 'Old Standard TT', Georgia, serif;
text-transform: lowercase;
font-size: 16px;
letter-spacing: 1px;
background: #000;
text-align: center;
}

#tabs a {
font-style: italic;
color: #ffffff;
padding: 10px 25px;
transition: all 0.6s ease;
moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
}

#tabs a:hover {
color: #000000;
background: #ffffff;
}

#tabs #current {
z-index: 3;
}

#container {
width: 750px;
height: 560px;
position: fixed;
top: 50%;
margin-top: -320px;
left: 50%;
margin-left: -375px;
text-align: center;
}

.image {
float: left;
width: 250px;
height: 500px;
background: #fff;
background-image: url('https://sphotos-b.xx.fbcdn.net/hphotos-prn2/960293_260525087427700_1947510982_n.jpg');
background-repeat: no-repeat;
background-position: right;

}

.profile {
bottom: 10px;
position: absolute;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.profile a {
display: block;
width: 180px;
padding: 5px 10px;
margin: 3px 25px;
font-size: 10px;
text-transform: uppercase;
background: #000;
color: #FAFAFA;
}

.image:hover .profile {
opacity: 1;
}

#content {
float: right;
width: 410px;
height: 440px;
padding: 30px;
background: #FAFAFA;
text-align: justify;
overflow-y: auto;
position: relative;
}

h1 {
margin: 10px 0px;
}

.bonivur {
width: 80%;
height: 1px;
margin: 20px auto;
text-align: center;
border-top: 1px solid #1C140D;
border-bottom: 1px solid #1C140D;
position: relative;
}

.arvin {
font-family: 'Old Standard TT', sans-serif;
font-size: 16px;
text-align: center;
font-style: italic;
line-height: 115%;
margin: 20px;
}

#lb {
    position:fixed;
    bottom:10px;
    right:10px;
    font: 14px times;
    color: {color:#c9c9c9};
    border: 1px solid #e8e8e8;
    background-color: #FAFAFA;
    letter-spacing:0.5px;
    padding: 4px;}

 #lb a {
    color:{color:link}; opacity:0.8;
    background-color: #fafafa;}

#lb a:hover {
    color:{color:link hover}; opacity:0.8;
    background-color: #FAFAFA; opacity:0.8;}

</style>
</head>

<body>

<div id="container">

<ul id="tabs">
<li><a href="#" name="#tab1">about</a></li>
<li><a href="#" name="#tab2">blogroll</a></li>
<li><a href="#" name="#tab3">more</a></li>
</ul>

<div class="image">
<div class="profile">
<a href="/">back</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="http://bonivur.tumblr.com/">credit</a>
</div>
</div>

<div id="content">

<div id="tab1">
<div class="bonivur"></div>
<div class="arvin">about me</div>
<div class="bonivur"></div>
write about your self here make as long ask you want it has scroll!
</div>

<div id="tab2">
{block:Following}
<table id="blogroll" cellspacing="0px" cellpadding="0px">
<tr><td class="spacer"></td></tr>
<tr><td><div id="follow"><div>
{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img class="blog" src="{FollowedPortraitURL-64}"/></a>{/block:Followed}
</div></div></td></tr>
</table>
{/block:Following}
</div>

<div id="tab3">
put crap here ok i dont care what just whatever you feel! leave all theme credit or else :p
<div class="bonivur"></div>
wright more, even put links <a href="url">link</a>
</div>

</div>
</div>


  <script>
    function resetTabs(){
        $("#content > div").hide(); //Hide all content
        $("#tabs a").attr("id",""); //Reset id's
    }

    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab

    (function(){
        $("#content > div").hide(); // Initially hide all content
        $("#tabs li:first a").attr("id","current"); // Activate first tab
        $("#content > div:first").fadeIn(); // Show first tab content

        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //detection for current tab
             return
            }
            else{
            resetTabs();
            $(this).attr("id","current"); // Activate this
            $($(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content
          }
        }
    })()
  </script>

</body>
    <div id="lb">
<a title=credit a href="http://bonivur.tumblr.com">ℒℳℬ</a>
</div>
</html>