Moonlight - Default Layout

Sinful Misfortune Resources - Layouts - Moonlight.
- Do not remove credits from the code.
- Do not redistribute the codes.
- Do not share the codes with friends.

If you're going to alter the stylesheet, please have a basic understanding of HTML/CSS I will not walk you through it step by step, simply because I don't have enough time to do so for everyone. You do need a basic understanding of how stylesheets work in order to use these codes. Please do not ask me for help unless you are extremely confused. It's all pretty easy to figure out if you know how to use a stylesheet. Remember to put each code in the designated area.

Thank you for choosing Sinful Misfortune.
Sincerely, Cryptic.


------------------------------------------HEADLINE:------------------------------------------

<font style="display:none;">

------------------------------------------ABOUT ME:------------------------------------------

<center>
<h1>character name</h1>
<img src="https://66.media.tumblr.com/e3519d4546a5aa81382b4224e1c41f50/tumblr_pbmh55D1mU1ubs43co7_400.gif" style="width:125px; padding:3px; display:inline-block;">
<img src="https://66.media.tumblr.com/ba5dc629d52cac9622c1ca105a364727/tumblr_pbmh55D1mU1ubs43co1_400.gif" style="width:125px; padding:3px; display:inline-block;">
<img src="https://66.media.tumblr.com/0df7930a70c7bb7b8eb027b5f0dde736/tumblr_pbmh55D1mU1ubs43co5_400.gif" style="width:125px; padding:3px; display:inline-block;">

<br>
<div style="text-align:left; padding-left:11px;">
<a href="http://roleplayer.me/home.php">home</a>
<a href="http://www.roleplayer.me/add_comment.php?member_id=IDNUMBERHERE">comment</a>
<a href="http://www.roleplayer.me/send_message.php?member_id=IDNUMBERHERE">message</a>
<a href="http://www.roleplayer.me/albums.php?member_id=IDNUMBERHERE">pictures</a>
<a href="http://ask.fm">ask</a>
<a href="http://roleplayer.me/sinfulmisfortune">credit</a>
</div>

<br>
<br>

<div style="width:350px; padding:5px; text-align:left;">
<u>rules:</u><br>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. </li><br>
<li>Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. </li><br>
<li> Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. </li><br>
<li> Proin semper, quam a semper egestas, tellus ligula sagittis ipsum, nec condimentum enim neque quis lectus. Fusce consectetuer, lacus vitae laoreet viverra, sem eros mattis sem, a feugiat sem ante in tortor. Nunc tristique velit ut metus. Proin augue sapien, cursus sed, tincidunt eu, rhoncus eu, mi.</li></ul>
</div>

<h2>small bio:</h2>
<center><div style="width:350px; height:75px; overflow: auto; padding:5px; background-color:#f1f6e2; text-align:right;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Proin semper, quam a semper egestas, tellus ligula sagittis ipsum, nec condimentum enim neque quis lectus. Fusce consectetuer, lacus vitae laoreet viverra, sem eros mattis sem, a feugiat sem ante in tortor. Nunc tristique velit ut metus. Proin augue sapien, cursus sed, tincidunt eu, rhoncus eu, mi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien.

</div>


<img src="https://66.media.tumblr.com/bd9eb7149a6516164fbecfe9ff5eedac/tumblr_pbmh55D1mU1ubs43co3_400.gif" style="width:125px; padding:3px; display:inline-block; margin-top:10px;">
<img src="https://66.media.tumblr.com/dfbb8712391a1b970773ee2511c4c3c5/tumblr_pbmh55D1mU1ubs43co2_400.gif" style="width:125px; padding:3px; display:inline-block;margin-top:10px;">
<img src="https://66.media.tumblr.com/bbaadd4a4fc56fc4a7e2706d68a874ea/tumblr_pbmh55D1mU1ubs43co6_400.gif" style="width:125px; padding:3px; display:inline-block;margin-top:10px;">
<h1 style="text-align:left; margin-top:5px; padding-left:12px;">xoxo, cryptic.</h1>



------------------------------------------LIKE TO MEET:------------------------------------------


</td></tr></table></td></tr></table></td></tr></table>
<style>

{ S P E C I A L  F O N T S - - C R Y P T I C }

@import url(https://fonts.googleapis.com/css?family=);
@font-face {font-family:slkscrn;src: url('http://static.tumblr.com/jtvmcoc/baIn9f1ea/slkscr.ttf');}
@import url(https://fonts.googleapis.com/css?family=);
@font-face {font-family:litf;src: url('https://static.tumblr.com/blzkhux/1n5purbos/thelightfont.ttf');}
@import url(https://fonts.googleapis.com/css?family=);
@font-face {font-family:lovbas;src: url('https://static.tumblr.com/blzkhux/B0Mpurc6v/lonely_basket.ttf');}


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


body {
background-color:#877591;
background-image:url("");
}

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

font, td, table, body, p, div, li, .text {
font-family:consolas;
font-size:9px;
line-height:9px;
letter-spacing:1px;
font-weight: normal;
text-transform:none;
text-decoration: none;
color:#524558;}

a:active, a:visited, a:link {
font-family:litf;
color:#6f6176;
font-size:12px;
text-transform:lowercase;
font-weight: normal;
Letter-spacing:0px;
Padding:2px;
Font-style:italic;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

a:hover {
text-decoration: none;
color:#b8b8b8;}

.nametext{
font-family:litf;
font-size:20px;
line-height:18px;
color:#000000;
display:block;
font-weight:normal;
text-transform:uppercase;
letter-spacing:3px;
}

b {
color:#9889a0;
font-family:litf;
font-size:9px;
line-height:12px;
font-weight:normal;
text-transform: uppercase;
letter-spacing:3px; }

i {
color:#4c4151;
font-family: litf;
font-size: 9px;
line-height: 12px;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
letter-spacing: 2px;}

u {
color:#6f6176;
font-family: litf;
font-size: 9px;
line-height: 12px;
font-weight: normal;
text-transform: lowercase;
Text-decoration:none;
letter-spacing: 2px;}

H1 {
color:#86778e;
font-family:litf;
font-size:25px;
line-height:9px;
font-weight:normal;
text-transform: uppercase;
letter-spacing:6px;
Text-align:right;
Margin:0px;
Padding-right:7px;}

H2 {
color:#86778e;
font-family:litf;
font-size:15px;
line-height:9px;
font-weight:normal;
text-transform: uppercase;
letter-spacing:3px;
Text-align:center;
Margin:0px;
Padding-right:7px;}



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

::-webkit-scrollbar-thumb {
height:auto;
background-color: #b1b1b1;
border:3px solid #fff;
}

::-webkit-scrollbar {
height:9px;
width:7px;
background-color: #524558;
border:3px solid #fff;
}

a span.av, a:hover span.sm{display: inline;}
a:hover span.av, a span.sm{display: none;}
a:hover {visibility:visible;}

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}


{ H I D E   C O D E S -- C R Y P T I C }
table td div div{visibility:hidden;}
td div a.text{visibility:hidden;}
td div a.links{visibility:hidden;}
tr {background-color:#transparent}
.profileInfo td td.text {visibility:visible;}.profileInfo td.text a img {visibility:visible;}.profileInfo td td {visibility:hidden;}
table.blurbs td.text {display:none;}
table.blurbs td td span.orangetext15 {display:none;}
div td {display:none;} table {top:15px; position:relative;} table table {top:0px; position:relative;}
.Hide Orange Bars and Text{rr}
td.text table {width:100%;}
.orangetext15{display:none;}
.orangetext15{display: none;}
.whitetext12{display: none;}
.lightbluetext8{display: none;}
.blacktext12 {display: none;}
.friendSpace { display:none; }
.contactTable { display: none; }
.latestBlogEntry { display:none; }
.userProfileDetail{ display:none; }
.extendednetwork {display:none;}
.userProfileURL{display:none;}
.userProfileSchool {display: none;}
.navigationBar { display: none; }
table.interestsAndDetails td.text {display:none;}
table.interestsAndDetails span.lightbluetext8 {display:none;}
.interestsAndDetails td {width:0px;}
table.interestsAndDetails, table.interestsAndDetails td {border:0px;}
table.interestsAndDetails table {background-color:transparent;}
table.interestsAndDetails td td {background-color:transparent;}
a .text { font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
</style>





------------------------------------------INTERESTS:------------------------------------------


<center>
<div style="width:250px; padding:5px; text-align:left; margin-top:-25px;">
<u>contact me:</u><br>
<ul>
<li>discord: xxxxx</li><br>
<li>line: xxxxx</li><br>
<li>Proin semper, quam a semper egestas, tellus ligula sagittis ipsum, nec condimentum enim neque quis lectus. Fusce consectetuer, lacus vitae laoreet viverra, sem eros mattis sem, a feugiat sem ante in tortor. Nunc tristique velit ut metus. Proin augue sapien, cursus sed, tincidunt eu, rhoncus eu, mi.</li></ul>
</div>
</center>

<h2 style="margin-top:5px;">roleplay details:</h2>
<center><div style="width:250px; height:75px; overflow:auto; padding:5px; text-align:center; background-color:#f1f1f1;">
<u>I O U:</u><br><br>
<i>starters:</i><br>
<a href="">name here</a><br>
<a href="">name here</a><br>
<a href="">name here</a><br>

<br>
<i>U O M:</i><br>
<a href="">name here</a><br>
<a href="">name here</a><br>
<a href="">name here</a><br>
<br>

<i>Discussions:</i><br>
<a href="">name here</a><br>
<a href="">name here</a><br>
<a href="">name here</a><br>
</div></center>