brief

<style>

@import url(http://fonts.googleapis.com/css?family=Courgette);
@import url(http://fonts.googleapis.com/css?family=Lora:400,700italic);

.pfor {display: none;}
#profile {background: transparent;
border: 0px;}

a { color: black; text-decoration: none;
transition: color 1s;
-webkit-transition: all 1s;}


body {background: black;}

#whole{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;}

#mainbox{position: absolute;
left: 400px;
top: 100px;
height: 603px;
width: 321px;
border: 0px solid green;
z-index: 2;
overflow: hidden;
}

#boxcontainer {
height: 600px;
width: 321px;
border: 0px solid white;
overflow :hidden;
}

#smallbox {
height: 600px;
width: 400px;
border: 0px solid red;
overflow: hidden;

background-image:
url(http://i58.tinypic.com/1zj7r6.jpg);
background-size: 80%;
background-repeat: no-repeat;
}

#subbox {
  left: 0px;
  height: 198px;
  width: 320px;
  border: 0px solid black;
  background: black;
position: absolute;
margin-top: 401px;
}

#subsubbox{
  top: -2px;
  left: 4px;
  bottom: 2px;
  right: 2px;
  background: transparent;
  overflow: auto;
  border: 1.5px solid white;
  color: #CBBC50;
  text-align: center;
position: absolute;
  }


#subboxstat{
  position: absolute;
  height: 123px;
  width: 100px;
  top: 30px;
  border: 0px solid white;
  text-align: left;
  margin-left: 4px;
  }

#subboxname{
  position: absolute;
  height: 20px;
  width: 130px;
  border: 0px solid white;
  left: 100px;
  top: 4px;
  text-align: center;
  font-family: 'Courgette', cursive;
  font-size: 12pt;
  }

#subboxlore{
  position: absolute;
  border: 0px solid white;
  height: 123px;
  left: 110px;
  top: 30px;
  width: 200px;
  text-align: left;
  margin-right: 2px;
  }

#subboxskill {
position: absolute;
width: 300px;
height: 34px;
margin-top: 155px;
margin-left: 5px;
text-align: center
}

#subboxstat, #subboxlore, #subboxskill {
font-family: 'Times New Roman', Times, Arial;
font-size: 10pt; }
#circleselect {
  position: absolute;
  height: 25px;
  width: 70px;
  border: 0px solid white;
  margin-top: 375px;
  margin-left: 135px;
  z-index: 3;
}

#circle1 {
  position: absolute;
  height: 12px;
  width: 12px;
  border-radius: 90px 90px 90px 90px;
  border: 0px solid red;
  top: 5px;
  left: 2px;
}

#circle1:hover {
animation: circleblink 1s infinite;
-webkit-animation: circleblink 1s infinite;
background: #4F9296;}

#circle1.b{
  left:18px; }

#circle1.c{
  left: 35px;}

#circle1.d{
  left: 52px;}

@keyframes circleblink{
  0% {opacity: 0;}
  50% {opacity: .4;}
  100% {opacity: 0;}
}

@-webkit-keyframes circleblink{
  0% {opacity: 0;}
  50% {opacity: .4;}
  100% {opacity: 0;}
  }

#artback {
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
border: 0px solid blue;

background-image:
url(http://i62.tinypic.com/2rmux55.jpg);
background-repeat: no-repeat;
background-size: 100%;
z-index: -1;
}

#phaseback {
  position: absolute;
  left: 427px;
  top: 100px;
  height: 598px;
  width: 300px;
  border: 0px solid white;
  border-radius: 0px 30px 30px 0px;
  background: black;
  opacity: .8;
  z-index: 0;
  animaton: slowblink 1s infinite;;
  -webkit-animation: slowblink 1s infinite;
  transition: left 1s;
  -webkit-transition: left 1s;
}


#phaseback:hover{
  animation: nothing 1s;
  -webkit-animation: nothing 1s;
  left: 706px;
  opacity: 1;
}

@keyframes slowblink{
  0% {opacity: 0;}
  50% {opacity: 1;}
  70% {opacity: 1;}
  100% {opacity: 0;}
}

@-webkit-keyframes slowblink{
  0% {opacity: 0;}
  50% {opacity: 1;}
  70% {opacity: 1;}
  100% {opacity: 0;}
  }


#infoboxes {
  position: absolute;
  left: 20px;
  top: 10px;
  height: 580px;
  width: 270px;
  background: #6C7EA2;
  border-radius: 0px 30px 30px 0px;
  opacity: .8;}

#infocontentline {
  position: absolute;
  height: 580px;
  width: 270px;
  top: 10px;
  left: 20px;
  border: 0px solid red;
  opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s;}

#infocontentline:hover
{ opacity: 1;}

#infocontent {
  position: absolute;
  height: 145px;
  width: 265px;
  border-top: 1px solid black;
  border-bottom: 20px solid black;
  text-align: left;
  opacity: 1;
}

#infocontent.b{
  top: 170px;
}

#infocontent.c{
  top: 340px;
}

#musiclist {
  position: absolute;
  height: 63px;
  width: 265px;
  border: 0px solid red;
  bottom: 0px;
  text-align: left;
}

#musiclist a:hover{
color: #CBBC50;;
text-shadow 2px 2px black;}

#infocontent, #musiclist {
padding-left: 5px;
padding-top: 5px;
color: black;
font-family: 'Lora', serif;
font-size: 8pt;
}


</style>






<div id="whole">

<div id="artback">
</div>


<div id="mainbox">


<a name="boxone"></a>
<div id="boxcontainer">


<div id="circleselect">
<a href=#firstbox><div id="circle1">
</div></a>
<a href=#secondbox><div id="circle1" class="b">
</div></a>
<a href=#thirdbox><div id="circle1" class="c">
</div></a>
<a href=#fourthbox><div id="circle1" class="d">
</div></a>
</div>



<a name="firstbox"></a>
<div id="smallbox">
<div id="subbox">
<div id="subsubbox">

<div id="subboxstat">
Trait: <i>Strength</i><br>
ATK: 5,320<br>
DEF: 4,780<br>
PWR Required: 37
</div>
<div id="subboxname">
Albert
</div>
<div id="subboxlore">
Lore: <i>With the entire order of Sky Knights as my witness, I swear that I'll uphold our values of justice and... though I'm your leader, I'm not very good at these speeches...</i>
</div>
<div id="subboxskill">
Skill: [Avenging Slash]<br>
Effect: Unworldly boost to man/demons ATK (23 %)</div>

</div>
</div>
</div>


<a name="secondbox"></a>

<div id="smallbox" style="background-image: url(http://i61.tinypic.com/25ouhr9.jp);">
<div id="subbox">
<div id="subsubbox">

<div id="subboxstat">
Trait: <i>Strength</i><br>
ATK: 6,384<br>
DEF: 5,736<br>
PWR Required: 37
</div>
<div id="subboxname">
Albert +
</div>
<div id="subboxlore">
Lore: <i>With the entire order of Sky Knights as my witness, I swear that I'll uphold our values of justice and... though I'm your leader, I'm not very good at these speeches...</i>
</div>
<div id="subboxskill">
Skill: [Avenging Slash]<br>
Effect: Unworldly boost to man/demons ATK (23 %)</div>

</div>
</div>
</div>

<a name="thirdbox"></a>
<div id="smallbox" style="background-image: url(http://i58.tinypic.com/ejyo0w.jpg);">
<div id="subbox">
<div id="subsubbox">

<div id="subboxstat">
Trait: <i>Strength</i><br>
ATK: 7,448<br>
DEF: 6,692<br>
PWR Required: 37
</div>
<div id="subboxname">
Albert ++
</div>
<div id="subboxlore">
Lore: <i>With the entire order of Sky Knights as my witness, I swear that I'll uphold our values of justice and... though I'm your leader, I'm not very good at these speeches... </i>
</div>
<div id="subboxskill">
Skill: [Avenging Slash]<br>
Effect: Unworldly boost to man/demons ATK (23 %)</div>

</div>
</div>
</div>

<a name="fourthbox"></a>
<div id="smallbox" style="background-image: url(http://i59.tinypic.com/15s53k6.jpg);">
<div id="subbox">
<div id="subsubbox" style="border-color: #D0BC3F;">

<div id="subboxstat">
Trait: <i>Strength</i><br>
ATK: 9,576<br>
-MAX: 13,300<br>
DEF: 8,604<br>
-MAX: 11,950<br>
PWR Required: 37
</div>
<div id="subboxname">
Sky Knight Albert
</div>
<div id="subboxlore">
Lore:<i> It's my life's mission to make sure the Egg is destroyed and my father's tragedy never occurs again. That's why I started this order. Lend me your swords, Sky Knights!</i>
</div>
<div id="subboxskill">
Skill: [Avenging Slash]<br>
Effect: Unworldly boost to man/demons ATK (23 %)</div>

</div>
</div>
</div>

</div>

<a name="boxtwo"></a>
<div id="boxcontainer">


<div id="circleselect">
<a href=#fifthbox><div id="circle1">
</div></a>
<a href=#sixthbox><div id="circle1" class="b">
</div></a>
<a href=#seventhbox><div id="circle1" class="c">
</div></a>
<a href=#eigthbox><div id="circle1" class="d">
</div></a>
</div>

<a name="fifthbox"></a>
<div id="smallbox" style="background-image: url(http://i60.tinypic.com/2gtuexk.jpg);">
<div id="subbox">
<div id="subsubbox">

<div id="subboxstat">
Trait: <i>Strength</i><br>
ATK: 5,550<br>
DEF: 4,550<br>
PWR Required: 37
</div>
<div id="subboxname">
Albert the Courageous
</div>
<div id="subboxlore">
Lore: <i>Once I have a clean shot at Yurius, my mission will be complete. My father's blood, my friend's blood... they stain my hands with the indelible dye of fate.</i>
</div>
<div id="subboxskill">
Skill: [Lightning Crash]<br>
Effect: Unworldly boost to ATK/DEF (all) (20 %)
</div>

</div>
</div>
</div>



<a name="sixthbox"></a>
<div id="smallbox" style="background-image: url(http://i61.tinypic.com/314cp69.jpgg);">
<div id="subbox">
<div id="subsubbox">

<div id="subboxstat">
Trait: <i>Strength</i><br>
ATK: 6,660<br>
DEF: 5,460<br>
PWR Required: 37
</div>
<div id="subboxname">
Albert the Courageous +
</div>
<div id="subboxlore">
Lore: <i>Without the help of my order mates, I wouldn't be standing here today. I can still remember the days when Yurius was among the most trustworthy of members. A part of me still feels gratitude towards him...</i>
</div>
<div id="subboxskill">
Skill: [Lightning Crash]<br>
Effect: Unworldly boost to ATK/DEF (all) (20 %)
</div>

</div>
</div>
</div>


<a name="seventhbox"></a>
<div id="smallbox" style="background-image: url(http://i57.tinypic.com/2100qcy.jpg);">
<div id="subbox">
<div id="subsubbox">

<div id="subboxstat">
Trait: <i>Strength</i><br>
ATK: 7,770<br>
DEF: 6,370<br>
PWR Required: 37
</div>
<div id="subboxname">
Albert the Courageous ++
</div>
<div id="subboxlore">
Lore: <i>The tragedy would end if my blade were to slide across Yurius' throat. That much I realize. But I can't bring myself to cut the ties that have bound us together for so long.</i>
</div>
<div id="subboxskill">
Skill: [Lightning Crash]<br>
Effect: Unworldly boost to ATK/DEF (all) (20 %)
</div>

</div>
</div>
</div>


<a name="eigthbox"></a>
<div id="smallbox" style="background-image: url(http://i60.tinypic.com/34y1ilk.jpg);">
<div id="subbox">
<div id="subsubbox" style="border-color: #D0BC3F;">

<div id="subboxstat">
Trait: <i>Strength</i><br>
ATK: 9,990<br>
-MAX: 13,870<br>
DEF: 8,190<br>
-MAX: 11,380<br>
PWR Required: 37
</div>
<div id="subboxname">
Hero Commander Albert the Courageous
</div>
<div id="subboxlore">
Lore: <i>I realized that there's only one way to bring an end to this tragedy. I have to take responsibility for what Yurius has done... and resolve the conflict without sullying my hands with any more blades or blood.</i>
</div>
<div id="subboxskill">
Skill: [Lightning Crash]<br>
Effect: Unworldly boost to ATK/DEF (all) (20 %)
</div>

</div>
</div>
</div>


</div>


</div>


<div id="phaseback">
<div id="infoboxes">
</div>
<div id="infocontentline">

<div id="infocontent">
Albert (al-bair) Lilac<br>
Founder of the Order of Sky Knights.
</div>

<div id="infocontent" class="b">
</div>

<div id="infocontent" class="c">
This is a Rage of Bahamut-based character.<br>
Click the orbs for more info and additional images.<br>
Code is mine, art isn't.<br>
<a href=#boxone>Boo.</a><br>
<a href=#boxtwo>Boo.</a>
</div>

<div id="musiclist">
Music.<br>
<a href="http://youtu.be/GKFkQVVQbIw" target="_blank">
x (Bat Outta Hell)</a><br>
<a href="http://youtu.be/jlXrBF5iZ04" target="_blank">
x (Inverse Phase)</a>
</div>