Default Profile Templates

[Professor X]

Code #1

Example 1 - Empty

Example 2 - James Raynor


<style type="text/css">

/* LINK COLOR */

a:link, a:visited {
color:#777;
text-decoration:none; /* removes the underline */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

a:hover {
color:#000;
}

/* VARIOUS STYLES */

.characterSheet strong {
color:#888;
}

.characterSheet {
text-shadow:0px 0px 1px black;
width:650px;
margin:0 auto;
text-align:center;
}

.quotes {
font-size:25px;
line-height:-3px;
color:#888;
}

/* SPECIAL EFFECTS (Bolds, Italics, Underlines, etc. */

i {
color:#999;
}


/* SECTION HEADERS */

h1 {
color:#888;
margin-top:15px;
font-family:'monotype corsiva' !important;
line-height:7px;
letter-spacing:-3px;
font-weight:normal;
font-size:40px;
background:none;
text-align:center;
text-transform:none;
}

/* NAVIGATION - background, links, & hover states */

#nav {
text-align:center;
margin:0 auto;
margin-top:-15px;
color: white;
width: 500px;
height: 20px;
padding:5px;
line-height:-7px;
background-color: #333!important;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;
-webkit-border-radius: 0px 0px 50px 50px;
border-radius: 0px 0px 50px 50px;
}

#nav a:link, #nav a:visited {
font-size:10px !important;
letter-spacing:-1px;
text-decoration:none;
color:#888!important;
font-weight:normal !important;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
padding:5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#nav a:hover {
background-color:#111;
color:#aaa!important;
text-decoration:none;
}


/* BASE TEMPLATE FOR SECTIONS - make a div and give it the id of template to create more sections */

#template {
font-size:11px;
font-family:arial !important;
background-color: #333!important;
margin:0 auto;
margin-top:70px;
text-align: center;
width: 650px;
height: 400px;
padding: 5px;
color:white;
-webkit-box-shadow:inset 1px 1px 25px 1px #111;
-moz-box-shadow:inset 1px 1px 25px 1px #111;
box-shadow:inset 1px 1px 25px 1px #111;
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
}

/* OVERALL LAYOUT (use ONLY if you know HTML/CSS) */
body {
background:url("none");
background-color: black;
}

ul {list-style-type:none; margin:0; padding:0;}
li {display:inline;}

.anchor {
margin:0 auto;
width: 650px;
height: 400px;
overflow-y: hidden;
}

#container {
margin:0 auto;
width:900px;
}
#profile {
background-color: transparent;
border-color: transparent; color: #900;}
.pfor {display: none;}
</style>

<div id="container">
<div id="nav">
<a href="">Main</a>
<a href="#one">Two</a>
<a href="#two">Three</a>
<a href="#three">Four</a>
<a href="#four">Five</a>
<a href="#five">Six</a>
<br>
</div>

<div id="template">


<div class="anchor">
<a name=""></a>
<div class="anchor" style="overflow: auto;">
<img src="http://placehold.it/250x400" style="float:left; height:400; width:250; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px;

"/>
<center><h1>Rick James<h1></center>
<center><small>( placeholder text in case your profile is a W.I.P. ) </small>
<br>
<br>
Cras id <i>egestas sem</i>.
<br>
Lorem ipsum <i>dolor</i> sit amet, consectetur <i>adipiscing</i> elit. <br>
Cras id egestas sem. Sed pretium mollis erat, in consectetur lacus iaculis vitae. Praesent sit amet tellus lectus, non scelerisque erat.

Phasellus non urna id risus eleifend tempus vitae quis enim. Proin vehicula turpis non neque elementum ullamcorper. Maecenas placerat

tempor ultrices. <br>
Sed pretium mollis erat, in consectetur lacus iaculis vitae.<br>
<br>
Mauris gravida, nibh vel sollicitudin pharetra, justo metus accumsan mi, sed rutrum urna dui eu ipsum. Quisque porta varius rutrum.

Vivamus elementum sem et justo egestas euismod. Mauris condimentum, sapien vel lobortis dapibus, mi ante dictum nunc, vitae pharetra nisi

ante vitae arcu. Integer quis dui nec libero aliquam consequat.

<br>
<span class="quotes">❝</span>Tun nunc turpis, <i>consectetur et</i>, vestibulum <i>eu odio</i>.<span class="quotes">❞</span>
<br>
i = <i>italics</i><br>
b = <strong>bold</strong><br>
small = <small>small text</small><br>
links = <a href="#">link</a>
</center>
</div>


<a name="one"></a>
<div class="anchor" style="overflow: auto;">
<center><h1>info</h1></center>
<div class="characterSheet"><img src="http://placehold.it/128x217" style="float:left; height:217; width:128; padding:5px; margin-top:-5px;" />

<img src="http://placehold.it/128x217" style="float:right; padding:5px; margin-top:-5px; height:217; width:128;" />
<br>
<strong>Name:</strong> Name
<br><strong>Alias:</strong> ❝Title❞
<br><strong>Age:</strong> Arbitrary Number
<br><strong>Birthday:</strong> 01-01-1982
<br><strong>Alignment:</strong> True Neutral
<br><strong>Astrological Sign:</strong> Capricorn
<br><strong>Marital Status:</strong> Single
<br><strong>Height:</strong> 5'10"
<br><strong>Weight:</strong> 170 lbs.
<br><strong>Hair:</strong> Blond
<br><strong>Skin:</strong> White
<br><strong>Eyes:</strong> Blue
<br><strong>Physique:</strong> Average
</div>

</div>


<a name="two"></a>
<div class="anchor" style="overflow: auto;">
<center><h1>page 2</h1></center>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non neque sollicitudin dui feugiat dapibus sed sed nunc. Donec non

sapien ligula. Nunc ut ligula turpis, vehicula pretium lectus. Nam at magna commodo augue vehicula molestie. Curabitur placerat iaculis

bibendum. Pellentesque quis porta velit. Aenean nec justo vitae lorem egestas ultricies vitae vitae ante. Etiam lobortis facilisis odio,

ut porta mauris sagittis ac. Cras vestibulum pulvinar tortor, non egestas dui adipiscing vitae. Vivamus at sapien nisi, lacinia tincidunt

nibh. Donec mattis, augue vel ornare ullamcorper, magna eros cursus magna, id faucibus nisl mi quis erat. Nam ut commodo turpis.
</p>

<p>
Cras id egestas sem. Sed pretium mollis erat, in consectetur lacus iaculis vitae. Praesent sit amet tellus lectus, non scelerisque erat.

Phasellus non urna id risus eleifend tempus vitae quis enim. Proin vehicula turpis non neque elementum ullamcorper. Maecenas placerat

tempor ultrices. Quisque et tortor nisi, eu condimentum dolor. Nulla gravida, turpis eu aliquam auctor, odio mi fringilla leo, quis

rutrum nisi neque eu libero. Aliquam malesuada molestie ante sit amet tempus. Sed aliquam dictum diam, quis commodo libero egestas

congue. Nam nec nunc vel mauris hendrerit tristique. Donec nunc mi, convallis vel vehicula in, dictum nec tortor. Vestibulum varius

tortor nec urna ultrices aliquam. Vestibulum congue tempus adipiscing. Ut placerat eros at augue tempus vel mollis felis accumsan.
</p>

<p>
Mauris gravida, nibh vel sollicitudin pharetra, justo metus accumsan mi, sed rutrum urna dui eu ipsum. Quisque porta varius rutrum.

Vivamus elementum sem et justo egestas euismod. Mauris condimentum, sapien vel lobortis dapibus, mi ante dictum nunc, vitae pharetra nisi

ante vitae arcu. Integer quis dui nec libero aliquam consequat. Etiam eu urna et augue posuere tincidunt ac vel neque. Curabitur nunc

turpis, tempor ut consectetur et, vestibulum eu odio.
</p>
</div>


<a name="three"></a>
<div class="anchor" style="overflow: auto;">
<center><h1>page 3</h1></center>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non neque sollicitudin dui feugiat dapibus sed sed nunc. Donec non

sapien ligula. Nunc ut ligula turpis, vehicula pretium lectus. Nam at magna commodo augue vehicula molestie. Curabitur placerat iaculis

bibendum. Pellentesque quis porta velit. Aenean nec justo vitae lorem egestas ultricies vitae vitae ante. Etiam lobortis facilisis odio,

ut porta mauris sagittis ac. Cras vestibulum pulvinar tortor, non egestas dui adipiscing vitae. Vivamus at sapien nisi, lacinia tincidunt

nibh. Donec mattis, augue vel ornare ullamcorper, magna eros cursus magna, id faucibus nisl mi quis erat. Nam ut commodo turpis.
</p>

<p>
Cras id egestas sem. Sed pretium mollis erat, in consectetur lacus iaculis vitae. Praesent sit amet tellus lectus, non scelerisque erat.

Phasellus non urna id risus eleifend tempus vitae quis enim. Proin vehicula turpis non neque elementum ullamcorper. Maecenas placerat

tempor ultrices. Quisque et tortor nisi, eu condimentum dolor. Nulla gravida, turpis eu aliquam auctor, odio mi fringilla leo, quis

rutrum nisi neque eu libero. Aliquam malesuada molestie ante sit amet tempus. Sed aliquam dictum diam, quis commodo libero egestas

congue. Nam nec nunc vel mauris hendrerit tristique. Donec nunc mi, convallis vel vehicula in, dictum nec tortor. Vestibulum varius

tortor nec urna ultrices aliquam. Vestibulum congue tempus adipiscing. Ut placerat eros at augue tempus vel mollis felis accumsan.
</p>

<p>
Mauris gravida, nibh vel sollicitudin pharetra, justo metus accumsan mi, sed rutrum urna dui eu ipsum. Quisque porta varius rutrum.

Vivamus elementum sem et justo egestas euismod. Mauris condimentum, sapien vel lobortis dapibus, mi ante dictum nunc, vitae pharetra nisi

ante vitae arcu. Integer quis dui nec libero aliquam consequat. Etiam eu urna et augue posuere tincidunt ac vel neque. Curabitur nunc

turpis, tempor ut consectetur et, vestibulum eu odio.
</p>
</div>


<a name="four"></a>
<div class="anchor" style="overflow: auto;">

<center><h1>gallery</h1></center>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<br>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<br>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#" target=blank><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
</div>


<a name="five"></a>
<div class="anchor" style="overflow: auto;">
<center><h1>O.O.C. rules</h1></center>
<i>Let's get this straight. Some ground rules before you up and decide to talk to me.</i><br>
<div style="text-align:left; max-width:450px; margin:0 auto;"><img src="http://placehold.it/128x217" style="float:left; padding:5px; height:217; width:128;"

/><br>

<small>These get lengthy, so I only made 5</small><br>
✖ Rule #1
<br>
✖ Rule #2
<br>
✖ Rule #3
<br>
✖ Rule #4
<br>
✖ Rule #5
<br>
</div>

</div>

</div>

<div style="position:absolute; bottom:0; right:0;"><small>Profile created by <a href="http://roleplaychat.org/profile.php?user=Steve+Rogers">Steve Rogers</a></small></div>
</div>


[Professor X]

Code #2

Example 1 - Empty


Example 2 -Richard Castle

<style type="text/css">

/* INFO BOXES */

#story {
color:#ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#111;
padding:5px;
margin:0 auto;
max-width:400px;
max-height:200px;
overflow-y:scroll;
text-align:center;
-webkit-box-shadow: inset 0px 0px 25px 5px #000;
box-shadow: inset 0px 0px 25px 5px #000;
}

#affiliations {
color:#aaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#111;
padding:5px;
margin:0 auto;
max-width:400px;
max-height:180px;
overflow-y:scroll;
text-align:center;
-webkit-box-shadow: inset 0px 0px 25px 5px #000;
box-shadow: inset 0px 0px 25px 5px #000;
}


/* HEADERS */

h1 {
cursor:default;
font-size:20pt;
font-family: georgia;
text-transform: normal;
text-align: center;
letter-spacing:-2px;
line-height: 10pt;
color: #fff;
padding: 1px;
font-weight: normal;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

/* LINKS */

a:link, a:visited {
font-size:11px;
color:#eee;
font-variant:small-caps;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

a:hover {
color:#333;
}

/* PHOTOS */

#photos {
max-height:105px;
overflow-y:auto;
padding:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#111;
margin:0 auto;
text-align:center;
max-width:500px;
-webkit-box-shadow: inset 0px 0px 25px 5px #000;
box-shadow: inset 0px 0px 25px 5px #000;
}

#photos img {
opacity:1;
margin:0 auto;
max-height:120px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
margin:5px;
-webkit-box-shadow: 0px 0px 5px 1px #999;
box-shadow: 0px 0px 5px 1px #999;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#photos img:hover {
opacity:0.3;
}

/*DO NOT EDIT*/
#container {
margin:0 auto;
width:900px;
}

.pfor {display: none;
margin:0 auto;}
#profile {
background-color:transparent !important;
border:none;
margin:0 auto;
}

body {
font-family: arial;
font-size: 10px;
letter-spacing: 0px;
background:url(none) no-repeat fixed right top;
background-color:black;
}
html {
color:black !important;
}

#affiliations a:before {
content: '► '!important;
color:#fff!important;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#affiliations a:hover:before {
content: '► '!important;
color:#666!important;
}

#profileCred {
margin:0 auto;
margin-top:5px;
background-color:none;
padding:5px;
font-size:10px;
color:#666;
text-shadow: 0px 0px 2px #666;
max-height:10px;
width:300px;
text-align:center;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
}
</style>

<div id="container">

<h1>Story</h1><br>

<div id="story">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper enim

a lectus mollis sagittis. Ut pharetra ultricies varius. Curabitur in ligula lectus.

Nam vel metus vitae turpis laoreet pellentesque sit amet quis ante. In et risus in

leo convallis pharetra. Pellentesque pharetra luctus est adipiscing facilisis.

Quisque suscipit enim nec purus vulputate gravida. Aliquam urna arcu, sagittis at

fermentum non, pellentesque ac lorem. Nam consectetur ipsum eu urna tempor

vestibulum. Vestibulum blandit elit eu sem commodo sollicitudin. Pellentesque in

fringilla ipsum. Etiam eget elit ut arcu fermentum ultricies. Nulla lobortis

tincidunt sapien eu congue. Nunc ultrices, tortor aliquet interdum fermentum,

mauris justo tempus orci, at mollis libero leo ac lectus. Vivamus massa neque,

tristique eget consequat eget, posuere pulvinar sem.
<br><br>
Maecenas vel risus non nisl aliquam varius at at odio. Aenean luctus molestie

tortor, sit amet sagittis massa molestie id. Suspendisse ut nulla velit. Nam vitae

nulla nisl. Morbi faucibus luctus libero et blandit. Phasellus tristique dapibus

orci, vitae pharetra nibh accumsan et. Nunc nec ante quis tellus blandit

vestibulum. Suspendisse potenti. Vestibulum tortor augue, condimentum et aliquam

et, blandit ac velit. Donec a lectus lorem, et volutpat nibh.
<br><br>
Aliquam velit augue, sollicitudin nec tincidunt sed, sagittis vitae ante. Aenean

interdum varius ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Suspendisse rutrum lacinia purus, sit amet facilisis dolor venenatis ac. Aliquam

faucibus congue ante sit amet blandit. Aliquam erat volutpat. Cras vel sapien est.
<br><br>
Suspendisse nec nulla nec mauris dapibus vestibulum. Praesent dapibus lectus quis

nunc lacinia pretium eu vitae augue. Aenean laoreet, sem et elementum fermentum,

sapien quam egestas est, non tempor quam lectus quis lacus. Nulla ligula lacus,

tempor vitae sollicitudin vitae, vestibulum in elit. Quisque pharetra, tellus id

porttitor rutrum, risus ipsum imperdiet urna, sit amet feugiat justo justo sed leo.

Nullam scelerisque elit sed est aliquet lobortis. In hac habitasse platea dictumst.

Proin porttitor dictum lectus at commodo.
</p>

<br>
</div>

<br><br>

<h1>Affiliations</h1><br>
<div id="affiliations">
<br>
<a href="#">Person</a>
<br>
Cras id egestas sem. Sed pretium mollis erat, in consectetur lacus iaculis vitae.

Praesent sit amet tellus lectus, non scelerisque erat. Phasellus non urna id risus

eleifend tempus vitae quis enim. Proin vehicula turpis non neque elementum

ullamcorper. Maecenas placerat tempor ultrices. Quisque et tortor nisi, eu

condimentum dolor. Nulla gravida, turpis eu aliquam auctor, odio mi fringilla leo,

quis rutrum nisi neque eu libero. Aliquam malesuada molestie ante sit amet tempus.

Sed aliquam dictum diam, quis commodo libero egestas congue. Nam nec nunc vel

mauris hendrerit tristique. Donec nunc mi, convallis vel vehicula in, dictum nec

tortor. Vestibulum varius tortor nec urna ultrices aliquam. Vestibulum congue

tempus adipiscing. Ut placerat eros at augue tempus vel mollis felis accumsan.
<br><br>

<a href="#">Person</a>
<br>

Cras id egestas sem. Quisque et tortor nisi, eu condimentum dolor. Nulla gravida,

turpis eu aliquam auctor, odio mi fringilla leo, quis rutrum nisi neque eu libero.

Aliquam malesuada molestie ante sit amet tempus. Sed aliquam dictum diam, quis

commodo libero egestas congue. Nam nec nunc vel mauris hendrerit tristique. Donec

nunc mi, convallis vel vehicula in, dictum nec tortor. Vestibulum varius tortor nec

urna ultrices aliquam. Vestibulum congue tempus adipiscing. Ut placerat eros at

augue tempus vel mollis felis accumsan.
<br><br>

<a href="#">Person</a>
<br>
Cras id egestas sem. Sed pretium mollis erat, in consectetur lacus iaculis vitae.

Praesent sit amet tellus lectus, non scelerisque erat. Phasellus non urna id risus

eleifend tempus vitae quis enim. Proin vehicula turpis non neque elementum

ullamcorper. Maecenas placerat tempor ultrices. Quisque et tortor nisi, eu

condimentum dolor. Nulla gravida, turpis eu aliquam auctor, odio mi fringilla leo,

quis rutrum nisi neque eu libero. Aliquam malesuada molestie ante sit amet tempus.

Sed aliquam dictum diam, quis commodo libero egestas congue. Nam nec nunc vel

mauris hendrerit tristique. Donec nunc mi, convallis vel vehicula in, dictum nec

tortor. Vestibulum varius tortor nec urna ultrices aliquam. Vestibulum congue

tempus adipiscing. Ut placerat eros at augue tempus vel mollis felis accumsan.
<br><br>

</div>

<br><br>

<h1>Photos</h1><br>

<div id="photos">
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100"/></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<br>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<br>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<a href="#"><img src="http://placehold.it/100x100" height="100" Width="100" /></a>
<br>

<br>
</div>


<div id="profileCred">Profile created by <a

href="http://profiles.roleplaychat.org/Steve%20Rogers">Steve Rogers</a></div>

</div>

[Professor X]

Code #3

Example 1 - Agent Coulson

<style type="text/css">

/* LINKS */
a:link, a:visited {
color:#fff;
text-decoration:none;
}

/* Styles - Bolds, Italics, ETC*/

.quote {
font-family:'monotype corsiva';
color:#fff;
font-size:25px;
font-style:italic;
text-align:center;
line-height:5px;
}

strong {
color:#666;
}

/* HEADER STYLES */

h1 {
z-index:3 !important;
text-shadow:0px 0px 15px #bbb;
cursor:default;
font-size:15pt;
font-family: 'Century Gothic';
text-transform: normal;
text-align: center;
letter-spacing:-1px;
line-height: 15pt;
font-variant:small-caps;
color: #bbb;
padding: 1px;
font-weight: normal;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

/* STATS */

#stats {
color:#eee;
min-height:300px;
background: #333333;
background:url(http://i304.photobucket.com/albums/nn170/GumshoeOwnsYou/mainProfiles/blackBg.png);
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
padding:10px;
}

/* AFFILIATES */

#affiliates{
opacity:0.7;
min-height:150px;
background: #333333;
background:url(http://i304.photobucket.com/albums/nn170/GumshoeOwnsYou/mainProfiles/blackBg.png);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.affiliate1 {
width:100%;
text-align:center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.affiliate1:hover {
background-color:#333;
opacity:0.5;
}

/* OOC */

#ooc {
color:#eee;
opacity:0.7;
min-height:120px;
background: #333333;
background:url(http://i304.photobucket.com/albums/nn170/GumshoeOwnsYou/mainProfiles/blackBg.png);
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 10px 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
padding:10px;
}

#ooc:hover {
opacity:1;
}

body {
background:url(none) fixed no-repeat center center;
background-color:#111;
font-family:arial;
font-size:10px;
}

/* DO NOT ALTER UNLESS YOU ARE GOOD AT HTML AND CSS */
.pfor {display:none;
}
#profile {
background-color:transparent !important;
border:none;
margin:0 auto;
}

* {
cursor:url(http://limepic.com/img/2012/05/29/Gfqya.png), url(http://www.fileden.com/files/2009/11/17/2654176/pen.cur),auto; !important;
}

</style>

<div id="stats">
<h1>Stats</h1>
<br>
<img src="http://placehold.it/169x276" style="float:left; padding:5px;" border="0" height="276" width="169">
<br>
<div class="quote"> ❝ When it rains, it pours. ❞ </div>

<br><strong>Name:</strong> Name
<br><strong>Alias:</strong> ❝Title❞
<br><strong>Age:</strong> Arbitrary Number
<br><strong>Sex:</strong> Male
<br><strong>Birthday:</strong> 01-01-1982
<br><strong>Alignment:</strong> True Neutral
<br><strong>Astrological Sign:</strong> Capricorn
<br><strong>Marital Status:</strong> Single
<br><strong>Height:</strong> 5'10"
<br><strong>Weight:</strong> 170 lbs.
<br><strong>Hair:</strong> Blond
<br><strong>Skin:</strong> White
<br><strong>Eyes:</strong> Blue
<br><strong>Physique:</strong> Average
<br><strong>Class:</strong> Bard
<br><strong>Training:</strong> Tai-bo
<br><strong>Equipment:</strong> Gliding cape body suit
<br>


<br style="clear:both;">
<center>
</center>
</div>

<div id="affiliates">
<h1>Affiliates</h1>
<br>
<div class="affiliate1"><a href="#">Mans 1</a></div>

<div class="affiliate1"><a href="#">Mans 2</a></div>

<div class="affiliate1"><a href="#">Mans 3</a></div>

<div class="affiliate1"><a href="#">Mans 4</a></div>

<div class="affiliate1"><a href="#">Mans 6</a></div>

<div class="affiliate1"><a href="#">Mans 7</a></div>

<div class="affiliate1"><a href="#">Mans 8</a></div>

<br>
</div>

<div id="ooc">
<h1>O.O.C.</h1>

»Rule 1. <br>
»Rule 2. <br>
»Rule 3. <br>
»Rule 4. <br>
»Rule 5. <br>
»Rule 6. <br>
</div>