Claudio Re-Vamped

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

<style type="text/css">
body {
font-family: arial narrow;
font-size: 10px;
background-color: #857D79;
background-image: url('');
background-attachment: fixed;
background-position: fixed;
background-repeat: repeat;
text-align: justify;
color: #888888;
cursor: url('http://cur.cursors-4u.net/cursors/cur-6/cur567.cur');
}

b, strong {font-family:'century gothic'; font-variant: small-caps; font-size:15px; color: #be8c78; font-weight:normal; letter-spacing: -1px;}
i {color: #666666; font-family: 'calibri'; font-size:8pt; letter-spacing:0px}
u {color: #666; font-size: 12px; font-weight: light; letter-spacing: 0px; word-spacing: 6px; font-family:Romans; text-transform: normal; font-weight: normal; text-align: center; border-bottom: 1px dotted #889e9f;}
s {color: #99D6FF; font-size: 11px; font-weight: light; letter-spacing: 0px; font-family:Romans; text-transform: normal; text-decoration: none; font-weight: normal; text-shadow: #FF99D6 0px 0px 1px;}
big {color: #CCCCCC; font-size: 14px; font-weight: light; letter-spacing: 0px; font-family:Romans; text-transform: normal; text-decoration: none; font-weight: normal; text-align: center; Text-shadow: #DED6AA 0px 0px 1px;}
small {color: #555555; font-size: 11px; font-weight: light; letter-spacing: -1px; font-family:Romans; font-variant: small-caps; text-transform: lowercase; text-decoration: none; font-weight: normal; text-align: center;}

::-webkit-scrollbar-button:vertical:{background-color: #212121;
-moz-border-radius: 0px 0px 0px 0px;
border-radius:0px 0px 0px 0px;}
::-webkit-scrollbar-thumb:vertical {background-color:#212121; height:20px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius:0px 0px 0px 0px;}
::-webkit-scrollbar-thumb:horizontal {background-color:#212121; height:20px !important;
-moz-border-radius: 0px 0px 0px 0px;
border-radius:0px 0px 0px 0px;}
::-webkit-scrollbar { height:20px; width: 3px; background-color:transparent;}

@import url(http://fonts.googleapis.com/css?family=lavanderia sturdy);

#line{
position:fixed;
background-image: url('http://i.picpar.com/vnw.png');
background-attachment: fixed;
background-position: fixed;
background-repeat: repeat;
z-index: 100;
left: 0px;
height: 100%;
width: 90px;
top: 0px;
z-index: 9;
border-right: 5px Solid #7D695D;
background-color: #212121;
}

#line2{
background-color: #BAAE96;
height: 100%;
width: 5px;
top: 0px;
left: 95px;
position: fixed;
z-index: 150;
}

#line3{
background-color: #7B564E;
height: 100%;
width: 5px;
top: 0px;
left: 100px;
position: fixed;
z-index: 150;
}

#Poke{
position: fixed;
top: 420px;
left: 100px;
width: 250px;
height: 120px;
background-color: #EDEDEE;
border: #7B564E 4px solid;
z-index: 200;
}

.box {
position: fixed;
left: -305px;
top: 550px;
width: 750px;
height: 420px;
padding: 5px;
color: #212121;
background-color: transparent;
opacity: 0;
transition: all 0.5s ease-in-out;
-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;
z-index: 200;
}

.box:target {
top: 550px;
left: 90px;
opacity: 1;
transition: all 0.5s ease-in-out;
-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;
z-index: 200;
}

.imagine{
position: absolute;
width: 250px;
height: 105px;
padding: 5px;
color: #444444;
font-family: verdana;
font-variant: small-caps;
text-align: justify;
font-size: 10px;
line-height: 8px;
overflow: auto;
border: 3px Solid #7D695D;
background-color: #EDEDEE;
z-index: 200;
opacity: 1;
}

#Img{
position: fixed;
background-image:url("http://i.picpar.com/try.png");
background-repeat: no-repeat;
background-size: 250px 350px;
top: 50px;
left: 97px;
width: 250px;
height: 350px;
background-color: #EDEDEE;
border: #BAAE96 4px solid;
z-index: 200;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

#Img:hover{
position: fixed;
background-image:url("http://i.picpar.com/wry.png");
background-repeat: no-repeat;
background-size: 250px 350px;
top: 50px;
left: 97px;
width: 250px;
height: 350px;
background-color: #EDEDEE;
border: #BAAE96 4px solid;
z-index: 200;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

.image {
opacity: 0;
width: autopx;
height: 350px;
background-color: #EDEDEE;
text-align: justify;
overflow: auto;
-ms-transition: opacity .8s linear;
-moz-transition: opacity .8s linear;
-o-transition: opacity .8s linear;
-webkit-transition: opacity .8s linear; }

.image:hover {
opacity: 0.9; }

.text {
line-height: 1.5;
padding-top: 0px;
margin-left: 1px;
margin-top: 0px;
font-family: verdana;
font-variant: small-caps;
font-size: 10;
color: black;
text-align: justify; }

.snow {
margin-top: 1px;
height: 80px;
width: 80px;
margin-left: 3px;
margin-top: 21px;
border: #965445 2px solid;
opacity: 0.7;
}

.snow:hover {
margin-top: 1px;
height: 80px;
width: 80px;
margin-left: 3px;
margin-top: 21px;
border: #965445 2px solid;
opacity: 0.9;
}

#info {
position: fixed;
left: 105px;
top: 50px;
width: 250px;
height: 358px;
border-right: 3px solid #495258;
background-color: transparent;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
z-index: 15;
}

#info:hover {
position: fixed;
padding-left: 250px;
border-right: 4px solid #495258;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}

#info p {
margin: 10px;
padding: 5px;
font-family: verdana;
font-variant: small-caps;
text-align: justify;
font-size: 10px;
color: #212121;
background-color: #f0f0f0;
}

#Title{
position: fixed;
top: -10px;
left: 170px;
color: #FEFEFE;
font-size: 55px;
line-height: 80px;
letter-spacing: 3px;
font-family: lavanderia sturdy;
text-shadow: #7B564E 7px 5px 10px;
}

a {
color: #965445;
text-decoration: none;
}

a:hover {
color: #888888;
text-decoration: none;
cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur');
}

#credit{
position:fixed;
bottom:0px;
right:0px;
z-index:450;
}

</style>

<div id="title">claudio.</div>

<div id="line">
<a href="profile.php?user=Bee" target="_blank" title="description here."><img src="http://i.picpar.com/wPC.jpg" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
<a href="profile.php?user=" target="_blank" title="description here."><img src="http://placehold.it/80x80" class="snow"></a>
</div>

<div id="line2"></div>
<div id="line3"></div>

<div id="img">
<div class="image"><div class="text">
<br>-&; Rule One
<br>-&; Rule Two
<br>-&; Rule Three
<br>-&; Rule Four
<br>-&; Rule Five
<br>-&; Rule Six
<br>-&; Rule Seven
<br>-&; Rule Eight
<br>-&; Rule Nine
<br>-&; Rule Ten
</div></div></div>

<div id="info">
<p>Words here.</p>
</div>

<div id="Poke">
<center>
<a class="nav" href="#one"><img src="http://cdn.bulbagarden.net/upload/9/95/Great_Ball_battle_V.png"></a>
<a class="nav" href="#two"><img src="http://cdn.bulbagarden.net/upload/9/95/Great_Ball_battle_V.png"></a>
<a class="nav" href="#three"><img src="http://cdn.bulbagarden.net/upload/9/95/Great_Ball_battle_V.png"></a>
<a class="nav" href="#four"><img src="http://cdn.bulbagarden.net/upload/9/95/Great_Ball_battle_V.png"></a>
<a class="nav" href="#five"><img src="http://cdn.bulbagarden.net/upload/9/95/Great_Ball_battle_V.png"></a>
<a class="nav" href="#six"><img src="http://cdn.bulbagarden.net/upload/9/95/Great_Ball_battle_V.png"></a>
</center>
small icons here.
<br><b>bold</b> <i>italic</i> <u>underline</u> <strike>strike through</strike> <big>big text</big> <small>small text</small> <a href="" target="_blank">Link.</a>
</div>

<div id="one" class="box">
<div class="imagine">
<img src="http://www.serebii.net/xy/pokemon/466.png" width="100" height="100" align="left" title="WIP Storytime."></img><br>
<font style=float:left>Name</font> <font style=float:right>Elisynne</font><br>
<font style=float:left>Gender</font> <font style=float:right>Female</font><br>
<font style=float:left>Type</font> <font style=float:right>Dragon</font><br>
<font style=float:left>Held Item</font> <font style=float:right>Everstone</font><br>
<font style=float:left>N.Number.</font> <font style=float:right>#148</font><br>
<font style=float:left>Abilities</font> <font style=float:right>Shed Skin </font><br> <font style=float:right> Marvel Scale</font><br><br>
<center><i>Moveset goes down here!</i></center>
</div></div>

<div id="two" class="box">
<div class="imagine">
<img src="http://www.serebii.net/xy/pokemon/466.png" width="100" height="100" align="left" title="WIP Storytime."></img><br>
<font style=float:left>Name</font> <font style=float:right>Elisynne</font><br>
<font style=float:left>Gender</font> <font style=float:right>Female</font><br>
<font style=float:left>Type</font> <font style=float:right>Dragon</font><br>
<font style=float:left>Held Item</font> <font style=float:right>Everstone</font><br>
<font style=float:left>N.Number.</font> <font style=float:right>#148</font><br>
<font style=float:left>Abilities</font> <font style=float:right>Shed Skin </font><br> <font style=float:right> Marvel Scale</font><br><br>
<center><i>Moveset goes down here!</i></center>
</div></div>

<div id="three" class="box">
<div class="imagine">
<img src="http://www.serebii.net/xy/pokemon/466.png" width="100" height="100" align="left" title="WIP Storytime."></img><br>
<font style=float:left>Name</font> <font style=float:right>Elisynne</font><br>
<font style=float:left>Gender</font> <font style=float:right>Female</font><br>
<font style=float:left>Type</font> <font style=float:right>Dragon</font><br>
<font style=float:left>Held Item</font> <font style=float:right>Everstone</font><br>
<font style=float:left>N.Number.</font> <font style=float:right>#148</font><br>
<font style=float:left>Abilities</font> <font style=float:right>Shed Skin </font><br> <font style=float:right> Marvel Scale</font><br><br>
<center><i>Moveset goes down here!</i></center>
</div></div>

<div id="four" class="box">
<div class="imagine">
<img src="http://www.serebii.net/xy/pokemon/466.png" width="100" height="100" align="left" title="WIP Storytime."></img><br>
<font style=float:left>Name</font> <font style=float:right>Elisynne</font><br>
<font style=float:left>Gender</font> <font style=float:right>Female</font><br>
<font style=float:left>Type</font> <font style=float:right>Dragon</font><br>
<font style=float:left>Held Item</font> <font style=float:right>Everstone</font><br>
<font style=float:left>N.Number.</font> <font style=float:right>#148</font><br>
<font style=float:left>Abilities</font> <font style=float:right>Shed Skin </font><br> <font style=float:right> Marvel Scale</font><br><br>
<center><i>Moveset goes down here!</i></center>
</div></div>

<div id="five" class="box">
<div class="imagine">
<img src="http://www.serebii.net/xy/pokemon/466.png" width="100" height="100" align="left" title="WIP Storytime."></img><br>
<font style=float:left>Name</font> <font style=float:right>Elisynne</font><br>
<font style=float:left>Gender</font> <font style=float:right>Female</font><br>
<font style=float:left>Type</font> <font style=float:right>Dragon</font><br>
<font style=float:left>Held Item</font> <font style=float:right>Everstone</font><br>
<font style=float:left>N.Number.</font> <font style=float:right>#148</font><br>
<font style=float:left>Abilities</font> <font style=float:right>Shed Skin </font><br> <font style=float:right> Marvel Scale</font><br><br>
<center><i>Moveset goes down here!</i></center>
</div></div>

<div id="six" class="box">
<div class="imagine">
<img src="http://www.serebii.net/xy/pokemon/466.png" width="100" height="100" align="left" title="WIP Storytime."></img><br>
<font style=float:left>Name</font> <font style=float:right>Elisynne</font><br>
<font style=float:left>Gender</font> <font style=float:right>Female</font><br>
<font style=float:left>Type</font> <font style=float:right>Dragon</font><br>
<font style=float:left>Held Item</font> <font style=float:right>Everstone</font><br>
<font style=float:left>N.Number.</font> <font style=float:right>#148</font><br>
<font style=float:left>Abilities</font> <font style=float:right>Shed Skin </font><br> <font style=float:right> Marvel Scale</font><br><br>
<center><i>Moveset goes down here!</i></center>
</div></div>
<div id="credit">
<img src="http://i1267.photobucket.com/albums/jj547/xdevilrose/Photoshop/--devilrose2.png">
</div>