home / / / / / /

Home	Help Search Members Calendar Shoutbox

Welcome Guest ( Log In | Register )

Resend Validation Email

Miami Lights The rules I break got me a place up on the radar.Registration

Add Reply

New Topic

New Poll

Freestyle Application/Shipper

Track This Topic | Email This Topic | Print This Topic

Mari

Posted: Apr 30 2016, 11:20 PM

Quote

Mari
@Mari

age
30

posts
142

tracker
playlist

dev.
app

@N/A: N/A

Application/Shipper

Your character's application will also second as your shipper for plotting with others as there is a clearly marked area for this in the template.

Below there are four different templates. Each is color coded for the member groups. Please copy the code for the correct group which your character will be apart of. If you haven't already you may read about the member groups here: [x]

Please make sure that your topic title and topic description look like this

Topic: lastname, firstname
Topic Description: age in ## | member group | playby

first middle last

EDITORIAL

BASICS

Basics

Name

First Middle Last

Age

In letters

Member Group

List here

Birthday

Day / Month

Birthplace

City, State

Secret

Here

Career

Occupation

List here

Workplace

List here

Education

School (degree) ; School (degree)

Relationships

Sexual Orientation

List here

Relationship Status

List here

Current Partner

List here

Player

Alias

List here

Timezone

List here

Contact

List here

Pref. Pronouns

List here

FREESTYLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

SHIPPER

merc

Mari

Posted: Apr 30 2016, 11:38 PM

Quote

Mari
@Mari

age
30

posts
142

tracker
playlist

dev.
app

@N/A: N/A

SANGUINE

CODE

[dohtml]
<link href='http://fonts.googleapis.com/css?family=Inder|Vidaloka|Raleway:700,400' rel='stylesheet' type='text/css'>

<style type="text/css">
.bc_app {
width: 500px;
margin: 25px auto;
}
.bc_app2 {
background-color: #000;
color: #fff;
padding: 25px;
font-family: raleway;
text-transform: lowercase;
font-size: 18px;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
}
.bc_appline {
background-color: #fff;
height: 1px;
width: 95%;
margin: 10px auto;
}
.bc_appbg {
background-color: #fff;
padding: 10px;
height: 430px;
border-bottom: 1px solid #53999A !important;
}
.bc_appmain { position: relative; margin: auto; width: 450px; height: 450px; clear: both; }
.bc_appmain2 { float: left; }
.bc_appmain2 label { display: block; width: 112.5px; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; font-family: inder; font-size: 7px; text-align: center; line-height: 100%; letter-spacing: 2px; color: #000; background-color: #fff;border-bottom: 1px solid #000; }
.bc_appmain .bc_appmain2 [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
.bc_content { width: 450px; height: 400px; position: absolute; top: 28px; bottom: 0px; left: 0px; right: 0px; z-index: 1; border-bottom: 1px solid #000; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label { background: #fff; border-bottom: 1px solid #53999A; color: #53999A; z-index: 2; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label ~ .bc_content { z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }
.bc_mainimg {
height: 400px;
width: 450px;
overflow: hidden;
border-bottom: 1px solid #000;
}
.bc_secimg {
height: 400px;
width: 200px;
overflow: hidden;
margin-top: -1px;
}
.bc_sectext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_sectext2 {
width: 215px;
height: 375px;
text-align: justify;
font-family: times;
font-size: 12px;
line-height: 115%;
color: #000;
overflow: auto;
padding-right: 5px;
}
.bc_tretext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_tretext2 {
width: 215px;
height: 375px;
overflow: auto;
}
.bc_tretext2 h1 {
font-family: raleway;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.bc_tretext2 h2 {
font-family: raleway;
text-align: left;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
color: #53999A !important;
font-size: 11px;
padding-left: 5px;
margin-top: -5px;
}
.bc_tretext2 h3 {
font-weight: normal;
font-family: inder;
font-size: 11px;
text-align: left;
margin-top: -15px;
padding-left: 15px;
}
.bc_treimg {
height: 400px;
width: 200px;
overflow: hidden;
margin-top: -1px;
margin-left: -8px;
}
.bc_ship {
width: 450px;
height: 400px;
background-image: url(http://i68.tinypic.com/10p7laq.png) !important;
}
.bc_ship2 {
width: 230px;
height: 230px;
margin-left: 100px;
margin-top: 80px;
color: #fff;
font-family: verdana;
font-size: 10px;
line-height: 115%;
text-align: justify;
padding: 10px;
float: left;
background-image: url(http://i68.tinypic.com/2mrfka1.png) !important;
}
.bc_ship3 {
width: 230px;
height: 230px;
overflow: auto;
padding-right: 5px;
}
.merc_cred { text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase; margin-top: -20px; margin-bottom: 25px; }
</style>

<div class="bc_app"><div class="bc_app2" style="background-color:#53999A">
<div class="bc_appline"></div>
first middle last
<div class="bc_appline"></div>
</div>

<div class="bc_appbg">

<div class="bc_appmain">

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-5" name="bc_appmain2-group-2" checked>
<label for="bc_appmain2-5">EDITORIAL</label>
<div class="bc_content">
<div class="bc_mainimg">
<img src="http://placehold.it/450x400" />
</div>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-6" name="bc_appmain2-group-2">
<label for="bc_appmain2-6">BASICS</label>
<div class="bc_content">

<table><tr valign="top"><td>
<div class="bc_tretext"><div class="bc_tretext2">

<h1>Basics</h1>

<h2>Name</h2> <h3>First Middle Last</h3>
<h2>Age</h2> <h3>In letters</h3>
<h2>Member Group</h2> <h3>List here</h3>
<h2>Birthday</h2> <h3>Day / Month</h3><p>
<h2>Birthplace</h2> <h3>City, State</h3><p>
<h2>Secret</h2> <h3>Here</h3>

<h1>Career</h1>

<h2>Occupation</h2> <h3>List here</h3>
<h2>Workplace</h2> <h3>List here</h3>
<h2>Education</h2> <h3>School (degree); School (degree)</h3>

<h1>Relationships</h1>

<h2>Sexual Orientation</h2> <h3>List here</h3>
<h2>Relationship Status</h2> <h3>List here</h3>
<h2>Current Partner</h2> <h3>List here</h3>

<h1>Player</h1>
<h2>Alias</h2> <h3>List here</h3>
<h2>Timezone</h2> <h3>List here</h3>
<h2>Contact</h2> <h3>List here</h3>
<h2>Pref. Pronouns</h2> <h3>List here</h3>

</div></div>
</td><td>
<div class="bc_treimg">
<img src="http://placehold.it/200x400" />
</div>
</td></tr></table>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-7" name="bc_appmain2-group-2">
<label for="bc_appmain2-7">FREESTYLE</label>
<div class="bc_content">
<table><tr valign="top"><td>
<div class="bc_secimg">
<img src="http://placehold.it/200x400" />
</div>
</td><td>
<div class="bc_sectext"><div class="bc_sectext2">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p />

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div>
</td></tr></table>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-8" name="bc_appmain2-group-2">
<label for="bc_appmain2-8">SHIPPER</label>
<div class="bc_content">

<div class="bc_ship"><div class="bc_ship2"><div class="bc_ship3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p />

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div></div>

</div>
</div>

</div>

</div>

</div>

<div class="merc_cred"><a href="http://cttw.jcink.net/index.php?showuser=160">merc</a></div>

[/dohtml]

CHOLERIC

CODE

[dohtml]
<link href='http://fonts.googleapis.com/css?family=Inder|Vidaloka|Raleway:700,400' rel='stylesheet' type='text/css'>

<style type="text/css">
.bc_app {
width: 500px;
margin: 25px auto;
}
.bc_app2 {
background-color: #000;
color: #fff;
padding: 25px;
font-family: raleway;
text-transform: lowercase;
font-size: 18px;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
}
.bc_appline {
background-color: #fff;
height: 1px;
width: 95%;
margin: 10px auto;
}
.bc_appbg {
background-color: #fff;
padding: 10px;
height: 430px;
border-bottom: 1px solid #756683 !important;
}
.bc_appmain { position: relative; margin: auto; width: 450px; height: 450px; clear: both; }
.bc_appmain2 { float: left; }
.bc_appmain2 label { display: block; width: 112.5px; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; font-family: inder; font-size: 7px; text-align: center; line-height: 100%; letter-spacing: 2px; color: #000; background-color: #fff;border-bottom: 1px solid #000; }
.bc_appmain .bc_appmain2 [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
.bc_content { width: 450px; height: 400px; position: absolute; top: 28px; bottom: 0px; left: 0px; right: 0px; z-index: 1; border-bottom: 1px solid #000; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label { background: #fff; border-bottom: 1px solid #756683; color: #756683; z-index: 2; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label ~ .bc_content { z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }
.bc_mainimg {
height: 400px;
width: 450px;
overflow: hidden;
border-bottom: 1px solid #000;
}
.bc_secimg {
height: 400px;
width: 200px;
overflow: hidden;
margin-top: -1px;
}
.bc_sectext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_sectext2 {
width: 215px;
height: 375px;
text-align: justify;
font-family: times;
font-size: 12px;
line-height: 115%;
color: #000;
overflow: auto;
padding-right: 5px;
}
.bc_tretext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_tretext2 {
width: 215px;
height: 375px;
overflow: auto;
}
.bc_tretext2 h1 {
font-family: raleway;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.bc_tretext2 h2 {
font-family: raleway;
text-align: left;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
color: #756683 !important;
font-size: 11px;
padding-left: 5px;
margin-top: -5px;
}
.bc_tretext2 h3 {
font-weight: normal;
font-family: inder;
font-size: 11px;
text-align: left;
margin-top: -15px;
padding-left: 15px;
}
.bc_treimg {
height: 400px;
width: 200px;
overflow: hidden;
margin-top: -1px;
margin-left: -8px;
}
.bc_ship {
width: 450px;
height: 400px;
background-image: url(http://i68.tinypic.com/10p7laq.png) !important;
}
.bc_ship2 {
width: 230px;
height: 230px;
margin-left: 100px;
margin-top: 80px;
color: #fff;
font-family: verdana;
font-size: 10px;
line-height: 115%;
text-align: justify;
padding: 10px;
float: left;
background-image: url(http://i68.tinypic.com/a0gy2s.png) !important;
}
.bc_ship3 {
width: 230px;
height: 230px;
overflow: auto;
padding-right: 5px;
}
.merc_cred { text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase; margin-top: -20px; margin-bottom: 25px; }
</style>

<div class="bc_app"><div class="bc_app2" style="background-color:#756683">
<div class="bc_appline"></div>
first middle last
<div class="bc_appline"></div>
</div>

<div class="bc_appbg">

<div class="bc_appmain">

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-5" name="bc_appmain2-group-2" checked>
<label for="bc_appmain2-5">EDITORIAL</label>
<div class="bc_content">
<div class="bc_mainimg">
<img src="http://placehold.it/450x400" />
</div>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-6" name="bc_appmain2-group-2">
<label for="bc_appmain2-6">BASICS</label>
<div class="bc_content">

<table><tr valign="top"><td>
<div class="bc_tretext"><div class="bc_tretext2">

<h1>Basics</h1>

<h2>Name</h2> <h3>First Middle Last</h3>
<h2>Age</h2> <h3>In letters</h3>
<h2>Member Group</h2> <h3>List here</h3>
<h2>Birthday</h2> <h3>Day / Month</h3><p>
<h2>Birthplace</h2> <h3>City, State</h3><p>
<h2>Secret</h2> <h3>Here</h3>

<h1>Career</h1>

<h2>Occupation</h2> <h3>List here</h3>
<h2>Workplace</h2> <h3>List here</h3>
<h2>Education</h2> <h3>School (degree); School (degree)</h3>

<h1>Relationships</h1>

<h2>Sexual Orientation</h2> <h3>List here</h3>
<h2>Relationship Status</h2> <h3>List here</h3>
<h2>Current Partner</h2> <h3>List here</h3>

<h1>Player</h1>
<h2>Alias</h2> <h3>List here</h3>
<h2>Timezone</h2> <h3>List here</h3>
<h2>Contact</h2> <h3>List here</h3>
<h2>Pref. Pronouns</h2> <h3>List here</h3>

</div></div>
</td><td>
<div class="bc_treimg">
<img src="http://placehold.it/200x400" />
</div>
</td></tr></table>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-7" name="bc_appmain2-group-2">
<label for="bc_appmain2-7">FREESTYLE</label>
<div class="bc_content">
<table><tr valign="top"><td>
<div class="bc_secimg">
<img src="http://placehold.it/200x400" />
</div>
</td><td>
<div class="bc_sectext"><div class="bc_sectext2">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p />

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div>
</td></tr></table>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-8" name="bc_appmain2-group-2">
<label for="bc_appmain2-8">SHIPPER</label>
<div class="bc_content">

<div class="bc_ship"><div class="bc_ship2"><div class="bc_ship3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p />

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div></div>

</div>
</div>

</div>

</div>

</div>

<div class="merc_cred"><a href="http://cttw.jcink.net/index.php?showuser=160">merc</a></div>

[/dohtml]

Mari

Posted: May 1 2016, 09:36 AM

Quote

Mari
@Mari

age
30

posts
142

tracker
playlist

dev.
app

@N/A: N/A

PHLEGMATIC

CODE

[dohtml]
<link href='http://fonts.googleapis.com/css?family=Inder|Vidaloka|Raleway:700,400' rel='stylesheet' type='text/css'>

<style type="text/css">
.bc_app {
width: 500px;
margin: 25px auto;
}
.bc_app2 {
background-color: #000;
color: #fff;
padding: 25px;
font-family: raleway;
text-transform: lowercase;
font-size: 18px;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
}
.bc_appline {
background-color: #fff;
height: 1px;
width: 95%;
margin: 10px auto;
}
.bc_appbg {
background-color: #fff;
padding: 10px;
height: 430px;
border-bottom: 1px solid #D47A84 !important;
}
.bc_appmain { position: relative; margin: auto; width: 450px; height: 450px; clear: both; }
.bc_appmain2 { float: left; }
.bc_appmain2 label { display: block; width: 112.5px; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; font-family: inder; font-size: 7px; text-align: center; line-height: 100%; letter-spacing: 2px; color: #000; background-color: #fff;border-bottom: 1px solid #000; }
.bc_appmain .bc_appmain2 [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
.bc_content { width: 450px; height: 400px; position: absolute; top: 28px; bottom: 0px; left: 0px; right: 0px; z-index: 1; border-bottom: 1px solid #000; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label { background: #fff; border-bottom: 1px solid #D47A84; color: #D47A84; z-index: 2; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label ~ .bc_content { z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }
.bc_mainimg {
height: 400px;
width: 450px;
overflow: hidden;
border-bottom: 1px solid #000;
}
.bc_secimg {
height: 400px;
width: 200px;
overflow: hidden;
margin-top: -1px;
}
.bc_sectext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_sectext2 {
width: 215px;
height: 375px;
text-align: justify;
font-family: times;
font-size: 12px;
line-height: 115%;
color: #000;
overflow: auto;
padding-right: 5px;
}
.bc_tretext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_tretext2 {
width: 215px;
height: 375px;
overflow: auto;
}
.bc_tretext2 h1 {
font-family: raleway;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.bc_tretext2 h2 {
font-family: raleway;
text-align: left;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
color: #D47A84 !important;
font-size: 11px;
padding-left: 5px;
margin-top: -5px;
}
.bc_tretext2 h3 {
font-weight: normal;
font-family: inder;
font-size: 11px;
text-align: left;
margin-top: -15px;
padding-left: 15px;
}
.bc_treimg {
height: 400px;
width: 200px;
overflow: hidden;
margin-top: -1px;
margin-left: -8px;
}
.bc_ship {
width: 450px;
height: 400px;
background-image: url(http://i68.tinypic.com/10p7laq.png) !important;
}
.bc_ship2 {
width: 230px;
height: 230px;
margin-left: 100px;
margin-top: 80px;
color: #fff;
font-family: verdana;
font-size: 10px;
line-height: 115%;
text-align: justify;
padding: 10px;
float: left;
background-image: url(http://i63.tinypic.com/2dgw1va.png) !important;
}
.bc_ship3 {
width: 230px;
height: 230px;
overflow: auto;
padding-right: 5px;
}
.merc_cred { text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase; margin-top: -20px; margin-bottom: 25px; }
</style>

<div class="bc_app"><div class="bc_app2" style="background-color:#D47A84">
<div class="bc_appline"></div>
first middle last
<div class="bc_appline"></div>
</div>

<div class="bc_appbg">

<div class="bc_appmain">

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-5" name="bc_appmain2-group-2" checked>
<label for="bc_appmain2-5">EDITORIAL</label>
<div class="bc_content">
<div class="bc_mainimg">
<img src="http://placehold.it/450x400" />
</div>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-6" name="bc_appmain2-group-2">
<label for="bc_appmain2-6">BASICS</label>
<div class="bc_content">

<table><tr valign="top"><td>
<div class="bc_tretext"><div class="bc_tretext2">

<h1>Basics</h1>

<h2>Name</h2> <h3>First Middle Last</h3>
<h2>Age</h2> <h3>In letters</h3>
<h2>Member Group</h2> <h3>List here</h3>
<h2>Birthday</h2> <h3>Day / Month</h3><p>
<h2>Birthplace</h2> <h3>City, State</h3><p>
<h2>Secret</h2> <h3>Here</h3>

<h1>Career</h1>

<h2>Occupation</h2> <h3>List here</h3>
<h2>Workplace</h2> <h3>List here</h3>
<h2>Education</h2> <h3>School (degree); School (degree)</h3>

<h1>Relationships</h1>

<h2>Sexual Orientation</h2> <h3>List here</h3>
<h2>Relationship Status</h2> <h3>List here</h3>
<h2>Current Partner</h2> <h3>List here</h3>

<h1>Player</h1>
<h2>Alias</h2> <h3>List here</h3>
<h2>Timezone</h2> <h3>List here</h3>
<h2>Contact</h2> <h3>List here</h3>
<h2>Pref. Pronouns</h2> <h3>List here</h3>

</div></div>
</td><td>
<div class="bc_treimg">
<img src="http://placehold.it/200x400" />
</div>
</td></tr></table>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-7" name="bc_appmain2-group-2">
<label for="bc_appmain2-7">FREESTYLE</label>
<div class="bc_content">
<table><tr valign="top"><td>
<div class="bc_secimg">
<img src="http://placehold.it/200x400" />
</div>
</td><td>
<div class="bc_sectext"><div class="bc_sectext2">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p />

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div>
</td></tr></table>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-8" name="bc_appmain2-group-2">
<label for="bc_appmain2-8">SHIPPER</label>
<div class="bc_content">

<div class="bc_ship"><div class="bc_ship2"><div class="bc_ship3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p />

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div></div>

</div>
</div>

</div>

</div>

</div>

<div class="merc_cred"><a href="http://cttw.jcink.net/index.php?showuser=160">merc</a></div>

[/dohtml]

MELANCHOLIC

CODE

[dohtml]
<link href='http://fonts.googleapis.com/css?family=Inder|Vidaloka|Raleway:700,400' rel='stylesheet' type='text/css'>

<style type="text/css">
.bc_app {
width: 500px;
margin: 25px auto;
}
.bc_app2 {
background-color: #000;
color: #fff;
padding: 25px;
font-family: raleway;
text-transform: lowercase;
font-size: 18px;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
}
.bc_appline {
background-color: #fff;
height: 1px;
width: 95%;
margin: 10px auto;
}
.bc_appbg {
background-color: #fff;
padding: 10px;
height: 430px;
border-bottom: 1px solid #5E88A3 !important;
}
.bc_appmain { position: relative; margin: auto; width: 450px; height: 450px; clear: both; }
.bc_appmain2 { float: left; }
.bc_appmain2 label { display: block; width: 112.5px; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; font-family: inder; font-size: 7px; text-align: center; line-height: 100%; letter-spacing: 2px; color: #000; background-color: #fff;border-bottom: 1px solid #000; }
.bc_appmain .bc_appmain2 [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
.bc_content { width: 450px; height: 400px; position: absolute; top: 28px; bottom: 0px; left: 0px; right: 0px; z-index: 1; border-bottom: 1px solid #000; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label { background: #fff; border-bottom: 1px solid #5E88A3; color: #5E88A3; z-index: 2; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label ~ .bc_content { z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }
.bc_mainimg {
height: 400px;
width: 450px;
overflow: hidden;
border-bottom: 1px solid #000;
}
.bc_secimg {
height: 400px;
width: 200px;
overflow: hidden;
margin-top: -1px;
}
.bc_sectext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_sectext2 {
width: 215px;
height: 375px;
text-align: justify;
font-family: times;
font-size: 12px;
line-height: 115%;
color: #000;
overflow: auto;
padding-right: 5px;
}
.bc_tretext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_tretext2 {
width: 215px;
height: 375px;
overflow: auto;
}
.bc_tretext2 h1 {
font-family: raleway;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.bc_tretext2 h2 {
font-family: raleway;
text-align: left;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
color: #5E88A3 !important;
font-size: 11px;
padding-left: 5px;
margin-top: -5px;
}
.bc_tretext2 h3 {
font-weight: normal;
font-family: inder;
font-size: 11px;
text-align: left;
margin-top: -15px;
padding-left: 15px;
}
.bc_treimg {
height: 400px;
width: 200px;
overflow: hidden;
margin-top: -1px;
margin-left: -8px;
}
.bc_ship {
width: 450px;
height: 400px;
background-image: url(http://i68.tinypic.com/10p7laq.png) !important;
}
.bc_ship2 {
width: 230px;
height: 230px;
margin-left: 100px;
margin-top: 80px;
color: #fff;
font-family: verdana;
font-size: 10px;
line-height: 115%;
text-align: justify;
padding: 10px;
float: left;
background-image: url(http://i65.tinypic.com/2qbr7ye.png) !important;
}
.bc_ship3 {
width: 230px;
height: 230px;
overflow: auto;
padding-right: 5px;
}
.merc_cred { text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase; margin-top: -20px; margin-bottom: 25px; }
</style>

<div class="bc_app"><div class="bc_app2" style="background-color:#5E88A3">
<div class="bc_appline"></div>
first middle last
<div class="bc_appline"></div>
</div>

<div class="bc_appbg">

<div class="bc_appmain">

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-5" name="bc_appmain2-group-2" checked>
<label for="bc_appmain2-5">EDITORIAL</label>
<div class="bc_content">
<div class="bc_mainimg">
<img src="http://placehold.it/450x400" />
</div>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-6" name="bc_appmain2-group-2">
<label for="bc_appmain2-6">BASICS</label>
<div class="bc_content">

<table><tr valign="top"><td>
<div class="bc_tretext"><div class="bc_tretext2">

<h1>Basics</h1>

<h2>Name</h2> <h3>First Middle Last</h3>
<h2>Age</h2> <h3>In letters</h3>
<h2>Member Group</h2> <h3>List here</h3>
<h2>Birthday</h2> <h3>Day / Month</h3><p>
<h2>Birthplace</h2> <h3>City, State</h3><p>
<h2>Secret</h2> <h3>Here</h3>

<h1>Career</h1>

<h2>Occupation</h2> <h3>List here</h3>
<h2>Workplace</h2> <h3>List here</h3>
<h2>Education</h2> <h3>School (degree); School (degree)</h3>

<h1>Relationships</h1>

<h2>Sexual Orientation</h2> <h3>List here</h3>
<h2>Relationship Status</h2> <h3>List here</h3>
<h2>Current Partner</h2> <h3>List here</h3>

<h1>Player</h1>
<h2>Alias</h2> <h3>List here</h3>
<h2>Timezone</h2> <h3>List here</h3>
<h2>Contact</h2> <h3>List here</h3>
<h2>Pref. Pronouns</h2> <h3>List here</h3>

</div></div>
</td><td>
<div class="bc_treimg">
<img src="http://placehold.it/200x400" />
</div>
</td></tr></table>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-7" name="bc_appmain2-group-2">
<label for="bc_appmain2-7">FREESTYLE</label>
<div class="bc_content">
<table><tr valign="top"><td>
<div class="bc_secimg">
<img src="http://placehold.it/200x400" />
</div>
</td><td>
<div class="bc_sectext"><div class="bc_sectext2">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p />

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div>
</td></tr></table>
</div>
</div>

<div class="bc_appmain2">
<input type="radio" id="bc_appmain2-8" name="bc_appmain2-group-2">
<label for="bc_appmain2-8">SHIPPER</label>
<div class="bc_content">

<div class="bc_ship"><div class="bc_ship2"><div class="bc_ship3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p />

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div></div>

</div>
</div>

</div>

</div>

</div>

<div class="merc_cred"><a href="http://cttw.jcink.net/index.php?showuser=160">merc</a></div>

[/dohtml]