<!--HTML-->
<link href='https://fonts.googleapis.com/css?family=Dosis:400,600,200' rel='stylesheet' type='text/css'>
<style>
.scontainer {
  background-color: #fff;
	width: 560px;
	height: 400px;	
	position: relative;
	overflow: hidden;
  -webkit-transition: ease-in-out 0.7s;
  transition: ease-in-out 0.7s;
  -o-transition: ease-in-out 0.7s;
  -ms-transition: ease-in-out 0.7s;
  -moz-transition: ease-in-out 0.7s;
}
.scontainer:hover .ssideimage {
    margin-top: 0px;
	-webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
	width: 310px;
	height: 400px;	
}
.scontainer:hover .ssidetri1 {
	margin-right: -230px;	
}
.scontainer:hover .ssidetri2 {
	margin-right: 600px;	
}
.scontainer:hover .stitle {
	font-weight: 600;
	line-height: 24px;
	font-size: 24px;
	color: rgba(0,159,151,1.00);
	margin-top: 70px;
	margin-left: 50px;
	width: 300px;
}
.ssideimage {
	background-color: #BB3E40;
	float: right;
	position: relative;
	margin-right: -80px;
	background-image: url(http://www.lovethispic.com/uploaded_images/144427-Mountain-Peeks.jpg);
	background-position: center;
  -webkit-transition: ease-in-out 0.7s;
  transition: ease-in-out 0.7s;
  -o-transition: ease-in-out 0.7s;
  -ms-transition: ease-in-out 0.7s;
  -moz-transition: ease-in-out 0.7s;
	-webkit-transform: skew(0deg);
  transform: skew(0deg);
  -o-transform: skew(0deg);
  -ms-transform: skew(0deg);
  -moz-transform: skew(0deg);
	width: 600px;
	height: 300px;
	margin-top: 50px;	
}
.ssidetri1 {
	width: 400px;
	height: 150px;
	margin-top: -90px;
	position: relative;	
	background-color: rgba(0,151,134,0.56);
	float: right;
    margin-right: -1000px;
	-webkit-transform: skew(0deg, 20deg);
  transform: skew(0deg, 20deg);
  -o-transform: skew(0deg, 20deg);
  -ms-transform: skew(0deg, 20deg);
  -moz-transform: skew(0deg, 20deg);
  -webkit-transition: ease-in-out 0.7s;
  transition: ease-in-out 0.7s;
  -o-transition: ease-in-out 0.7s;
  -ms-transition: ease-in-out 0.7s;
  -moz-transition: ease-in-out 0.7s;
}
.ssidetri2 {
	width: 400px;
	margin-top: -90px;
	position: relative;	
	background-color: rgba(0,151,134,0.56);
	float: right;
  -webkit-transition: ease-in-out 0.7s;
  transition: ease-in-out 0.7s;
  -o-transition: ease-in-out 0.7s;
  -ms-transition: ease-in-out 0.7s;
  -moz-transition: ease-in-out 0.7s;
	-webkit-transform: skew(0deg, 35deg);
  transform: skew(0deg, 35deg);
  -moz-transform: skew(0deg, 35deg);
  -o-transform: skew(0deg, 35deg);
  -ms-transform: skew(0deg, 35deg);
	height: 500px;
	margin-right: 200px;
}
.scontent {
	margin-top: 140px;
}
.stitle {
	font-family: dosis;
	text-transform: uppercase;
	color: #000;
	margin-top: 260px;
	margin-left:60px;
	width: 450px;
	font-size: 39px;
	line-height: 40px;
	font-weight: 600;
	position: absolute;
  -webkit-transition: ease-in-out 0.7s;
  transition: ease-in-out 0.7s;
  -o-transition: ease-in-out 0.7s;
  -ms-transition: ease-in-out 0.7s;
  -moz-transition: ease-in-out 0.7s;
	text-align: left;

}
#stext {
	overflow: auto;
	width: 180px;
	height: 190px;	
	margin-top: 60px;
	text-align: justify;
	font-size: 10px;	
	padding-right: 10px;
	position: relative;
	margin-left: -600px;
	-webkit-transition: ease-in-out 0.7s;
  transition: ease-in-out 0.7s;
  -o-transition: ease-in-out 0.7s;
  -ms-transition: ease-in-out 0.7s;
  -moz-transition: ease-in-out 0.7s;
	opacity: 0;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size: 12px;
	line-height: 17px;
}
.scontainer:hover #stext {
  opacity: 1;
	margin-left: -30px;
}
#stext::-webkit-scrollbar {
	width: 3px;
} 
#stext::-webkit-scrollbar-track {
	background-color: #C2C2C2 
} 
#stext::-webkit-scrollbar-thumb {
	background-color: #868686;	
}
sheader {
	font-family: dosis;	
	font-weight: bold;
	background-color: #eee;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	line-height: 20px;
}
#stext a{
	color: #000;
	text-decoration: none;	
}
#stext a:hover {
	color: 	rgba(0,159,151,1.00);	
}
</style>
<center>
<div class="scontainer">
<div class="ssideimage">
</div>
<div class="ssidetri1">
</div>
<div class="ssidetri2">
</div>
<div class="stitle">
I should have known the world was wide enough
</div>
<div class="scontent">
<div id="stext">
My name is Lotte. I code, hike, and listen Non-Stop to Hamilton.
<p/>
<sheader>SHIPPERS</sheader><br/>
<a href="http://shine.jcink.net/index.php?act=ST&f=19&t=31153">one week later</a><br/>
<p/>
<sheader>THREAD TRACKERS</sheader><br/>
<a href="http://shine.jcink.net/index.php?showtopic=31166">and peggy</a><br/>
<a href="http://shine.b1.jcink.com/index.php?act=ST&f=19&t=30629">orchids & sunflowers </a><br/>
<a href="http://shine.b1.jcink.com/index.php?showtopic=30624">write your way out</a>
<p/>
<sheader>THREADS</sheader><br/>
<a href="http://shine.jcink.net/index.php?showtopic=30489">a part of the narrative</a><br/>
<a href="http://shine.jcink.net/index.php?showtopic=29328">believing in the sky</a>
<p/>
<sheader>SIGNATURES</sheader><br/>
<a href="http://shine.jcink.net/index.php?showtopic=30490">oh the moon</a><br/>
<a href="http://shine.b1.jcink.com/index.php?showtopic=29656">story of tonight</a><br/>
<a href="http://shine.b1.jcink.com/index.php?showtopic=29549">in the eye of a hurricane</a>
</div>
</div>
</div>
</center>

<!--HTML-->
<style> #slidec { width: 400px; height: 400px; background-color: white; background-image: url(http://i66.tinypic.com/i23a5f.jpg); background-size: cover; overflow: hidden; outline: solid 2px #ddd; outline-offset: -70px; transition-duration: 1.2s; -moz-transition-duration: 1.2s; -webkit-transition-duration: 1.2s; -o-transition-duration: 1.2s; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; -moz-transition-delay: 0.8s; -ms-transition-delay: 0.8s; -o-transition-delay: 0.8s; } #slidec:hover { outline-offset: -13px; -webkit-transition-delay: 0s; transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; } #slidec:hover .slideb { position: relative; left: 0; top: -40px; } #slidec:hover .slidet { position: relative; left: 0; top: -587px; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; } .slideb { width: 450px; height: 450px; background-color: white; opacity: 0.2; transition-duration: 1.2s; -moz-transition-duration: 1.2s; -webkit-transition-duration: 1.2s; -o-transition-duration: 1.2s; position: relative; top: -490px; left: 0; } .slidet { position: relative; top: 0px; left: 0; transition-duration: 1.2s; -moz-transition-duration: 1.2s; -webkit-transition-duration: 1.2s; -o-transition-duration: 1.2s; display: block; width: 290px; height: 290px; -webkit-transition-delay: 0s; transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; background-color: white; } .slidett { letter-spacing: 0px; font-size: 11px; width: 267px; height: 208px; overflow: auto; margin-top: 10px; text-align: center; color: #333; line-height: 22px; padding-right: 6px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 11px; } .slidett b { background: #ddd; color: #333; text-transform: uppercase; font-weight: 100; padding-top: 2px; padding-bottom: 2px; padding-left: 4px; padding-right: 4px; font-family: arial; letter-spacing: 0.5px; font-size: 10px; margin-right: 3px; } .slideh { text-transform: uppercase; font-family: arial; font-size: 11px; letter-spacing: 0.5px; display: block; background-color: #333; color: rgba(137,137,137,1.00); height: 40px; width: 282px; margin-top: -30px; border-bottom: 3px solid #888; padding-top: 20px; outline: 4px solid #fff; font-style: italic; } .slideq { font-family: arial; font-size: 33px; text-transform: uppercase; margin-top: 150px; font-style: italic; color: #333; transition-duration: 1.2s; -moz-transition-duration: 1.2s; -webkit-transition-duration: 1.2s; -o-transition-duration: 1.2s; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; -moz-transition-delay: 0.8s; -ms-transition-delay: 0.8s; -o-transition-delay: 0.8s; line-height: 40px; } #slidec:hover .slideq { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; } .slidett::-webkit-scrollbar { width: 3px; } .slidett::-webkit-scrollbar-track { background-color: #C2C2C2 } .slidett::-webkit-scrollbar-thumb { background-color: #444; }  .slidett a { color: #333;} .slidett a:link, a:visited, a:active {text-decoration: none; } .slidett a:hover { text-decoration: underline; } .pgcredit a:link, .pgcredit a:visited .pgcredit a:hover {font-size: 10px;font-family: cambria, times new roman; text-decoration: none; margin-left: 385px; } </style> <center> <div id="slidec"> <div class="slideq"> write your <br/> way out </div> <div class="slideb"> </div> <div class="slidet"> <div class="slideh"> - LONG TITLE HERE- <br/><span style="font-size: 9px; color: #666">-SUB HERE -</span> </div> <div class="slidett"> <b>- ONGOING -</b> <br/><a href="/">link here</a>, <a href="/">link here</a> <br/> <b>- COMPLETED -</b> <br/> <a href="/">link here</a>, <a href="/">link here</a><br/> <b>- DEAD -</b> <br/> <a href="/">link here</a>, <a href="/">link here</a>, <a href="/">link here</a> </div> </div> </div> <div class="pgcredit"><a style="color:#515151" href="http://shine.jcink.net/index.php?showtopic=29329">PG</a></div></center>

<!--HTML-->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'> <style> #imagewrap { background-image: url(https://s-media-cache-ak0.pinimg.com/564x/8a/ed/ca/8aedcaf30f6d97340ad1d0a6e04d6633.jpg); width: 428px; height: 434px; padding-top: 10px; } #threadcontainer { background-color: rgba(224,224,224,0.7); width: 400px; height: 382px; border: double 4px #797979; padding-bottom: 32px;} #threadwrap { width: 370px;	height: 320px; overflow: auto; } #threadcontent {font-family: playfair display; text-align: justify; margin-right: 10px; font-size: 10px; line-height: 20px;  color: #000;} #threadheader {display: block;	background-color: rgba(248,248,248,0.37);	text-transform: uppercase;color: #3B3B3B;	font-size: 20px;	width: 365px;	font-family: playfair display, cambria;	height: 34px;	margin-top: 14px;	line-height: 34px;	margin-bottom: 20px;} #threadfooter {	display: block;	background-color: rgba(248,248,248,0.37);	color: #3B3B3B;	font-size: 10px;	width: 393px;	font-family: playfair display, cambria;	height: 17px;	line-height: 17px;	margin-top: 6px;} #threadwrap::-webkit-scrollbar {	width: 3px;} #threadwrap::-webkit-scrollbar-track { background-color: #232323;} #threadwrap::-webkit-scrollbar-thumb {	background-color: #B8B597;} #pgcredit {float: right;	padding: 6px;} a#pgcredit:link, a#pgcredit:visited {	font-size: 10px; font-family: cambria, times new roman;	color:#515151;	text-decoration: none;} a#pgcredit:hover {	font-size: 10px; font-family: cambria, times new roman;  color:#515151;	text-decoration: none;} </style> <body><center><div id="imagewrap"><div id="threadcontainer"> <div id="threadheader">

Your title goes here

</div><div id="threadwrap"><div id="threadcontent">

Your content goes here! Be sure to use  paragraph tags!

</div> </div><div id="threadfooter">

621 words // tags // notes 

</div></div><div id="pgcredit"><a id="pgcredit" href="http://shine.jcink.net/index.php?showtopic=29329">PG</a></div></div></center></body>

<!--HTML-->
<center><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<style type="text/css">

.californiakingbed { width: 300px; height: 460px; opacity: 0; padding: 20px; font-family: calibri; letter-spacing: 0px; font-size: 10px; text-transform: lowercase; text-align: justify; transition-duration: 0.7s;  -moz-transition-duration: 0.7s;  -webkit-transition-duration: 0.7s;  -o-transition-duration: 0.7s; }
.californiakingbed:hover { width: 300px; height: 460px; opacity: 1; padding: 20px; background-color: white;  text-align: justify; }

.californianame { font-family: Open Sans Condensed; font-size: 26px; text-align: center; text-transform: uppercase; line-height: 150%; }
.californiainfo { overflow: auto; line-height: 100%; height: 350px; width: 260px; padding: 20px; font-size: 10px; }
.californiadetails { font-family: Open Sans Condensed; font-size: 11px; text-align: center; line-height: 110%; text-transform: uppercase; }

::-webkit-scrollbar { height: 12px; width: 5px; background-color: transparent;} 
::-webkit-scrollbar-thumb { background: #2E2F23; } 
::-webkit-scrollbar-corner { background: #2E2F23; }
::-webkit-scrollbar-track { background: transparent; }

.californiakingbed  b {color: #ff8989; font-size: 12px; }
.californiakingbed  i {color: #c489ff; font-size: 11px;}
.californiakingbed  s {color: #ffc489;}

</style>

<table><tr><td>
<div style="width: 340px; height: 500px; background-image: url(http://placehold.it/340x500);">
<div class="californiakingbed">

<div class="californianame"> CHARACTER NAME </div>
<hr>
<div class="californiainfo">

<b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit. Ut hendrerit sapien vitae tempus pellentesque. Integer cursus mi eget tristique mollis. Suspendisse potenti. Nunc dui tellus, imperdiet eget purus vitae, interdum lobortis libero. Morbi faucibus maximus lorem, <i>sit amet feugiat sem</i> vehicula a. Etiam mollis aliquam eleifend. Donec in enim consequat, lacinia est nec, finibus lectus.

Suspendisse libero diam, pharetra in nisi vitae, euismod luctus metus. Morbi vel ante rhoncus, rutrum nulla non, fringilla mi. Vestibulum condimentum vel enim sed facilisis. Ut lectus ipsum, gravida sit amet nunc sed, suscipit sodales ipsum. Nunc hendrerit augue quis tempus malesuada. Quisque condimentum ante eget sapien finibus, vel viverra ante pellentesque. Praesent tincidunt dui porttitor, dapibus lorem ac, ultricies quam. Nunc quis odio a purus vestibulum tincidunt quis eget nibh. <s>Curabitur eros ante</s>, convallis sed enim eget, eleifend venenatis tellus. Pellentesque id ornare leo, ut interdum massa. <p>

Suspendisse libero diam, pharetra in nisi vitae, euismod luctus metus. Morbi vel ante rhoncus, rutrum nulla non, fringilla mi. Vestibulum condimentum vel enim sed facilisis. Ut lectus ipsum, gravida sit amet nunc sed, suscipit sodales ipsum. Nunc hendrerit augue quis tempus malesuada. Quisque condimentum ante eget sapien finibus, vel viverra ante pellentesque. Praesent tincidunt dui porttitor, dapibus lorem ac, ultricies quam. Nunc quis odio a purus vestibulum tincidunt quis eget nibh. <s>Curabitur eros ante</s>, convallis sed enim eget, eleifend venenatis tellus. Pellentesque id ornare leo, ut interdum massa. <p>

Suspendisse libero diam, pharetra in nisi vitae, euismod luctus metus. Morbi vel ante rhoncus, rutrum nulla non, fringilla mi. Vestibulum condimentum vel enim sed facilisis. Ut lectus ipsum, gravida sit amet nunc sed, suscipit sodales ipsum. Nunc hendrerit augue quis tempus malesuada. Quisque condimentum ante eget sapien finibus, vel viverra ante pellentesque. Praesent tincidunt dui porttitor, dapibus lorem ac, ultricies quam. Nunc quis odio a purus vestibulum tincidunt quis eget nibh. <s>Curabitur eros ante</s>, convallis sed enim eget, eleifend venenatis tellus. Pellentesque id ornare leo, ut interdum massa. 

</div>
<p>
<div class="californiadetails">AGE. MEMBERGROUP. FACE CLAIM. </div>

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

<div style="text-align: right; font-size: 6px; width: 340px; letter-spacing: 1px;"><a href="http://shine.b1.jcink.com/index.php?showuser=1672">&hearts; ARTIE ABRAMS.</a></div>

</center>

<!--HTML-->
<center><link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Abel|Indie+Flower" rel="stylesheet">
<style type="text/css" > 
.shipback { width: 310px; height: 310px; padding: 10px; background-image: url('https://secure.static.tumblr.com/bf13ca160e10c42c09e48809a65d6284/ffkjoue/jtVo48ius/tumblr_static_tumblr_static__640.jpg'); border-radius: 100%; }
.ship1 { margin-top: 5px; opacity: 0.0;transition-duration: 0.6s;-moz-transition-duration: 0.6s;-webkit-transition-duration: 0.8s;-o-transition-duration: 0.8s;background: #a895e4; color: #fff; text-align: justify; width: 280px; height: 280px; padding: 10px; overflow: auto; border-radius: 100%; }
.ship1:hover { opacity: .90}
.shiptext { padding: 55px; font-size: 12px; font-family: 'Abel', sans-serif; text-transform: lowercase; }
.shiptext b { font-size: 20px; text-transform: uppercase; font-family: 'Indie Flower', cursive;}</style>
<div class="shipback"><div style="width:300px; height:300px;  
background-image:url('http://cdn.nickpic.host/images/nR1DQ.png'); border-radius: 100%;"><div class="ship1"><div class="shiptext"><b>FRIENDS:</b> Text here.<p>
<b>ENEMIES:</b> Text here.<p>
<b>LOVERS:</b> Text here.<p>
<b>OTHER:</b> Text here.</div></div></div></div><div style="font-size: 9px; font-family: calibri;"><a href="http://shine.jcink.net/index.php?showuser=25399">[user=3804,3]mai[/user]</a></div></center>

<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Hind:400,700|Poppins:700" rel="stylesheet">

<div class="collar" style="background: url(http://placehold.it/400)">
 <div class="border">
 <div class="keep">
   <h1>she's my collar</h1>
   <h2>she's the one i'm running with</h2>
 </div>
 
 <div class="one"></div>
 <div class="two"></div>
 <div class="three"></div>
 <div class="four"></div>
 
 <div class="text">
   <div class="scroll">
       I've been watching him for my entire life. I hate the air he breathes, his foolish decrees, his words so contrived. And I hate the way the townspeople gather outside, they hang on every breath, cling to his chest, home to his heart full of pride. The oracle told him to beware the ides and I'd be lying if I said I wasn't wishing for untimely death or demise. Or am I just wishing I could be like you? That the people would see me too as a poet, and not just the muse.<p>
 Oh it's not true, I don't wish harm upon you. From birth we've been like brothers, of different mothers, within the spirit of the same womb. May the gods strike me down if I forsake you, frater meus, you're beautifully made and to you I'm forever grateful. I'll never forget that you showed me to make art and I know the love you showed me came from a pure and noble heart. I love you and if you want I'll call you king. But why do I lie awake each night thinking, instead of you, it should be me?<p>
 Something wicked this way comes and as I set to face it I'm unsure should I embrace it, should I run? What motivates me - hatred or is it love? What's more wrong - that I too wish to be great or my mother wished she'd had a son? And even if I can't be the one, maybe I could at least help make way for him until the day that he comes. Maybe my name could also be known - that I helped return good to the people and restored greatness to Rome.<p>
 My name is Brutus and my name means heavy, so with a heavy heart I'll guide this dagger into the heart of my enemy. My whole life you were a teacher and friend to me. Please know my actions are not motivated only by envy. I too have a destiny, this death will be art. The people will speak of this day from near and afar. This event will be history and I'll be great too. I don't want what you have, I wanna be you.<p>
 I always knew I could be the one though I feel the endless pain of being and I am scorched by the sun. Of humble origins and born of the cursed sex my name is Brutus but the people will call me Rex
   </div>
 </div>
</div></div>
<a href="http://shine.jcink.net/index.php?showuser=8549" style="font: bold 8px/20px calibri; opacity: .5; text-align:center; display: block;">BY MITZI</a>

<style>

 .collar {
   width: 400px; height: 400px; overflow: hidden;
   margin: auto; background-size: cover!important;
   -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0;
 }
 
 .collar .border {
   width: 350px; height: 350px;
   border: solid 1px #000; margin: 25px;
   overflow: hidden;
 }
 
 .collar .keep {
   width: 350px; height: 350px; overflow: hidden;
 }
 
 .collar h1 {
   font: bold 50px/40px poppins; text-transform: uppercase;
   letter-spacing: -2px; text-align: center; color: #ddd;
   margin: 125px 0 0 0; transition: .5s;
 }
 
 .collar h2 {
   font: 7px/8px helvetica; text-transform: uppercase;
   letter-spacing: 2px; text-align: center; color: #eee;
   margin: 5; transition: .5s;
 }

 
 .collar .one {
   width: 350px; height: 350px; overflow: hidden;
   background: rgba(255,255,255,.1); transition: .7s .3s;
   margin: -700px 0 0 -350px; 
 }
 
 .collar:hover .one {
   background: rgba(255,255,255,.2);
   margin: -350px 0 0 0; transition: .7s 0s;
 }
 
 .collar .two {
   width: 350px; height: 350px; overflow: hidden;
   background: rgba(255,255,255,.1); transition: .7s .3s;
   margin: -350px 0 0 350px; 
 }
 
 .collar:hover .two {
   background: rgba(255,255,255,.2);
   margin: -350px 0 0 0; transition: .7s 0s;
 }
 
 .collar .three {
   width: 350px; height: 350px; overflow: hidden;
   background: rgba(255,255,255,.1); transition: .7s .3s;
   margin: 350px 0 0 -350px; 
 }
 
 .collar:hover .three {
   background: rgba(255,255,255,.2);
   margin: -350px 0 0 0; transition: .7s 0s;
 }
 
 .collar .four {
   width: 350px; height: 350px; overflow: hidden;
   background: rgba(255,255,255,.1); transition: .7s .3s;
   margin: -350px 0 0 350px; 
 }
 
 .collar:hover .four {
   background: rgba(255,255,255,.2);
   margin: -350px 0 0 0; transition: .7s 0s;
 }
 
 .collar:hover h1, .collar:hover h2 {
   opacity: 0; filter: invert(50%);
 }
 
 .collar .text {
   width: 300px; height: 300px;
   margin: -350px 0 0 0; padding: 25px;
   transition: .5s .0s;
   opacity: 0;
 }
 
 .collar:hover .text {
   opacity: 1;
   transition: .8s .6s; margin: -350px 0 0 0;
 }
 
 .collar .scroll {
   overflow: auto; height: 300px; 
   color: #000; font: 11px hind;
   text-align: justify; padding-right: 10px;
 }
 
 .collar .scroll::-webkit-scrollbar {
   width: 1px!important; background: #eee!important;
 }
 
 .collar .scroll::-webkit-scrollbar-track {
   width: 1px!important; background: #eee!important;
 }
 
 .collar .scroll::-webkit-scrollbar-thumb {
   width: 1px!important; background: #000!important;
 }
 
</style>

<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700|Playfair+Display:400,700" rel="stylesheet">

<div class="belispeak"><div class="bg" style="background:url(http://68.media.tumblr.com/c6e4924297d74d934e4434a03c7d36a5/tumblr_ocfqtt0fsj1qgquaxo1_1280.jpg)">
  <h1>i am not your saviour, baby girl</h1>
  <div class="body">
  <div class="scroll">
  Likeness grass sixth unto yielding have dry third. Abundantly divided beginning fill created, god our over it wherein. Open he every. Together divide be. Earth fill. Lights.<p>
  Firmament i. The you're female second living moved dry there light the he to, man waters waters seas dry. For had forth for seed dry god lights, kind. Sixth won't male night beast may whose bring tree good every. Hath. Their morning deep abundantly fowl moving isn't behold don't, light to man. Made sea beginning fish beginning.<p>
  Given Gathered one, blessed itself green wherein let bring, above greater their yielding divide. Hath subdue two him which divide night. Set their don't two spirit heaven them, be life subdue you'll lights likeness also were be herb gathered behold gathered don't face, second beginning fish very For make years may firmament male days tree them.<p>
  Every own gathered to blessed from over whales grass. Seasons night days fly seas whales made were morning grass whose image bring there. I air waters that grass. Let you'll man is which fourth was have spirit.<p>
  Let. Hath. To man spirit also evening. Fourth face had fruitful their moveth signs. Air night. Bearing his moveth was bearing upon whales.
  </div></div>
  
</div></div>

<style>

  .belispeak {
    width: 400px; height: 300px; margin: auto; overflow; hidden; line-height: 120%;
    background: #fff; padding: 5px; box-shadow: 1px 1px 10px rgba(0,0,0,.4);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0;
  }
  
  .belispeak .bg {
    width: 400px; height: 300px; background-size: cover!important;
    overflow; hidden; margin: 0; overflow: hidden;
  }
  
  .belispeak h1 {
    margin: -50px 0 300px 0; width: 370px;
    font: bold 15px/20px playfair display;
    text-align: center; letter-spacing: 1px;
    color: #222; text-transform: uppercase;
    background: rgba(255,255,255,.5); padding: 15px;
    border-bottom: solid 1px #fff;
    transition: .7s;
  }
  
  .belispeak .body {
    background: rgba(255,255,255,.5); height: 255px;
    text-align: center; margin-top: 310px; transition: .5s;
    padding-top: 5px;
  }
  
  .belispeak .scroll:first-letter {
    margin: 5px 5px 0 0; text-align: right; padding: 5px;
    font: bold 22px/10px playfair display; color: #222;
    letter-spacing: 1px; display: inline-block;
    float: left;
  }
  
  .belispeak .scroll {
    margin: 20px 25px; height: 200px; overflow: auto;
    font: 11px open sans; text-align: justify;
    padding-right: 10px; color: #000;
    text-shadow: 1px 1px 10px#fff;
    padding-right: 10px;
  }
  
  .belispeak .scroll::-webkit-scrollbar {
    width: 5px!important; background: transparent!important; border: none!important;
  }
  
  .belispeak .scroll::-webkit-scrollbar-thumb {
    width: 5px!important; background: #fff!important; border: none!important;
  }
  
  .belispeak:hover h1 {
    margin: 0 0 0 0;
  }
  
  .belispeak:hover .body {
    margin: 0 0 0 0;
  }
  
</style>

<!--HTML-->
<html>
<head>
 <title></title>
 <link href="https://fonts.googleapis.com/css?family=Khula|Padauk|Prata" rel="stylesheet">
 <style type="text/css">
.bg_pattern-006-container{
width: 300px;
height: 300px;
background-color: #ECAEBB;
margin: 0px auto;
overflow: hidden;
}
.bg_pattern-006-stripes{
background-image: url("http://colourlovers.com.s3.amazonaws.com/images/patterns/5565/5565952.png");
width: 195px;
height: 500px;
transform: rotate(-72deg);
background-size: 25px;
position: relative;
top: -80px;
}
.bg_pattern-006-border{
width: 240px;
height: 240px;
position: relative;
top: -480px;
position: relative;
left: 20px;
padding: 10px;
border: 1px solid #fff;
}
.bg_pattern-006-text{
width: 220px;
height: 180px;
background-color: #81CFCC;
position: relative;
top: 15px;
padding: 10px;
overflow: auto;
text-align: justify;
color: #fff;
font-family: 'Khula';
font-size: 15px;
line-height: 120%;
opacity: 0;
-webkit-transition: 1s all ease-in-out;
}
.bg_pattern-006-text strong{
color: #000;
}
.bg_pattern-006-text::-webkit-scrollbar{
display: none;
}
.bg_pattern-006-container:hover .bg_pattern-006-text{
opacity: 1;
}
.b_w_03-credits a{
font-style: none;
color: #000;
text-decoration: none;
}
 </style>
</head>
<body>
 <div class="bg_pattern-006-container">
 	<div class="bg_pattern-006-stripes"></div>
 	<div class="bg_pattern-006-border">
   <div class="bg_pattern-006-title" style="font-weight: bolder; letter-spacing: 0px; font-size: 25px; position: relative; left: 75px; color: #fff; font-family: 'Prata';"><span style="font-weight: 100;">/</span>    thread title</div>
   <div class="bg_pattern-006-text">
   	Don't air also divided seed unto likeness beast fly lesser us be there living moveth So over moving heaven appear life <em>gathering</em> multiply gathered unto. Rule evening it image yielding blessed you'll cattle male from seed, rule their him, you're firmament sea he female <em>fruitful</em> firmament firmament divide said man midst thing kind. Day second sea. Appear air <strong>signs</strong> he. Appear lesser, all god them. Unto Sea beast. Above that made so replenish itself likeness. Evening gathering tree fruit without <em>without</em> seas day whose Darkness. Upon signs and <strong>Fish</strong> tree make yielding first <em>i</em> likeness moveth dry. Also was. Saw female their. Wherein fly isn't <strong>Beast</strong> you're image. Moveth gathering won't can't subdue very open <em>heaven</em> spirit isn't female yielding that let it. Good fly the shall blessed. Greater one their seasons cattle. Won't beast his seas waters unto male fowl replenish firmament life their, i. Female. Midst you'll for be give saw us let fowl behold give. Of. Moveth said our replenish creepeth moveth hath above have. Heaven called female. Life. After given, seed. You fish us beginning, tree replenish air appear set image isn't meat man man beast Together seasons. Great gathering had were, darkness evening i very.</p>
   </div>
 	</div>
 </div>
 <center><div class="b_w_03-credits"><a href="http://shine.jcink.net/index.php?showuser=19374">&#x2601;</a></div></center>
</body>
</html>

<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=PT+Sans:700|Roboto:100,100i,300,300i,400,400i,900" rel="stylesheet"><style>#shibitrack {width: 400px; margin: auto; text-align: center;} #shibitrack h1 {font: 50px roboto; font-weight: 100!important; font-style: italic; letter-spacing: -5px; text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff; color: #9275d4;} #shibitrack h1 sub {display: block; letter-spacing: 2px; color: #222; font: 8px 'pt sans'; text-transform: uppercase; margin-top: -5px;}</style>
<div id="shibitrack"><h1><b>four</b> of twenty<sub>threads</sub></h1></div>[/dohtml]


[dohtml]<link href="https://fonts.googleapis.com/css?family=PT+Sans:700|Raleway:100,100i,900" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
<style>
#phantoms {width: 550px;
margin: auto;
outline: 1px solid #8572ab;
box-shadow: 7px 7px 0px #8572ab;
border: 10px solid #fbfbfb;
height: 350px;
position: relative;
overflow: hidden;}
.phantri {position: absolute;
top: -150px;
left: -40px;
  width: 0;
height: 0;
border-style: solid;
border-width: 800px 0 0 600px;
border-color: transparent transparent transparent #8572ab;
transform: rotate(10deg);
z-index: 3;
}
.phanimg {position: absolute;
top: 0; right: 0;
height: 350px;
width: 420px;
background-size: cover;
background-image: url(http://placehold.it/420x350);
}
#phantoms h1 {margin: 0;
font: 37px raleway;
font-weight: 900;
letter-spacing: -3px;
color: #fff;
text-transform: uppercase;
position: absolute;
bottom: 50px; left: 20px;
text-align: left;
z-index: 4;
width: 200px;}
#phantoms h1 u {text-decoration: none;
border-bottom: 1px solid #fff;
display: block;}
#phantoms h1 sub {display: block;
font: 8px 'pt sans';
letter-spacing: 2px;
text-align: left;
margin-top: 5px;}
#phantoms h1 i {font: 100px arial;
margin-left: 20px;}
.beat {animation: beat 2s infinite both;}
@keyframes beat {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.phanw {position: absolute;
top: 0px;
left: -310px;
background: rgba(255,255,255,0.9);
height: 350px;
width: 420px;
z-index: 2;
transition-duration: 0.6s;
transition-delay: 0.3s;}
#phantoms:hover .phanw {left: 130px;}
#phantoms h2 {margin: 0px;
position: absolute;
top: 30px; right: -500px;
width: 200px; height: 270px;
font: 10px courier;
text-align: justify;
line-height: 110%;
overflow: auto;
z-index: 5;
padding-right: 10px;
transition-duration: 0.6s;
transition-delay: 0.0s;}
#phantoms:hover h2 {right: 30px;
transition-delay: 0.6s;}
#phantoms h2 b {color: #8572ab; font: 12px raleway;
font-weight: 900;}
#phantoms h2 i {color: #8572ab; letter-spacing: 1px;}
</style>
<div id="phantoms">
<h1><div class="beat"><i class="sf sf-broken-heart-o"></i></div>
<u>phantoms</u>
  <sub>walk me through the shadows no longer afraid 
  how they become us the phantoms of youth</sub>
</h1>
<div class="phantri"></div>
<h2><b>this is a bold tag.</b>
<i>this is an italic tag.</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec dapibus ex. Morbi non libero sed ipsum dapibus finibus et vitae ligula. Fusce ac ante sed orci tristique gravida sed aliquet diam. Nulla sed elementum leo. Donec eu semper mauris. Morbi bibendum metus consectetur ultricies condimentum. In quis quam orci. Phasellus ac risus vehicula eros faucibus imperdiet et sit amet elit. Nulla pellentesque sagittis sapien ac scelerisque. Curabitur malesuada libero id augue imperdiet sagittis vitae sed ipsum. Nulla ut pharetra arcu. Nam eu interdum arcu. 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec dapibus ex. Morbi non libero sed ipsum dapibus finibus et vitae ligula. Fusce ac ante sed orci tristique gravida sed aliquet diam. Nulla sed elementum leo. Donec eu semper mauris. Morbi bibendum metus consectetur ultricies condimentum. In quis quam orci. Phasellus ac risus vehicula eros faucibus imperdiet et sit amet elit. Nulla pellentesque sagittis sapien ac scelerisque. Curabitur malesuada libero id augue imperdiet sagittis vitae sed ipsum. Nulla ut pharetra arcu. Nam eu interdum arcu. </p>
</h2>
<div class="phanw"></div>
<div class="phanimg" style="background-image: url(https://cdn.nickpic.host/images/pD4IjP.png);"></div>
</div><BR><div style="font-family: arial; text-align: center; text-transform: uppercase; font-size: 7px;"><a href="http://shine.jcink.net/index.php?showuser=145">LAUZ  ღゝ◡╹)ノ♡</a></div>

<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Parisienne|Roboto" rel="stylesheet">
<style>
 .jaryab {
   width:500px;
   height:300px;
   background:url(http://hq-wallpapers.ru/wallpapers/7/hq-wallpapers_ru_city_34446_1920x1080.jpg);
   background-size:cover;
   margin:0 auto;
   position:relative;
   overflow:hidden;
 }
 .jaryabhov {
   width:320px;
   height:255px;
   position:absolute;
   top:20px; right:-350px;
   border:1px dotted #aeaeae;
   background:rgba(25,25,25,0.6);
   transition:all 0.2s linear 0.5s;
 }
 .jaryab:hover .jaryabhov {right:20px;}
 .jaryabtext {
   width:280px;
   height:215px;
   font-family:Playfair Display;
   font-size:10px;
   text-align:justify;
   position:absolute;
   top:20px; left:20px;
   color:#ddd;
   overflow:auto;
   line-height:14px;
 }
 .jaryabdrop {
   width:10px; height:10px;
   padding-top:10px;padding-bottom:15px; padding-left:12px;padding-right:13px;
   font-family:Playfair Display;
   font-size:20px;
   float:left;
   margin-right:5px;
   border:1px solid #ccc;
 }
 .jaryabtext::-webkit-scrollbar {display:none}
 .jaryabicon {
   width:100px;
   height:100px;
   padding:10px;
   border:1px dotted #aeaeae;
   background:rgba(25,25,25,0.6);
   position:absolute;
   top:-150px;left:20px;
   transition:all 0.2s linear 0.5s;
 }
 .jaryab:hover .jaryabicon {top:20px;}
   
 .jaryabtag {
   width:100px;
   height:100px;
   padding:10px;
   border:1px dotted #aeaeae;
   background:rgba(25,25,25,0.6);
   position:absolute;
   bottom:-150px; left:20px;
   font-family:Playfair Display;
   font-size:10px;
   line-height:14px;
   font-style:italic;
   color:#ddd;
   overflow:auto;
   transition:all 0.2s linear 0.5s;
 }
 .jaryab:hover .jaryabtag {bottom:24px;}
 .jaryabtag::-webkit-scrollbar {display:none}
 .jaryabtitle {
   font-family:Parisienne;
   font-size:40px;
   color:#fff;
   position:absolute;
   font-style:italic;
   text-shadow:1px 1px #555, -2px 1px #000;
   top:100px; left:60px;
   transition:all 0.2s linear 0.5s;
   letter-spacing:1px;
   padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:20px;
   border:1px solid #ccc;
 }
 .jaryab:hover .jaryabtitle {
   opacity:0;
 }
 .jaryabcred {
   font-family:Roboto;
   font-size:8px;
   letter-spacing:2px;
   color:#ccc;
   margin:0 auto;
   text-align:center;
   margin-top:5px;
 }
 .jaryabcred a {
   font-family:Roboto;
   font-size:8px;
   letter-spacing:2px;
   color:#ccc;
   text-decoration:none;
 }
</style>

<div class="jaryab">
 <div class="jaryabtitle">young and beautiful</div>
 <div class="jaryabicon">
   <img src="https://media.giphy.com/media/11i5US7EujpF0Q/giphy.gif" style="width:100px;height:100px;">
 </div>
 <div class="jaryabtag">@tagged || notes go here</div>
 <div class="jaryabhov">
   <div class="jaryabtext"><div class="jaryabdrop">B</div>acon ipsum dolor amet fatback landjaeger chicken, brisket shank shoulder cupim cow doner. Pancetta bacon pork chop jowl frankfurter doner ham alcatra sausage tri-tip boudin. Doner biltong turducken, hamburger swine bacon kevin short loin. Corned beef kielbasa prosciutto, salami drumstick jerky ball tip biltong pastrami bacon.
<br><br>
Jerky flank biltong short loin shank ground round spare ribs strip steak beef ribs alcatra shoulder frankfurter turducken turkey. Drumstick landjaeger corned beef pastrami, capicola hamburger frankfurter jerky bresaola shoulder chuck t-bone pork loin. T-bone ball tip landjaeger, ribeye bresaola strip steak pork brisket ground round porchetta. Drumstick bresaola meatloaf, filet mignon t-bone pork belly andouille porchetta corned beef sirloin burgdoggen salami short ribs. Shankle boudin leberkas, hamburger ham hock drumstick strip steak doner chicken. Turducken prosciutto sausage short ribs tail. Swine doner cow brisket, sirloin rump ball tip filet mignon jowl pastrami pig capicola ground round shoulder.
<br><br>
Jowl t-bone bresaola, short loin brisket ground round doner capicola alcatra turducken. Landjaeger ground round rump picanha cupim beef tongue kielbasa pork belly. Meatball chuck strip steak, kielbasa short loin spare ribs frankfurter fatback pig sirloin beef leberkas alcatra pork chop tail. Pancetta shankle tongue doner landjaeger, sausage beef ball tip cow boudin biltong.
<br><br>
Kevin turkey tri-tip pork loin burgdoggen ham. Flank tenderloin strip steak shank beef ribs cow. Frankfurter alcatra porchetta capicola. Flank ground round cupim jowl rump biltong picanha porchetta frankfurter filet mignon. Shoulder beef ribs ball tip flank turducken. Cow meatloaf venison, ham hock pastrami pancetta doner pork chop ground round swine fatback corned beef. Leberkas shoulder jerky bresaola, meatball short loin pork loin.
<br><br>
Tongue burgdoggen bresaola corned beef capicola kielbasa shank. Short loin ribeye prosciutto shank rump salami biltong tenderloin cow chicken meatball. Pork belly turkey jowl pig rump. Ribeye shankle sausage meatball, alcatra filet mignon cupim picanha swine biltong drumstick meatloaf chuck. Turducken salami capicola cupim ham venison frankfurter pork belly picanha pancetta, hamburger landjaeger filet mignon pork chop.</div>
 </div>
</div>
<div class="jaryabcred"><a href="http://shine.jcink.net/index.php?">JARONART</a></div>

<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Parisienne|Roboto" rel="stylesheet">
<style>
 .jaryab {
   width:500px;
   height:300px;
   background:url(https://ic.pics.livejournal.com/ethan_hunt85/47681145/192634/original.jpg);
   background-size:cover;
   margin:0 auto;
   position:relative;
   overflow:hidden;
 }
 .jaryabhov {
   width:320px;
   height:255px;
   position:absolute;
   top:20px; right:-350px;
   border:1px dotted #aeaeae;
   background:rgba(25,25,25,0.6);
   transition:all 0.2s linear 0.5s;
 }
 .jaryab:hover .jaryabhov {right:20px;}
 .jaryabtext {
   width:280px;
   height:215px;
   font-family:Playfair Display;
   font-size:10px;
   text-align:justify;
   position:absolute;
   top:20px; left:20px;
   color:#ddd;
   overflow:auto;
   line-height:14px;
 }
 .jaryabdrop {
   width:10px; height:10px;
   padding-top:10px;padding-bottom:15px; padding-left:12px;padding-right:13px;
   font-family:Playfair Display;
   font-size:20px;
   float:left;
   margin-right:5px;
   border:1px solid #ccc;
 }
 .jaryabtext::-webkit-scrollbar {display:none}
 .jaryabicon {
   width:100px;
   height:100px;
   padding:10px;
   border:1px dotted #aeaeae;
   background:rgba(25,25,25,0.6);
   position:absolute;
   top:-150px;left:20px;
   transition:all 0.2s linear 0.5s;
 }
 .jaryab:hover .jaryabicon {top:20px;}
   
 .jaryabtag {
   width:100px;
   height:100px;
   padding:10px;
   border:1px dotted #aeaeae;
   background:rgba(25,25,25,0.6);
   position:absolute;
   bottom:-150px; left:20px;
   font-family:Playfair Display;
   font-size:10px;
   line-height:14px;
   font-style:italic;
   color:#ddd;
   overflow:auto;
   transition:all 0.2s linear 0.5s;
 }
 .jaryab:hover .jaryabtag {bottom:24px;}
 .jaryabtag::-webkit-scrollbar {display:none}
 .jaryabtitle {
   font-family:Parisienne;
   font-size:30px;
   color:#fff;
   position:absolute;
   font-style:normal;
   text-shadow:1px 1px #555, -2px 1px #000;
   top:100px; left:60px;
   transition:all 0.2s linear 0.5s;
   letter-spacing:1px;
   padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:20px;
   border:1px solid #ccc;
 }
 .jaryab:hover .jaryabtitle {
   opacity:0;
 }
 .jaryabcred {
   font-family:Roboto;
   font-size:8px;
   letter-spacing:2px;
   color:#ccc;
   margin:0 auto;
   text-align:center;
   margin-top:5px;
 }
 .jaryabcred a {
   font-family:Roboto;
   font-size:8px;
   letter-spacing:2px;
   color:#ccc;
   text-decoration:none;
 }
</style>

<div class="jaryab">
 <div class="jaryabtitle">Я тебе не верю!</div>
 <div class="jaryabicon">
   <img src="https://media.giphy.com/media/11i5US7EujpF0Q/giphy.gif" style="width:100px;height:100px;">
 </div>
 <div class="jaryabtag"><img src="https://media.giphy.com/media/11i5US7EujpF0Q/giphy.gif" style="width:100px;height:100px;"></div>
 <div class="jaryabhov">
   <div class="jaryabtext"><div class="jaryabdrop">B</div>acon ipsum dolor amet fatback landjaeger chicken, brisket shank shoulder cupim cow doner. Pancetta bacon pork chop jowl frankfurter doner ham alcatra sausage tri-tip boudin. Doner biltong turducken, hamburger swine bacon kevin short loin. Corned beef kielbasa prosciutto, salami drumstick jerky ball tip biltong pastrami bacon.
<br><br>
Jerky flank biltong short loin shank ground round spare ribs strip steak beef ribs alcatra shoulder frankfurter turducken turkey. Drumstick landjaeger corned beef pastrami, capicola hamburger frankfurter jerky bresaola shoulder chuck t-bone pork loin. T-bone ball tip landjaeger, ribeye bresaola strip steak pork brisket ground round porchetta. Drumstick bresaola meatloaf, filet mignon t-bone pork belly andouille porchetta corned beef sirloin burgdoggen salami short ribs. Shankle boudin leberkas, hamburger ham hock drumstick strip steak doner chicken. Turducken prosciutto sausage short ribs tail. Swine doner cow brisket, sirloin rump ball tip filet mignon jowl pastrami pig capicola ground round shoulder.
<br><br>
Jowl t-bone bresaola, short loin brisket ground round doner capicola alcatra turducken. Landjaeger ground round rump picanha cupim beef tongue kielbasa pork belly. Meatball chuck strip steak, kielbasa short loin spare ribs frankfurter fatback pig sirloin beef leberkas alcatra pork chop tail. Pancetta shankle tongue doner landjaeger, sausage beef ball tip cow boudin biltong.
<br><br>
Kevin turkey tri-tip pork loin burgdoggen ham. Flank tenderloin strip steak shank beef ribs cow. Frankfurter alcatra porchetta capicola. Flank ground round cupim jowl rump biltong picanha porchetta frankfurter filet mignon. Shoulder beef ribs ball tip flank turducken. Cow meatloaf venison, ham hock pastrami pancetta doner pork chop ground round swine fatback corned beef. Leberkas shoulder jerky bresaola, meatball short loin pork loin.
<br><br>
Tongue burgdoggen bresaola corned beef capicola kielbasa shank. Short loin ribeye prosciutto shank rump salami biltong tenderloin cow chicken meatball. Pork belly turkey jowl pig rump. Ribeye shankle sausage meatball, alcatra filet mignon cupim picanha swine biltong drumstick meatloaf chuck. Turducken salami capicola cupim ham venison frankfurter pork belly picanha pancetta, hamburger landjaeger filet mignon pork chop.</div>
 </div>
</div>

<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Caveat|Port+Lligat+Sans|Voltaire" rel="stylesheet">


<style type="text/css">
  #shco-cl-thread {
  width: 400px; height: 440px;
  overflow: hidden;
  background-color: #070708;
  border: 6px solid #42222c;
   transition: .9s ease; -moz-transition: .9s ease; -o-transition: .9s ease; webkit-transition: .9s ease;
  }
  #shco-cl-thread:hover {
   transition: .9s ease; -moz-transition: .9s ease; -o-transition: .9s ease; webkit-transition: .9s ease;
   border: 6px solid #690021;  
  }
  
    .shco-cl-th-gif {
      width: 210px; height: 130px;
      border: 2px dashed #690021;
      overflow: hidden;
      margin: 10px;
      position: relative; top: 0; left: 60px;
      transition: .9s ease .6s; -moz-transition: .9s ease .6s; -o-transition: .9s ease .6s; webkit-transition: .9s ease .6s;
    }
    .shco-cl-th-gif table { margin: -2px; padding: 0; }
    .shco-cl-th-gif-a {
    border: 5px solid #171717;
    width: 200px; height: auto;
    }
       .shco-cl-th-gif img {
        width: 200px; height: auto; 
        filter: grayscale(30%); -moz-filter: grayscale(30%); -webkit-filter: grayscale(30%); -o-filter: grayscale(30%);
        transition: .9s ease .6s; -moz-transition: .9s ease .6s; -o-transition: .9s ease .6s; webkit-transition: .9s ease .6s;
        position: relative; z-index: 1; 
        }
    
          #shco-cl-thread:hover .shco-cl-th-gif {
          border: 2px dashed #4d1023; 
          transition: .9s ease; -moz-transition: .9s ease; -o-transition: .9s ease; webkit-transition: .9s ease; 
          }
          #shco-cl-thread:hover .shco-cl-th-gif img {
          transition: .9s ease; -moz-transition: .9s ease; -o-transition: .9s ease; webkit-transition: .9s ease;
          filter: grayscale(90%); -moz-filter: grayscale(90%); -webkit-filter: grayscale(90%); -o-filter: grayscale(90%); 
          }
      
      .shco-cl-th-gif-tri {
      width: 0;
      height: 0;
      border-style: solid;
      position: relative; z-index: 2; 
      margin-top: 0px;
      border-width: 0 0 120px 200px;
      border-color: transparent transparent rgba(66, 34, 44, 0.68) transparent;
      transition: .9s ease .6s; -moz-transition: .9s ease .6s; -o-transition: .9s ease .6s; webkit-transition: .9s ease .6s;
      }
          #shco-cl-thread:hover .shco-cl-th-gif-tri {
          margin-left: -209px;
          transition: .9s ease; -moz-transition: .9s ease; -o-transition: .9s ease; webkit-transition: .9s ease;
          }
   
   
     .shco-cl-th-side {
      opacity: 0;
      width: 210px; height: 130px;
      left: 0px;
      background-color: transparent;
      position: relative; z-index: 3;
      overflow: hidden;
      transition: .9s ease; -moz-transition: .9s ease; -o-transition: .9s ease; webkit-transition: .9s ease;
     }
     
     #shco-cl-thread:hover .shco-cl-th-side {
      left: -90px; opacity: 1;
      transition: .9s ease .6s; -moz-transition: .9s ease .6s; -o-transition: .9s ease .6s; webkit-transition: .9s ease .6s;
     }
        .shco-cl-th-tagbar {
        width: 150px; height: 25px; text-align: center;
        margin: 56px auto auto 60px; text-transform: uppercase;
        border: 2px solid #171717;
        font: 15px/25px 'Caveat'; font-weight: 300;
        color: #aaa; background-color: #423036; padding: 0px 3px;
        }
        .shco-cl-th-tagbar a {
          font: 15px/25px ''; text-transform: uppercase;
         color: #aaa; text-decoration: none; 
        }
      
       .shco-cl-th-notes {
        background-color: rgba(23, 23, 23, 0.68);
        text-align: left; padding: 5px;
        
        width: 120px; height: 30px; overflow: hidden; 
        color: #b6b6b6; font: 11px/11px 'Port Lligat Sans';
       }

   .shco-cl-th-tb {
    width: 340px; height: 250px; 
    overflow: hidden; 
    background-color: #171717;
    border: 2px solid #4d1923;
    transition: .9s ease; -moz-transition: .9s ease; -o-transition: .9s ease; webkit-transition: .9s ease;
   }
    #shco-cl-thread:hover .shco-cl-th-tb {
      border: 2px solid #5c5054;
      transition: .9s ease; -moz-transition: .9s ease; -o-transition: .9s ease; webkit-transition: .9s ease;
    }
    .shco-cl-th-tb table { margin: -3px; padding: 0; }
      .shco-cl-th-posttri {
      position: relative; z-index: 1; 
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 250px 340px 0 0;
      border-color: rgba(66, 34, 44, 0.68) transparent transparent transparent;

      }
      
      .shco-cl-th-posthere {
      text-align: justify; position: relative; z-index: 2; 
      left: -340px;
      width: 320px; padding-right: 5px; overflow: auto;
      height: 240px; margin: 5px;
      background-color: transparent;
      font: 11.5px/13px 'Port Lligat Sans'; color: #c2c2c2;
      }
      .shco-cl-th-posthere b { color: #aaa; }
      .shco-cl-th-posthere i { color: #aaa; }
  
  
  .shco-cl-scroll::-webkit-scrollbar { width: 3px; height: 3px; }
  .shco-cl-scroll::-webkit-scrollbar-track { background-color: #aaa; border: 1px solid #000; }
  .shco-cl-scroll::-webkit-scrollbar-thumb { background-color: #000; border: 1px solid #aaa; }
</style>

<center>
  
  <div id="shco-cl-thread">
    
      <table><tr>
       <td>
         <div class="shco-cl-th-gif">
          <table><tr><td>
            <div class="shco-cl-th-gif-a"><img src="http://78.media.tumblr.com/80d76cec0f96feea375bbfff5f75033b/tumblr_inline_omqb046YDv1urfelz_250.gif"></div>
          </td>
            <td><div class="shco-cl-th-gif-tri"></div></td>
          </tr></table>
          </div>
       </td>
      
       <td>
         <div class="shco-cl-th-side">
            <div class="shco-cl-th-tagbar"><a href="">[user=21545,3]Mason[/user] vaisey</a></div>
          
           <div class="shco-cl-th-notes">notes go here but it doesn't scroll so keep that in mind as you write~</div>
         </div>
       </td>
      </tr></table>
    
    
      <div class="shco-cl-th-tb">
      <table><tr><td>
        <div class="shco-cl-th-posttri"></div>
      </td>
      
      <td>
        <div class="shco-cl-th-posthere shco-cl-scroll">
        I arrived drenched in morning light 
        And it churned my guts unless I closed my eyes 
        Made it up the stairs to the bed inside 
        Without puking up a fantastic time 
        And everything so unexpectedly 
        Started to feel <b>like a dream</b>
        But I couldn’t stop drifting out 
        When the magic would spin<P>
        
        2:00 PM: I missed my class again 
        Did you miss yours too because you’re sleeping in? 
        Are the two of us both imagining seven-hour round-trips into each others’ beds? 
        And everything so unexpectedly started to change in the dreams 
        But I was preoccupied with how the magic would end 
        Because nothing intangible remains sustainable 
        Hope is a scheme
        Will I ever see you again?
        Will I ever see you again?<P>
        
        And if I see you soon will you want to see me? 
        Or will you just want to sneak away? Did I creep you out like a scary movie? 
        I hope that we feel the same, I hope that we feel the same
        Fuck oh, I did something weird last night 
        I made out in the van with a girl I like 
        We were <i>kinda drunk,</i> but it seemed alright 
        So we made out for the entire ride and everything 
        So unexpectedly started to feel like a dream 
        But I was preoccupied with how the magic would end 
        'Cause nothing intangible remains sustainable 
        Hope is a scheme
        Will I ever see you again?
        Will I ever see you again?<P>
        
        And if I see you soon will you want to see me? 
        Or will you just want to sneak away? 
        Will you kiss me hard like a garbage movie?
        I hope that we feel the same, I hope that we feel the same
        I hope I’m not reading into this too much, it’s a kiss 
        I hope I’m not reading into this too much, it’s a kiss 
        But is there someone thinking of me when I’m feeling alone 
        When I’m feeling alone and I’m spending weekends staring at the wall 
        If there’s someone thinking of you, when you’re feeling alone when you’re feeling alone 
        How can that compare to nothing nice at all, at all, at all, at all?<P>
        
        And if I see you soon will you want to see me or will you just try to sneak away? 
        Will you kiss me hard like some shit in a terrible movie? 
        I hope that we feel the same, I hope that we feel the same
        I hope that we feel the same, I hope that we feel the same
        Fuck oh, I did something weird last night 
        I made out in the van with a girl I like 
        We were kinda drunk, but it felt alright 
        So we made out for the entire ride
       </div>
      </td>
      </tr></table>
      </div>
  </div>
  
</center>