Metus Profile Layout 00

<div class="boxforthenav">
<a href="#1" class="navlink">About</a>
<a href="#2" class="navlink">Likes</a>
<a href="#3" class="navlink">Hates</a>
<a href="#4" class="navlink">Music</a>
<a href="#5" class="navlink">Cults</a>
<a href="/lipsofsweetdeceit" class="navlink">©</a>
</div>
</div>

<center>
<div class="graphic">
<img src="http://i.imgur.com/0uj6Zne.png" />

<div id="anchor">
<a name="1"></a>
<div class="section">
<center><h1>Let the Story Begin:</h1></center>

About Section

<b> This is Bold </b> <p>
<i> This is Italic</i> <p>
<s> This is Strike Through </s> <p>
<u> This is underline </u><p>

<p> <a href="link"> This is link </a> <p>

<h3> This is header h3 </h3>

About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section About Section


</div>


<a name="2"></a>
<div class="section">
<h1>My Likes</h1>
<p>

</div>

<a name="3"></a>
<div class="section">
<h1>My Dislikes</h1>
<p>
</div>

<a name="4"></a>
<div class="section">
<h1>Favourite Music</h1>
info
</div>

<a name="5"></a>
<div class="section">
<h1> Cults to Join</h1>
<p>
</div>





</div>

<div class="innerbox" id="box3">
<h1> This is Me:</h1>
<p><img src="link" class="me" />

</div>


<div class="top">
<a href="/vfmain.php">Home</a> ||
<a href="http://vampirefreaks.com/user_comment.php?user=%20USERNAME HERE&amp;rate=1'%20method='post">Comment/Rate Me</a> ||
<a href="http://vampirefreaks.com/profile_action.php?user=USERNAME">Friend Me?</a> ||
<a href="http://vampirefreaks.com/gallery/USERNAME HERE"> My Gallery</a> ||
<a href="http://vampirefreaks.com/journal/USERNAME HERE">My Journal</a>

</div></div>

<style>

.tagline, .commenticon, .friends, comment_title, .rate, .comment, .journal_entry, .buttons1, .buttons2, .buttons3, .profile_title, .dislikes_title, #menu0, .likes_title, .music_title, .gallery, table.userinfo, table.topbar, .defaultpic, .thumbnail, table.leftnav, .comments, .lists, table.comments, .profilepages, .leftnav, .maintop,.footer_links, h2 {display:none}

html, body {
background-image: url('http://aplimaging.com/wp-content/themes/engineering-and-machinering/dark-grey-background-pattern-612.jpg');
background: #black;
background-attachment: fixed;
background-position: top left;
background-repeat: repeat;
}

.graphic {
background-color: #7255b4;
border: 6px solid #322041;
width: 650px;
height: 603px;
left: 0px;
top: 0px;
color: #170526;
font-family: Arial;
text-align: justify;
position: relative;
margin-bottom: 5px;
}

.layout {position:absolute}

.boxforthenav {
position: absolute;
top: 385px;
left: 1080px;
width: 110px;
height: 450px;
background-color: none;
overflow: hidden;
}

.navlink:link, .navlink:active, .navlink:visited {
display:inline-block;
width: 50px;
height: 10px;
padding: 5px;
border: 3px solid #322041;
background: #7255b4;
font-size:11px;
line-height: 10px;
text-transform:lowercase;
text-align: center;
color: #fff;
font-family:trebchet ms;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

.navlink:hover {
width: 100px;
height: 10px;
background-color: #A887C5;
color: #fff;
border: 3px solid #322041;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

.top {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #A887C5;
height: 15px;
box-shadow: 0px 0px 4px #000;
text-align: right;
padding-bottom: 4px;
padding-top: -2px;
border-bottom: 5px solid #322041;
-webkit-transition: all .8s linear; -moz-transition: all .8s linear; -o-transition: all .8s linear}

.top a:link, .top a:visited, .top a:active {
display: inline;
text-decoration: none;
font-family: Arial;
text-transform: uppercase;
font-weight: normal;
font-size: 11px;
text-align: right;
line-height: 20px;
color: #38105C;
background-color: transparent;
margin-right: 10px;
padding-top: 3px;
-moz-transition: color 1s ease; -webkit-transition: color 1s ease; -o-transition: color 1s ease;
}

.top a:hover {
background-color: transparent;
color: #8B43CA;
-moz-transition: color 1s ease; -webkit-transition: color 1s ease; -o-transition: color 1s ease;}

.section {
overflow: auto;
top: 305px;
left: 0px;
width: 437px;
height: 295px;
}

#anchor {
top: 305px;
left: 207px;
width: 435px;
height: 290px;
position: absolute;
overflow: hidden;
padding: 3px;
background: transparent;
border: none;
text-align: justify;
color: #170526;
position: absolute;
}

#box3 {
position: absolute;
overflow: auto;
padding: 3px;
background: transparent;
border: none;
text-align: center;
top: 305px;
left: 0px;
width: 200px;
height: 290px;
color: transparent;
}

h1 {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
background: #A887C5;
border: 4px solid #322041;
width: auto;
height: 21px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-shadow: none;
letter-spacing: 2px;
font: 9pt Arial;
color: #170526;
}

h1:first-letter {
   font-family: Monotype Corsiva;
 font-size: 20px;
  text-transform: normal;
  font-style: italic;
  font-weight: lighter;
text-shadow: 0px -1px 0px #000;
 color: #9229EE;
display:658F3B;
  }

hr { background-color: #322041; height: 2px; border: none; }

 h3 {display:block;
color: #170526;
border-bottom: 2px solid #A887C5;
text-align: center;
font-family: Arial;
font-weight: lighter;
text-shadow: 0px -1px 0px #000;
font-size: 16px;
letter-spacing: 2px;
text-transform: lowercase;
font-style:italic;
background-color: transparent;
margin: 3px;
padding:1px; }

b {
color: #322041;
font-weight: bold;
font: 10pt Arial;
letter-spacing: 5px;
}

i {
text-decoration: italic;
text-shadow: none;
font: 10pt Arial;
text-shadow: 0px -1px 0px #000;
color: #322041;
font-style: italic;
}

u {
border-bottom: 2px solid #322041;
text-decoration: underline;
text-transform: bold;
text-shadow: 0px 2px 0px #000000
text-shadow: none;
font: 10pt Arial;
color: #856A9D;
}

s {
text-decoration: strike;
text-transform: uppercase;
text-shadow: -1px 1px 0px #000000
font: 10pt Arial;
color: #38105C;
}

a:link, a:visited, a:active {
color: #38105C;
font-family: Arial;
font-size: 11px;
line-spacing: 2px;
font-weight: none;
text-transform: none;
-moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 3.5s ease;
}

a:hover {
color: #A887C5;
line-spacing: 2px;
font-family: Arial;
font-size: 11px;
background: transparent;
-moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease;
}


.me {
width: 180px;
height: 220px;
border: 3px solid #38105C;
-moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease;
}

.me:hover {
width: 180px;
height: 220px;
filter: alpha(opacity=70); -moz-opacity:.70; opacity:.70;
-moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; border: 3px solid #322041;

}

::-webkit-scrollbar {
width: 10px;
height: 10px;
border: none;
}
::-webkit-scrollbar-button: start: decrement
::-webkit-scrollbar button: end: increment {
display: block;
height: 3px;
background-color: #322041;
}

::-webkit-scrollbar-track-piece {
background-color: #322041;
-webkit-border-radius: 1px solid black;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px; }

::-webkit-scrollbar-thumb:vertical {
height: 100px;
background-color: #A887C5;
border: 1px solid black;
-webkit-border-radius: 0px; }

::-webkit-scrollbar-thumb: horizontal {
width: 100px;
background-color: transparent;
border: 1px solid black;
-webkit-border-radius: 0px;
}


</style>