GroupCode

CSS::

#profile-container {background:none;}

body{
background-size: cover;
background-position: center top;
position: fixed;
background-repeat: no-repeat;
background: url(http://i.picpar.com/n7Ib.jpg);
overflow: fixed;
width: 1300px
border: transparent;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}


.siggie{
height: 80px;
width: 500px;
font-family: Coolvetica Rg;
font-size: 20pt;
color: #90EE90;
position: absolute;
top: 425px;
left: -250px;
-webkit-text-stroke: 2px #000000;
-webkit-text-fill-color: #800000
font-weight: 200;
text-shadow: 2px -2px 4px #000;
}

h1 {
   -webkit-text-stroke: 1px black;
   color: #CD0000;
   font-size: 30pt;
   font-family: Tahoma;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

.amibox{
height: 40px;
width: 30px;
border: 5px solid #007d8d;
border-radius: 10%;
background: #000;
padding-left: 5px;
padding-right: 5px;
position: fixed;
top: 10px;
left: 10px;
color: transparent;
overflow: hidden;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transform: rotate(-5deg);
}

.amibox:hover{
height: 600px;
width: 300px;
transform: rotate(0deg);
z-index: 1;
}

.amibox01{
height: 40px;
width: 30px;
border: 5px solid #007d8d;
border-radius: 10%;
background: #000;
padding-left: 5px;
padding-right: 5px;
position: fixed;
top: 100px;
left: 10px;
color: transparent;
overflow: hidden;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transform: rotate(5deg);
}

.amibox01:hover{
height: 600px;
width: 300px;
transform: rotate(0deg);
top: 30px;
position: fixed;
z-index: 1;
}

.innerbox{
height: 500px;
width: 300px;
position: relative;
padding: 10px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
overflow: auto;
}

.members{
height: 70px;
width: 70px;
border: 2px solid #FFF;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
position: relative;
display: box;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
}

.members:hover{
width: 200px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

.divider, .divider02{
height: 650px;
width: 10px;
border: 5px solid #007d8d;
background: #000;
position: absolute;
color: transparent;
top:-50px;
left: 100px;
}

.mainbox{
height: 520px;
width: 500px;
border: 2px solid #007d8d;
background: black;
border-radius: 20px;
padding: 10px;
position: fixed;
top: 30px;
left: 410px;
color: transparent;
}

.mainbox:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 2px solid #007d8d;
  border-radius: 15px;
}

.logo{
height: 200px;
width: 300px;
border: 1px solid #007d8d;
border-radius: 5px;
background: url(http://i.picpar.com/f7Ib.gif) no-repeat;
background-position: center top;
background-size: cover;
position: relative;
margin-right: auto;
margin-left: auto;
color: transparent;
}

.content{
height: 350px;
width: 350px;
font-family: Victoria Serif;
color: #ffffff;
font-size: 10pt;
text-align: justify;
position: relative;
padding: 10px;
overflow: auto;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}

.regulations{
height: 400px;
width: 10px;
border: 2px solid #007d8d;
border-left: transparent;
background: #000000;
padding: 10px;
overflow: hidden;
position: absolute;
top: 50px;
left: 928px;
color: transparent;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.regulations:hover{
width: 300px;
}

.contents002{
height: 300px;
width: 280px;
padding: 10px;
font-family: Arial;
color: #FFF;
overflow: auto;
position: relative;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
text-align: left;
opacity: 0;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
}

.contents002:hover{
opacity: 1;
}
body {
	cursor: url('http://i57.tinypic.com/mcss95_th.png'), default;
}


HTML::

<div class="amibox">.
<div class="innerbox">
<h1 style="text-align: center;"><span style="color: white; font-size: 20px;">Admins/Mods</span></h1>
<div style="background-image: url('http://s3.favim.com/orig/150209/black-eyes-dean-demon-supernatural-Favim.com-2462343.jpg'); background-position: center 30%;" class="members">.<a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Deanmon" target="_blank"><strong>Deanmon</strong></a></div>
<div style="background-image: url('http://i.picpar.com/kPJb.jpg'); background-position: center 20%;" class="members">.<a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Brody%20Winchester" target="_blank"><strong>Brody Winchester</strong></a></div>
<div style="background-image: url('http://cs307711.vk.me/v307711147/d/4LZ-fwr_NXA.jpg');" class="members">.<strong><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Anna%20Milton" target="_blank">Anna Milton</a></strong></div>
<div style="background-image: url('http://i.picpar.com/VWJb.jpg');" class="members">.<a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Meg.Masters" target="_blank"><strong>Meg Masters</strong></a></div>
<div style="background-image: url('http://www.supernaturalwiki.com/images/1/15/Crowley_-_King_of_Hell.png'); background-position: center 40%;" class="members">.<a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Demon%20King%20of%20Hell" target="_blank"><strong>Crowley</strong></a></div>
<div style="background-image: url('http://i.picpar.com/dvIb.jpg');" class="members">.<a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Naida%20Alcee" target="_blank"><strong>Naida Alcee</strong></a></div>
<div style="background-image: url('http://vignette3.wikia.nocookie.net/vampirediaries/images/e/e5/Elijah_Mikaelson_3.jpg/revision/latest?cb=20140918004637');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Archangel%20Jophiel" target="_blank"><strong>Archangel Jophiel</strong></a></div>
</div>
</div>
<div class="amibox01">.
<div class="innerbox">
<h1 style="text-align: center;"><span style="color: white; font-size: 20px;">Members</span></h1>
<div style="background-image: url('http://i.picpar.com/YuIb.jpg'); background-position: center 30%;" class="members">.<a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Archangel.Michael" target="_blank"><strong>Michael</strong></a></div>
<div style="background-image: url('http://i.picpar.com/evIb.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Hellhound!" target="_blank"><strong>Hellhound!</strong></a></div>
<div style="background-image: url('http://i.picpar.com/gXJb.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Rizdaryon" target="_blank"><strong>Rizdaryon</strong></a></div>
<div style="background-image: url('https://41.media.tumblr.com/316afb67b8e139651193965303e4cd73/tumblr_nbyen4k6gz1smxtbgo1_500.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/James%20Novak" target="_blank"><strong>Jimmy Novak</strong></a></div>
<div style="background-image: url('https://s-media-cache-ak0.pinimg.com/736x/c8/ed/56/c8ed56bfe782eae04fb6c5b2731a6589.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Angels%20Grace" target="_blank"><strong>Castiel</strong></a></div>
<div style="background-image: url('https:/s-media-cache-ak0.pinimg.com/236x/a5/4f/9c/a54f9cfa0d1db5e2041b63b06438ca6b.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Celeste%20-Charlie-%20Bradbury" target="_blank"><strong>Charlie Bradbury</strong></a></div>
<div style="background-image: url('http://www.supernaturalwiki.com/images/thumb/e/e6/Bobbydt.jpg/350px-Bobbydt.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Bobby.Singer" target="_blank"><strong>Bobby Singer</strong></a></div>
<div style="background-image: url('http://vignette3.wikia.nocookie.net/supernatural/images/f/f8/Ggabriel.png/revision/latest?cb=20140416213639g');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/G%20a%20b%20r%20i%20e%20l" target="_blank"><strong>Gabriel</strong></a></div>
<div style="background-image: url('https://s-media-cache-ak0.pinimg.com/564x/f5/04/40/f504403718f037d2481d71edb267d272.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Dragos%20Balitiu" target="_blank"><strong>Dragos Balitiu</strong></a></div>
<div style="background-image: url('http://40.media.tumblr.com/tumblr_lt2q9og0VR1r2dg96o1_500.png');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/ArchAngel%20of%20the%20Lord" target="_blank"><strong>Godstiel</strong></a></div>
<div style="background-image: url('http://www.superherohype.com/assets/uploads/2014/03/CONST20000.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Zadkiel" target="_blank"><strong>Zadkiel</strong></a></div>
<div style="background-image: url('http://vignette2.wikia.nocookie.net/vsbattles/images/a/a4/Supernatural-5x22-Swan-song-mark-pellegrino-16819200-1280-720.jpg/revision/latest?cb=20150607180309');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Luce%20-fer" target="_blank"><strong>Lucifer</strong></a></div>
<div style="background-image: url('http://wallpapersdsc.net/wp-content/uploads/2016/01/Dita-Von-Teese-HD-Background.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Aislin%20OHara" target="_blank"><strong>Aislin O&rsquo;hara</strong></a></div>
<div style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/83/d9/51/83d951aa648f88400c2fe906bd5fb6ed.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Dean.W" target="_blank"><strong>(2014)Dean</strong></a></div>
<div style="background-image: url('http://i.imgur.com/Ls7Tqg6.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Valencia%20Versthaler" target="_blank"><strong>Val Versthaler</strong></a></div>
<div style="background-image: url('http://cdn1.ouchpress.com/media/celebrities/476/alona-tal-348650.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/J.B.%20Harvelle" target="_blank"><strong>Jo Harvelle</strong></a></div>
<div style="background-image: url('http://images5.fanpop.com/image/photos/31400000/Katie-Melua-Wallpaper-katie-melua-31446200-1680-1050.jpg');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Kate%20Summers" target="_blank"><strong>Kate Summers</strong></a></div>
<div style="background-image: url('https://pbs.twimg.com/profile_images/1715962526/soulless_sam.png');" class="members"><a style="color: white; font-size: 10px;" href="http://profiles.rphaven.com/Sam.W" target="_blank"><strong>Sam Winchester</strong></a></div>
</div>
</div>
<h1 style="text-align: center; transform: rotate(90deg); position: absolute; left: -100px; top: 260px;"><span style="color: white; font-size: 50px;">Supernatural Roster</span></h1>
<div class="divider">.</div>
<div class="mainbox">.
<div class="logo">.</div>
<div class="content"><span style="font-family: garamond; color: #ffffff; font-size: 11pt;">This group is based off of the CW Network show <span style="color: #ffffff;"><span style="color: #ffffff;">Supernatural</span>.</span>&nbsp;It is here that you are allotted the chance to expand the horizons of your imagination by entering into the renowned world of the supernatural. Whether from the heavens above or hell and or purgatory here you have the chance to create and portray any available character of your choice partaking in creating a world molded, in some small part, by your own image. <br /><br />Some come join us and be those who go bump in the night, or a part of those who are the ones who always bump back. Original Characters are welcome and canons highly encouraged. Challenge your imagination. Expand your creativity. Explore your imagination. It is all at the tips of your fingers.</span></div>
</div>
<div class="regulations">.
<div class="contents002">
<h1 style="font-size: 18pt; text-align: center;"><span style="font-family: 'garamond;">Rules &amp; Regulations;</span></h1>
<br />
<ul>
<li>
<p class="font_8">&nbsp;</p>
<p style="text-align: center;" class="font_8"><span style="font-size: 10pt;"><span class="color_11">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1. No Blank/Smut/Sexually Oriented Profiles.</span></span></p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp;</p>
<ul style="text-align: center;" class="font_8">
<li>
<p class="font_8"><span style="font-size: 10pt;"><span class="color_11">2. Only room owners possess the right to comment on the profiles that enter the room.</span></span></p>
</li>
</ul>
<p style="text-align: center;" class="font_8"><span style="font-size: 10pt;"><span class="color_11">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 3. Artefacts of power, and or divine, in nature must be approved by admins before being made available for characters to possess, especially items that affect more than one's own character.</span></span></p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp;</p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;4. In the case that any dispute should arise that need administrative attention a screenshot it required for substantial proof of conflict.</p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp;</p>
<p style="text-align: center;" class="font_8"><span style="font-size: 10pt;"><span class="color_11">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 5. Admins have final say in decision making and diffusing conflicts, do not argue with them.</span></span></p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp;</p>
<p style="text-align: center;" class="font_8"><span style="font-size: 10pt;"><span class="color_11">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;6.&nbsp;No Godmoding</span></span></p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp;</p>
<p style="text-align: center;" class="font_8"><span style="font-size: 10pt;"><span class="color_11">&nbsp; &nbsp; &nbsp; &nbsp; 7.&nbsp;We have zero&nbsp;tolerance of unnecessary drama. Admins will be swift to handle drama whenever it shows and deal with it accordingly.</span></span></p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp;</p>
<p style="text-align: center;" class="font_8"><span style="font-size: 10pt;"><span class="color_11">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;8. Respect Administrative staff. Anything other than that will be dealt according to the severity of the disrepective nature.</span></span></p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp;</p>
<p style="text-align: center;" class="font_8"><span style="font-size: 10pt;"><span class="color_11">&nbsp; &nbsp; &nbsp; &nbsp;9. Three strike policy regarding drama and troublemaking. After three warnings&nbsp;a perma ban is executed.</span></span></p>
</li>
<li>
<p style="text-align: center;" class="font_8">&nbsp;</p>
<ul class="font_8">
<li>
<p style="text-align: center;" class="font_8"><span style="font-size: 10pt;"><span class="color_11">10. Please have a character based around the lore ot the show, if you are unsure of powers/weaknesses and things, please ask a mod, or see the website&nbsp;<span style="color: #ffffff;"><a href="http://supernatural.wikia.com/wiki/Supernatural_Wiki" target="_blank"><span style="color: #ffffff;">here.</span></a></span></span></span></p>
</li>
</ul>
</li>
</ul>
</div>
</div>