For Jon

<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;}

#pictureone {
position: fixed;
left: -30px;
top: 0px;
margin: 25px;
opacity: 0.8;}


#Img{
position: fixed;
background-image:url("http://i57.tinypic.com/voxz47.png");
background-size: 80%;
background-repeat: no-repeat;
top: 10px;
right: 70px;
width: 200px;
height: 200px;
background-color: #000000;
border-top: #0F7A0F 10px solid;
border-left: #0F7A0F 10px solid;
border-right: #354D6F 10px solid;
border-bottom: #354D6F 10px solid;
}

.image {
opacity: 0;
width: 200px;
height: 200px;
background-color: #EDEDEE;
text-align: justify;
overflow: hidden;
-ms-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-webkit-transition: opacity .3s linear; }

.image:hover {
opacity: 0.9; }

.text {
line-height: 1.5;
padding-top: 2px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
font-family: verdana;
font-size: 10;
color: black;
text-align: justify; }

a.dark:link, a.dark:active, a.dark:visited{
background-color: #222;
display: inline-block;
margin: 5px;
width: 75px;
height: 15px;
font-family: verdana;
font-variant: small-caps;
font-size: 10px;
color: #CCC;
text-decoration: none;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
line-height: 21px;
cursor: url('http://cur.cursors-4u.net/cursors/cur-9/cur817.cur');
-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.dark:hover{
background-color: #EDEDED;
color: #74545F;}

a.unknown:link, a.unknown:active, a.unknown:visited{
background-color: #690000;
display: inline-block;
display: centered;
margin-right: 5px;
width: 87px;
height: 20px;
font-family: verdana;
font-variant: small-caps;
font-size: 6.5px;
color: #CCC;
text-decoration: none;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
line-height: 21px;
-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.unknown:hover{
background-color: #EDEDED;
color: #222;}

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

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

#navigation{

position: fixed;
right: 330px;
top: 60px;
opacity: 0.5;
border: 5px solid #ffffff;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation:hover { opacity:1; }

#navigation2{

position: fixed;
right: 520px;
top: 60px;
opacity: 0.5;
border: 5px solid #ffffff;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation2:hover { opacity:1; }

#navigation3{

position: fixed;
right: 710px;
top: 60px;
opacity: 0.5;
border: 5px solid #ffffff;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation3:hover { opacity:1; }

#navigation4{

position: fixed;
right: 88px;
bottom: 300px;
opacity: 0.5;
border: 5px solid #ffffff;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation4:hover { opacity:1; }

#navigation5{

position: fixed;
right: 88px;
bottom: 180px;
opacity: 0.5;
border: 5px solid #ffffff;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation5:hover { opacity:1; }

#navigation6{

position: fixed;
right: 88px;
bottom: 60px;
opacity: 0.5;
border: 5px solid #ffffff;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation6:hover { opacity:1; }

#main{
right:400px;
bottom:100px;
position: fixed;
color: #548695;
font-family: century gothic;
font-variant: small-caps;
text-align: justify;
font-size: 15px;
border-bottom: #0F7A0F 10px solid;
border-right: #0F7A0F 10px solid;
border-left: #354D6F 10px solid;
border-top: #354D6F 10px solid;
background-image: url(http://i.picpar.com/w99.png);}
b, strong {font-family:'verdana'; font-variant: small-caps; font-size:10px; color: #533034; font-weight:normal; margin-left: 10px; letter-spacing: -1px;}
i {color: #666666; font-family: 'calibri'; font-variant: small-caps; font-size:10pt; 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: #820000; font-size: 11px; font-weight: light; letter-spacing: 0px; font-family:Romans; text-transform: normal; text-decoration: none; font-weight: normal; text-shadow: #212121 0px 0px 1px;}
big {color: #444444; font-size: 20px; font-weight: light; letter-spacing: 0px; font-family:Century Gothic; text-transform: normal; text-decoration: none; font-weight: normal; text-align: center; Text-shadow: #533034 0px 0px 1px;}
small {font-size: 25px; font-variant: small-caps; color: #444444; text-transform: normal; letter-spacing: -1px; text-align: right; background-color: none; font-family: century gothic; text-shadow: #533034 2px 3px 4px; margin-top: 5px; margin-bottom: 8px; display: block; padding: 0px; font-weight: normal; line-height: 15px;}
::-webkit-scrollbar-thumb { background-color: transparent; }

::-webkit-scrollbar {width: 4px;}

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 id="pictureone"><img src="http://i61.tinypic.com/90x5wn.png" width="auto" height="auto"></div>

<div id="img">
<div class="image"><div class="text">
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>
<a href="/profile.php?user=" class="dark" target="_blank">Friend</a>

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



<div id="navigation" class="box">

<a href="#01" title="Change this"><img src="http://data.whicdn.com/images/37964277/large.gif" width="175" height="100"></a>
</div>

<div id="navigation2" class="box">

<a href="#02" title="Change this"><img src="http://38.media.tumblr.com/tumblr_lpvur0FjqP1qedhpm.gif"width="175" height="100"></a>
</div>


<div id="navigation3" class="box">


<a href="#03" title="Change this"><img src="http://38.media.tumblr.com/69d19c156ddaebb3ffc3c30f71e311f6/tumblr_n7lmklDjm01tcq3ffo6_500.gif" width="175" height="100"></a>

</div>

<div id="navigation4" class="box">
<a href="#04" title="Change this"><img src="http://33.media.tumblr.com/ec0423e4fadc8bee42e40f821b031b0d/tumblr_mva6rmStR41rwaa64o1_400.gif" width="175" height="100"></a>
 </div>

<div id="navigation5" class="box">
<a href="#05" title="Change this"><img src="https://s-media-cache-ak0.pinimg.com/originals/4d/bc/62/4dbc62c34e58f4764f376252da18f47e.gif" width="175" height="100"></a>

</div>

<div id="navigation6" class="box">
<a href="#06" title="Change this"><img src="http://data.whicdn.com/images/58659231/original.gif" width="175" height="100"></a>

</div>


<div id="main">

<div style="height: 300px; width: 400px; overflow-y: hidden;">
<a name="01"></a>
<div style="height: 300px; width: 390px; overflow: auto;" align="center">

Shit in here.

</div>

<div style="height: 300px; width: 400px; overflow-y: hidden;">
<a name="02"></a>
<div style="height: 300px; width: 390px; overflow: auto;" align="center">

Shit in here.

</div>

<div style="height: 300px; width: 400px; overflow-y: hidden;">
<a name="03"></a>
<div style="height: 300px; width: 390px; overflow: auto;" align="center">

Shit in here.

</div>

<div style="height: 300px; width: 400px; overflow-y: hidden;">
<a name="04"></a>
<div style="height: 300px; width: 390px; overflow: auto;" align="center">

Shit in here.

</div>

<div style="height: 300px; width: 400px; overflow-y: hidden;">
<a name="05"></a>
<div style="height: 300px; width: 390px; overflow: auto;" align="center">

Shit in here.

</div>

<div style="height: 300px; width: 400px; overflow-y: hidden;">
<a name="06"></a>
<div style="height: 300px; width: 390px; overflow: auto;" align="center">

Shit in here.

</div>


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