<!--HTML--><div class="postcolor"> <style type="text/css">.mstxtempcontainer{width: 350px; background-color: #A7DBD8; height: 120px; margin: 10px auto;}
.mstxtempleft{  background-color: #000;  width: 125px;  height: 120px;  float: left;  color: #fff;  font-family: 'montserrat', sans-serif;  text-transform: uppercase;  font-size: 32px;  text-align: center;  line-height: 120px;  letter-spacing: -2px;}
.mstxtempright{  height: 70px;  overflow: auto;  font-family: 'calibri', sans-serif;  font-size: 10px;  line-height: 100%;  text-align: justify;  background-color: rgba(255,255,255,0.6);  margin: 15px;  width: 175px;  padding: 10px;  display: inline-block;}
.mstxtempright::-webkit-scrollbar{width:3px;}.mstxtempright::-webkit-scrollbar-thumb{background-color: #000;}</style><link href="http://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet" type="text/css">
<div class="mstxtempcontainer">
 <div class="mstxtempleft">mstx</div>
 <div class="mstxtempright">hi guys! the image size is 300x225 and the gif size is 75x75 but you can input any square gif and it'll resize! the bold and italic colors are automatic. don't make the title too long! as always, colors and anything else can be changed and if you have any questions, let me know! remember to <b>direct link</b> me and not to take off the credit! thanks.</div>
</div><br><br><style type="text/css">.cmcontainer{
  width: 300px;
  height: 300px;
  border:5px solid #fff;
  outline: 1px solid #c0c0c0;
}
.cmbg{
  width: 300px;
  height: 225px;
  background: url(http://i.imgur.com/bUzeygO.jpg);
  border-bottom: 5px solid #fff;
  background-size: 100%;
}
.cmdetails{
  background-color: #130F1E;
  height: 50px;
  position: relative;
  text-align: left;
  padding: 10px;
}
.cmgif{
  position: absolute;
  top: -45px;
  right: 30px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  overflow: hidden;
  border: 5px solid #fff;
  height: 75px; width: 75px;
  text-align: center;
  z-index: 1;
}
.cmtitle{
  font-family: 'source sans pro', 'arial', sans-serif;
  font-size: 24px;
  font-style:italic;
  text-transform: lowercase;
  text-align: left;
  padding:0px 0px 0px 5px;
  line-height: 100%;
  letter-spacing: -1px;
  color: #CC4C32;
  font-weight: 300;
}
.cmlyrics, .cmtagz{
  font-family: 'source sans pro', 'arial', sans-serif;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  font-style: italic;
  border-top: 1px solid #7c8e88;
  line-height: 100%;
  padding-top: 3px;
  color: #7C8E88;
  -webkit-transition: all .75s ease;
-moz-transition: all .75s ease;
-ms-transition: all .75s ease;
-o-transition: all .75s ease;
transition: all .75s ease;
  opacity: 1;
}
.cmtagz{opacity: 0; top: -13px;position: relative;}
.cmtext{
  background-color: rgba(255,255,255,0.8);
  padding: 30px 30px 45px 30px;
  height: 150px;
  opacity: 0;
  font-family: 'source sans pro', 'calibri', sans-serif;
  font-size: 11px;
  text-align: justify;
  line-height: 120%;
  font-weight: 400;
  overflow:  auto;
  -webkit-transition: all .75s ease;
-moz-transition: all .75s ease;
-ms-transition: all .75s ease;
-o-transition: all .75s ease;
transition: all .75s ease;
}
.cmtext b{color: #CC4C32;}
.cmtext i{color: #7C8E88;}
.cmcontainer:hover .cmtext{opacity: 1;}
.cmcontainer:hover .cmtagz{opacity: 1;}
.cmcontainer:hover .cmlyrics{opacity: 0;}
.cmtext::-webkit-scrollbar{background-color: #7C8E88; width: 3px; height: 3px; border: 1px solid rgba(255,255,255,0.8);}
.cmtext::-webkit-scrollbar-corner{background-color: rgba(255,255,255,0.8);}
.cmtext::-webkit-scrollbar-thumb{background-color: #CC4C32; height: 3px; width: 3px;}</style><link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,300italic" rel="stylesheet" type="text/css"> <center><div class="cmcontainer"><div class="cmbg"><div class="cmtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <b>"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</b> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </i>
  
  <p></p> 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. 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></div>
  <div class="cmdetails"><div class="cmgif"><img src="http://media.tumblr.com/0328b5e4e50604b2ee39c6c0cfb5a145/tumblr_inline_nfazqhpXRJ1slk5sm.gif" width="75px"></div>
<div class="cmtitle">follow your arrow</div>
    <div class="cmlyrics">Just follow your arrow
Wherever it points</div>
    <div class="cmtagz">words: ###. tag: here. outfit: here. notes: here</div>
  </div>
    </div>  <div style="width:300px; text-align: right; font-size: 9px; text-decoration: none; font-family: 'calibri', sans-serif;">
    <div style="width:400px; text-align: right; margin:0px auto;"><a href="http://cttw.b1.jcink.com/index.php?showuser=12">∎</a> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=13843" style="margin-right: -5px;">◣</a> <a href="http://shine.b1.jcink.com/index.php?showuser=13055">◥</a></div>
  </div>
</center><br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1-->[dohtml]&lt;style type="text/css"&gt;.cmcontainer{ &nbsp;width: 300px; &nbsp;height: 300px; &nbsp;border:5px solid #fff; &nbsp;outline: 1px solid #c0c0c0;}<br>.cmbg{ &nbsp;width: 300px; &nbsp;height: 225px;<br><br> &nbsp;background: url(300X225 IMAGE URL HERE);<br><br> &nbsp;border-bottom: 5px solid #fff; &nbsp;background-size: 100%;}<br>.cmdetails{ &nbsp;background-color: #130F1E; &nbsp;height: 50px; &nbsp;position: relative; &nbsp;text-align: left; &nbsp;padding: 10px;}<br>.cmgif{ &nbsp;position: absolute; &nbsp;top: -45px; &nbsp;right: 30px; &nbsp;border-radius: 100%; &nbsp;-webkit-border-radius: 100%; &nbsp;overflow: hidden; &nbsp;border: 5px solid #fff; &nbsp;height: 75px; width: 75px; &nbsp;text-align: center; &nbsp;z-index: 1;}<br>.cmtitle{ &nbsp;font-family: 'source sans pro', 'arial', sans-serif; &nbsp;font-size: 24px; &nbsp;font-style:italic; &nbsp;text-transform: lowercase; &nbsp;text-align: left; &nbsp;padding:0px 0px 0px 5px; &nbsp;line-height: 100%; &nbsp;letter-spacing: -1px; &nbsp;color: #CC4C32; &nbsp;font-weight: 300;}<br>.cmlyrics, .cmtagz{ &nbsp;font-family: 'source sans pro', 'arial', sans-serif; &nbsp;font-size: 9px; &nbsp;font-weight: 400; &nbsp;text-transform: uppercase; &nbsp;font-style: italic; &nbsp;border-top: 1px solid #7c8e88; &nbsp;line-height: 100%; &nbsp;padding-top: 3px; &nbsp;color: #7C8E88; &nbsp;-webkit-transition: all .75s ease;-moz-transition: all .75s ease;-ms-transition: all .75s ease;-o-transition: all .75s ease;transition: all .75s ease; &nbsp;opacity: 1;}<br>.cmtagz{opacity: 0; top: -13px;position: relative;}<br>.cmtext{ &nbsp;background-color: rgba(255,255,255,0.8); &nbsp;padding: 30px 30px 45px 30px; &nbsp;height: 150px; &nbsp;opacity: 0; &nbsp;font-family: 'source sans pro', 'calibri', sans-serif; &nbsp;font-size: 11px; &nbsp;text-align: justify; &nbsp;line-height: 120%; &nbsp;font-weight: 400; &nbsp;overflow: &nbsp;auto; &nbsp;-webkit-transition: all .75s ease;-moz-transition: all .75s ease;-ms-transition: all .75s ease;-o-transition: all .75s ease;transition: all .75s ease;}<br>.cmtext b{color: #CC4C32;}<br>.cmtext i{color: #7C8E88;}<br>.cmcontainer:hover .cmtext{opacity: 1;}<br>.cmcontainer:hover .cmtagz{opacity: 1;}<br>.cmcontainer:hover .cmlyrics{opacity: 0;}<br>.cmtext::-webkit-scrollbar{background-color: #7C8E88; width: 3px; height: 3px; border: 1px solid rgba(255,255,255,0.8);}<br>.cmtext::-webkit-scrollbar-corner{background-color: rgba(255,255,255,0.8);}<br>.cmtext::-webkit-scrollbar-thumb{background-color: #CC4C32; height: 3px; width: 3px;}&lt;/style&gt;&lt;link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,300italic' rel='stylesheet' type='text/css'&gt; &lt;center&gt;&lt;div class="cmcontainer"&gt;&lt;div class="cmbg"&gt;&lt;div class="cmtext"&gt;<br><br>post text here<br><br>&lt;/div&gt;&lt;/div&gt;&lt;div class="cmdetails"&gt;&lt;div class="cmgif"&gt;<br><br>&lt;img src="75X75 GIF HERE" width="75px"&gt;&lt;/div&gt;&lt;div class="cmtitle"&gt;<br><br>title<br><br>&lt;/div&gt;&lt;div class="cmlyrics"&gt;<br><br>lyrics/quote/whatevs<br><br>&lt;/div&gt;&lt;div class="cmtagz"&gt;<br><br>words: ###. tag: here. outfit: here. notes: here<br><br>&lt;/div&gt; &nbsp;&lt;/div&gt; &nbsp; &nbsp;&lt;/div&gt; &nbsp;&lt;div style="width:300px; text-align: right; font-size: 9px; text-decoration: none; font-family: 'calibri', sans-serif;"&gt;&lt;div style="width:400px; text-align: right; margin:0px auto;"&gt;&lt;a href="http://cttw.b1.jcink.com/index.php?showuser=12"&gt;∎&lt;/a&gt; &lt;a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=13843" style="margin-right: -5px;"&gt;◣&lt;/a&gt; &lt;a href="http://shine.b1.jcink.com/index.php?showuser=13055"&gt;◥&lt;/a&gt;&lt;/div&gt;<br> &nbsp;&lt;/div&gt;&lt;/center&gt;[/dohtml]<!--c2--></div></td></tr></tbody></table><!--ec2-->  </div>

<!--HTML--><div class="postcolor"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css"><style type="text/css">

.bitch { width: 300px; padding: 30px; background: #fff; -webkit-box-shadow: 0 0 0 2px #D4D4D4; box-shadow: 0 0 0 2px #D4D4D4; } 

.dont { margin-top: 5px; padding: 5px 10px; font-family:  times; font-style: italic; font-size: 9px; color: #252525; font-weight: 900; text-transform: uppercase; }  

.kill { width: 250px; padding: 0px 5px 0px 5px; line-height: 165%;  color: #000;  text-align: justify; font-family: 'playfair display' serif; font-size: 9px; letter-spacing: 1px; } 
</style>
<center>


<div class="bitch">
<div class="dont">ain’t nobody fresher than my motherfucking clique</div><p>


</p><div class="kill">

Hello pretty faces! You're considering using my template and that's so wonderful! I don't have many rules, but they're important all the same - feel free to change colours and fonts, but please don't change the code to the point that it is unrecognisable. Do not, under any circumstances, take my credit off. I'd love to see people using it so link it if you do! <p>

This is a multi-want ad! The pictures are 250x250 and each add has an accent colour. If you want to change the colours, I recommend ctrl+f the hex codes which are <span style="font-size:9pt;line-height:100%"><b><span style="color:#091780">#091780</span>, <span style="color:#c6c41f">#c6c41f</span>, <span style="color:#9a165d">#9a165d</span>, <span style="color:#3c801a">#3c801a</span></b></span> and replacing all of them with your chosen hex codes. As with all my codes, if you need any help or have any questions, feel free to get in touch with me! Enjoy! </p><p>



</p></div>
</div></center><br><br><link href="https://fonts.googleapis.com/css?family=Alegreya:900italic,900" rel="stylesheet" type="text/css"><style type="text/css">

/* FIRST AD */
#one { width: 250px; height: 250px; background-image: url(http://i.imgur.com/vgwiti7.png); background-color: #091780; background-blend-mode: overlay;  overflow: hidden; } 
#one .two { width: 230px; padding: 10px 10px; position: relative; top: -60px; z-index: 9999; text-align: center; background: rgba(0,0,0,0.6); font-family: 'Alegreya', serif; font-size: 25px; color: #fff; text-shadow: 1px 1px #000, 2px 2px #091780; font-weight: 900; font-style: italic; } 

#one input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; display: none; }
#one label { cursor: crosshair; }
#one  .one-interior { background: #fff; width: 250px; padding: 0px; height: 250px; text-align: center; position: relative; top: 250px; transition: all 1.5s ease-in-out 0s; -webkit-transition: all 1.0s ease-in-out 0s; -moz-transition: all 1.0s ease-in-out 0s; -o-transition: all 1.0s ease-in-out 0s; }
#one input[type=checkbox]:checked ~ .one-interior { position: relative; top: 0px; transition: all 1.0s ease-in-out 0s; -webkit-transition: all 1.0s ease-in-out 0s; -moz-transition: all 1.0s ease-in-out 0s; -o-transition: all 1.0s ease-in-out 0s; }

.bluescroll b { color: #091780; } 
.bluescroll::-webkit-scrollbar {width: 9px; }
.bluescroll::-webkit-scrollbar-thumb { background-color: #fff; border: 1px solid #091780; border-radius: 15px 15px 15px 15px; }
.bluescroll::-webkit-scrollbar-track { width: 5px; background-color: #091780; border: 4px solid #fff; }
.blueinfo { width: 250px; padding: 20px 0px; text-align: center; font-family: calibri; font-size: 9px; text-transform: uppercase; font-weight: 900; color: #091780; } 

/* SECOND AD */
#three { width: 250px; height: 250px; background-image: url(http://i.imgur.com/ldQSfz4.jpg); background-color: #c6c41f; background-blend-mode: overlay;  overflow: hidden; } 
#three .four { width: 230px; padding: 10px 10px; position: relative; top: -60px; z-index: 9999; text-align: center; background: rgba(0,0,0,0.6); font-family: 'Alegreya', serif; font-size: 25px; color: #fff; text-shadow: 1px 1px #000, 2px 2px #c6c41f; font-weight: 900; font-style: italic; } 

#three input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; display: none; }
#three label { cursor: crosshair; }
#three .one-interior { background: #fff; width: 250px; padding: 0px; height: 250px; text-align: center; position: relative; top: 250px; transition: all 1.5s ease-in-out 0s; -webkit-transition: all 1.0s ease-in-out 0s; -moz-transition: all 1.0s ease-in-out 0s; -o-transition: all 1.0s ease-in-out 0s; }
#three input[type=checkbox]:checked ~ .one-interior { position: relative; top: 0px; transition: all 1.0s ease-in-out 0s; -webkit-transition: all 1.0s ease-in-out 0s; -moz-transition: all 1.0s ease-in-out 0s; -o-transition: all 1.0s ease-in-out 0s; }

.yellowscroll b { color: #c6c41f; } 
.yellowscroll::-webkit-scrollbar {width: 9px; }
.yellowscroll::-webkit-scrollbar-thumb { background-color: #fff; border: 1px solid #c6c41f; border-radius: 15px 15px 15px 15px; }
.yellowscroll::-webkit-scrollbar-track { width: 5px; background-color: #c6c41f; border: 4px solid #fff; }
.yellowinfo { width: 250px; padding: 20px 0px; text-align: center; font-family: calibri; font-size: 9px; text-transform: uppercase; color: #c6c41f; font-weight: 900; } 

/* THIRD AD */
#five { width: 250px; height: 250px; background-image: url(http://i.imgur.com/p4avVFe.png); background-color: #9a165d; background-blend-mode: overlay;  overflow: hidden; } 
#five .six { width: 230px; padding: 10px 10px; position: relative; top: -60px; z-index: 9999; text-align: center; background: rgba(0,0,0,0.6); font-family: 'Alegreya', serif; font-size: 25px; color: #fff; text-shadow: 1px 1px #000, 2px 2px #9a165d; font-weight: 900; font-style: italic; } 

#five input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; display: none; }
#five label { cursor: crosshair; }
#five .one-interior { background: #fff; width: 250px; padding: 0px; height: 250px; text-align: center; position: relative; top: 250px; transition: all 1.5s ease-in-out 0s; -webkit-transition: all 1.0s ease-in-out 0s; -moz-transition: all 1.0s ease-in-out 0s; -o-transition: all 1.0s ease-in-out 0s; }
#five  input[type=checkbox]:checked ~ .one-interior { position: relative; top: 0px; transition: all 1.0s ease-in-out 0s; -webkit-transition: all 1.0s ease-in-out 0s; -moz-transition: all 1.0s ease-in-out 0s; -o-transition: all 1.0s ease-in-out 0s; }

.pinkscroll b { color: #9a165d; } 
.pinkscroll::-webkit-scrollbar {width: 9px; }
.pinkscroll::-webkit-scrollbar-thumb { background-color: #fff; border: 1px solid #9a165d; border-radius: 15px 15px 15px 15px; }
.pinkscroll::-webkit-scrollbar-track { width: 5px; background-color: #9a165d; border: 4px solid #fff; }
.pinkinfo { width: 250px; padding: 20px 0px; text-align: center; font-family: calibri; font-size: 9px; text-transform: uppercase; color: #9a165d; font-weight: 900; } 

/* FOURTH AD */
#seven { width: 250px; height: 250px; background-image: url(http://i.imgur.com/RLvqLz9.png); background-color: #3c801a; background-blend-mode: overlay;  overflow: hidden; } 
#seven .eight { width: 230px; padding: 10px 10px; position: relative; top: -60px; z-index: 9999; text-align: center; background: rgba(0,0,0,0.6); font-family: 'Alegreya', serif; font-size: 25px; color: #fff; text-shadow: 1px 1px #000, 2px 2px #3c801a; font-weight: 900; font-style: italic; } 

#seven input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; display: none; }
#seven label { cursor: crosshair; }
#seven .one-interior { background: #fff; width: 250px; padding: 0px; height: 250px; text-align: center; position: relative; top: 250px; transition: all 1.5s ease-in-out 0s; -webkit-transition: all 1.0s ease-in-out 0s; -moz-transition: all 1.0s ease-in-out 0s; -o-transition: all 1.0s ease-in-out 0s; }
#seven input[type=checkbox]:checked ~ .one-interior { position: relative; top: 0px; transition: all 1.0s ease-in-out 0s; -webkit-transition: all 1.0s ease-in-out 0s; -moz-transition: all 1.0s ease-in-out 0s; -o-transition: all 1.0s ease-in-out 0s; }

.greenscroll b { color: #3c801a; } 
.greenscroll::-webkit-scrollbar {width: 9px; }
.greenscroll::-webkit-scrollbar-thumb { background-color: #fff; border: 1px solid #3c801a; border-radius: 15px 15px 15px 15px; }
.greenscroll::-webkit-scrollbar-track { width: 5px; background-color: #3c801a; border: 4px solid #fff; }
.greeninfo { width: 250px; padding: 20px 0px; text-align: center; font-family: calibri; font-size: 9px; text-transform: uppercase; color: #3c801a; font-weight: 900; } 


.want-inner { width: 210px; height: 168px; padding: 20px; position: relative; top: 0px; } 
.kb { width: 450px; text-align: right; font-family: courier; font-size: 7px; margin-top: -3px; } 
.kb a { color: #fff; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; } 
.kb a:hover { color: #ff0066; text-decoration: none; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; } 

</style>
<center>
<table><tbody><tr><td valign="top"><div id="one"><input type="checkbox" id="toggle-1"><div class="one-interior">
<div class="want-inner">
<div style="width: 200px; height: 160px; text-align: justify; font-family: calibri; font-size: 10px; color: #000; line-height: 10px; padding: 0px 8px 0px 5px; overflow: auto;" class="bluescroll">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Cras est dui, faucibus ac lacus vitae, elementum bibendum sem.</b> Vestibulum ac arcu vestibulum, bibendum lacus sed, cursus felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultrices tellus leo, id egestas massa laoreet a. Aliquam eget dolor in nisi ullamcorper tempus sit amet id nisl. Nam ac ligula posuere, consequat enim quis, sodales lectus. Pellentesque imperdiet orci eget eleifend fermentum. Nulla et nunc dolor. Sed nisl dui, luctus eget purus at, sodales auctor eros. Vivamus a augue ut quam cursus laoreet. Proin at sem eget metus porta ornare ut sed augue.  <p>

Cras volutpat quam id odio consequat commodo. In congue leo libero, at gravida ex consectetur efficitur. In feugiat varius libero pretium consectetur. Nam aliquet felis non facilisis tristique. Praesent non nisl magna. Cras tempus lobortis tellus id varius. Integer nunc elit, sagittis ut interdum ut, lobortis ut tortor. Proin hendrerit magna a urna mollis tempus. Sed a ultrices augue, non scelerisque arcu. Suspendisse auctor semper luctus. Vestibulum gravida quis risus vel sodales. Aliquam dictum malesuada purus, nec placerat ligula luctus nec. Suspendisse pretium orci ut eleifend dapibus.</p><p>

Quisque suscipit imperdiet nibh, sed gravida ante fringilla et. Quisque vitae erat volutpat, congue ex quis, convallis nibh. In vel convallis augue, in tempus quam. Proin nec elit molestie, aliquet arcu nec, ornare libero. Donec vitae ante odio. Vivamus sodales dolor eget elit luctus, ac facilisis urna varius. Phasellus velit ex, accumsan faucibus dui nec, malesuada sodales libero. Cras et fermentum ipsum, a consequat augue. Etiam posuere quis magna eget ultricies. Vestibulum eleifend nisi sed urna elementum, a ornare ipsum tristique. Fusce viverra a risus vel pulvinar. Proin vestibulum ullamcorper mi, a consequat mi euismod at.


</p></div></div><div class="blueinfo">NIKOLAJ COSTER-WALDAU. AGELESS. DEMON. </div></div>

<label for="toggle-1"><div class="two">the asshole</div></label></div></td>

<td valign="top"><div id="three"><input type="checkbox" id="toggle-2"><div class="one-interior"><div class="want-inner">
<div style="width: 200px; height: 160px; text-align: justify; font-family: calibri; font-size: 10px; color: #000; line-height: 10px; padding: 0px 8px 0px 5px; overflow: auto;" class="yellowscroll">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Cras est dui, faucibus ac lacus vitae, elementum bibendum sem.</b> Vestibulum ac arcu vestibulum, bibendum lacus sed, cursus felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultrices tellus leo, id egestas massa laoreet a. Aliquam eget dolor in nisi ullamcorper tempus sit amet id nisl. Nam ac ligula posuere, consequat enim quis, sodales lectus. Pellentesque imperdiet orci eget eleifend fermentum. Nulla et nunc dolor. Sed nisl dui, luctus eget purus at, sodales auctor eros. Vivamus a augue ut quam cursus laoreet. Proin at sem eget metus porta ornare ut sed augue.  <p>

Cras volutpat quam id odio consequat commodo. In congue leo libero, at gravida ex consectetur efficitur. In feugiat varius libero pretium consectetur. Nam aliquet felis non facilisis tristique. Praesent non nisl magna. Cras tempus lobortis tellus id varius. Integer nunc elit, sagittis ut interdum ut, lobortis ut tortor. Proin hendrerit magna a urna mollis tempus. Sed a ultrices augue, non scelerisque arcu. Suspendisse auctor semper luctus. Vestibulum gravida quis risus vel sodales. Aliquam dictum malesuada purus, nec placerat ligula luctus nec. Suspendisse pretium orci ut eleifend dapibus.</p><p>

Quisque suscipit imperdiet nibh, sed gravida ante fringilla et. Quisque vitae erat volutpat, congue ex quis, convallis nibh. In vel convallis augue, in tempus quam. Proin nec elit molestie, aliquet arcu nec, ornare libero. Donec vitae ante odio. Vivamus sodales dolor eget elit luctus, ac facilisis urna varius. Phasellus velit ex, accumsan faucibus dui nec, malesuada sodales libero. Cras et fermentum ipsum, a consequat augue. Etiam posuere quis magna eget ultricies. Vestibulum eleifend nisi sed urna elementum, a ornare ipsum tristique. Fusce viverra a risus vel pulvinar. Proin vestibulum ullamcorper mi, a consequat mi euismod at.


</p></div></div><div class="yellowinfo">EMILIA CLARKE. AGELESS. ANGEL. </div></div>

<label for="toggle-2"><div class="four">the brains</div></label></div></td></tr>

<tr><td valign="top"><div id="five"><input type="checkbox" id="toggle-3"><div class="one-interior"><div class="want-inner">
<div style="width: 200px; height: 160px; text-align: justify; font-family: calibri; font-size: 10px; color: #000; line-height: 10px; padding: 0px 8px 0px 5px; overflow: auto;" class="pinkscroll">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Cras est dui, faucibus ac lacus vitae, elementum bibendum sem.</b> Vestibulum ac arcu vestibulum, bibendum lacus sed, cursus felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultrices tellus leo, id egestas massa laoreet a. Aliquam eget dolor in nisi ullamcorper tempus sit amet id nisl. Nam ac ligula posuere, consequat enim quis, sodales lectus. Pellentesque imperdiet orci eget eleifend fermentum. Nulla et nunc dolor. Sed nisl dui, luctus eget purus at, sodales auctor eros. Vivamus a augue ut quam cursus laoreet. Proin at sem eget metus porta ornare ut sed augue.  <p>

Cras volutpat quam id odio consequat commodo. In congue leo libero, at gravida ex consectetur efficitur. In feugiat varius libero pretium consectetur. Nam aliquet felis non facilisis tristique. Praesent non nisl magna. Cras tempus lobortis tellus id varius. Integer nunc elit, sagittis ut interdum ut, lobortis ut tortor. Proin hendrerit magna a urna mollis tempus. Sed a ultrices augue, non scelerisque arcu. Suspendisse auctor semper luctus. Vestibulum gravida quis risus vel sodales. Aliquam dictum malesuada purus, nec placerat ligula luctus nec. Suspendisse pretium orci ut eleifend dapibus.</p><p>

Quisque suscipit imperdiet nibh, sed gravida ante fringilla et. Quisque vitae erat volutpat, congue ex quis, convallis nibh. In vel convallis augue, in tempus quam. Proin nec elit molestie, aliquet arcu nec, ornare libero. Donec vitae ante odio. Vivamus sodales dolor eget elit luctus, ac facilisis urna varius. Phasellus velit ex, accumsan faucibus dui nec, malesuada sodales libero. Cras et fermentum ipsum, a consequat augue. Etiam posuere quis magna eget ultricies. Vestibulum eleifend nisi sed urna elementum, a ornare ipsum tristique. Fusce viverra a risus vel pulvinar. Proin vestibulum ullamcorper mi, a consequat mi euismod at.


</p></div></div><div class="pinkinfo">ROSIE HUNTINGTON-WHITELEY. OLD. VAMPIRE. </div></div>

<label for="toggle-3"><div class="six">the princess</div></label></div></td>

<td valign="top"><div id="seven"><input type="checkbox" id="toggle-4"><div class="one-interior"><div class="want-inner">
<div style="width: 200px; height: 160px; text-align: justify; font-family: calibri; font-size: 10px; color: #000; line-height: 10px; padding: 0px 8px 0px 5px; overflow: auto;" class="greenscroll">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Cras est dui, faucibus ac lacus vitae, elementum bibendum sem.</b> Vestibulum ac arcu vestibulum, bibendum lacus sed, cursus felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultrices tellus leo, id egestas massa laoreet a. Aliquam eget dolor in nisi ullamcorper tempus sit amet id nisl. Nam ac ligula posuere, consequat enim quis, sodales lectus. Pellentesque imperdiet orci eget eleifend fermentum. Nulla et nunc dolor. Sed nisl dui, luctus eget purus at, sodales auctor eros. Vivamus a augue ut quam cursus laoreet. Proin at sem eget metus porta ornare ut sed augue.  <p>

Cras volutpat quam id odio consequat commodo. In congue leo libero, at gravida ex consectetur efficitur. In feugiat varius libero pretium consectetur. Nam aliquet felis non facilisis tristique. Praesent non nisl magna. Cras tempus lobortis tellus id varius. Integer nunc elit, sagittis ut interdum ut, lobortis ut tortor. Proin hendrerit magna a urna mollis tempus. Sed a ultrices augue, non scelerisque arcu. Suspendisse auctor semper luctus. Vestibulum gravida quis risus vel sodales. Aliquam dictum malesuada purus, nec placerat ligula luctus nec. Suspendisse pretium orci ut eleifend dapibus.</p><p>

Quisque suscipit imperdiet nibh, sed gravida ante fringilla et. Quisque vitae erat volutpat, congue ex quis, convallis nibh. In vel convallis augue, in tempus quam. Proin nec elit molestie, aliquet arcu nec, ornare libero. Donec vitae ante odio. Vivamus sodales dolor eget elit luctus, ac facilisis urna varius. Phasellus velit ex, accumsan faucibus dui nec, malesuada sodales libero. Cras et fermentum ipsum, a consequat augue. Etiam posuere quis magna eget ultricies. Vestibulum eleifend nisi sed urna elementum, a ornare ipsum tristique. Fusce viverra a risus vel pulvinar. Proin vestibulum ullamcorper mi, a consequat mi euismod at.


</p></div></div><div class="greeninfo">MICHIEL HUISMAN. 900. ANGEL. </div></div>

<label for="toggle-4"><div class="eight">the muscle</div></label></div></td></tr></tbody></table>

<div class="kb"><a href="http://cttw.jcink.net/index.php?showuser=3894" rel="nofollow" target="_blank">© KB</a></div></center>

<!--HTML--><div class="postcolor"> <center><link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"><div style="width: 230px;background-color: #ffff; border-top: 30px solid #000;  border-bottom: 1px solid #000;  padding: 10px;"> <center><div style="width: 220px; font-family: 'Montserrat', sans-serif; font-size: 16px; letter-spacing: -1px; color: #000; line-height: 100%; text-transform: uppercase;">please read ♥ </div></center>

<div style="width: 220px;  text-align: justify;  font-family: 'Roboto', sans-serif;  font-size: 10px;  line-height: 100%; color: #000; padding: 5px; ">thanks for using my code! you can change the code to your liking but please do not take the credit off. please directly link me to where you are using my code! i don't just want a basic link; the exception to this is if the permissions are closed to guests. pm me if you have any q's! thank you ♥ </div>
</div></center><br><br><br><center><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

<style type="text/css">

.vancode24 { width: 180px; height: 180px; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; opacity: 0.0; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; }
.vancode24:hover { opacity: 1.0; }

.vancodetitle1 { width: 180px; text-align: center; font-family: 'Fjalla One', sans-serif; text-transform: lowercase; color: #fff; font-weight: none; line-height: 100%; font-size: 23px; letter-spacing: -1px; text-decoration: none; padding-top: 20px;  }
.vancodefctitle1 { width: 180px; text-align: center;  font-family: calibri;  text-transform: uppercase; color: #fff; font-size: 11px; line-height: 100%; letter-spacing: 2px; padding-top: 5px; padding-bottom: 10px; }
.vancoderqdesc { width: 160px; text-align: justify;  font-family: georgia;  text-transform: lowercase; color: #fff; font-style: italic; font-size: 9px; line-height: 100%; letter-spacing: 2px; padding-top: 5px; margin-left: 10px; }
.vancoderqinfo { width: 160px; font-family: arial; font-size: 10px; line-height: 100%; text-align: justify; background-color: #fff; padding: 10px; border: 3px double #bbb; }

</style>

<table cellspacing="0" cellpadding="0"><tbody><tr><td valign="top">

<div style="width: 186px; background-color: #dedede; padding: 15px; ">

<div class="vancoderqinfo"><div style="height: 144px; overflow: auto; padding-right: 5px;">

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.
<p></p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.


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

</td>

<td><div style="padding-right: 10px;"></div></td>

<td><div style="width: 200px; height: 200px; background-image: url(http://i48.tinypic.com/ohlgrr.jpg);"><div class="vancode24">

<div style="width: 180px; height: 180px; background-color: #79bcb3; padding: 10px;">

<div class="vancodetitle1">"NAME"</div>

<div class="vancodefctitle1">FC: FIRST LAST</div>

<div style="width: 160px; border-top: 1px dotted #fff; margin-left: 10px;"></div>

<div class="vancoderqdesc">other details here like age, member group, occupation, relationship to the character who's requesting, ect.</div>

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

</td></tr></tbody></table>
<div style="width: 350px; text-align: right;  font-family: arial; font-size: 7px; text-transform: uppercase; line-height: 100%; padding-top: 5px;"><a href="http://cttw.jcink.net/index.php?showuser=831" rel="nofollow" target="_blank"><span style="color:969696">THANKS ♥</span></a></div>
</center><br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1-->[dohtml]&lt;center&gt;&lt;link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'&gt;<br><br><br>&lt;style type="text/css"&gt;<br><br>.vancode24 { width: 180px; height: 180px; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; opacity: 0.0; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; }<br>.vancode24:hover { opacity: 1.0; }<br><br>.vancodetitle1 { width: 180px; text-align: center; font-family: 'Fjalla One', sans-serif; text-transform: lowercase; color: #fff; font-weight: none; line-height: 100%; font-size: 23px; letter-spacing: -1px; text-decoration: none; padding-top: 20px; &nbsp;}<br>.vancodefctitle1 { width: 180px; text-align: center; &nbsp;font-family: calibri; &nbsp;text-transform: uppercase; color: #fff; font-size: 11px; line-height: 100%; letter-spacing: 2px; padding-top: 5px; padding-bottom: 10px; }<br>.vancoderqdesc { width: 160px; text-align: justify; &nbsp;font-family: georgia; &nbsp;text-transform: lowercase; color: #fff; font-style: italic; font-size: 9px; line-height: 100%; letter-spacing: 2px; padding-top: 5px; margin-left: 10px; }<br>.vancoderqinfo { width: 160px; font-family: arial; font-size: 10px; line-height: 100%; text-align: justify; background-color: #fff; padding: 10px; border: 3px double #bbb; }<br><br>&lt;/style&gt;<br><br>&lt;table cellspacing="0" cellpadding="0" &gt;&lt;tbody&gt;&lt;td valign="top"&gt;<br><br>&lt;div style="width: 186px; background-color: #dedede; padding: 15px; "&gt;<br><br>&lt;div class="vancoderqinfo"&gt;&lt;div style="height: 144px; overflow: auto; padding-right: 5px;"&gt;<br><br>LALALALA PLOT STUFF HERE!!!!!!!<br><br>&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;<br><br>&lt;/td&gt;<br><br>&lt;td&gt;&lt;div style="padding-right: 10px;"&gt;&lt;/div&gt;&lt;/td&gt;<br><br>&lt;td&gt;&lt;div style="width: 200px; height: 200px; background-image: url(200PX BY 200PX IMAGE HERE!!!!!!!!!!!!!!!);"&gt;&lt;div class="vancode24"&gt;<br><br>&lt;div style="width: 180px; height: 180px; background-color: #79bcb3; padding: 10px;"&gt;<br><br>&lt;div class="vancodetitle1"&gt;"NAME"&lt;/div&gt;<br><br>&lt;div class="vancodefctitle1"&gt;FC: FIRST LAST&lt;/div&gt;<br><br>&lt;div style="width: 160px; border-top: 1px dotted #fff; margin-left: 10px;"&gt;&lt;/div&gt;<br><br>&lt;div class="vancoderqdesc"&gt;other details here like age, member group, occupation, relationship to the character who's requesting, ect.&lt;/div&gt;<br><br>&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;<br><br>&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;<br>&lt;div style="width: 350px; text-align: right; &nbsp;font-family: arial; font-size: 7px; text-transform: uppercase; line-height: 100%; padding-top: 5px;"&gt;[url=http://cttw.jcink.net/index.php?showuser=831][color=969696]THANKS ♥[/color][/url]&lt;/div&gt;<br>&lt;/center&gt;[/dohtml]<br><!--c2--></div></td></tr></tbody></table><!--ec2--><br><br><center><link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

<style type="text/css">

.vancode24 { width: 180px; height: 180px; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; opacity: 0.0; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; }
.vancode24:hover { opacity: 1.0; }

.vancodetitle1 { width: 180px; text-align: center; font-family: 'Fjalla One', sans-serif; text-transform: lowercase; color: #fff; font-weight: none; line-height: 100%; font-size: 23px; letter-spacing: -1px; text-decoration: none; padding-top: 20px;  }
.vancodefctitle1 { width: 180px; text-align: center;  font-family: calibri;  text-transform: uppercase; color: #fff; font-size: 11px; line-height: 100%; letter-spacing: 2px; padding-top: 5px; padding-bottom: 10px; }
.vancoderqdesc { width: 160px; text-align: justify;  font-family: georgia;  text-transform: lowercase; color: #fff; font-style: italic; font-size: 9px; line-height: 100%; letter-spacing: 2px; padding-top: 5px; margin-left: 10px; }
.vancoderqinfo { width: 160px; font-family: arial; font-size: 10px; line-height: 100%; text-align: justify; background-color: #fff; padding: 10px; border: 3px double #bbb; }

</style>

<table cellspacing="0" cellpadding="0"><tbody><tr><td valign="top">

<div style="width: 186px; background-color: #dedede; padding: 15px; ">

<div class="vancoderqinfo"><div style="height: 144px; overflow: auto; padding-right: 5px;">

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.
<p></p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.


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

</td>

<td><div style="padding-right: 10px;"></div></td>

<td><div style="width: 200px; height: 200px; background-image: url(http://i45.tinypic.com/28k2d89.jpg);"><div class="vancode24">

<div style="width: 180px; height: 180px; background-color: #bc79a4; padding: 10px;">

<div class="vancodetitle1">"NAME"</div>

<div class="vancodefctitle1">FC: FIRST LAST</div>

<div style="width: 160px; border-top: 1px dotted #fff; margin-left: 10px;"></div>

<div class="vancoderqdesc">other details here like age, member group, occupation, relationship to the character who's requesting, ect.</div>

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

</td></tr><tr><td><div style="padding-top: 10px;"></div></td></tr>

<tr><td>

<div style="width: 186px; background-color: #dedede; padding: 15px; ">

<div class="vancoderqinfo"><div style="height: 144px; overflow: auto; padding-right: 5px;">

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.
<p></p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.


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

</td>

<td><div style="padding-right: 10px;"></div></td>

<td><div style="width: 200px; height: 200px; background-image: url(http://i46.tinypic.com/n6fdkz.jpg);"><div class="vancode24">

<div style="width: 180px; height: 180px; background-color: #91bc79; padding: 10px;">

<div class="vancodetitle1">"NAME"</div>

<div class="vancodefctitle1">FC: FIRST LAST</div>

<div style="width: 160px; border-top: 1px dotted #fff; margin-left: 10px;"></div>

<div class="vancoderqdesc">other details here like age, member group, occupation, relationship to the character who's requesting, ect.</div>

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


</td></tr><tr><td><div style="padding-top: 10px;"></div></td></tr>

<tr><td>

<div style="width: 186px; background-color: #dedede; padding: 15px; ">

<div class="vancoderqinfo"><div style="height: 144px; overflow: auto; padding-right: 5px;">

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.
<p></p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.


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

</td>

<td><div style="padding-right: 10px;"></div></td>

<td><div style="width: 200px; height: 200px; background-image: url(http://i45.tinypic.com/mhexat.jpg);"><div class="vancode24">

<div style="width: 180px; height: 180px; background-color: #79afbc; padding: 10px;">

<div class="vancodetitle1">"NAME"</div>

<div class="vancodefctitle1">FC: FIRST LAST</div>

<div style="width: 160px; border-top: 1px dotted #fff; margin-left: 10px;"></div>

<div class="vancoderqdesc">other details here like age, member group, occupation, relationship to the character who's requesting, ect.</div>

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

</td></tr></tbody></table>

<div style="width: 350px; text-align: right;  font-family: arial; font-size: 7px; text-transform: uppercase; line-height: 100%; padding-top: 5px;"><a href="http://cttw.jcink.net/index.php?showuser=831" rel="nofollow" target="_blank"><span style="color:969696">THANKS ♥</span></a></div>
</center>

<!--HTML--><div class="postcolor"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css"><style type="text/css">

.bitch { width: 300px; padding: 30px; background: #fff; -webkit-box-shadow: 0 0 0 2px #D4D4D4; box-shadow: 0 0 0 2px #D4D4D4; } 

.dont { margin-top: 5px; padding: 5px 10px; font-family:  times; font-style: italic; font-size: 10px; color: #252525; font-weight: 900; text-transform: uppercase; }  

.kill { width: 250px; padding: 0px 5px 0px 5px; line-height: 165%;  color: #000;  text-align: justify; font-family: 'playfair display' serif; font-size: 9px; letter-spacing: 1px; } 
.kill b { color: #a54930; } 
</style>
<center>


<div class="bitch">
<div class="dont">ladies all across the world</div><p>


</p><div class="kill">

Hello pretty faces! You're considering using my template and that's so wonderful! I don't have many rules, but they're important all the same - feel free to change colours and fonts, but please don't change the code to the point that it is unrecognisable. Do not, under any circumstances, take my credit off. I'd love to see people using it so link it if you do! <p>

So, a couple things about this template. There's a lot going on in here, but it's essentially straightforward. This template is basically three things in one - a tracker, moodboard &amp; a playlist. I was thinking it would be cool to have all sorts of development things in one place, so here it is! The main picture is 450x450, the small gif at the top is 120x120, and the gifs on the moodboard are 115x115, but any square gif will resize. If you have any questions, please feel free to send me a pm! Enjoy loves ~ </p><p>



</p></div>
</div></center>
<br><br><link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300|Raleway" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="http://achameleonsoul.b1.jcink.com/uploads/achameleonsoul/salute.css">
<style type="text/css">

.kb { width: 450px; text-align: right; font-family: courier; font-size: 7px; margin-top: 0px; } 
.kb a { color: #363636; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; } 
.kb a:hover { color: #9a1f01; text-decoration: none; -moz-transition-duration: 1.5s;  -webkit-transition-duration: 1.5s;  -o-transition-duration: 1.5s; } 

</style>
<center>

<div class="ready"><div id="aim">

<div class="queen">

<table><tbody><tr><td><div class="mission"><div class="need"><div class="need-mp3"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="450" height="50"><br> <param name="wmode" value="transparent"><br>       <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><br>   <param name="bgcolor" value="#ffffff"><br>   <param name="FlashVars" value="mp3=http://musicjustfor.me/assets/songs/393000-393999/393126-salute-little-mix.mp3&amp;volume=50&amp;&amp;bgcolor=9b9a23&amp;buttoncolor=9a1f01"><br></object></div></div></div></td>

<td><div class="man-cont"><div class="man-name">

NATASHA ROMANOFF

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


<div class="warriortabs">


<div class="warriortab">
<input type="radio" id="warriortab-1" name="warriortab-group-1" checked="">
<label for="warriortab-1"> TRACKER </label>
<div class="warriorcontent">
<table><tbody><tr>
<td><div class="warrioress" style="border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;"><div class="warrioress-title">ACTIVE</div>

<div style="margin-top: 5px; width: 175px; height: 85px; text-transform: lowercase; font-family: calibri; font-size: 10px; color: #363636; line-height: 100%; overflow: auto;" class="warriorscroll">

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location<p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

</p></div></div></td>
<td><div class="warrioress" style="border-left: 1px solid #ccc; border-bottom: 1px solid #ccc;"><div class="warrioress-title">DEAD</div>

<div style="margin-top: 5px; margin-left: 10px; width: 175px; height: 115px; text-transform: lowercase; font-family: calibri; font-size: 10px; color: #363636; line-height: 100%; overflow: auto;" class="warriorscroll">

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location<p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

 <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">thread title</a> <i>ft.</i> first last<br>&nbsp;&nbsp;&nbsp;&nbsp;
 <i>set at</i> thread location</p><p>

</p></div>


</div></td></tr>
<tr>
<td><div class="warrioress" style="border-right: 1px solid #ccc; border-top: 1px solid #ccc;"><div class="warrioress-title" style="margin-top: 2px;">RELATIONSHIPS</div>

<div style="margin-top: 5px; width: 175px; height: 115px; text-transform: lowercase; font-family: calibri; font-size: 10px; color: #363636; line-height: 100%; overflow: auto;" class="warriorscroll">

  <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">first last
</a><br>&nbsp;&nbsp;&nbsp;&nbsp;
<i>relationship</i> - membergroup <p>

  <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">first last
</a><br>&nbsp;&nbsp;&nbsp;&nbsp;
<i>relationship</i> - membergroup </p><p>

  <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">first last
</a><br>&nbsp;&nbsp;&nbsp;&nbsp;
<i>relationship</i> - membergroup </p><p>

  <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">first last
</a><br>&nbsp;&nbsp;&nbsp;&nbsp;
<i>relationship</i> - membergroup </p><p>

  <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">first last
</a><br>&nbsp;&nbsp;&nbsp;&nbsp;
<i>relationship</i> - membergroup </p><p>

  <span style="font-size:7pt;line-height:100%">♦</span> <a href="http://cttw.jcink.net">first last
</a><br>&nbsp;&nbsp;&nbsp;&nbsp;
<i>relationship</i> - membergroup </p><p>


</p></div></div></td>
<td><div class="warrioress" style="background: rgba(154,31,31,0.98);"><div class="warrioress-info"> 87 <span style="font-size:7pt;line-height:100%">♦</span> SHIELD OPERATIVE<br>
SCARLETT JOHANSSON</div></div></td></tr></tbody></table>
</div>
</div>


<div class="warriortab">
<input type="radio" id="warriortab-2" name="warriortab-group-1">
<label for="warriortab-2"> MOODBOARD </label>
<div class="warriorcontent">

<img src="https://33.media.tumblr.com/a51807fc0ac1fd93953b2b16c76fdfb3/tumblr_nv3wduSHpo1r7mqm8o9_r1_250.gif" style="width: 115px; height: 115px;"> <img src="https://36.media.tumblr.com/422182b26f55b60aa0fccc21771fb318/tumblr_nrbr59X0n11rifnp4o1_500.jpg" style="width: 115px; height: 115px;"> <img src="https://33.media.tumblr.com/22b5aa597928116ba3fac81658cd2de8/tumblr_nubnytpbmV1rr4o07o8_250.gif" style="width: 115px; height: 115px;">

<div style="margin-top: 2px;">
<img src="http://media.tumblr.com/957c63287cef9ebd761ea53f6901ab5e/tumblr_inline_nj3r1ziBaC1s61rec.gif" style="width: 115px; height: 115px;"> <img src="http://i.imgur.com/27i0th8.gif" style="width: 115px; height: 115px;"> <img src="http://media.tumblr.com/87732af78e8ba64511cacf05bdf9375b/tumblr_inline_nj3r69NxWI1s61rec.gif" style="width: 115px; height: 115px;"></div>
</div>
</div>


<div class="warriortab">
<input type="radio" id="warriortab-3" name="warriortab-group-1">
<label for="warriortab-3"> PLAYLIST </label>
<div class="warriorcontent">

<div style="width: 380px; height: 250px; overflow: auto; position: relative; top: -10px; left: -10px;" class="mp3scroll">

<div class="playlist-red">
<table> <tbody><tr><td><div class="mp3-red"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="370" height="40"><br> <param name="wmode" value="transparent"><br>       <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><br>   <param name="bgcolor" value="#ffffff"><br>   <param name="FlashVars" value="mp3=http://musicjustfor.me/assets/songs/393000-393999/393126-salute-little-mix.mp3&amp;volume=50&amp;&amp;bgcolor=9b9a23&amp;buttoncolor=ffffff"><br></object></div></td><td></td><td><div class="mp3-title"> song title - artist </div></td></tr></tbody></table></div>

<div class="playlist-gray">
<table> <tbody><tr><td><div class="mp3-gray"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="370" height="40"><br> <param name="wmode" value="transparent"><br>       <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><br>   <param name="bgcolor" value="#ffffff"><br>   <param name="FlashVars" value="mp3=http://musicjustfor.me/assets/songs/393000-393999/393126-salute-little-mix.mp3&amp;volume=50&amp;&amp;bgcolor=9b9a23&amp;buttoncolor=ffffff"><br></object></div></td><td></td><td><div class="mp3-title"> song title - artist </div></td></tr></tbody></table></div>

<div class="playlist-red">
<table> <tbody><tr><td><div class="mp3-red"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="370" height="40"><br> <param name="wmode" value="transparent"><br>       <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><br>   <param name="bgcolor" value="#ffffff"><br>   <param name="FlashVars" value="mp3=http://musicjustfor.me/assets/songs/393000-393999/393126-salute-little-mix.mp3&amp;volume=50&amp;&amp;bgcolor=9b9a23&amp;buttoncolor=ffffff"><br></object></div></td><td></td><td><div class="mp3-title"> song title - artist </div></td></tr></tbody></table></div>

<div class="playlist-gray">
<table> <tbody><tr><td><div class="mp3-gray"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="370" height="40"><br> <param name="wmode" value="transparent"><br>       <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><br>   <param name="bgcolor" value="#ffffff"><br>   <param name="FlashVars" value="mp3=http://musicjustfor.me/assets/songs/393000-393999/393126-salute-little-mix.mp3&amp;volume=50&amp;&amp;bgcolor=9b9a23&amp;buttoncolor=ffffff"><br></object></div></td><td></td><td><div class="mp3-title"> song title - artist </div></td></tr></tbody></table></div>

<div class="playlist-red">
<table> <tbody><tr><td><div class="mp3-red"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="370" height="40"><br> <param name="wmode" value="transparent"><br>       <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><br>   <param name="bgcolor" value="#ffffff"><br>   <param name="FlashVars" value="mp3=http://musicjustfor.me/assets/songs/393000-393999/393126-salute-little-mix.mp3&amp;volume=50&amp;&amp;bgcolor=9b9a23&amp;buttoncolor=ffffff"><br></object></div></td><td></td><td><div class="mp3-title"> song title - artist </div></td></tr></tbody></table></div>

<div class="playlist-gray">
<table> <tbody><tr><td><div class="mp3-gray"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="370" height="40"><br> <param name="wmode" value="transparent"><br>       <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><br>   <param name="bgcolor" value="#ffffff"><br>   <param name="FlashVars" value="mp3=http://musicjustfor.me/assets/songs/393000-393999/393126-salute-little-mix.mp3&amp;volume=50&amp;&amp;bgcolor=9b9a23&amp;buttoncolor=ffffff"><br></object></div></td><td></td><td><div class="mp3-title"> song title - artist </div></td></tr></tbody></table></div>


</div>
</div>


</div>
</div>
</div></div></div></center><div class="kb"><a href="http://cttw.jcink.net/index.php?showuser=3894" rel="nofollow" target="_blank">© KB</a></div>

<!--HTML--><div class="postcolor"> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css"><style>#itmrules {width: 220px; height: 190px; margin: 0 auto;}</style>
<div id="itmrules"><div style="width: 200px; font-family: fjalla one; font-size: 20px; color: #ffbb7f; text-align: right; line-height: 100%; letter-spacing: -1px;"><i>A FEW RULES!</i></div> <div style="width: 200px; height: 150px; background-color: #edf5e4; border: #6f9496 double 4px; padding: 5px; font-family: fjalla one; font-size: 12px; color: #6f9496; line-height: 100%; text-align: justify; overflow: auto;">hello! if you'd like to use my codes, firstly thank you and secondly, I have just a few rules.<br><br>
1. please don't remove the credit.<br><br>
2. feel free to change colours/fonts but please don't make massive changes - it's probably not the code for you.<br><br>
3. please comment here if you're using, it makes me happy to know. &lt;3</div></div><br><br><link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css">
<style type="text/css">

.roseheader {
 background-color: #443747;
 width: 299px;
 height: 35px;
 position: relative;
 top: 435px;
 left: 166px;}

.rosecontainer {
 margin: 10px auto; 
 height: 460px;
 width: auto;
}

.rosetabs {
 margin: 0px auto; 
 position: relative;
 width: 300px; 
 height:  400px;
}

.rosetab {
 float: left;
}

.rosetab label {
 display: block;
 width: 50px;
 height: 15px;
 background: #e0d8e6;
 border: 1px solid #443747;
 font-family: calibri;
 font-size: 10px;
 color: #443747; 
 text-align: center;
 line-height: 100%;
 padding-top: 5px;
 font-weight: bold;
 text-transform: uppercase;
 margin: 10px;
 position: relative;
 left: 5px;
 top: 395px;
 z-index: 1;
}

.rosetab input[type=radio]:checked ~ label {
 background: #443747;
 border: 1px solid #e0d8e6;
 font-family: calibri;
 font-size: 10px;
 color: #e0d8e6;
 z-index: 2;
}

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

.rosecontent {
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 background: white;
 padding: 10px;
 border: 5px solid #443747;
}

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


</style>

<div class="rosecontainer">
<div class="roseheader"></div>
<div class="rosetabs">


<div class="rosetab">
<input type="radio" id="rosetab-1" name="rosetab-group-1" checked="">
<label for="rosetab-1"> about </label>
<div class="rosecontent">
<table cellpadding="0" cellspacing="0"><tbody><tr><td><div style="width: 100px; height: 370px; background-image: url(http://i.imgur.com/iTcBBpY.png); background-position: center;"></div></td><td><div style="width: 149px; height: 364px; background-color: #ced1b8; padding: 3px; padding-right: 2px; overflow: auto; font-family: playfair display; font-size: 12px; color: #443747; text-align: justify; line-height: 100%; margin-left: 15px;"><div style="text-align: center; letter-spacing: 2px;"><b>rose weasley</b></div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum rutrum hendrerit. Mauris mattis augue purus, scelerisque ultricies urna cursus a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vitae lorem purus. Curabitur id mattis velit. Donec efficitur, dolor sit amet accumsan luctus, purus urna maximus nisl, at suscipit erat purus at neque. Maecenas vehicula dictum pellentesque. Maecenas dolor magna, dignissim eu placerat a, gravida porta orci. Pellentesque augue ante, luctus a posuere hendrerit, elementum rutrum augue. In sem mauris, ornare ornare dui id, consectetur mollis quam. Etiam venenatis, nibh ac dictum ornare, urna turpis laoreet elit, sit amet hendrerit ex ante sed ligula. Proin non lobortis risus, a lobortis augue. Pellentesque laoreet feugiat tortor ut euismod. Nulla facilisi.<br><br>
Aenean non efficitur mi. Phasellus vel rhoncus ipsum, ut sollicitudin nulla. Quisque nec diam fringilla, tristique ante vel, elementum ipsum. Nullam et leo magna. Praesent molestie nulla sed est sagittis interdum. Nam vitae pretium lorem, id tristique tortor. Ut nec elit quis ante euismod hendrerit. Aliquam ullamcorper lacus ut ipsum volutpat vestibulum. In auctor scelerisque massa sed scelerisque. Nam volutpat lorem risus, at iaculis velit maximus in. Fusce vel nunc ex. Aenean nec augue arcu. Phasellus in tincidunt massa, eget pharetra eros. Mauris rhoncus nibh justo, sit amet elementum quam feugiat non. Curabitur lacinia felis a euismod rhoncus.<br><br>
In lobortis lobortis purus. Fusce venenatis velit urna, vitae fringilla ipsum dignissim eu. Nam tincidunt enim dui, ac pellentesque eros facilisis non. Praesent elementum efficitur purus non faucibus. Duis in ornare leo. Phasellus pellentesque vel quam nec rhoncus. Donec accumsan libero ac tortor porta lacinia. Maecenas ex massa, sollicitudin tincidunt magna ut, sollicitudin semper magna. Nam et dui et felis luctus porttitor. </div></td></tr></tbody></table>
</div>
</div>


<div class="rosetab">
<input type="radio" id="rosetab-2" name="rosetab-group-1">
<label for="rosetab-2">active </label>
<div class="rosecontent">
<table cellpadding="0" cellspacing="0"><tbody><tr><td><div style="width: 100px; height: 370px; background-image: url(http://i.imgur.com/dAsMcaP.png); background-position: center;"></div></td><td><div style="width: 149px; height: 364px; background-color: #ced1b8; padding: 3px; padding-right: 2px; overflow: auto; font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%; margin-left: 15px;"><div style="letter-spacing: 2px;"><b>active topics</b></div><br>
<a href="link1" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">thread 1 title</a><br><i>with name</i><br><br>
<a href="link2" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">thread 2 title</a><br><i>with name</i><br><br>
<a href="link3" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">thread 3 title</a><br><i>with name</i><br><br>
</div></td></tr></tbody></table>
</div>
</div>


<div class="rosetab">
<input type="radio" id="rosetab-3" name="rosetab-group-1">
<label for="rosetab-3">tech</label>
<div class="rosecontent">
<table cellpadding="0" cellspacing="0"><tbody><tr><td><div style="width: 100px; height: 370px; background-image: url(http://i.imgur.com/X18rw7x.png); background-position: right;"></div></td><td><div style="width: 149px; height: 364px; background-color: #ced1b8; padding: 3px; padding-right: 2px; overflow: auto; font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%; margin-left: 15px;"><div style="letter-spacing: 2px;"><b>technology</b></div><br>
<a href="tech1" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">tech 1 title</a><br><i>with name</i><br><br>
<a href="tech2" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">tech 2 title</a><br><i>with name</i><br><br>
<a href="tech3" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">tech 3 title</a><br><i>with name</i><br><br>
</div></td></tr></tbody></table>
</div>
</div>


<div class="rosetab">
<input type="radio" id="rosetab-4" name="rosetab-group-1">
<label for="rosetab-4">archive </label>
<div class="rosecontent">
<table cellpadding="0" cellspacing="0"><tbody><tr><td><div style="width: 100px; height: 370px; background-image: url(http://i.imgur.com/WuB3ytb.png); background-position: center;"></div></td><td><div style="width: 149px; height: 364px; background-color: #ced1b8; padding: 3px; padding-right: 2px; overflow: auto; font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%; margin-left: 15px;"><div style="letter-spacing: 2px;"><b>archived topics</b></div><br>
<a href="archive1" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">archive 1 title</a><br><i>with name</i><br><br>
<a href="archive2" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">archive 2 title</a><br><i>with name</i><br><br>
<a href="archive3" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;">archive 3 title</a><br><i>with name</i><br><br>
</div></td></tr></tbody></table>
</div>
</div>
</div>
</div>
<div style="text-align: center;"><a href="http://cttw.jcink.net/index.php?showuser=4508" style="font-family: calibri; font-size: 11px; color: #000; line-height: 100%;">♥</a></div><br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1-->[dohtml]&lt;link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'&gt;<br>&lt;style type="text/css"&gt;<br><br>.roseheader {<br> background-color: #443747;<br> width: 299px;<br> height: 35px;<br> position: relative;<br> top: 435px;<br> left: 166px;}<br><br>.rosecontainer {<br> margin: 10px auto; <br> height: 460px;<br> width: auto;<br>}<br><br>.rosetabs {<br> margin: 0px auto; <br> position: relative;<br> width: 300px; <br> height: &nbsp;400px;<br>}<br><br>.rosetab {<br> float: left;<br>}<br><br>.rosetab label {<br> display: block;<br> width: 50px;<br> height: 15px;<br> background: #e0d8e6;<br> border: 1px solid #443747;<br> font-family: calibri;<br> font-size: 10px;<br> color: #443747; <br> text-align: center;<br> line-height: 100%;<br> padding-top: 5px;<br> font-weight: bold;<br> text-transform: uppercase;<br> margin: 10px;<br> position: relative;<br> left: 5px;<br> top: 395px;<br> z-index: 1;<br>}<br><br>.rosetab input[type=radio]:checked ~ label {<br> background: #443747;<br> border: 1px solid #e0d8e6;<br> font-family: calibri;<br> font-size: 10px;<br> color: #e0d8e6;<br> z-index: 2;<br>}<br><br>.rosetab input[type=radio] {<br> display: none; <br>}<br><br>.rosecontent {<br> position: absolute;<br> top: 0px;<br> bottom: 0px;<br> left: 0px;<br> right: 0px;<br> background: white;<br> padding: 10px;<br> border: 5px solid #443747;<br>}<br><br>.rosetab input[type=radio]:checked ~ label ~ .rosecontent {<br> z-index: 1;<br>}<br><br><br>&lt;/style&gt;<br><br>&lt;div class="rosecontainer"&gt;<br>&lt;div class="roseheader"&gt;&lt;/div&gt;<br>&lt;div class="rosetabs"&gt;<br><br><br>&lt;div class="rosetab"&gt;<br>&lt;input type="radio" id="rosetab-1" name="rosetab-group-1" checked&gt;<br>&lt;label for="rosetab-1"&gt; about &lt;/label&gt;<br>&lt;div class="rosecontent"&gt;<br>&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;div style="width: 100px; height: 370px; background-image: url(http://i.imgur.com/iTcBBpY.png); background-position: center;"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div style="width: 149px; height: 364px; background-color: #ced1b8; padding: 3px; padding-right: 2px; overflow: auto; font-family: playfair display; font-size: 12px; color: #443747; text-align: justify; line-height: 100%; margin-left: 15px;"&gt;&lt;div style="text-align: center; letter-spacing: 2px;"&gt;&lt;b&gt;rose weasley&lt;/b&gt;&lt;/div&gt;&lt;br&gt;<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum rutrum hendrerit. Mauris mattis augue purus, scelerisque ultricies urna cursus a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vitae lorem purus. Curabitur id mattis velit. Donec efficitur, dolor sit amet accumsan luctus, purus urna maximus nisl, at suscipit erat purus at neque. Maecenas vehicula dictum pellentesque. Maecenas dolor magna, dignissim eu placerat a, gravida porta orci. Pellentesque augue ante, luctus a posuere hendrerit, elementum rutrum augue. In sem mauris, ornare ornare dui id, consectetur mollis quam. Etiam venenatis, nibh ac dictum ornare, urna turpis laoreet elit, sit amet hendrerit ex ante sed ligula. Proin non lobortis risus, a lobortis augue. Pellentesque laoreet feugiat tortor ut euismod. Nulla facilisi.&lt;br&gt;&lt;br&gt;<br>Aenean non efficitur mi. Phasellus vel rhoncus ipsum, ut sollicitudin nulla. Quisque nec diam fringilla, tristique ante vel, elementum ipsum. Nullam et leo magna. Praesent molestie nulla sed est sagittis interdum. Nam vitae pretium lorem, id tristique tortor. Ut nec elit quis ante euismod hendrerit. Aliquam ullamcorper lacus ut ipsum volutpat vestibulum. In auctor scelerisque massa sed scelerisque. Nam volutpat lorem risus, at iaculis velit maximus in. Fusce vel nunc ex. Aenean nec augue arcu. Phasellus in tincidunt massa, eget pharetra eros. Mauris rhoncus nibh justo, sit amet elementum quam feugiat non. Curabitur lacinia felis a euismod rhoncus.&lt;br&gt;&lt;br&gt;<br>In lobortis lobortis purus. Fusce venenatis velit urna, vitae fringilla ipsum dignissim eu. Nam tincidunt enim dui, ac pellentesque eros facilisis non. Praesent elementum efficitur purus non faucibus. Duis in ornare leo. Phasellus pellentesque vel quam nec rhoncus. Donec accumsan libero ac tortor porta lacinia. Maecenas ex massa, sollicitudin tincidunt magna ut, sollicitudin semper magna. Nam et dui et felis luctus porttitor. &lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br><br>&lt;div class="rosetab"&gt;<br>&lt;input type="radio" id="rosetab-2" name="rosetab-group-1"&gt;<br>&lt;label for="rosetab-2"&gt;active &lt;/label&gt;<br>&lt;div class="rosecontent"&gt;<br>&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;div style="width: 100px; height: 370px; background-image: url(http://i.imgur.com/dAsMcaP.png); background-position: center;"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div style="width: 149px; height: 364px; background-color: #ced1b8; padding: 3px; padding-right: 2px; overflow: auto; font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%; margin-left: 15px;"&gt;&lt;div style="letter-spacing: 2px;"&gt;&lt;b&gt;active topics&lt;/b&gt;&lt;/div&gt;&lt;br&gt;<br>&lt;a href="link1" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;thread 1 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;a href="link2" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;thread 2 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;a href="link3" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;thread 3 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br><br>&lt;div class="rosetab"&gt;<br>&lt;input type="radio" id="rosetab-3" name="rosetab-group-1"&gt;<br>&lt;label for="rosetab-3"&gt;tech&lt;/label&gt;<br>&lt;div class="rosecontent"&gt;<br>&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;div style="width: 100px; height: 370px; background-image: url(http://i.imgur.com/X18rw7x.png); background-position: right;"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div style="width: 149px; height: 364px; background-color: #ced1b8; padding: 3px; padding-right: 2px; overflow: auto; font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%; margin-left: 15px;"&gt;&lt;div style="letter-spacing: 2px;"&gt;&lt;b&gt;technology&lt;/b&gt;&lt;/div&gt;&lt;br&gt;<br>&lt;a href="tech1" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;tech 1 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;a href="tech2" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;tech 2 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;a href="tech3" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;tech 3 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br><br>&lt;div class="rosetab"&gt;<br>&lt;input type="radio" id="rosetab-4" name="rosetab-group-1"&gt;<br>&lt;label for="rosetab-4"&gt;archive &lt;/label&gt;<br>&lt;div class="rosecontent"&gt;<br>&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;div style="width: 100px; height: 370px; background-image: url(http://i.imgur.com/WuB3ytb.png); background-position: center;"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div style="width: 149px; height: 364px; background-color: #ced1b8; padding: 3px; padding-right: 2px; overflow: auto; font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%; margin-left: 15px;"&gt;&lt;div style="letter-spacing: 2px;"&gt;&lt;b&gt;archived topics&lt;/b&gt;&lt;/div&gt;&lt;br&gt;<br>&lt;a href="archive1" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;archive 1 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;a href="archive2" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;archive 2 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;a href="archive3" style="font-family: playfair display; font-size: 12px; color: #443747; text-align: center; line-height: 100%;"&gt;archive 3 title&lt;/a&gt;&lt;br&gt;&lt;i&gt;with name&lt;/i&gt;&lt;br&gt;&lt;br&gt;<br>&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;div style="text-align: center;"&gt;&lt;a href="http://cttw.jcink.net/index.php?showuser=4508" style="font-family: calibri; font-size: 11px; color: #000; line-height: 100%;"&gt;♥&lt;/a&gt;&lt;/div&gt;[/dohtml]<!--c2--></div></td></tr></tbody></table><!--ec2-->  </div>

<!--HTML--><div class="postcolor"> <center>

<div id="wellthen1">
<div id="wellthen2"><span style="font-size:18pt;line-height:100%">▼</span><br>
you want a code, eh?</div>

<div id="wellthen3">basically, don't steal from this code, leave the credit, and post a link here. it's a little complicated, whoops. <p>

- sylvia</p></div>

</div>


</center>

<link href="http://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet" type="text/css">
<style type="text/css">

#wellthen1 { width: 200px; height: 102px; background-color: #e9e9e9; overflow: hidden; position: relative; top: 0; color: #000; }
#wellthen2 { width: 150px; height: 40px; padding-top: 40px; background-color: #000; text-align: center; font: 8px share tech mono; color: #fff; float: right; position: relative; top: -18px; left: 54px; border-bottom: 2px double salmon; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); }
#wellthen3 { width: 90px; float: left; position: relative; top: -80px; padding: 10px; font: 8px share tech mono; text-align: justify; }


</style><br><br><div class="lecontainer">

<div class="letabs">


<div class="letab">
<input type="radio" id="letab-1" name="letab-group-1" checked="">
<label for="letab-1"> leonard </label>
<div class="lecontent" style="background-image: url(http://i.imgur.com/TCOqhAK.jpg)">
<div class="lilquote">a little quote goes here, just do what you want with it. i really don't care, it's your life. a lot can fit but don't go crazy. i mean the more you type the bigger it gets, but come on.</div>
<div class="thename">leonard drabek</div>
<div class="midyo">
<img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;">
<div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"></div>
<img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;">
<div class="teext">

<p></p><div class="tytle">active</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li><p>

</p><div class="tytle">finished</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li>
</div></div>
</div>
</div>


<div class="letab">
<input type="radio" id="letab-2" name="letab-group-1">
<label for="letab-2"> phoros </label>
<div class="lecontent" style="background-image: url(http://i.imgur.com/vbtEaj9.jpg);">
<div class="lilquote">a little quote goes here, just do what you want with it.</div>
<div class="thename">phoros cervantes</div>
<div class="midyo">
<img src="http://placehold.it/100" style="width: 100px;">
<div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"></div>
<img src="http://placehold.it/160x50" style="margin: 2px 0 4px 0;">
<div class="teext">

<p></p><div class="tytle">active</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li><p>

</p><div class="tytle">finished</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li>
</div></div>
</div>
</div>


<div class="letab">
<input type="radio" id="letab-3" name="letab-group-1">
<label for="letab-3"> ophelia </label>
<div class="lecontent" style="background-image: url(http://placehold.it/200x440);">
<div class="lilquote">a little quote goes here, just do what you want with it.</div>
<div class="thename">ophelia entrite</div>
<div class="midyo">
<img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;">
<div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"></div>
<img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;">
<div class="teext">

<p></p><div class="tytle">active</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li><p>

</p><div class="tytle">finished</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li>
</div></div>
</div>
</div>

<div class="letab">
<input type="radio" id="letab-4" name="letab-group-1">
<label for="letab-4"> name </label>
<div class="lecontent" style="background-image: url(http://placehold.it/200x440);">
<div class="lilquote">a little quote goes here, just do what you want with it.</div>
<div class="thename">name mcname</div>
<div class="midyo">
<img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;">
<div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"></div>
<img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;">
<div class="teext">

<p></p><div class="tytle">active</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li><p>

</p><div class="tytle">finished</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li>
</div></div>
</div>
</div>

<div class="letab">
<input type="radio" id="letab-5" name="letab-group-1">
<label for="letab-5"> name </label>
<div class="lecontent" style="background-image: url(http://placehold.it/200x440);">
<div class="lilquote">a little quote goes here, just do what you want with it.</div>
<div class="thename">name mcname</div>
<div class="midyo">
<img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;">
<div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"></div>
<img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;">
<div class="teext">

<p></p><div class="tytle">active</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li><p>

</p><div class="tytle">finished</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li>
</div></div>
</div>
</div>

<div class="letab">
<input type="radio" id="letab-6" name="letab-group-1">
<label for="letab-6"> name </label>
<div class="lecontent" style="background-image: url(http://placehold.it/200x440);">
<div class="lilquote">a little quote goes here, just do what you want with it.</div>
<div class="thename">name mcname</div>
<div class="midyo">
<img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;">
<div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"></div>
<img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;">
<div class="teext">

<p></p><div class="tytle">active</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li><p>

</p><div class="tytle">finished</div><p>

</p><li><a href="/">thread name here</a> // name mcname</li>
<li><a href="/">another name</a> // name mcname</li>
<li><a href="/">llama peanut fox</a> // name mcname</li>
<li><a href="/">uno seventeen thread name</a> // name mcname</li>
</div></div>
</div>
</div>


</div>
</div>
<div style="font: 8px/100% calibri; margin: 0 auto; text-align: center; text-transform: uppercase; letter-spacing: 1px;"><a href="http://cttw.jcink.net/index.php?showuser=2709" style="text-decoration: none; color: black;">▼ sylvia</a></div>

<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
<style type="text/css">

.lecontainer {
 margin: 10px auto; 
 height: 500px;
 width: 300px;
 background-color: #222;
 overflow: hidden;
color: black;
}

.letabs {
 margin: 0px auto; 
 position: relative;
 width: 300px; 
 height:  300px;
}

.letab {
 display: block;
}

.letab label {
 display: block;
 width: 50px;
 height: 20px;
 background: #7d3c4d;
 margin: 10px 0;
 position: relative;
 left: -35px;
 top: 0px;
 z-index: 2;
 transition: 1s;
 border-bottom: 2px solid #443747;
 font: 8px calibri;
 text-transform: uppercase;
 line-height: 4;
 padding-left: 3px;
 color: white;
}

.letab label:hover {
 left: 0;
 transition: .6s;
}

.letab input[type=radio]:checked ~ label {
 background: #ced1b8;
 z-index: 3;
 color: black;
}

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

.lecontent {
 width: 200px; 
 height: 440px;
 position: absolute;
 top: 5px;
 left: 55px;
 background-image: url(http://placehold.it/200x440);
 border: 15px solid #443747;
 background-color: #7d3c4d;
 background-blend-mode: multiply;
}

.thename {
 width: 430px;
 font: 30px fjalla one; 
 text-transform: uppercase;
 transform: rotate(-90deg);
 position: absolute;
 top: 200px;
 left: -243px;
 text-align: center;
 color: #443747;
 background-color: #222;
 line-height: 40%;
 border-top: 10px solid #222;
 border-bottom: 4px solid #222;
}

.midyo {
 height: 400px;
 width: 160px;
 padding: 20px;
 background-color: white;
 opacity: .7;
 font: 8px/100% calibri;
 text-transform: uppercase;
 transform: scale(0);
 transition: 1s;
 letter-spacing: 1px;
 list-style-type: lower-roman;
 position: absolute;
 top: 0;
 left: 0;
}

.lecontent:hover .midyo {
 transform: scale(1);
 transition: 1s 1s;
}

.midyo a {
 color: #808c7d;
 text-decoration: none;
 letter-spacing: 0;
 text-transform: none;
 font: 14px/110% righteous;
 transition: .4s;
}

.midyo a:hover {
 text-shadow: 5px 0px #ced1b8;
 transition: .4s;
}

.midyo img {
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
}

.tytle {
 font: normal bold normal 20px/100% calibri;
 text-align: right;
 color: #443747;
}

.teext {
 height: 245px; 
 width: 160px; 
 overflow: auto;
 padding-right: 5px;
}

.lilquote {
 width: 140px;
 padding: 10px;
 background-color: white;
 opacity: .7;
 position: relative;
 top: 300px;
 left: 20px;
 font: 9px/100% calibri;
 text-transform: uppercase;
 text-align: justify;
 transition: 1s;
}

.lilquote:before {
  content: "❝";
  font-size: 20px;
  float: left;
  line-height: 1;
  margin: 5px 10px; 
}

.lilquote:after {
  content: "❞";
  font-size: 20px;
  float: right;
  line-height: 1;
  margin: 5px; 
}

.lecontent:hover .lilquote {
 opacity: 0;
 transition: 1s;
}

.teext::-webkit-scrollbar { width: 5px; }
.teext::-webkit-scrollbar-track { background: white; }
.teext::-webkit-scrollbar-thumb { background: white; border: 2px solid #7d3c4d; border-radius: 3px; }

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

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


</style><br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1-->[dohtml]&lt;div class="lecontainer"&gt;<br><br>&lt;div class="letabs"&gt;<br><br><br>&lt;div class="letab"&gt;<br>&lt;input type="radio" id="letab-1" name="letab-group-1" checked&gt;<br>&lt;label for="letab-1"&gt; leonard &lt;/label&gt;<br>&lt;div class="lecontent" style="background-image: url(http://i.imgur.com/TCOqhAK.jpg)"&gt;<br>&lt;div class="lilquote"&gt;a little quote goes here, just do what you want with it. i really don't care, it's your life. a lot can fit but don't go crazy. i mean the more you type the bigger it gets, but come on.&lt;/div&gt;<br>&lt;div class="thename"&gt;leonard drabek&lt;/div&gt;<br>&lt;div class="midyo"&gt;<br>&lt;img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;"&gt;<br>&lt;div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"&gt;&lt;/div&gt;<br>&lt;img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;"&gt;<br>&lt;div class="teext"&gt;<br><br>&lt;p&gt;&lt;div class="tytle"&gt;active&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;&lt;p&gt;<br><br>&lt;div class="tytle"&gt;finished&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br><br>&lt;div class="letab"&gt;<br>&lt;input type="radio" id="letab-2" name="letab-group-1"&gt;<br>&lt;label for="letab-2"&gt; phoros &lt;/label&gt;<br>&lt;div class="lecontent" style="background-image: url(http://i.imgur.com/vbtEaj9.jpg);"&gt;<br>&lt;div class="lilquote"&gt;a little quote goes here, just do what you want with it.&lt;/div&gt;<br>&lt;div class="thename"&gt;phoros cervantes&lt;/div&gt;<br>&lt;div class="midyo"&gt;<br>&lt;img src="http://placehold.it/100" style="width: 100px;"&gt;<br>&lt;div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"&gt;&lt;/div&gt;<br>&lt;img src="http://placehold.it/160x50" style="margin: 2px 0 4px 0;"&gt;<br>&lt;div class="teext"&gt;<br><br>&lt;p&gt;&lt;div class="tytle"&gt;active&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;&lt;p&gt;<br><br>&lt;div class="tytle"&gt;finished&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br><br>&lt;div class="letab"&gt;<br>&lt;input type="radio" id="letab-3" name="letab-group-1"&gt;<br>&lt;label for="letab-3"&gt; ophelia &lt;/label&gt;<br>&lt;div class="lecontent" style="background-image: url(http://placehold.it/200x440);"&gt;<br>&lt;div class="lilquote"&gt;a little quote goes here, just do what you want with it.&lt;/div&gt;<br>&lt;div class="thename"&gt;ophelia entrite&lt;/div&gt;<br>&lt;div class="midyo"&gt;<br>&lt;img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;"&gt;<br>&lt;div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"&gt;&lt;/div&gt;<br>&lt;img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;"&gt;<br>&lt;div class="teext"&gt;<br><br>&lt;p&gt;&lt;div class="tytle"&gt;active&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;&lt;p&gt;<br><br>&lt;div class="tytle"&gt;finished&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br>&lt;div class="letab"&gt;<br>&lt;input type="radio" id="letab-4" name="letab-group-1"&gt;<br>&lt;label for="letab-4"&gt; name &lt;/label&gt;<br>&lt;div class="lecontent" style="background-image: url(http://placehold.it/200x440);"&gt;<br>&lt;div class="lilquote"&gt;a little quote goes here, just do what you want with it.&lt;/div&gt;<br>&lt;div class="thename"&gt;name mcname&lt;/div&gt;<br>&lt;div class="midyo"&gt;<br>&lt;img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;"&gt;<br>&lt;div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"&gt;&lt;/div&gt;<br>&lt;img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;"&gt;<br>&lt;div class="teext"&gt;<br><br>&lt;p&gt;&lt;div class="tytle"&gt;active&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;&lt;p&gt;<br><br>&lt;div class="tytle"&gt;finished&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br>&lt;div class="letab"&gt;<br>&lt;input type="radio" id="letab-5" name="letab-group-1"&gt;<br>&lt;label for="letab-5"&gt; name &lt;/label&gt;<br>&lt;div class="lecontent" style="background-image: url(http://placehold.it/200x440);"&gt;<br>&lt;div class="lilquote"&gt;a little quote goes here, just do what you want with it.&lt;/div&gt;<br>&lt;div class="thename"&gt;name mcname&lt;/div&gt;<br>&lt;div class="midyo"&gt;<br>&lt;img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;"&gt;<br>&lt;div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"&gt;&lt;/div&gt;<br>&lt;img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;"&gt;<br>&lt;div class="teext"&gt;<br><br>&lt;p&gt;&lt;div class="tytle"&gt;active&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;&lt;p&gt;<br><br>&lt;div class="tytle"&gt;finished&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br>&lt;div class="letab"&gt;<br>&lt;input type="radio" id="letab-6" name="letab-group-1"&gt;<br>&lt;label for="letab-6"&gt; name &lt;/label&gt;<br>&lt;div class="lecontent" style="background-image: url(http://placehold.it/200x440);"&gt;<br>&lt;div class="lilquote"&gt;a little quote goes here, just do what you want with it.&lt;/div&gt;<br>&lt;div class="thename"&gt;name mcname&lt;/div&gt;<br>&lt;div class="midyo"&gt;<br>&lt;img src="http://i.imgur.com/9aFjXWl.gif" style="width: 100px;"&gt;<br>&lt;div style="float: right; width: 58px; height: 100px; background: #ba9bb7;"&gt;&lt;/div&gt;<br>&lt;img src="http://i.imgur.com/rYk0E7q.gif" style="margin: 2px 0 4px 0;"&gt;<br>&lt;div class="teext"&gt;<br><br>&lt;p&gt;&lt;div class="tytle"&gt;active&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;&lt;p&gt;<br><br>&lt;div class="tytle"&gt;finished&lt;/div&gt;&lt;p&gt;<br><br>&lt;li&gt;&lt;a href="/"&gt;thread name here&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;another name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;llama peanut fox&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;li&gt;&lt;a href="/"&gt;uno seventeen thread name&lt;/a&gt; // name mcname&lt;/li&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br><br><br>&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;div style="font: 8px/100% calibri; margin: 0 auto; text-align: center; text-transform: uppercase; letter-spacing: 1px;"&gt;&lt;a href="http://cttw.jcink.net/index.php?showuser=2709" style="text-decoration: none; color: black;"&gt;▼ sylvia&lt;/a&gt;&lt;/div&gt;<br><br>&lt;link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'&gt;<br>&lt;link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'&gt;<br>&lt;style type="text/css"&gt;<br><br>.lecontainer {<br> margin: 10px auto; <br> height: 500px;<br> width: 300px;<br> background-color: #222;<br> overflow: hidden;<br>color: black;<br>}<br><br>.letabs {<br> margin: 0px auto; <br> position: relative;<br> width: 300px; <br> height: &nbsp;300px;<br>}<br><br>.letab {<br> display: block;<br>}<br><br>.letab label {<br> display: block;<br> width: 50px;<br> height: 20px;<br> background: #7d3c4d;<br> margin: 10px 0;<br> position: relative;<br> left: -35px;<br> top: 0px;<br> z-index: 2;<br> transition: 1s;<br> border-bottom: 2px solid #443747;<br> font: 8px calibri;<br> text-transform: uppercase;<br> line-height: 4;<br> padding-left: 3px;<br> color: white;<br>}<br><br>.letab label:hover {<br> left: 0;<br> transition: .6s;<br>}<br><br>.letab input[type=radio]:checked ~ label {<br> background: #ced1b8;<br> z-index: 3;<br> color: black;<br>}<br><br>.letab input[type=radio] {<br> display: none; <br>}<br><br>.lecontent {<br> width: 200px; <br> height: 440px;<br> position: absolute;<br> top: 5px;<br> left: 55px;<br> background-image: url(http://placehold.it/200x440);<br> border: 15px solid #443747;<br> background-color: #7d3c4d;<br> background-blend-mode: multiply;<br>}<br><br>.thename {<br> width: 430px;<br> font: 30px fjalla one; <br> text-transform: uppercase;<br> transform: rotate(-90deg);<br> position: absolute;<br> top: 200px;<br> left: -243px;<br> text-align: center;<br> color: #443747;<br> background-color: #222;<br> line-height: 40%;<br> border-top: 10px solid #222;<br> border-bottom: 4px solid #222;<br>}<br><br>.midyo {<br> height: 400px;<br> width: 160px;<br> padding: 20px;<br> background-color: white;<br> opacity: .7;<br> font: 8px/100% calibri;<br> text-transform: uppercase;<br> transform: scale(0);<br> transition: 1s;<br> letter-spacing: 1px;<br> list-style-type: lower-roman;<br> position: absolute;<br> top: 0;<br> left: 0;<br>}<br><br>.lecontent:hover .midyo {<br> transform: scale(1);<br> transition: 1s 1s;<br>}<br><br>.midyo a {<br> color: #808c7d;<br> text-decoration: none;<br> letter-spacing: 0;<br> text-transform: none;<br> font: 14px/110% righteous;<br> transition: .4s;<br>}<br><br>.midyo a:hover {<br> text-shadow: 5px 0px #ced1b8;<br> transition: .4s;<br>}<br><br>.midyo img {<br> filter: grayscale(100%);<br> -webkit-filter: grayscale(100%);<br>}<br><br>.tytle {<br> font: normal bold normal 20px/100% calibri;<br> text-align: right;<br> color: #443747;<br>}<br><br>.teext {<br> height: 245px; <br> width: 160px; <br> overflow: auto;<br> padding-right: 5px;<br>}<br><br>.lilquote {<br> width: 140px;<br> padding: 10px;<br> background-color: white;<br> opacity: .7;<br> position: relative;<br> top: 300px;<br> left: 20px;<br> font: 9px/100% calibri;<br> text-transform: uppercase;<br> text-align: justify;<br> transition: 1s;<br>}<br><br>.lilquote:before {<br> &nbsp;content: "❝";<br> &nbsp;font-size: 20px;<br> &nbsp;float: left;<br> &nbsp;line-height: 1;<br> &nbsp;margin: 5px 10px; <br>}<br><br>.lilquote:after {<br> &nbsp;content: "❞";<br> &nbsp;font-size: 20px;<br> &nbsp;float: right;<br> &nbsp;line-height: 1;<br> &nbsp;margin: 5px; <br>}<br><br>.lecontent:hover .lilquote {<br> opacity: 0;<br> transition: 1s;<br>}<br><br>.teext::-webkit-scrollbar { width: 5px; }<br>.teext::-webkit-scrollbar-track { background: white; }<br>.teext::-webkit-scrollbar-thumb { background: white; border: 2px solid #7d3c4d; border-radius: 3px; }<br><br>.letab input[type=radio]:checked ~ label ~ .lecontent {<br> z-index: 1;<br>}<br><br>.letab input[type=radio]:checked ~ label ~ .thename {<br> z-index: 1;<br>}<br><br><br>&lt;/style&gt;[/dohtml]<!--c2--></div></td></tr></tbody></table><!--ec2-->  </div>

<!--HTML--><div class="postcolor"> 
<style type="text/css">
#peculiar {
    width: 300px;
    height: 180px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.peculiar1 {
    width: 280px;
    height: 15px;
    padding: 10px;
    background-color: #444444;
    color: #eeeeee;
    font-family: 'calibri', sans-serif;
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    overflow: hidden;
}

.peculiar2 {
    width: 280px;
    height: 120px;
    padding: 10px;
    font-size: 11px;
    font-family: 'calibri', sans-serif;
    font-variant: small-caps;
    letter-spacing: 1px;
    text-align: justify;
    color: #444444;
    background: #eeeeee;
    line-height: 105%;
}

.peculiar3 {
    background-color: #FAFAFA;
    width: 220px;
    height: 40px;
    padding: 10px;
    margin: 0 auto;
}
</style>
<div id="peculiar"><div class="peculiar1"><div style="padding-top: 0px"><center>missy's rules</center></div></div>
<div class="peculiar2">thanks for deciding to use my code! all i ask is that you <b>leave the credit on</b>. i make them small and out of the way so there's really no need for you to be a dick. also, please don't use this code as a base because it's not. you're free to change colors/fonts as you see fit and please leave me a link to where you're using this because i love to see my work in action!<p>

you are more than welcome to change the border color on this template! just put the hex code in where it says "HEX CODE" and you're good to go! (:
</p></div></div>
<br><br><br>
<link href="http://missytests.b1.jcink.com/uploads/missytests/tracked.css" rel="stylesheet" type="text/css">
<style type="text/css">
#track { background-color: #89AC9B; }
</style>
<div id="track"><div class="thh">
<div class="icon"><img src="https://31.media.tumblr.com/8670dab3ece2deb27ed597c096cd7a16/tumblr_nsuy6zxbad1r6vy8ho1_400.gif" width="150"></div>
  <div class="name">milo ventimiglia</div>
<div class="tracktabs">

<div class="tracktab">
<input type="radio" id="tracktab-1" name="tracktab-group-1" checked="">
<label for="tracktab-1">active</label>
<div class="content">
<div class="threads">
<h3>comms</h3>
<a href="#">thread title</a>  w/ character<br>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
<h3>threads</h3>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
</div>
</div></div>

<div class="tracktab">
<input type="radio" id="tracktab-2" name="tracktab-group-1">
<label for="tracktab-2" style="margin-left: 15px;">archive</label>
<div class="content">
<div class="threads"><p>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>
<a href="#">thread title</a>  w/ character <br>

</p></div></div>
</div></div>
</div></div>
<div class="credited"><a href="http://cttw.jcink.net/index.php?showuser=178">ty missy!</a></div>
<br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1--><br>[dohtml]<br>&lt;link href='http://missytests.b1.jcink.com/uploads/missytests/tracked.css' rel='stylesheet' type='text/css'&gt;<br>&lt;style type='text/css'&gt;<br>#track { background-color: HEX COLOR HERE; }<br>&lt;/style&gt;<br>&lt;div id='track'&gt;&lt;div class='thh'&gt;<br>&lt;div class='icon'&gt;&lt;img src='150x150 GIF HERE' width=150&gt;&lt;/div&gt;<br> &nbsp;&lt;div class='name'&gt;CHARACTER NAME&lt;/div&gt;<br>&lt;div class='tracktabs'&gt;<br><br>&lt;div class='tracktab'&gt;<br>&lt;input type='radio' id='tracktab-1' name="tracktab-group-1" checked&gt;<br>&lt;label for='tracktab-1'&gt;active&lt;/label&gt;<br>&lt;div class="content"&gt;<br>&lt;div class='threads'&gt;<br>&lt;h3&gt;comms&lt;/h3&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character&lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;h3&gt;threads&lt;/h3&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;&lt;/div&gt;<br><br>&lt;div class='tracktab'&gt;<br>&lt;input type='radio' id='tracktab-2' name='tracktab-group-1'&gt;<br>&lt;label for='tracktab-2' style='margin-left: 15px;'&gt;archive&lt;/label&gt;<br>&lt;div class="content"&gt;<br>&lt;div class='threads'&gt;&lt;p&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br>&lt;a href='#'&gt;thread title&lt;/a&gt; &nbsp;w/ character &lt;br&gt;<br><br>&lt;/div&gt;&lt;/div&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;div class='credited'&gt;&lt;a href='http://cttw.jcink.net/index.php?showuser=178'&gt;ty missy!&lt;/a&gt;&lt;/div&gt;<br>[/dohtml]<!--c2--></div></td></tr></tbody></table><!--ec2-->  </div>

<!--HTML--><div class="postcolor"> <link href="http://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Miscellaneous/myrules.css">

<div class="jrules">
<h1>rules &amp; notes</h1>

<p>i. please add a credit with a <b>link</b> to my account to your site credits</p>
<p>ii. please link me to the site you're using it on. </p>
<p>iii. feel free to change fonts &amp; colours and if you need help pm me! </p>

<hr>

<p><b>notes for this template:</b> link to matching site templates: <a href="http://cttw.jcink.net/index.php?showtopic=468">rules</a>, <a href="http://cttw.jcink.net/index.php?showtopic=469">plot</a>, <a href="http://cttw.jcink.net/index.php?showtopic=470">application</a>, <a href="http://cttw.jcink.net/index.php?showtopic=471">canon list</a>, <a href="http://cttw.jcink.net/index.php?showtopic=472">face/general claims</a>.</p>
<p><b>CSS FOR ALL TEMPLATES IS LOCATED <a href="http://pastebin.com/UyzTk7ur">HERE</a>.</b> the css applies to every template so you only need to copy and paste it in to your site <i>once</i>. at the very bottom there's two places to modify an accent colour you can view in the rules and on claims link hover.</p>

<p>you also need to add the following to your board wrappers:</p><!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle" style="display: none;">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1-->&lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'&gt;<!--c2--></div></td></tr></tbody></table><!--ec2-->

</div>
<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Miscellaneous/Mountains.css"><br><br><div class="n-site-template claimstext">
  <h1>face claim</h1>
  <h2>please remember to sign up.</h2>

<div class="maincontent">
  <h3>A - F</h3>
    
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    
  
  <h3>G - L</h3>
    
   <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br> 
    
  <h3>M - R</h3>
    
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    
  
  <h3>S - Z</h3>
    
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    <a href="link">firstname lastname</a><br>
    
  
  <h3>reserves</h3>
    
    <!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle" style="display: none;">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1-->&lt;b&gt;first last&lt;/b&gt; is reserved for &lt;b&gt;name&lt;/b&gt; until &lt;b&gt;month ##&lt;/b&gt;&lt;br /&gt;<!--c2--></div></td></tr></tbody></table><!--ec2--><br>
    
    <b>gaspard ulliel</b> is reserved for <b>nicole</b> until <b>july 15th</b><br>
    <b>andy biersack</b> is reserved for <b>vic</b> until <b>july 15th</b>

  <h3>claim</h3>
    
    <!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle" style="display: none;">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1-->&lt;a href="link"&gt;firstname lastname&lt;/a&gt;&lt;br&gt;<!--c2--></div></td></tr></tbody></table><!--ec2--><br> 
    
  </div>
</div>

<!--HTML--><div class="postcolor"> 
<style type="text/css">
.snowcontainer{ width: 300px; height: 200px; background-image: url(http://i.imgur.com/L3BFV4s.jpg); display: inline-block;}
.snowsmallercontainer{ width: 270px; height: 170px; position: relative; background-color: #F2EED3; margin-top: 15px; margin-left: 0px;}
.snowtitle {width: 250px; height: 23px; color: #351B0A; text-shadow: 1px 1px 2px #66472A; border-bottom: 2px solid #351B0A; text-align: right; font-weight: bold; font-family: Century Gothic; position: absolute; padding-right: 5px; left: 8px; top: 20px; font-size: 18px;}
.snowtext {width: 250px; height: 100px; overflow-y: auto; position: absolute; top: 50px; left: 8px; text-align: justify; font-family: Century Gothic; font-size: 12px; color: #351B0A;  padding: 5px; line-height: 95%; font-weight: bold; }
</style>

<center>
  <div class="snowcontainer">
    <div class="snowsmallercontainer">
      <div class="snowtitle">here are the rules</div>
      <div class="snowtext">First of all I hope you enjoy the template! Please leave the credit intact and you can play with the fonts, colors and such as much as you want, but please link me to where you'll be using it (I mean the actual post, not just the site).<br><br> 
This is a template I created for my own site, but I figured others might find it useful for their own. Originally the background is transparent, but the result is the same since that is the background the skin uses for posts. I will post separately the code you need to fill out in order to add another character. It's really easy to edit. 
<br><br>Edit to your linking and thanks for using it &lt;3</div>
    </div>
  </div>
</center><br><br><style type="text/css">
.clbackground {background-image: url(http://i.imgur.com/VKEaXLu.png); overflow: none; width: 400px; display: inline-block; margin-top: -50px; height: auto; padding-bottom: 10px;}
.clcategory {font-size: 25px; color: #445454; text-shadow:  2px 2px 0px #000; text-align: left; font-weight: bold; padding-bottom: 10px; width: 380px; text-transform: uppercase; }
.clname {font-size: 20px; color: #445454; text-shadow: 1px 0px 0px #000; text-align: center; font-weight: bold; padding-bottom: 5px; width: 380px; margin-top: 10px;}
.clname a {font-size: 20px; color: #445454; text-shadow: 1px 0px 0px #000; font-weight: bold; text-transform: none;}
.clstuff {font-size: 12px; color: white; text-shadow: 2px 1px 0px #000; text-align: center; font-weight: normal; padding: 5px; font-style: italic; width: 380px; background-color: #445454; text-transform: uppercase; margin-top: 5px;}
.cltext {font-size: 12px; color: gray; text-shadow: 1px 1px 0px #000; text-align: justify; font-weight: normal; padding: 5px; padding-left: 10px; width: 380px;  overflow-y: auto; padding-bottom: 0px; line-height: 95%; text-transform: none;}
.cltext b {color: #445454; font-weight: bold;}
.cltext i {color: #445454; font-style: italic;}
.clpicture {width 300px; height: 200px; margin-top: 40px;}
.clcredits {text-align: right; padding-right: 15px;}
.clcredits a{font-family: Century Gothic; font-size: 9px; width: 365px; text-align: right; color: #445454; font-weight: bold; font-style: italic; text-transform: uppercase; margin-top: 10px;}</style>

<center>
<br><br>
<div class="clbackground">
<div class="clpicture"><img src="http://i.imgur.com/Rk9evzW.jpg"></div>
<div class="clname">_________ Laemond</div>
<div class="clstuff"> vampire noble | 745 | the Emperor </div>
<div class="cltext">The one and only Emperor of Dravidia and the most powerful man in the whole Empire. He has gained his title as much though fighting as through clever politics and manipulations. The first Superi to have ever managed to bring vampires and werewolves into an alliance and also bring the whole Empire under their control.
<p><b>Laemond</b> has been sitting on the throne for three and a half centuries and, although a few have tried, has never been in danger of being overthrown. He simply knows who and how to either gain as an ally or frighten into submission. His strategies are nothing short of brilliance. Despite this he seems to have grown too confident and dismisses the rebel threat as child's play. Perhaps it is unwise to do so, yet his way of ruling seems to have gotten him this far, so who knows? 

</p><p><b>Laemond</b> has, understandably, very few people he can call close friends. Most are allies and people who are useful to him. One of the people he calls a close friend and confidant is <b>Dagan Valegaris</b>, yet, at the same time, a part of his views his as his rival, even though <b>Dagan</b> has never shown the least bit of interest in power or the throne.</p></div>
<div class="clstuff">jonathan rhys meyers | open</div>


<div class="clpicture"><img src="http://placehold.it/300x200/"></div>
<div class="clname">_________  _________</div>
<div class="clstuff"> werewolf noble | 690 | The Alpha</div>
<div class="cltext"><b>The Alpha</b> has no other titles, political or otherwise, nor does he need any. He is second only to the <b>Emperor</b> oficially, but they are allies and sometimes equals. Neither species could rule Dravidia without the other so this alliance is of utmost importance and not an easy thing to build. Not with vampires still somewhat considering werewolves as slightly less superior and with the volatile nature of the werewolf species, but these two have managed to bring the two conflicting sides together and kept them united for a century of preparation and three and a half centuries of ruling the Empire.

<p><b>The Alpha</b> is just as ruled by his werewolf nature as any other, but above and beyond his indisputable god-like fighting abilities, he is also very intelligent and quite the diplomat. A rare combination, yet it is what has secured his place for so long for ruling the whole werewolf species definitely takes more skill than any other task. This means he is able to bot be ruthless and gain people's loyalties.
</p></div>
<div class="clstuff">your choice | open</div>

<div class="clcredits"><a href="http://cttw.jcink.net/index.php?showuser=761">SNOW</a></div>
</div>
</center>
<br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1--><br>&lt;style type="text/css"&gt;<br>.clbackground {background-image: url(http://i.imgur.com/VKEaXLu.png); overflow: none; width: 400px; display: inline-block; margin-top: -50px; height: auto; padding-bottom: 10px;}<br>.clcategory {font-size: 25px; color: #445454; text-shadow: &nbsp;2px 2px 0px #000; text-align: left; font-weight: bold; padding-bottom: 10px; width: 380px; text-transform: uppercase; }<br>.clname {font-size: 20px; color: #445454; text-shadow: 1px 0px 0px #000; text-align: center; font-weight: bold; padding-bottom: 5px; width: 380px; margin-top: 10px;}<br>.clname a {font-size: 20px; color: #445454; text-shadow: 1px 0px 0px #000; font-weight: bold; text-transform: none;}<br>.clstuff {font-size: 12px; color: white; text-shadow: 2px 1px 0px #000; text-align: center; font-weight: normal; padding: 5px; font-style: italic; width: 380px; background-color: #445454; text-transform: uppercase; margin-top: 5px;}<br>.cltext {font-size: 12px; color: gray; text-shadow: 1px 1px 0px #000; text-align: justify; font-weight: normal; padding: 5px; padding-left: 10px; width: 380px; &nbsp;overflow-y: auto; padding-bottom: 0px; line-height: 95%; text-transform: none;}<br>.cltext b {color: #445454; font-weight: bold;}<br>.cltext i {color: #445454; font-style: italic;}<br>.clpicture {width 300px; height: 200px; margin-top: 40px;}<br>.clcredits {text-align: right; padding-right: 15px;}<br>.clcredits a{font-family: Century Gothic; font-size: 9px; width: 365px; text-align: right; color: #445454; font-weight: bold; font-style: italic; text-transform: uppercase; margin-top: 10px;}&lt;/style&gt;<br><br>&lt;center&gt;<br>&lt;br /&gt;&lt;br /&gt;<br>&lt;div class="clbackground"&gt;<br><br>&lt;div class="clpicture"&gt;<br><br>&lt;img src="URL OF A 300x200 PIC"&gt;<br><br>&lt;/div&gt;&lt;div class="clname"&gt;<br><br>_________ &nbsp;_________<br><br>&lt;/div&gt;&lt;div class="clstuff"&gt;<br><br>some stuff | age? | some stuff<br><br>&lt;/div&gt;&lt;div class="cltext"&gt;<br><br>Write here whatever you want and however much you want about the canon.<br><br>&lt;/div&gt;&lt;div class="clstuff"&gt;<br><br>PB | reserved/taken by/open<br><br>&lt;/div&gt;<br><br>&lt;div class="clcredits"&gt;&lt;a href='http://cttw.jcink.net/index.php?showuser=761'&gt;SNOW&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/center&gt;<br><!--c2--></div></td></tr></tbody></table><!--ec2--><br><br>The above code is for just one canon but you can add as many as you want by copying and pasting this code right above the credits (above "&lt;div class="clcredits"&gt;...). I tried to arrange it so the information you might want to edit is easier to find.<br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="0" cellspacing="1" id="CODE-WRAP" class="nicole-code"><tbody><tr><td><div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div></td></tr><tr><td id="CODE"><div class="code-scroll"><!--ec1-->&lt;div class="clpicture"&gt;<br><br>&lt;img src="URL OF A 300x200 PIC"&gt;<br><br>&lt;/div&gt;&lt;div class="clname"&gt;<br><br>_________ &nbsp;_________<br><br>&lt;/div&gt;&lt;div class="clstuff"&gt;<br><br>some stuff | age? | some stuff<br><br>&lt;/div&gt;&lt;div class="cltext"&gt;<br><br>Write here whatever you want and however much you want about the canon.<br><br>&lt;/div&gt;&lt;div class="clstuff"&gt;<br><br>PB | reserved/taken by/open<br><br>&lt;/div&gt;<!--c2--></div></td></tr></tbody></table><!--ec2-->  </div>

<!--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://cttw.jcink.net/index.php?showuser=624"><div class=instaheart></div></a><div class=instacommbox>Add a comment...</div><div class=instadots></div></div></div></div></div>

<!--HTML--><div class="postcolor"> <center><link rel="stylesheet" type="text/css" href="http://lauralickslollipops.b1.jcink.com/uploads/lauralickslollipops/oceanreq1.css">
<div id="myhumps">

<div class="circe"><input type="checkbox" id="1" name="toggle"><label for="1">
1
</label><div class="laurq"><label for="1">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i60.tinypic.com/znrl91.png);"></div></a></td><td><div class="circewater"><div class="circin"> 20 • mermaid • liz mace </div>

words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words<p>
words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words</p><p>
words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words</p><p>
words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words

</p></div></td></tr></tbody></table><div class="curse"> sadie kite </div>
</div></div>

<div class="circe"><input type="checkbox" id="2" name="toggle"><label for="2">
2
</label><div class="laurq"><label for="2">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i59.tinypic.com/2h7j6eg.jpg);"></div></a></td><td><div class="circewater"><div class="circin"> 20-22 • dragon • lauren jauregui </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the art student </div>
</div></div>

<div class="circe"><input type="checkbox" id="3" name="toggle"><label for="3">
3
</label><div class="laurq"><label for="3">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i58.tinypic.com/sosg1g.png);"></div></a></td><td><div class="circewater"><div class="circin"> 22 • vampire or griffin • colton haynes </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the ex boyfriend </div>
</div></div>

<div class="circe"><input type="checkbox" id="4" name="toggle"><label for="4">
4
</label><div class="laurq"><label for="4">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i60.tinypic.com/2dieof4.png);"></div></a></td><td><div class="circewater"><div class="circin"> 21/22 • fairy • cara delevigne </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the best friend </div>
</div></div>

<div class="circe"><input type="checkbox" id="5" name="toggle"><label for="5">
5
</label><div class="laurq"><label for="5">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i59.tinypic.com/1hxcoh.png);"></div></a></td><td><div class="circewater"><div class="circin"> 22 • any group • will higginson </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the bestie </div>
</div></div>

<div class="circe"><input type="checkbox" id="6" name="toggle"><label for="6" "style="margin-right: 0px;">
6
</label><div class="laurq"><label for="6">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i61.tinypic.com/2drrhu9.png);"></div></a></td><td><div class="circewater"><div class="circin"> 24 • any group • caitlin stasey </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the childhood friend </div>
</div></div>

<div class="circe"><input type="checkbox" id="7" name="toggle"><label for="7">
7
</label><div class="laurq"><label for="7">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i57.tinypic.com/23wqo8g.png);"></div></a></td><td><div class="circewater"><div class="circin"> 19/20 • any group • shailene woodley </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the icebreaker </div>
</div></div>

<div class="circe"><input type="checkbox" id="8" name="toggle"><label for="8">
8
</label><div class="laurq"><label for="8">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i58.tinypic.com/fvfewx.png);"></div></a></td><td><div class="circewater"><div class="circin"> 24 • any group • jena malone </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the ex fiance </div>
</div></div>

<div class="circe"><input type="checkbox" id="9" name="toggle"><label for="9">
9
</label><div class="laurq"><label for="9">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i60.tinypic.com/nofsw8.png);"></div></a></td><td><div class="circewater"><div class="circin"> 23/24 • any group • taylor swift </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the fiance </div>
</div></div>

<div class="circe"><input type="checkbox" id="10" name="toggle"><label for="10">
10
</label><div class="laurq"><label for="10">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i60.tinypic.com/ta4m8h.png);"></div></a></td><td><div class="circewater"><div class="circin"> 18 • sphinx or vampire • kendall jenner </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the other half </div>
</div></div>

<div class="circe"><input type="checkbox" id="11" name="toggle"><label for="11" "style="margin-right: 0px;">
11
</label><div class="laurq"><label for="11">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i58.tinypic.com/2u4oa5h.png);"></div></a></td><td><div class="circewater"><div class="circin"> 27/28 • any group • noah mills </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the secret lover </div>
</div></div>

<div class="circe"><input type="checkbox" id="12" name="toggle"><label for="12">
12
</label><div class="laurq"><label for="12">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i59.tinypic.com/o74wao.png);"></div></a></td><td><div class="circewater"><div class="circin"> 24 • any group • ashika pratt </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the partner </div>
</div></div>

<div class="circe"><input type="checkbox" id="13" name="toggle"><label for="13">
13
</label><div class="laurq"><label for="13">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i62.tinypic.com/5eit93.png);"></div></a></td><td><div class="circewater"><div class="circin"> 24 • any group • vanessa hudgens </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> former wife's sister </div>
</div></div>

<div class="circe"><input type="checkbox" id="14" name="toggle"><label for="14">
14
</label><div class="laurq"><label for="14">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i61.tinypic.com/chpg4.png);"></div></a></td><td><div class="circewater"><div class="circin"> 25 • dragon, griffin, or sphinx • mathias lauridsen </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> brother conall </div>
</div></div>

<div class="circe"><input type="checkbox" id="15" name="toggle"><label for="15">
15
</label><div class="laurq"><label for="15">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i57.tinypic.com/309iuqu.png);"></div></a></td><td><div class="circewater"><div class="circin"> 21 • unicorn or phoenix • ariana grande</div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the oldest triplet </div>
</div></div>

<div class="circe"><input type="checkbox" id="16" name="toggle"><label for="16" "style="margin-right: 0px;">
16
</label><div class="laurq"><label for="16">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i58.tinypic.com/b6zeow.png);"></div></a></td><td><div class="circewater"><div class="circin"> 21 • sphinx • ariana grande </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the middle triplet </div>
</div></div>

<div class="circe"><input type="checkbox" id="17" name="toggle"><label for="17">
17
</label><div class="laurq"><label for="17">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i58.tinypic.com/5z49sm.png);"></div></a></td><td><div class="circewater"><div class="circin"> 21 • any group • alex pettyfer </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> apollo pritchard </div>
</div></div>

<div class="circe"><input type="checkbox" id="18" name="toggle"><label for="18">
18
</label><div class="laurq"><label for="18">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i60.tinypic.com/16lcxts.png);"></div></a></td><td><div class="circewater"><div class="circin"> 28-30 • any group • chris evans </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the artist </div>
</div></div>

<div class="circe"><input type="checkbox" id="19" name="toggle"><label for="19">
19
</label><div class="laurq"><label for="19">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i58.tinypic.com/fve9zp.png);"></div></a></td><td><div class="circewater"><div class="circin"> 30-32 • mermaid • chris pine </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the coworker </div>
</div></div>

<div class="circe"><input type="checkbox" id="20" name="toggle"><label for="20">
20
</label><div class="laurq"><label for="20">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i59.tinypic.com/mvg22a.png);"></div></a></td><td><div class="circewater"><div class="circin"> 20 • phoenix • niall horan</div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the future </div>
</div></div>

<div class="circe"><input type="checkbox" id="21" name="toggle"><label for="21" "style="margin-right: 0px;">
21
</label><div class="laurq"><label for="21">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i58.tinypic.com/119qzdh.png);"></div></a></td><td><div class="circewater"><div class="circin"> 21-23 • unicorn • leila goldkuhl </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the bunny rabbit </div>
</div></div>

<div class="circe"><input type="checkbox" id="22" name="toggle"><label for="22">
22
</label><div class="laurq"><label for="22">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i59.tinypic.com/5x8umq.png);"></div></a></td><td><div class="circewater"><div class="circin"> 22 • any group • liam hemsworth </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the youngest columba </div>
</div></div>

<div class="circe"><input type="checkbox" id="23" name="toggle"><label for="23">
23
</label><div class="laurq"><label for="23">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i57.tinypic.com/wbxulj.png);"></div></a></td><td><div class="circewater"><div class="circin"> 21/22 • mermaid • kate upton </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the student </div>
</div></div>

<div class="circe"><input type="checkbox" id="24" name="toggle"><label for="24">
24
</label><div class="laurq"><label for="24">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i59.tinypic.com/2s12hle.png);"></div></a></td><td><div class="circewater"><div class="circin"> 28-30 • any group • channing tatum </div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the new boss </div>
</div></div>

<div class="circe"><input type="checkbox" id="25" name="toggle"><label for="25">
25
</label><div class="laurq"><label for="25">back to browse</label>
<table cellspacing="0" cellpadding="0"><tbody><tr><td><a href="http://shine.b1.jcink.com/index.php?showuser=175" rel="nofollow" target="_blank"><div class="cirpi" style="background: url(http://i58.tinypic.com/6ntvn9.png);"></div></a></td><td><div class="circewater"><div class="circin"> 22-24 • any group • diego barrueco</div>

Request will go here

</div></td></tr></tbody></table><div class="curse"> the temptation </div>
</div></div>

</div></center><link href="http://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet" type="text/css">  </div>