Character Page #002

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--

MADE BY RPTHEME-HELPER (http://rptheme-helper.tumblr.com/)
CHARACTER PAGE #002
DO NOT REMOVE THE CREDIT OR CLAIM AS YOUR OWN

-->

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

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

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

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

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

b {
color: #CBE86B;
}

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: #1C140D;
border: 1px solid #CBE86B;
outline: 2px solid #1C140D;
text-align: center;
}

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

#tabs a:hover {
color: #CBE86B;
}

#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: #f8f5f4;
background-image: url('DIRECT-IMAGE-URL-HERE');
background-repeat: no-repeat;
background-position: right;
border-left: 30px solid #1C140D;
}

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

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

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

.creds {
position: absolute;
right: 20px;
bottom: 20px;
text-transform: uppercase;
font-size: 10px;
z-index: 9999;
}

.creds a {
color: #1C140D;
}

</style>
</head>

<body>

<div id="container">

<ul id="tabs">
<li><a href="#" name="#tab1">Bio</a></li>
<li><a href="#" name="#tab2">App</a></li>
<li><a href="#" name="#tab3">Paras</a></li>
</ul>

<div class="image">
<div class="profile">
<a class="">Age. </a>
<a class="">Group. </a>
<a class="">Occupation. </a>
<a class="">Face Claim. </a>
</div>
</div>

<div id="content">

<div id="tab1">
<div class="cut"></div>
<div class="quote">“Here goes the quote.”</div>
<div class="cut"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend malesuada vestibulum. Suspendisse eleifend lacinia congue. Phasellus tempus est nec tortor ultricies porta. Aenean vitae nulla elit, in viverra enim. Integer ornare scelerisque justo vel ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dui orci, volutpat vitae pharetra id, accumsan non quam. Morbi risus nisl, pellentesque eget posuere eu, elementum vitae orci. In consequat tellus blandit dui elementum lacinia. Curabitur blandit, libero et sollicitudin pharetra, nulla mi pharetra eros, eget iaculis lacus sem in quam.</p>
<p>Donec in nisl lectus. Praesent vel tortor erat. Praesent interdum ullamcorper felis quis sodales. Nulla vitae nibh nec erat ornare rhoncus. Mauris vel elit porttitor dui dictum interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla volutpat, quam eget convallis faucibus, quam urna dictum ante, sit amet ultricies leo turpis nec lectus. Donec dapibus laoreet mauris. Vivamus pellentesque convallis urna sollicitudin rutrum.</p>
<p>Suspendisse potenti. Curabitur sit amet porttitor elit. Mauris sollicitudin velit non sapien dapibus ut consectetur nulla tincidunt. Etiam nec velit nec nulla condimentum viverra. Donec eu risus ac urna pulvinar faucibus quis sit amet lacus. Sed a commodo justo. Duis bibendum, orci ut vestibulum pellentesque, purus turpis fermentum ipsum, non dignissim sapien sem a velit. Donec vestibulum placerat ornare. Vestibulum odio justo, rutrum vitae ornare in, faucibus eget velit. Pellentesque consequat venenatis quam. Nulla hendrerit eleifend enim, nec bibendum nisi malesuada eu. Curabitur at mi nisi, vel aliquet felis. Sed sit amet tellus at arcu laoreet feugiat. Pellentesque vehicula vestibulum turpis eget mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend malesuada vestibulum. Suspendisse eleifend lacinia congue. Phasellus tempus est nec tortor ultricies porta. Aenean vitae nulla elit, in viverra enim. Integer ornare scelerisque justo vel ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dui orci, volutpat vitae pharetra id, accumsan non quam. Morbi risus nisl, pellentesque eget posuere eu, elementum vitae orci. In consequat tellus blandit dui elementum lacinia. Curabitur blandit, libero et sollicitudin pharetra, nulla mi pharetra eros, eget iaculis lacus sem in quam.</p>
<p>Donec in nisl lectus. Praesent vel tortor erat. Praesent interdum ullamcorper felis quis sodales. Nulla vitae nibh nec erat ornare rhoncus. Mauris vel elit porttitor dui dictum interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla volutpat, quam eget convallis faucibus, quam urna dictum ante, sit amet ultricies leo turpis nec lectus. Donec dapibus laoreet mauris. Vivamus pellentesque convallis urna sollicitudin rutrum.</p>
<p>Suspendisse potenti. Curabitur sit amet porttitor elit. Mauris sollicitudin velit non sapien dapibus ut consectetur nulla tincidunt. Etiam nec velit nec nulla condimentum viverra. Donec eu risus ac urna pulvinar faucibus quis sit amet lacus. Sed a commodo justo. Duis bibendum, orci ut vestibulum pellentesque, purus turpis fermentum ipsum, non dignissim sapien sem a velit. Donec vestibulum placerat ornare. Vestibulum odio justo, rutrum vitae ornare in, faucibus eget velit. Pellentesque consequat venenatis quam. Nulla hendrerit eleifend enim, nec bibendum nisi malesuada eu. Curabitur at mi nisi, vel aliquet felis. Sed sit amet tellus at arcu laoreet feugiat. Pellentesque vehicula vestibulum turpis eget mattis.</p>
</div>

<div id="tab2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend malesuada vestibulum. Suspendisse eleifend lacinia congue. Phasellus tempus est nec tortor ultricies porta. Aenean vitae nulla elit, in viverra enim. Integer ornare scelerisque justo vel ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dui orci, volutpat vitae pharetra id, accumsan non quam. Morbi risus nisl, pellentesque eget posuere eu, elementum vitae orci. In consequat tellus blandit dui elementum lacinia. Curabitur blandit, libero et sollicitudin pharetra, nulla mi pharetra eros, eget iaculis lacus sem in quam.</p>
<p>Donec in nisl lectus. Praesent vel tortor erat. Praesent interdum ullamcorper felis quis sodales. Nulla vitae nibh nec erat ornare rhoncus. Mauris vel elit porttitor dui dictum interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla volutpat, quam eget convallis faucibus, quam urna dictum ante, sit amet ultricies leo turpis nec lectus. Donec dapibus laoreet mauris. Vivamus pellentesque convallis urna sollicitudin rutrum.</p>
<p>Suspendisse potenti. Curabitur sit amet porttitor elit. Mauris sollicitudin velit non sapien dapibus ut consectetur nulla tincidunt. Etiam nec velit nec nulla condimentum viverra. Donec eu risus ac urna pulvinar faucibus quis sit amet lacus. Sed a commodo justo. Duis bibendum, orci ut vestibulum pellentesque, purus turpis fermentum ipsum, non dignissim sapien sem a velit. Donec vestibulum placerat ornare. Vestibulum odio justo, rutrum vitae ornare in, faucibus eget velit. Pellentesque consequat venenatis quam. Nulla hendrerit eleifend enim, nec bibendum nisi malesuada eu. Curabitur at mi nisi, vel aliquet felis. Sed sit amet tellus at arcu laoreet feugiat. Pellentesque vehicula vestibulum turpis eget mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend malesuada vestibulum. Suspendisse eleifend lacinia congue. Phasellus tempus est nec tortor ultricies porta. Aenean vitae nulla elit, in viverra enim. Integer ornare scelerisque justo vel ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dui orci, volutpat vitae pharetra id, accumsan non quam. Morbi risus nisl, pellentesque eget posuere eu, elementum vitae orci. In consequat tellus blandit dui elementum lacinia. Curabitur blandit, libero et sollicitudin pharetra, nulla mi pharetra eros, eget iaculis lacus sem in quam.</p>
<p>Donec in nisl lectus. Praesent vel tortor erat. Praesent interdum ullamcorper felis quis sodales. Nulla vitae nibh nec erat ornare rhoncus. Mauris vel elit porttitor dui dictum interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla volutpat, quam eget convallis faucibus, quam urna dictum ante, sit amet ultricies leo turpis nec lectus. Donec dapibus laoreet mauris. Vivamus pellentesque convallis urna sollicitudin rutrum.</p>
<p>Suspendisse potenti. Curabitur sit amet porttitor elit. Mauris sollicitudin velit non sapien dapibus ut consectetur nulla tincidunt. Etiam nec velit nec nulla condimentum viverra. Donec eu risus ac urna pulvinar faucibus quis sit amet lacus. Sed a commodo justo. Duis bibendum, orci ut vestibulum pellentesque, purus turpis fermentum ipsum, non dignissim sapien sem a velit. Donec vestibulum placerat ornare. Vestibulum odio justo, rutrum vitae ornare in, faucibus eget velit. Pellentesque consequat venenatis quam. Nulla hendrerit eleifend enim, nec bibendum nisi malesuada eu. Curabitur at mi nisi, vel aliquet felis. Sed sit amet tellus at arcu laoreet feugiat. Pellentesque vehicula vestibulum turpis eget mattis.</p>
</div>

<div id="tab3">
<h1><a href="LINK-TO-PARA">♠</a> Title of para.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend malesuada vestibulum. Suspendisse eleifend lacinia congue. Phasellus tempus est nec tortor ultricies porta. Aenean vitae nulla elit, in viverra enim. Integer ornare scelerisque justo vel ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dui orci, volutpat vitae pharetra id, accumsan non quam. </p>
<div class="cut"></div>
<h1><a href="LINK-TO-PARA">♠</a> Title of para.</h1>
<p>Donec in nisl lectus. Praesent vel tortor erat. Praesent interdum ullamcorper felis quis sodales. Nulla vitae nibh nec erat ornare rhoncus. Mauris vel elit porttitor dui dictum interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla volutpat, quam eget convallis faucibus, quam urna dictum ante, sit amet ultricies leo turpis nec lectus. Donec dapibus laoreet mauris. Vivamus pellentesque convallis urna sollicitudin rutrum.</p>
<div class="cut"></div>
</div>

</div>
</div>

<div class="creds"><a href="http://rptheme-helper.tumblr.com/">Theme Credit</a></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>
</html>