<!--HTML--><style type="text/css">
@font-face {
   font-family: 'yaquote_script_personal_useRg';
   src: url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/YaquoteScript_PersonalUse_webfont.eot');
   src: url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/YaquoteScript_PersonalUse_webfont.eot?#iefix') format('embedded-opentype'),
    url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/YaquoteScript_PersonalUse_webfont.woff') format('woff'),
        url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/YaquoteScript_PersonalUse_webfont.ttf') format('truetype'),
       url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/YaquoteScript_PersonalUse_webfont.svg') format('svg');
   font-weight: normal;
   font-style: normal;}

@font-face {
   font-family: 'editionregular';
   src: url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/EDITION__webfont.eot');
   src: url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/EDITION__webfont.eot?#iefix') format('embedded-opentype'),
        url('EDITION_-webfont.woff2') format('woff2'),
        url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/EDITION__webfont.woff') format('woff'),
        url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/EDITION__webfont.ttf') format('truetype'),
        url('http://sophiakattester.b1.jcink.com/uploads/sophiakattester/EDITION__webfont.svg') format('svg');
   font-weight: normal;
   font-style: normal;

}

.ship002sophkat {max-width:500px; height: auto; background-color: #000; padding:0px; text-align: center;  border: 20px solid #f3f3f3; border-top: 50px solid #f3f3f3;}
.ship002sophkat td {border: 8px solid #f3f3f3; background-color: #f3f3f3;}
.ship002head {font-family: 'yaquote_script_personal_useRg'; font-size: 75px; color: #000; line-height: 85%; position: relative; top:35px; z-index: 2;}
.shipcontenttext {padding-top: 25px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: 'Century Gothic'; font-size: 10px;  color: #000;}
.shipcontenttext h3 {font-family: 'yaquote_script_personal_useRg'; font-size: 25px; color: #000; margin: 0px; letter-spacing:1px;}
.shipcontenta h1 {font-family: 'editionregular'; font-size: 20px; color: #000; margin: 0px; transform: translateY(-23px); letter-spacing: 2px;}
.shipcontentb h2 {font-family: 'editionregular'; font-size: 20px; color: #000; margin: 0px; transform: translateY(-23px); letter-spacing: 2px;}
.shipcontentbody {width: 170px; height: 100px;  overflow: auto; background-color: #fff; padding: 5px; font-family: 'Arial Narrow'; font-size: 10px; color: #000; line-height: 98%;   }

.ship002a {width: 210px; height: 230px; overflow: hidden; position: relative;}
.ship002a .shipcontenta { -WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; position: absolute; left: 0px; top: 0px; width: 210px; height: 230px;}
.ship002a:hover .shipcontenta {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; left: 0px;}
.ship002a:hover .shipcontenta {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; top: -205px;}

.ship002b {width: 210px; height: 230px; overflow: hidden; position: relative;}
.ship002b .shipcontentb { -WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; position: absolute; right: 0px; top: 0px; width: 210px; height: 230px;}
.ship002b:hover .shipcontentb {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; right: 0px;}
.ship002b:hover .shipcontentb {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; top: -205px;}

.ship002cred { font-family: 'Arial Narrow'; font-size: 10px; color: #000; letter-spacing: 1px; text-align: center;}

.shipcontentbody::-webkit-scrollbar { background: #000; width: 3px; border: 2px solid transparent; }
.shipcontentbody::-webkit-scrollbar-thumb { background: #79a1d0; outline: 1px solid #000; }
.shipcontentbody::-webkit-scrollbar-corner { background: #fff; }
</style>

<center>
<div class="ship002head">Alias</div>
<table class="ship002sophkat">

<tr><td>
<div class="ship002a"><div class="shipcontenta">
<img src="http://placehold.it/200" style="border: 5px solid #fff; border-bottom: 25px solid #fff; transform: scale(1); "><h1>Face + Claim</h1></div>
<div class="shipcontenttext"> as <h3>Character Name</h3>Trait . Trait . Trait
<br><br><center><div class="shipcontentbody"> This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! This is where the shipper content goes! Woot Woot! I know its small but it scrolls I promise!! </div></center>
</div>
</div></td>

<td><div class="ship002b"><div class="shipcontentb"><img src="http://placehold.it/200" style="border: 5px solid #fff; border-bottom: 25px solid #fff; transform: scale(1); "> <h2>Face + Claim</h2></div>
<div class="shipcontenttext"> as <h3>Character Name</h3>Trait . Trait . Trait
<br><br><center><div class="shipcontentbody"> Watch out world here I come </div></center>
</div></div></td></tr>

<tr><td><div class="ship002a"><div class="shipcontenta"><img src="http://placehold.it/200" style="border: 5px solid #fff; border-bottom: 25px solid #fff; transform: scale(1); "><h1>Face + Claim</h1></div>
<div class="shipcontenttext"> as <h3>Character Name </h3>Trait . Trait . Trait
<br><br><center><div class="shipcontentbody"> Watch out world here I come </div></center>
</div></div></td>

<td><div class="ship002b"><div class="shipcontentb"><img src="http://placehold.it/200" style="border: 5px solid #fff; border-bottom: 25px solid #fff; transform: scale(1); "><h2>Face + Claim</h2></div>
<div class="shipcontenttext"> as <h3>Character Name</h3>Trait . Trait . Trait
<br><br><center><div class="shipcontentbody"> Watch out world here I come </div></center>
</div></div></td></tr>
</table>
<div class="ship002cred">Credit to SophiaKat @ <a href="http://shine.b1.jcink.com/index.php?showuser=8485">Shine</a></div>

</center>

<!--HTML--><link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Raleway:400,900' rel='stylesheet' type='text/css'>
<style type="Text/css">
@font-face {
font-family: 'Montez_Regular_webfont'; font-style: normal;
src: url('http://brooklyn.b1.jcink.com/uploads/brooklyn/Montez_Regular_webfont.eot') format('eot'), 
   url('http://brooklyn.b1.jcink.com/uploads/brooklyn/Montez_Regular_webfont.woff') format('woff'), 
   url('http://brooklyn.b1.jcink.com/uploads/brooklyn/Montez_Regular_webfont.ttf')  format('truetype'),
   url('http://brooklyn.b1.jcink.com/uploads/brooklyn/Montez_Regular_webfont.svg') format('svg');
}
#sbg { width: 400px; height: 500px; overflow: hidden; border: 5px solid #fff; outline: 1px solid #cecece; }
.sbg-one { width: 400px; height: 500px; background-image: url(http://i.imgur.com/7oCdSRa.png); }
.sbg-two { width: 0; height: 0; border-style: solid; border-width: 0 75px 500px 75px; border-color: transparent transparent #F8C7C9 transparent; opacity: .5; position: relative; top: -500px; margin-bottom: -500px; -webkit-transform: rotate(70deg); -moz-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); transform: rotate(70deg); }
.sbg-three { font-family: montez_regular_webfont; font-size: 130px; text-transform: lowercase; color: #F7D7CD; position: relative; top: -420px; margin-bottom: -420px; left: -70px; font-weight: bold; text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; }
.sbg-four { font-family: lato; font-size: 10px; color: #999; position: relative; height: 50px; line-height: 100%; text-align: justify; width: 190px; top: 25px; left: -65px; overflow: hidden; }
.sbg-five { width: 225px; height: 225px; padding: 5px; background-color: #fff; border: 1px solid #eee; position: relative; top: 95px; left: 50px; }
.sbg-six { width: 225px; height: 225px; background-size: cover; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); filter: url(desaturate.svg#greyscale); }
.sbg-seven { font-family: raleway; font-size: 10px; color: #fff; line-height: 100%; color: #9a9a9a; -webkit-transform: rotate(-11deg); -ms-transform: rotate(-11deg); transform: rotate(-11deg); -o-transform: rotate(-11deg); -moz-transform: rotate(-11deg); position: relative; top: -300px; margin-bottom: -10px; text-transform: uppercase; }
.sbg-eight { width: 225px; height: 225px; background-color: rgba(199,185,197,.6); position: relative; top: -225px; margin-bottom: -225px; }
.sbg-nine { width: 205px; height: 205px; background-color: #fff; padding: 10px; -webkit-transform: scale(0,0); transform: scale(0,0);  -moz-transform: scale(0,0);  -o-transform: scale(0,0);  -ms-transform: scale(0,0); -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; position: relative; top: -225px; margin-bottom: -225px; font-family: lato; font-size: 10px; text-align: justify; line-height: 95%; color: #6a6a6a; }
#sbg:hover .sbg-nine { -webkit-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); -o-transform: scale(1,1); }
.sbg-ten { width: 200px; padding-right: 5px; overflow: auto; height: 205px; }
.sbg-ten b { font-family: raleway; font-weight: 900; color: #E0C0C7; line-height: 95%; }
.sbg-ten::-webkit-scrollbar { width: 5px; }
.sbg-ten::-webkit-scrollbar-track { background-color: #fff; }
.sbg-ten::-webkit-scrollbar-thumb { background-color: #F3E7D7; }
</style>
<center>
<div id="sbg">
<div class="sbg-one"></div>
<div class="sbg-seven">CAREER + GROUP + AGE + FACE CLAIM + TRAIT</div>
<div class="sbg-two"></div>
<div class="sbg-three">eden</div>
<div class="sbg-four">Babe, there's something lonesome about you
Something so wholesome about you
Get closer to me

No tired sighs, no rolling eyes, no irony
No 'who cares', no vacant stares, no time for me

Honey, you're familiar like my mirror years ago
Idealism sits in prison, chivalry fell on its sword
Innocence died screaming, honey, ask me I should know</div>
<div class="sbg-five"><div class="sbg-six" style="background-image: url(http://41.media.tumblr.com/870edea3d80bf51c838cf55122c4ebc5/tumblr_nsdsspSaIL1t4zhp4o1_500.png);"></div><div class="sbg-eight"></div><div class="sbg-nine"><div class="sbg-ten">blah blah blah the<B> shipper part goes here</b> Jelly-o pastry caramels lemon drops. Biscuit candy canes cake lollipop bonbon lemon drops ice cream. Marzipan jujubes donut apple pie I love tart brownie. Chocolate halvah dragée cheesecake lemon drops oat cake pie brownie icing. Pudding jelly-o pie biscuit jujubes chocolate cake cookie. Gummies tiramisu bonbon marzipan chupa chups jelly cheesecake icing. Bear claw halvah jelly beans muffin gummi bears gummi bears chupa chups I love fruitcake. Cake tart sweet. Lollipop soufflé icing caramels. Jelly beans I love jelly beans marzipan brownie pie toffee danish pie. Danish lemon drops powder tart lollipop dragée jujubes macaroon. Jelly-o pudding cake chocolate bar bonbon sugar plum donut. Carrot cake soufflé I love sweet roll muffin wafer I love cheesecake apple pie. Macaroon brownie cake. I love I love powder. Marzipan candy canes halvah cheesecake gummies powder jelly gingerbread. Brownie apple pie carrot cake. Croissant gummies jelly beans cotton candy. Carrot cake I love fruitcake sweet roll gingerbread jelly I love powder. I love pie fruitcake toffee jujubes. I love brownie dragée jelly beans. Sweet roll tart chocolate bar tiramisu. Toffee pudding tiramisu candy I love cake. Liquorice gummies toffee toffee cheesecake cake cake I love chocolate. Toffee tiramisu fruitcake gummies jelly beans oat cake marzipan cookie. Ice cream liquorice sesame snaps cake I love cupcake wafer. Fruitcake lemon drops cotton candy marzipan.</div></div></div>
</div>

</center><center><a href="http://shine.b1.jcink.com/index.php?showuser=10542">©</a></center>

<!--HTML--><center><link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'><div style="width: 410px; padding: 25px; background: url(http://subtlepatterns.com/patterns/billie_holiday.png);"><div style="width: 400px; padding: 5px; background: #fff;">
<div style='width: 350px; height: 50px; padding: 25px; background: #b795a0;'>
<div style="text-align: left; margin-top: 20px; font-family: roboto condensed; font-size: 36px; letter-spacing: -1px; color: #fff; line-height: 80%; text-transform: lowercase;">

CHARACTER NAME HERE

</div><div style="text-align: left; font-family: calibri; font-size: 8px; letter-spacing: 1px; color: #fff; line-height: 90%; text-transform: uppercase; margin-left: 10px;">

AGE - JOB - PLAY-BY

</div></div>
<div style='background: url(SQUARE ICON/GIF HERE - WILL RESIZE); background-size: cover; width: 120px; height: 120px; border: 5px solid #b795a0; position: relative; top: -75px; right: -130px; border-radius: 100%; z-index: 1;'></div>

<div style="width: 400px; height: 200px; position: relative; top: -135px; margin-bottom: -135px; background: #fff;"><div style="width: 240px; height: 180px; float: left; padding: 10px;"><div style="width: 235px; height: 170px; background: #fff; padding: 5px;"><div style="width: 230px; padding-right: 5px; font-family: calibri; height: 170px; color: #000; font-size: 10px; text-align: justify; line-height: 100%; overflow: auto;" class="everybody"><p>

<b>meet (character name here)</b>. BLAH BLAH BLAH

<p><b>friends</b>. BLAH BLAH BLAH HERE

<p><b>enemies</b>. BLAH BLAH BLAH HERE

<p><b>lovers</b>. BLAH BLAH BLAH HERE

</div></div></div><div style="width: 120px; padding: 10px; height: 180px; float: right;"><div style="width: 110px; height: 60px;"></div>

<div class="block"><div class="blockword">DETAIL</div></div><p>
<div class="block"><div class="blockword">DETAIL</div></div><p>
<div class="block"><div class="blockword">DETAIL</div></div><p>
<div class="block"><div class="blockword">DETAIL</div></div></div></div>

</div></div><a href="http://shine.b1.jcink.com/index.php?showuser=3048"><div style="width: 295px; color: #000; font-family: calibri; font-size: 7px; letter-spacing: 3px; margin-top: 3px; text-align: center;">WHAT KATY DID</div></a></center><style>.everybody::-webkit-scrollbar {width: 2px;}
.everybody::-webkit-scrollbar-track {background-color: #fff;}
.everybody::-webkit-scrollbar-thumb {background-color: #b795a0; border-top: 10px solid #fff; border-bottom: 10px solid #fff;} 
.everybody b {color: #b795a0; font-size: 11px; text-transform: uppercase;}
.block {width: 110px; height: 10px; padding: 5px; margin-left: -5px; background: #b795a0;}
.blockword {text-align: center; font-family: calibri; font-size: 8px; letter-spacing: 1px; color: #fff; text-transform: uppercase;}</style>

<!--HTML--><style>



.tabss {
position: relative;  
width: 450px;
height:  500px;
border: 0px solid #ffccdd;
padding: 0px;
background-color: #D88A8A;
}

.tabb {float: left;}

.tabb label {display: block;
width: 10px;
height: 10px;
background: #C5CFC6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 4px;
position: relative;
top: 50px;
left: 45px;}

.tabb [type=radio] {
display: none;  
}

.contentt {
position: absolute;
top: 100px;
left: 0px;
width: 450px; 
height: 400px;
background: #D88A8A;
padding: 0px;
border: 0px solid #000;}

[type=radio]:checked ~ label {color: #ffccdd; background-color: eeeeee; border-bottom: 0px solid white; z-index: 2;}

[type=radio]:checked ~ label ~ .contentt {z-index: 1;}

::-webkit-scrollbar { background: #f7f7f7; width: 2px; }
::-webkit-scrollbar-thumb { background: #C5CFC6; width: 2x }
::-webkit-scrollbar-corner { background: #fff; }

.name { border-bottom: 1px solid #000; padding-bottom: 5px; opacity: .9; font-size: 8px; font-family: calibri; letter-spacing: 1px; }
.info { font-size: 8px; letter-spacing: 1px; padding-top: 5px; opacity: .9 }

</style>


<div class="tabss">
<div class="tabb">
<input type="radio" id="tabb-1" name="tabb-group-1" checked>
<label for="tabb-1">  </label><div style="width: 3px; height: 3px;"></div>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum ligula, luctus in magna eu, iaculis porttitor dolor. Curabitur tincidunt, libero a sodales dictum, eros purus suscipit ante, pharetra hendrerit felis orci a dui. Integer varius ultrices porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae enim feugiat turpis accumsan gravida at nec diam. Proin viverra placerat posuere. Phasellus id nulla arcu. Vivamus nisi ipsum, ultrices ut ligula a, vestibulum dapibus tortor. In semper vestibulum nunc, eu sollicitudin nibh vulputate et. Curabitur congue lectus eu varius porttitor. Cras pharetra et urna nec aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent a adipiscing augue, in egestas quam.<p>

Suspendisse potenti. Donec turpis nunc, auctor ut pretium eget, fermentum nec felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras laoreet rutrum mollis. Aenean pellentesque id dui sit amet luctus. Praesent sit amet pretium lectus. Maecenas ultricies sit amet elit nec faucibus. Duis aliquet nisi justo, in consectetur felis gravida id.<p>

Sed tempus velit tortor, ut dictum turpis mollis egestas. Sed hendrerit lorem vitae sem laoreet vulputate. Integer bibendum iaculis nulla at congue. Sed et cursus arcu, non faucibus est. Nam pretium libero eu eros porta mattis. Nullam pharetra nulla at elit vestibulum, sed rutrum diam gravida. Cras sit amet augue porttitor, consectetur nunc vel, condimentum est. Mauris nec orci a nulla aliquet mattis. Donec ut metus nulla. Morbi lacus orci, posuere eu nisi in, condimentum malesuada dolor. Proin non congue felis, ut consequat arcu. Vestibulum scelerisque, metus vel viverra varius, orci diam tincidunt felis, ut ultrices mi mi a ante.

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(https://dl.dropboxusercontent.com/u/88431993/quat.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>eloise t. choi</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-2" name="tabb-group-1">
<label for="tabb-2">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(https://dl.dropboxusercontent.com/u/88431993/dos.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-3" name="tabb-group-1">
<label for="tabb-3">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(https://dl.dropboxusercontent.com/u/88431993/tres.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-4" name="tabb-group-1">
<label for="tabb-4">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/fe29f4109e16defdfe3422dfbbda0aef/tumblr_inline_namqfmmXkn1r1ha8o.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-5" name="tabb-group-1">
<label for="tabb-5">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/a1bdd1225d3e88d5ae01aef9e9364860/tumblr_inline_namqfo8YG71r1ha8o.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-6" name="tabb-group-1">
<label for="tabb-6">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/75586537dd0a788d2de3545d9ec50bfe/tumblr_inline_namqfrldnC1r1ha8o.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-7" name="tabb-group-1">
<label for="tabb-7">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/9115edfabf217d2c194e13f6fffac8c2/tumblr_inline_namqfujQcf1r1ha8o.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-8" name="tabb-group-1">
<label for="tabb-8">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/5e8bdcaa011a1d2897c9d77a2be20cd4/tumblr_inline_namqfx9uHa1r1ha8o.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-9" name="tabb-group-1">
<label for="tabb-9">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/8da2e531c11fa95c8ce6dcc6124c0901/tumblr_inline_namqfzE2OH1r1ha8o.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-10" name="tabb-group-1">
<label for="tabb-10">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/3dee4997cf438ff6856b0a3685c32155/tumblr_inline_namqg2umS41r1ha8o.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>

<div class="tabb">
<input type="radio" id="tabb-11" name="tabb-group-1">
<label for="tabb-11">   </label>
<div class="contentt">

<table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">

words

</div></div></div></td>
<td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/3dee4997cf438ff6856b0a3685c32155/tumblr_inline_namqg2umS41r1ha8o.png);">

<center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>

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

</div>
</div>


</div><div style="margin-left: 440px;"><a href="http://shine.b1.jcink.com/index.php?showuser=1923">©</a></div>

</center>

</center>

<!--HTML--><center><link href='http://fonts.googleapis.com/css?family=NTR' rel='stylesheet' type='text/css'><div style="width: 400px; height: 270px; padding: 15px;  background: url(http://i.imgur.com/G0uJ3M4.png); z-index: 1;"></div><center><div class="tabs"><div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1"><div style="width: 120px; height: 120px; border: 2px solid #fff; position: relative; top: -60px; border-radius: 100%; background: url(120X120 GIF/ICON HERE. WILL RESIZE IF LARGER); background-size: 120px; z-index: 4; cursor: pointer; "></div></label>
<div class="content">
<div style="font-family: 'NTR', sans-serif; font-size: 35px; text-transform: uppercase; line-height: 70%; text-align: center; color: black; letter-spacing: 2px;">CHARACTER ONE</div>
<div style="font-family: calibri; font-size: 8px; height: 8px; line-height: 100%; text-align: center; text-transform: uppercase; color: #000; letter-spacing: 2px; overflow: hidden;">DETAIL - DETAIL - DETAIL</div>
<div style="width: 350px; font-family: calibri; height: 160px; padding-bottom: 1px; padding-top: 7px; color: #000; font-size: 10px; text-align: justify; line-height: 100%; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 6px; -moz-column-gap: 6px; -webkit-column-gap: 6px; overflow: auto;" class="motherscroll">

INFORMATION HERE

</div></div></div><div class="tab"><input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2"><div style="width: 120px; height: 120px; border: 2px solid #fff; position: relative; top: -60px; border-radius: 100%; background: url(120X120 GIF/ICON HERE. WILL RESIZE IF LARGER); background-size: 120px; margin-left: 5px; z-index: 4; cursor: pointer; "></div></label>
<div class="content">
<div style="font-family: 'NTR', sans-serif; font-size: 35px; text-transform: uppercase; line-height: 70%; text-align: center; color: black; letter-spacing: 2px;">CHARACTER TWO</div>
<div style="font-family: calibri; font-size: 8px; height: 8px; line-height: 100%; text-align: center; text-transform: uppercase; color: #000; letter-spacing: 2px; overflow: hidden;">DETAIL - DETAIL - DETAIL</div>
<div style="width: 350px; font-family: calibri; height: 160px; padding-bottom: 1px; padding-top: 7px; color: #000; font-size: 10px; text-align: justify; line-height: 100%; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 6px; -moz-column-gap: 6px; -webkit-column-gap: 6px; overflow: auto;" class="motherscroll">

INFORMATION HERE

</div></div></div><div class="tab"><input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3"><div style="width: 120px; height: 120px; border: 2px solid #fff; position: relative; top: -60px; border-radius: 100%; background: url(120X120 GIF/ICON HERE. WILL RESIZE IF LARGER); background-size: 120px; margin-left: 5px; z-index: 4; cursor: pointer; "></div></label>
<div class="content">
<div style="font-family: 'NTR', sans-serif; font-size: 35px; text-transform: uppercase; line-height: 70%; text-align: center; color: black; letter-spacing: 2px;">CHARACTER THREE</div>
<div style="font-family: calibri; font-size: 8px; height: 8px; line-height: 100%; text-align: center; text-transform: uppercase; color: #000; letter-spacing: 2px; overflow: hidden;">DETAIL - DETAIL - DETAIL</div>
<div style="width: 350px; font-family: calibri; height: 160px; padding-bottom: 1px; padding-top: 7px; color: #000; font-size: 10px; text-align: justify; line-height: 100%; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 6px; -moz-column-gap: 6px; -webkit-column-gap: 6px; overflow: auto;" class="motherscroll">

INFORMATION HERE

</div></div></div></div></center><div style="width: 400px; height: 100px; margin-top: -143px; background: #29696f; padding: 15px;"><div style="font-family: 'NTR', sans-serif; font-size: 35px; color: #fff; text-transform: uppercase; line-height: 90%; position: relative; top: 60px;">i'm the only one here</div><div style="font-family: calibri; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: #fff; line-height: 10%; margin-top: -3px; margin-bottom: 10px; position: relative; top: 60px;">And the mother we share will never keep our cold hearts from calling</div></div>

<p><a href="http://shine.b1.jcink.com/index.php?showuser=3048"><div style="width: 295px; color: #000; font-family: calibri; font-size: 7px; letter-spacing: 3px; margin-top: 3px; text-align: center;">WHAT KATY DID</div></a></center><style type="text/css">.tabs { position: relative;   width: 400px; height:  145px; } .tab { float: left; } .tab label { position: relative; left: 5px; } .tab [type=radio] { display: none; }
.content { height: 230px; bottom: 0px; left: 0px; right: 0px; background: white; position: absolute;
top: -285px; padding: 20px; overflow: hidden; opacity: 0; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; }
[type=radio]:checked ~ label { z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 2; opacity: 0.99; z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }
.motherscroll::-webkit-scrollbar {height: 2px;}
.motherscroll::-webkit-scrollbar-track { background-color: #fff;}
.motherscroll::-webkit-scrollbar-thumb { background-color: #000000;}</style>

<!--HTML--><link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="http://cartegardes.b1.jcink.com/uploads/cartegardes/suburbia.css"><center>
 
 <div class="nanashipper1">
   
   <div class="nanashipper2">
     
     <a href="http://shine.jcink.net/index.php?showuser=3343"><div class="nanashipper3">
       
       <img src="SQUARE IMG">
       
     </div></a>
     
     <div class="nanashipper4">
       
       CHARACTER NAME
       
     </div>
     
     <div class="nanashipper5">
       
      AGE IN LETTERS
       
     </div>
     
     <div class="nanashipper6">
       
       MEMBER GROUP OR TRAIT
       
     </div>
     
     <div class="nanashipper7">
       
       OCCUPATION OR TRAIT
       
     </div>
     
     <div class="nanashipper8">
       
       TRAIT
       
     </div>
     
   </div>
   
   <div class="nanashipper9">
     
     <img src="400 X 275 IMAGE HERE">
     
     <div class="nanashipper14"></div>
     
     <div class="nanashipper13"></div>
     
     <div class="nanashipper10">
       
       <div class="nanashipper11">
         
         <div class="nanashipper12">
           
           SHIPPER INFO HERE
           
         </div>
         
       </div>
       
     </div>
     
   </div>
   
 </div>
 
</center>

<!--HTML--><link href='http://fonts.googleapis.com/css?family=Fjalla One' rel='stylesheet' type='text/css'>

<style type="text/css">


#louhaz  {width: 250px; height: 350px; position: relative; overflow: hidden;}

#louhaz .page { -WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; position: absolute; top: 0px; bottom: 0px; width: 250px; height: 350px;}

#louhaz:hover .page {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; top: -350px;}






</style>

<center>
<table><td>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="270" height="20">
 <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
 <param name="bgcolor" value="b8b8b8" />
 <param name="FlashVars" value="mp3=MP3 LINK HERE&amp;bgcolor=000000&amp;loadingcolor=eeeeee&amp;buttoncolor=eeeeee&amp;slidercolor=eeeeee" /></object>
<div style="width:250px;height:350px;background-color:#fff;border-bottom:20px solid #404040;border-left:20px solid #1d1d1d;">
<div id="louhaz"><div class="page">

<img src="http://placehold.it/250x350"width="250"height="350">

</div>


<img src="http://i.imgur.com/JzgUKc5.gif"width="250"height:"150">
<div style="width:250px;background-color:#b8b8b8;font-family:Fjalla One;font-size:30px;color:#1d1d1d;line-height:110%;text-align:center;">FIRST LAST
</div><p>
<div style="width:230px;height:150px;text-align:justify;overflow:auto;color: #1d1d1d;padding:10px;">

shipper stuff here<p></div></div></td>
<td>
<div style="width:250px;height:350px;background-color:#fff;border-top:20px solid #404040;border-right:20px solid #1d1d1d;">
<div id="louhaz"><div class="page">

<img src="http://placehold.it/250x350"width="250"height="350">

</div>


<img src="http://placehold.it/250x150"width="250"height:"150">
<div style="width:250px;background-color:#1d1d1d;font-family:Fjalla One;font-size:30px;color:#b8b8b8;line-height:110%;text-align:center;">FIRST LAST
</div><p>
<div style="width:230px;height:150px;text-align:justify;overflow:auto;color: #1d1d1d;padding:10px;">
 shipper stuff here!
</div></div></div>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="270" height="20">
 <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
 <param name="bgcolor" value="b8b8b8" />
 <param name="FlashVars" value="mp3=MP3 LINK HERE&amp;bgcolor=000000&amp;loadingcolor=eeeeee&amp;buttoncolor=eeeeee&amp;slidercolor=eeeeee" /></object></td>
</table>
<div style="width:500px;text-align:right;"><a href="http://shine.b1.jcink.com/index.php?showuser=4120">FOXX</a></div>
</center>

<!--HTML--><center>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<style type="text/css">
.bm001 { opacity: 0.0; width: 190px; height: 290px; padding: 5px; overflow: auto; background-color: #fff; transition-duration: .6s; -moz-transition-duration: .6s; -webkit-transition-duration: .6s; -o-transition-duration: .6s; }
.bm001:hover { opacity: 1.0; width: 190px; height: 290px; padding: 5px;  overflow: auto; background-color: #fff; transition-duration: .6s; -moz-transition-duration: .6s; -webkit-transition-duration: .6s; -o-transition-duration: .6s; }
.bm002, .bm003 { width: 90px; height: 20px; background-color: #b4db75; font-family: Oswald; color: #fff; text-transform: uppercase; text-align: center; font-size: 10px; padding-top: 5px; }
.bm004 { width: 184px; height: 20px; background-color: #b4db75; font-family: oswald; color: #fff; text-transform: uppercase; text-align: center; font-size: 10px; padding-top: 5px; margin-left: 3px; }
.bm005 { width: 184px; margin-top: 5px; margin-left: 3px; font-family: tahoma; font-size: 10px; text-align: justify; line-height: 100%; margin-bottom: 10px; }
.girlname, .boyname { position: relative; z-index: 2; }
.girlname { width: 200px; font-family: pacifico; font-size: 30px; text-shadow: 1px 1px 3px #000; text-transform: lowercase; text-align: center; color: #e67575; margin-top: -15px; }
.boyname { width: 200px; font-family: pacifico; font-size: 30px; text-shadow: 1px 1px 1px #000; text-transform: lowercase; text-align: center; color: #78AB9A; margin-top: -15px; }
.bm001::-webkit-scrollbar { width: 1px; background-color: #6BDD55; }
.bm001::-webkit-scrollbar-track { background-color: #fff; }
.bm001::-webkit-scrollbar-thumb { background-color: #6BDD55; }
.bm001::-moz-scrollbar { width: 1px; background-color: #fff; }
.bm001::-moz-scrollbar-track { background-color: #000; }
.bm001::-moz-scrollbar-thumb { background-color: #6BDD55; }
.bm001::-o-scrollbar { width: 1px; background-color: #fff; }
.bm001::-o-scrollbar-track { background-color: #000; }
.bm001::-o-scrollbar-thumb { background-color: #6BDD55; }
</style>
<table cellspacing="1" cellpadding="1"><tr>

<td><div style="width: 200px; height: 300px; background-image: url(HTTP://PLACEHOLD.IT/200X300);">

<div class="bm001"><table><tr><td><div class="bm002"> FACE CLAIM </div></td><td><div class="bm003"> AGE </div></tr></table><div class="bm004"> RELATIONSHIP/MEMBERGROUP </div><div class="bm005">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim tortor, ultrices ac elit nec, laoreet suscipit odio. In semper ultrices dui sit amet gravida. Ut pulvinar dolor in ante consequat, id elementum tortor consectetur. Aenean dignissim, erat sed condimentum blandit, metus purus feugiat lorem, id sodales leo erat id purus. Sed ligula magna, rhoncus at tempus id, accumsan vel mi. Ut vitae iaculis est. Nulla tempus hendrerit arcu, eget sagittis tellus congue in. Ut eget enim placerat, fringilla ligula ut, vulputate massa. Nullam sodales eget nunc in hendrerit. Nunc molestie nibh mauris, vitae interdum nisl vehicula congue. Vivamus porta aliquam turpis sed consequat. Curabitur eget metus vel turpis tempor sollicitudin vitae sit amet massa. Etiam gravida massa eget pellentesque vulputate. Praesent nibh erat, venenatis in posuere vel, adipiscing vel enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</div></div></div><div class="girlname"> FIRST LAST </div></td>

<td><div style="width: 200px; height: 300px; background-image: url(HTTP://PLACEHOLD.IT/200X300);">

<div class="bm001"><table><tr><td><div class="bm002"> FACE CLAIM </div></td><td><div class="bm003"> AGE </div></tr></table><div class="bm004"> RELATIONSHIP/MEMBERGROUP </div><div class="bm005">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim tortor, ultrices ac elit nec, laoreet suscipit odio. In semper ultrices dui sit amet gravida. Ut pulvinar dolor in ante consequat, id elementum tortor consectetur. Aenean dignissim, erat sed condimentum blandit, metus purus feugiat lorem, id sodales leo erat id purus. Sed ligula magna, rhoncus at tempus id, accumsan vel mi. Ut vitae iaculis est. Nulla tempus hendrerit arcu, eget sagittis tellus congue in. Ut eget enim placerat, fringilla ligula ut, vulputate massa. Nullam sodales eget nunc in hendrerit. Nunc molestie nibh mauris, vitae interdum nisl vehicula congue. Vivamus porta aliquam turpis sed consequat. Curabitur eget metus vel turpis tempor sollicitudin vitae sit amet massa. Etiam gravida massa eget pellentesque vulputate. Praesent nibh erat, venenatis in posuere vel, adipiscing vel enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</div></div></div><div class="girlname OR boyname"> FIRST LAST </div></td>

<td><div style="width: 200px; height: 300px; background-image: url(HTTP://PLACEHOLD.IT/200X300);">

<div class="bm001"><table><tr><td><div class="bm002"> FACE CLAIM </div></td><td><div class="bm003"> AGE </div></tr></table><div class="bm004"> RELATIONSHIP/MEMBERGROUP </div><div class="bm005">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim tortor, ultrices ac elit nec, laoreet suscipit odio. In semper ultrices dui sit amet gravida. Ut pulvinar dolor in ante consequat, id elementum tortor consectetur. Aenean dignissim, erat sed condimentum blandit, metus purus feugiat lorem, id sodales leo erat id purus. Sed ligula magna, rhoncus at tempus id, accumsan vel mi. Ut vitae iaculis est. Nulla tempus hendrerit arcu, eget sagittis tellus congue in. Ut eget enim placerat, fringilla ligula ut, vulputate massa. Nullam sodales eget nunc in hendrerit. Nunc molestie nibh mauris, vitae interdum nisl vehicula congue. Vivamus porta aliquam turpis sed consequat. Curabitur eget metus vel turpis tempor sollicitudin vitae sit amet massa. Etiam gravida massa eget pellentesque vulputate. Praesent nibh erat, venenatis in posuere vel, adipiscing vel enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</div></div></div><div class="girlname OR boyname"> FIRST LAST </div></td>

</tr></table>
<div style="width: 600px; text-align: right; font-family: oswald; font-size: 10px;">made by <a href="http://shine.b1.jcink.com/index.php?showuser=9683">nina</a> at <a href="http://shine.b1.jcink.com/index.php?">shine</a>.</div>
</center>

<!--HTML--><link href='http://fonts.googleapis.com/css?family=Six+Caps|Mrs+Saint+Delafield|Playfair+Display:400' rel='stylesheet' type='text/css'>
<style>
#ellecontainer {margin-top:10px;position:relative;border-bottom:0px solid #fff;border-top:0px solid #fff;width:350px;height:300px;background:#fff;}
#ellecontainer ::-webkit-scrollbar {width: 5px;}
#ellecontainer ::-webkit-scrollbar-track { background:#eee;}
#ellecontainer ::-webkit-scrollbar-thumb {background:#222;}
.elle-info {box-sizing:border-box;background:#fff;width:350px;height:300px;position:absolute;top:0px;left:0;padding:20px;}
.elle-pic {box-sizing:border-box;position:absolute;top:0px;left:0;width:175px;height:300px;overflow:hidden;background:#aaa;-webkit-transition:0.6s ease all;-moz-transition:0.6s ease all;-o-transition:0.6s ease all;transition:0.6s ease all;-webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s;}
.elle-brief {box-sizing:border-box;position:absolute;top:0px;right:0;width:175px;height:300px;background:#fff;border-left:3px solid #fff;-webkit-transition:0.6s ease all;-moz-transition:0.6s ease all;-o-transition:0.6s ease all;transition:0.6s ease all;-webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s;}
.elle-bpanel {box-sizing:border-box;position:absolute;top:0;right:0;width:100%;height:300px;background:#000;}
.elle-brief:after, .elle-bpanel:after {content:"";height:0;width:0;position:absolute;top:135px;left:-32px; border-right:32px solid #fff; border-top:25px solid transparent;border-bottom:25px solid transparent;}
.elle-bpanel:after { z-index:2; top:137px; left:-25px;border-right:28px solid #000; border-top:23px solid transparent;border-bottom:23px solid transparent; }
#ellecontainer:hover .elle-pic{-webkit-transition:0.6s ease all;-moz-transition:0.6s ease all;-o-transition:0.6s ease all;transition:0.6s ease all;left:-110px;}
#ellecontainer:hover .elle-brief {-webkit-transition:0.6s ease all;-moz-transition:0.6s ease all;-o-transition:0.6s ease all;transition:0.6s ease all;right:-120px;}
.elle-name {position:absolute; top:100px;left:5px;right:5px;color:#eee;font:400 17pt/18pt 'Mrs Saint Delafield', arial;letter-spacing:2px;}
.elle-want {position:absolute; top:120px;left:40px;right:40px;border-top:1px solid #eee; border-bottom:1px solid #eee; width:auto;padding:0 0 7px;color:#eee;font:400 44pt/35pt 'Six Caps', arial;}
.elle-tag {position:absolute; top:178px;left:5px;right:5px;width:auto;color:#eee;font:400 6pt/7pt 'Playfair Display', arial;letter-spacing:2px;text-transform:lowercase;}
.elle-scroll {box-sizing:border-box;width:220px;height:260px;overflow:auto;padding:20px 10px;padding-right:10px;text-align:justify;color:#000;font:400 7pt/10pt 'Garamond;', georgia;}
.scredit {margin:5px;text-align:center;letter-spacing:2px;font-family:'arial narrow';font-size:7pt;line-height:9px;text-transform:lowercase; -webkit-transition:0.6s all ease-in-out;-moz-transition:0.6s ease all;-o-transition:0.6s ease all;transition:0.6s all ease-in-out;}.scredit, .scredit a {color:#999; text-decoration:none;text-shadow:0 0 0 rgba(0,0,0,0); -webkit-transition:0.6s all ease-in-out;transition:0.6s all ease-in-out;}.scredit a:hover{text-shadow:0 0 10px rgba(0,0,0,0.6);color:rgba(0,0,0,0);letter-spacing:10px;visibility: hidden;}
</style>
<center>
<div id=ellecontainer><div class=elle-info>
<div class=elle-scroll>

SCROLLING INFO TEXT HERE.

</div></div><div class=elle-pic>

<img src="175 x 300 IMAGE URL HERE" />

</div><div class=elle-brief><div class=elle-bpanel><div class=elle-name>

CHARACTER NAME

</div><div class=elle-want>wanted</div><div class=elle-tag>

AGE, TRAIT, TRAIT

</div></div></div></div><div class="scredit"><a href="http://tinyurl.com/cautionskye">◆ </a><a href="http://tinyurl.com/shineskye">skye</a><a href="http://tinyurl.com/candylandskye"> ◆</a></div>
</center>

<!--HTML--><link href='https://fonts.googleapis.com/css?family=Roboto:400,700,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic' rel='stylesheet' type='text/css'>

<style>
.watercontainer {
margin: 10px auto; 
height: auto;
width: auto;
}

.watertabs {
margin: 0px auto; 
position: relative;
width: 280px; 
height:  480px;
background: red;

}

.watertab {
float: left;
}

.watertab label {
display: block;
width: 70px;
height: 30px;
background: #eee;
margin: 0px;
position: relative;
left: 0px;
top: 0px;
z-index: 1;
text-align: center;
line-height: 30px; 
font-family: arial;
font-size: 8px;
text-transform: uppercase;
cursor: crosshair;
}


.watertab input[type=radio]:checked ~ label {
background: white;
z-index: 2;
}

.watertab input[type=radio] {
display: none; 
}


.watercontent {height: 450px; width: 280px; left: 0; background: blue; position: absolute; overflow: hidden; bottom: 0; color: #000}


.watertab input[type=radio]:checked ~ label ~ .watercontent {
z-index: 1;
}

.water1 {height: 60px; width: 280px; position: absolute; bottom: 0; text-align: center; line-height: 60px; font-family: roboto; color: #fff; text-transform: uppercase; font-size: 24px; font-weight: 700; letter-spacing: -2px}
.water2 {position: absolute; top: 0; height: 390px; width: 280px; background-size: cover; -webkit-transition: 0.5s;-moz-transition: 0.5s;transition: 0.5s; }
#water:hover .water2 {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 0.5s;-moz-transition: 0.5s;transition: 0.5s; }
.water2a {position: absolute; top: 10px; height: 350px; width: 220px; background: transparent; left: 30px}
.water2a1 {position: absolute; top: 10px; height: 320px; width: 220px; }
.water2a2a {width: 0;
height: 0;
border-style: solid;
border-width: 30px 110px 0 0;
position: absolute; top: 330px; left: 0}
.water2a2b {width: 0;
height: 0;
border-style: solid;
border-width: 0 110px 30px 0;
position: absolute; top: 330px; right: 0}
.water2b {height: 270px; width: 180px; top: 10px; left: 10px; background: white; position: absolute; border-color: white; border-style: solid; border-width: 10px 5px 10px 10px; padding-right: 5px; font-family: open sans; font-size: 9px; line-height: 11px; overflow: auto; text-align: justify}
.water2b::-webkit-scrollbar {width: 4px}
.water2b::first-letter {font-family: roboto; float: left; font-size: 52px; margin: 10px 5px 5px 0px; font-weight: 700;  text-transform: uppercase; padding-top: 9px}
.water2b b, .water2b i {font-family: roboto; text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: 0}

#water .water2a {top: -360px; transition: 0.5s ease-in-out 0.3s; -webkit-transition: 0.5s ease-in-out 0.3s; -moz-transition: 0.5s ease-in-out 0.3s; }
#water:hover .water2a {top: 0px; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; }

.water2b span {font-family: roboto; font-size: 20px; text-transform: uppercase; line-height: 20px; font-weight: 700}

.waterl1 {height: 100%; width: 100%; color: #fff; background: #616FA5}
.watera .water1 {background-color: #616FA5}
.watera .water2a1 {background-color: #616FA5}
.watera .water2a2a {border-color: #616FA5 transparent transparent transparent;}
.watera .water2a2b {border-color: transparent #616FA5 transparent transparent;}
.watera .water2b::-webkit-scrollbar-thumb {border: 1px solid #616FA5; background: #fff}
.watera .water2b b {color: #7F92DA}
.watera .water2b i {color: #97A4D8}
.watera .water2b::first-letter {color: #616FA5;}
.watera .water2b span {color: #616FA5}

.waterl2 {height: 100%; width: 100%; color: #fff; background: #A86060}
.waterb .water1 {background: #A86060}
.waterb .water2a1 {background-color: #A86060}
.waterb .water2a2a {border-color: #A86060 transparent transparent transparent;}
.waterb .water2a2b {border-color: transparent #A86060 transparent transparent;}
.waterb .water2b::-webkit-scrollbar-thumb {border: 1px solid #A86060; background: #fff}
.waterb .water2b b {color: #D97D7D}
.waterb .water2b i {color: #CF9999}
.waterb .water2b::first-letter {color: #A86060;}
.waterb .water2b span {color: #A86060}


.waterl3 {height: 100%; width: 100%; color: #fff; background: #5C966E}
.waterc .water1 {background-color: #5C966E}
.waterc .water2a1 {background-color: #5C966E}
.waterc .water2a2a {border-color: #5C966E transparent transparent transparent;}
.waterc .water2a2b {border-color: transparent #5C966E transparent transparent;}
.waterc .water2b::-webkit-scrollbar-thumb {border: 1px solid #5C966E; background: #fff}
.waterc .water2b b {color: #81D09A}
.waterc .water2b i {color: #9AC5A8}
.waterc .water2b::first-letter {color: #5C966E;}
.waterc .water2b span {color: #5C966E}


.waterl4 {height: 100%; width: 100%; color: #fff; background: #9276A3}
.waterd .water1 {background-color: #9276A3}
.waterd .water2a1 {background-color: #9276A3}
.waterd .water2a2a {border-color: #9276A3 transparent transparent transparent;}
.waterd .water2a2b {border-color: transparent #9276A3 transparent transparent;}
.waterd .water2b::-webkit-scrollbar-thumb {border: 1px solid #9276A3; background: #fff}
.waterd .water2b b {color: #BC97D2}
.waterd .water2b i {color: #B19BBF}
.waterd .water2b::first-letter {color: #9276A3;}
.waterd .water2b span {color: #9276A3}




</style>

<div class="watercontainer">

<div class="watertabs">


<div class="watertab">
<input type="radio" id="watertab-1" name="watertab-group-1" checked>
<label for="watertab-1"><div class="waterl1">FIRST</div></label>
<div class="watercontent">
<div id="water"><div class="watera">
<div class="water2" style="background-image: url(280 X 390 IMG, RESIZES)"></div>
<div class="water2a">
 <div class="water2a1">
   <div class="water2b">ABOUT YOUR CHARACTER HERE
<p><span>friends</span>
<p>WORDS
<p><span>enemies</span>
<p>WORDS
<p><span>lovers</span>
<p>WORDS
</div>
 </div>
 <div class="water2a2a"></div><div class="water2a2b"></div>
</div>
 <a href="http://shine.b1.jcink.com/index.php?showuser=6723"><div class="water1">FIRST LAST</div></a>
</div></div></div></div>


<div class="watertab">
<input type="radio" id="watertab-2" name="watertab-group-1">
<label for="watertab-2"><div class="waterl2">FIRST</div></label>
<div class="watercontent">
<div id="water"><div class="waterb">
<div class="water2" style="background-image: url(280 X 390 IMG HERE, RESIZES)"></div>
<div class="water2a">
 <div class="water2a1">
   <div class="water2b">ABOUT YOUR CHARACTER HERE. 
<p><span>friends</span>
<p>WORDS
<p><span>enemies</span>
<p>WORDS
<p><span>lovers</span>
<p>WORDS

</div>
 </div>
 <div class="water2a2a"></div><div class="water2a2b"></div>
</div>
 <div class="water1">FIRST LAST</div>
</div></div></div></div>


<div class="watertab">
<input type="radio" id="watertab-3" name="watertab-group-1">
<label for="watertab-3"><div class="waterl3">FIRST</div></label>
<div class="watercontent">
<div id="water"><div class="waterc">
<div class="water2" style="background-image: url(280 X 390 IMG HERE, RESIZES)"></div>
<div class="water2a">
 <div class="water2a1">
   <div class="water2b">ABOUT YOUR CHARACTER HERE. 
<p><span>friends</span>
<p>WORDS
<p><span>enemies</span>
<p>WORDS
<p><span>lovers</span>
<p>WORDS
</div>
 </div>
 <div class="water2a2a"></div><div class="water2a2b"></div>
</div>
 <div class="water1">FIRST LAST</div>
</div></div></div>
</div>

<div class="watertab">
<input type="radio" id="watertab-4" name="watertab-group-1">
<label for="watertab-4"><div class="waterl4">FIRST</div> </label>
<div class="watercontent">
<div id="water"><div class="waterd">
<div class="water2" style="background-image: url(280 X 390 IMG HERE, RESIZES)"></div>
<div class="water2a">
 <div class="water2a1">
   <div class="water2b">ABOUT YOUR CHARACTER HERE. 
<p><span>friends</span>
<p>WORDS
<p><span>enemies</span>
<p>WORDS
<p><span>lovers</span>
<p>WORDS
</div>
 </div>
 <div class="water2a2a"></div><div class="water2a2b"></div>
</div>
 <div class="water1">FIRST LAST</div>
</div></div></div>
</div>



</div>
</div>

<!--HTML--><style type="text/css">
.insideout { width: 400px; height: 400px; position: relative; overflow: hidden; margin: auto; }
.insideout .insideo { position: absolute; top: 150px; left: 140px; background-color: rgba(34, 34, 34, 0.9); font-size: 15px; border: 2px solid #fff; color: #fff; text-align: center; line-height: 100%; font-family: 'Aldrich', sans-serif; text-transform: uppercase; padding: 20px; font-weight: bold; opacity: .99; transition: all .8s ease-in-out .8s;}
.insideout .insideo span { transition: all .6s ease-in-out 1s; }
.insideout:hover .insideo span { color: #222; transition: all .6s ease-in-out;}
.insideout:hover .insideo { opacity: 0; transition: all .8s ease-in-out .6s;}
.insideout .iout { width: 400px; height: 400px; background-color: rgba(34, 34, 34, 0.6); position: absolute; top: 0px; left: 0px; }
.insideout .loveis { position: absolute; top: 50px; left: 50px; background-color: rgba(34, 34, 34, 0.9); border: 2px solid #fff; padding: 20px; width: 256px; height: 256px; opacity: 0; transition: all .8s ease-in-out .3s;  }
.insideout:hover .loveis { opacity: .99; transition: all .8s ease-in-out 1.6s; }
.loveiss { width: 251px; height: 256px; padding-right: 5px; overflow: auto; color: #fff; font-family: 'Aldrich', sans-serif; font-size: 9px; text-align: justify; line-height: 100%; }
.loveiss::-webkit-scrollbar { width: 3px; height: 3px; padding: 0px; border: 0px; }
.loveiss::-webkit-scrollbar-track { background-color: rgba(34, 34, 34, 0.6);  }
.loveiss::-webkit-scrollbar-thumb { background-color: #fff;  }
.bcreds a, .bcreds { font-size: 8px; font-family: calibri, sans-serif; text-align: center; line-height: 100%; text-transform: uppercase; }
</style>
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>

<div class="insideout"><img src="http://i.imgur.com/nLGo5yH.png"/> <div class="iout"></div> <div class="insideo"><span> our love<br>i s l o s t </span></div> <div class="loveis"><div class="loveiss"> 

Cupcake ipsum dolor sit amet cotton candy toffee sugar plum. Gummies apple pie biscuit ice cream wafer. Ice cream danish cupcake marzipan sweet roll gummi bears. Danish halvah toffee marzipan cake I love jujubes gummi bears soufflé. Ice cream cookie donut oat cake oat cake jelly-o sweet. Chocolate bar caramels sugar plum. Chupa chups cake donut jujubes dragée gummi bears cupcake I love.<p>
Cotton candy biscuit croissant chocolate bar lollipop oat cake chocolate bar. Gummi bears lemon drops chocolate lemon drops danish bear claw oat cake chocolate bar. Ice cream halvah carrot cake sesame snaps marzipan caramels I love. Chocolate soufflé jujubes donut tiramisu. Candy canes icing jujubes ice cream I love I love cake. Croissant jujubes tootsie roll. Ice cream cake danish cake liquorice I love dessert bear claw. Biscuit dessert lollipop. Powder lollipop pastry. Cake danish dragée jujubes bonbon pastry dessert.<p>
Chocolate halvah gummi bears cupcake fruitcake tootsie roll gummi bears. Topping chocolate carrot cake pudding sesame snaps jujubes gummi bears. Pudding muffin jujubes I love. Bear claw chocolate cake lollipop carrot cake tiramisu brownie powder. Gummies candy canes croissant lollipop jelly beans cheesecake topping liquorice. I love sweet jelly beans halvah sesame snaps topping sugar plum sweet roll. Lemon drops I love tootsie roll tart I love pie cake I love candy.<p>
Chupa chups sweet danish wafer topping liquorice bonbon muffin. Gingerbread chupa chups biscuit tiramisu cake I love. Cupcake I love bear claw caramels tiramisu cookie caramels macaroon pastry. Candy canes chocolate I love topping. Oat cake I love caramels sugar plum tootsie roll tiramisu. Candy marshmallow tiramisu wafer bear claw oat cake chupa chups. I love gummi bears topping I love tiramisu sugar plum.<p>
Biscuit gummies I love halvah jelly I love tart. Sweet roll gummies lemon drops bear claw. Danish lemon drops gummi bears cotton candy liquorice muffin liquorice gummies. Dessert I love tootsie roll I love. Brownie chocolate liquorice muffin sweet halvah jelly-o liquorice icing. Donut powder I love bonbon I love soufflé. Toffee bonbon gingerbread. Jelly halvah sweet tiramisu candy canes cupcake biscuit tart I love. I love lollipop I love marzipan cupcake caramels chupa chups.

</div></div> </div><div class="bcreds"><a href="http://shine.b1.jcink.com/index.php?showuser=54"> &copy; darren criss </a></div>

<!--HTML--><center>

<style type="text/css" > 

.wolves11 { position: relative; top: 150px; width: 250px; background-color: #000; font-family: calibri; font-size: 8px; text-transform: uppercase; letter-spacing: 5px; color: #fff; line-height: 20px; }
.wolves22 { width: 300px; background-color: #fff; padding: 50px;  background: url(http://i.imgur.com/MTKcc0d.png) repeat;}
.wolves33 { background-color: #fff; padding: 10px; }
.wolves44 { width: 270px;  }
.wolves55 { font-family: arial; font-size: 9px; text-align: justify; text-transform: lowercase; letter-spacing: 0px; padding: 10px; background-color: #fff; line-height: 9px; }
.wolves55 b { font-style: italic; line-height: 12px; font-size: 12px; color: #000; }
.wolves44::-webkit-scrollbar {width: 1px;}
.wolves44::-webkit-scrollbar-track { background: #fff; }
.wolves44::-webkit-scrollbar-thumb { background: #000;}
.streetcred {  text-align: center; font-size: 10px; }

</style>

<div class="wolves11">△ wolves</div><div class="wolves22"><img src="http://placehold.it/300x150"><div class="wolves33"><div class="wolves44"><div class="wolves55">

hey you! this is where your lovely post goes!!

</div></div></div></div><div class="streetcred"><a href="http://wecode.jcink.net/index.php?showuser=5"><font color="#d8dacc">oliver</font></a> <a href="http://shine.b1.jcink.com/index.php?showuser=6227"><font color="#d8dacc">sykes</font></a></div>


</center>

<!--HTML--><center>

<div class="hero1">show me a hero</div>
<div class="hero2">

<div class="hero3"></div> 

post goes here

</div>
<div class="hero1">and i will write you a tragedy</div>
<span class="libcred"><a href="http://shine.jcink.net/index.php?showuser=14639">love,</a> <a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">libby</a></span>
</center>
<style type="text/css">
.hero1 {
   width: 330px;
   border-right: 10px solid #C7DE7A;
   border-left: 10px solid #C7DE7A;
   padding: 10px 0;
   background-color: #333;
   color: #ddd;
   font-family: arial;
   font-size: 7px;
   text-transform: uppercase;
   line-height: 100%;
   letter-spacing: 2px
   }

.hero2 {
   width: 280px;
   padding: 35px;
   background-color: #f2f2f2;
   text-align: justify;
   font-family: arial;
   font-size: 10px;
   line-height: 100%;
   color: #333
   }

.hero3 {
   position: relative;
   float: left;
   margin-right: 10px;
   margin-bottom: 5px;
   width: 100px;
   height: 100px;
   border: 5px solid #C7DE7A;
   background-image: url(http://placehold.it/100);
   -webkit-background-size: auto 100px;
   background-size: auto 100px
   }

.libcred a {
   font-family: orator std;
   font-size: 8px;
   color: #03435e;
   padding-right: 10px;
   padding-top: 10px;
   line-height: 8px;
   letter-spacing: 1px
   }
</style>

<!--HTML--><link href="http://fonts.googleapis.com/css?family=Droid+Serif:200,400,700italic" rel="stylesheet" type="text/css" />
<style>
#eheu { width:400px; padding:20px; font-family:arial; font-size:9px; line-height:18px; color:#2e2e2e; text-align:justify; text-transform:lowercase; margin:auto; }
#eheu img { width:200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; }
#eheu h1 { font-family:droid serif;font-weight:700;font-style:italic;line-height:20px;font-size:26px;color:#2e2e2e;text-transform:lowercase;text-align:center; letter-spacing:-1px; }
#eheu h2 { font-family:droid serif;font-weight:400;line-height:20px;font-size:10px;color:#ddd;text-transform:lowercase;text-align:center; letter-spacing:1px; }

</style>

<div id="eheu">
<p style="text-align:center;"><img src="your at least 200x200 gif/image, will resize if bigger"></p>

<h1>title/short lyrics/whatever</h1>

<div style="margin:20px auto;width:70%;background:#ddd;height:1px;"></div>

<p>text goes here</p>

<p>a new paragraph</p>

<p>another one</p>

<div style="margin:20px auto;width:70%;background:#ddd;height:1px;"></div>
</div>
<center><sup><a href="http://shine.b1.jcink.com/index.php?showuser=6359">▲▲▲</a></sup></center>