<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Parisienne|Arvo|Oswald|Italianno);

.pfor {display: none;}
body {background-color: #0C0808;}

#name {
position: fixed;
left: 0%;
top: 0%;
height: 60px;
width: 250px;
text-align: center;
font-family: 'Arial', Arial;
font-size: 40px;
color: #813D16;
background-color: transparent;
overflow: hidden;}

#title {
position: fixed;
right: 0%;
top: 95%;
height: 60%;
width: 450px;
text-align: center;
font-family: 'Arvo', serif;
font-size: 45px;
color: #813D16;
background-color: transparent;
overflow: hidden;}

#sidebar {
position:absolute;
left: 0%;
bottom: 0%;
height:1%;
width: 78%;
background-color:#AB6239;
border: 3px solid #FFC8AA;
z-index:-1;}

#botimage {
position:absolute;
left: -35px;
bottom:0px;
height: 350px;
width: 350px;
background:url('http://38.media.tumblr.com/d16dca59524011c89bb8ac1377069c38/tumblr_n04zd3j4KD1sjn51ko1_500.gif');
background-position:bottom;
background-size:100%;
background-color: transparent;
background-repeat:no-repeat;
z-index: 1;
overflow: hidden;}

.detail { background-color: #817F7F;
width: 400px;
height:300px;
left: 550px;
top:200px;
opacity: 0;
overflow: auto;
padding: 5px;
position: fixed;
pointer-events: none;
font-family: 'Arvo', serif;
color:#FFC8AA;
line-height:18px;
font-size: 14px;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
 -ms-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in; }


.detail:target {width: 400px;
height:300px;
left: 550px;
top:200px;
opacity: 1;
pointer-events: auto;
border: 3px solid #AB6239;}

.content {
width: 100%; height: 100%;}

h3{
border-bottom: 2px solid #AB6239;
color:#FFC8AA;
font-size:24px;
line-height:25px;
font-family: 'Corbel';
text-align: center;
margin: 0px 5px 5px;
text-shadow: 1px 0px 0px #571F00,
0px 1px 0px #571F00,
-1px 0px 0px #571F00,
0px -1px 0px #571F00,
0px 0px 20px #571F00;}


#nav {
position: fixed;
top: 200px;
right: 600px;
height: 150px;
width: 60px;}

a:link, a:visited{
background-color:#817F7F;
display: block;
width: 60px;
margin :10px;
padding: 4px;
border: 3px solid #B3AEAE;
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
}

a:hover{
background-color:#817F7F;
width: 80px;
padding: 4px;
border: 3px solid #B3AEAE;
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
}

</style>

 <div id="nav">
 <a href="#one"></a>
 <a href="#two"></a>
 <a href="#three"></a>
 <a href="#four"></a>
<a href="#reset"></a>
 </div>

<div id="botimage"></div>

<div id="sidebar"></div>


<div id="name">Bailey</div>

<div id="title">Houndoom #229</div>


<div id="one" class="detail" class="content"> <h3>Basic Information</h3>

Name: Bailey<br>
Gender: ♂<br>
Trainer: N/A<br>
Zodiac: ♌<br>
Race: Houndoom | Doberman<br>
Age: ?<br>
Orientation: Heterosexual <br>
Type: <img src="https://www.serebii.net/pokedex-bw/type/fire.gif"> <img src="https://www.serebii.net/pokedex-bw/type/dark.gif"> <br>
Height: 5'2" | 1.57 CM<br>
Weight: 98.2 LBS | 44.45 KG KG</div>

<div id="two" class="detail" class="content"> <h3>PKMN Combat</h3><br>

--Passive--<br>
<br>
Flash Fire<br>
<br>
--Skills--<br>
<br>
Nasty Plot <br>
Fire Blast<br>
Dark Pulse<br>
Flame charge<br></div>

<div id="three" class="detail" class="content"> <h3> Background</h3>Test 3</div>

<div id="four" class="detail" class="content"> <h3> Out of Pokemon</h3>Test 4</div>