Black Canary

<style type="text/css">
.pfor { display: none; }
#profile { background-color: transparent; border: none; }
</style>

<style type="text/css">

body {

background-color: #000000;
background-image: url(http://i.picpar.com/w99.png);
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-size: auto;
font-family: Times New Roman;
font-variant: normal;
font-size: 70%;
color: #666666;}

.Box1{
position:absolute;
bottom: 230px;
left:20px;
height:185px;
width:400px;
border-radius:0px;
background:url('http://33.media.tumblr.com/568647ca8229fc115197a18e132272ab/tumblr_inline_mkqy3aHtxc1qgwf7j.gif');
background-size: 100%;
overflow:hidden;
border:4px solid black;
}

.Box4{
position:absolute;
bottom: 230px;
right:20px;
height:185px;
width:400px;
border-radius:0px;
background:url('http://33.media.tumblr.com/227b7eacbd1adca1313194ada0c8d9ad/tumblr_ml6bjsMB2j1s8k1duo1_500.gif');
background-size: 100%;
overflow:hidden;
border:4px solid black;
}


.Box2{
background:url('http://i.picpar.com/w99.png');
position:absolute;
top: 210px;
left:570px;
height: auto;
width:220px;
border-radius:0px;
overflow:hidden;

}



.Box3{
background-color: #ffffff;
position:absolute;
background-size: 100%;
bottom: 220px;
left:-300%;
height:200px;
width:400px;
border-radius:0px;
overflow:auto;
border:4px solid black;
opacity: 0.0px;
-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; transition: all 0.7s ease-in-out;}

.Box3:target{left:480px; -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; transition: all 0.7s ease-in-out; opacity: 1.0px;}



a.yum, a.yum:link, a.yum:active, a.yum:visited {
background-color: #FEFEFE;
display: circle;
margin: 3px;
font-family: consolas;
font-size: 10px;
height: 20px;
letter-spacing: 2px;
border-radius: 25%;
color: #000;
text-decoration: none;}


a.yum:hover {
display: circle;
margin: 3px;
height: 20px;
background-color: #FEFEFE;
border-radius: 25%;
font-family: consolas;
font-size: 10px;
letter-spacing: 2px;
color: #000000;
text-decoration: none;
}

.poke{
color:#505050;
font-size:12px;
text-align:center;
font-family:pixel;
margin: 2px;
}

.effect{
height:200px;
width:400px;
background-color:#fff;
filter: alpha(opacity=0);
opacity: 0;
border-radius:0px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

 .effect:hover{
border-radius:0px;
filter: alpha(opacity=100);
opacity: 1;
overflow:auto;
}

a.sinnoh:link, a.sinnoh:active, a.sinnoh:visited{
display: block;
float: left;
width: 86px;
margin-left: 7px;
-moz-border-radius: 5px;
border-radius: 2px;
font-family: consolas;
text-decoration: none;
font-size: 10px!important;
letter-spacing: 0px;
background-color: bbb;
color: 383838;
padding: 2px;
text-align: center!important;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

a.sinnoh:hover{background-color:f0e0b8;
color:353535;
text-decoration: none;}

a href {
text-decoration: underline;
font-family:consolas;
color: #505050;
letter-spacing: -1px;
}

u {
text-decoration: underline;
font-family:consolas;
color: #505050;
letter-spacing: -1px;
}

b {
color: #493c23;
font-family:consolas;
text-transform:none;
letter-spacing: 2px;
}

a:active, a:link, a:visited{
color:#464f82;
text-transform:none;
font-family:consolas;
letter-spacing: 1px;
text-decoration:none;
transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}

a:hover{
cursor:help;
color:#260000;
text-decoration:none;
transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}

h1{
font-family: Georgia;
font-size:25;
letter-spacing:1px;
color:#d8a078;
font-style:italic;
font-weight:light;
text-align: center;
text-transform:none;
}






.Name{
position: fixed;
top: 430px;
left: 480px;
color: #FEFEFE;
font-size: 20px;
line-height: 80px;
letter-spacing: 3px;
font-family: lavanderia sturdy;
text-shadow: #800000 2px 3px 4px;

}

::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #a8a8a8;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #a8a8a8;border: 0px ;width: 15px;}


h1 {

position: fixed;
right: 10px;
bottom: 0px;
font-weight: normal;
font-size: 100%;
color: #FFFFFF;}

</style>
<h1>Layout © <a href="http://roleplaychat.org/profile.php?user=Liam+Keeler" target="_blank">real niggaz.~</a></h1>

<div class="Name">"When I was little,<br> I used to think, of the three,<br>Ollie was the toughest. I was wrong."
</div>

<div class="Box2">



<a href="#one" title="Stats" class="yum">001</a>

<a href="#two" title="Powers" class="yum">002</a>

<a href="#three" title="Inventory" class="yum">003</a>

<a href="#four" title="Friends" class="yum">004</a>

<a href="#five" title="History" class="yum">005</a>


<a href="#" title="Reset" class="yum">000</a>
</div>

<div class="Box1">
<div class="effect">
<div class="poke">
 <big><i>E1</i></big>
<br><br>

</div>
</div>
</div>

<div class="Box4">
<div class="effect">
<div class="poke">
 <big><i>E4</i></big>
<br><br>

</div>
</div>
</div>


<div id="one" class="Box3">


<b><i>“Quote or topic.”</i></b>
<br><br>
<br><b>Name:</b>.
<br><b>Alias:</b>.
<br><b>Race:</b>
<br><b>Height:</b> Input needed.
<br><b>Weight:</b> Input needed.
<br><b>Alignment:</b> .
<br><b>Sexuality:</b>.
<br><b>Age:</b>.
<br><b>Relationship:</b> .
<br><b>Born:</b> .
<br><b>Distinct features:</b>.



</div>


<div id="two" class="Box3">

<b><i>“Quote or topic.”</i></b>
<br><br><br>

</div>



<div id="three" class="Box3">


<b><i>“Quote or topic.”</i></b>
<br><br><br>


</div>



<div id="four" class="Box3">
<b><i>“Quote or topic.”</i></b>


</div>



<div id="five" class="Box3">
<b><i>“Quote or topic.”</i></b>


</div>
</div></div></div></div>