Profile Layout for chemicalzombie

<div class="chief">
	<br /><br />
<a href="http://vampirefreaks.com/profile_action.php?user=chemicalzombie &amp;friendslist=1">Add Friend</a>
<a href="http://vampirefreaks.com/user_comment.php?user=chemicalzombie &amp;rate=1">Rate &amp; Comment</a>
<a href="http://vampirefreaks.com/gallery/chemicalzombie">Gallery</a>
<a href="http://vampirefreaks.com/journal/chemicalzombie">Journal</a>

<br />
<a href="http://vampirefreaks.com">VF Main</a>
<a href="http://vampirefreaks.com/members/CosmicKarma/CosmicCreations" title="CosmicCreactions ©2015">Credit</a>
<br /><br /><br />
<h1>Navigation</h1>
	</div>

<style>


.overlay {
width: 820px;
height: 600px;
background: #2E2C2A;
position: relative;
padding: 4px;
margin: 0px;
}

.innerbox {
overflow: auto;
border: none;
background: #3D3D3D;
position: absolute;
padding: 4px;

}

#bio {
top: 6px;
left: 6px;
width: 255px;
height: 395px;
}
#about {
top: 6px;
left: 274px;
width: 430px;
height: 180px;
}
#cults {
top: 6px;
left: 717px;
width: 96px;
height: 586px;
}
#likes {
top: 200px;
left: 274px;
width: 207px;
height: 160px;
}
#dislikes {
top: 200px;
left: 496px;
width: 207px;
height: 160px;
}
#music {
top: 375px;
left: 274px;
width: 430px;
height: 218px;
}
#friends {
top: 415px;
left: 6px;
width: 255px;
height: 178px;
}
</style>


<div class="overlay">
<div class="innerbox" id="bio">
<a href="http://vampirefreaks.com/gallery/chemicalzombie"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="fpic" /></a>
<h1>Bio</h1>
<b>Name:</b> Name
<br /><b>Age:</b> Age
<br /><b>Sex:</b> Male/Female/Other
<br /><b>Location:</b> Location
<br /><b>Orientation:</b> Sexual Preference
<br /><b>Relationship:</b> Single/Engaged/Married/Complicated.
<br /><b>Membership:</b> Premium/Free
<br /><b>Occupation:</b> Work/Student/ETC
<br /><b>Quote:</b> Fav. Quote
<br /><br />
<h1>Boyfriend</h1>
<img src="http://i.imgur.com/y4mEB6H.png" alt="" class="fpic" />

</div>
<div class="innerbox" id="about"><h1>About this Hufflepuff</h1>

Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!! Profile infomation goes here!!

<br /><br />
<small>This is small text.</small><br />
 <b>This is bold text.</b><br />
 <u>This is underlined text.</u><br />
 <i>This is italic text.</i><br />
 <s>This is striked text.</s><br />
 This is normal text.<br />
 <a href="">This is a link.</a><br />
 <h1>This is Header 1</h1>
<hr />
<blockquote>
Blockquote looks like this!
</blockquote>

<small>Colors Used:</small>
http://www.colourlovers.com/palette/440537/Darkness_and_Blood
http://www.colourlovers.com/palette/364480/Unexpected_Spellwork

</div>

<div class="innerbox" id="cults"><h1>Cults</h1>
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />
<a href="/cult/CULTNAMEHERE"><img src="http://i.imgur.com/y4mEB6H.png" alt="" class="cmini" /></a><br />


</div>

<div class="innerbox" id="likes"><h1>Likes</h1>

</div>
<div class="innerbox" id="dislikes"><h1>Dislikes</h1>

</div>
<div class="innerbox" id="music"><h1>Music</h1>

</div>
<div class="innerbox" id="friends"><h1>Friends</h1>
<center>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a>
<a href="/USERNAME GOES HERE"><img src="http://i.imgur.com/y4mEB6H.png" class="bestbuds" /></a> </center>



</div>
</div>

<small>Layout is made by CosmicKarma via CosmicCreations © 2015. Layout is best veiwed on Google Chrome with Premium. </small>



<style>

.maintop, .leftnav, .profilename, .profilepages, .topbar, .defaultpic, .thumbnail, .gallery, .videos, .userinfo, .journal_entry, .profile_title, .likes_title, .dislikes_title, .music_title, .buttons1, .buttons2, .buttons3, .friends, .rate, .comment_title, .comments, .tagline, .menu2, .profilepages, .footer_links { display: none; }

</style>

<style>

body, html {
background-color: #020202;
background-image: url('http://i.imgur.com/FCw0T48.png');
background-position: center left;
background-repeat: no-repeat;
background-attachment: fixed;
}
html, div {
font-family: "04b03";
color: #B0B0B0;
font-size: 8px;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
.main {
background-color: # ;
width: 700px;
padding: 4px;
float: right;
}
a:link, .menu2, .menu2 a:link {
color: #FA3232;
font-size: 8pt;
font-family : trebuchet MS;
text-transform: none;
letter-spacing: 0px;
text-decoration: none;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;

}

a:visited, .menu2 a:visited {
color: #FA3232;
font-size: 8pt;
text-transform: none;
font-family : trebuchet MS;
text-transform: none;
letter-spacing: 0px;
text-decoration: none;

}

a:hover, .menu, .menu a:link, .menu a:visited {
color: #FA3232;
font-size: 8pt;
text-decoration: none;
font-family : trebuchet MS;
text-transform: none;
letter-spacing: 0px;
background: transparent;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;

}
h1 {
color: #FA3232;
text-transform: uppercase;
font-style: normal;
font-family: georgia italic;
letter-spacing: 1pt;
text-align: center;
padding: 0px;
font-weight: lighter;
line-height: 3px;
font-size: 16pt;
margin: 8px;
background: #2E2C2A;
text-shadow: 1px 1px 1px #000;
margin-bottom: 12px;
}
hr {
height: 2px;
margin-top: 2px;
margin-bottom: 2px;
background: #D1C05E;
border: none;
}
small {
color: #B0B0B0;
font-size: 8px;
font-family: "04b03";
text-transform: uppercase;
letter-spacing: 1px;
}
b {
text-transform: uppercase;
font-family: trebuchet MS;
color: #787878;
font-size: 8px;
letter-spacing: 1px;
text-shadow: 0px 0px 0px #000;
}
i {
text-transform: none;
font-family: georgia;
color: #C70000;
font-size: 9px;
letter-spacing: 1px;
}
s {
text-transform: none;
font-family: trebuchet MS;
color: #FA3232;
font-size: 9px;
letter-spacing: 1px;
}
u {
border-bottom: 1px dotted #FA3232;
color: #B0B0B0;
text-transform: none;
font-family: georgia;
font-size: 9px;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #000;
}

blockquote {
background-color: #111;
padding: 10px;
border-left: 6px solid #8C0000;
}

.chief {
top: -10px;
left: 235px;
width: 190px;
background-color: #3D3D3D;
background-image: url(' ');
background-repeat: no-repeat;
background-position: bottom center;
height: 190px;
position: fixed;
text-align: center;
z-index: 999;
padding: 10px;
box-shadow: 0 0 7px #0C1719;
border-bottom: 10px solid #FA3232;
border-radius: 0px 0px 20px 20px;
margin-top: -160px;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
line-height: 120%;
}

.chief:hover {
margin-top: 0px;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
border-bottom: 10px solid #B50000;}


.chief a:link, .chief a:visited {
color: #FA3232;
background: #222;
font-size: 8px;
text-align: center;
letter-spacing: 2px;
font-family: "04b03";
font-weight: lighter;
display: block;
text-transform: uppercase;
margin: 2px;
padding: 3px;
letter-spacing: 2px;
text-decoration: none;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
border-radius: 0px;
 text-shadow: 0px 0px 0px #000;
}

.chief a:hover {
color: #C70000;
font-size: 8px;
text-align: center;
letter-spacing: 4px;
font-family: "04b03";
font-weight: lighter;
background: #222;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
border-radius: 0px;
 text-shadow: 0px 0px 0px #000;
}

::-webkit-scrollbar {
width: 3px;
background: #4E4D49; }

::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background: #B0B0B0; }


.bestbuds {
width: 50px;
height: 50px;
padding: 1px;
border: 0px solid #2A044A;
margin-right: 0px;
background: #B50000;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
}

.fpic {
width: 235px;
height: 100px;
padding: 5px;
margin: 4px;
border: 0px solid #2A044A;
margin-right: 2px;
background: #B50000;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
}

.cmini {
width: 86px;
height: 31px;
padding: 1px;
margin: 1px;
border: 0px solid #2A044A;
margin-top: 2px;
margin-bottom: 2px;
background: #B50000;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
}

</style>