<!--HTML--><link href='http://fonts.googleapis.com/css?family=Lato:300,400,600,700' rel='stylesheet' type='text/css'><link href='http://takingthehobbitstoisengard.b1.jcink.com/uploads/takingthehobbitstoisengard/dtinsta1.css' rel='stylesheet' type='text/css'>

<div id=insta-d2>

<div style="background-image: url(INSTAGRAM PICTURE URL HERE)" class=instapic></div>

<div class=insta9><div class=insta10>

<div style="background-image: url(ICON URL HERE)" class=instaicon></div><div class=instauser>  

username

</div><div class=insta11> FOLLOWING </div><div class=insta12></div></div><div class=insta13><div class=instalikes>

### likes  </div><div class=instatime>  1h

</div></div><div class=insta14><div class=instacap>


<b>username</b> caption


</div></div><div class=insta15></div><div class=insta16><div class=insta17><a href="http://shine.jcink.net/index.php?showuser=5714"><div class=instaheart></div></a><div class=instacommbox>Add a comment...</div><div class=instadots></div></div></div></div></div>

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://static.tumblr.com/gezmuyb/bRDnptdr9/steverogers.css"><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'>
<style type="text/css">
.cookie-two { cursor: url(http://www.themesltd.com/cursors/random/tiny_cursor.png), auto; width: 540px; padding: 15px; background-color: #fafafa; border: 4px solid #fff; outline: 1px solid #ccc; }
.cookie-one { width: 492px; height: 494px; padding: 18px; background-image: url(http://subtlepatterns.com/patterns/crossword.png); border: 5px solid #fff; outline: 1px solid #f7f7f7; }
.cookie-ten { position: relative;    width: 540px; height:  494px; clear: both; overflow: hidden; }
.cookie-eleven { display: block; }
.cookie-eleven label { cursor: url(http://33.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto; display: block; width: 50px; height: 50px; padding: 5px; border-radius: 100%;  background-color: #fff;  border: 1px solid #f7f7f7; position: relative; left: 190px; background-color: #fff; margin-bottom: 10px; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; }
.cookie-eleven label img { opacity: 0; position: relative; top: -20px; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; }
.cookie-eleven [type=radio] { display: none;    baseline-tab-shift: true, retrieve; }
.cookie-twelve { position: absolute; bottom: 0px; right: 0px; top: 0px; background: white; padding: 9px; width: 400px; left: -420px; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; border: 1px solid #f7f7f7f7;  }
.cookie-ten .cookie-eleven [type=radio]:checked ~ label { background: white; opacity: 1; z-index: 2; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; } 
.cookie-ten .cookie-eleven [type=radio]:checked ~ label img { opacity: 1; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; }
.cookie-ten .cookie-eleven [type=radio]:checked ~ label ~ .cookie-twelve { z-index: 1; left: 0px; }
.cookie-three { border-radius: 100%; width: 50px; height: 50px; background-color: #000; }
.cookie-blue { width: 50px; height: 50px; background-color: #B5D8EB; border-radius: 100%; }
.cookie-orange { width: 50px; height: 50px; background-color: #FFC8BA; border-radius: 100%; }
.cookie-green { width: 50px; height: 50px; background-color: #93DFB8; border-radius: 100%; }
.cookie-pink { width: 50px; height: 50px; background-color: #FFBDD8; border-radius: 100%; }
.cookie-purple { width: 50px; height: 50px; background-color: #E3AAD6; border-radius: 100%; }

.cookie-four { font-family: arial; font-size: 20px; text-align: center; line-height: 100%; color: #fff; font-weight: bold; position: relative; top: 15px; }
.cookie-five { width: 150px; height: 250px; padding: 9px; border: 1px solid #f7f7f7; background-image: url(http://subtlepatterns.com/patterns/crossword.png); }
.cookie-six { width: 210px; padding-right: 5px; font-family: source sans pro; font-size: 11px; text-align: justify; line-height: 95%; color: #777; height: 409px; overflow: auto; margin-right: 10px; }
.cookie-six::-webkit-scrollbar { width: 10px; }
.cookie-six::-webkit-scrollbar-track { background-color: #fff; }
.cookie-six::-webkit-scrollbar-thumb { background-color: #fff; border: 1px solid #eee; }

.cookie-seven { letter-spacing: -3px; font-family: raleway; font-size: 42px; text-transform: uppercase; font-weight: 900; line-height: 100%; text-align: center; }
.cookie-eight { font-family: raleway; font-size: 10px; text-transform: uppercase; line-height: 100%; font-weight: 400; text-align: center; letter-spacing: 1px; margin-bottom: 10px; color: #999; }
.cookie-cblue { color: #B5D8EB; }
.cookie-corange { color: #FFC8BA; }
.cookie-cgreen { color: #93DFB8; }
.cookie-cpurple { color: #E3AAD6; }
.cookie-cpink { color: #FFBDD8; }
.cookie-nine { width: 170px; height: 127px; font-family: raleway; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; line-height: 100%; color: #999; overflow: hidden; margin-top: 12px; text-align: justify; }
.cookiecredit { cursor: url(http://33.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto;  padding: 5px 19px; max-width: 300px; border: 1px solid #eee; font-family: source sans pro; font-size: 9px; text-transform: uppercase; text-align: center; line-height: 100%; color: #B5D8EB; background-color: #fff; margin-top: 10px; }
</style>
<center>
<div class="cookie-two">
<div class="cookie-one">
<div class="cookie-ten">

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-8" name="cookie-eleven-group-2" checked>
<label for="cookie-eleven-8"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-blue"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-cblue">FIRST LAST</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

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

</div> 
</div>

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-9" name="cookie-eleven-group-2">
<label for="cookie-eleven-9"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-orange"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-corange">FIRST LAST</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

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

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-10" name="cookie-eleven-group-2">
<label for="cookie-eleven-10"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-green"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-cgreen">FIRST LAST</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

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

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-11" name="cookie-eleven-group-2">
<label for="cookie-eleven-11"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-pink"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-cpink">FIRST LAST</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

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

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-12" name="cookie-eleven-group-2">
<label for="cookie-eleven-12"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-purple"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-cpurple">FIRST LAST</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

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

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-13" name="cookie-eleven-group-2">
<label for="cookie-eleven-13"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-blue"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-cblue">FIRST LAST</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

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

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-14" name="cookie-eleven-group-2">
<label for="cookie-eleven-14"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-orange"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-corange">FIRST LAST</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

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

</div>
</div>
</div>
</center><center><A href="http://shine.jcink.net/index.php?showuser=10542"><div class="cookiecredit">© FELICITY</div></a>

<!--HTML--><style type="text/css">
.tabs {position: relative;width: 450px;height:  200px;}
.tab {float: left;}
.tab label {background: #f3777b;padding: 10px;margin-left: -1px;position: relative;left: 1px;text-align:center;text-transform:uppercase;color:#fff;font-family:oswald;padding-left:55px;padding-right:55px;}
.tab [type=radio] {display: none;}
.content {position: absolute;top: 28px;bottom: 0px;left: 0px;right:0px;padding: 20px;transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s;}
[type=radio]:checked ~ label {background: #ff979a;border-bottom: 0px solid white;z-index: 2;transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s;}
[type=radio]:checked ~ label ~ .content {z-index: 1;}
.tab label, .content, { -webkit-transition: 0.4s all ease-in-out 0.2s; -moz-transition: 0.4s all ease-in-out 0.2s; transition: 0.4s all ease-in-out 0.2s; }
</style>


<center><div style="width:450px;height:375px;background-image:url('http://placehold.it/450x375');">
<br><br>
<div class="hobojam">

<center><div class="tabs"><div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><center><label for="tab-1" style="margin-left: 30px;background-color:#ff979a;">NICKNAME</label></center></div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">I</label>
<div class="content"><div class="hobomonkey">

<center><table><tr><td><div class="quotable">“</div></td><td><div class="questionable"><i>QUESTION GOES HERE</i></DIV>
<div class="answerme">haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha </div></td></tr></table></center>

<center><table><tr><td><div class="quotable">“</div></td><td><div class="questionable"><i>QUESTION GOES HERE</i></DIV>
<div class="answerme">haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha </div></td></tr></table></center>

<center><table><tr><td><div class="quotable">“</div></td><td><div class="questionable"><i>QUESTION GOES HERE</i></DIV>
<div class="answerme">haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha </div></td></tr></table></center>

<center><table><tr><td><div class="quotable">“</div></td><td><div class="questionable"><i>QUESTION GOES HERE</i></DIV>
<div class="answerme">haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha </div></td></tr></table></center>

<center><table><tr><td><div class="quotable">“</div></td><td><div class="questionable"><i>QUESTION GOES HERE</i></DIV>
<div class="answerme">haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha haha </div></td></tr></table></center>

</div>


</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">II</label>
<div class="content">
<div class="hobomonkey">

<center><div class="questionable"><i>PROMPT/FREEFORM</i></DIV>
<div class="answerme">feel free to use this format or style it however you might like. we have prompts, or you can go nuts and use this to do your freeform! this format would work pretty well for prompt. if you do prompt you must do at least two (2) from the list and they must be a decent length!</div></center>

</div>
</div>
</div>
</div></div>
</div>
<div class="bottombox">

<table><tr><td><div style="-moz-border-radius: 150px;
border-radius: 150px;height:150px;width:150px;background-image:url('http://placehold.it/150x150');border:5px solid #fff;margin-top:-50px;">&nbsp;</div></td>

<td><div style="width:270px;">

<center><div class="introductions"><i>first middle</i></DIV>
<div class="aka">ALSO KNOWN AS ALIAS, WHO LIVES IN TIMEZONE.</DIV><P>

<div class="slim2">CLIQUE/JOB</DIV>
<div class="slim2">CLASS OF ####</DIV> <br><br>

<div class="slim">SEXUALITY</DIV>
<div class="slim">STATUS</DIV>
<div class="slim2">OTHER CHARACTERS</DIV>
</center>

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

<!--HTML--><link rel="stylesheet" type="text/css" href="http://www.seiryuu.org/~cal/code/cal-waterfall.css">
<style>/* CHANGE THIS STUFF */
.calshibibw2 { background: #FFFFFF; } /* main background */
.csbw2-text { background: #FFFFFF; color: #3D6158; } /* main content area color */ 
.csbw2-text p::first-letter { color: #70A598; } /* drop cap color */
.csbw2-text b { color: #82B797; } /* emphasis color */
.csbw2-text i { font-weight: bold; color: #82B797; } /* emphasis color */
.csbw2-text a { color: #70A598; } /* link color */
.csbw2-sidebar { background: #70A598; } /* sidebar bg color */
.csbw2-info { background: #8fB9AF; color: #FFFFFF; } /* sidebar info block colors */
.csbw2-info:before { background: #578b7e; color: #FFFFFF; } /* shutter hover info block color */ 
.csbw2-info:hover:before { color: #FFFFFF; } /* also shutter hover info block color, if you want to change it on hover */
.csbw2-gif img { border: 10px solid #8fB9AF; } /* gif border color */
.csbw2-footer { background: #70A598; color: #FFFFFF; } /* name footer color */
</style>
<div class="calshibibw2">
<div class="csbw2-header"><img src="http://placehold.it/450x200" /></div>
<div class="csbw2-content">
<div class="csbw2-text">
<p></p>
<p></p>
<p></p>
</div>
<div class="csbw2-sidebar">
<div class="csbw2-info" data-info="PUT INFO HERE">age</div>
<div class="csbw2-info" data-info="PUT INFO HERE">face claim</div>
<div class="csbw2-info" data-info="PUT INFO HERE">occupation</div>
<div class="csbw2-info" data-info="PUT INFO HERE">sexuality</div>
<div class="csbw2-info" data-info="PUT INFO HERE">status</div>
<div class="csbw2-info" data-info="PUT INFO HERE">player alias</div>
<div class="csbw2-info" data-info="PUT INFO HERE">timezone</div>
<div class="csbw2-info" data-info="PUT INFO HERE">contact</div>
<div class="csbw2-gif"><img src="http://placehold.it/100x100" /></div>
</div>
</div>
<div class="csbw2-footer">First Middle Last</div>
<div class="cal-credit"><a href="http://shine.jcink.net/index.php?showuser=7270">㎈</a></div>
</div>

<!--HTML--><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'><style type="text/css">

.blah{
width:560px;
height:500px;
background-color: #ffffff;
padding-top:10px;
border-bottom:#000000 10px solid;}

.canon{
width:220px; height:15px; background-color:#000000; font-family:roboto; font-size:8px; text-align:center; color:#ffffff;}

.spirits{font-family:oswald; font-size:25px; text-transform:upperase; line-height:90%; border-bottom: #a0e2d0 3px solid; width:200px;}

.spirit-info{font-family:arial narrow; text-transform:uppercase; font-size:8px; text-align:justify; width:200px; line-height:90%;}

.great {opacity: 0.0;transition-duration: 0.6s;-moz-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;-o-transition-duration: 0.6s;background: #fff; color: #000; text-align: justify; width: 200px; height: 450px; padding: 0px;} 
.great:hover { opacity: .9}

.sblink2 {width: 130px; padding: 10px; background-color: #ea9d9d; color: #ffffff; text-align: center; font-size: 8px; font-family: roboto; letter-spacing: 2px;transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .1s; transition-delay: .1s; -moz-transition-delay: .1s; -webkit-transition-delay: .1s; -o-transition-delay: .1s;opacity:0.4;filter:alpha(opacity=40);text-transform:uppercase;}
.sblink2:hover {opacity:1;filter:alpha(opacity=100);}

.tabs {
position: relative;  
width: 296px;
height:  475px;
}

.tab {
float: left;
}

.tab label {

background: #000000;
padding: 10px;
margin-left: -1px;
position: relative;
left: 1px;
font-family: oswald;
color: #ffffff;
text-transform:uppercase;
font-size:24px;
text-align:center;


}

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

.content {
position: absolute;
top: 28px;
bottom: 0px;
left: 0px;
right: 0px;
background: white;
padding: 20px;

}

[type=radio]:checked ~ label {
background: #a0e2d0;

z-index: 2;
}

[type=radio]:checked ~ label ~ .content {
z-index: 1;
}</style><center>   <div class="blah">

<center><div style="padding-top:15px;">
<table><td><div style="height:500px; width:250px; overflow:auto;"><center><div style="background-image:url('http://placehold.it/200x450');height:450px;width:200px;"><div class="great"><center><br><br><div style="font-family:oswald; font-size:15px; text-transform:upperase; line-height:90%; border-bottom: #a0e2d0 3px solid; width:150px;color:black;">NICKNAME</div><div style="font-family:arial narrow; text-transform:uppercase; font-size:8px; text-align:justify; width:150px; line-height:90%;padding-top:5px;height:50px;">name/alias, age, contact, time zone, other characters. </div>
<br>
<div class="sblink2">AGE</div><br>
<div class="sblink2">JOB</div><br>
<div class="sblink2">GROUP</div><br>
<div class="sblink2">PLAYBY</div><br>
<IMG SRC="http://placehold.it/150x100">
</center>
</div></div></td><td><center><div style="height:500px; width:296px;"><center><div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<div class="content"><div style="height:400px; overflow:auto;">
<centeR>

<img src="http://placehold.it/220x100"><br><br>
<div class="fullnameapp">FIRST MIDDLE LAST</DIV>

<table><tr><td><div style="font-family:oswald; font-size:50px; text-transform:upperase; line-height:100%; color: #a0e2d0;text-align:justify;">“</div></td>
<td><div style="font-family:oswald; font-size:12px; text-transform:upperase; line-height:100%; border-bottom: #a0e2d0 3px solid; width:200px;text-align:justify;">TELL ME ABOUT YOUR JOB. WHAT ARE YOU GOOD AT, WHAT DO YOU DO? WHAT ARE YOU KNOWN FOR, IF YOU'RE KNOWN AT ALL?</div></td></tr></table>
<div style="font-size:9px;text-align:justify;width:220px;line-height:90%;margin-bottom:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div><p>


</center><p>
</div>
</div>
</div>


<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<div class="content"><div style="height:400px; overflow:auto;">

<table><tr><td><div style="font-family:oswald; font-size:50px; text-transform:upperase; line-height:100%; color: #a0e2d0;text-align:justify;">“</div></td>
<td><div style="font-family:oswald; font-size:12px; text-transform:upperase; line-height:100%; border-bottom: #a0e2d0 3px solid; width:200px;text-align:justify;">QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE.</div></td></tr></table>
<div style="font-size:9px;text-align:justify;width:220px;line-height:90%;margin-bottom:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div><p>


<table><tr><td><div style="font-family:oswald; font-size:50px; text-transform:upperase; line-height:100%; color: #a0e2d0;text-align:justify;">“</div></td>
<td><div style="font-family:oswald; font-size:12px; text-transform:upperase; line-height:100%; border-bottom: #a0e2d0 3px solid; width:200px;text-align:justify;">QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE.</div></td></tr></table>
<div style="font-size:9px;text-align:justify;width:220px;line-height:90%;margin-bottom:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div><p>


<table><tr><td><div style="font-family:oswald; font-size:50px; text-transform:upperase; line-height:100%; color: #a0e2d0;text-align:justify;">“</div></td>
<td><div style="font-family:oswald; font-size:12px; text-transform:upperase; line-height:100%; border-bottom: #a0e2d0 3px solid; width:200px;text-align:justify;">QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE.</div></td></tr></table>
<div style="font-size:9px;text-align:justify;width:220px;line-height:90%;margin-bottom:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div><p>


<table><tr><td><div style="font-family:oswald; font-size:50px; text-transform:upperase; line-height:100%; color: #a0e2d0;text-align:justify;margin-bottom:10px;">“</div></td>
<td><div style="font-family:oswald; font-size:12px; text-transform:upperase; line-height:100%; border-bottom: #a0e2d0 3px solid; width:200px;text-align:justify;">QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE.</div></td></tr></table>
<div style="font-size:9px;text-align:justify;width:220px;line-height:90%;">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div><p>


<table><tr><td><div style="font-family:oswald; font-size:50px; text-transform:upperase; line-height:100%; color: #a0e2d0;text-align:justify;margin-bottom:10px;">“</div></td>
<td><div style="font-family:oswald; font-size:12px; text-transform:upperase; line-height:100%; border-bottom: #a0e2d0 3px solid; width:200px;text-align:justify;">QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE. QUESTION GOES HERE.</div></td></tr></table>
<div style="font-size:9px;text-align:justify;width:220px;line-height:90%;">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>

</center><p>
</div>
</div>
</div>

</div></td></div></div></center></center></table></div></center></center><CENTER><DIV STYLE="FONT-SIZE:7PX;font-family:helvetica;"><A HREF="http://shine.b1.jcink.com/index.php?showuser=2286">THANKS!</A></DIV>

<!--HTML--><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'><center><div style="width: 350px; height: 200px; background-image: url(350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE 350X200 IMAGE HERE B/W LOOKS BEST TBH); -moz-border-radius: 200 200 0 0px; -webkit-border-radius: 200 200 0 0px;"></div><div style="width: 340px; padding-left: 5px; padding-right: 5px; padding-top: 25px; padding-bottom: 30px; background-color: #bed7d7; font-family: 'Great Vibes'; font-size: 60px; text-transform: lowercase; line-height: 60%; letter-spacing: -2px; color: #fff; text-shadow: 1px 1px 0px #DAA520; word-spacing: -2px; text-align: center">light on my heart ,<br><font style="font-family: calibri; font-size: 7px; text-transform: uppercase; line-height: 30%; letter-spacing: 3px; text-align: center; color: #fff; text-shadow: 0px 0px 0px #fff">light on my feet Light in your eyes I can’t even speak</font></div><div style="width: 300px; padding: 25px; background-color: #f5f6f6"><div style="width: 279px; padding: 10px; border-right: 1px dotted #000; border-bottom: 1px dotted #000; font-size: 9px; line-height: 95%; text-align: justify; color: #222; font-family: georgia; text-indent: 20px">

post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts <p>
post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts <p>
post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts post here yay we love posts

</div></div><div style="width: 310px; padding-left: 5px; padding: 20px; background-color: #bed7d7; font-family: calibri; font-size: 7px; text-transform: uppercase; line-height: 99%; letter-spacing: 1px; text-align: justify; color: #fff; ">

notes go here yay! notes go here yay! notes go here yay! notes go here yay! notes go here yay! notes go here yay! notes go here yay! notes go here yay! notes go here yay! notes go here yay! notes go here yay!

</div><div style="width: 350px; text-align: right"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=3722" style="font-size: 9px; color: #999">❣</a></div></center>

<!--HTML--><link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<center>
<div style="width: 450px; background: #fff; padding: 20px; box-shadow:3px 3px 5px #888888; -moz-box-shadow: 3px 3px 5px #888888; -webkit-box-shadow: 3px 3px 5px #888888; -o-box-shadow:3px 3px 5px #888888;">
<div style="font-family: lily script one; font-size: 35px; color: #323369; margin-left: 163px; line-height: 70%;">face claim</div>
<div style="width: 220px; height: 8px; background: #733b94; border-left: 80px solid #418275; border-right: 150px solid #b865c7;"></div>
<div style="width: 400px; height: 120px; font-family: roboto; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify; padding-top: 20px; margin-bottom: -15px;">

FACE CLAIM INFO HERE

</div>
<table><tr>
<td><center><div style="width: 200px; height: 30px; background: #b865c7; font-family: lily script one; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">female</div>
<div style="width: 190px; height: 150px; padding: 5px; font-family: roboto; text-transform: lowercase; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify;">

[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>

</div>
</center></td>

<td><center><div style="width: 200px; height: 30px; background: #418275; font-family: lily script one; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">male</div>
<div style="width: 190px; height: 150px; padding: 5px; font-family: roboto; text-transform: lowercase; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify;">

[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>

</div>
</center></td>
</tr><tr>

<td><center><div style="width: 200px; height: 30px; background: #323369; font-family: lily script one; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">reserved</div>
<div style="width: 190px; height: 150px; padding: 5px; font-family: roboto; text-transform: lowercase; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify;">

[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>
[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>
[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>
[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>
[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>

</div>
</center></td>

<td><center><div style="width: 200px; height: 30px; background: #733b94; font-family: lily script one; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">wanted</div>
<div style="width: 190px; height: 150px; padding: 5px; font-family: roboto; text-transform: lowercase; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify;">

[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>
[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>
[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>
[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>
[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>

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

CODES HERE IF YOU NEED (IF NOT JUST DELETE THIS SENTENCE)

<div style="width: 220px; height: 8px; background: #733b94; border-left: 80px solid #418275; border-right: 150px solid #b865c7;"></div>
</div>
<div style="font-family: arial; text-transform: uppercase; letter-spacing: 4px; line-height: 11px; font-size: 7px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=148">little dove.</a></div>
</center>

<!--HTML--><center>
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>
<style type="text/css">
#header{  }

#header span{
display: none; }

#header:hover span{
display: block;
background-color: white;
width: 110px;
font-size: 9px;
Border: 3px solid #293b65;
padding: 2px;
color: #000; }

#title { 
font-family: wire one;
font-size: 20px;
font-weight: bold;}
</style>

<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="2">

<td>
<div id="title">academic club</div>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/academics.png" width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span></div></td>

<td>
<div id="title">art club</div>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/art.png" width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span></div></td>

<td>
<div id="title">foreign languages</div>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/foreign.png" width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span></div></td>

<td>
<div id="title">honors</div>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/honors.png" width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span></div></td></tr>


<tr><td>
<div id="title">literature club</div>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/literature.png"width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span></div></td>

<td>
<div id="title">performing arts</div>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/performingarts.png" width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span></div></td>

<td>
<div id="title">physical clubs</div>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/physical.png"width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span></div></td>

<td>
<div id="title">sports club</div>
<div id="header"> 
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/sports.png" width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span>
</div></td></tr>


<tr><td>
<div id="title">student council</div>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/clubs/studentcouncil.png"width=100 height=100">
<span>
<b>Sponsor(s)</b><br>
(only teachers. at least one.)<br>
-----<br>
-----<br>
-----<br>
<br>
<b>President</b><br>
-----<br>
<br>
<b>Vice President</b><br>
-----<br>
<br>
<b>Secretary</b><br>
-----<br>
<br>
<b>Treasurer</b><br>
-----<br>
<br>
<b>Members</b><br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
-----<br>
</span></div></td>

<td>
<div id="header">
<img src="http://i250.photobucket.com/albums/gg272/kissmeimlds/p2b/sports/click.png" width=100 height=100">
<span>
[*code][*i]first middle last in lowercase[/*i]<br>[/*code]
list of [b]3[/b] maximum for sports... only can be captain/co-captain of ONE. remove the astricks (*).
</span></div></td>
</tr>
</table>
[size=0]made by <a href=http://z10.invisionfree.com/Shadowplay/index.php?showuser=5192>lkshkbrrl4life</a> at <a href=http://z10.invisionfree.com/Shadowplay/index.php>SP</a>[/size]
</center>

<!--HTML--><link rel="stylesheet" type="text/css" href="http://eightletters.de/Instagram/instagram.css">
<center>
<img src="http://eightletters.de/Instagram/leistee.png">
<div id="hbg">
<div style="height: 25px;"></div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0">

<tr>
<td id="bild1" style="background-image: url('http://placehold.it/100x100');">
<div class="hover"></div>
</td></tr>

<tr>
<td id="bild2" style="background-image: url('http://placehold.it/100x100');">
<div class="hover"></div>
</td>
</tr>

</table>
</td>

<td id="bild3" style="background-image: url('http://placehold.it/200x200');">
<div class="hover"</div>
</td>
<td>

<table cellspacing="0" cellpadding="0">
<tr>
<td id="bild4" style="background-image: url('http://placehold.it/100x100');">
<div class="hover"></div>
</td>
</tr>

<tr>
<td id="bild5" style="background-image: url('http://placehold.it/100x100');">
<div class="hover"></div>
</td>
</tr>

</table>
</td>

<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td id="bild6" style="background-image: url('http://placehold.it/100x100');">
<div class="hover"></div>
</td>
</tr>

<tr>
<td id="bild7" style="background-image: url('http://placehold.it/100x100');">
<div class="hover"></div>
</td>
</tr>

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

<div id="ibg">
<div id="pbg">
<div id="profilbild">
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=18335" target="blank"><img src="http://placehold.it/90x90" style="height: 90px; width: 90px; border-radius: 3px;"></a>
</div>
<br /><br /><br /><span class="username">nickname</span>
<br /><span class="rname">Fullname</span>

<br /><br /><div id="menui">
<table>
<tr>
<td style="width: 33%; border-right: 1px solid #cccccc;">
<center>
<span class="gross">125</span>
<span class="klein">posts</span>
</center>
</td>

<td style="width: 33%; border-right: 1px solid #cccccc; padding: 5px;">
<center>
<span class="gross">832</span>
<span class="klein">followers</span>
</center>
</td>

<td style="width: 33%">
<center>
<span class="gross">89</span>
<span class="klein">following</span>
</center>
</td>
</tr>
</table>
</div>
</div>
</div>
</center>

<style text="text/css">
.username { font-size: 25px; color: #111111; font-family: 'Helvetica'; position: relative; bottom: 120px; right: 55px;} 

.rname { font-size: 14px; color: #444444; font-family: 'Arial'; position: relative; bottom: 120px; right: 55px; font-weight: bold; letter-spacing: -1px;}

/* !!! PUT THE PICTURES YOU WANT TO HOVER HEEEREEEE !!! */

#bild1 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; }

#bild2 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; }

#bild3 .hover { width: 200x; height: 200px; background-image: url('http://placehold.it/200x200');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; }

#bild4 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; }

#bild5 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; }

#bild6 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; }

#bild7 .hover { width: 100x; height: 100px; background-image: url('http://placehold.it/100x100');transition: all 1.5s ease-in-out; -webkit-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out;  opacity: 0.0; }


</style>

<!--HTML--><html>
<head>
<link href='http://fonts.googleapis.com/css?family=Khula:300,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
      <style type='text/css'>
.poppy {
   width: 330px;
   height: 400px;
   border-right: solid 40px #5A4CB9;
   margin: 0 auto;
   background-color: #ffffff;
}

.cname {
   position: relative;
   top: 10px;
   left: 10px;
   font-family: 'khula', sans-serif; 
   text-align: justify; 
   font-weight: 800; 
   font-size: 36px; 
   line-height: 100%; 
   letter-spacing: -2px; 
   color: #9D95D5; 
   text-shadow: 1px 1px 1px #131028;
   width: 300px;
}
.stabs { 
   position: relative;   
   width: 20px; 
   height: 45px; 
   clear: both;
   top: 0px;
   right: 0px;
}

.stab { 
   float: left; 
} 

.stab label { 
   display: block; 
   width: 5px; 
   height: 5px; 
   padding: 5px; 
   background-color: #E1DEF2;
   position: relative;
   right: -342px;
   top: 20px;
   border-radius: 100%;
   -moz-border-radius: 100%; 
   -webkit-border-radius: 100%; 
   -o-border-radius: 100%;

}
.stabs .stab [type=radio] { 
   display: none; 
} 
.stabs .stab [type=radio]:checked ~ label { 
   background: #9D95D5;
   z-index: 1; 
}
.stabs .stab [type=radio]:checked ~ label ~ .content {
   z-index: 4; 
   -webkit-transform: scale(1);
   -o-transform: scale(1); 
   -moz-transform: scale(1);
}
.content {
   position: absolute;
   bottom: 0px;
   top: 1px;
   left:-8px;
   right: 0px;
   background: transparent;
   padding: 15px;
   width: 290px;
   height: 340px;
   -webkit-transform: scale(0); 
   -o-transform: scale(0); 
   -moz-transform: scale(0); 
   -webkit-transition-duration: .8s; 
   -moz-transition-duration: .8s; 
   -o-transition-duration: .8s;
}

.pics {
   height: 150px;
   width: 290px;
   border: 1px solid #131028;
   padding: 10px;
}

.about {
   font-family: 'Lato', sans-serif;
   font-size: 10px;
   line-height: 110%;
   text-align: justify;
   letter-spacing: 0px;
   padding-top: 14px;
   padding-right: 5px;
   width: 300px;
   height: 140px;
   overflow-y: auto; 
   left: 8px;
   top: 2px;
   position: relative;
   color: #131028;
}

.made {
   position: relative;
   font-size: 18px;
   width: 2px;
   left: 336px;
   top: 283px;
}

a.cred:link {
   color:#E1DEF2;
   text-decoration: none;
}

a.cred:visited {
   color:#E1DEF2;
}
a.cred:hover {
   color:#9D95D5;
}
      </style>
</head>
<body>
<div class="poppy">
<div class="stabs">

<div class="stab">
<input type="radio" id="stab-1" name="stab-group-1" checked>
<label for="stab-1"> </label>
<div class="content">
<div class="pics"><img src="http://placehold.it/290x150"></div>
<div class="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas tempor pellentesque. Fusce a sagittis sapien, sit amet vehicula ligula. Praesent elit mi, facilisis non dapibus sed, gravida nec turpis. Donec posuere et arcu in consectetur. Ut dictum, nulla nec porttitor ultrices, mi libero scelerisque lorem, sit amet sollicitudin orci massa vel eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc maximus enim mi, in congue orci fermentum in. Nulla finibus egestas tempus. In ante sem, vulputate ac tristique tristique, scelerisque nec sem. Nulla facilisi. Integer a gravida nisi, in venenatis justo. Vestibulum cursus euismod lectus, et faucibus nisi tincidunt sed.<p>

Nam ac velit et mauris tincidunt porttitor in at est. Curabitur pulvinar tempor ante ut semper. Nullam commodo tellus dui, ut aliquet lacus varius at. Pellentesque congue efficitur est, in volutpat ipsum interdum ut. Nunc sem neque, mollis nec dignissim nec, maximus eu lectus. Donec eleifend, justo congue placerat egestas, lacus odio rutrum risus, ut rutrum leo tortor eget arcu. Suspendisse nisl lorem, luctus vitae placerat non, malesuada id diam. Suspendisse euismod lectus nec nisl faucibus, ac rhoncus lectus tempor. Etiam finibus purus ut cursus pharetra. Sed maximus purus tellus, eget vestibulum elit posuere in. Integer id tincidunt velit. Suspendisse maximus erat in tellus interdum pharetra. Mauris vehicula enim nibh, vestibulum pretium leo aliquam sit amet. Integer accumsan lorem id ante scelerisque pulvinar. Proin cursus urna vitae orci volutpat interdum.<p>

Aliquam fringilla lorem vel finibus eleifend. In quis pellentesque urna, vitae semper ligula. Ut posuere nibh non turpis interdum, id varius ante pulvinar. Donec eu rhoncus odio. Duis feugiat lectus non ligula volutpat, sed lobortis quam sodales. Proin id ligula posuere, lacinia magna vel, varius arcu. Quisque imperdiet, nunc sit amet convallis ultrices, mi nibh pharetra tellus, a mattis purus justo nec odio. Vestibulum a placerat turpis. Pellentesque et quam elit. Sed libero elit, ornare id ligula et, finibus finibus nibh. Curabitur interdum tortor at ex lacinia pharetra. Cras iaculis orci nec odio varius imperdiet. Nulla facilisi. Sed fermentum iaculis ultricies. Duis condimentum at metus ac porta. Etiam nec lacinia lorem.<p>

Morbi augue velit, venenatis non dui vel, laoreet ornare ex. Vivamus tristique lorem eget laoreet vulputate. Praesent turpis leo, hendrerit sit amet ornare eget, pellentesque ut velit. Morbi euismod eros ac porta placerat. Suspendisse suscipit laoreet placerat. Pellentesque ligula massa, fermentum sit amet luctus sit amet, vestibulum vitae erat. Suspendisse auctor arcu at lectus volutpat, a hendrerit metus cursus. Quisque mollis elementum nibh, non auctor sapien cursus non. Nullam malesuada, ipsum et finibus aliquet, purus arcu convallis mauris, a bibendum justo enim in diam. Aliquam eget laoreet lacus. Donec volutpat, lectus ac tincidunt tempus, orci magna aliquam est, ac interdum libero nulla sed ante. Vestibulum nec hendrerit nunc, sit amet maximus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at arcu sed dolor tincidunt dignissim. Duis commodo diam dolor, vel laoreet augue maximus sagittis.<p>

Vivamus dignissim ligula et suscipit cursus. In hac habitasse platea dictumst. Praesent efficitur sollicitudin augue, porttitor molestie dui. Nam dapibus et urna non sollicitudin. Aliquam nec dolor massa. Sed commodo dolor eget nibh faucibus lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eu arcu id augue facilisis interdum eu sed dui. Phasellus fermentum, metus eget luctus eleifend, leo velit tincidunt purus, finibus laoreet lorem nisi et purus. Pellentesque finibus blandit massa, sed dictum ipsum sagittis id. Nam sit amet turpis at dolor gravida molestie ultrices eu elit. Pellentesque placerat, nunc a viverra sagittis, est ipsum semper purus, eu congue nisi diam tincidunt turpis. In placerat tempor cursus.
</div> 
<div class="cname">Character Name</div>
</div>
</div>

<div class="stab">
<input type="radio" id="stab-2" name="stab-group-1">
<label for="stab-2" style="margin-top: 5px;"> </label>
<div class="content">
<div class="pics"><img src="http://placehold.it/290x150"></div>
<div class="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas tempor pellentesque. Fusce a sagittis sapien, sit amet vehicula ligula. Praesent elit mi, facilisis non dapibus sed, gravida nec turpis. Donec posuere et arcu in consectetur. Ut dictum, nulla nec porttitor ultrices, mi libero scelerisque lorem, sit amet sollicitudin orci massa vel eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc maximus enim mi, in congue orci fermentum in. Nulla finibus egestas tempus. In ante sem, vulputate ac tristique tristique, scelerisque nec sem. Nulla facilisi. Integer a gravida nisi, in venenatis justo. Vestibulum cursus euismod lectus, et faucibus nisi tincidunt sed.<p>

Nam ac velit et mauris tincidunt porttitor in at est. Curabitur pulvinar tempor ante ut semper. Nullam commodo tellus dui, ut aliquet lacus varius at. Pellentesque congue efficitur est, in volutpat ipsum interdum ut. Nunc sem neque, mollis nec dignissim nec, maximus eu lectus. Donec eleifend, justo congue placerat egestas, lacus odio rutrum risus, ut rutrum leo tortor eget arcu. Suspendisse nisl lorem, luctus vitae placerat non, malesuada id diam. Suspendisse euismod lectus nec nisl faucibus, ac rhoncus lectus tempor. Etiam finibus purus ut cursus pharetra. Sed maximus purus tellus, eget vestibulum elit posuere in. Integer id tincidunt velit. Suspendisse maximus erat in tellus interdum pharetra. Mauris vehicula enim nibh, vestibulum pretium leo aliquam sit amet. Integer accumsan lorem id ante scelerisque pulvinar. Proin cursus urna vitae orci volutpat interdum.<p>

Aliquam fringilla lorem vel finibus eleifend. In quis pellentesque urna, vitae semper ligula. Ut posuere nibh non turpis interdum, id varius ante pulvinar. Donec eu rhoncus odio. Duis feugiat lectus non ligula volutpat, sed lobortis quam sodales. Proin id ligula posuere, lacinia magna vel, varius arcu. Quisque imperdiet, nunc sit amet convallis ultrices, mi nibh pharetra tellus, a mattis purus justo nec odio. Vestibulum a placerat turpis. Pellentesque et quam elit. Sed libero elit, ornare id ligula et, finibus finibus nibh. Curabitur interdum tortor at ex lacinia pharetra. Cras iaculis orci nec odio varius imperdiet. Nulla facilisi. Sed fermentum iaculis ultricies. Duis condimentum at metus ac porta. Etiam nec lacinia lorem.<p>

Morbi augue velit, venenatis non dui vel, laoreet ornare ex. Vivamus tristique lorem eget laoreet vulputate. Praesent turpis leo, hendrerit sit amet ornare eget, pellentesque ut velit. Morbi euismod eros ac porta placerat. Suspendisse suscipit laoreet placerat. Pellentesque ligula massa, fermentum sit amet luctus sit amet, vestibulum vitae erat. Suspendisse auctor arcu at lectus volutpat, a hendrerit metus cursus. Quisque mollis elementum nibh, non auctor sapien cursus non. Nullam malesuada, ipsum et finibus aliquet, purus arcu convallis mauris, a bibendum justo enim in diam. Aliquam eget laoreet lacus. Donec volutpat, lectus ac tincidunt tempus, orci magna aliquam est, ac interdum libero nulla sed ante. Vestibulum nec hendrerit nunc, sit amet maximus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at arcu sed dolor tincidunt dignissim. Duis commodo diam dolor, vel laoreet augue maximus sagittis.<p>

Vivamus dignissim ligula et suscipit cursus. In hac habitasse platea dictumst. Praesent efficitur sollicitudin augue, porttitor molestie dui. Nam dapibus et urna non sollicitudin. Aliquam nec dolor massa. Sed commodo dolor eget nibh faucibus lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eu arcu id augue facilisis interdum eu sed dui. Phasellus fermentum, metus eget luctus eleifend, leo velit tincidunt purus, finibus laoreet lorem nisi et purus. Pellentesque finibus blandit massa, sed dictum ipsum sagittis id. Nam sit amet turpis at dolor gravida molestie ultrices eu elit. Pellentesque placerat, nunc a viverra sagittis, est ipsum semper purus, eu congue nisi diam tincidunt turpis. In placerat tempor cursus.
</div> 
<div class="cname">Character Name</div>
</div>
</div>

<div class="stab">
<input type="radio" id="stab-3" name="stab-group-1">
<label for="stab-3" style="margin-top: 5px;"> </label>
<div class="content">
<div class="pics"><img src="http://placehold.it/290x150"></div>
<div class="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas tempor pellentesque. Fusce a sagittis sapien, sit amet vehicula ligula. Praesent elit mi, facilisis non dapibus sed, gravida nec turpis. Donec posuere et arcu in consectetur. Ut dictum, nulla nec porttitor ultrices, mi libero scelerisque lorem, sit amet sollicitudin orci massa vel eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc maximus enim mi, in congue orci fermentum in. Nulla finibus egestas tempus. In ante sem, vulputate ac tristique tristique, scelerisque nec sem. Nulla facilisi. Integer a gravida nisi, in venenatis justo. Vestibulum cursus euismod lectus, et faucibus nisi tincidunt sed.<p>

Nam ac velit et mauris tincidunt porttitor in at est. Curabitur pulvinar tempor ante ut semper. Nullam commodo tellus dui, ut aliquet lacus varius at. Pellentesque congue efficitur est, in volutpat ipsum interdum ut. Nunc sem neque, mollis nec dignissim nec, maximus eu lectus. Donec eleifend, justo congue placerat egestas, lacus odio rutrum risus, ut rutrum leo tortor eget arcu. Suspendisse nisl lorem, luctus vitae placerat non, malesuada id diam. Suspendisse euismod lectus nec nisl faucibus, ac rhoncus lectus tempor. Etiam finibus purus ut cursus pharetra. Sed maximus purus tellus, eget vestibulum elit posuere in. Integer id tincidunt velit. Suspendisse maximus erat in tellus interdum pharetra. Mauris vehicula enim nibh, vestibulum pretium leo aliquam sit amet. Integer accumsan lorem id ante scelerisque pulvinar. Proin cursus urna vitae orci volutpat interdum.<p>

Aliquam fringilla lorem vel finibus eleifend. In quis pellentesque urna, vitae semper ligula. Ut posuere nibh non turpis interdum, id varius ante pulvinar. Donec eu rhoncus odio. Duis feugiat lectus non ligula volutpat, sed lobortis quam sodales. Proin id ligula posuere, lacinia magna vel, varius arcu. Quisque imperdiet, nunc sit amet convallis ultrices, mi nibh pharetra tellus, a mattis purus justo nec odio. Vestibulum a placerat turpis. Pellentesque et quam elit. Sed libero elit, ornare id ligula et, finibus finibus nibh. Curabitur interdum tortor at ex lacinia pharetra. Cras iaculis orci nec odio varius imperdiet. Nulla facilisi. Sed fermentum iaculis ultricies. Duis condimentum at metus ac porta. Etiam nec lacinia lorem.<p>

Morbi augue velit, venenatis non dui vel, laoreet ornare ex. Vivamus tristique lorem eget laoreet vulputate. Praesent turpis leo, hendrerit sit amet ornare eget, pellentesque ut velit. Morbi euismod eros ac porta placerat. Suspendisse suscipit laoreet placerat. Pellentesque ligula massa, fermentum sit amet luctus sit amet, vestibulum vitae erat. Suspendisse auctor arcu at lectus volutpat, a hendrerit metus cursus. Quisque mollis elementum nibh, non auctor sapien cursus non. Nullam malesuada, ipsum et finibus aliquet, purus arcu convallis mauris, a bibendum justo enim in diam. Aliquam eget laoreet lacus. Donec volutpat, lectus ac tincidunt tempus, orci magna aliquam est, ac interdum libero nulla sed ante. Vestibulum nec hendrerit nunc, sit amet maximus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at arcu sed dolor tincidunt dignissim. Duis commodo diam dolor, vel laoreet augue maximus sagittis.<p>

Vivamus dignissim ligula et suscipit cursus. In hac habitasse platea dictumst. Praesent efficitur sollicitudin augue, porttitor molestie dui. Nam dapibus et urna non sollicitudin. Aliquam nec dolor massa. Sed commodo dolor eget nibh faucibus lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eu arcu id augue facilisis interdum eu sed dui. Phasellus fermentum, metus eget luctus eleifend, leo velit tincidunt purus, finibus laoreet lorem nisi et purus. Pellentesque finibus blandit massa, sed dictum ipsum sagittis id. Nam sit amet turpis at dolor gravida molestie ultrices eu elit. Pellentesque placerat, nunc a viverra sagittis, est ipsum semper purus, eu congue nisi diam tincidunt turpis. In placerat tempor cursus.
</div> 
<div class="cname">Character Name</div>
</div>
</div>

<div class="stab">
<input type="radio" id="stab-4" name="stab-group-1">
<label for="stab-4" style="margin-top: 5px;"> </label>
<div class="content">
<div class="pics"><img src="http://placehold.it/290x150"></div>
<div class="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas tempor pellentesque. Fusce a sagittis sapien, sit amet vehicula ligula. Praesent elit mi, facilisis non dapibus sed, gravida nec turpis. Donec posuere et arcu in consectetur. Ut dictum, nulla nec porttitor ultrices, mi libero scelerisque lorem, sit amet sollicitudin orci massa vel eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc maximus enim mi, in congue orci fermentum in. Nulla finibus egestas tempus. In ante sem, vulputate ac tristique tristique, scelerisque nec sem. Nulla facilisi. Integer a gravida nisi, in venenatis justo. Vestibulum cursus euismod lectus, et faucibus nisi tincidunt sed.<p>

Nam ac velit et mauris tincidunt porttitor in at est. Curabitur pulvinar tempor ante ut semper. Nullam commodo tellus dui, ut aliquet lacus varius at. Pellentesque congue efficitur est, in volutpat ipsum interdum ut. Nunc sem neque, mollis nec dignissim nec, maximus eu lectus. Donec eleifend, justo congue placerat egestas, lacus odio rutrum risus, ut rutrum leo tortor eget arcu. Suspendisse nisl lorem, luctus vitae placerat non, malesuada id diam. Suspendisse euismod lectus nec nisl faucibus, ac rhoncus lectus tempor. Etiam finibus purus ut cursus pharetra. Sed maximus purus tellus, eget vestibulum elit posuere in. Integer id tincidunt velit. Suspendisse maximus erat in tellus interdum pharetra. Mauris vehicula enim nibh, vestibulum pretium leo aliquam sit amet. Integer accumsan lorem id ante scelerisque pulvinar. Proin cursus urna vitae orci volutpat interdum.<p>

Aliquam fringilla lorem vel finibus eleifend. In quis pellentesque urna, vitae semper ligula. Ut posuere nibh non turpis interdum, id varius ante pulvinar. Donec eu rhoncus odio. Duis feugiat lectus non ligula volutpat, sed lobortis quam sodales. Proin id ligula posuere, lacinia magna vel, varius arcu. Quisque imperdiet, nunc sit amet convallis ultrices, mi nibh pharetra tellus, a mattis purus justo nec odio. Vestibulum a placerat turpis. Pellentesque et quam elit. Sed libero elit, ornare id ligula et, finibus finibus nibh. Curabitur interdum tortor at ex lacinia pharetra. Cras iaculis orci nec odio varius imperdiet. Nulla facilisi. Sed fermentum iaculis ultricies. Duis condimentum at metus ac porta. Etiam nec lacinia lorem.<p>

Morbi augue velit, venenatis non dui vel, laoreet ornare ex. Vivamus tristique lorem eget laoreet vulputate. Praesent turpis leo, hendrerit sit amet ornare eget, pellentesque ut velit. Morbi euismod eros ac porta placerat. Suspendisse suscipit laoreet placerat. Pellentesque ligula massa, fermentum sit amet luctus sit amet, vestibulum vitae erat. Suspendisse auctor arcu at lectus volutpat, a hendrerit metus cursus. Quisque mollis elementum nibh, non auctor sapien cursus non. Nullam malesuada, ipsum et finibus aliquet, purus arcu convallis mauris, a bibendum justo enim in diam. Aliquam eget laoreet lacus. Donec volutpat, lectus ac tincidunt tempus, orci magna aliquam est, ac interdum libero nulla sed ante. Vestibulum nec hendrerit nunc, sit amet maximus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at arcu sed dolor tincidunt dignissim. Duis commodo diam dolor, vel laoreet augue maximus sagittis.<p>

Vivamus dignissim ligula et suscipit cursus. In hac habitasse platea dictumst. Praesent efficitur sollicitudin augue, porttitor molestie dui. Nam dapibus et urna non sollicitudin. Aliquam nec dolor massa. Sed commodo dolor eget nibh faucibus lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eu arcu id augue facilisis interdum eu sed dui. Phasellus fermentum, metus eget luctus eleifend, leo velit tincidunt purus, finibus laoreet lorem nisi et purus. Pellentesque finibus blandit massa, sed dictum ipsum sagittis id. Nam sit amet turpis at dolor gravida molestie ultrices eu elit. Pellentesque placerat, nunc a viverra sagittis, est ipsum semper purus, eu congue nisi diam tincidunt turpis. In placerat tempor cursus.
</div> 
<div class="cname">Character Name</div>
</div>
</div>

<div class="stab">
<input type="radio" id="stab-5" name="stab-group-1">
<label for="stab-5" style="margin-top: 5px;"> </label>
<div class="content">
<div class="pics"><img src="http://placehold.it/290x150"></div>
<div class="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas tempor pellentesque. Fusce a sagittis sapien, sit amet vehicula ligula. Praesent elit mi, facilisis non dapibus sed, gravida nec turpis. Donec posuere et arcu in consectetur. Ut dictum, nulla nec porttitor ultrices, mi libero scelerisque lorem, sit amet sollicitudin orci massa vel eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc maximus enim mi, in congue orci fermentum in. Nulla finibus egestas tempus. In ante sem, vulputate ac tristique tristique, scelerisque nec sem. Nulla facilisi. Integer a gravida nisi, in venenatis justo. Vestibulum cursus euismod lectus, et faucibus nisi tincidunt sed.<p>

Nam ac velit et mauris tincidunt porttitor in at est. Curabitur pulvinar tempor ante ut semper. Nullam commodo tellus dui, ut aliquet lacus varius at. Pellentesque congue efficitur est, in volutpat ipsum interdum ut. Nunc sem neque, mollis nec dignissim nec, maximus eu lectus. Donec eleifend, justo congue placerat egestas, lacus odio rutrum risus, ut rutrum leo tortor eget arcu. Suspendisse nisl lorem, luctus vitae placerat non, malesuada id diam. Suspendisse euismod lectus nec nisl faucibus, ac rhoncus lectus tempor. Etiam finibus purus ut cursus pharetra. Sed maximus purus tellus, eget vestibulum elit posuere in. Integer id tincidunt velit. Suspendisse maximus erat in tellus interdum pharetra. Mauris vehicula enim nibh, vestibulum pretium leo aliquam sit amet. Integer accumsan lorem id ante scelerisque pulvinar. Proin cursus urna vitae orci volutpat interdum.<p>

Aliquam fringilla lorem vel finibus eleifend. In quis pellentesque urna, vitae semper ligula. Ut posuere nibh non turpis interdum, id varius ante pulvinar. Donec eu rhoncus odio. Duis feugiat lectus non ligula volutpat, sed lobortis quam sodales. Proin id ligula posuere, lacinia magna vel, varius arcu. Quisque imperdiet, nunc sit amet convallis ultrices, mi nibh pharetra tellus, a mattis purus justo nec odio. Vestibulum a placerat turpis. Pellentesque et quam elit. Sed libero elit, ornare id ligula et, finibus finibus nibh. Curabitur interdum tortor at ex lacinia pharetra. Cras iaculis orci nec odio varius imperdiet. Nulla facilisi. Sed fermentum iaculis ultricies. Duis condimentum at metus ac porta. Etiam nec lacinia lorem.<p>

Morbi augue velit, venenatis non dui vel, laoreet ornare ex. Vivamus tristique lorem eget laoreet vulputate. Praesent turpis leo, hendrerit sit amet ornare eget, pellentesque ut velit. Morbi euismod eros ac porta placerat. Suspendisse suscipit laoreet placerat. Pellentesque ligula massa, fermentum sit amet luctus sit amet, vestibulum vitae erat. Suspendisse auctor arcu at lectus volutpat, a hendrerit metus cursus. Quisque mollis elementum nibh, non auctor sapien cursus non. Nullam malesuada, ipsum et finibus aliquet, purus arcu convallis mauris, a bibendum justo enim in diam. Aliquam eget laoreet lacus. Donec volutpat, lectus ac tincidunt tempus, orci magna aliquam est, ac interdum libero nulla sed ante. Vestibulum nec hendrerit nunc, sit amet maximus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at arcu sed dolor tincidunt dignissim. Duis commodo diam dolor, vel laoreet augue maximus sagittis.<p>

Vivamus dignissim ligula et suscipit cursus. In hac habitasse platea dictumst. Praesent efficitur sollicitudin augue, porttitor molestie dui. Nam dapibus et urna non sollicitudin. Aliquam nec dolor massa. Sed commodo dolor eget nibh faucibus lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eu arcu id augue facilisis interdum eu sed dui. Phasellus fermentum, metus eget luctus eleifend, leo velit tincidunt purus, finibus laoreet lorem nisi et purus. Pellentesque finibus blandit massa, sed dictum ipsum sagittis id. Nam sit amet turpis at dolor gravida molestie ultrices eu elit. Pellentesque placerat, nunc a viverra sagittis, est ipsum semper purus, eu congue nisi diam tincidunt turpis. In placerat tempor cursus.
</div> 
<div class="cname">Character Name</div>
</div>
</div>

<div class="made"> <a class="cred" href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=12810">•</a><a class="cred" href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=44386">•</a><a class="cred" href="http://wecode.jcink.net/index.php?showuser=1311">•</a><a class="cred" href="http://shine.b1.jcink.com/index.php?showuser=9965">•</a> </div>
</div>
</div>
</body>
</html>

<!--HTML--><style type="text/css">
.shipbox { width: 75px; height: 75px; opacity: 0; }
.shipbox:hover { width: 75px; height: 75px; font-family:arial; text-transform:uppercase; font-size:7px; line-height:95%; letter-spacing:1px; opacity: 1; text-align: center; color: white; line-height:11em; background-color:COLORHERE; }
.mainname {  width: 310px; height: 170px; opacity: 0; }
.mainname:hover {  width: 310px; height: 170px; background:url(310x170IMAGE); opacity: 1; text-align: center; }
</style>
<div style="width: 500px; height: 510px; background-color: white; border-left: 10px solid white; border-right: 10px solid white; border-top: 10px solid white;"><br>
<table><td>

<div style="width: 310px; height: 170px; background:url(310x170IMAGE);">



<div class="mainname"><br><br><br><br><br><br><center><div style="padding: 10px; width: 100px; font-family:arial; text-transform:uppercase; font-size:7px; line-height:95%; letter-spacing:1px;  color: COLORHERE; background-color: white;">


CHARACTER NAME.



</div></center></div></div></td><td><div style="width: 130px; height: 150px; background-color:COLORHERE; font-family:arial; text-transform:uppercase; font-size:7px; line-height:95%; letter-spacing:0px; padding: 10px; overflow: hidden; color: white; text-align: justify;">



LYRICS TO DESCRIBE CHARACTER.



</div> </td></table><table><td><div style="width: 150px; height: 315px; overflow: hidden;"><table><tr><td>


<div style="width: 75px; height: 75px; background:url(75x75IMAGE);"></div>


</td><td><div style="width: 75px; height: 75px; background-color:COLORHERE;"><div class="shipbox">


DESCRIPTION


</div></div></td></tr><tr><td><div style="width: 75px; height: 75px; background-color:COLORHERE;"><div class="shipbox">


DESCRIPTION


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



<div style="width: 75px; height: 75px; background:url(75x75IMAGE);">



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



<div style="width: 75px; height: 75px; background:url(75x75IMAGE);">



</div></td><td><div style="width: 75px; height: 75px; background-color:COLORHERE;"><div class="shipbox">



DESCRIPTION



</div></div></td></tr><tr><td><div style="width: 75px; height: 75px; background-color:COLORHERE;"><div class="shipbox">



DESCRIPTION



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



<div style="width: 75px; height: 75px; background:url(75x75IMAGE);">



</div></td></tr></table></div></td><td><div style="width: 270px; height: 265px; background-color: white; padding: 20px; line-height: .9; overflow: auto; text-align: justify;">





blurb




<br><br><div style="padding: 10px; font-family:arial; text-transform:uppercase; font-size:7px; line-height:95%; letter-spacing:1px;  color: COLORHERE; text-align: center;">FRIENDS</DIV>



friends blurb.




<br><br><div style="padding: 10px; font-family:arial; text-transform:uppercase; font-size:7px; line-height:95%; letter-spacing:1px;  color: COLORHERE; text-align: center;">ENEMIES</DIV>




enemies blurb.




<br><br><div style="padding: 10px; font-family:arial; text-transform:uppercase; font-size:7px; line-height:95%; letter-spacing:1px;  color: COLORHERE; text-align: center;">LOVERS</DIV> 


lovers blurb.



</div></td></table><br></div>
<a href="http://forums.athousandfireflies.com/index.php?showuser=19112"><div style="width: 500px; height: 10px; background-color: white; padding-right: 20px; font-size: 7px; letter-spacing: 1px; color: eeeeee; text-align: right;">© NIALL NOT OFFICIAL @ ATF</diV></a>

<!--HTML--><center><br><div style="width: 430px; padding: 15px; background-image: url(http://i39.tinypic.com/2mn4nqq.jpg);"><center>
<div style="width: 422px; background-color: #ededed; padding: 5px;"><div style="width: 412px; background-color: #ffffff; color: 7b7b7b; padding: 5px; text-align: left;">http://www.ljnamehere.livejournal.com/####.html</div></div><br>

<div style="width:430px;background-color:#EDEDED; padding-top: 7px; padding-right: 1px; padding-left: 1px;">
<table width="410px;" align="left"><tr><td><div style="background-color: #FFCCCC; width: 100px; height: 60px; font-family: arial; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: f6f6f6;">
<br><br><br><center>recent entries</center></div></td> <td><div style="background-color: #FFFFFF; width: 100px; height: 60px; font-family: arial; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: b1b1b1;"><br><br><br>
<center>archive</center></div></td> <td><div style="background-color: #FFCCCC; width: 100px; height: 60px; font-family: arial; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: f6f6f6;"><br><br><br>
<center>friends</center></div></td> <td><div style="background-color: #FFCCCC; width: 100px; height: 60px; font-family: arial; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: f6f6f6;"><br><br><br>
<center>user info</center></div></td></tr></table><br><br>

<table width="412px" style="background-color: #ffffff;"><tr><td width="250px" valign="top"><div style="width: 190px; font-family: georgia; font-size: 10px; letter-spacing: 1px; color: #7b7b7b;"><center><i>name, age, something about them.</i></center></div>
<div style="width: 200px; font-family: arial; text-align: justify; line-height: 90%; color: 7b7b7b; padding: 5px;">a little "about me" shit goes right here.</div></td> <td width="240px" valign="top"><div style="width: 190px; font-family: georgia; font-size: 10px; letter-spacing: 1px; padding-bottom: 3px; color: 7b7b7b;"><center><i>links</i></center></div>
<div align="right" style="width: 190px; font-family: georgia; font-size: 10px; letter-spacing: 2px; padding-bottom: 3px; color: 7b7b7b; border-bottom: 1px solid #eee; text-align: right;"><i>twitter</i></div>
<div align="right" style="width: 190px; font-family: georgia; font-size: 10px; letter-spacing: 2px; padding-bottom: 3px; border-bottom: 1px solid #eee; text-align: right; color: 7b7b7b;"><i>facebook</i></div>
<div align="right" style="width: 190px; font-family: georgia; font-size: 10px; letter-spacing: 2px; padding-bottom: 3px; border-bottom: 1px solid #eee; text-align: right; color: 7b7b7b;"><i>formspring</i></div>
<div align="right" style="width: 190px; font-family: georgia; font-size: 10px; letter-spacing: 2px; padding-bottom: 3px; border-bottom: 1px solid #eee; text-align: right; color: 7b7b7b;"><i>youtube</i></div></td></tr></table><br><Br>

<table width="400px"><tr><td valign="top"><div style="background-image: url(100x100 ICON HERE!!!); height: 100px; width: 100px; border: 5px solid #ffffff; v-align: top"></div></td> <td><div style="font-family:arial;font-size:8px; text-transform: uppercase; letter-spacing: 5px; color: aaaaaa;">DAY MONTH  YEAR @ #:## PM</div><div style="font-family:georgia;text-transform:lowercase;letter-spacing:-0px;font-size:20px;color:#804040;"><font color=#5E5E5E><i>title of entry</i></font></div><font color=#7b7b7b><div style="width: 285px; text-align: justify;  font-family: arial; background-color: ffffff; padding: 5px;">blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. blah blah blah. this is where your entry will go. <br><br>
<b>tags:</b> tags1; tag2; tag3; etc;<br>
<b>mood:</b> mood here<br>
<b>music:</b> title of song by artist<br>
LEAVE A COMMENT!</div></font><br></div></td></tr></table>
<center><div style="width: 400px; text-align: center; font-family: arial; font-size: 8px; color: #7b7b7b; line-height: 100%; letter-spacing: 1px;">TEMPLATE BY<a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=5671">MAKE ME WANNA LALA!</a> OF ATF.</div></center>
<br></div></center></center>

<!--HTML--><link href='http://fonts.googleapis.com/css?family=Abril+Fatface|Oswald' rel='stylesheet' type='text/css'>
<style type="text/css">

#temp-container {
width: 360px;
background-color: #d7dee0;
padding: 30px 20px 30px 20px;
margin: 20px auto;
}

.temp-text {
width: 300px;
padding: 15px 20px 11px 20px;
background-color: #fff;
outline: 3px #fff double;
outline-offset: 5px;
font: normal normal normal 10px/90% 'times new roman';
color: #869ca3;
text-align: justify;
}

.temp-text b {
font: bold italic normal 10px/90% 'times new roman';
color: #1f4d54;
}

.temp-text p:first-letter {
font: normal normal normal 20px/10% 'Abril Fatface';
text-transform: uppercase;
}

.temp-headerlyrics {
width: 400px;
font: normal normal normal 50px/100% 'Oswald';
color: #d7dee3;
text-align: center;
text-transform: uppercase;
position: relative;
top: 21px;
letter-spacing: -4px;
word-spacing: 4px;
text-shadow: 1px 1px 0px #fff, 2px 2px 0px #869ca3;
}

.temp-bottombox {
width: 260px;
background-color: #fff;
border-top: 5px solid #869ca3;
padding: 15px 20px 5px 20px;
}
.temp-bottombox img {
width: 100px;
height: 100px;
outline: 4px #d7dee3 solid;
position: relative; 
right: 20px;
}
.temp-fontbox {
width: 175px;
height: 100px;
}
.temp-fontbox h1 {
font: italic normal normal 12px/10% 'times new roman';
color: #869ca3;
letter-spacing: 10px;
text-align: center;
margin-bottom: -10px;
position: relative;
top: 10px;
}
.temp-fontbox h2 {
font: normal normal normal 40px/10% 'Oswald';
color: #869ca3;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 50px;
text-shadow: -1px 1px 0px #d7dee3, -2px 2px 0px #869ca3;
}
.temp-tags {
width: 420px;
background-color: #d7dee3;
margin-left: 20px;
margin-top: -15px;
margin-bottom: 50px;
}
.temp-tag {
width: 76px;
font: normal normal normal 12px/100% 'Oswald';
color: #d7dee3;
text-align: center;
float: left;
background-color: #869ca3;
padding: 10px 10px 10px 10px;
margin-right: 5px;
text-transform: lowercase;
text-shadow: 1px 1px 0px #1f4d54;
}
.temp-tags a:link,
.temp-tags a:active,
.temp-tags a:visited,
.temp-tags a:hover {
font: normal normal normal 12px/100% 'Oswald';
color: #d7dee3;
text-align: center;
text-transform: lowercase;
text-decoration: none;
}

</style>

<center><div class="temp-headerlyrics">misguided ghosts</div>

<div id="temp-container">
<div class="temp-text"><p>
text goes here, but your paragraphs between <p> and </p> for fancy first letter!
</p>

<div class="temp-bottombox">
<table><tr><td><img src="100X100 IMAGE HURR!!!!! will auto resize"></td>
<td><div class="temp-fontbox"><h1>and we</h1>

<h2>in circles</h2>

<h1>just go</h1>
</div>
</td></tr></table>
</div>
</div>
</div>

<div class="temp-tags">

<div class="temp-tag">tag</div>
<div class="temp-tag">### words</div>
<div class="temp-tag"><a href="linkhere">outfit</a></div>
<div class="temp-tag" style= width:77px;"><a href="http://cttw.b1.jcink.com/index.php?showuser=11">&hearts; dino</a></div> 

</div>
</center>

<!--HTML--><style>

#satelliteheart { width: 270px; padding: 50px; background: #fff; border: 1px solid #f0f0f0; }

.satellitetitle { padding: 5px; border-bottom: 1px solid #f0f0f0; font-family: montserrat alternates; font-size: 38px; color: #ff5953; font-weight: 700; text-shadow: 1px 1px #eee; text-align: center; text-transform: lowercase; letter-spacing: -6px; line-height: 30px; }

.satellitetitle1 { padding: 5px; font-family: cousine; font-size: 8px; color: #111; text-align: center; text-transform: uppercase; letter-spacing: 3px; line-height: 10px; }

.satellitecont { margin: 20px 0px; width: 250px; height: 300px; overflow: auto; padding: 10px; font-family: arial; font-size:  10px; color: #111; text-align: justify; letter-spacing: 1px; line-height: 10px; }

.satellitecont::-webkit-scrollbar { background: #fff; width: 5px;  } .satellitecont::-webkit-scrollbar-thumb { background: #ff4c5e; width: 5px; } .satellitecont::-webkit-scrollbar-corner { background: #fff; }

.satellitecont b { font-family: montserrat alternates; font-size: 11px; color: #ff4c5e; font-weight: 700; }
.satellitecont i { font-family: montserrat alternates; font-size: 11px; color: #ff733b; font-weight: 700; }

#satelliteheart img { display: inline-block; width: 100px; height: 100px; border: 10px solid #fff; background-image: url(http://placehold.it/100x100); border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%;  }

.satellitetag { display: inline-block; margin-right: -5px; width: 120px; padding: 10px; background: #ff5953; font-family: cousine; font-size: 8px; color: #fff; text-align: left; text-transform: uppercase; letter-spacing: 2px; line-height: 10px; }

</style> <link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<center><div id="satelliteheart">

<div class="satellitetitle">SATELLITE HEART</div>
<div class="satellitetitle1">SUCH A WASTE OF A YOUNG HEART</div>

<div class="satellitecont">

this is where your post goes!<p>

</div>

<div class="satellitetag">TAG. WORDS.</div> <img src="http://placehold.it/100x100">

</div>

<div style="width: 360px; text-align: right; font-family: arial; font-size: 7px; text-transform: uppercase; letter-spacing: 1px;"><a href="http://cttw.jcink.net/index.php?showuser=118">♥ HANNAH</a></div>

</center>