DeadliestSins Layout

***||PASTE THIS IN THE DESCRIPTION PART OF YOUR CULT||***
<center>

<img src="http://i.imgur.com/JnaLqw2.png" />

<style>
.overlay {
width: 800px;
height: 415px;
background: #403b5c;
position: relative;
border: 1px solid #bbb8b0;
}

.innerbox {
overflow: auto;
border: 1px solid #bbb8b0;
background: #776c87;
position: absolute;
}


#Master {
top: 4px;
left: 4px;
width: 390px;
height: 200px;
}

#Miss {
top: 4px;
left: 404px;
width: 390px;
height: 200px;
}
#Staff {
top: 210px;
left: 4px;
width: 390px;
height: 200px;
}
#Ft {
top: 210px;
left: 404px;
width: 390px;
height: 200px;
}
</style>

<div class="overlay">
<div class="innerbox" id="Master"><center><img src="http://i.imgur.com/4mt4rSd.png" /><br />
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
</center>
</div>
<div class="innerbox" id="Miss"><center><img src="http://i.imgur.com/KOhWiS4.png" />
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
<a href="link" class="ft" title="Character Name||Play-by"><img src="img here" /> </a>
</center></div>
<div class="innerbox" id="Staff"><center><img src="http://i.imgur.com/oV3DT2W.png" />
<a href="link" class="ft" title="Name||Position"><img src="img here" /> </a>
<a href="link" class="ft" title="Name||Position"><img src="img here" /> </a>
<a href="link" class="ft" title="Name||Position"><img src="img here" /> </a>
<a href="link" class="ft" title="Name||Position"><img src="img here" /> </a>
</center></div>
<div class="innerbox" id="Ft"><img src="http://i.imgur.com/nxLlSP9.png" />
<a href="link" class="ft" title="Name||Featured"><img src="img here" /> </a>
<a href="link" class="ft" title="Name||Featured"><img src="img here" /> </a>
<a href="link" class="ft" title="Name||Featured"><img src="img here" /> </a>
<a href="link" class="ft" title="Name||Featured"><img src="img here" /> </a>
</center>
</div>
</div>
<div id="navigation">
<h2>Navigation</h2>
<a href="http://vampirefreaks.com/profiles/home.php" class="navi">VF Home</a>
<a href="http://vampirefreaks.com/cults/group_edit.php?c=DeadliestSins" class="navi">Edit Cult</a>
<a href="http://vampirefreaks.com/group_invite.php?c=DeadliestSins" class="navi">Invite Members</a>
<a href="http://vampirefreaks.com/cults/controlpanel.php?c=DeadliestSins" class="navi">Control Panel</a>
<a href="http://vampirefreaks.com/cults/statistics.php?c=DeadliestSins" class="navi">Cult Stats.</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<hr />
<h2>Directory</h2>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<a href="" class="navi">link</a>
<hr />
<a href="http://vampirefreaks.com/members/Whispered-Deaths/Drifting+Prophecies+Designs" class="navi" title="Drifting Prophecies Designs">Layout Credit</a>
<a href="http://maddenedbythestars.tk/" class="navi" title="Maddened by the Stars Designs">nav credit</a>

</div>

***||PASTE THIS IN THE HTML HEADER PART OF YOUR CULT||***
<style>

.cult_name, .leftnav, .topbar, .maintop img, .maintop table, .latest_posts_header, .status, .description_title, .edit_pictures, .owner_title, .created_on, .small_space, .cult_menu, .side_td, .threads_related, .created_on, .description_title, .maintop img, .heading, h2, .forumopen, .forumclose, .maintop, .leftnav, .cult_info, .menu2, .menu, .num_members { display: none; }



body, html {
background-color: #000000;
background-image: url('http://i.imgur.com/SDgDrJK.png?1');
background-position: center center;
background-repeat: repeat;
background-attachment: fixed;
}

.main {
background-color: #282344;
width: 700px;
padding: 4px;
border: 1px solid #bbb8b0;
}

a:link, .menu2, .menu2 a:link {
color: #c7c0b0;
font-size: 9pt;
font-family: palatino linotype;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}

a:visited, .menu2 a:visited {
color: #292929;
text-transform: none;
font-family: palatino linotype;
text-transform: none;
text-decoration: none;
}

a:hover, .menu, .menu a:link, .menu a:visited {
color: #8e8c87;
text-decoration: none;
font-family:  palatino linotype;
text-transform: none;
background: transparent;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}

html, div {
font-family:  palatino linotype;
color: #e0dbd0;
font-size: 9pt;
font-style: normal;
}

h1 {
color: #e0dbd0;
text-transform: Capitalize;
font-style: bold;
font-family: book antiqua;
letter-spacing: 1pt;
text-align: center;
padding: 3px;
font-weight: lighter;
line-height: 8px;
font-size: 10pt;
margin: 5px;
background: #637e8c;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #bbb8b0;
}

h3 {
color: #e0dbd0;
text-transform: uppercase;
font-style: italic;
font-family: book antiqua;
letter-spacing: 1pt;
text-align: center;
padding: 3px;
font-weight: lighter;
line-height: 8px;
font-size: 10pt;
margin: 5px;
background: #9bbabd;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #bbb8b0;
}

b {
text-transform: uppercase;
font-family:  palatino linotype;
color: #ababab;
font-size: 9pt;
letter-spacing: 1px;
}

i {
text-transform: none;
font-family: book antiqua;
color: #ababab;
font-size: 9pt;
letter-spacing: 1px;
}

s {
text-transform: none;
font-family:  palatino linotype;
color: #ababab;
font-size: 9pt;
letter-spacing: 1px;
}

u {
border-bottom: 1px solid #bbb8b0;
text-transform: none;
font-family: book antiqua;
font-size: 9pt;
letter-spacing: 1px;
}

table,td,th {
border: none;
}

th {
height: 30px;
text-align: center;
}

.affiliates {
display: block;
width: 800px;
padding: 5px;
margin: 5px;
text-align: center;
background-color: #403b5c;
border: 1px solid #bbb8b0;
}

.affiliates b {
display: block;
color: #e0dbd0;
font-family:  palatino linotype;
font-size: 10px;
font-weight: lighter;
padding: 4px;
text-align: center;
background: #776c87;
letter-spacing: 2pt;
font-style: none;
text-transform: uppercase;
border: 1px solid #bbb8b0;
}

.members_viewing {
display: block;
width: 800px;
padding: 5px;
margin: 5px;
text-align: center;
background-color: #403b5c;
border: 1px solid #bbb8b0;
}

.members_viewing b {
display: block;
color: #e0dbd0;
font-family:  palatino linotype;
font-size: 10px;
font-weight: lighter;
padding: 4px;
text-align: center;
background: #776c87;
letter-spacing: 2pt;
font-style: none;
text-transform: uppercase;
border: 1px solid #bbb8b0;
}

blockquote {
text-align: center;
background-color: #282344;
padding: 4px;
border-right: 2px solid #bbb8b0;
}


.darkbox, .group_expanded, .userinfo, #cultstaff, #cultstatsactivity, #cultstatstoppeople, #cultstatsbasics {
width: 800px;
background-color: #776c87;
padding: 5px;
border: 1px solid #bbb8b0;
text-align: center;
}

.forumheader {
text-transform: uppercase;
background-image:
url('http://i.imgur.com/SDgDrJK.png?1');
color: black;
font-weight: bold;
font-family:  palatino linotype;
font-size: 20pt;
border: 1px solid #bbb8b0;
padding: 4px;
}

.group_forum {
background-color: #776c87;
width: 800px;
padding: 2px;
border: 1px solid #bbb8b0;
}

.group_forum b {
display: block;
text-transform: uppercase;
background-color: #403b5c;
color: #e0dbd0;
font-family:  palatino linotype;
line-height: 10px;
font-weight: normal;
text-align: center;
}

.group_entry {
width: 800px;
border: 1px solid #bbb8b0;
padding: 5px;
text-align: center;
background-color: #776c87;
}

.group_entry table[bgcolor] {
background-color: #282344;
}

.sub_button {
border: 1px solid #bbb8b0;
background-color: #403b5c;
padding: 3px 3px;
margin: 0px;
}

.group_comment {
width: 800px;
background-color: #776c87;
border: 1px solid #bbb8b0;
padding: 5px;
}

.group_comment td {
border: none;
}

.comment_input {
width: 800px;
background-color: #776c87;
padding: 5px;
text-align: center;
border: 1px solid #bbb8b0;
}

.comment_input textarea {
color: #e0dbd0;
border: 1px solid #bbb8b0;
background-color: #403b5c;
}

.comment_input input {
background: #403b5c;
color: #e0dbd0;
border: 1px solid #bbb8b0;
}

.comment_input td {
background: transparent;
border: none;
text-align: center;
}

.subheading {
text-transform: uppercase;
color: #e0dbd0;
background-color: #403b5c;
font-family:  palatino linotype;
line-height: 10px;
font-weight: normal;
text-align: right;
}

.subheading, .subheading td {
background-color: #403b5c;
text: #e0dbd0;
}

.new_topic {
border: 1px solid #bbb8b0;
background-color: #776c87;
width: 800px;
}

.new_topic textarea {
color: #e0dbd0;
border: 1px solid #bbb8b0;
background-color: #403b5c;
}

.new_topic input {
background: #403b5c;
color: #e0dbd0;
border: 1px solid #bbb8b0;
}

.new_topic td {
background: transparent;
border: none;
}

textarea {
width: 90%;
text-align: center;
height: 150px;
}

select {
background: #403b5c;
color: #e0dbd0;
border: 1px solid #bbb8b0;
}

input {
background: #403b5c;
color: #e0dbd0;
border: 1px solid #bbb8b0;
}

.ft img {
background-image:
url('http://i.imgur.com/SDgDrJK.png?1');
padding: 5px;
margin: 5px;
border: 1px solid #bbb8b0;
border-radius: 3px;
width: 100px;
height: 100px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

.ft img:hover {
background: #bbb8b0;
border: 1px solid #bbb8b0;
border-radius: 3px;
padding: 5px;
width: 100px;
height: 100px;
margin: 5px;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

#navigation {
top: 0px;
left: 50px;
float: left;
width: 150px;
height: 400px;
text-align: center;
overflow: auto;
position: fixed;
padding: 0px;
border-radius: 0px 0px 5px 5px;
background: #2c2c2c;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
border-bottom: 3px #000 solid;
}

.navi:link, .navi:visited {
display: block;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 3px;
border: 1px solid #bbb8b0;
text-decoration: none;
text-transform: none;
letter-spacing: 1px;
font: 8pt palatino linotype;
color: #e0dbd0;
background: #403b5c;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.navi:hover, .navi:active {
color: #e0dbd0;
background: #282344;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

::-webkit-scrollbar { width:5px; background:#282344; }

::-webkit-scrollbar-track-piece { background: #403b5c; width:1px; border: none; overflow:hidden; -webkit-border-radius:10px; }

::-webkit-scrollbar-thumb{ -webkit-border-radius:10px; background: #403b5c; width:10px; border:none; border-top-width:2px; border-bottom-width:2px;}

::-webkit-scrollbar-button:start:transparent,
::-webkit-scrollbar-button:end:transparent {height:10px; display: block; background-color:#282344; }

::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:start:decrement:hover, ::-webkit-scrollbar-button:end:increment:hover{background-color:#776c87;
 cursor:hand;
}

::-webkit-scrollbar-button:start:transparent:active, ::-webkit-scrollbar-button:end:transparent:active{background:#fff;}
</style>