Untitled

<link href="https://fonts.googleapis.com/css?family=Cookie|Dancing+Script" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>{Title}</title>

    <meta charset="utf-8">

    <meta name="description" content="{MetaDescription}" />

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

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800,900,500' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<script src="http://use.edgefonts.net/londrina-sketch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>


</head>
<style type="text/css">
body {

}

a {
    text-decoration: none;
    color: #0195ab;
}

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

::-webkit-scrollbar-thumb:vertical {
    background-color: #a1394e;
    height: 10px;
    }
::-webkit-scrollbar-thumb:horizontal {
    background-color: #877b75;
    height: 7px!important;
    }
::-webkit-scrollbar {
    background-color: #FFF;
    height: 2px;
    width: 2px;
    }

content {
    width: 100%;
    height: 100%;
    overflow: auto;

}

#content {
    margin: auto;
    width: 450px;
    height: 110%;
    padding: 10px;
    background-color: #babea5;
    margin-bottom: 0px;
}

.box {
    width: 400px;
    height: 390px;
    background-color: #FFFFFF;
    padding: 15px;
    margin: 10px;
    display: inline-block;
}

.box .header {
    width: 430px;
    height: 420px;
    background-color: #202020;
    margin-left: -15px;
    margin-top: -15px;
    margin-bottom: 50px;

}

.box .icon {
    width: 130px;
    height: 130px;
    border-radius: 130px;
    border: 5px solid #babea5;
    margin-left: -20px;
    position: absolute;
    margin-top: 310px;
}

.nametag {
    width: 270px;
height: 100px;
    padding: 70px
 background-color: #A0A0A0;
    padding-left: 90px;
    color: #a1394e;
    text-align: left;
    position: absolute;
    margin-top: 331px;
margin-left: 50px;
font-family: 'Cookie', cursive;
text-shadow: 1px 1px 1px #eee;
    font-size: 82px;
    font-style: bold;
    letter-spacing: 1px;
}

.info {
    width: 400px;
    height: auto;
}

.general {
    font-family: 'cambria';
    font-size: 8px;
    font-style: italic;
    text-transform: uppercase;
    color: #202020;
    columns:100px 2;
    -webkit-columns:102px 2;
    -moz-columns:100px 2;
    margin-left: 80px;
    margin-top: -15px;
    margin-bottom: 10px;


}

.gen {
    border-left: 10px solid #202020;
    padding-left: 10px;
    margin-bottom: 3px;
    display: block;
}

.desc {
    width:400px;
    display: block;
    height: 150px;
    overflow: auto;
    font-family: cambria;
    font-size: 10px;
    color: #303030;
    margin-bottom: 10px;
}

.desc:first-letter {
    float: left;
    font-family: 'cambria';
    font-size: 24px;
    margin-right: 5px;
    border: 3px double #eee;
    padding: 0px 10px 1px 10px;
    font-style: italic;
    background-color: #a1394e;
    color: #eee;
}

.links {
    display: block;
    height: auto;
}

.links a {
    display: inline-block;
    padding: 5px;
    width: 188px;
    background-color: #a1394e;
    text-align: center;
    font-family: 'cambria';
    font-size: 10px;
    font-style: italic;
    color: #eee;
    letter-spacing: 1px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.links a:hover {
    color: #202020;
    background-color: #fff;
}


#leftbar {
    width: 100%;
    height: auto;
    bottom: 0px;
    margin: auto;
    position: fixed;
}

.all {
    margin: auto;
    width: 703px;
    padding: 20px;
    background-color: #101010;
}

.lefttitle {
    font-family: arial black;
    font-weight: 700;
    color: #fff;
    font-size: 24px;
    letter-spacing: -2px;
    text-align: center;

}

.llinks {
    display: block;
    width: 220px;
    margin: auto;
    height: auto;
    margin-top: 10px;
    columns:100px 2;
    -webkit-columns:102px 2;
    -moz-columns:100px 2;
    margin-bottom: 10px;
}

.llinks a {
    border-left: 10px solid #aaa;
    padding-left: 10px;
    margin-bottom: 3px;
    display: block;
    font-family: 'cambria';
    font-size: 8px;
    font-style: italic;
    text-transform: uppercase;
    color: #ccc;
    letter-spacing: 1px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.llinks a:hover {
    background-color: #fff;
    color: #303030;
    border-left: 10px solid #fff;
}

</style>
<body>
<content>

<div id="content">

<!---  START COPYING BOX CODE HERE  ---->
    <div class="box">
    <div class="header" style="background-image:url('http://i66.tinypic.com/653jwg.jpg');">
        <div class="nametag" style="background-image:url('');">Jean Grey</div>
    <div class="icon" style="background-image:url('http://i66.tinypic.com/2eekmko.png');">
    </div>
    </div>

    <div class="info">
    <div class="general">
        <div class="gen" style="border-left: 10px solid #a1394e;">FIRST TAB</div>
        <div class="gen" style="border-left: 10px solid #912f49;">SECOND TAB</div>
        <div class="gen" style="border-left: 10px solid #a3334f;">THIRD TAB</div>
        <div class="gen" style="border-left: 10px solid #b03755;">FOURTH TAB</div>
        <div class="gen" style="border-left: 10px solid #c43d5f;">FIFTH TAB</div>
        <div class="gen" style="border-left: 10px solid #de466c;">SIXTH TAB</div>
    </div>
    <div class="desc">
Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!
I'm the Doctor, I'm worse than everyone's aunt. *catches himself* And that is not how I'm introducing myself. Sorry, checking all the water in this area; there's an escaped fish. Aw, you're all Mr. Grumpy Face today.

I hate yogurt. It's just stuff with bits in. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?

Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?
I am the last of my species, and I know how that weighs on the heart so don't lie to me! Did I mention we have comfy chairs? Heh-haa! Super squeaky bum time! Sorry, checking all the water in this area; there's an escaped fish.

You hit me with a cricket bat.
No… It's a thing; it's like a plan, but with more greatness.
No… It's a thing; it's like a plan, but with more greatness.DESCRIPTION HERE.

    </div>
    </div>
    <div class="links">
        <a href="#">biography post</a>
        <a href="#">character tag</a>
    </div>
    </div>


</content>
</div>
</body>
</html>