<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);

     .pfor {display: none; visibility: hidden;}
    #profile {background-color:;}
    #profile {border:;}
    body
    {overflow-x:hidden;
    background-image:
    url('');
    background-repeat:repeat;
    background-position:;
    background-attachment: fixed;
    background-color:182539;
    font: 0px arial;
    color: black;}
    #profile {background-color: transparent;
    border:0px;
    }
    ::-webkit-scrollbar {
    width: 5px;
    height: 0px;
    background:;
    }

    ::-webkit-scrollbar-thumb {
    background-color:black;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }

    ::selection {
    color: #fff;
    background: #eee;
    }

    a {color:;
    text-decoration: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }

    a:hover {color: black;
    text-decoration: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }

    *{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;
    }

@font-face {font-family: "tinytots";src: url('https://dl.dropboxusercontent.com/s/y0pfz7ndq83n7j7/04B_03_.TTF?dl=1'); format("truetype");}

#whole{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

    #box {
    vertical-align: center;
    position: fixed;
    width:1000;
    left: 550px;
    top: 250px;
    margin: 1px;
    }

    #title-bg {
    background-color:#294061;
    width:500;
    height:55;
    left:0;
    top:0;
    }

    #title {
    position:absolute;
    color:182539;
    font-size:35px;
    font-family: 'Oswald', sans-serif;
    width:500;
    text-align:center;
    left:0;
    top:-5;
    text-transform:uppercase;
    }

    #title2 {
    position:absolute;
    color:182539;
    font-size:15px;
    font-family: 'Open Sans Condensed', sans-serif;
    width:500;
    text-align:center;
    left:0;
    top:35;
    text-transform:uppercase;
    letter-spacing:5px;
    }

    #image {
    position:absolute;
    left:90;
    top:60;
    border:10px solid #294061;
    }

    #navi {
    vertical-align: center;
    text-align: center;
    position: absolute;
    left:0;
    top:59;
    letter-spacing:0px;
    line-height: 10px;
    margin: 1px;
    }

    #navi a {
    padding: 10px;
    width: 40px;
    font-family: courier new;
    font-size: 15px;
    text-transform:uppercase;
    letter-spacing: 1px;
    display: inline-block;
    text-align: center;
    color:182539;
    background-color: #294061;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border:11px solid #294061;
    }

    #navi a:hover {
    background-color:182539;
    color:#294061;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border:11px solid #182539;
    }

    a[data-title]:hover:after {
    content: attr(data-title);
    padding: 10px;
    color:182539;
    background-color: #294061;
    font-size:14px;
    font-family: 'Oswald', sans-serif;
    position: absolute;
    left: 0;
    top: 265;
    white-space: nowrap;
    }

    .content {
    position: absolute;
    color:182539;
    font-size:15px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: justify;
    overflow: auto;
    left:1000;
    top:60;
    height:218;
    width:370;
    background-color: #294061;
    opacity: 0;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    z-index: 1;
    padding: 10px;
    margin: 1px;
    border:10px solid #294061;
    }

    .content:target {
    left:90;
    top:60;
    opacity: .9;
    transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    }

    h1{
    border-bottom:1px solid #182539;
    color:#182539;
    font-size:27px;
    line-height: 27px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: right;
    text-transform:uppercase;
    margin: 0px 5px 5px;
    }

    #credit{
    position:fixed;
    bottom:20;
    right:20;
    }

</style>

<div id="credit">
<a title="Don't remove my credit."><img src="http://i.imgur.com/bP47mYE.png" width="100"></a>
</div>

<div id="box">

<div id="title-bg">
<div id="title">
Topaz
</div>

<div id="title2">
"Play with fire, and you'll get burned.'"
</div>
</div>

<div id="image">
<img src="https://i.pinimg.com/736x/ee/4b/fd/ee4bfd3ec9a3a44fdf158ce1656fb033--gems-jewelry-manga-anime.jpg">
</div>

<div id="navi">

<a href="#one" data-title="tab one">I</a>
<br>
<a href="#two" data-title="tab two">II</a>
<br>
<a href="#three" data-title="tab three">III</a>
<br>
<a href="#four" data-title="tab four">IV</a>
<br>
<a href="#reset" data-title="reset">V</a>
</div>

<div id="one" class="content">
<h1>Stats</h1>
<br> Female
<br> Doesn't Age.
<br> 5'2
<br> Weight: [REDACTED]
<br> Gemstone Child
</div>

<div id="two" class="content">
Fighting style: Bojutsu. Also capable of manipulating fire and spontaneously generating it. While as of right now her control over said powers are overly poor, she is gradually gaining more and more control over them. When she eats, she's recharging both her physical nourishment and her 'fuel reserves' When she runs out of 'fuel', she has to metabolize more<br>

<br>
 </div>

<div id="three" class="content">
Topaz is a sentient gem, just like her relatives, however, is also, likely, one of the most childish, if not, the most childish of the lot. Has a proficiency for fire, and an eidetic memory
<br> [Disclaimer: I do not list her specific attacks, however, passives are listed]
<br> Fireheart: Immune to heat and fire based attacks, unless the heat based attack is a cold one
<br> Phoenixborn, 2: Since she's always on fire mid combat, any wounds she suffers are instantly cauterised, preventing bleeding, and given lengthy periods of time, can even sew severed limbs back on and restore nerves
<br> Font: FFAC0E
</div>

<div id="four" class="content">
OOC Info: Still a WIP, but this is NOT a steven universe character. Expect it and get set on fire. Attempt to rape and get set on fire, even if you're fireproof
</div>



</div>