<style type="text/css">

::-webkit-scrollbar {
 width:11px;
 height:7px;}

::-webkit-scrollbar-track-piece {
 background-color:#111; }

::-webkit-scrollbar-thumb {
 background-color:#767B91;
 border:2px solid #111;
 border-right:4px solid #111;
 border-radius:5px; }


body{
 background:#4b504c;
 background-image:url('');
 background-attachment:fixed;
 background-repeat:repeat;
 padding:0;
 margin:0;}

body a{
 text-decoration:none;}

#content{
 position:fixed;
 top:17%;
 left:50%;
 margin-left:-425px;
 width:850px;
 height:auto;
 padding:10px;
 opacity:.9; }

#content li{
 list-style-type:square;
 margin:2px;}


#content a{
 color:#dba0ac;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}

#content a:hover{
 color:#e28178;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}

#content i{
 font-size:11px;
 color:#DA2A05;
}

#content b{
 font-size:11px;
 color:#000;
}

#sideimg img{
 float:right;
 margin-top:-30px;
 width:300px;
 height:auto;
 padding:10px;
 background:#121212;
 background-image:url('');
 border-radius:7px;
}


#title{
 float:right;
 text-align:right;
 margin-top:-44px;
 margin-right:170px;
 width:350px;
 color:#fff;
 line-height:100%;
 text-transform:uppercase;
 font-size:52px;
 letter-spacing:4px;
 font-family: 'Oswald', sans-serif;
 text-shadow:0px 0px 3px #444;
}


#title:first-letter{
 font-weight:700;
 color:#fff;
 text-shadow:0px 0px 3px #444;
 letter-spacing:5px;
 font-size:55px;
}


#intro{
 margin-top:65px;
 margin-left:130px;
 padding:8px;
 text-align:;
 font-family:arial narrow;
 font-weight:bold;
 font-size:12px;
letter-spacing:-1px;
text-transform: uppercase;
line-height:100%;
background-color:#121212;
 color:#fff;
 background-image:url('');
 width:414px;
 height:auto;
}


#info{
 margin-top:20px;
 margin-left:137px;
 margin-left:;
 width:395px;
 height:300px;
 padding:10px;
 font-family:arial narrow;
 font-weight:bold;
 font-size:12px;
letter-spacing:1px;
text-transform: uppercase;
 color:#eee;
 background:#121212;
 background-image:url('');
 font-size:10px;
 line-height:120%;
 overflow:hidden;
 border-radius:3px;
}


#box1{
 float:right;
 margin-top:29px;
 margin-right:19px;
 width:13px;
 height:13px;
 background:#2A324B;
 border-radius:3px;
 box-shadow:0px 0px 3px #333;
}

#box2{
 float:right;
 margin-top:27px;
 margin-right:19px;
 width:15px;
 height:15px;
 background:#767B91;
 box-shadow:0px 0px 3px #333;
 border-radius:3px;
}

#box3{
 float:right;
 margin-top:29px;
 margin-right:19px;
 width:13px;
 height:13px;
 background:#C7CCDB;
 box-shadow:0px 0px 3px #333;
 border-radius:3px;
}

#box4{
 float:right;
 margin-top:27px;
 margin-right:19px;
 width:15px;
 height:15px;
 background:#E1E5EE;
 box-shadow:0px 0px 3px #333;
 border-radius:3px;
}

#box5{
 float:right;
 margin-top:29px;
 margin-right:19px;
 width:13px;
 height:13px;
 background:#fff;
 opacity:.9;
 box-shadow:0px 0px 3px #333;
 border-radius:3px;
}


#pattern_horizontal{
 position:fixed;
 top:19%;
 left:0px;
 height:65px;
 width:100%;
background-color:#121212;
 background-image:url('');
 opacity:;.9;
 z-index:-1;
}

#pattern_vertical{
 position:fixed;
 top:0;
 left:20%;
 height:100%;
 width:50px;
background-color:121212;
 background-image:url('');
 opacity:.9;
 z-index:-2;
}


#border1{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:15px;
background-color:121212;
 background-image:url('');
 opacity:.9;
}

#border2{
 position:fixed;
 top:0;
 left:0;
 width:10px;
 height:100%;
background-color:121212;
 background-image:url('');
 opacity:.9;
}

#border3{
 position:fixed;
 bottom:0;
 left:0;
 width:100%;
 height:15px;
background-color:121212;
 background-image:url('');
 opacity:.9;
}

#border4{
 position:fixed;
 top:0;
 right:0;
 width:10px;
 height:100%;
background-color:121212;
 background-image:url('');
 opacity:.9;
}


#links {
 position:absolute;
 margin-top:130px;
 margin-left:5px;
 width:100px;
 padding:8px;
 text-align:center;
 height:auto;
background-color:121212;
 background-image:url('');
 border-radius:4px;
}

#links .first{
 float:left;
 width: 90px;
 margin:4px 3px;
 padding:2px;
 text-transform:uppercase;
 font-size:9px;
 letter-spacing:1px;
 font-family: 'Noto Sans', sans-serif;
 color:#767B91;
 background:#333;
 border-radius:4px;
 box-shadow:0px 0px 3px #555;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}

#links .first:hover{
 color:#000;
 background:#fff;
 border-radius:6px;
 box-shadow:0px 0px 5px #444;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}

#links .second{
 float:left;
 width: 90px;
 margin:4px 3px;
 padding:2px;
 text-transform:uppercase;
 font-size:9px;
 letter-spacing:1px;
 font-family: 'Noto Sans', sans-serif;
 color:#767B91;
 background:#222;
 border-radius:4px;
 box-shadow:0px 0px 3px #333;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}

#links .second:hover{
 color:#000;
 background:#fff;
 border-radius:6px;
 box-shadow:0px 0px 5px #444;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}




</style>




<div id="border1"></div>
<div id="border2"></div>
<div id="border3"></div>
<div id="border4"></div>


<div id="pattern_horizontal"></div>
<div id="pattern_vertical"></div>

<div id="content">


<div id="sideimg">
<img src="https://s-media-cache-ak0.pinimg.com/736x/d4/00/3b/d4003b6337591a8a90e12285e427ae3a.jpg" />
</div>

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>


<div id="title">☾Pawn<big>☽</big></div>

 <div id="links">

 <a href="#a" class="first">link 0</a>
 <a href="#b" class="first">link 0</a>
 <a href="#c" class="first">link 0</a>
 <a href="#d" class="second">link 0</a>
 <a href="#e" class="second">link 0</a>
 <a href="#f" class="second">link 0</a>
 <a href="#g" class="second">link 0</a>
</div>

<div id="intro">
 <i style="color:#767B91;font-size:12px">Give me a castle, and I will make sure it never falls.</i>
</div>



<div id="info">

<a name="a"></a>
<div style="width: 100%; height:320px;overflow: auto;">


<br>
<i>First name</i>: Abas.<br>
<i>Last name</i>: Pourchet<br>
<i>Species</i>: Human<br>
<i>Age</i>: 30 <br>
<i>Height</i>: Seven foot exactly, a giant.<br>
<i>Weight</i> 320, pure muscle.<br>
<i>Hair color</i>: Black, although shaven.<br>
<i>Eye color</i>: Solid green.<br>
<I>Face</I>: <a target="_blank" href="http://i.picpar.com/7Bfc.jpg " target="_blank">Reference.</a> <br>
<i>Skin tone</i>: Light skinned, rather pale.<br>
<i>Physical structure</i>: Heavily muscular.<br>
<i>Personality traits</i>: Tactical, chilvalrous, fierce.<br>
<i>Profession</I>: Pawn of the Crimson faction
<br>
<br>
<br>
<br>
[Work in progress, most definitely.]





</div>




<a name="b"></a>
<div style="width: 100%; height:320px;overflow: auto;">



Biography <br><br>

Abas was born into a half-noble family. His father was a knight and his mother was a peasant woman. When Abas's mother gave birth to her baby boy, the baby was a few inches larger than the average baby, this was the start of a giant growth. When Abas was 13 years of age, he was already six feet tall, taller than most grown men at this time period. When he hit 15 years of age he was six foot five, something was helping his growth along, no one knew what. When he hit 18 he was seven feet tall, and already a great warrior on the battlefield as most boys who went into the line of soldiering started at 13. His first battle was a small skirmish in the woods. His father and their troop were moving along to meet up with another unit of force. The night they set up camp they were brutally ambushed by a larger force, the boy's father's troops got slaughtered. The ones who were left alive were taken as prisoners, the boy had lost his father that night, to this day he does not remember what he looked like. It was weeks of travel later that the boy was sold to a slave collector who was interested in the boy's size. This slave collector, however, ran fighting rings. It was not long before Abas was made to fight, and fight he did. The experience of fights in the gladiatorial ring lasted from when he was 14 to when he was 17. Three years it took him to gain enough coin for himself to buy his freedom.
<br><br>
Once the now man was free, he decided revenge was worth it, and three nights hence from his freeing, he decimated the entire command structure of the slave collectors. It was a bloody night. He quickly found work again in his line of work, he was soon a soldier under a commander who excelled on the battlefield. It was at this time that Abas had found his weapon of choice through multiple years of fighting, it was a two handed axe. War is where he found his true calling, there on the front lines. Over the years, Abas had collected hundreds of kills for himself, as one would expect with his build in the time. When the giant of a man turned 21 he decided to take a break from war to study with an engineer he had made friends with over the years. It was this bond that he learned everything about a castle's defenses. He studied for five years with weapons training in the middle when he had free time. He had taken a large interest in the idea of how to defend a fortress with what resources were available. When the man was 26 it was his first time to oversee the defenses of a castle. He strategized decently and it wasn't until the very end of the siege that the enemies broke through, although they were later routed out by an allied force coming to help. Never again, Abas thought to himself. Every day afterward he dedicated every minute of his time, even while training to think of new ways of defending. A year later he was tested once more, this time the enemy couldn't seem to breach the inner wall with all they brought.
<br><br>
Some say it is because Abas lived so high in the clouds because of his height that he was so good at defending castles, he had an ariel prespective on most things. They probably weren't wrong.


</div>



<a name="c"></a>
<div style="width: 100%; height:320px;overflow: auto;">

<font color=#FF0000> <b>Equipment and gear.</b>
<br><br>
<b>Armor of the Giants.  <br>
-This armor is of full plate, making it quite good against all forms of attack.<br>
-- This armor is the personal suit of full plate that Abas wears at all time, helmet optional! With this armor upon his body, Abas becomes an absolute monster on the battlefield. <br>
--- This armor is so old that previous legends before wore it, all who were giant in nature. The blessing throughout the ages have been powered on and off, each time a wearer dons this armor, they gain two random abilities with it, as long as they prove their worth to the armor itself. When Abas put his armor on, he was granted two things that complimented his fighting style highly.<br><br>

Spell Negation: This was the very first ability the armor chose for its wearer. With it, any hostile magics that attempt to harm the user, either from the inside or outside seem to fizzle as soon as it reaches him. This allows him to traverse over the landscape without having to worry about being picked off from afar with spells. However, he is still mighty vulnerable via ranged attacks such as archery or siege weapons or even thrown weapons.<br><br>

Force Absorption: This was the second ability given by the armor to its wearer. Whenever a physical attack strikes the suit of armor, the damage will be done, however, the force of impact is absorbed through the armor and used as fuel that is directly pumped into the giant's muscles, giving him an overhaul of strength and speed for a limited time. Repeated strikes to the armor stack upon each other.<br><br>

The Axe of Giants: This is not an enchanted item, nor a special one. This is simply a two-handed axe that is larger than any normal two-handed axe, therefore anyone that isn't a giant and trying to wield it will handle it improperly. <br><br>

A giant dagger that is in a sheath at the small of his back. </font>
</div>







<a name="d"></a>
<div style="width: 100%; height:320px;overflow: auto;">



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>
</div>

<a name="e"></a>
<div style="width: 100%; height:320px;overflow: auto;">
Catapult
</div>

<a name="f"></a>
<div style="width: 100%; height:320px;overflow: auto;">
Trebuchet
</div>

<a name="g"></a>
<div style="width: 100%; height:320px;overflow: auto;">
Ballista
</div>

</div>