page pack "kelly" characters

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- @shayofrp -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

    <style type="text/css">

   /*--body--*/


    body {
    font-style:none;
    background-color:#ddddd1;
    font-family:arial;
    font-size:9px;
    }


    a {
    color:#color;
    text-decoration:none;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    }

    a:hover {
    color:#color;
    text-decoration:none;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    }

    img {
    border:none;
    }

    h1 {
    font-size:10px;
    }

    header{font-size:14px;
    margin-left:2px;
    padding:5px;
    font-family:courier;
    color:#e4e4da;
    background-color:#a4949a;
    z-index:99999;}

   /*--Cursor code--*/


   *, body, a, a:hover {cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png"), auto }

    /*everything*/

    #everything {
    margin-left:350px;
    margin-top:50px;
    }

    /*--title--*/

    #title {
    margin-top:0px;
    padding-bottom:4px;
    margin-left:0px;
    padding:2px;
    width:600px;
    height:100px;
    }

    /*--links--*/

    #links {
    width:490px;
    padding:5px;
    font-family:courier;
    text-transform:uppercase;
    text-align:center;
    margin-top:-25px;
    position:absolute;
    margin-left:0px;
    background-color:#b4bcbc;
    }

    #links a {
    padding:5px;
    font-size:8px;
    letter-spacing:3px;
    color:#ddddd1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }

    #links a:hover {
    color:#fff;
    background-color:#b4bcbc;
    }

    /**characters**/


    }
    #squarething {
    width:200px;
    height:100px;
    background-color:#fff;
padding:10px;
}
    }

    #character {
    width:150px;
    height:20px;
    margin-top:0px;
    margin-left:60px;
    }

    #character img {
    width:150px;
    height:150px;
    padding:2px;
    border:1px solid #b4bcbc;
    }


    #info {
    padding:5px;
    width:145px;
    position:absolute;
    opacity:0;
    font-family:arial;
    font-size:9px;
    background:#b4bcbc;
    text-align:justify;
    color:#fff;
    }

    #squarething:hover #info {
    opacity:0.95;
    width:146px;
    height:146px;
    }

    {CustomCSS}

    </style></head>


<body>


<div id="everything">
<div id="links">
<a href="/">HOME</a>
<a href="/ask">ASK</a>
<a href="http://shayofrp.tumblr.com">CREDIT </a>
</div>

<div id="title"><img src="http://i61.tinypic.com/10xbmo0.gif"></div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<table id="all" border="0" cellpadding="5" cellspacing="1">
<!--first column-->
<td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div></td>

<td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div></td>

<td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div></td>

   <!--second column-->
 <tr>
<td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div></td>

<td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div></td>

<td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div>   </td>

 <!--for another row, copy from here-->
<tr><td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div></td>

<td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div></td>

<td><div id="squarething">
<div id="character">
<div id="info">
<div id="name"><header>NAME</header><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis, elit sed pharetra adipiscing, sem elit vehicula urna, nec ornare tellus turpis tempor erat. Nulla semper varius egestas. Curabitur commodo neque in tempus accumsan. Curabitur sapien dolor, lobortis vitae justo . </div>
</div>
<img width="150px" src="http://i59.tinypic.com/2qidbhh.gif"/>
</div></div></td>
<!--to here-->
</table></div>
</div>

</div>
</body>
</html>