<!--HTML--><style type="text/css">

.jscred { width: 480px; text-align: right; }
.jscred a { font-size: 8px; font-family: Times,serif; margin-top: 5px; line-height: 100%; text-transform: uppercase; color: black; font-style: italic; }

.hvysl { width: 500px; }
.hvysl .inner { height: 0px; overflow: hidden; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; }
.hvysl:hover .inner { height: XXpx;  -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; }

.hvysl .acnt { width: 500px; height: 100px; padding: 50px 0px; border-top: 25px solid #222222; }
.hvysl .acnt:first-of-type { border: none; }
.hvysl .acnt h1 { color: white; text-align: center; margin: 0px; font-weight: normal; width: 270px; font-family: times, serif; font-size: 7px; letter-spacing: 1px; border-top: 1px solid white; border-bottom: 1px solid white; padding: 40px 0px; text-transform: uppercase; }
.hvysl .acnt hr { border: none; height: 1px; background-color: white; width: 260px; }

.hvysl .ad { width: 500px; height: 300px; position: relative; overflow: hidden; border-top: 25px solid #222222; }
.hvysl .ad img { width: 500px!important; height: 300px!important; display: block!imporant; }
.hvysl .ad h1 { z-index: 2; background-color: 542D91; width: 100px; height: 8px; padding: 46px 0px; text-align: center; font-weight: normal; font-size: 7px; text-transform: uppercase; line-height: 8px; letter-spacing: 1px; font-family: Times, serif; color: white; opacity: 0.7; position: absolute; top: 25px; left: 50px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; -webkit-transform:rotate(-7deg); -moz-transform:rotate(-7deg); -o-transform: rotate(-7deg); -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }
.hvysl .ad:hover h1 { opacity: 0; -webkit-transform:rotate(713deg); -moz-transform:rotate(713deg); -o-transform: rotate(713deg); -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }

.hvysl .ad h3 { z-index: 2; background-color: 542D91; width: 100px; height: 24px; padding: 38px 0px; text-align: center;  -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; font-weight: normal; font-size: 7px; text-transform: uppercase; line-height: 12px; letter-spacing: 1px; font-family: Times, serif; -webkit-transform:rotate(-7deg); -moz-transform:rotate(-7deg); -o-transform: rotate(-7deg); color: white; opacity: 0; position: absolute; top: 25px; left: 50px; -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }
.hvysl .ad:hover h3 { opacity: 0.7; -webkit-transform:rotate(713deg); -moz-transform:rotate(713deg); -o-transform: rotate(713deg); -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }

.hvysl .ad .ban { width: 120px; height: 0px; background-color: 222222; -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; position: absolute; top: 0px; left: 40px; opacity: 0.6; }
.hvysl .ad:hover .ban { height: 300px; -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }

.hvysl .ad h2 { font-family: white; font-size: 7px; line-height: 14px; letter-spacing: 1px; width: 100px; margin: 0px; text-transform: uppercase; font-family: Times, serif; position: absolute; left: 50px; bottom: 0px; opacity: 0; -webkit-transition: 0.8s all ease-in-out 0.2s; -moz-transition: 0.2s all ease-in-out 0.2s; -o-transition: 0.8s all ease-in-out 0.2s; font-weight: normal; color: white; }
.hvysl .ad:hover h2 { bottom: 25px; opacity: 0.8; -webkit-transition: 0.8s all ease-in-out 1.4s; -moz-transition: 0.8s all ease-in-out 1.4s; -o-transition: 0.8s all ease-in-out 1.4s; }

.hvysl .ad .content {width: 0px; height: 200px; position: absolute; top: 50px; right: 50px; background-color: white; opacity: 0.7; -webkit-transition: 0.8s all ease-in-out 1s; -moz-transition: 0.2s all ease-in-out 0.2s; -o-transition: 0.8s all ease-in-out 0.2s; }
.hvysl .ad:hover .content { width: 290px; -webkit-transition: 0.8s all ease-in-out 1.4s; -moz-transition: 0.8s all ease-in-out 1.4s; -o-transition: 0.8s all ease-in-out 1.4s; }

.hvysl .ad .txt { color: black; opacity: 0; font-family: Times, serif; font-size: 10px; line-height: 150%; width: 266px; height: 180px; padding-right: 4px; overflow: auto; text-align: justify; -webkit-transition: 0.8s all ease-in-out 0.2s; -moz-transition: 0.2s all ease-in-out 0.2s; -o-transition: 0.8s all ease-in-out 0.2s; position: absolute; top: 60px; right: 60px; }
.hvysl .ad:hover .txt { opacity: 0.9; -webkit-transition: 0.8s all ease-in-out 2.2s; -moz-transition: 0.8s all ease-in-out 1.4s; -o-transition: 0.8s all ease-in-out 1.4s; }
.hvysl .ad .txt::-webkit-scrollbar { width: 4px; background-color: transparent; }
.hvysl .ad .txt::-webkit-scrollbar-thumb { background-color: 222222; }

</style>

<div class="hvysl"><div class="acnt" style="background-image: url(http://imgdepo.com/id/i9115141);"><hr><h1>

line of lyrics

</h1><hr></div><div class="inner">

<div class="ad"><img src="http://imgdepo.com/id/i9115153" /><h1>

one word

</h1><h3>

first <br />
last

</h3><div class="ban"></div><h2>

membergroup <br />
age <br />
playby

</h2><div class="content"></div><div class="txt">

Content.

</div></div>

</div><div class="acnt" style="background-image: url(http://imgdepo.com/id/i9115152);"><hr><h1>

line of lyrics

</h1><hr></div><div class="jscred"><a href="http://code.jfbs.net/index.php?showuser=20" target="_blank">JON SNOW</a></div>