Soul and Blue

</div>

<style>

b {
font-family:'verdana';
font-size:10px;
color:skyblue;
font-weight: normal;
}

i {
color: MediumAquaMarine ;
font-family: 'calibri';
font-variant: small-caps;
font-size:10px;}

u {
color: PaleGreen ;
font-size: 10px;
font-weight: light;
border-bottom: 2px dotted SeaGreen;}


a:link {
text-decoration:
none;
text-shadow: 1px 1px 5px skyblue;
}

a:visited {
text-decoration:
none;
text-shadow: 1px 1px 3px skyblue;
}

a:hover {
text-decoration: bold;
text-shadow: 1px 1px 3px white;}

a:active {
text-decoration:
bold;
text-shadow: 1px 1px 3px skyblue;}

a:link { color: skyblue;
}
a:visited {color: lightblue;
}
a:hover {color: silver;
}
a:active {color: white;
}


.pfor {display: none;}
#profile {
border-style:none;
background-color: Transparent;}

body {
background-color: #FFFFFF;
background-image:url("http://i.imgur.com/WjOH6ki.jpg");
background-size: 1950px;
background-attachment:fixed;
background-position: left top;
background-repeat: no-repeat;
}

.musicbox {
position: fixed;
height: 10px;
left: 800px;
top: 505px;
font-size: 12px;
background-color: skyblue;
border: 5px solid DarkSlateGray;
border-radius: 0px
;padding: 5px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
width:215px;}

#MainIcon{
border: 5px solid DarkSlateGray ;
border-radius: 0px 0px 0px 0px;
background-color: skyblue;
overflow: hidden;
position: fixed;
height: 350px;
width: 225px;
left: 800px;
top: 150px;
}

.Mainbox {position: fixed;
left: 35px;
top: -500px;
height: 373px;
width: 400px;
padding: 1px;
background-color: DimGray;
border: 5px solid DarkSlateGray;
border-radius: 0px 0px 0px 0px;
font-family: Ariel;
font-size: 12px;
text-align: center;
color: white;
text-shadow: 1px 1px 2px black;
overflow: auto;
opacity: 0;
-webkit-transition: all 0.0s ease-in-out;
-moz-transition: all 0.0s ease-in-out;
-o-transition: all 0.0s ease-in-out;
-ms-transition: all 0.0s ease-in-out;
transition: all 0.0s ease-in-out;}

.MainBox:target {
top: 150px;
left:391px;
opacity: 1;
z-index: 9999;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;}

#buttons{
position: fixed;
left: 1040px;
top: 150px;
z-index: 2;
}

#buttons a {display: block;
margin-bottom: 5px;
width: 80px;
height: 20px;
color: teal;
font-family: tahoma;
font-size: 13px;
padding-left: 10px;
background-color: skyblue;
border-top : 5px solid darkslategrey;
border-bottom : 5px solid darkslategrey;
border-left: 5px solid darkslategrey;
border-right: 5px solid darkslategrey;
border-radius: 0px 0px 0px 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#buttons a:hover {background-color: teal;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#ImageScrollOver {
background-color:#transparent;
position:absolute;}

#ImageScrollOut {
background-color:#transparent;
position:absolute;
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;}

#ImageScrollOut:hover {
background-color:#transparent;
position:absolute;
opacity: 1.0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;}

</style>


<div id="buttons">
<a href="#1">Soul</a>
<a href="#2">Blues</a>
<a href="#3">Story</a>
<a href="#4">Relationships</a>
<a href="#5">OOC</a>
</div>


<div id="MainIcon">
<div id="ImageScrollOver">
<img src="http://i.picpar.com/kE0b.jpg" width="225" height="350">
</div>

<div id="ImageScrollOut">
<img src="https://static1.e621.net/data/66/c9/66c95ba8c8d3ab60c0ff537db85d8cc9.png" width="225" height="350">
</div>

</div>


<div id="1" class="MainBox">
<b>TEST GOES IN INbetween this code such isn=waef lawjf oawjfaw;lej f;awjfoi;aew ef;a jwiwoaefj o;aw jl;fjawo;ej fajwefoijawoi;jfe;a wleoiawe f</b><b>
</div>

<div id="2" class="MainBox">
<b>TEST GOES IN INbetween this code such isn=waef lawjf oawjfaw;lej f;awjfoi;aew ef;a jwiwoaefj o;aw jl;fjawo;ej fajwefoijawoi;jfe;a wleoiawe f</b><b>

</div>


<div id="3" class="MainBox">
<b>TEST GOES IN INbetween this code such isn=waef lawjf oawjfaw;lej f;awjfoi;aew ef;a jwiwoaefj o;aw jl;fjawo;ej fajwefoijawoi;jfe;a wleoiawe f</b><b>

</div>


<div id="4" class="MainBox">
<b>Friends and Family</b><br><br>
None Yet
</div>


<div id="5" class="MainBox">
<b>OOC</b><br><br>




Code by <a href="profile.php?user=The+Police+Girl" target="_blank">Seras Victoria</a>
</div></div></center>