<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gilda+Display' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marvel' rel='stylesheet' type='text/css'>


<style>
.trianglehai {
   width: 0;
   height: 0;
   border-width: 0px 520px 60px 0px;
   border-color: transparent #FFFFFF transparent transparent;
   position: relative;
   top: 0px;
   right: 0px;
   z-index: 2;
   border-style: solid;
}


.trianglehai1 {
   width: 0;
   height: 0;
   border-width: 0px 520px 80px 0px;
   border-color: transparent #6b2acf transparent transparent;
   position: relative;
   top: -60px;
   right: 0px;
   z-index: 1;
   border-style: solid;
}

.trianglehai2 {
   width: 0;
   height: 0;
   border-width: 0px 510px 60px 0px;
   border-color: transparent #FFFFFF transparent transparent;
   border-style: solid;
   top: -60px;
   right: 0px;
   left: 0px; 
   position: relative;
   z-index: 5;
}

.trianglehai20 {
   width: 0;
   height: 0;
   border-width: 0px 510px 60px 0px;
   border-color: transparent #6b2acf transparent transparent;
   border-style: solid;
   top: -43px;
   right: 0px;
   left: 0px; 
   position: relative;
   z-index: 6;
}

.marinatext {
font-family: Oswald;
font-size: 40px;
color: #6b2acf;
text-shadow: 1px 0px #FFFFFF, 3px 0px #1b2f2e;
letter-spacing: 3px;
transform: rotate(-353deg);
-o-transform: rotate(-353deg);
-webkit-transform: rotate(-353deg);
-moz-transform: rotate(-353deg);
-ms-transform: rotate(-353deg);
position: relative;
top: 50px;
left: 90px;
z-index: 7;
}

.marinatexttiny {
font-family: Gilda Display;
font-size: 12px;
color: #114c60;
text-shadow: 1px 0px #FFFFFF;
letter-spacing: 3px;
transform: rotate(-353deg);
-o-transform: rotate(-353deg);
-webkit-transform: rotate(-353deg);
-moz-transform: rotate(-353deg);
-ms-transform: rotate(-353deg);
position: relative;
top: 55px;
left: 10px;
z-index: 8;
}

.marinatexttiny2 {
font-family: Oswald;
text-transform: uppercase;
font-size: 12px;
color: #114c60;
text-shadow: 1px 0px #FFFFFF;
letter-spacing: 1px;
line-height: 100%;
text-align: justify;
padding: 5px;
}

.lonely { font-family: Arial; font-size: 10px; line-height: 100%; letter-spacing: 0px; color: #114c60; }

.lonely p:first-line {
color: #6b2acf;
font-family: Arial;
letter-spacing: -1px; 
font-weight:bold;
text-transform: lowercase;
font-size: 11px; }

.lonelyscroll::-webkit-scrollbar { width: 7px; background: #e8e8e8; }
.lonelyscroll::-webkit-scrollbar-thumb { background: #6b2acf; }
.lonelyscroll::-webkit-scrollbar-corner { background: #6b2acf; } 

</style>

<center>

<div style="background: #ffffff; width: 500px; height: 600px; padding: 10px;">

<div class="marinatext">lonely hearts club</div>

<div class="marinatexttiny">january to december, do you want to be a member? lonely hearts club, do you want to be with somebody like me?</div>

<div class="trianglehai20"></div>
<div class="trianglehai2"></div>

<table>

<tr>

<div style="background: url(http://i7.minus.com/ibk5LGD1AfMAXW.png); width: 500px; height: 300px; margin-top: -120px; z-index: 1;"></div>

</tr>

<tr>

<td width="200px"valign="top">

<div class="marinatexttiny2">laugh track on a tv show, echoes in the dark alone. i've got to be feeling bad, but i'm the reason that you're sad. january to december, do you want to be a member? lonely hearts club, do you want to be with somebody like me?</div>

<table cellspacing="1">

<tbody>

<tr>
<td>
<div style="background: #6b2acf; padding: 10px; width: 60px; height: 15px; font-family: Marvel; text-transform: uppercase; font-size: 11px; color: #FFFFFF; text-align: center;">WORDS</div></td>

<td><div style="background: #6b2acf; padding: 10px; width: 60px; height: 15px; font-family: Marvel; text-transform: uppercase; font-size: 11px; color: #FFFFFF; text-align: center;">TAG</div></td>

</tr>
<tr>

<td><div style="background: #6b2acf; padding: 10px; width: 60px; height: 15px; font-family: Marvel; text-transform: uppercase; font-size: 11px; color: #FFFFFF; text-align: center;"><marquee>notes</marquee></div></td>

<td><div style="background: #6b2acf; padding: 10px; width: 60px; height: 15px; font-family: Marvel; text-transform: uppercase; font-size: 11px; color: #FFFFFF; text-align: center;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=2104"><span style="color: #ffffff">iris @ sp</span></a></div></td>

</tr>

</tbody>

</table>

</td>

<td width="300px">

<div style="padding: 5px; background: #FFFFFF; z-index: 10; border: 1px dotted #6b2acf;">

<div class="lonely lonelyscroll" style="width: 304px; height: 250px; overflow: auto; text-align: justify; background: #f2f2f2; padding: 5px;">

<p>lonely hearts club, do you want to be with somebody like me?
<br>and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. </p></p>

<p>lonely hearts club, do you want to be with somebody like me?
<br>and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. </p>

<p>lonely hearts club, do you want to be with somebody like me?
<br>and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. </p>

<p>lonely hearts club, do you want to be with somebody like me?
<br>and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. </p>

<p>lonely hearts club, do you want to be with somebody like me?
<br>and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. eventually it will scroll. yey! hai! this is supposed to be a text. and it's getting longer, and even longer and longer. keep typing and this bit will get bigger and bigger. you can type as much as you want. </p>

</div>
</div> 

</td></tr>

</table>

</div> 

<div class="trianglehai"></div>


<div class="trianglehai1"></div>

</center>