<!--HTML-->

<center><link href='http://fonts.googleapis.com/css?family=Seaweed+Script' rel='stylesheet' type='text/css'>

<div style="height: 150px; width: 500px; border-left: #000 10px solid; border-right: #000 10px solid;"><div style="height: 100px; width: 500px; margin-bottom: -1px;">
<div class="raicontainer">
<img src="500x100 IMAGE HERE">
<div class="raitextbox">
<p class="raitext">
<div style="margin-top: 5px; color: #FFBD00; text-align: center; font-family: seaweed script; font-size: 35px; text-transform: lowercase; line-height: 20px;">SHORT LINE OF LYRICS<br>
<center><div style="text-transform: uppercase; font-size: 8px; font-family: verdana; line-height: 10px; text-align: justify; width: 392px; color: #FFF200;">NO MORE THAN FOUR OR FIVE LINES OF LYRICS HERE</div></center></p></div></div></div></div>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="500" height="10"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#000000" /><param name="FlashVars" value="mp3=YOUR MP3 LINK HERE
" /></object>
<div style="height: 40px; width: 500px; background-color: #F6AC29; margin-top: -5px;"><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 20px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left;"><a class="raitips" href="LINK TO WEBPAGE HERE">●<span>LINK NAME</span></a></div><div style="height: 20px; width: 180px; margin-left: 10px; margin-top: 10px; background-color: #8B6210; float: left; text-transform: uppercase; font-size: 10px; color: #000000; line-height: 20px;">made by of </div></div></div></center><br><br>

<style> .raicontainer {position:relative;} 
.raitextbox:hover {opacity:1;} 
.raitext {padding-top: 50px;} 
.raitextbox {width:500px;height:100px;position:absolute;top:0;left:0;opacity:0;background-color: rgba(0,0,0,0.75);-webkit-transition: all 0.7s ease;transition: all 0.7s ease;} 
a.raitips {  position: relative;  display: inline;  font-size: 20px;margin-bottom: 5px;color: #000000;line-height: 18px;} 
a.raitips span {  position: absolute;  width:100px;  color: #FFFFFF;  background: #000000;  height: 20px;  line-height: 20px;  text-align: center;  visibility: hidden; opacity:0;  filter:alpha(opacity=0); border-radius: 6px;  font-size: 12px; margin-left: -50px;} 
a.raitips span:after {  content: '';  position: absolute;  bottom: 100%;  left: 50%;  margin-left: -8px;  width: 0; height: 0;  border-bottom: 8px solid #000000;  border-right: 8px solid transparent;  border-left: 8px solid transparent;} 
a:hover.raitips span {  visibility: visible;  opacity: 0.8; filter:alpha(opacity=80);  top: 30px;  left: 50%;   margin-top: 5px; z-index: 999; webkit-transition-duration:1.2s; transition-duration:1.2s } 
.pokeball2 {width: 33px;height: 33px; background-image: url(http://i.imgur.com/JYkYOtf.png);border-radius: 100%;transition-duration: .6s;-webkit- transition-duration: .6s;-moz- transition-duration: .6s;-ms- transition-duration: .6s;-o- transition-duration: .6s;transform: rotate(0deg) ease;-webkit-transform: rotate(0deg) ease;-moz-transform: rotate(0deg);-ms-transform: rotate(0deg) ease;-o-transform: rotate(0deg) ease; } 
.pokeball2:hover {width: 33px;height: 33px;background-image: url(http://i.imgur.com/JYkYOtf.png);border-radius: 100%;transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);}

</style>

<style type="text/css">
::-webkit-scrollbar { background: #colorhexcode; width: NUMBERpx; }
::-webkit-scrollbar-thumb { background: #colorhexcode; width: NUMBERpx }
::-webkit-scrollbar-corner { background: #000; }
</style>

<!--HTML-->
<center><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900|Roboto:300' 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://nevermore.b1.jcink.com/uploads/nevermore/truelove.css"><style type="text/css">

#charname .truelove5b i, #charname .truelove6b, #charname .truelove6d i { color: #bbd9e0; }
#charname .truelove2c { background: linear-gradient(to bottom, #BBD9E0 0%,#BAC6DE 100%); }
#charname .tlbubble { background-color: #bbd9e0; }
#charname .tlbubble:after { border-color: transparent #bbd9e0; }

</style><div id="charname">
<div class="truelove1"><div class="truelove2"><div class="truelove2a"><i class="fa fa-wifi"></i><i class="fa fa-signal"></i> 12:00</div><div class="truelove3a">

<img src="http://placehold.it/160x160">

<div class="truelove3"></div></div><div class="truelove4">

<span>Your Character</span>
<br>to <b>Their Character</b>

</div><div class="truelove5"><table cellpadding="0" cellspacing="0"><tr valign="top"><td><div class="truelove5a"><a href="http://shine.jcink.net/index.php?showuser=3019"><div class="truelove5b"><i class="fa fa-envelope"></i></div></a></div></td><td><div class="truelove6">


<div class="tlbubble">text bubble will expand until the line needs to break</div>


</div><div class="truelove6a"><table cellpadding="0" cellspacing="0"><td><div class="truelove6c">Send Message...</div></td><td><div class="truelove6d"><i class="fa fa-send"></i></div></td></table></div></td></tr></table></div><div class="truelove2b"></div><div class="truelove2c"></div></div></div></div></center>

<!--HTML-->
<center><style> #fire { width: 450px; height: 250px; } #fire a { color: #798F78; } #fire a:hover { color: #F5DE98; } .flie { width: 295px; padding: 5px 0px; background: #fff; opacity: 0; font-family: righteous; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; position: relative; top: 100px; text-align: center; color: #798F78; transparent; -webkit-transition: all .9s ease-in; -moz-transition: all .9s ease-in; -o-transition: all .9s ease-in; transition: all .9s ease-in; } #fire:hover .flie { opacity: 0.8; } </style> <div style="width: 450px; font-family: dancing script; font-size: 43px; text-align: center; line-height: 80%; color: #798F78;">there's a firefly loose tonight</div> <div style="width: 450px; font-family: righteous; font-size: 15px; text-transform: uppercase; letter-spacing: 1px;text-align: center; line-height: 100%; padding-bottom: 3px; color: #06071C;">better catch it before it burns this place down</div> <div id="fire"> <div style="width: 150px; height: 250px; background: url(http://placehold.it/150x250); float: left; margin-right: 5px;"></div> <div style="width: 145px; height: 100px; background: url(http://placehold.it/145x100); float: left; margin-right: 5px;"></div> <div style="width: 145px; height: 100px; background: url(http://placehold.it/140x100); float: left;"></div> <div style="width:295px; height: 145px; background: url(http://placehold.it/295x145); float: left; margin-top: 5px;"> <div class="flie"> <a href="link.here">application</a> • <a href="link.here">shipper</a> • <a href="link.here">wanted</a> • <a href="link.here">tracker</a></div></div></div> <div style="width: 450px; height: 2px; border-bottom: 1px dotted #F5DE98;"></div> <div style="width: 450px; height: 2px; border-bottom: 5px solid #9BC391;"></div> <div style="width: 450px; height: 2px; border-bottom: 10px solid #798F78;"></div>  </center><link href='http://fonts.googleapis.com/css?family=Dancing+Script|Righteous' rel='stylesheet' type='text/css'>

<!--HTML-->

<center><link href='http://fonts.googleapis.com/css?family=Oswald|Dancing+Script' rel='stylesheet' type='text/css'><style type="text/css">.crossmyheart { width: 500; height: 25px; background: transparent; color: black; text-transform: uppercase; font-size: 15px; padding-top: 10px; line-height: 100%; letter-spacing: 45px; font-family: 'Oswald', sans-serif; text-align: center; margin-top: 3px; }.hopetodie { width: 450px; line-height: 110%; font-family: calibri; color: black; text-align: justify; font-size: 9px; text-transform: uppercase; margin-left: 3px; margin-bottom: -5px; }.hopetodie p:first-letter { font-family: 'Dancing Script', cursive; font-size: 25px; margin-right: 2px; }</style><table cellpadding="0" cellspacing="0"><tr><td valign="top"><div class="hopetodie"><p>Cross my heart and hope to die Burn my lungs and curse my eyes I've lost control and I don't want it back I'm going numb, I've been hijacked It's a fucking drag I taste you on my lips and I can't get rid of you So I say damn your kiss and the awful things you do Yeah, you're worse than nicotine, nicotine It's better to burn than to fade away It's better to leave than to be replaced I'm losing to you baby I'm no</p></div><table cellpadding="0" cellspacing="0"><tr><td><div style="width: 250px; height: 200px; border-top: 10px solid #9aedd0; background:url(http://placehold.it/250x200);"></div></td><td><div style="width: 200px; height: 200px; border-bottom: 10px solid #9aedd0; background:url(http://placehold.it/200x200); margin-left: 3px;"></div></td></tr></table><div class="crossmyheart">nicotine</div></tr></table></center>

<!--HTML-->
<center><div style="width: 450px; height: 200px; border-top: 10px solid #000; background: url(http://static.tumblr.com/gmzbzi9/Rexluyqxg/tumblr_lrzyk67zir1qdpbcko1_500.jpg);"><center><div style="width: 300px; height: 150px; padding: 30px; background: transparent;"><div class="christmas"></div><div style="width: 110px; height: 91px; float: right; padding: 20px; text-align: justify; font-family: arial; font-size: 8px; text-transform: uppercase; line-height: 90%; color: #fff; overflow: hidden;">And so this is Christmas For weak and for strong For rich and the poor ones The road is so long And so happy Christmas For black and for white For yellow and red ones Let's stop all the fight A very merry Christmas And a happy New Year Let's hope it's a good one Without any fear And so this is Christmas what have we done Another year over a new</div></div></center></div><div style="width: 420px; height: 10px; padding: 15px; background: #000; text-align: center;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="248" height="10">
   <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
   <param name="bgcolor" value="#000000" />
   <param name="FlashVars" value="mp3=http://www.blue22.net/audio/x-mas_10/02_Happy_Christmas_(War_is_Over).mp3" /></object></div></center><style>.christmas { width: 150px; height: 150px; float: left; background-image: url('http://placehold.it/150'); transition-duration: .9s; -moz-transition-duration: .9s; -webkit-transition-duration: .9s; -o-transition-duration: .9s; -ms-transition-duration: .9s;  } 

.christmas:hover { width: 150px; height: 150px; background-image: url('150X150 IMAGE/GIF HERE'); -webkit-filter: grayscale(100%); -moz-border-radius: 100%; -webkit-border-radius: 100%; -o-border-radius: 100% }</style>

<!--HTML-->

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><style type='text/css'>
.likeyou { width:400px; background-color:#fff; padding:20px; }
.somethingabout { width:195px; height:200px; background-color:#222; text-align:center;font-family:oswald; color:#fff; line-height:200px; font-size:20px; text-transform:uppercase; letter-spacing:2px; }
.nothingfeels { text-align:justify; line-height:100%; font-size:10px; font-family:calibri; color:#222; width:195px; height:200px; }
.columns {  text-align:justify; line-height:100%; font-size:10px; font-family:calibri; color:#222; }
.columns a { color:#222; }
.lybutton1 { width:195px; height:50px; background-color:#fff; text-align:center; font-family:oswald; color:#222; line-height:50px; font-size:20px; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.lybutton2 { width:195px; height:50px; background-color:#222; text-align:center; font-family:oswald; color:#fff; line-height:50px; font-size:20px; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.columns2 {  text-align:justify; line-height:100%; font-size:10px; font-family:calibri; color:#222; }
.femalecolor a { color:#bc8ac2; letter-spacing:2px; text-transform:lowercase; }
.malecolor a { color:#8ab3c2; letter-spacing:2px; text-transform:lowercase; }
</style><center><div class='likeyou'><table cellpadding='0' cellspacing='0'><tr><td valign='top'><div class='somethingabout'>FACE CLAIM</div></td><td valign='top'><div style='width:10px;'></div></td><td valign='top'><div class='nothingfeels'>

reservations last for two days and expire at midnight gmt time on the second day after you've posted your reservations. face claims reopen if the account has not been logged into in ten days and no absence notice has been posted. when posting your claims, please wrap in code or else your claim will be deleted and not added until you can fix it!! want ad faces are [u]not[/u] reservations, though we encourage you to speak to the poster of the ad before you snatch up the face they want.
<p><div style="display: inline-block; text-align: center; width: 195px;"><noscript><div style="padding: 2px 4px; margin: 0px 0px 5px; border:none; text-align: center; background-color: transparent;"><a href="" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"> </a></div></noscript><script type="text/javascript" src="http://localtimes.info/clock.php?&cp1_Hex=222222&cp2_Hex=FFFFFF&cp3_Hex=222222&fwdt=200&ham=0&hbg=1&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=1000"></script></div></div></td></tr></table><table cellpadding='0' cellspacing='0'><tr><td valign='top'><div class='lybutton1'>RESERVATIONS</div><div class='columns'>

Ϟ <b>first last</b> for <i>alias</i> until <b>## month</b><br>

</div></td><div style='width:10px;'></div><td valign='top'><div class='lybutton1'>WANT ADS</div><div class='columns'>

Ϟ <b>first last</b> for <i>alias</i> - <a href='link'>want ad</a><br>

</div></td></tr></table><div style='height:10px;'></div><table cellpadding='0' cellspacing='0'><tr><td valign='top'><div class='lybutton2'>FEMALES</div><div class='columns2'>

<span class='femalecolor'><a href='link'>first last</a></span> as <b>first last</b><br>

</div></td><div style='width:10px;'></div><td valign='top'><div class='lybutton2'>MALES</div><div class='columns2'>

<span class='malecolor'><a href='link'>first last</a></span> as <b>first last</b><br>

</div></td></tr></table></div>
<div style='height:20px;'></div>
<div class='likeyou' style='text-align:center;font-family:oswald; color:#222; line-height:20px; font-size:20px; text-transform:uppercase; letter-spacing:2px;'>
to reserve [*CODE]Ϟ <b>first last</b> for <i>alias</i> until <b>## month</b><br>[/*CODE]

for want ad [*CODE]Ϟ <b>first last</b> for <i>alias</i> - <a href='link'>want ad</a><br>[/*CODE]

female claim [*CODE]<span class='femalecolor'><a href='link'>celeb first last</a></span> as <b>character first last</b><br>[/*CODE]

male claim [*CODE]<span class='malecolor'><a href='link'>celeb first last</a></span> as <b>character first last</b><br>[/*CODE]
</div><div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'>[url=http://shine.b1.jcink.com/index.php?showuser=599]THANKS TO LOUIS AT SHINE![/url]</div></center>

<!--HTML-->

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200' rel='stylesheet' type='text/css'><style type="text/css">.clhover {-o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; width: 400px; height: 400px; background-color: white; opacity: 0.0; margin-top: -440px; position: relative; z-index: 2;} .clhover:hover {opacity: 1.0;}
.ban {width: 400px; height: 20px; background-color: 121212; position: relative; top: 330px;}
.cname {width: 200px; padding: 25px; background-color: 121212; font-family: yanone kaffeesatz; color: white; text-transform: uppercase; font-weight: lighter; position: relative; top: 290px; font-size: 30px;}
.cncontent {width: 350px; height: 380px; padding: 10px; overflow-y: hidden; overflow-x: auto;}
.p1 {width: 130px; height: 150px; padding: 10px; font-family: calibri, sans-serif; font-size: 9px; overflow: auto; text-align: justify; line-height: 90%;}
.pname {width: 110px; padding: 20px; background-color: 121212; font-family: yanone kaffeesatz; color: white; text-transform: uppercase; font-weight; lighter; font-size: 20px; text-align: center;}</style><center>

<div style="width: 400px; height: 400px; border: 40px solid #121212; background-color: white; background-image: url(400 X 400 IMAGE HERE!!!!);"><div class="ban"></div><div class="cname">

group name

</div></div><div class="clhover"><div class="cncontent"><table cellspacing=3>

<td><BR><img src="150 X 100 IMAGE HERE!!!"></img>
<div class="pname">

--- lastname

</div><div class="p1">

canon info.

</div></td>

<td><BR><img src="150 X 100 IMAGE HERE!!!"></img>
<div class="pname">

--- lastname

</div><div class="p1">

canon info.

</div></td>

<td><BR><img src="150 X 100 IMAGE HERE!!!"></img>
<div class="pname">

--- lastname

</div><div class="p1">

canon info.

</div></td>

<td><BR><img src="150 X 100 IMAGE HERE!!!"></img>
<div class="pname">

--- lastname

</div><div class="p1">

canon info.

</div></td>


</table></div></div><BR><BR><BR><BR><div style="width: 400px; text-align: center; text-transform: uppercase; font-size: 8px;"><a href="http://shine.b1.jcink.com/index.php?showuser=145">&hearts; thanks lauz</a></div><BR></center>

<!--HTML-->
<style>@import url(http://fonts.googleapis.com/css?family=Comfortaa|Roboto); .calshibicanon1 * { box-sizing: border-box; -webkit-box-sizing: border-box; font-family: Roboto; font-size: 10px; line-height: 10px;}
.calshibicanon1 { clear: right; overflow: auto; margin: 10px auto; padding-bottom: 5px; text-align: center; width: 540px; } 
.csc1-wrapper { float: left; margin: 10px; display: inline-block; width: 250px; height: 150px; text-align: left; position: relative; perspective: 1700px; perspective-origin: 0 50%; } 
.csc1-canon { margin: 0; position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } 
.csc1-canon > .csc1-image { overflow: hidden; width:250px; height: 150px; } 
.csc1-canon img { max-width: 100%; display: block; position: relative; transition: transform 0.4s; } 
.csc1-info { position: absolute; top: 0; left: 0; padding: 20px 10px; background: rgba(0,0,0,0.8); color: #A50D9E; height: 150px; width: 125px; opacity: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: 0 0; transform: rotateY(-90deg); transition: transform 0.4s, opacity 0.1s 0.3s; -webkit-transform-origin: 0 0; -webkit-transform: rotateY(-90deg); -webkit-transition: transform 0.4s, opacity 0.1s 0.3s; }
.csc1-info h3 { margin: 0 0 5px 0; padding: 0; color: #FFFFFF; font-family: Comfortaa; font-size: 12px; } 
.csc1-canon:hover .csc1-info { opacity: 1; transform: rotateY(0deg); transition: transform 0.4s, opacity 0.1s; -webkit-transform: rotateY(0deg); -webkit-transition: transform 0.4s, opacity 0.1s; } 
.csc1-text { position: absolute; top: 90px; left: 0; padding: 0px 10px; height: 50px; overflow: auto; width: 100%; color: #FFFFFF; } 
.csc1-text a { color: #FFFFFF; font-weight: bold; text-decoration: none; } 
.cal-credit { font-size: 9px; text-align: right; clear: both; } .cal-credit a { color: #000000; }</style>

<div class="calshibicanon1">
<!--CHARACTER DIV START //-->
<div class="csc1-wrapper">
<div class="csc1-canon">
<div class="csc1-image">
<img src="http://placehold.it/250x150"/>
<div class="csc1-info">
<h3>Character Name</h3>
<span>Player Name</span>
<div class="csc1-text">Character info or notes or whatever, scrolly box</div>
<div class="csc1-specs">
<span>Face</span><br/>
<span>Age</span>
</div>
</div>
</div>
</div>
</div>
<!--CHARACTER DIV END //-->
<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=Fjalla+One' rel='stylesheet' type='text/css'>
<style>#cl-two {width: 130px; height: 130px;}
#cl-two img {width: 130px; height: 130px;}
#cl-one {margin-left: -2px; width: 345px; height: 150px; position: relative; overflow: hidden;}
.cl-name {padding: 1px; position: absolute; top: 25px; left: 20px; width: 300px;}
.cl-n2 {padding: 20px;}
.cl-nn {font-family: fjalla one; font-size: 30px; text-transform: uppercase; text-align: center; color: #fff;}
.cl-nnn {font-size: 7px; letter-spacing: 1px; font-family: arial; color: #121212; padding: 2px; background-color: #fff; text-align: center; text-transform: uppercase; margin-top: 2px;}
#cl-one .cl-three {width: 265px; height: 70px; position: absolute; right: -345px; padding: 40px; background-color: #fff; opacity: 0.95; z-index: 4; transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out;}
#cl-one:hover .cl-three {right: 0px;}
.cl-write {overflow: auto; height: 70px; text-align: justify; line-height: 90%; padding-right: 10px; color: #121212; font-family: arial; font-size: 10px;}</style>
<center>

<table cellspacing="0">

<td>

<div id="cl-two" style="border: 10px solid #2FD5DE;"><img src="http://i60.tinypic.com/jhtykz.png" /></div>

</td><td><div id="cl-one" style="background-image: url(100 X 100 IMAGE HERE);">

<div class="cl-name" style="border: 1px solid #2FD5DE;"><div class="cl-n2" style="background-color: rgba(47,213,222,0.6);"><div class="cl-nn" style="text-shadow: 1px 1px 0px black, 2px 2px 0px #2FD5DE, 3px 3px 0px black;">

firstname lastname

</div><div class="cl-nnn">

traits here or a quote or something

</div></div></div><div class="cl-three"><div class="cl-write">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra diam a mauris iaculis tristique. Praesent tellus lectus, luctus at neque eu, vestibulum condimentum sem. Nullam malesuada elementum orci, at tristique diam vestibulum ac. Nulla facilisi. Suspendisse adipiscing pulvinar dui. Nunc eu nisi a elit tincidunt porttitor. Maecenas sagittis ullamcorper turpis sed consequat. Vestibulum pretium placerat mauris non pretium. Mauris imperdiet sit amet ipsum eget commodo. Nam eget risus tempor, pellentesque turpis vitae, fringilla metus. Mauris ligula lorem, facilisis id erat sed, consectetur laoreet nisi. Integer sagittis faucibus auctor. Nulla facilisi. Nullam est arcu, lacinia in ipsum a, sagittis convallis quam. Nullam rhoncus accumsan lacus eu viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac porta massa. Mauris condimentum vestibulum risus at dignissim. Nunc lacinia consectetur congue. Nulla volutpat sodales augue, at fermentum sem vehicula in. Fusce semper sapien hendrerit massa venenatis elementum. Vivamus lorem neque, lacinia eu libero id, commodo congue odio. Integer lacinia mollis sapien, ac scelerisque nunc posuere rutrum. Curabitur venenatis, nisl eget dictum placerat, sem leo venenatis est, id vestibulum augue purus nec erat. Pellentesque quam dui, varius a mollis eget, laoreet ac nisi. Maecenas tincidunt odio magna, sit amet sollicitudin erat tristique at. Morbi elit justo, cursus id urna viverra, luctus sollicitudin augue. Aenean semper lectus nec dolor cursus imperdiet. Aliquam nec imperdiet libero, vitae rutrum neque. Nullam auctor commodo tellus ut semper. Aenean feugiat lectus at elit eleifend, vitae molestie odio malesuada. Duis consequat dapibus urna nec vulputate. 

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



<table cellspacing=0><td>

<div id="cl-two" style="border: 10px solid #F5DF49;"><img src="http://i60.tinypic.com/jhtykz.png" /></div>

</td><td><div id="cl-one" style="background-image: url(100 X 100 IMAGE HERE);">

<div class="cl-name" style="border: 1px solid #F5DF49;"><div class="cl-n2" style="background-color: rgba(245,223,73,0.6);"><div class="cl-nn" style="text-shadow: 1px 1px 0px black, 2px 2px 0px #F5DF49, 3px 3px 0px black;">

firstname lastname

</div><div class="cl-nnn">

traits here or a quote or something

</div></div></div><div class="cl-three"><div class="cl-write">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra diam a mauris iaculis tristique. Praesent tellus lectus, luctus at neque eu, vestibulum condimentum sem. Nullam malesuada elementum orci, at tristique diam vestibulum ac. Nulla facilisi. Suspendisse adipiscing pulvinar dui. Nunc eu nisi a elit tincidunt porttitor. Maecenas sagittis ullamcorper turpis sed consequat. Vestibulum pretium placerat mauris non pretium. Mauris imperdiet sit amet ipsum eget commodo. Nam eget risus tempor, pellentesque turpis vitae, fringilla metus. Mauris ligula lorem, facilisis id erat sed, consectetur laoreet nisi. Integer sagittis faucibus auctor. Nulla facilisi. Nullam est arcu, lacinia in ipsum a, sagittis convallis quam. Nullam rhoncus accumsan lacus eu viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac porta massa. Mauris condimentum vestibulum risus at dignissim. Nunc lacinia consectetur congue. Nulla volutpat sodales augue, at fermentum sem vehicula in. Fusce semper sapien hendrerit massa venenatis elementum. Vivamus lorem neque, lacinia eu libero id, commodo congue odio. Integer lacinia mollis sapien, ac scelerisque nunc posuere rutrum. Curabitur venenatis, nisl eget dictum placerat, sem leo venenatis est, id vestibulum augue purus nec erat. Pellentesque quam dui, varius a mollis eget, laoreet ac nisi. Maecenas tincidunt odio magna, sit amet sollicitudin erat tristique at. Morbi elit justo, cursus id urna viverra, luctus sollicitudin augue. Aenean semper lectus nec dolor cursus imperdiet. Aliquam nec imperdiet libero, vitae rutrum neque. Nullam auctor commodo tellus ut semper. Aenean feugiat lectus at elit eleifend, vitae molestie odio malesuada. Duis consequat dapibus urna nec vulputate. 

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



<table cellspacing=0><td>

<div id="cl-two" style="border: 10px solid #E149F5;"><img src="http://i60.tinypic.com/jhtykz.png" /></div>

</td><td><div id="cl-one" style="background-image: url(100 X 100 IMAGE HERE);">

<div class="cl-name" style="border: 1px solid #E149F5;"><div class="cl-n2" style="background-color: rgba(225,73,245,0.6);"><div class="cl-nn" style="text-shadow: 1px 1px 0px black, 2px 2px 0px #E149F5, 3px 3px 0px black;">

firstname lastname

</div><div class="cl-nnn">

traits here or a quote or something

</div></div></div><div class="cl-three"><div class="cl-write">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra diam a mauris iaculis tristique. Praesent tellus lectus, luctus at neque eu, vestibulum condimentum sem. Nullam malesuada elementum orci, at tristique diam vestibulum ac. Nulla facilisi. Suspendisse adipiscing pulvinar dui. Nunc eu nisi a elit tincidunt porttitor. Maecenas sagittis ullamcorper turpis sed consequat. Vestibulum pretium placerat mauris non pretium. Mauris imperdiet sit amet ipsum eget commodo. Nam eget risus tempor, pellentesque turpis vitae, fringilla metus. Mauris ligula lorem, facilisis id erat sed, consectetur laoreet nisi. Integer sagittis faucibus auctor. Nulla facilisi. Nullam est arcu, lacinia in ipsum a, sagittis convallis quam. Nullam rhoncus accumsan lacus eu viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac porta massa. Mauris condimentum vestibulum risus at dignissim. Nunc lacinia consectetur congue. Nulla volutpat sodales augue, at fermentum sem vehicula in. Fusce semper sapien hendrerit massa venenatis elementum. Vivamus lorem neque, lacinia eu libero id, commodo congue odio. Integer lacinia mollis sapien, ac scelerisque nunc posuere rutrum. Curabitur venenatis, nisl eget dictum placerat, sem leo venenatis est, id vestibulum augue purus nec erat. Pellentesque quam dui, varius a mollis eget, laoreet ac nisi. Maecenas tincidunt odio magna, sit amet sollicitudin erat tristique at. Morbi elit justo, cursus id urna viverra, luctus sollicitudin augue. Aenean semper lectus nec dolor cursus imperdiet. Aliquam nec imperdiet libero, vitae rutrum neque. Nullam auctor commodo tellus ut semper. Aenean feugiat lectus at elit eleifend, vitae molestie odio malesuada. Duis consequat dapibus urna nec vulputate. 

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





</center>

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style type="text/css">
.scarw { width: 250px; height: 150px; padding: 50px; background: rgba(2, 3, 21, 0.65); opacity: 0.0; transition: transition-duration: 0.8s; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -ms-transition-duration: 0.8s; }
.scarw:hover { opacity: 0.99; }
.scarwtext { font: 9px/9px montserrat; color: #2b0d27; text-align: justify; line-height: 11px; }
.scarwtext b { color: #b60822; font-size: 10px; }
.scarwhbg { background: #020315; width: 210px; height: 110px; padding: 20px; }
.scarwpcbg { width: 90px; height: 110px; border-right: #111235 3px solid; }
.scarwpc { font: 400 25px/25px oswald; color: #dacfd0; text-shadow: #000000 1px 1px 0px, #76071d 2px 2px 0px; text-align: center; }
.scarwptext { font: 400 7px/7px montserrat; line-height: 14px; color: #76071d; text-shadow: #000000 1px 1px 0px; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
.scarwtnbg { width: 120px; height: 110px; }
.scarwtag { font:400 7px/7px montserrat; line-height: 14px; color: #76071d; text-shadow: #000000 1px 1px 0px; text-align: center; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px #0d0d0d solid; width: 110px; }
.scarwnote { width: 100px; height: 80px; padding: 10px; font-family: montserrat; font-size: 8px; line-height: 9px; text-align: justify; overflow: auto; color: #dacfd0; }
.scarwtextbg1 { width: 270px; padding: 40px; background: #0d0e29; }
.scarwtextbg2 { width: 210px; padding: 20px; background: #dacfd0; border-left: #72071d solid 15px; border-right: #2c2e51 solid 3px; }
.littledcred { font: 200 7px/7px montserrat; text-align: center; text-transform: uppercase; letter-spacing: 3px; }
</style>
<center>
<div style="width: 350px; height: 250px; background: url(350X250 IMAGE HERE!!!!!!)">
<div class="scarw"><div class="scarwhbg"><table cellspacing="0" cellpadding="0"><tr><td><div class="scarwpcbg"><div style="padding-top: 35px;"></div><div class="scarwpc">

1234

</div><div class="scarwptext">WORDS</div></div></td>
<td><center><div class="scarwtnbg"><div class="scarwtag">

TAG HERE

</div><div class="scarwnote">

NOTE HERE

</div></div></center></td></tr></table></div></div></div><div class="scarwtextbg1"><div class="scarwtextbg2"><div class="scarwtext">

POST GOES HERE

</div></div></div><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=148"><div class="littledcred">little dove</div></a>
</center>

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:500' rel='stylesheet' type='text/css'>

<style>
.tealholder {
float: center;
width: 400px;
height: 261px;
background: url('http://i.imgur.com/LA60sRm.png'), repeat repeat center center;
padding: 8px;
position: relative;
border: 3px solid #777;
box-shadow: 0 0 1px #333;
}
.tealsubholdercontainer {
float: right;
width: 199px;
height: 155px;
padding: 3px 5px 5px 1px;
background: #303030;
overflow: hidden;
position: relative;
margin: 0 1px 7px 0;
border-left: 3px solid #386f72;
border-right: 3px solid #386f72;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.tealsubholdercontainer h3 {
color: #448789;
font-family: 'Lobster', cursive;
font-size: 25px;
text-align: center;
text-transform: none;
text-shadow: none;
margin: 7px 0 5px 0;
}
.tealsubholdercontainer h2 {
color: #666;
font-family: calibri;
font-size: 9px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0px;
margin: 0;
}
.tealsubholder {
width: 194px;
height: 119px;
color: #777;
font-family: calibri;
font-size: 10px;
text-align: left;
line-height: 11px;
background: transparent;
overflow-y: auto;
}
.tealsubholder::-webkit-scrollbar {
width: 5px;
}
.tealsubholder::-webkit-scrollbar-track {
margin: 5px;
border-radius: 0.2em;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
.tealsubholder::-webkit-scrollbar-thumb {
background: #5cb2ba;
border-radius: 0.2em;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.tealsubholder p {
color: #666;
font-family: calibri, serif;
font-size: 10px;
font-style: none;
text-align: left;
line-height: 10px;
background: transparent;
padding: 2px 0px 0px;
margin: 1px 2px 3px 5px;
position: relative;
}
.tealsubholder p:first-letter {
display: inline-block; 
float: left; 
color: #303030; 
font-family: georgia;
font-size: 20px;
text-shadow: 0 0 1px #6edae1;
background-color: #5cb2ba;
background-image: -webkit-linear-gradient(top, #5cb2ba, #448789);
background-image: -moz-linear-gradient(top, #5cb2ba, #448789);
background-image: -o-linear-gradient(top, #5cb2ba, #448789);
background-image: -ms-linear-gradient(top, #5cb2ba, #448789);
background-image: linear-gradient(top, #5cb2ba, #448789);
padding: 8px;
margin: 1px 5px 0 0px;
box-shadow: 0 0 1px #222;
}
.tealsubholder a {
color: #509ba0;
text-transform: uppercase;
text-decoration: none;
cursor: url(http://i.imgur.com/ffMehRc.png), auto;
transition: all 0.5s linear;
}
.tealsubholder a:hover {
color: #5cb2ba;
}
.tealleftmenu {
float: left;
width: 200px;
padding:0;
margin: 0 -5px 0 -10px;
}
.tealleftmenu li {
display: block;
width: 177px;
height: 40px;
background: #353535;
margin-bottom: 4px;
overflow: hidden;
position: relative;
border-left: 3px solid #386f72;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.tealleftmenu li:last-child {
margin-bottom: 0px;
}
.tealleftmenu li a {
display: block;
width: 100%;
height: 100%;
color: #333;
text-align: left;
padding-left: 10px;
position: relative;
}
.tealleftmain {
color: #448789;
font-family: 'Cabin Condensed', sans-serif;
font-size: 11px;
text-transform: uppercase;
text-shadow: none;
margin: 10px 0 0 0;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.tealleftsub {
color: #666;
font-family: calibri;
font-size: 8px;
text-transform: uppercase;
margin: 0;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear; 
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.tealleftmenu li:hover {
background: #448789;
border-left: 3px solid #5cb2ba;
}
.tealleftmenu li:hover .tealleftmain {
opacity: 1;
color: #284e51;
-webkit-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
}
.tealleftmenu li:hover .tealleftsub {
opacity: 1;
color: #222;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
from {
opacity: 0;
-webkit-transform: translateY(200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromBottom {
from {
opacity: 0;
-moz-transform: translateY(200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromBottom {
from {
opacity: 0;
-ms-transform: translateY(200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
@-webkit-keyframes moveFromTop {
from {
opacity: 0;
-webkit-transform: translateY(-200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromTop {
from {
opacity: 0;
-moz-transform: translateY(-200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromTop {
from {
opacity: 0;
-ms-transform: translateY(-200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
.tealinfoimage {
float: right;
width: 205px;
height: 84px;
text-align: center;
background: #303030 url('') no-repeat center center;
position: relative;
margin: 0 1px 0 0;
border: 3px solid #555;
overflow: hidden;
cursor: default;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.tealinfoimage .mask, .tealinfoimage .content {
top: 0;
left: 0;
width: 205px;
height: 84px;
position: absolute;
overflow: hidden;
}
.tealinfoimage-content .mask {
opacity: 1;
background-color: #303030;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transform: translateX(300px);
-webkit-transform: translateX(300px);
-ms-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
.tealinfoimage-content:hover .mask {
transform: translateX(0px);
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
}
.tealinfoimage img {
display: block;
position: relative;
}
.tealinfoimage-content img {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.tealinfoimage-content:hover img {
transform: translateX(-300px);
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
}
.tealinfoimage blockquote {
float: center;
width: 185px;
height: 60px;
color: #777;
font-family: calibri;
font-size: 10px;
text-align: left;
line-height: 10px;
background: #393939;
padding: 5px 5px 3px 5px;
margin: 5px 2px 1px 5px;
border-top: 3px solid #5cb2ba;
border-bottom: 3px solid #5cb2ba;
}
.tealinfoimage blockquote:first-letter {
float: left; 
display: inline-block; 
color: #303030; 
font-family: georgia;
font-size: 20px;
text-shadow: 0 0 1px #6edae1;
background-color: #5cb2ba;
background-image: -webkit-linear-gradient(top, #5cb2ba, #448789);
background-image: -moz-linear-gradient(top, #5cb2ba, #448789);
background-image: -o-linear-gradient(top, #5cb2ba, #448789);
background-image: -ms-linear-gradient(top, #5cb2ba, #448789);
background-image: linear-gradient(top, #5cb2ba, #448789);
padding: 8px;
margin: 1px 5px 0 0px;
box-shadow: 0 0 1px #222;
}
.tealinfoimage blockquote b {
color: #509ba0;
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
line-height: 10px;
}
.tealinfoimage blockquote b:hover {
color: #5cb2ba;
}
.tealcodecred {
float: center; 
width: 420px; 
height: 20px; 
text-align: right;
background: transparent;
margin: 0 0 0;
position: relative;
}
.tealcodecred a {
color: #448789;
}
.tealcodecred a:hover {
color: #5cb2ba;
}
</style>

<center>
<div class="tealholder">
<ul class="tealleftmenu">
<li>
<a href="#">
<h2 class="tealleftmain">Hai thur, I'm a link</h2>
<h3 class="tealleftsub">And I'm a cute little subtitle</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">Idk what to put here</h2>
<h3 class="tealleftsub">But you know what I mean</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">So many links omg</h2>
<h3 class="tealleftsub">So little text to fill 'em with</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">Links are great, right?</h2>
<h3 class="tealleftsub">They are pretty fabulous</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">Links have it easy</h2>
<h3 class="tealleftsub">They just click, click, click</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">Irdk what to write here</h2>
<h3 class="tealleftsub">Blah blah, yada yada</h3>
</a>
</li>
</ul>

<div class="tealsubholdercontainer">
<h3>A Touch of Color</h3>
<h2>To Brighten up this Darkness</h2>
<div class="tealsubholder">
<p>
Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>

<div class="tealinfoimage tealinfoimage-content">
<img src="http://i.imgur.com/QS6X2pj.gif" />
<div class="mask">
<blockquote>Text or tags or whatever you want really can go here blah blah, yada yada, so on so forth, etc etc, you get the idea.<br><br>
<b>#hashtags</b>, <b>#ohman</b></blockquote>
</div>
</div>
</div>

<div class="tealcodecred">
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=62186">• • •</a>
</div>
</center>

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<div id="markup">
 <div id="lantern"><h1>Site Canons</h1><p>
   This is <b>SITE NAME's</b> canons. Put your rules for adopting these here, include a form if you'd like, just don't type too much. CTRL + F and type in border-color to change the borders to your member group color! Change whatever you feel necessary, just be sure to leave the credit on <3
 </div>
 <div id="whobob"><table style ="width:100%; height:400px"><tr><td>
   <div class="whatpants" style="background:url(100x100IMG);border-color:#fea2a2"><div class="namer">John Cambell</div><div class="chard">Rude, insulting, and terribly full of himself.</div><div class="halfful"><b>Status</b>: Taken</div></div></td>
   <td>
   <div class="whatpants" style="background:url(100x100IMG);border-color:#36357c"><div class="namer">Marcy Pitts</div><div class="chard">Established, smart, and a very driven young woman. </div><div class="halfful"><b>Status</b>: Taken</div></div></td>
   <td>
     <div class="whatpants" style="background:url(100x100IMG);border-color:#b3bc50"><div class="namer">Betsy Crew</div><div class="chard">Dangerous, devious, and highly charming; Betsy was one of the first to do whatever</div><div class="halfful"><b>Status</b>: Open</div></div></td></tr>
   <td>
   <div class="whatpants" style="background:url(100x100IMG);border-color:#36357c"><div class="namer">Joseph Cambell</div><div class="chard">Charming, friendly, and a great people person.</div><div class="halfful"><b>Status</b>: Taken</div></div></td>
   <td>
   <div class="whatpants" style="background:url(100x100IMG);border-color:#36357c"><div class="namer">John Cambell</div><div class="chard">Rude, insulting, and terribly full of himself.</div><div class="halfful"><b>Status</b>: Taken</div></div></td><td>

   <div class="whatpants" style="background:url(100x100IMG); border-color:#fea2a2"><div class="namer">John Cambell</div><div class="chard">Rude, insulting, and terribly full of himself.</div><div class="halfful"><b>Status</b>: Taken</div>></div></td></tr>
   <td>
   <div class="whatpants" style="background:url(100x100IMG);border-color:#b3bc50"><div class="namer">John Cambell</div><div class="chard">Rude, insulting, and terribly full of himself.</div><div class="halfful"><b>Status</b>: Taken</div></div></td>
   <td>
   <div class="whatpants" style="background:url(100x100IMG);border-color:#36357c"><div class="namer">John Cambell</div><div class="chard">Rude, insulting, and terribly full of himself.</div><div class="halfful"><b>Status</b>: Taken</div></div></td><td>
   <div class="whatpants" style="background:url(100x100IMG);border-color:#36357c"><div class="namer">John Cambell</div><div class="chard">Rude, insulting, and terribly full of himself.</div><div class="halfful"><b>Status</b>: Taken</div></div></td></tr></table>
</div>
<div style="font:10px arial; text-decoration:none; color:white; text-align:right;"><a href="http://shine.b1.jcink.com/index.php?showuser=10275">♥ THANKS</a></div>
 </div>
<style>#markup {width:500px; height:600px; background:black url(http://i.imgur.com/RsekJk2.jpg?1); background-repeat:no-repeat; background-position:bottom left;  -webkit-border-image:url(http://i.imgur.com/RsekJk2.jpg?1) 30 30 round;  margin:auto; border: 15px solid transparent;}
#lantern {width:300px; height:150px; background: rgba(255, 255, 255, 0.9); margin:auto;padding:30px}
#lantern h1 {font: 40px 'playfair display'; text-align:center; margin-top:-10px; letter-spacing:-4px; text-transform:lowercase; border-bottom:1px solid #222; margin-left:25px; margin-right:25px; padding-bottom:-20px;}
#lantern p {font: 12px times;}
#whobob {width: 450px; height: 385px; margin:auto; margin-top:5px; overflow:hidden; }
.whatpants {width: 100px; height:100px; background:white; margin-left:20px; margin-bottom: 10px;  border:3px solid black;  overflow:hidden; transition:all 1s ease-in-out; }
.whatpants:hover {box-shadow:0px 0px 30px #fff}
.namer {font: 11px times; text-transform:uppercase; background:black; color:white; text-align:center; padding-bottom:3px; transform:translateY(-30px); transition:all 1s ease}
.whatpants:hover .namer {transform:translateY(0px)}
.chard {font:10px arial; width:90px; text-align:justify; margin:auto; background:rgba(255,255,255,0.8); padding:5px; height:65px; overflow:auto; transform:scale(2); opacity:0;  transition:all 1s ease}
.whatpants:hover .chard{transform:scale(1); opacity:1}
.halfful {font:10px times; text-align:center; background:black; color:white; transform:translateY(20px); transition:all 1s ease}
.whatpants:hover .halfful {transform:translateY(0px)}
</style>