SINFUL MISFORTUNE LAYOUTS - DIV LAYOUT - ULTRAVIOLENCE.
 
- This layout was created on a 13 inch macbook pro. Sometimes the dimensions are off from one computer to the next, so if things don't look right, just move it to the left or the right a little more (subtract or add from the "margin-left" section)
- If you don't know much about DIVs, please refrain from altering the codes. You will get confused, and I can't guarantee I can help you fix it.
- All sizes are listed on preview images. All psds will work with this layout because it includes a black and white hover option. When you hover over the images, they will appear in color again.
 
Enjoy!
X O - C R Y P T I C


ABOUT ME:


<style>

{ D I V  C O D I N G -- C R Y P T I C }

body {
background-color:343434;
background-image:url("http://i.imgur.com/VLNbNWo.png");
image-repeat:repeat;
image-attachment: fixed;
}

.content{
background-color:transparent;
background-image:url("");
background-position:bottom center;
background-repeat:no-repeat;
width:1100px;
height:500px;
left:50%;
margin-left:-575px;
top:6px;
margin-top:0px;
margin-bottom:0px;
position:absolute;
z-index:0;
padding:0px;
visibility:visible;
color:1b1b1b;
font-size:11px;
font-family:century gothic;
text-aligh:justify;
overflow:hidden;
}


.sidebar{
left: 0%;
top: 0%;
position: absolute; 
width:300px;
height:900px;
margin-left: -5px;
top:-5PX;
background-color: 3e0000;
text-align: center;
overflow: hidden;
position:fixed;
}

.sidebarimage{
left: 0%;
top: 0%;
position: absolute; 
width:250px;
height:150px;
margin-left: 25px;
top:100PX;
background-color: 1b1b1b;
text-align: center;
overflow: hidden;
}

.sidebarinfo{
left: 0%;
top: 0%;
position: absolute; 
width:250px;
height:200px;
margin-left: 25px;
color: 878787;
top:260PX;
background-color: transparent;
text-align: center;
overflow: hidden;
}

.sidebarsmall{
left: 0%;
top: 0%;
position: fixed; 
width:25px;
height:900px;
margin-left:295px;
padding-top:250px;
top:0PX;
background-color:1b1b1b;
text-align: center;
overflow: hidden;
}

.owners{
left: 0%;
top: 0%;
position: absolute; 
width:246px;
height:296px;
margin-left:425px;
top:200PX;
background-color: 1b1b1b;
text-align: left;
overflow: auto;
border: 1px solid #212121;
padding:2px;
}


.highrec{
left: 0%;
top: 0%;
position: absolute; 
width:250px;
height:120px;
margin-left:685px;
top:200PX;
background-color: 1b1b1b;
text-align: center;
overflow: hidden;
border: 1px solid #212121;
}

.premades{
left: 0%;
top: 0%;
position: absolute; 
width:250px;
height:75px;
margin-left:685px;
top:330PX;
background-color: 1b1b1b;
text-align: center;
overflow: auto;
border: 1px solid #212121;
}


.rpgs{
left: 0%;
top: 0%;
position: absolute; 
width:250px;
height:85px;
margin-left:685px;
top:415PX;
background-color: 1b1b1b;
text-align: center;
overflow: auto;
border: 1px solid #212121;
}


.updates{
left: 0%;
top: 0%;
position: absolute; 
width:250px;
height:180px;
margin-left:945px;
top:200PX;
background-color: 1b1b1b;
text-align: center;
overflow: auto;
border: 1px solid #212121;
}


.credits{
left: 0%;
top: 0%;
position: absolute; 
width:250px;
height:80px;
margin-left:945px;
top:390PX;
background-color: 1b1b1b;
text-align: center;
overflow: auto;
border: 1px solid #212121;
}


.music{
left: 0%;
top: 0%;
position: absolute; 
width:250px;
height:20px;
margin-left:945px;
top:480PX;
background-color: 1b1b1b;
text-align: center;
overflow: auto;
border: 1px solid #212121;
}


{ T E X T  C O D I N G -- C R Y P T I C }

p, div, table, tr, td, font, br {      
font:11px arial narrow;     
line-height:9px;  
letter-spacing:0px;     
text-transform:none;       
color:787878; }    

#title span {
color: #a1a1a1;
}      

b, strong {   
color: 420000 !important;    
font: 11px tahoma;  
text-transform: uppercase;
font-weight: normal;}        

I {
font: 11px monotype corsiva; 
text-transform:lowercase; 
color:e2e2e2; 
line-height:10px; 
letter-spacing: 2px;}  

u {
font-family: tahoma; 
font-size: 7px; 
color:878787; 
line-height: 9px; 
font-weight:normal; 
text-transform: uppercase; 
letter-spacing: 2px; 
border-bottom: 1px dotted #323232;}

h1{ 
font-family:arial black; 
color:1b1b1b; 
font-size: 10px; 
text-align: center; 
text-transform: uppercase; 
font-weight: normal; 
line-height: 8px; 
background-image:url("http://i.imgur.com/XUsER0h.png");
margin:1px; 
padding:0px; } 

h2{ 
font-family:arial black; 
color:454545; 
font-size: 20px; 
text-align: center; 
text-transform: uppercase; 
font-weight: normal; 
line-height: 17px; 
margin:1px; 
padding:0px;
border-right: 40px solid #676767;
border-left: 40px solid #676767;
border-radius: 10px;
width: 50%; }         

h3{
font-family: arial black; 
color:676767; 
font-size: 10px; 
text-align: left; 
text-transform: 
uppercase; 
font-weight: normal; 
line-height: 8px; 
margin:5px;
margin-left:2px;
padding-left:30px; 
letter-spacing: 5px;
border-left: 70px solid #420000;}

h4{
font-family: arial black; 
color:565656; 
font-size: 8px; 
text-align: left; 
text-transform: uppercase; 
font-weight: normal; 
text-align:center;
line-height: 9px; 
padding-left:0px; 
letter-spacing: 5px;
background-color:000;}

a.first, a.first:link, a.first:active, a.first:visited { 
font-family:tahoma; 
font-size:7px;
line-height:15px; 
color:ffffff; 
font-weight: normal;
text-decoration:none; 
text-transform:uppercase; 
background-color:3e0000; 
text-align:center;   
display:inline-block; 
margin-bottom:2px; 
width: 15px;
height: 15px;
border-radius: 400px/400px; 
-webkit-transition: all 0.9s ease-out; 
-moz-transition: all 0.9s ease-out; 
transition: all 0.9s ease-out; }  

a.first:hover { 
background-color:2e2e2e;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);}


a.second, a.second:link, a.second:active, a.second:visited { 
font-family:tahoma; 
font-size:7px; 
color:a3a3a3; 
font-weight: normal;
text-decoration:none; 
text-transform:uppercase; 
background-color:212121 ; 
text-align:center;   
display:block; 
margin-bottom:1px;
letter-spacing: 5px;
line-height: 10px;
-webkit-transition: all 0.9s ease-out; 
-moz-transition: all 0.9s ease-out; 
transition: all 0.9s ease-out; }  

a.second:hover { 
font-family:tahoma;
background-color:434343;
font-size:7px;
line-height: 10px;}     

a:link, a:active, a:visited, a:link b, a:active b, a:visited b {   
font-family:tahoma; 
font-size:8px;  
font-weight:normal;   
letter-spacing:0px;   
line-height:10px;   
text-transform:uppercase;  
text-decoration:none;   
color:a2a2a2;  
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}    

a:hover, a:hover b {     
font-size:8px;   
font-weight:normal;   
letter-spacing:0px;
line-height:10px; 
 text-transform:uppercase;   
text-decoration:none; 
color:390000; }     


 textarea, input, select {   
font:8pt tahoma !important;   
text-transform: none;  
letter-spacing: 0px;   
color:4b252a;     
background-color: transparent;  
border:0px;   
width: 300px;  
overflow:auto;   
line-height: 100%;}  


{ M I S C  C O D I N G -- C R Y P T I C }


img{
-webkit-filter: Grayscale(100%); 
-webkit-transition-duration: 0.8s; 
-moz-transition-duration:0.8s; 
transition-duration:0.8s; 
-o-transition-duration:0.8s;}

img:hover{
-webkit-filter: Grayscale(0%); 
-webkit-transition: all 0.5s ease-out; 
-moz-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;}

::-webkit-scrollbar-thumb {
height:auto;
background-color: #323232;
border:2px solid #1b1b1b;
}

::-webkit-scrollbar {
height:9px;
width:9px;
background-color: #a1a1a1;
border:4px solid #1b1b1b;
}


{ H I D E  C O D E S -- C R Y P T I C }

table table div form {display:inline !important;}
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,.btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
table div div{visibility:hidden;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
body div div form {display:none !important;}div div div select {position:absolute !important;  margin-left:-1000px !important; left:0px !important; display:none !important; }div div table div {display:none;} div div table div {display:none;} div form, .mslogo, div ul {display:none!important;}
div div, div td {background-color:transparent; background-image:none!important;}
div.profileWidth {margin-top: -30px !important;}div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}div.profileWidth div.clearfix, i i i, 
div.profileWidth div div {filter:none; opacity:0.9999}div.profileWidth div.clearfix {position:relative; top:30px}
div div select, div div form {display:none !important;}div div table div {display:none;} .clearfix table div div {display:block;} 
.profile, div ul {display:none !important;}

</style>




LIKE TO MEET:




<div class="content">
</div>
<div class="sidebar">
</div>


<div class="sidebarimage">
<img src="http://i.imgur.com/XNakjzJ.png">
</div>


<div class="sidebarinfo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis nibh risus. Sed vulputate arcu laoreet, suscipit massa quis, mattis dui. Nunc sollicitudin mattis volutpat. Donec rutrum metus eros, et ultricies turpis venenatis sed. Duis mollis finibus sapien finibus gravida. Integer neque ipsum, placerat ut accumsan id, dapibus at massa. Pellentesque consequat risus vel scelerisque iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

</div>

<div class="sidebarsmall">
<br><br>
<a href="/home.php" class="first" title="home">H</a><br><br>
<a href="/view_blog.php?id=0000239526" class="first" title="content">C</a><br><br>
<a href="/send_message.php?member_id=725475" class="first" title="message">M</a><br><br>
<a href="/add_comment.php?member_id=725475" class="first" title="comment">C</a><br><br>
<a href="http://ask.fm/howsinful" class="first" title="ask.fm">A</a><br><br>
<a href="/view_blog.php?id=0000240148" class="first" title="w4w">W</a><br><br>
<a href="/view_blog.php?id=0000257196" class="first" title="request">R</a><br><br>
</div>


<div class="owners">
<h3 id="title"><span>o</span>wners:</h3><br>
<a href=""><img src="http://i.imgur.com/4UJqSyR.png" align="left"></a>
<b>name:</b> stats go here<br>
<b>age:</b> fill it in<br>
<b>years roleplaying:</b> years<br>
<b>years editing:</b> years<br>
<b>program(s):</b> what do you use<br>
<b>strengths:</b> brag a bit, why not<br>
<b>weaknesses:</b> everyone has their weaknesses<br>
<b>owner's note:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis nibh risus. Sed vulputate arcu laoreet, suscipit massa quis, mattis dui. Nunc sollicitudin mattis volutpat. Donec rutrum metus eros, et ultricies turpis venenatis sed. Duis mollis finibus sapien finibus gravida.<br><br>

<a href=""><img src="http://i.imgur.com/4UJqSyR.png" align="left"></a>
<b>name:</b> stats go here<br>
<b>age:</b> fill it in<br>
<b>years roleplaying:</b> years<br>
<b>years editing:</b> years<br>
<b>program(s):</b> what do you use<br>
<b>strengths:</b> brag a bit, why not<br>
<b>weaknesses:</b> everyone has their weaknesses<br>
<b>owner's note:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis nibh risus. Sed vulputate arcu laoreet, suscipit massa quis, mattis dui. Nunc sollicitudin mattis volutpat. Donec rutrum metus eros, et ultricies turpis venenatis sed. Duis mollis finibus sapien finibus gravida.<br><br>


<a href=""><img src="http://i.imgur.com/4UJqSyR.png" align="left"></a>
<b>name:</b> stats go here<br>
<b>age:</b> fill it in<br>
<b>years roleplaying:</b> years<br>
<b>years editing:</b> years<br>
<b>program(s):</b> what do you use<br>
<b>strengths:</b> brag a bit, why not<br>
<b>weaknesses:</b> everyone has their weaknesses<br>
<b>owner's note:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis nibh risus. Sed vulputate arcu laoreet, suscipit massa quis, mattis dui. Nunc sollicitudin mattis volutpat. Donec rutrum metus eros, et ultricies turpis venenatis sed. Duis mollis finibus sapien finibus gravida.<br><br>





</div>


<div class="updates">

<h3 id="title"><span>u</span>pdates:</h3>
<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>
- Lorem ipsum dolor sit amet - 00/00/00<br>


</div>


<div class="premades">

<h3 id="title"><span>r</span>esources</h3>

<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>

</div>

<div class="rpgs">
<h3 id="title"><span>r</span>pgs</h3>

<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>
<a href="" class="second">affiliate</a>

</div>


<div class="highrec">
<h3 id="title"><span>h</span>ighly <span>r</span>ec.</h3>
<marquee behavior="alternate" scrollamount="2">

<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 
<a href=""><img src="http://i.imgur.com/b9U55F5.png"></a> 

</marquee>
</div>

<div class="credits">
<h3 id="title"><span>c</span>redits</h3><br>
This page is credited to the lovely Cryptic at <a href="">sinful misfortune</a>. As you can see, this layout took a lot of hard work! All original content is credited to the original owners. Graphics are credited to <a href="">name here</a>. Don't Steal Anything! Best viewed in chrome.
</div>

<div class="music">
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#1b1b1b" />
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/nv50wtvsrf/Cool_Kids_--_Echosmith.mp3&bgcolor=1b1b1b&loadingcolor=a1a1a1&buttoncolor=390000&slidercolor=390000" />
</object>
</div>