<!--HTML--> <style>
/*place image url in code below */
.hdmg {background-image:url('here');}
@font-face { font-family:Silkscreen; src:url('http://static.tumblr.com/9lu3i4y/cRUmwj5m2/slkscre.ttf'); }
.thrd { width:350px; height:500px; background-color:#eee; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); border-bottom:10px solid #444; }
.hdmg {width:350px; height:200px; border-bottom:10px solid #444; position:relative; }
.ovtx { width:350px; height:200px; display:table-cell; vertical-align:middle; color:white; font-family:Francois One, sans-serif; font-size:25px; text-transform:uppercase; letter-spacing:-1px; position:relative; pointer-events:none; }
.ovtx:after { content:''; display:block; position:absolute; top:0px; height:200px; width:350px; background:-webkit-gradient(linear,left top,left bottom,color-stop(rgba(0, 0, 0, 0.4),0),color-stop(rgba(255, 255, 255, 0.3),0.59),color-stop(rgba(0, 0, 0, 0.4),1)); /*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:-moz-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:-o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; opacity:0; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; pointer-events:none; }
.ovtx span { position:relative; z-index:55; opacity:0; -webkit-transition:0.5s ease-in-out 0.1s; -moz-transition:0.5s ease-in-out 0.1s; -o-transition:0.5s ease-in-out 0.1s; transition:0.5s ease-in-out 0.1s; text-shadow:1px 1px 0px #000000, -1px -1px 0px #000000; }
.ovtx span:before { content:attr(data-title); position:absolute; -webkit-transition:0.2s ease; -moz-transition:0.2s ease; -o-transition:0.2s ease; transition:0.2s ease; -webkit-transform:skewX(10deg) scale(1.1); -moz-transform:skewX(10deg) scale(1.1); -ms-transform:skewX(10deg) scale(1.1); -o-transform:skewX(10deg) scale(1.1); transform:skewX(10deg) scale(1.1); -webkit-animation:tpp 0.2s linear infinite; -moz-animation:tpp 0.2s linear infinite; -ms-animation:tpp 0.2s linear infinite; -o-animation:tpp 0.2s linear infinite; animation:tpp 0.2s linear infinite; top:12px; left:0; opacity:0.2; text-shadow:1px 1px 0px #00ffff, -1px -1px 0px #ff00ff; }
.ovtx span:after { content:attr(data-title); position:absolute; -webkit-transition:0.2s ease; -moz-transition:0.2s ease; -o-transition:0.2s ease; transition:0.2s ease; -webkit-transform:skewX(-10deg) scale(1.1); -moz-transform:skewX(-10deg) scale(1.1); -ms-transform:skewX(-10deg) scale(1.1); -o-transform:skewX(-10deg) scale(1.1); transform:skewX(-10deg) scale(1.1); -webkit-animation:btt 0.2s linear infinite; -moz-animation:btt 0.2s linear infinite; -ms-animation:btt 0.2s linear infinite; -o-animation:btt 0.2s linear infinite; animation:btt 0.2s linear infinite; top:13px; left:0; opacity:0.2; text-shadow:1px 1px 0px #ff00ff, -1px -1px 0px #00ffff; }
@keyframes tpp { 50% { transform:skewX(-10deg); }}
@keyframes btt { 50% { transform:skewX(10deg); }}
@-webkit-keyframes tpp { 50% { -webkit-transform:skewX(-10deg); }}
@-webkit-keyframes btt { 50% { -webkit-transform:skewX(10deg); }}
@-moz-keyframes tpp { 50% { -moz-transform:skewX(-10deg); }}
@-moz-keyframes btt { 50% { -moz-transform:skewX(10deg); }}
@-o-keyframes tpp { 50% { -o-transform:skewX(-10deg); }}
@-o-keyframes btt { 50% { -o-transform:skewX(10deg); }}
.hdmg:hover .ovtx:after { opacity:0.5; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; }
.hdmg:hover .ovtx > span { opacity:1; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; }
.lilfo,.lilfo a { font-family:Silkscreen, monospace; font-size:8px; color:#444; height:10px; width:350px; margin-top:5px; text-transform:none; font-style:normal; text-decoration:none; font-weight:normal; text-shadow:1px 0px 0px rgba(255, 0, 255, 0.30000000000000004), -1px 0px 0px rgba(0, 255, 255, 0.30000000000000004); }
.tlx { background-color:rgba(255, 255, 255, 0.5); width:310px; height:250px; margin:5px 20px; -webkit-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); -moz-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); font-family:arial, sans-serif; font-size:11px; text-align:justify; overflow-y:auto; }
.tlx::-webkit-scrollbar { width:5px; background-color:transparent; }
.tlx::-webkit-scrollbar-thumb { background-color:#444; -webkit-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); -moz-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044);}
.txtm { width:295px; padding:5px; padding-right:0px; }
.txtm p { margin-top:5px; }
.txtm p:first-letter {text-shadow: 1px 0px 0px rgba(255, 0, 255, 0.30000000000000004), -1px 0px 0px rgba(0, 255, 255, 0.30000000000000004); font-size:11px; line-height:10px; padding-top:1px; float: left; padding-left:15px; padding-right:2px; font-weight:500;}
.dera, .dera a {text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:6px; text-transform:uppercase; letter-spacing:4px; color:#fff; text-align:center; text-shadow: 1px 1px 3px rgba(0,0,0, 0); z-index:555; position:relative;}
</style><link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'><center><div class="thrd"><div class="hdmg">
<div class="ovtx">
<span data-title="something meaningful">something meaningful</span>
</div></div><div class="lilfo">
write some notes/tags here
</div><div class="tlx"><div class="txtm">
<p>Thread goes here, use paragraphs </p>
</div></div></div><div class="dera" style="margin-top:-10px;">by <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=7888">protea</a></div></center> </html>