CSS improvements.

application/Controller.php

@@ -10,6 +10,7 @@
     require_once($path["page"] . "Monster_Info_Page.php");
     require_once($path["page"] . "Catalog_Page.php");
     require_once($path["page"] . "Runes_Page.php");
+    require_once($path["page"] . "Fusion_Page.php");
     require_once($path["page"] . "Report_Page.php");
     require_once($path["page"] . "Report_Skillup_Page.php");
     require_once($path["page"] . "Report_Runeupgrade_Page.php");

application/view/catalog.php

@@ -33,96 +33,126 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section id='filters'>
+            <section class='filters'>
+                <h2>
+                    Catalog filters
+                </h2>
                 <form action='/catalog/' method='get'>
-                    <div class='filter'>
-                        <span>Element:</span>
-                        <br/>
+                    <table>
+                        <tr>
+                            <td class='filter'>
+                                <span>Element:</span>
 <?php
-                        $fire_selected = "";
-                        $water_selected = "";
-                        $wind_selected = "";
-                        $light_selected = "";
-                        $dark_selected = "";
-                        switch (strtoupper($page->filters["element"])){
-                            case "FIRE":
-                                $fire_selected = "selected='selected'";
-                                break;
-                            case "WATER":
-                                $water_selected = "selected='selected'";
-                                break;
-                            case "WIND":
-                                $wind_selected = "selected='selected'";
-                                break;
-                            case "LIGHT":
-                                $light_selected = "selected='selected'";
-                                break;
-                            case "DARK":
-                                $dark_selected = "selected='selected'";
-                                break;
-                        }
+                                $fire_selected = "";
+                                $water_selected = "";
+                                $wind_selected = "";
+                                $light_selected = "";
+                                $dark_selected = "";
+                                switch (strtoupper($page->filters["element"])){
+                                    case "FIRE":
+                                        $fire_selected = "selected='selected'";
+                                        break;
+                                    case "WATER":
+                                        $water_selected = "selected='selected'";
+                                        break;
+                                    case "WIND":
+                                        $wind_selected = "selected='selected'";
+                                        break;
+                                    case "LIGHT":
+                                        $light_selected = "selected='selected'";
+                                        break;
+                                    case "DARK":
+                                        $dark_selected = "selected='selected'";
+                                        break;
+                                }
 ?>
-                        <select name='element' id='filter_type'>
-                            <option value=''>All</option>
-                            <option value='Fire' <?=$fire_selected?>>Fire</option>
-                            <option value='Water' <?=$water_selected?>>Water</option>
-                            <option value='Wind' <?=$wind_selected?>>Wind</option>
-                            <option value='Light' <?=$light_selected?>>Light</option>
-                            <option value='Dark' <?=$dark_selected?>>Dark</option>
-                        </select>
-                    <div class='filter'>
-                        <span>Name:</span>
-                        <br/>
-                        <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
-                    </div>
-                    <div class='filter' id='filter_stars'>
-                        <span>Min. stars:</span>
-                        <input type='number' name='min_stars' id='filter_stars_min' min='1' max='5' value='<?=$page->filters["min_stars"]?>'/>
-                        <br/>
-                        <span>Max. stars:</span>
-                        <input type='number' name='max_stars' id='filter_stars_max' min='1' max='5' value='<?=$page->filters["max_stars"]?>'/>
-                    </div>
+                                <select name='element' id='filter_type'>
+                                    <option value=''>All</option>
+                                    <option value='Fire' <?=$fire_selected?>>Fire</option>
+                                    <option value='Water' <?=$water_selected?>>Water</option>
+                                    <option value='Wind' <?=$wind_selected?>>Wind</option>
+                                    <option value='Light' <?=$light_selected?>>Light</option>
+                                    <option value='Dark' <?=$dark_selected?>>Dark</option>
+                                </select>
+                            </td>
+                            <td class='filter'>
+                                <span>Name:</span>
+                                <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
+                            </td>
+                            <td class='filter' id='filter_stars'>
+                                <span>Min. stars:</span>
+                                <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
+                                <br/>
+                                <span>Max. stars:</span>
+                                <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
+                            </td>
+                        </tr>
+                    </table>
                     <div id='filter_apply'>
                         <input type='submit' value='Apply'/>
                     </div>
                 </form>
             </section> <!-- #filters -->
-            <section id='catalog'>
-            	<article>
+            <section class='list'>
+                <h2>
+                    Catalog
+                </h2>
+                <article>
 <?php
+                    $element = "";
                     foreach ($page->monsters as $mon){
+                        if ($mon->element != $element){
+                            if ($element != ""){
 ?>
-                    
+                                </article>
+                                <article>
 <?php
-                        if (strlen($mon->awakens_to) == 0){
+                            }
+                            $element = $mon->element;
+                        }
+                        if ($mon->awakens_from == "" && $mon->awakens_to == ""){
                             // No to, no from, silver monster.
-                            $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                            $star_class ="star_silver";
                             $mon_title = $mon->element . " " . $mon->name;
                         }
-                        else{
+                        elseif ($mon->awakens_from =! "" && $mon->awakens_to == ""){
+                            // Already awakened
+                            if ($mon->base_stars - $mon->natural_stars == 1){
+                                // Normal awaken.
+                                $star_class ="star_purple";
+                            }
+                            else{
+                                // Second awaken.
+                                $star_class ="star_red";
+                            }
+                            $mon_title = $mon->name;
+                        }
+                        elseif ($mon->awakens_to =! ""){
                             // Awakeable.
-                            $star_src = $path["img"]["layout"] . "icon/star.png";
+                            $star_class ="star_gold";
                             $mon_title = $mon->element . " " . $mon->name;
                         }
 ?>
                         <div class='monster'>
                             <a href='/monster_info/<?=$mon->id?>'>
-                                <span class='stars'>
+                                <div class='monster_panel'>
+                                    <span class='stars'>
 <?php
-                                    for ($i = 0; $i < $mon->natural_stars; $i ++){
+                                        for ($i = 0; $i < $mon->natural_stars; $i ++){
 ?>
-                                        <img class='star' src='<?=$star_src?>'/>
+                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
-                                    }
+                                        }
 ?>
-                                </span>
-                                <img title='<?=$mon_title?>' class='monster border_<?=$mon->element?>' src='<?=$mon->get_image()?>'/>
+                                    </span>
+                                    <img title='<?=$mon_title?>' class='monster border_<?=$mon->element?>' src='<?=$mon->get_image()?>'/>
+                                </div>
                             </a>
                         </div>
 <?php
                     }
 ?>
-				</article>
+                </article>
             </section> <!-- #catalog -->
 
 <?php

application/view/fusion.php

@@ -33,48 +33,52 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <section>
-            <h3>
+        <section class='content'>
+            <h2>
                 Fusion
-            </h3>
+            </h2>
 <?php
             foreach ($page->fusion as $fusion){
 ?>
                 <article>
                     <div class='f5'>
-                        <img title='<?=$fusion->product->name?>' class='monster_image border_<?=$fusion->product->element?>' src='<?=$fusion->product->get_image()?>'/>
-                        <div class='details'>
-                            <h4><?=$fusion->product->name?></h4>
-                                <span class='stars'>
+                        <div class='box'>
+                            <div class='monster_panel'>
+                                <img title='<?=$fusion->product->name?>' class='monster border_<?=$fusion->product->element?>' src='<?=$fusion->product->get_image()?>'/>
+                            </div>
+                            <div class='details'>
+                                <h4><?=$fusion->product->name?></h4>
+                                    <span class='stars'>
 <?php
-                                    for ($i = 0; $i < $fusion->stars; $i ++){
+                                        for ($i = 0; $i < $fusion->stars; $i ++){
 ?>
-                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                            <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
-                                    }
+                                        }
 ?>
-                                </span>
-                        </div> <!-- #details -->
+                                    </span>
+                            </div> <!-- #details -->
+                        </div> <!-- box -->
                         <div class='ingredients'>
 <?php
                             $num0 = 0;
                             foreach ($fusion->fusion as $sub_fusion){
 ?>
                                 <div class='f4'>
-                                    <table>
+                                    <table class='box'>
                                         <tr>
                                             <td class='awaken'>
-                                                <div>
-                                                    <img title='<?=$sub_fusion->product_awaken->name?>' class='monster_image border_<?=$sub_fusion->product_awaken->element?>' src='<?=$sub_fusion->product_awaken->get_image()?>'/>
+                                                <div class='monster_panel'>
                                                     <span class='stars'>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
                                                     </span>
+                                                    <img title='<?=$sub_fusion->product_awaken->name?>' class='monster border_<?=$sub_fusion->product_awaken->element?>' src='<?=$sub_fusion->product_awaken->get_image()?>'/>
                                                     <span class='level'>
-                                                        Lv. 35
+                                                        35
                                                     </span>
                                                     <h4><?=$sub_fusion->product_awaken->name?></h4>
                                                 </div>
@@ -94,19 +98,19 @@
 ?>
                                                         </td>
                                             <td class='unawaken'>
-                                                <div>
-                                                    <img title='<?=$sub_fusion->product->name?>' class='monster_image border_<?=$sub_fusion->product->element?>' src='<?=$sub_fusion->product->get_image()?>'/>
+                                                <div class='monster_panel'>
                                                     <span class='stars'>
 <?php
                                                         for ($i = 0; $i < $sub_fusion->product->base_stars; $i ++){
 ?>
-                                                            <img class='star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                            <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
                                                         }
 ?>
                                                     </span>
+                                                    <img title='<?=$sub_fusion->product->name?>' class='monster border_<?=$sub_fusion->product->element?>' src='<?=$sub_fusion->product->get_image()?>'/>
                                                     <span class='level'>
-                                                        Lv. 1
+                                                        1
                                                     </span>
                                                     <h4><?=$sub_fusion->product->name?></h4>
                                                 </div>
@@ -119,19 +123,19 @@
                                         foreach ($sub_fusion->ingredient as $sub_monster){
 ?>
                                             <div class='f3'>
-                                                <table>
+                                                <table class='box'>
                                                     <tr>
                                                         <td class='awaken'>
-                                                            <div>
-                                                                <img title='<?=$sub_monster->name?>' class='monster_image border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
+                                                            <div class='monster_panel'>
                                                                 <span class='stars'>
-                                                                    <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                                    <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                                    <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                                    <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
                                                                 </span>
+                                                                <img title='<?=$sub_monster->name?>' class='monster border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
                                                                 <span class='level'>
-                                                                    Lv. 30
+                                                                    30
                                                                 </span>
                                                                 <h4><?=$sub_monster->name?></h4>
                                                             </div>
@@ -151,19 +155,19 @@
 ?>
                                                         </td>
                                                         <td class='unawaken'>
-                                                            <div>
-                                                                <img title='<?=$sub_fusion->ingredient_unawaken[$num]->name?>' class='monster_image border_<?=$sub_fusion->ingredient_unawaken[$num]->element?>' src='<?=$sub_fusion->ingredient_unawaken[$num]->get_image()?>'/>
+                                                            <div class='monster_panel'>
                                                                 <span class='stars'>
 <?php
                                                                     for ($i = 0; $i < $sub_fusion->ingredient_unawaken[$num]->base_stars; $i ++){
 ?>
-                                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
                                                                     }
 ?>
                                                                 </span>
+                                                                <img title='<?=$sub_fusion->ingredient_unawaken[$num]->name?>' class='monster border_<?=$sub_fusion->ingredient_unawaken[$num]->element?>' src='<?=$sub_fusion->ingredient_unawaken[$num]->get_image()?>'/>
                                                                 <span class='level'>
-                                                                    Lv. 1
+                                                                    1
                                                                 </span>
                                                                 <h4><?=$sub_fusion->ingredient_unawaken[$num]->name?></h4>
 
@@ -184,20 +188,20 @@
                             foreach ($fusion->ingredient as $sub_monster){
 ?>
                                 <div class='f4'>
-                                    <table>
+                                    <table class='box'>
                                         <tr>
                                             <td class='awaken'>
-                                                <div>
-                                                    <img title='<?=$sub_monster->name?>' class='monster_image border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
+                                                <div class='monster_panel'>
                                                     <span class='stars'>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
-                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
                                                     </span>
+                                                    <img title='<?=$sub_monster->name?>' class='monster border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
                                                     <span class='level'>
-                                                        Lv. 35
+                                                        35
                                                     </span>
                                                     <h4><?=$sub_monster->name?></h4>
                                                 </div>
@@ -217,19 +221,19 @@
 ?>
                                             </td>
                                             <td class='unawaken'>
-                                                <div>
-                                                    <img title='<?=$fusion->ingredient_unawaken[$num]->name?>' class='monster_image border_<?=$fusion->ingredient_unawaken[$num]->element?>' src='<?=$fusion->ingredient_unawaken[$num]->get_image()?>'/>
+                                                <div class='monster_panel'>
                                                     <span class='stars'>
 <?php
                                                         for ($i = 0; $i < $fusion->ingredient_unawaken[$num]->base_stars; $i ++){
 ?>
-                                                            <img class='star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                            <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
                                                         }
 ?>
                                                     </span>
+                                                    <img title='<?=$fusion->ingredient_unawaken[$num]->name?>' class='monster border_<?=$fusion->ingredient_unawaken[$num]->element?>' src='<?=$fusion->ingredient_unawaken[$num]->get_image()?>'/>
                                                     <span class='level'>
-                                                        Lv. 1
+                                                        1
                                                     </span>
                                                     <h4><?=$fusion->ingredient_unawaken[$num]->name?></h4>
 

application/view/monster.php

@@ -33,7 +33,7 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <section id='monster'>
+        <section class='content'>
 <?php
             if ($page->monster->monster->awakens_from == "" && $page->monster->monster->awakens_to != ""){
                 // No to, no from, silver monster.

application/view/monster_info.php

@@ -33,41 +33,43 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <section id='monster'>
+        <section class='content'>
 <?php
             for ($i = 0; $i < 3; $i ++){
                 if ($page->monster[$i] != null){
                     if ($i == 0 && monster[1] == null){
                         // Silver monster.
-                        $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                         $star_class ="star_silver";
                         $mon_title = $page->monster[$i]->element . " " . $page->monster[$i]->name;
                     }
                     elseif ($i == 0 && monster[1] != null){
                         // Gold monster.
-                        $star_src = $path["img"]["layout"] . "icon/star.png";
+                        $star_class ="star_gold";
                         $mon_title = $page->monster[$i]->element . " " . $page->monster[$i]->name;
                     }
                     elseif ($i == 1){
                         // Awakened monster.
-                        $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                         $star_class ="star_purple";
                         $mon_title = $page->monster[$i]->name;
                     }
                     elseif ($i == 2){
                         // Second awakened.
-                        $star_src = $path["img"]["layout"] . "icon/star_aw2.png";
-                         $mon_title = $page->monster[$i]->name;
+                        $star_class ="star_red";
+                        $mon_title = $page->monster[$i]->name;
                     }
 ?>
                     <article class='stage'>
                         <div class='profile'>
-                            <img class='monster_image' title='<?=$mon_title?>' class='border_<?=$page->monster[$i]->element?>' src='<?=$page->monster[$i]->get_image()?>'/>
+                            <div class='monster_panel'>
+                                <img class='monster_image' title='<?=$mon_title?>' class='monster border_<?=$page->monster[$i]->element?>' src='<?=$page->monster[$i]->get_image()?>'/>
+                            </div>
                             <div class='details'>
                                 <h4><?=$mon_title?></h4>
                                 <span class='stars'>
 <?php
                                     for ($j = 0; $j < $page->monster[$i]->base_stars; $j ++){
 ?>
-                                        <img class='star' src='<?=$star_src?>'/>
+                                        <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
                                     }
 ?>

application/view/monsters.php

@@ -33,116 +33,132 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section id='filters'>
+            <section class='filters'>
+                <h2>
+                    Monster filters
+                </h2>
                 <form action='/monsters/' method='get'>
-                    <div class='filter'>
-                        <span>Element:</span>
-                        <br/>
+                    <table>
+                        <tr>
+                            <td class='filter'>
+                                <span>Element:</span>
 <?php
-                        $fire_selected = "";
-                        $water_selected = "";
-                        $wind_selected = "";
-                        $light_selected = "";
-                        $dark_selected = "";
-                        switch (strtoupper($page->filters["element"])){
-                            case "FIRE":
-                                $fire_selected = "selected='selected'";
-                                break;
-                            case "WATER":
-                                $water_selected = "selected='selected'";
-                                break;
-                            case "WIND":
-                                $wind_selected = "selected='selected'";
-                                break;
-                            case "LIGHT":
-                                $light_selected = "selected='selected'";
-                                break;
-                            case "DARK":
-                                $dark_selected = "selected='selected'";
-                                break;
-                        }
+                                $fire_selected = "";
+                                $water_selected = "";
+                                $wind_selected = "";
+                                $light_selected = "";
+                                $dark_selected = "";
+                                switch (strtoupper($page->filters["element"])){
+                                    case "FIRE":
+                                        $fire_selected = "selected='selected'";
+                                        break;
+                                    case "WATER":
+                                        $water_selected = "selected='selected'";
+                                        break;
+                                    case "WIND":
+                                        $wind_selected = "selected='selected'";
+                                        break;
+                                    case "LIGHT":
+                                        $light_selected = "selected='selected'";
+                                        break;
+                                    case "DARK":
+                                        $dark_selected = "selected='selected'";
+                                        break;
+                                }
 ?>
-                        <select name='element' id='filter_type'>
-                            <option value=''>All</option>
-                            <option value='Fire' <?=$fire_selected?>>Fire</option>
-                            <option value='Water' <?=$water_selected?>>Water</option>
-                            <option value='Wind' <?=$wind_selected?>>Wind</option>
-                            <option value='Light' <?=$light_selected?>>Light</option>
-                            <option value='Dark' <?=$dark_selected?>>Dark</option>
-                        </select>
-                    </div>
-                    <div class='filter'>
-                        <span>Name:</span>
-                        <br/>
-                        <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
-                    </div>
-                    <div class='filter' id='filter_stars'>
-                        <span>Min. stars:</span>
-                        <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
-                        <br/>
-                        <span>Max. stars:</span>
-                        <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
-                    </div>
-                    <div class='filter'>
+                                <select name='element' id='filter_type'>
+                                    <option value=''>All</option>
+                                    <option value='Fire' <?=$fire_selected?>>Fire</option>
+                                    <option value='Water' <?=$water_selected?>>Water</option>
+                                    <option value='Wind' <?=$wind_selected?>>Wind</option>
+                                    <option value='Light' <?=$light_selected?>>Light</option>
+                                    <option value='Dark' <?=$dark_selected?>>Dark</option>
+                                </select>
+                            </td>
+                            <td class='filter'>
+                                <span>Name:</span>
+                                <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
+                            </td>
+                            <td class='filter' id='filter_stars'>
+                                <span>Min. stars:</span>
+                                <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
+                                <br/>
+                                <span>Max. stars:</span>
+                                <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
+                            </td>
+                            <td class='filter'>
 <?php
-                        $checked = "";
-                        if ($page->filters["in_storage"]){
-                            $checked = "checked";
-                        }
+                                $checked = "";
+                                if ($page->filters["in_storage"]){
+                                    $checked = "checked";
+                                }
 ?>
-                        <input type='checkbox' name='in_storage' <?=$checked?>/>
-                        Show monsters in storage
-                        <br/>
+                                <input type='checkbox' name='in_storage' <?=$checked?>/>
+                                Show monsters in storage
+                                <br/>
 <?php
-                        $checked = "";
-                        if ($page->filters["without_runes"]){
-                            $checked = "checked";
-                        }
+                                $checked = "";
+                                if ($page->filters["without_runes"]){
+                                    $checked = "checked";
+                                }
 ?>
-                        <input type='checkbox' name='without_runes' <?=$checked?>/>
-                        Show monsters without runes
-                    </div>
+                                <input type='checkbox' name='without_runes' <?=$checked?>/>
+                                Show monsters without runes
+                            </td>
+                        </tr>
+                    </table>
                     <div id='filter_apply'>
                         <input type='submit' value='Apply'/>
                     </div>
                 </form>
             </section> <!-- #filters -->
-            <section id='list'>
+            <section class='list'>
+                <h2>
+                    Monsters
+                </h2>
                 <article>
 <?php
                     foreach ($page->monsters as $mon){
                         if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
                             // No to, no from, silver monster.
-                            $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                            $star_class ="star_silver";
                             $mon_title = $mon->monster->element . " " . $mon->monster->name;
                         }
                         elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
-                            // Already awakened.
-                            $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                            // Already awakened
+                            if ($mon->monster->base_stars - $mon->monster->natural_stars == 1){
+                                // Normal awaken.
+                                $star_class ="star_purple";
+                            }
+                            else{
+                                // Second awaken.
+                                $star_class ="star_red";
+                            }
                             $mon_title = $mon->monster->name;
                         }
                         elseif ($mon->monster->awakens_to =! ""){
                             // Awakeable.
-                            $star_src = $path["img"]["layout"] . "icon/star.png";
+                            $star_class ="star_gold";
                             $mon_title = $mon->monster->element . " " . $mon->monster->name;
                         }
-                        // TODO: Handle second awakenings
 ?>
                         <div class='monster'>
                             <a href='/monster/<?=$mon->id?>'>
-                                <span class='stars'>
+                                <div class='monster_panel'>
+                                    <span class='stars'>
 <?php
-                                    for ($i = 0; $i < $mon->stars; $i ++){
+                                        for ($i = 0; $i < $mon->stars; $i ++){
 ?>
-                                        <img class='star' src='<?=$star_src?>'/>
+                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
-                                    }
+                                        }
 ?>
-                                </span>
-                                <img title='<?=$mon_title?>' class='monster border_<?=$mon->monster->element?>' src='<?=$mon->monster->get_image()?>'/>
-                                <span class='level'>
-                                    Lv. <?=$mon->level?>
-                                </span>
+                                    </span>
+                                    <img title='<?=$mon_title?>' class='monster border_<?=$mon->monster->element?>' src='<?=$mon->monster->get_image()?>'/>
+                                    <span class='level'>
+                                        <?=$mon->level?>
+                                    </span>
+                                </div>
                             </a>
                             <div class='monster_tooltip'>
                                 <h4>

application/view/report.php

@@ -33,12 +33,12 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <section id='reports'>
-            <article class='report'>
+        <section class='content report'>
+            <h2>
+                Pending skill-ups
+            </h2>
+            <article>
                 <form action='/report/skillup/' method='get'>
-                    <h3>
-                        Pending skill-ups
-                    </h3>
                     <img alt=' ' src='<?=$path["img"]["content"]?>monster/0115.png'> <!-- Devilmon image -->
                     <p>
                         Shows a list of the monstes in need of skilling-up
@@ -72,11 +72,13 @@
                     </div>
                 </form>
             </article>
+        </section>
+        <section class='content report'>
+            <h2>
+                Runes to replace
+            </h2>
             <article class='report'>
                 <form action='/report/runeupgrade/' method='get'>
-                    <h3>
-                        Runes to replace
-                    </h3>
                     <img alt=' ' src='<?=$path["img"]["layout"]?>rune/base.png'> <!-- Devilmon image -->
                     <p>
                         Shows monsters with runes that can be upgraded.

application/view/report_runeupgrade.php

@@ -33,98 +33,114 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section id='filters'>
-                <form action='/report/runeupgrade/' method='get'>
-                    <div class='filter' id='filter_stars'>
-                        <span>Min. stars:</span>
-                        <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
-                        <br/>
-                        <span>Max. stars:</span>
-                        <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
-                    </div>
-                    <div class='filter'>
+        <section class='filters'>
+            <h2>
+                <span>
+                    Monster filters
+                </span>
+            </h2>
+            <form action='/report/runeupgrade/' method='get'>
+                <div class='filter' id='filter_stars'>
+                    <span>Min. stars:</span>
+                    <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
+                    <br/>
+                    <span>Max. stars:</span>
+                    <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
+                </div>
+                <div class='filter'>
 <?php
                         $checked = "";
                         if ($page->filters["in_storage"]){
                             $checked = "checked";
                         }
 ?>
-                        <input type='checkbox' name='in_storage' <?=$checked?>/>
-                        Show monsters in storage
-                    </div>
-                    <div id='filter_apply'>
-                        <input type='submit' value='Apply'/>
-                    </div>
-                </form>
-            </section> <!-- #filters -->
-            <section id='list'>
+                    <input type='checkbox' name='in_storage' <?=$checked?>/>
+                    Show monsters in storage
+                </div>
+                <div id='filter_apply'>
+                    <input type='submit' value='Apply'/>
+                </div>
+            </form>
+        </section> <!-- #filters -->
 <?php
-                foreach ($page->upgrades as $upgrade){
-                    if ($upgrade["monster"]->monster->awakens_from == "" && $upgrade["monster"]->monster->awakens_to == ""){
-                        // No to, no from, silver monster.
-                        $star_src = $path["img"]["layout"] . "icon/star_silver.png";
-                        $mon_title = $upgrade["monster"]->monster->element . " " . $upgrade["monster"]->monster->name;
-                    }
-                    elseif ($upgrade["monster"]->monster->awakens_from =! "" && $upgrade["monster"]->monster->awakens_to == ""){
-                        // Already awakened.
-                        $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-                        $mon_title = $upgrade["monster"]->monster->name;
+            foreach ($page->upgrades as $upgrade){
+                if ($upgrade["monster"]->monster->awakens_from == "" && $upgrade["monster"]->monster->awakens_to == ""){
+                    // No to, no from, silver monster.
+                    $star_class ="star_silver";
+                    $mon_title = $upgrade["monster"]->monster->element . " " . $upgrade["monster"]->monster->name;
+                }
+                elseif ($upgrade["monster"]->monster->awakens_from =! "" && $upgrade["monster"]->monster->awakens_to == ""){
+                    // Already awakened
+                    if ($upgrade["monster"]->monster->base_stars - $upgrade["monster"]->monster->natural_stars == 1){
+                        // Normal awaken.
+                        $star_class ="star_purple";
                     }
-                    elseif ($upgrade["monster"]->monster->awakens_to =! ""){
-                        // Awakeable.
-                        $star_src = $path["img"]["layout"] . "icon/star.png";
-                        $mon_title = $upgrade["monster"]->monster->element . " " . $upgrade["monster"]->monster->name;
+                    else{
+                        // Second awaken.
+                        $star_class ="star_red";
                     }
-                    // TODO: Handle second awakenings
+                    $mon_title = $upgrade["monster"]->monster->name;
+                }
+                elseif ($upgrade["monster"]->monster->awakens_to =! ""){
+                    // Awakeable.
+                    $star_class ="star_gold";
+                    $mon_title = $upgrade["monster"]->monster->element . " " . $upgrade["monster"]->monster->name;
+                }
 ?>
-                    <article>
-                        <div class='monster'>
-                            <div class='profile'>
-                                <img id='monster_image' title='<?=$mon_title?>' class='border_<?=$upgrade["monster"]->monster->element?>' src='<?=$upgrade["monster"]->monster->get_image()?>'/>
-                                <div id='details'>
-                                    <h1><?=$mon_title?></h1>
-                                    <span class='stars'>
+            <section class='content'>
+                <h2>
+                    <span>
+                        <?=$mon_title?>
+                    </span>
+                </h2>
+                <article>
+                    <div class='monster'>
+                        <div class='profile'>
+                            <div class='monster_panel'>
+                                <span class='stars'>
 <?php
                                         for ($i = 0; $i < $upgrade["monster"]->stars; $i ++){
 ?>
-                                            <img class='star' src='<?=$star_src?>'/>
+                                        <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
                                         }
 ?>
-                                    </span>
-                                    <span class='level'>
-                                        Lv. <?=$upgrade["monster"]->level?>
-                                    </span>
-                                </div> <!-- #details -->
-                            </div> <!-- .profile -->
-                        </div>
+                                </span>
+                                <img title='<?=$mon_title?>' class='monster border_<?=$upgrade["monster"]->monster->element?>' src='<?=$upgrade["monster"]->monster->get_image()?>'/>
+                                <span class='level'>
+                                    Lv. <?=$upgrade["monster"]->level?>
+                                </span>
+                            </div>
+                        </div> <!-- .profile -->
+                    </div>
+                    <div class='monster_runes'>
 <?php
                         foreach ($upgrade["upgrade"] as $rupgrade){
 ?>
-                            <table class='rune'>
-                                <tr>
-                                    <td class='icon'>
-                                        <div class='rune_panel rune_slot_<?=$rupgrade["rune"]->slot?> rune_level_<?=$rupgrade["rune"]->level?> rune_quality_<?=$rupgrade["rune"]->quality?> rune_original_quality_<?=$rupgrade["rune"]->original_quality?>'>
-                                            <img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
-                                            <img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$rupgrade["rune"]->type?>.png'/>
-                                            <span class='rune_stars'>
+                        <table class='rune'>
+                            <tr>
+                                <td class='icon'>
+                                    <div class='rune_panel rune_slot_<?=$rupgrade["rune"]->slot?> rune_level_<?=$rupgrade["rune"]->level?> rune_quality_<?=$rupgrade["rune"]->quality?> rune_original_quality_<?=$rupgrade["rune"]->original_quality?>'>
+                                        <img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
+                                        <img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$rupgrade["rune"]->type?>.png'/>
+                                        <span class='rune_stars'>
 <?php
                                                 for ($i = 0; $i < $rupgrade["rune"]->stars; $i ++){
 ?>
-                                                    <img class='star' src='<?=$path["img"]["layout"] . "icon/star_silver.png"?>'/>
+                                                <img class='star' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
                                                 }
 ?>
-                                            </span>
-                                            <span class='rune_level'>
-                                                <?=$rupgrade["rune"]->level?>
-                                            </span>
-                                        </div> <!-- .rune_panel -->
-                                    </td>
-                                    <td class='stats'>
-                                        <table>
-                                            <tr class='main_stat'>
-                                                <td class='stat'>
+                                        </span>
+                                        <span class='rune_level'>
+                                            <?=$rupgrade["rune"]->level?>
+                                        </span>
+                                    </div> <!-- .rune_panel -->
+                                </td>
+                                <td class='stats'>
+                                    <table>
+                                        <tr class='main_stat'>
+                                            <td class='stat'>
 <?php
                                                     if (strpos($rupgrade["rune"]->main_stat, "%") !== false){
                                                         $stat_name = str_replace("%", "", $rupgrade["rune"]->main_stat);
@@ -135,14 +151,14 @@
                                                         $stat_value = "+ " . $rupgrade["rune"]->main_stat_value;
                                                     }
 ?>
-                                                    <?=$stat_name?>
-                                                </td>
-                                                <td class='value'>
-                                                    <?=$stat_value?>
-                                                <td>
-                                            </tr>
-                                            <tr class='innate_stat'>
-                                                <td class='stat'>
+                                                <?=$stat_name?>
+                                            </td>
+                                            <td class='value'>
+                                                <?=$stat_value?>
+                                            <td>
+                                        </tr>
+                                        <tr class='innate_stat'>
+                                            <td class='stat'>
 <?php
                                                     if (strlen($rupgrade["rune"]->innate_stat) == 0){
                                                         $stat_name = "&nbsp;";
@@ -157,14 +173,14 @@
                                                         $stat_value = "+ " . $rupgrade["rune"]->innate_stat_value;
                                                     }
 ?>
-                                                    <?=$stat_name?>
-                                                </td>
-                                                <td class='value'>
-                                                    <?=$stat_value?>
-                                                <td>
-                                            </tr>
-                                            <tr class=substat>
-                                                <td class='stat'>
+                                                <?=$stat_name?>
+                                            </td>
+                                            <td class='value'>
+                                                <?=$stat_value?>
+                                            <td>
+                                        </tr>
+                                        <tr class=substat>
+                                            <td class='stat'>
 <?php
                                                     if (strlen($rupgrade["rune"]->substat_1) == 0){
                                                         $stat_name = "&nbsp;";
@@ -185,14 +201,14 @@
                                                         $craft = "";
                                                     }
 ?>
-                                                    <?=$stat_name?>
-                                                </td>
-                                                <td class='value <?=$craft?>'>
-                                                    <?=$stat_value?>
-                                                <td>
-                                            </tr>
-                                            <tr class=substat>
-                                                <td class='stat'>
+                                                <?=$stat_name?>
+                                            </td>
+                                            <td class='value <?=$craft?>'>
+                                                <?=$stat_value?>
+                                            <td>
+                                        </tr>
+                                        <tr class=substat>
+                                            <td class='stat'>
 <?php
                                                     if (strlen($rupgrade["rune"]->substat_2) == 0){
                                                         $stat_name = "&nbsp;";
@@ -213,14 +229,14 @@
                                                         $craft = "";
                                                     }
 ?>
-                                                    <?=$stat_name?>
-                                                </td>
-                                                <td class='value <?=$craft?>'>
-                                                    <?=$stat_value?>
-                                                <td>
-                                            </tr>
-                                            <tr class=substat>
-                                                <td class='stat'>
+                                                <?=$stat_name?>
+                                            </td>
+                                            <td class='value <?=$craft?>'>
+                                                <?=$stat_value?>
+                                            <td>
+                                        </tr>
+                                        <tr class=substat>
+                                            <td class='stat'>
 <?php
                                                     if (strlen($rupgrade["rune"]->substat_3) == 0){
                                                         $stat_name = "&nbsp;";
@@ -241,14 +257,14 @@
                                                         $craft = "";
                                                     }
 ?>
-                                                    <?=$stat_name?>
-                                                </td>
-                                                <td class='value <?=$craft?>'>
-                                                    <?=$stat_value?>
-                                                <td>
-                                            </tr>
-                                            <tr class=substat>
-                                                <td class='stat'>
+                                                <?=$stat_name?>
+                                            </td>
+                                            <td class='value <?=$craft?>'>
+                                                <?=$stat_value?>
+                                            <td>
+                                        </tr>
+                                        <tr class=substat>
+                                            <td class='stat'>
 <?php
                                                     if (strlen($rupgrade["rune"]->substat_4) == 0){
                                                         $stat_name = "&nbsp;";
@@ -269,15 +285,15 @@
                                                         $craft = "";
                                                     }
 ?>
-                                                    <?=$stat_name?>
-                                                </td>
-                                                <td class='value <?=$craft?>'>
-                                                    <?=$stat_value?>
-                                                <td>
-                                            </tr>
-                                        </table>
-                                    </td>
-                                    <td class='details'>
+                                                <?=$stat_name?>
+                                            </td>
+                                            <td class='value <?=$craft?>'>
+                                                <?=$stat_value?>
+                                            <td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td class='details'>
 <?php
                                         switch ($rupgrade["rune"]->quality){
                                             case 0:
@@ -314,91 +330,91 @@
                                                 break;
                                         }
 ?>
-                                        <table class='table_details'>
-                                            <tr>
-                                                <td class='title'>
-                                                    Quality:
-                                                </td>
-                                                <td class='value'>
-                                                    <span class='quality quality_<?=strtolower($q)?>'>
-                                                        <?=$q?>
-                                                    </span>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td class='title'>
-                                                    Original quality:
-                                                </td>
-                                                <td class='value'>
-                                                    <span class='quality quality_<?=strtolower($oq)?>'>
-                                                        <?=$oq?>
-                                                    </span>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td class='title'>
-                                                    Value:
-                                                </td>
-                                                <td class='value'>
-                                                    <?=$rupgrade["rune"]->value?>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td class='title'>
-                                                    Efficiency:
-                                                </td>
-                                                <td class='value'>
-                                                    <?=number_format($rupgrade["rune"]->efficiency, 2)?>%
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td class='title'>
-                                                    Max. efficiency:
-                                                </td>
-                                                <td class='value'>
-                                                    <?=number_format($rupgrade["rune"]->max_efficiency, 2)?>%
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td class='title'>
-                                                    Reached efficiency:
-                                                </td>
-                                                <td class='value'>
-                                                    <?=number_format($rupgrade["rune"]->efficiency * 100 / $rupgrade["rune"]->max_efficiency)?>%
-                                                </td>
-                                            </tr>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </table> <!-- .rune -->
-                            <div class='alternatives'>
+                                    <table class='table_details'>
+                                        <tr>
+                                            <td class='title'>
+                                                Quality:
+                                            </td>
+                                            <td class='value'>
+                                                <span class='quality quality_<?=strtolower($q)?>'>
+                                                    <?=$q?>
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class='title'>
+                                                Original quality:
+                                            </td>
+                                            <td class='value'>
+                                                <span class='quality quality_<?=strtolower($oq)?>'>
+                                                    <?=$oq?>
+                                                </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class='title'>
+                                                Value:
+                                            </td>
+                                            <td class='value'>
+                                                <?=$rupgrade["rune"]->value?>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class='title'>
+                                                Efficiency:
+                                            </td>
+                                            <td class='value'>
+                                                <?=number_format($rupgrade["rune"]->efficiency, 2)?>%
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class='title'>
+                                                Max. efficiency:
+                                            </td>
+                                            <td class='value'>
+                                                <?=number_format($rupgrade["rune"]->max_efficiency, 2)?>%
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class='title'>
+                                                Reached efficiency:
+                                            </td>
+                                            <td class='value'>
+                                                <?=number_format($rupgrade["rune"]->efficiency * 100 / $rupgrade["rune"]->max_efficiency)?>%
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                            </tr>
+                        </table> <!-- .rune -->
+                        <div class='alternatives'>
 <?php
                                 foreach ($rupgrade["alternative"] as $alternative){
 ?>
-                                    <table class='alternative'>
-                                        <tr>
-                                            <td class='icon'>
-                                                <div class='rune_panel rune_slot_<?=$alternative->slot?> rune_level_<?=$alternative->level?> rune_quality_<?=$alternative->quality?> rune_original_quality_<?=$alternative->original_quality?>'>
-                                                    <img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
-                                                    <img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$alternative->type?>.png'/>
-                                                    <span class='rune_stars'>
+                                <table class='alternative'>
+                                    <tr>
+                                        <td class='icon'>
+                                            <div class='rune_panel rune_slot_<?=$alternative->slot?> rune_level_<?=$alternative->level?> rune_quality_<?=$alternative->quality?> rune_original_quality_<?=$alternative->original_quality?>'>
+                                                <img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
+                                                <img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$alternative->type?>.png'/>
+                                                <span class='rune_stars'>
 <?php
                                                         for ($i = 0; $i < $alternative->stars; $i ++){
 ?>
-                                                            <img class='star' src='<?=$path["img"]["layout"] . "icon/star_silver.png"?>'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
                                                         }
 ?>
-                                                    </span>
-                                                    <span class='rune_level'>
-                                                        <?=$alternative->level?>
-                                                    </span>
-                                                </div> <!-- .rune_panel -->
-                                            </td>
-                                            <td class='stats'>
-                                                <table>
-                                                    <tr class='main_stat'>
-                                                        <td class='stat'>
+                                                </span>
+                                                <span class='rune_level'>
+                                                    <?=$alternative->level?>
+                                                </span>
+                                            </div> <!-- .rune_panel -->
+                                        </td>
+                                        <td class='stats'>
+                                            <table>
+                                                <tr class='main_stat'>
+                                                    <td class='stat'>
 <?php
                                                             if (strpos($alternative->main_stat, "%") !== false){
                                                                 $stat_name = str_replace("%", "", $alternative->main_stat);
@@ -409,14 +425,14 @@
                                                                 $stat_value = "+ " . $alternative->main_stat_value;
                                                             }
 ?>
-                                                            <?=$stat_name?>
-                                                        </td>
-                                                        <td class='value'>
-                                                            <?=$stat_value?>
-                                                        <td>
-                                                    </tr>
-                                                    <tr class='innate_stat'>
-                                                        <td class='stat'>
+                                                        <?=$stat_name?>
+                                                    </td>
+                                                    <td class='value'>
+                                                        <?=$stat_value?>
+                                                    <td>
+                                                </tr>
+                                                <tr class='innate_stat'>
+                                                    <td class='stat'>
 <?php
                                                             if (strlen($alternative->innate_stat) == 0){
                                                                 $stat_name = "&nbsp;";
@@ -431,14 +447,14 @@
                                                                 $stat_value = "+ " . $alternative->innate_stat_value;
                                                             }
 ?>
-                                                            <?=$stat_name?>
-                                                        </td>
-                                                        <td class='value'>
-                                                            <?=$stat_value?>
-                                                        <td>
-                                                    </tr>
-                                                    <tr class=substat>
-                                                        <td class='stat'>
+                                                        <?=$stat_name?>
+                                                    </td>
+                                                    <td class='value'>
+                                                        <?=$stat_value?>
+                                                    <td>
+                                                </tr>
+                                                <tr class=substat>
+                                                    <td class='stat'>
 <?php
                                                             if (strlen($alternative->substat_1) == 0){
                                                                 $stat_name = "&nbsp;";
@@ -459,14 +475,14 @@
                                                                 $craft = "";
                                                             }
 ?>
-                                                            <?=$stat_name?>
-                                                        </td>
-                                                        <td class='value <?=$craft?>'>
-                                                            <?=$stat_value?>
-                                                        <td>
-                                                    </tr>
-                                                    <tr class=substat>
-                                                        <td class='stat'>
+                                                        <?=$stat_name?>
+                                                    </td>
+                                                    <td class='value <?=$craft?>'>
+                                                        <?=$stat_value?>
+                                                    <td>
+                                                </tr>
+                                                <tr class=substat>
+                                                    <td class='stat'>
 <?php
                                                             if (strlen($alternative->substat_2) == 0){
                                                                 $stat_name = "&nbsp;";
@@ -487,14 +503,14 @@
                                                                 $craft = "";
                                                             }
 ?>
-                                                            <?=$stat_name?>
-                                                        </td>
-                                                        <td class='value <?=$craft?>'>
-                                                            <?=$stat_value?>
-                                                        <td>
-                                                    </tr>
-                                                    <tr class=substat>
-                                                        <td class='stat'>
+                                                        <?=$stat_name?>
+                                                    </td>
+                                                    <td class='value <?=$craft?>'>
+                                                        <?=$stat_value?>
+                                                    <td>
+                                                </tr>
+                                                <tr class=substat>
+                                                    <td class='stat'>
 <?php
                                                             if (strlen($alternative->substat_3) == 0){
                                                                 $stat_name = "&nbsp;";
@@ -515,14 +531,14 @@
                                                                 $craft = "";
                                                             }
 ?>
-                                                            <?=$stat_name?>
-                                                        </td>
-                                                        <td class='value <?=$craft?>'>
-                                                            <?=$stat_value?>
-                                                        <td>
-                                                    </tr>
-                                                    <tr class=substat>
-                                                        <td class='stat'>
+                                                        <?=$stat_name?>
+                                                    </td>
+                                                    <td class='value <?=$craft?>'>
+                                                        <?=$stat_value?>
+                                                    <td>
+                                                </tr>
+                                                <tr class=substat>
+                                                    <td class='stat'>
 <?php
                                                             if (strlen($alternative->substat_4) == 0){
                                                                 $stat_name = "&nbsp;";
@@ -543,15 +559,15 @@
                                                                 $craft = "";
                                                             }
 ?>
-                                                            <?=$stat_name?>
-                                                        </td>
-                                                        <td class='value <?=$craft?>'>
-                                                            <?=$stat_value?>
-                                                        <td>
-                                                    </tr>
-                                                </table>
-                                            </td>
-                                            <td class='details'>
+                                                        <?=$stat_name?>
+                                                    </td>
+                                                    <td class='value <?=$craft?>'>
+                                                        <?=$stat_value?>
+                                                    <td>
+                                                </tr>
+                                            </table>
+                                        </td>
+                                        <td class='details'>
 <?php
                                                 switch ($alternative->quality){
                                                     case 0:
@@ -588,78 +604,75 @@
                                                         break;
                                                 }
 ?>
-                                                <table class='table_details'>
-                                                    <tr>
-                                                        <td class='title'>
-                                                            Quality:
-                                                        </td>
-                                                        <td class='value'>
-                                                            <span class='quality quality_<?=strtolower($q)?>'>
-                                                                <?=$q?>
-                                                            </span>
-                                                        </td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class='title'>
-                                                            Original quality:
-                                                        </td>
-                                                        <td class='value'>
-                                                            <span class='quality quality_<?=strtolower($oq)?>'>
-                                                                <?=$oq?>
-                                                            </span>
-                                                        </td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class='title'>
-                                                            Value:
-                                                        </td>
-                                                        <td class='value'>
-                                                            <?=$alternative->value?>
-                                                        </td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class='title'>
-                                                            Efficiency:
-                                                        </td>
-                                                        <td class='value'>
-                                                            <?=number_format($alternative->efficiency, 2)?>%
-                                                        </td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class='title'>
-                                                            Max. efficiency:
-                                                        </td>
-                                                        <td class='value'>
-                                                            <?=number_format($alternative->max_efficiency, 2)?>%
-                                                        </td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class='title'>
-                                                            Reached efficiency:
-                                                        </td>
-                                                        <td class='value'>
-                                                            <?=number_format($alternative->efficiency * 100 / $alternative->max_efficiency)?>%
-                                                        </td>
-                                                    </tr>
-                                                </table>
-                                            </td>
-                                        </tr>
-                                    </table> <!-- .alternative -->
+                                            <table class='table_details'>
+                                                <tr>
+                                                    <td class='title'>
+                                                        Quality:
+                                                    </td>
+                                                    <td class='value'>
+                                                        <span class='quality quality_<?=strtolower($q)?>'>
+                                                            <?=$q?>
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class='title'>
+                                                        Original quality:
+                                                    </td>
+                                                    <td class='value'>
+                                                        <span class='quality quality_<?=strtolower($oq)?>'>
+                                                            <?=$oq?>
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class='title'>
+                                                        Value:
+                                                    </td>
+                                                    <td class='value'>
+                                                        <?=$alternative->value?>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class='title'>
+                                                        Efficiency:
+                                                    </td>
+                                                    <td class='value'>
+                                                        <?=number_format($alternative->efficiency, 2)?>%
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class='title'>
+                                                        Max. efficiency:
+                                                    </td>
+                                                    <td class='value'>
+                                                        <?=number_format($alternative->max_efficiency, 2)?>%
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class='title'>
+                                                        Reached efficiency:
+                                                    </td>
+                                                    <td class='value'>
+                                                        <?=number_format($alternative->efficiency * 100 / $alternative->max_efficiency)?>%
+                                                    </td>
+                                                </tr>
+                                            </table>
+                                        </td>
+                                    </tr>
+                                </table> <!-- .alternative -->
 <?php
                                 }
 ?>
-                            </div>
+                        </div>
 <?php
                         }
 ?>
-                    </article>
-<?php
-                }
-?>
-                    
-            </section> <!-- #catalog -->
-
+                    </div> <!-- .monster_runes -->
+                </article>
+            </section>
 <?php
+            }
         include __DIR__ . "/inc/footer.php";
 ?>
     </body>

application/view/report_skillup.php

@@ -33,7 +33,12 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section id='filters'>
+            <section class='filters'>
+                <h2>
+                    <span>
+                        Monster filters
+                    </span>
+                </h2>
                 <form action='/report/skillup/' method='get'>
                     <div class='filter' id='filter_stars'>
                         <span>Min. stars:</span>
@@ -73,47 +78,93 @@
                     </div>
                 </form>
             </section> <!-- #filters -->
-            <section id='list'>
-                <article>
 <?php
-                    foreach ($page->monsters as $mon){
-                        if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
-                            // No to, no from, silver monster.
-                            $star_src = $path["img"]["layout"] . "icon/star_silver.png";
-                            $mon_title = $mon->monster->element . " " . $mon->monster->name;
-                        }
-                        elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
-                            // Already awakened.
-                            $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-                            $mon_title = $mon->monster->name;
-                        }
-                        elseif ($mon->monster->awakens_to =! ""){
-                            // Awakeable.
-                            $star_src = $path["img"]["layout"] . "icon/star.png";
-                            $mon_title = $mon->monster->element . " " . $mon->monster->name;
-                        }
-                        // TODO: Handle second awakenings
+            $index = 1;
+            foreach ($page->monsters as $mon){
+                if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
+                    // No to, no from, silver monster.
+                    $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                    $mon_title = $mon->monster->element . " " . $mon->monster->name;
+                }
+                elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
+                    // Already awakened.
+                    $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                    $mon_title = $mon->monster->name;
+                }
+                elseif ($mon->monster->awakens_to =! ""){
+                    // Awakeable.
+                    $star_src = $path["img"]["layout"] . "icon/star.png";
+                    $mon_title = $mon->monster->element . " " . $mon->monster->name;
+                }
+                if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
+                    // No to, no from, silver monster.
+                    $star_class ="star_silver";
+                    $mon_title = $mon->monster->element . " " . $mon->monster->name;
+                }
+                elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
+                    // Already awakened
+                    if ($mon->monster->base_stars - $mon->monster->natural_stars == 1){
+                        // Normal awaken.
+                        $star_class = "star_purple";
+                    }
+                    else{
+                        // Second awaken.
+                        $star_class = "star_red";
+                    }
+                    $mon_title = $mon->monster->name;
+                }
+                elseif ($mon->monster->awakens_to =! ""){
+                    // Awakeable.
+                    $star_class = "star_gold";
+                    $mon_title = $mon->monster->element . " " . $mon->monster->name;
+                }
+                switch ($index % 10){
+                    case 1:
+                        $index_title = $index . "<span class='superindex'>st</span> - " . $mon_title;
+                        break;
+                    case 2:
+                        $index_title = $index . "<span class='superindex'>nd</span> - " . $mon_title;
+                        break;
+                    case 3:
+                        $index_title = $index . "<span class='superindex'>rd</span> - " . $mon_title;
+                        break;
+                    default:
+                        $index_title = $index . "<span class='superindex'>th</span> - " . $mon_title;
+                        break;
+                }
+                switch ($index % 100){
+                    case 11:
+                    case 12:
+                    case 13:
+                        $index_title = $index . "<span class='superindex'>th</span> - " . $mon_title;
+                        break;
+                }
 ?>
+                <section class='content'>
+                    <h2>
+                        <span>
+                            <?=$index_title?>
+                        </span>
+                    </h2>
+                    <article>
                         <div class='monster'>
-                        	<div class='profile'>
-                                <img id='monster_image' title='<?=$mon_title?>' class='border_<?=$mon->monster->element?>' src='<?=$mon->monster->get_image()?>'/>
-                            	<div id='details'>
-                            		<h1><?=$mon_title?></h1>
-                                	<span class='stars'>
+                            <div class='profile'>
+                                <div class='monster_panel'>
+                                    <span class='stars'>
 <?php
                                         for ($i = 0; $i < $mon->stars; $i ++){
 ?>
-                                        	<img class='star' src='<?=$star_src?>'/>
+                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
 <?php
                                         }
 ?>
                                     </span>
+                                    <img title='<?=$mon_title?>' class='monster border_<?=$mon->monster->element?>' src='<?=$mon->monster->get_image()?>'/>
                                     <span class='level'>
-                                        Lv. <?=$mon->level?>
+                                        <?=$mon->level?>
                                     </span>
-                                </div> <!-- #details -->
+                                </div>
                             </div> <!-- .profile -->
-                            
                             <div class='skills'>
 <?php
                                     $skill_num = 1;
@@ -168,9 +219,9 @@
                                         }
 ?>
                                     <div class='skill'>
-                                        <img src='<?=$skill->get_image()?>'/>
+                                        <img title='<?=$skill->description?>' src='<?=$skill->get_image()?>'/>
                                         <span class='skill_level <?=$maxed?>'>
-                                        	<?=$cur_lvl?>/<?=$max_lvl?>
+                                            <?=$cur_lvl?>/<?=$max_lvl?>
                                         </span>
                                         <span class='skill_name'>
                                             <?=$skill->name?>
@@ -182,37 +233,39 @@
 ?>
                             </div> <!-- #skills -->
                             <table id='skill_averages'>
-            					<tr>
-            						<td class='title'>
-            							Absolute skill-ups:
-            						</td>
-            						<td class='value'>
-            							<?=number_format($absolute_level * 100 / $absolute_max_level, 2)?>%
-            						</td>
-            					</tr>
-            					<tr>
-            						<td class='title'>
-            							Ponderated skill-ups:
-            						</td>
-            						<td class='value'>
-            							<?=number_format($ponderated_level * 100 / $ponderated_max_level, 2)?>%
-            						</td>
-            					</tr>
-            					<tr>
-            						<td class='title'>
-            							Remaining skill-ups:
-            						</td>
-            						<td class='value'>
-            							<?=$absolute_max_level - $absolute_level?>
-            						</td>
-            					</tr>
-            				</table>
+                                <tr>
+                                    <td class='title'>
+                                        Absolute skill-ups:
+                                    </td>
+                                    <td class='value'>
+                                        <?=number_format($absolute_level * 100 / $absolute_max_level, 2)?>%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class='title'>
+                                        Ponderated skill-ups:
+                                    </td>
+                                    <td class='value'>
+                                        <?=number_format($ponderated_level * 100 / $ponderated_max_level, 2)?>%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class='title'>
+                                        Remaining skill-ups:
+                                    </td>
+                                    <td class='value'>
+                                        <?=$absolute_max_level - $absolute_level?>
+                                    </td>
+                                </tr>
+                            </table>
                         </div>
+                    </article>
+                </section> 
 <?php
-                }
+                $index ++;
+            }
 ?>
-                    </article>
-            </section> <!-- #catalog -->
+
 
 <?php
         include __DIR__ . "/inc/footer.php";

public/css/catalog.css

@@ -1,299 +1,7 @@
-section#filters{
-    width: 80%;
-    text-align:center;
-    margin: 1em auto 2em auto;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-    background-color: #aa8866;
-}
-section#filters div.filter{
-    vertical-align: top;
-    margin: 0.7em;
-    display: inline-block;
-    text-align: center;
-}
-section#filters div.filter span{
-    color: #ffffff;
-}
-section#filters div.filter input{
-    margin-top: 0.5em;
-}
-section#filters div#filter_stars input{
-    width: 3em;
-}
-section#filters div#filter_apply{
-    text-align: center;
-    margin: 2em auto 1em auto;
+section.list article{
+    margin-bottom: 1.5em;
 }
 
-section#catalog{
-    display: block;
-    width: 80%;
-    margin: auto;
-    text-align: center;
-}
-@media screen and (max-width : 990px){
-    section#catalog{
-        width: 100%;
-    }
-}
-
-section#catalog div.monster{
+section.list article div.monster{
     display: inline-block;
-    width: 7em;
-    height: 7em;
-    border: 0.2em solid #000000;
-    margin: 0.5em;
-    position: relative;
-    border-radius: 15%;
-}
-
-section#catalog div.monster.unowned{
-    background-color: #000000;
-    filter: brightness(50%);
-}
-@media screen and (max-width : 990px){
-    section#catalog div.monster{
-        height: 6em;
-        width: 6em;
-        border: 0.1em solid #000000;
-        margin: 0.2em;
-        border-radius: 10%;
-    }
-}
-
-section#catalog div.monster span.stars{
-    position: absolute;
-/*     z-index: 1; */
-    top: 0.4em;
-    right: 0.5em;
-}
-@media screen and (max-width : 990px){
-    section#catalog div.monster span.stars{
-        top: 0.3em;
-        right: 0.4em;
-    }
-}
-
-section#catalog div.monster span.stars img.star{
-    width: 1em;
-    height: 1em;
-    margin-left: -0.6em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-@media screen and (max-width : 990px){
-    section#catalog div.monster span.stars img.star{
-        width: 0.9em;
-        height: 0.9em;
-        margin-left: -0.7em;
-    }
-}
-
-section#catalog div.monster img.monster{
-    width: 6.5em;
-    height: 6.5em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-}
-@media screen and (max-width : 990px){
-    section#catalog div.monster img.monster{
-        width: 5.6em;
-        height: 5.6em;
-        border-width: 0.2em;
-        border-radius: 10%;
-    }
-}
-
-div#viewer{
-    width: 60%;
-    height: 80%;
-    position: fixed;
-    left: 22%;
-    top: 10%;
-    z-index: 20;
-    display: none;
-    padding: 0;
-}
-@media screen and (max-width : 990px){
-    div#viewer{
-        width: 90%;
-        height: 90%;
-        left: 3%;
-        top: 5%;
-    }
-}
-
-div#viewer div#viewer_wait{
-    width: 100%;
-    margin: 4em 0 0 0;
-    text-align: center;
-}
-div#viewer div#viewer_info{
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    display: none;
-    text-align: center;
-}
-
-div#viewer div#viewer_info table#monster_header{
-    width: 90%;
-    margin: auto;
-    border-collapse: collapse;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header{
-        width: 100%;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header img.monster_img{
-    width: 6.5em;
-    height: 6.5em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    margin: 0.2em 0.8em;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header img.monster_img{
-        width: 5em;
-        height: 5em;
-        border-width: 0.2em;
-        border-radius: 10%;
-        margin: 0.1em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header div#monster_stars{
-    margin: 0.5em auto;
-    padding: 0.3em;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header div#monster_stars{
-        margin: 0.3em auto;
-        padding: 0.1em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header div#monster_stars img.monster_star{
-    width: 2em;
-    height: 2em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header div#monster_stars img.monster_star{
-        width: 1.6em;
-        height: 1.6em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_skills{
-    width: 90%;
-    margin: 2em auto 2em auto;
-    border-collapse: collapse;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-    background-color: #aa8866;
-}
-
-div#viewer div#viewer_info table#monster_skills td{
-    vertical-align: top;
-    padding: 0.1em;
-    text-align: center;
-    width: 1%;
-}
-
-div#viewer a.control_close{
-    float: right;
-}
-
-div#viewer a.control_close img{
-    width: 1.5em;
-    height: 1.5em;
-    margin: 0.5em;
-}
-
-div#viewer div#viewer_info table#monster_stats{
-    width: 90%;
-    margin: auto;
-    border-collapse: collapse;
-    border: 0.1em solid #000000;
-}
-
-div#viewer div#viewer_info table#monster_stats td.even0{
-    background-color: #ffffff;
-}
-div#viewer div#viewer_info table#monster_stats td.even1{
-    background-color: #dddddd;
-}
-
-div#viewer div#viewer_info table#monster_stats td, th{
-    text-align: center;
-    width: 1%;
-}
-
-div#viewer div#viewer_info table#monster_stats tr#stats_header_names th{
-    background-color: #aaaaaa;
-    font-size: 90%;
-}
-
-div#viewer div#viewer_info table#monster_stats tr#stats_header_ranges th{
-    background-color: #aaaaaa;
-    color: #333333;
-    font-size: 70%;
-}
-
-div#viewer div#viewer_info table#monster_stats td img.star{
-    width: 0.5em;
-    height: 0.5em;
-    margin: -0.2em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-
-div#viewer div#viewer_info table#monster_stats td span.stat{
-    display: block;
-    margin: 0;
-    text-align: center;
-    font-size: 80%;
-}
-
-div#viewer div#viewer_info table#monster_stats td span.stat.awake{
-    color: #aa00ff;
-    font-style: italic;
-}
-
-div#viewer div#viewer_info div#monster_location{
-    margin: 1em 20%;
-}
-
-div#viewer div#viewer_info div#monster_awake{
-    text-align: center;
-}
-div#viewer div#viewer_info div#monster_awake table{
-    margin: auto;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence{
-    text-align: center;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence img{
-    display: block;
-    border-width: 0.2em;
-    border-style: solid;
-    border-radius: 50%;
-    width: 2.5em;
-    height: 2.5em;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence span{
-    display: block;
-    text-align: right;
-    margin: -1em 0.2em 0 0;
-    color: #ffffff;
-    text-shadow: 0 0 0.2em #000000;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
 }

public/css/fusion.css

@@ -1,26 +1,21 @@
 article{
-    width: 90%;
-    margin: 1em auto;
-    border: 0.2em solid #f2c920;
-    border-radius: 1.5em;
-    background-color: #f5e7c8;
-    box-shadow: 0 0 2em #aaaaaa;
-    padding: 1em;
+    text-align: left;
 }
 
 article div.f5{
     width: 100%;
+    margin: 1em 0 2em 4em;
 }
 
-article div.f5 img.monster_image{
-    max-width: 8em;
-    max-height: 8em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
+article div.f5 .box{
+    border: 0.3em solid #333333;
+    background-color: #816945;
     display: inline-block;
-    vertical-align: top;
-    margin: 0 1.5em 1.5em 1.5em;
+    padding: 0.5em;
+}
+
+article div.f5 div.monster_panel{
+    font-size: 100%
 }
 article div.f5 div.details{
     display: inline-block;
@@ -38,7 +33,6 @@ article div.f5 div.details span.stars{
 article div.f5 div.details span.stars img.star{
     width: 1.5em;
     height: 1.5em;
-    filter: drop-shadow(0 0 0.05em #ffffff);
     margin: -0.1em;
 }
 article div.f5 div.details span.level{
@@ -48,14 +42,22 @@ article div.f5 div.details span.level{
 }
 
 article div.f5 div.ingredients{
-    margin-left: 2em;
-    border-left: 0.2em solid #000000;
-    border-bottom-left-radius: 1.5em;
-    margin-top: -2em;
-    padding-top: 1em;
+    margin-left: 5em;
+    border-left: 0.4em solid #333333;
+    margin-top: 0em;
+    padding-top: 0.5em;
+    margin-bottom: 1em;
+}
+
+article div.f5 div.ingredients div.f4 .box{
+    border: 0.3em solid #333333;
+    background-color: #816945;
+    display: inline-block;
+    padding: 0em;
+    margin-bottom: -0.3em;
 }
 
-article div.f5 div.ingredients div.f4  td div{
+article div.f5 div.ingredients div.f4 td div{
     position: relative;
 }
 article div.f5 div.ingredients div.f4 td.essences{
@@ -88,38 +90,10 @@ article div.f5 div.ingredients div.f4 td.essences div.essence span{
     color: #ffffff;
     text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
 }
-article div.f5 div.ingredients div.f4 td div img.monster_image{
-    max-width: 4em;
-    max-height: 4em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 0.5em 0.5em 0.5em;
-}
-article div.f5 div.ingredients div.f4  td div span.stars{
-    display: block;
-    position: absolute;
-    top: 0.3em;
-    left: 1.2em
-}
-article div.f5 div.ingredients div.f4  td div span.stars img.star{
-    width: 0.8em;
-    height: 0.8em;
-    filter: drop-shadow(0 0 0.05em #000000) drop-shadow(0 0 0.05em #000000) drop-shadow(0 0 0.05em #000000);
-    margin-left: -0.4em;
-}
-article div.f5 div.ingredients div.f4  td div span.level{
-    color: #ffffff;
-    display: block;
-    position: absolute;
-    text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
-    top: 1.5em;
-    left: 1.1em;
-    font-size: 80%;
+article div.f5 div.ingredients div.f4 td div.monster_panel{
+    font-size: 80%
 }
-article div.f5 div.ingredients div.f4  td div h4{
+article div.f5 div.ingredients div.f4 td div h4{
     color: #ffffff;
     font-size: 100%;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
@@ -174,40 +148,12 @@ article div.f5 div.ingredients div.f4 div.ingredients div.f3 td.essences div.ess
     text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
 }
 
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div img.monster_image{
-    max-width: 4em;
-    max-height: 4em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 0.5em 0.5em 0.5em;
-}
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div span.stars{
-    display: block;
-    position: absolute;
-    top: 0.3em;
-    left: 1.2em
-}
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div span.stars img.star{
-    width: 0.8em;
-    height: 0.8em;
-    filter: drop-shadow(0 0 0.05em #000000) drop-shadow(0 0 0.05em #000000) drop-shadow(0 0 0.05em #000000);
-    margin-left: -0.4em;
-}
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div span.level{
-    color: #ffffff;
-    display: block;
-    position: absolute;
-    text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
-    top: 1.5em;
-    left: 1.1em;
-    font-size: 80%;
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div.monster_panel{
+    font-size: 60%
 }
 article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div h4{
     color: #ffffff;
-    font-size: 100%;
+    font-size: 110%;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
     margin: 0;
     position: relative;
@@ -215,272 +161,3 @@ article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div h4{
     left: 0em;
     text-align: center;
 }
-
-
-
-article div.target{
-    display: inline-block;
-    vertical-align: middle;
-}
-article div.sources{
-    display: inline-block;
-    vertical-align: middle;
-}
-article div.sources div.sources_inside{
-    border-top: 0.2em solid #c2a485;
-    border-bottom: 0.2em solid #c2a485;
-    margin: 0;
-    padding: 0.7em;
-    display: inline-block;
-    vertical-align: middle;
-}
-article div.sub_sources{
-    display: inline-block;
-    vertical-align: middle;
-    border-left: 0.2em solid #c2a485;
-    margin: 0.5em;
-    padding: 0.5em;
-}
-article div.sub_sources:after{
-    content:"\A";
-    white-space: pre;
-}
-
-article div.monster{
-    display: inline-block;
-    position: relative;
-    vertical-align: top;
-}
-article div.monster.lv1{
-    width: 7em;
-    height: 7em;
-    margin: 0.5em;
-}
-article div.monster.lv2{
-    width: 6em;
-    height: 6em;
-    margin: 0.3em;
-}
-article div.monster.lv3{
-    width: 4em;
-    height: 4em;
-    margin: 0.2em;
-    text-align: center;
-}
-article div.monster span.stars{
-    position: absolute;
-    z-index: 1;
-    top: 0.4em;
-    right: 0.5em;
-}
-article div.monster.lv1 span.stars{
-    top: 0.5em;
-    right: 0;
-}
-article div.monster.lv2 span.stars{
-    top: 0.4em;
-    right: 0;
-}
-article div.monster.lv3 span.stars{
-    top: 0;
-    right: 0;
-}
-article div.monster.lv1 span.stars img.star{
-    width: 1.5em;
-    height: 1.5em;
-    margin-left: -0.6em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-article div.monster.lv2 span.stars img.star{
-    width: 1.1em;
-    height: 1.1em;
-    margin-left: -0.5em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-article div.monster.lv3 span.stars img.star{
-    width: 0.7em;
-    height: 0.7em;
-    margin-left: -0.5em;
-    filter: drop-shadow(0 0 0.1em #000000);
-}
-
-
-article div.monster img.monster{
-    border-style: solid;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 0 1em #555555;
-}
-article div.monster.lv1 img.monster{
-    border-width: 0.3em;
-    border-radius: 25%;
-}
-article div.monster.lv2 img.monster{
-    border-width: 0.2em;
-    border-radius: 20%;
-}
-article div.monster.lv3 img.monster{
-    border-width: 0.1em;
-    border-radius: 15%;
-}
-
-article div.monster span.level{
-    color: #000000;
-    font-weight: bold;
-    position: absolute;
-    z-index: 1;
-}
-article div.monster.lv1 span.level{
-    bottom: 0.2em;
-    left: 0.5em;
-    font-size: 100%;
-    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
-}
-article div.monster.lv2 span.level{
-    bottom: 0.1em;
-    left: 0.5em;
-    font-size: 90%;
-    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
-}
-article div.monster.lv3 span.level{
-    top: 0.2em;
-    left: 0.25em;
-    font-size: 70%;
-    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff;
-}
-
-
-
-
-article div.monster_details{
-    width: 8em;
-    display: inline-block;
-    vertical-align: top;
-}
-article div.monster_details.lv1{
-    display: block;
-}
-article div.monster_details h5{
-    text-align: center;
-}
-article div.monster_details.lv1 h5{
-    margin: 1em auto;
-    font-size: 150%;
-    text-shadow: 0 0 0.09em #000000, 0 0 2em #ffffff;
-}
-article div.monster_details.lv2 h5{
-    margin: 0.5em auto;
-    font-size: 90%;
-    text-shadow: 0 0 0.05em #000000, 0 0 2em #ffffff;
-}
-article div.monster_details hr.owned_separator{
-    margin: 0 1em;
-    height: 0;
-}
-
-
-article div.monster_owned{
-    display: inline-block;
-    position: relative;
-}
-article div.monster_owned.lv1{
-    width: 3.5em;
-    height: 3.5em;
-    margin: 0.2em;
-    border-radius: 10%;
-}
-article div.monster_owned.lv2{
-    width: 2.3em;
-    height: 2.3em;
-    margin: 0.3em auto;
-    border-radius: 5%;
-    display: block;
-}
-article div.monster_owned.lv3{
-    width: 2.2em;
-    height: 2.2em;
-    margin: auto;
-    border-radius: 25%;
-    border-width: 0.2em;
-    position: absolute;
-    bottom: -1em;
-    z-index: 4;
-    filter: drop-shadow(0 0 0.2em #ffffff);
-}
-
-
-article div.monster_owned span.stars{
-    position: absolute;
-    z-index: 1;
-}
-article div.monster_owned.lv1 span.stars{
-    top: 0.2em;
-    right: 0.2em;
-}
-article div.monster_owned.lv2 span.stars{
-    top: -0.2em;
-    right: 0em;
-}
-article div.monster_owned.lv3 span.stars{
-    top: -0.1em;
-    right: 0.2em;
-}
-
-article div.monster_owned.lv1 span.stars img.star{
-    width: 0.6em;
-    height: 0.6em;
-    margin-left: -0.6em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-article div.monster_owned.lv2 span.stars img.star{
-    width: 0.5em;
-    height: 0.5em;
-    margin-left: -0.4em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-article div.monster_owned.lv3 span.stars img.star{
-    width: 0.4em;
-    height: 0.4em;
-    margin-left: -0.3em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-
-article div.monster_details div.monster_owned img.monster{
-    border-style: solid;
-    border-width: 0.1em;
-    width: 100%;
-    height: 100%;
-}
-article div.monster_owned.lv1 img.monster{
-    border-radius: 10%;
-}
-article div.monster_owned.lv2 img.monster{
-    border-radius: 10%;
-}
-article div.monster_owned.lv3 img.monster{
-    border-radius: 50%;
-}
-
-article div.monster_owned span.level{
-    color: #000000;
-    font-weight: bold;
-    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
-    position: absolute;
-    z-index: 1;
-}
-article div.monster_owned.lv1 span.level{
-    bottom: 0.2em;
-    left: 0.5em;
-    font-size: 90%;
-}
-article div.monster_owned.lv2 span.level{
-    bottom: 0em;
-    left: 0.5em;
-    font-size: 80%;
-}
-article div.monster_owned.lv3 span.level{
-    top: initial;
-    bottom: 0;
-    left: 1.2em;
-    font-size: 70%;
-}

public/css/monster.css

@@ -1,16 +1,4 @@
-section#monster{
-    display: block;
-    width: 98%;
-    margin: auto;
-    text-align: center;
-}
-@media screen and (max-width : 990px){
-    section#monster{
-        width: 100%;
-    }
-}
-
-section#monster article#profile{
+article#profile{
     max-width: 60%;
     display: inline-block;
     vertical-align: top;
@@ -25,14 +13,14 @@ section#monster article#profile{
     padding: 0.5em;
 }
 @media screen and (max-width : 990px){
-    section#monster article#profile{
+    article#profile{
         width: 95%;
         max-width: 95%;
         margin: 0.2em auto;
         display: block;
     }
 }
-section#monster article#profile img#monster_image{
+article#profile img#monster_image{
     max-width: 12em;
     max-height: 12em;
     border-style: solid;
@@ -42,32 +30,32 @@ section#monster article#profile img#monster_image{
     vertical-align: top;
     margin: 0 1.5em 1.5em 1.5em;
 }
-section#monster article#profile div#details{
+article#profile div#details{
     display: inline-block;
     vertical-align: top;
     text-align: center;
 }
-section#monster article#profile div#details h1{
+article#profile div#details h1{
     color: #ffffff;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
     font-size: 190%;
     margin: 0.2em;
 }
-section#monster article#profile div#details span.stars{
+article#profile div#details span.stars{
     display: block;
 }
-section#monster article#profile div#details span.stars img.star{
+article#profile div#details span.stars img.star{
     width: 1.5em;
     height: 1.5em;
     filter: drop-shadow(0 0 0.05em #ffffff);
     margin: -0.1em;
 }
-section#monster article#profile div#details span.level{
+article#profile div#details span.level{
     color: #ffffff;
     display: block;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
 }
-section#monster article#profile h4{
+article#profile h4{
     color: #ffffff;
     font-weight: bold;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
@@ -75,7 +63,7 @@ section#monster article#profile h4{
     display: block;
 }
 
-section#monster article#profile table#stats{
+article#profile table#stats{
     font-size: 100%;
     border: 0.1em solid black;
     color: #ffffff;
@@ -84,35 +72,35 @@ section#monster article#profile table#stats{
     border-radius: 0.4em;
 }
 
-section#monster article#profile table#stats th{
+article#profile table#stats th{
     font-weight: bold;
     background-color: #00000066;
 }
 
-section#monster article#profile table#stats td{
+article#profile table#stats td{
     font-weight: bold;
     background-color: #ffffff33;
 }
 
-section#monster article#profile table#stats td, th{
+article#profile table#stats td, th{
     padding: 0.2em;
     border: 0.1em solid #000000;
 }
 
-section#monster article#profile table#stats td.extra{
+article#profile table#stats td.extra{
     color: #aaaaff;
 }
 
-section#monster article#profile table#stats td.total{
+article#profile table#stats td.total{
     color: #f2c920;
     font-weight: bold;
 }
 
-section#monster article#profile div#skills{
+article#profile div#skills{
     text-align: center;
 }
 
-section#monster article#profile div#skills div.skill{
+article#profile div#skills div.skill{
     display: inline-block;
     vertical-align: top;
     margin: 0.5em;
@@ -121,13 +109,13 @@ section#monster article#profile div#skills div.skill{
     max-width: 20%;
 }
 
-section#monster article#profile div#skills div.skill img.skill_img{
+article#profile div#skills div.skill img.skill_img{
     width: 5em;
     height: 5em;
     border: 0.3em solid #f2c920;
     border-radius: 0.5em;
 }
-section#monster article#profile div#skills div.skill span.skill_level{
+article#profile div#skills div.skill span.skill_level{
     font-size: 130%;
     position: relative;
     top: -2em;
@@ -135,56 +123,56 @@ section#monster article#profile div#skills div.skill span.skill_level{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 0.6em #000000, 0 0 0.6em #000000, 0 0 0.8em #000000, 0 0 0.8em #000000;
 }
 
-section#monster article#profile div#skills div.skill span.skill_level.maxed{
+article#profile div#skills div.skill span.skill_level.maxed{
     color: #f2c920;
 }
 
-section#monster article#profile div#skills div.skill span.skill_name{
+article#profile div#skills div.skill span.skill_name{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
     margin-top: -2.5em;
     display: block;
     font-weight: bold;
 }
 
-section#monster article#profile div#skills div.skill span.skill_description{
+article#profile div#skills div.skill span.skill_description{
     font-size: 90%;
     font-style: italic;
 }
 
-section#monster article#profile div#skills div.skill span.skill_effects{
+article#profile div#skills div.skill span.skill_effects{
     display: block;
     text-align: center;
     margin-top: 1em;
 }
 
-section#monster article#profile div#skills div.skill span.skill_effects img.effect_img{
+article#profile div#skills div.skill span.skill_effects img.effect_img{
     width: 1.5em;
     height: 1.5em;
     border: 0.1em solid #000000;
     border-radius: 0.5em;
 }
 
-section#monster article#profile div#skills div.skill table.skill_up{
+article#profile div#skills div.skill table.skill_up{
     font-size: 80%;
     margin-top: 1em;
 }
 
-section#monster article#profile div#skills div.skill table.skill_up td{
+article#profile div#skills div.skill table.skill_up td{
     color: #888888;
 }
 
-section#monster article#profile div#skills div.skill table.skill_up td.level{
+article#profile div#skills div.skill table.skill_up td.level{
     font-style: italic;
     padding-right: 0.8em;
     min-width: 3em; 
 }
 
-section#monster article#profile div#skills div.skill table.skill_up td.aquired{
+article#profile div#skills div.skill table.skill_up td.aquired{
     color: #ffffff;
     font-weight: bold;
 }
 
-section#monster article#profile table#skill_averages{
+article#profile table#skill_averages{
     margin: 3em auto 2em auto;
     color: #ffffff;
     font-size: 120%;
@@ -195,17 +183,17 @@ section#monster article#profile table#skill_averages{
     padding-bottom: 2em;
 }
 
-section#monster article#profile table#skill_averages td.title{
+article#profile table#skill_averages td.title{
     padding-left: 4em;
     text-align: right;
 }
-section#monster article#profile table#skill_averages td.value{
+article#profile table#skill_averages td.value{
     padding-right: 4em;
     text-align: left;
     padding-left: 1em;
 }
 
-section#monster article#runes{
+article#runes{
     max-width: 45%;
     display: inline-block;
     vertical-align: top;
@@ -220,65 +208,65 @@ section#monster article#runes{
     padding: 0em;
 }
 @media screen and (max-width : 990px){
-    section#monster article#runes{
+    article#runes{
         width: 95%;
         max-width: 95%;
     }
 }
-section#monster article#runes table#table_runes{
+article#runes table#table_runes{
     border-collapse: collapse;
 }
 
-section#monster article#runes table#table_runes td.stats{
+article#runes table#table_runes td.stats{
     color: #ffffff;
     border-bottom: 0.1em solid #ffffff;
 }
 
-section#monster article#runes table#table_runes td.stats table{
+article#runes table#table_runes td.stats table{
     color: #ffffff;
     font-size: 80%;
 }
 
-section#monster article#runes table#table_runes td.stats table tr.main_stat{
+article#runes table#table_runes td.stats table tr.main_stat{
     font-weight: bold;
     font-size: 110%;
 }
 
-section#monster article#runes table#table_runes td.stats table tr.innate_stat{
+article#runes table#table_runes td.stats table tr.innate_stat{
     font-style: italic;
 }
 
-section#monster article#runes table#table_runes td.stats table td.stat{
+article#runes table#table_runes td.stats table td.stat{
     text-align: right;
 }
-section#monster article#runes table#table_runes td.stats table td.value{
+article#runes table#table_runes td.stats table td.value{
     text-align: left;
     padding-left: 1em;
 }
 
-section#monster article#runes table#table_runes td.stats table td.craft{
+article#runes table#table_runes td.stats table td.craft{
     color: #ff7700;
 }
 
-section#monster article#runes table#table_runes td.details{
+article#runes table#table_runes td.details{
     color: #ffffff;
     border-bottom: 0.1em solid #ffffff;
     padding-left: 0.5em;
 }
 
-section#monster article#runes table#table_runes td.details table.table_details{
+article#runes table#table_runes td.details table.table_details{
     font-size: 80%;
 }
 
-section#monster article#runes table#table_runes td.details table.table_details td.title{
+article#runes table#table_runes td.details table.table_details td.title{
     text-align: right;
 }
-section#monster article#runes table#table_runes td.details table.table_details td.value{
+article#runes table#table_runes td.details table.table_details td.value{
     text-align: left;
     padding-left: 1em;
 }
 
-section#monster article#runes table#table_runes td.details table.table_details span.quality{
+article#runes table#table_runes td.details table.table_details span.quality{
     border: 0.1em solid #000000;
     border-radius: 0.2em;
     font-weight: bold;
@@ -287,46 +275,46 @@ section#monster article#runes table#table_runes td.details table.table_details s
     padding: 0 0.3em;
 }
 
-section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_normal{
+article#runes table#table_runes td.details table.table_details span.quality.quality_normal{
     background-color: #cccccc;
 }
 
-section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_magic{
+article#runes table#table_runes td.details table.table_details span.quality.quality_magic{
     background-color: #55ff55;
 }
 
-section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_rare{
+article#runes table#table_runes td.details table.table_details span.quality.quality_rare{
     background-color: #15c6e1;
 }
 
-section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_hero{
+article#runes table#table_runes td.details table.table_details span.quality.quality_hero{
     background-color: #ad7fa8;
 }
 
-section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_legend{
+article#runes table#table_runes td.details table.table_details span.quality.quality_legend{
     background-color: #f57900;
 }
 
-section#monster article#runes table#table_runes td.details{
+article#runes table#table_runes td.details{
     color: #ffffff;
     border-bottom: 0.1em solid #ffffff;
     padding-left: 0.5em;
 }
 
-section#monster article#runes div#rune_averages{
+article#runes div#rune_averages{
     margin: 5em auto 2em auto;
     text-align: center;
 }
 
-section#monster article#runes div#rune_averages table#table_averages{
+article#runes div#rune_averages table#table_averages{
     margin: auto;
     color: #ffffff;
 }
 
-section#monster article#runes div#rune_averages table#table_averages td.title{
+article#runes div#rune_averages table#table_averages td.title{
     text-align: right;
 }
-section#monster article#runes div#rune_averages table#table_averages td.value{
+article#runes div#rune_averages table#table_averages td.value{
     text-align: left;
     padding-left: 1em;
 }

public/css/monster_info.css

@@ -1,16 +1,16 @@
-section#monster{
+{
     display: block;
     width: 98%;
     margin: auto;
     text-align: center;
 }
 @media screen and (max-width : 990px){
-    section#monster{
+    {
         width: 100%;
     }
 }
 
-section#monster article.stage{
+article.stage{
     margin: 0.5em;
     position: relative;
     border-radius: 1em;
@@ -19,42 +19,30 @@ section#monster article.stage{
     padding: 0.3em;
 }
 
-section#monster article.stage div.profile{
+article.stage div.profile{
     display: inline-block;
     vertical-align: top;
 }
 
-section#monster article.stage div.profile img.monster_image{
-    max-width: 12em;
-    max-height: 12em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 0.5em 1em 0.5em;
-}
-section#monster article.stage div.profile div.details{
+article.stage div.profile div.details{
     display: inline-block;
     vertical-align: top;
     text-align: center;
 }
-section#monster article.stage div.profile div.details span.stars{
+article.stage div.profile div.details span.stars{
     display: block;
 }
-section#monster article.stage div.profile div.details span.stars img.star{
+article.stage div.profile div.details span.stars img.star{
     width: 1em;
     height: 1em;
-    filter: drop-shadow(0 0 0.05em #ffffff);
-    margin: -0.1em;
 }
-section#monster article.stage div.profile div.details span.archetype{
+article.stage div.profile div.details span.archetype{
     color: #ffffff;
     display: block;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
     font-size: 80%;
 }
-section#monster article.stage div.profile h4{
+article.stage div.profile h4{
     color: #ffffff;
     font-weight: bold;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
@@ -62,7 +50,7 @@ section#monster article.stage div.profile h4{
     display: block;
 }
 
-section#monster article.stage table.stats{
+article.stage table.stats{
     font-size: 65%;
     border: 0.1em solid black;
     color: #ffffff;
@@ -74,47 +62,47 @@ section#monster article.stage table.stats{
     max-width: 10em;
 }
 
-section#monster article.stage table.stats td,th{
+article.stage table.stats td,th{
     padding: 0.01em 0.5em;
     border: 0.1em solid #000000;
 }
 
-section#monster article.stage table.stats th{
+article.stage table.stats th{
     font-weight: bold;
     background-color: #00000066;
 }
 
-section#monster article.stage table.stats td{
+article.stage table.stats td{
     font-weight: bold;
     background-color: #ffffff33;
 }
 
-section#monster article.stage div.extra{
+article.stage div.extra{
     display: inline-block;
 }
 
-section#monster article.stage div.extra div.sources span{
+article.stage div.extra div.sources span{
     display: block;
     font-size: 70%;
     margin: 0.5em 0 0 0;
     color: #ffffff;
 }
 
-section#monster article.stage div.extra div.sources img.source{
+article.stage div.extra div.sources img.source{
     width: 2em;
     height: 2em;
     border: 0.1em solid #f2c920;
     border-radius: 0.3em;
 }
 
-section#monster article.stage div.extra div.essences span{
+article.stage div.extra div.essences span{
     display: block;
     font-size: 70%;
     margin: 0.5em 0 0 0;
     color: #ffffff;
 }
 
-section#monster article.stage div.extra div.essences div.essence{
+article.stage div.extra div.essences div.essence{
     position: relative;
     display: inline-block;
     vertical-align: top;
@@ -125,14 +113,14 @@ section#monster article.stage div.extra div.essences div.essence{
     height: 1.3em;
     margin-bottom: 0.1em;
 }
-section#monster article.stage div.extra div.essences div.essence img{
+article.stage div.extra div.essences div.essence img{
     position: absolute;
     top: 0;
     left: 0;
     width: 1.5em;
     height: 1.5em;
 }
-section#monster article.stage div.extra div.essences div.essence span{
+article.stage div.extra div.essences div.essence span{
     position: absolute;
     font-size: 80%;
     top: 0.15em;
@@ -141,11 +129,11 @@ section#monster article.stage div.extra div.essences div.essence span{
     text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
 }
 
-section#monster article.stage div.skills{
+article.stage div.skills{
     text-align: center;
 }
 
-section#monster article.stage div.skills div.skill{
+article.stage div.skills div.skill{
     display: inline-block;
     vertical-align: top;
     margin: 0.5em;
@@ -154,49 +142,49 @@ section#monster article.stage div.skills div.skill{
     max-width: 20%;
 }
 
-section#monster article.stage div.skills div.skill img.skill_img{
+article.stage div.skills div.skill img.skill_img{
     width: 4em;
     height: 4em;
     border: 0.2em solid #f2c920;
     border-radius: 0.4em;
 }
 
-section#monster article.stage div.skills div.skill span.skill_name{
+article.stage div.skills div.skill span.skill_name{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
     display: block;
     font-weight: bold;
     font-size: 90%;
 }
 
-section#monster article.stage div.skills div.skill span.skill_description{
+article.stage div.skills div.skill span.skill_description{
     font-size: 70%;
     font-style: italic;
 }
 
-section#monster article.stage div.skills div.skill span.skill_effects{
+article.stage div.skills div.skill span.skill_effects{
     display: block;
     text-align: center;
     margin-top: 1em;
 }
 
-section#monster article.stage div.skills div.skill span.skill_effects img.effect_img{
+article.stage div.skills div.skill span.skill_effects img.effect_img{
     width: 1.5em;
     height: 1.5em;
     border: 0.1em solid #000000;
     border-radius: 0.5em;
 }
 
-section#monster article.stage div.skills div.skill table.skill_up{
+article.stage div.skills div.skill table.skill_up{
     font-size: 70%;
     margin-top: 1em;
 }
 
-section#monster article.stage div.skills div.skill table.skill_up td{
+article.stage div.skills div.skill table.skill_up td{
     color: #ffffff;
     padding: 0.03em 0.3em;
 }
 
-section#monster article.stage div.skills div.skill table.skill_up td.level{
+article.stage div.skills div.skill table.skill_up td.level{
     font-style: italic;
     padding-right: 0.8em;
     min-width: 3em; 

public/css/monsters.css

@@ -1,121 +1,8 @@
-section#filters{
-    width: 80%;
-    text-align:center;
-    margin: 1em auto 2em auto;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-    background-color: #aa8866;
-}
-section#filters div.filter{
-    vertical-align: top;
-    margin: 0.7em;
-    display: inline-block;
-    text-align: center;
-}
-section#filters div.filter span{
-    color: #ffffff;
-}
-section#filters div.filter input{
-    margin-top: 0.5em;
-}
-section#filters div#filter_stars input{
-    width: 3em;
-}
-section#filters div#filter_apply{
-    text-align: center;
-    margin: 2em auto 1em auto;
-}
-
-section#list{
-    display: block;
-    width: 80%;
-    margin: auto;
-    text-align: center;
-}
-@media screen and (max-width : 990px){
-    section#list{
-        width: 100%;
-    }
-}
-
-section#list div.monster{
+section.list div.monster{
     display: inline-block;
-    width: 7em;
-    height: 7em;
-    border: 0.2em solid #000000;
-    margin: 0.5em;
-    position: relative;
-    border-radius: 15%;
-}
-
-section#list div.monster.unowned{
-    background-color: #000000;
-    filter: brightness(50%);
-}
-@media screen and (max-width : 990px){
-    section#list div.monster{
-        height: 6em;
-        width: 6em;
-        border: 0.1em solid #000000;
-        margin: 0.2em;
-        border-radius: 10%;
-    }
-}
-
-section#list div.monster span.stars{
-    position: absolute;
-/*     z-index: 1; */
-    top: 0.4em;
-    right: 0.5em;
-}
-@media screen and (max-width : 990px){
-    section#list div.monster span.stars{
-        top: 0.3em;
-        right: 0.4em;
-    }
-}
-
-section#list div.monster span.stars img.star{
-    width: 1em;
-    height: 1em;
-    margin-left: -0.6em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-@media screen and (max-width : 990px){
-    section#list div.monster span.stars img.star{
-        width: 0.9em;
-        height: 0.9em;
-        margin-left: -0.7em;
-    }
-}
-
-section#list div.monster img.monster{
-    width: 6.5em;
-    height: 6.5em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-}
-
-section#list div.monster span.level{
-    position: relative;
-    bottom: 1.6em;
-    font-weight: bold;
-    color: #000;
-    text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
-    font-size: 1.4em;
-    right: -0.8em;
-}
-@media screen and (max-width : 990px){
-    section#list div.monster img.monster{
-        width: 5.6em;
-        height: 5.6em;
-        border-width: 0.2em;
-        border-radius: 10%;
-    }
 }
 
-section#list div.monster div.monster_tooltip{
+section.list div.monster div.monster_tooltip{
     position: absolute;
     top: 0;
     left: 6em;
@@ -127,11 +14,11 @@ section#list div.monster div.monster_tooltip{
     padding: 0.5em;
 }
 
-section#list div.monster:hover div.monster_tooltip{
+section.list div.monster:hover div.monster_tooltip{
     display: block;
 }
 
-section#list div.monster div.monster_tooltip h4{
+section.list div.monster div.monster_tooltip h4{
     color: #ffffff;
     font-weight: bold;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
@@ -139,30 +26,30 @@ section#list div.monster div.monster_tooltip h4{
     display: block;
 }
 
-section#list div.monster div.monster_tooltip table.stats{
+section.list div.monster div.monster_tooltip table.stats{
     font-size: 80%;
     border: 0.1em solid black;
     color: #ffffff;
 }
 
-section#list div.monster div.monster_tooltip table.stats th{
+section.list div.monster div.monster_tooltip table.stats th{
     font-weight: bold;
 }
 
-section#list div.monster div.monster_tooltip table.stats td.extra{
+section.list div.monster div.monster_tooltip table.stats td.extra{
     color: #aaaaff;
 }
 
-section#list div.monster div.monster_tooltip table.stats td.total{
+section.list div.monster div.monster_tooltip table.stats td.total{
     color: #f2c920;
     font-weight: bold;
 }
 
-section#list div.monster div.monster_tooltip div.skills{
+section.list div.monster div.monster_tooltip div.skills{
     text-align: center;
 }
 
-section#list div.monster div.monster_tooltip div.skills div.skill{
+section.list div.monster div.monster_tooltip div.skills div.skill{
     display: inline-block;
     vertical-align: top;
     max-width: 22%;
@@ -172,13 +59,13 @@ section#list div.monster div.monster_tooltip div.skills div.skill{
     text-align: center;
 }
 
-section#list div.monster div.monster_tooltip div.skills div.skill img{
+section.list div.monster div.monster_tooltip div.skills div.skill img{
     width: 90%;
     height: 90%;
     border: 0.3em solid #f2c920;
     border-radius: 0.5em;
 }
-section#list div.monster div.monster_tooltip div.skills div.skill span.skill_level{
+section.list div.monster div.monster_tooltip div.skills div.skill span.skill_level{
     font-size: 180%;
     position: relative;
     top: -2em;
@@ -186,205 +73,12 @@ section#list div.monster div.monster_tooltip div.skills div.skill span.skill_lev
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 0.6em #000000, 0 0 0.6em #000000, 0 0 0.8em #000000, 0 0 0.8em #000000;
 }
 
-section#list div.monster div.monster_tooltip div.skills div.skill span.skill_level.maxed{
+section.list div.monster div.monster_tooltip div.skills div.skill span.skill_level.maxed{
     color: #f2c920;
 }
 
-section#list div.monster div.monster_tooltip div.skills div.skill span.skill_name{
+section.list div.monster div.monster_tooltip div.skills div.skill span.skill_name{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
     margin-top: -4em;
     display: block;
 }
-
-div#viewer{
-    width: 60%;
-    height: 80%;
-    position: fixed;
-    left: 22%;
-    top: 10%;
-    z-index: 20;
-    display: none;
-    padding: 0;
-}
-@media screen and (max-width : 990px){
-    div#viewer{
-        width: 90%;
-        height: 90%;
-        left: 3%;
-        top: 5%;
-    }
-}
-
-div#viewer div#viewer_wait{
-    width: 100%;
-    margin: 4em 0 0 0;
-    text-align: center;
-}
-div#viewer div#viewer_info{
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    display: none;
-    text-align: center;
-}
-
-div#viewer div#viewer_info table#monster_header{
-    width: 90%;
-    margin: auto;
-    border-collapse: collapse;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header{
-        width: 100%;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header img.monster_img{
-    width: 6.5em;
-    height: 6.5em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    margin: 0.2em 0.8em;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header img.monster_img{
-        width: 5em;
-        height: 5em;
-        border-width: 0.2em;
-        border-radius: 10%;
-        margin: 0.1em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header div#monster_stars{
-    margin: 0.5em auto;
-    padding: 0.3em;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header div#monster_stars{
-        margin: 0.3em auto;
-        padding: 0.1em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header div#monster_stars img.monster_star{
-    width: 2em;
-    height: 2em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header div#monster_stars img.monster_star{
-        width: 1.6em;
-        height: 1.6em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_skills{
-    width: 90%;
-    margin: 2em auto 2em auto;
-    border-collapse: collapse;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-    background-color: #aa8866;
-}
-
-div#viewer div#viewer_info table#monster_skills td{
-    vertical-align: top;
-    padding: 0.1em;
-    text-align: center;
-    width: 1%;
-}
-
-div#viewer a.control_close{
-    float: right;
-}
-
-div#viewer a.control_close img{
-    width: 1.5em;
-    height: 1.5em;
-    margin: 0.5em;
-}
-
-div#viewer div#viewer_info table#monster_stats{
-    width: 90%;
-    margin: auto;
-    border-collapse: collapse;
-    border: 0.1em solid #000000;
-}
-
-div#viewer div#viewer_info table#monster_stats td.even0{
-    background-color: #ffffff;
-}
-div#viewer div#viewer_info table#monster_stats td.even1{
-    background-color: #dddddd;
-}
-
-div#viewer div#viewer_info table#monster_stats td, th{
-    text-align: center;
-    width: 1%;
-}
-
-div#viewer div#viewer_info table#monster_stats tr#stats_header_names th{
-    background-color: #aaaaaa;
-    font-size: 90%;
-}
-
-div#viewer div#viewer_info table#monster_stats tr#stats_header_ranges th{
-    background-color: #aaaaaa;
-    color: #333333;
-    font-size: 70%;
-}
-
-div#viewer div#viewer_info table#monster_stats td img.star{
-    width: 0.5em;
-    height: 0.5em;
-    margin: -0.2em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-
-div#viewer div#viewer_info table#monster_stats td span.stat{
-    display: block;
-    margin: 0;
-    text-align: center;
-    font-size: 80%;
-}
-
-div#viewer div#viewer_info table#monster_stats td span.stat.awake{
-    color: #aa00ff;
-    font-style: italic;
-}
-
-div#viewer div#viewer_info div#monster_location{
-    margin: 1em 20%;
-}
-
-div#viewer div#viewer_info div#monster_awake{
-    text-align: center;
-}
-div#viewer div#viewer_info div#monster_awake table{
-    margin: auto;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence{
-    text-align: center;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence img{
-    display: block;
-    border-width: 0.2em;
-    border-style: solid;
-    border-radius: 50%;
-    width: 2.5em;
-    height: 2.5em;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence span{
-    display: block;
-    text-align: right;
-    margin: -1em 0.2em 0 0;
-    color: #ffffff;
-    text-shadow: 0 0 0.2em #000000;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}

public/css/report.css

@@ -1,37 +1,23 @@
 /* Main reports page. */
-body#body_reports section{
-    width: 90%;
-    margin: auto;
-    padding: 0;
-    text-align: center;
-}
-
-body#body_reports section article.report{
+body#body_reports section.report{
     width: 40%;
     display: inline-block;
+    vertical-align: top;
     margin: 0.5em;
-    border-radius: 15%;
-    background: #351e0b;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    padding: 0.5em;
-    text-align: left;
 }
-@media screen and (max-width : 990px){
-    body#body_reports section article.report{
-        width: 90%;
-        display: block;
-    }
+
+body#body_reports section.report article{
+    text-align: left;
 }
 
-body#body_reports section article.report h3{
+body#body_reports section.report article h3{
     color: #ffffff;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
     font-size: 190%;
     margin: 0.2em;
 }
 
-body#body_reports section article.report img{
+body#body_reports section.report article img{
     float: right;
     height: 5em;
     width: 5em;
@@ -41,11 +27,11 @@ body#body_reports section article.report img{
     border: 0.2em solid #777777;
 }
 
-body#body_reports section article.report p{
+body#body_reports section.report article p{
     color: #ffffff;
 }
 
-body#body_reports section article.report div.report_filters{
+body#body_reports section.report article div.report_filters{
     width: 80%;
     text-align:center;
     margin: 1em auto 2em auto;
@@ -53,223 +39,100 @@ body#body_reports section article.report div.report_filters{
     border-radius: 0.5em;
     background-color: #aa8866;
 }
-body#body_reports section article.report div.report_filters div.filter{
+body#body_reports section.report article div.report_filters div.filter{
     vertical-align: top;
     margin: 0.7em;
     display: inline-block;
     text-align: center;
 }
-body#body_reports section article.report div.report_filters div.filter span{
+body#body_reports section.report article div.report_filters div.filter span{
     color: #ffffff;
 }
-body#body_reports section article.report div.report_filters div.filter input{
+body#body_reports section.report article div.report_filters div.filter input{
     margin-top: 0.5em;
 }
-body#body_reports section article.report div.report_filters div#filter_stars input{
+body#body_reports section.report article div.report_filters div#filter_stars input{
     width: 3em;
 }
-body#body_reports section article.report div.report_filters div#filter_apply{
+body#body_reports section.report article div.report_filters div#filter_apply{
     text-align: center;
     margin: 2em auto 1em auto;
 }
 
-
-/* Skillup report page. */
-body#body_report_skillup section#filters{
-    width: 80%;
-    text-align:center;
-    margin: 1em auto 2em auto;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-    background-color: #aa8866;
-}
-body#body_report_skillup section#filters div.filter{
-    vertical-align: top;
-    margin: 0.7em;
+body#body_report_skillup section.content{
     display: inline-block;
-    text-align: center;
-}
-body#body_report_skillup section#filters div.filter span{
-    color: #ffffff;
-}
-body#body_report_skillup section#filters div.filter input{
-    margin-top: 0.5em;
-}
-body#body_report_skillup section#filters div#filter_stars input{
-    width: 3em;
-}
-body#body_report_skillup section#filters div#filter_apply{
-    text-align: center;
-    margin: 2em auto 1em auto;
-}
-
-body#body_report_skillup section#list{
-    display: block;
-    width: 80%;
-    margin: auto;
-    text-align: center;
-}
-
-body#body_report_skillup section#list div.monster{
-    display: block;
-    margin: 0.5em;
-    position: relative;
-    border-radius: 15%;
-    background: #351e0b;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    padding: 0.5em;
+    min-width: 75%;
+    margin: 2em auto 0 auto;
     text-align: left;
-}
-@media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster{
-        margin: 0.1em;
-    }
+    width: auto;
 }
 
-body#body_report_skillup section#list div.monster div.profile{
-    width: 35%;
+body#body_report_skillup section.content div.monster div.profile{
+    text-align: center;
     display: inline-block;
     vertical-align: top;
 }
 @media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.profile{
+    body#body_report_skillup section.content div.monster div.profile{
         text-align: center;
         width: 30%;
     }
 }
 
-body#body_report_skillup section#list div.monster div.profile img#monster_image{
-    max-width: 12em;
-    max-height: 12em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 1.5em 1.5em 1.5em;
-}
-@media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.profile img#monster_image{
-        display: block;
-        width: 5em;
-        height: 5em;
-        margin: 0.5em auto 0.1em auto;
-    }
-}
-body#body_report_skillup section#list div.monster div.profile div#details{
-    display: inline-block;
-    vertical-align: top;
-    text-align: center;
-}
-@media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.profile div#details{
-    }
-}
-body#body_report_skillup section#list div.monster div.profile div#details h1{
-    color: #ffffff;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
-    font-size: 190%;
-    margin: 0.2em;
-}
-@media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.profile div#details h1{
-        font-size: 140%;
-        margin: -0.5em 0 0 0;
-    }
-}
-body#body_report_skillup section#list div.monster div.profile div#details span.stars{
-    display: block;
-}
-@media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.profile div#details span.stars{
-        display: inline-block;
-        vertical-align: bottom;
-        /*top: -7.1em;
-        position: relative;
-        left: -0.3em;*/
-    }
-}
-body#body_report_skillup section#list div.monster div.profile div#details span.stars img.star{
-    width: 1.5em;
-    height: 1.5em;
-    filter: drop-shadow(0 0 0.05em #ffffff);
-    margin: -0.1em;
-}
-@media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.profile div#details span.stars img.star{
-        width: 1em;
-        height: 1em;
-        margin: -0.1em -0.6em -0.1em -0.1em;
-        filter: drop-shadow(0 0 0.01em #000000) drop-shadow(0 0 0.01em #000000) drop-shadow(0 0 0.01em #000000) drop-shadow(0 0 0.02em #000000)
-    }
-}
-body#body_report_skillup section#list div.monster div.profile div#details span.level{
-    color: #ffffff;
-    display: block;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
-}
-@media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.profile div#details span.level{
-        font-size: 70%;
-        display: inline-block;
-        vertical-align: bottom;
-        padding-left: 1em;
-        /*margin: 0;
-        top: -7.1em;
-        position: relative;*/
-    }
-}
-
-body#body_report_skillup section#list div.monster div.skills{
+body#body_report_skillup section.content div.monster div.skills{
     text-align: center;
     display: inline-block;
-    width: 30%;
+    width: 60%;
 }
 @media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.skills{
+    body#body_report_skillup section.content div.monster div.skills{
         width: 65%;
     }
 }
 
-body#body_report_skillup section#list div.monster div.skills div.skill{
+body#body_report_skillup section.content div.monster div.skills div.skill{
     display: inline-block;
     vertical-align: top;
-    max-width: 22%;
+    width: 22%;
     margin: 0.5em;
     color: #ffffff;
     text-align: center;
+    position: relative;
 }
 @media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster div.skills div.skill{
+    body#body_report_skillup section.content div.monster div.skills div.skill{
         font-size: 80%;
     }
 }
 
-body#body_report_skillup section#list div.monster div.skills div.skill img{
+body#body_report_skillup section.content div.monster div.skills div.skill img{
     width: 3em;
     height: 3em;
     border: 0.1em solid #f2c920;
     border-radius: 0.5em;
+    margin: auto;
+    display: block;
 }
-body#body_report_skillup section#list div.monster div.skills div.skill span.skill_level{
+body#body_report_skillup section.content div.monster div.skills div.skill span.skill_level{
     font-size: 110%;
     position: relative;
-    top: -2em;
+    top: -1.5em;
     right: -0.5em;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 0.6em #000000, 0 0 0.6em #000000, 0 0 0.8em #000000, 0 0 0.8em #000000;
 }
 
-body#body_report_skillup section#list div.monster div.skills div.skill span.skill_level.maxed{
+body#body_report_skillup section.content div.monster div.skills div.skill span.skill_level.maxed{
     color: #f2c920;
 }
 
-body#body_report_skillup section#list div.monster div.skills div.skill span.skill_name{
+body#body_report_skillup section.content div.monster div.skills div.skill span.skill_name{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
-    margin-top: -2.2em;
+    top: 3.2em;
+    display: block;
+    margin-top: -1.3em;
 }
 
-body#body_report_skillup section#list div.monster table#skill_averages{
+body#body_report_skillup section.content div.monster table#skill_averages{
     margin: auto auto auto 2em;
     color: #ffffff;
     display: inline-block;
@@ -277,7 +140,7 @@ body#body_report_skillup section#list div.monster table#skill_averages{
     max-width: 30%;
 }
 @media screen and (max-width : 990px){
-    body#body_report_skillup section#list div.monster table#skill_averages{
+    body#body_report_skillup section.content div.monster table#skill_averages{
         display: block;
         margin: auto;
         font-size: 80%;
@@ -285,99 +148,45 @@ body#body_report_skillup section#list div.monster table#skill_averages{
 
 }
 
-body#body_report_skillup section#list div.monster table#skill_averages td.title{
+body#body_report_skillup section.content div.monster table#skill_averages td.title{
     text-align: right;
 }
-body#body_report_skillup section#list div.monstertable#skill_averages td.value{
+body#body_report_skillup section.content div.monstertable#skill_averages td.value{
     text-align: left;
     padding-left: 1em;
 }
 
 
 
-/* Rune upgrades reportpage */
-body#body_report_runeupgrade section#list{
-    display: block;
-    width: 98%;
-    margin: auto;
-    text-align: center;
-}
-@media screen and (max-width : 990px){
-    body#body_report_runeupgrade section#list{
-        width: 100%;
-    }
-}
-
-body#body_report_runeupgrade section#list article{
-    display: block;
-    vertical-align: top;
-    border: 0.2em solid #000000;
-    margin: 0.5em;
-    position: relative;
-    border-radius: 1em;
-    background: #351e0b;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    padding: 0.5em;
+body#body_report_runeupgrade section.content article{
+    text-align: left;
 }
 
 @media screen and (max-width : 990px){
-    body#body_report_runeupgrade section#list article{
+    body#body_report_runeupgrade section.content article{
         width: 95%;
         max-width: 95%;
         margin: 0.2em auto;
         display: block;
     }
 }
-body#body_report_runeupgrade section#list article div.monster img#monster_image{
-    max-width: 12em;
-    max-height: 12em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    display: inline-block;
+
+body#body_report_runeupgrade section.content article div.monster{
+    display:inline-block;
     vertical-align: top;
-    margin: 0 1.5em 1.5em 1.5em;
+    width: 10em;
+    max-width: 15%;
 }
-body#body_report_runeupgrade section#list article div.monster div#details{
-    display: inline-block;
+
+body#body_report_runeupgrade section.content article div.monster_runes{
+    display:inline-block;
     vertical-align: top;
-    text-align: center;
-}
-body#body_report_runeupgrade section#list article div.monster div#details h1{
-    color: #ffffff;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
-    font-size: 190%;
-    margin: 0.2em;
-}
-body#body_report_runeupgrade section#list article div.monster div#details span.stars{
-    display: block;
-}
-body#body_report_runeupgrade section#list article div.monster div#details span.stars img.star{
-    width: 1.5em;
-    height: 1.5em;
-    filter: drop-shadow(0 0 0.05em #ffffff);
-    margin: -0.1em;
-}
-body#body_report_runeupgrade section#list article div.monster div#details span.level{
-    color: #ffffff;
-    display: block;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
-}
-body#body_report_runeupgrade section#list article div.monster h4{
-    color: #ffffff;
-    font-weight: bold;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
-    margin: 0.1em;
-    display: block;
+    max-width: 80%;
 }
 
-
-body#body_report_runeupgrade section#list article table.rune{
-    /*max-width: 45%;*/
+body#body_report_runeupgrade section.content article div.monster_runes table.rune{
     display: inline-block;
     vertical-align: top;
-    /*width: 7em;*/
     border: 0.2em solid #000000;
     margin: 0.5em;
     position: relative;
@@ -386,117 +195,120 @@ body#body_report_runeupgrade section#list article table.rune{
     border: 0.2em solid #f2c920;
     border-radius: 0.5em;
     padding: 0em;
-    font-size: 70%;
+    font-size: 80%;
 }
 @media screen and (max-width : 990px){
-    body#body_report_runeupgrade section#list article table.rune{
+    body#body_report_runeupgrade section.content article div.monster_runes table.rune{
         width: 95%;
         max-width: 95%;
     }
 }
-body#body_report_runeupgrade section#list article table.rune{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune{
     border-collapse: collapse;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.stats{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.stats{
     color: #ffffff;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.stats table{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.stats table{
     color: #ffffff;
     font-size: 80%;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.stats table tr.main_stat{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.stats table tr.main_stat{
     font-weight: bold;
     font-size: 110%;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.stats table tr.innate_stat{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.stats table tr.innate_stat{
     font-style: italic;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.stats table td.stat{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.stats table td.stat{
     text-align: right;
 }
-body#body_report_runeupgrade section#list article table.rune td.stats table td.value{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.stats table td.value{
     text-align: left;
     padding-left: 1em;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.stats table td.craft{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.stats table td.craft{
     color: #ff7700;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details{
     color: #ffffff;
     padding-left: 0.5em;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details{
     font-size: 80%;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details td.title{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details td.title{
     text-align: right;
 }
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details td.value{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details td.value{
     text-align: left;
     padding-left: 1em;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details span.quality{
     border: 0.1em solid #000000;
     border-radius: 0.2em;
     font-weight: bold;
     color: #ffffff;
     text-shadow: 0 0 0.1em #000000;
     padding: 0 0.3em;
+    display: block;
+    width: 5em;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_normal{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details span.quality.quality_normal{
     background-color: #cccccc;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_magic{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details span.quality.quality_magic{
     background-color: #55ff55;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_rare{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details span.quality.quality_rare{
     background-color: #15c6e1;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_hero{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details span.quality.quality_hero{
     background-color: #ad7fa8;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_legend{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details table.table_details span.quality.quality_legend{
     background-color: #f57900;
 }
 
-body#body_report_runeupgrade section#list article table.rune td.details{
+body#body_report_runeupgrade section.content article div.monster_runes table.rune td.details{
     color: #ffffff;
     padding-left: 0.5em;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives{
     padding-bottom: 1em;
     margin-top: -2em;
     margin-left: 2.5em;
+    margin-bottom: 1em;
     padding-left: 1em;
     padding-bottom: 1em;
     border-left: 0.3em solid #ffffff;
     border-bottom: 0.3em solid #ffffff;
     padding-top: 2em;
     border-bottom-left-radius: 1em;
-    font-size: 50%;
+    border-bottom-right-radius: 1em;
+    font-size: 70%;
+    background: linear-gradient(47deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 50%);
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative{
-    /*max-width: 45%;*/
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative{
     display: inline-block;
     vertical-align: top;
-    /*width: 7em;*/
     border: 0.2em solid #000000;
     margin: 0.5em 2em 0.5em 0.5em;
     position: relative;
@@ -505,94 +317,97 @@ body#body_report_runeupgrade section#list article div.alternatives table.alterna
     border: 0.2em solid #f2c920;
     border-radius: 0.5em;
     padding: 0em;
+    max-width: 90%;
 }
 @media screen and (max-width : 990px){
-    body#body_report_runeupgrade section#list article div.alternatives table.alternative{
+    body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative{
         width: 95%;
         max-width: 95%;
     }
 }
-body#body_report_runeupgrade section#list article div.alternatives table.alternative{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative{
     border-collapse: collapse;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.stats{
     color: #ffffff;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.stats table{
     color: #ffffff;
     font-size: 80%;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table tr.main_stat{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.stats table tr.main_stat{
     font-weight: bold;
     font-size: 110%;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table tr.innate_stat{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.stats table tr.innate_stat{
     font-style: italic;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table td.stat{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.stats table td.stat{
     text-align: right;
 }
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table td.value{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.stats table td.value{
     text-align: left;
     padding-left: 1em;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table td.craft{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.stats table td.craft{
     color: #ff7700;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details{
     color: #ffffff;
     padding-left: 0.5em;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details{
     font-size: 80%;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details td.title{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details td.title{
     text-align: right;
 }
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details td.value{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details td.value{
     text-align: left;
     padding-left: 1em;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details span.quality{
     border: 0.1em solid #000000;
     border-radius: 0.2em;
     font-weight: bold;
     color: #ffffff;
     text-shadow: 0 0 0.1em #000000;
     padding: 0 0.3em;
+    display: block;
+    width: 5em;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_normal{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details span.quality.quality_normal{
     background-color: #cccccc;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_magic{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details span.quality.quality_magic{
     background-color: #55ff55;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_rare{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details span.quality.quality_rare{
     background-color: #15c6e1;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_hero{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details span.quality.quality_hero{
     background-color: #ad7fa8;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_legend{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details table.table_details span.quality.quality_legend{
     background-color: #f57900;
 }
 
-body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details{
+body#body_report_runeupgrade section.content article div.monster_runes div.alternatives table.alternative td.details{
     color: #ffffff;
     padding-left: 0.5em;
 }

public/css/runes.css

@@ -1,95 +1,47 @@
-section#filters{
-    width: 80%;
-    text-align:center;
-    margin: 1em auto 2em auto;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-    background-color: #aa8866;
-}
-section#filters div.filter{
-    vertical-align: top;
-    margin: 0.7em;
-    display: inline-block;
-    text-align: center;
-}
-section#filters div.filter span{
-    color: #ffffff;
-}
-section#filters div.filter input{
-    margin-top: 0.5em;
-}
-section#filters div.filter_stars input{
-    width: 3em;
-}
-section#filters div.filter select#filter_type{
-    height: 26em;
+section.filters td.filter select#filter_type{
+    height: 32em;
     overflow: hidden;
 }
-section#filters div#filter_apply{
-    text-align: center;
-    margin: 2em auto 1em auto;
+section.filters td.filter select#filter_slot{
+    height: 9.5em;
+    overflow: hidden;
 }
-
-section#list{
-    display: block;
-    width: 98%;
-    margin: auto;
-    text-align: center;
+section.filters td.filter select#filter_main_stat{
+    height: 17em;
+    overflow: hidden;
 }
-@media screen and (max-width : 990px){
-    section#list{
-        width: 100%;
-    }
+section.filters td.filter select#filter_sub_stat{
+    height: 17em;
+    overflow: hidden;
 }
 
-section#list article{
-    border: 0.2em solid #000000;
-    margin: 0.5em;
-    position: relative;
-    border-radius: 1em;
-    background: #351e0b;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    padding: 0.5em;
-    text-align: center;
-}
-section#list article h4{
-    margin: -0.5em -0.5em 1em -0.5em;
-    border-bottom: 0.2em solid #f2c920;
-    background-color: #000000bb;
-    color: #ffffff;
-}
-section#list article h4 img, span{
+section h2 img, span{
     display: inline-block;
     vertical-align: middle;
 }
-section#list article h4 span{
-    font-size: 130%;
-    font-weight: bold;
-}
-section#list article h4 img{
-    height: 2em;
+section h2 img{
+    height: 1.5em;
 }
-section#list article h4 img.group_image_1{
+section h2 img.group_image_1{
     transform: rotate(0deg);
 }
-section#list article h4 img.group_image_2{
+section h2 img.group_image_2{
     transform: rotate(57deg);
 }
-section#list article h4 img.group_image_3{
+section h2 img.group_image_3{
     transform: rotate(123deg);
 }
-section#list article h4 img.group_image_4{
+section h2 img.group_image_4{
     transform: rotate(180deg);
 }
-section#list article h4 img.group_image_5{
+section h2 img.group_image_5{
     transform: rotate(237deg);
 }
-section#list article h4 img.group_image_6{
+section h2 img.group_image_6{
     transform: rotate(303deg);
 }
 
-section#list article table.rune{
+section article table.rune{
     border-collapse: collapse;
     display: inline-block;
     vertical-align: top;
@@ -98,108 +50,114 @@ section#list article table.rune{
     border-radius: 1em;
     margin: 0.5em;
 }
-section#list article table.rune{
+section article table.rune{
     font-size: 70%;
 }
-section#list article table.rune td.icon div.assigned{
-    max-width: 3em;
-    max-height: 3em;
+section article table.rune td.icon div.assigned{
+    max-width: 2.5em;
+    max-height: 2.5em;
     position: absolute;
     left: 0.5em;
-    bottom: 0.85em;
+    bottom: 1em;
 }
-section#list article table.rune td.icon div.assigned img.monster_image{
-    width: 3em;
-    height: 3em;
+section article table.rune td.icon div.assigned img.monster_image{
+    width: 2.5em;
+    height: 2.5em;
     border-style: solid;
     border-width: 0.2em;
     border-radius: 15%;
 }
-section#list article table.rune td.icon{
+section article table.rune td.icon{
     border-bottom: 0.2em solid #777777;
     border-left: 0.2em solid #777777;
     border-top: 0.2em solid #777777;
     background-color: #ffffff44;
 }
-section#list article table.rune td.stats{
+section article table.rune td.icon div.rune_panel{
+    font-size: 70%;
+}
+section article table.rune td.stats{
     color: #ffffff;
     border-bottom: 0.2em solid #777777;
     border-top: 0.2em solid #777777;
     background-color: #ffffff44;
+    width: 7.5em;
 }
 
-section#list article table.rune td.stats table{
+section article table.rune td.stats table{
     color: #ffffff;
     font-size: 80%;
 }
 
-section#list article table.rune td.stats table tr.main_stat{
+section article table.rune td.stats table tr.main_stat{
     font-weight: bold;
     font-size: 110%;
 }
 
-section#list article table.rune td.stats table tr.innate_stat{
+section article table.rune td.stats table tr.innate_stat{
     font-style: italic;
 }
 
-section#list article table.rune td.stats table td.stat{
+section article table.rune td.stats table td.stat{
     text-align: right;
 }
-section#list article table.rune td.stats table td.value{
+section article table.rune td.stats table td.value{
     text-align: left;
     padding-left: 1em;
 }
 
-section#list article table.rune td.stats table td.craft{
+section article table.rune td.stats table td.craft{
     color: #ff7700;
 }
 
-section#list article table.rune td.details{
+section article table.rune td.details{
     color: #ffffff;
     padding-left: 0.5em;
     border-bottom: 0.2em solid #777777;
     border-right: 0.2em solid #777777;
     border-top: 0.2em solid #777777;
     background-color: #ffffff44;
+    width: 15em;
 }
 
-section#list article table.rune td.details table.table_details{
+section article table.rune td.details table.table_details{
     font-size: 80%;
 }
 
-section#list article table.rune td.details table.table_details td.title{
+section article table.rune td.details table.table_details td.title{
     text-align: right;
 }
-section#list article table.rune td.details table.table_details td.value{
+section article table.rune td.details table.table_details td.value{
     text-align: left;
     padding-left: 1em;
 }
 
-section#list article table.rune td.details table.table_details span.quality{
+section article table.rune td.details table.table_details span.quality{
     border: 0.1em solid #000000;
     border-radius: 0.2em;
     font-weight: bold;
     color: #ffffff;
     text-shadow: 0 0 0.1em #000000;
     padding: 0 0.3em;
+    width: 5em;
 }
 
-section#list article table.rune td.details table.table_details span.quality.quality_normal{
+section article table.rune td.details table.table_details span.quality.quality_normal{
     background-color: #cccccc;
 }
 
-section#list article table.rune td.details table.table_details span.quality.quality_magic{
+section article table.rune td.details table.table_details span.quality.quality_magic{
     background-color: #55ff55;
 }
 
-section#list article table.rune td.details table.table_details span.quality.quality_rare{
+section article table.rune td.details table.table_details span.quality.quality_rare{
     background-color: #15c6e1;
 }
 
-section#list article table.rune td.details table.table_details span.quality.quality_hero{
+section article table.rune td.details table.table_details span.quality.quality_hero{
     background-color: #ad7fa8;
 }
 
-section#list article table.rune td.details table.table_details span.quality.quality_legend{
+section article table.rune td.details table.table_details span.quality.quality_legend{
     background-color: #f57900;
 }

public/css/ui.css

@@ -87,6 +87,23 @@
     background-color: #e21af4;
 }
 
+/* Star colors. */
+img.star{
+    
+}
+img.star.star_silver{
+    filter: sepia(100%) saturate(500%) grayscale(100%) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+}
+img.star.star_gold{
+    filter: sepia(100%) saturate(500%) hue-rotate(10deg) saturate(200%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
+}
+img.star.star_purple{
+    filter: sepia(100%) saturate(500%) hue-rotate(250deg) saturate(1500%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
+}
+img.star.star_red{
+    filter: sepia(100%) saturate(500%) hue-rotate(320deg) saturate(500%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
+}
+
 html {
     height: 100%;
 }
@@ -95,6 +112,7 @@ body{
     padding: 0;
     margin: 0;
     background-color: #000000;
+    text-align: center;
 }
 a{
     color: #08fff6;
@@ -117,40 +135,15 @@ a:hover{
     color: #cccccc;
     text-shadow: 0 0 0.1em #000000;
 }
-img.slider{
-    width: 1em;
-    height: 1em;
-    vertical-align: middle;
-    transition: all .3s ease-in-out;
-}
-img.loader{
-    animation: spin 2s linear infinite;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-div#cover{ /* Page cofer for opening floating windows. */
-    display: none;
-    background-color: #000000;
-    opacity: 0;
-    transition: opacity .3s ease-in-out;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10;
-}
 header{
-    border-bottom: 0.3em solid #f2c920;
-    border-left: 0.3em solid #f2c920;
-    border-right: 0.3em solid #f2c920;
-    border-bottom-right-radius: 2em;
-    border-bottom-left-radius: 2em;
-    box-shadow: 0 0 1em #ffffff;
-    margin: 0 0 2em 0;
+    border-bottom: 0.2em solid #f2c920;
+    border-left: 0.2em solid #f2c920;
+    border-right: 0.2em solid #f2c920;
+    border-bottom-right-radius: 1.5em;
+    border-bottom-left-radius: 1.5em;
+    margin: 0 0 1em 0;
     background-color: #884444;
+    text-align: left;
 }
 header div#logo{
     margin: auto;
@@ -189,16 +182,26 @@ header nav a:hover{
     color: #333333;
     text-shadow: 0 0 0.7em #ffffff;
 }
+@media screen and (max-width : 990px){
+    header nav a{
+        font-size: 1.2em;
+        margin: 0.2em 0.5em;
+        display: block;
+    }
+    header nav a:hover{
+        color: #ffffff;
+        text-shadow: 0 0 0 #000000;
+    }
+}
 footer{
     color: #ffffff;
     font-size: 80%;
     text-align: center;
-    border-top: 0.3em solid #f2c920;
-    border-left: 0.3em solid #f2c920;
-    border-right: 0.3em solid #f2c920;
-    border-top-right-radius: 2em;
-    border-top-left-radius: 2em;
-    box-shadow: 0 0 1em #ffffff;
+    border-top: 0.2em solid #f2c920;
+    border-left: 0.2em solid #f2c920;
+    border-right: 0.2em solid #f2c920;
+    border-top-right-radius: 1.5em;
+    border-top-left-radius: 1.5em;
     margin: 2em 0 0 0;
     background-color: #884444;
     padding: 1em 2em 1em 2em;
@@ -220,146 +223,6 @@ footer table#footer_table td{
         font-size: 70%;
     }
 }
-div#content{ /* Everything between the header and the footer. */
-    width: 90%;
-    margin: auto;
-    max-width: 90em;
-}
-div.section{
-    margin: 0.5em;
-    padding: 1em;
-    background-color: #ccaa88;
-    border: 0.1em solid #000000;
-    overflow: hidden;
-}
-@media screen and (max-width : 990px){
-    div.section{
-        margin: 1em;
-    }
-}
-div.section h3.section_title{
-    font-weight: bold;
-    color: #ffffff;
-    background-color: #886644;
-    font-size: 120%;
-    padding: 0.2em 0.5em 0.2em 0.5em;
-    margin: -1em -1em 1em -1em;
-}
-div.section div.entry{  /* Separated elements in a section. */
-    border: 0.1em solid #333333;
-    border-radius: 0.3em;
-    padding: 0.5em;
-    margin: 0.5em;
-    transition: all .4s ease-in-out;
-}
-
-img.skill_image{
-    margin: 0 auto;
-    width: 2.5em;
-    height: 2.5em;
-    border: 0.2em solid #000000;
-    border-radius: 15%;
-}
-img.skill_image.skill_awaken{
-    border: 0.2em solid #aa00ff;
-}
-img.skill_image.skill_disabled{
-    background-color: #ffffff;
-    opacity: 0.7;
-}
-img.skill_image.skill_leader{
-    filter: drop-shadow(0 0 0.1em #8888ff) drop-shadow(0 0 0.1em #8888ff) drop-shadow(0 0 0.1em #8888ff);
-}
-span.skill_name{
-    display: block;
-    font-style: italic;
-}
-span.skill_name.skill_awaken{
-    color: #aa00ff;
-}
-span.skill_name.skill_disabled{
-    opacity: 0.7;
-}
-span.skill_name.skill_leader{
-    display: none;
-}
-span.skill_level{
-    display: block;
-    margin: 0.5em;
-    font-size: 90%;
-}
-span.skill_level input{
-    width: 2em;
-}
-span.skill_image{
-    position: relative;
-}
-
-span.skill_image span.skill_tooltip{
-    color: #ffffff;
-    padding: 0.7em;
-    background-color: #351e0b;
-    border: 0.2em solid #f2c920;;
-    border-radius: 0.5em;
-    text-shadow: 0 0 0.1em #000000;
-    box-shadow: 0 0 0.2em #000000;
-    width: 18em;
-    top: -7em;
-    left: -9em;
-    opacity: 0;
-    position: absolute;
-    text-align: center;
-    display: none;
-/*     z-index: 2; */
-    text-transform: none;
-    transition: all 0.3s ease-in-out;
-}
-@media screen and (max-width : 990px){
-    span.skill_image span.skill_tooltip{
-        width: 12em;
-        top: -9em;
-        left: -6em;
-        padding: 0.4em
-    }
-}
-span.skill_image:hover span.skill_tooltip{
-    opacity: 1;
-    display: block;
-    z-index: 99;
-}
-span.skill_image span.skill_tooltip img.skill_tooltip_image{
-    width: 2em;
-    height: 2em;
-    float: left;
-    margin: 0.2em;
-    border: 0.2em solid #000000;
-    border-radius: 15%;
-}
-span.skill_image span.skill_tooltip img.skill_tooltip_image.skill_awaken{
-    border: 0.2em solid #aa00ff;
-}
-span.skill_image span.skill_tooltip img.skill_tooltip_image.skill_disabled{
-    background-color: #ffffff;
-    opacity: 0.7;
-}
-span.skill_image span.skill_tooltip img.skill_tooltip_image.skill_leader{
-    filter: drop-shadow(0 0 0.1em #8888ff) drop-shadow(0 0 0.1em #8888ff) drop-shadow(0 0 0.1em #8888ff);
-}
-span.skill_image span.skill_tooltip span.skill_tooltip_title{
-    font-weight: bold;
-}
-span.skill_image span.skill_tooltip ul.skill_levels{
-    display: block;
-    text-align: left;
-    margin: 0.5em auto 0.5em 0.5em;
-    font-size: 90%;
-}
-span.skill_image span.skill_tooltip ul.skill_levels li.unreached{
-    font-style: italic;
-    color: #aaaaaa;
-}
-
-
 input[type=button], input[type=submit]{
     font-size: 100%;
     font-weight: bold;
@@ -375,12 +238,11 @@ input[type=button], input[type=submit]{
 input[type=text], input[type=number]{
     font-size: 80%;
     font-weight: bold;
-    color: #000000;
+    color: #ffffff;
     padding: 0 0.3em;
-    background-color: #f3eeea;
+    background-color: #351e0b;
     border: 0.2em solid #f2c920;
     border-radius: 0.5em;
-    text-shadow: 0 0 0.1em #ffffff;
     box-shadow: 0 0 0.3em #000000;
 }
 input[type=number]{
@@ -400,7 +262,7 @@ select{
     font-size: 80%;
     font-weight: bold;
     color: #ffffff;
-    padding: 0 0.3em;
+    padding: 0 0.1em;
     background-color: #351e0b;
     border: 0.2em solid #f2c920;
     border-radius: 0.5em;
@@ -412,7 +274,7 @@ a.a_button{ /* Links that look like buttons. */
     font-size: 100%;
     font-weight: bold;
     color: #ffffff;
-    padding: padding: 0.3em 1em 0.3em 1em;
+    padding: 0.3em 1em 0.3em 1em;
     background-color: #351e0b;
     border: 0.2em solid #f2c920;;
     border-radius: 0.5em;
@@ -425,15 +287,74 @@ a.a_button{ /* Links that look like buttons. */
     color: #777777;
 }
 
+section{
+    text-align: left;
+    border: 0.2em solid #f2c920;
+    border-radius: 0.5em;
+    padding: 0.5em;
+    margin: 0.2em 2em 0.5em 2em;
+}
 
+section h2{
+    margin: -0.25em -0.25em 0.5em -0.25em;
+    border-bottom: 0.1em solid #f2c920;
+    background-color: #000000bb;
+    color: #ffffff;
+    text-align: left;
+    border-top-left-radius: 0.25em;
+    border-top-right-radius: 0.25em;
+    padding: 0.25em 0 0.25em 2em;
+    font-size: 200%;
+    font-weight: bold;
+}
 
+/* Filters section, for lists. */
+section.filters{
+    text-align:center;
+    background-color: #775533;
+    display: inline-block;
+    min-width: 40%;
+}
+@media screen and (max-width : 990px){
+    section.filters{
+        font-size: 80%;
+    }
+}
+section.filters table{
+    margin: auto;
+}
+section.filters table td.filter{
+    vertical-align: top;
+    padding: 0.2em;
+    text-align: center;
+    color: #ffffff;
+}
+section.filters table td.filter span{
+    display: block;
+    margin: 0.1em;
+    font-size: 80%;
+}
 
 
+section.filters div#filter_apply{
+    text-align: center;
+    margin: 0.5em auto 1em auto;
+}
 
 
+/* Main content, when it is a list of monsters, runes... */
+section.list{
+    display: block;
+    text-align: center;
+    background-color: #331100;
+}
 
 
-
+/* Main content, when it a single monster, rune... */
+section.content{
+    text-align: center;
+    background-color: #553311;
+}
 
 
 
@@ -450,6 +371,7 @@ div.rune_panel{
     border: 0.2em solid #000000;
     border-radius: 1em;
     position: relative;
+    text-align: center;
 }
 div.rune_panel.rune_quality_0{ /* Normal */
     background-image: repeating-radial-gradient(#ffffff, #cccccc 30%, #ffffff 60%);
@@ -570,3 +492,85 @@ div.rune_panel.rune_level_15 span.rune_level{
 /**
  * /Rune boxes
  */
+
+
+/**
+ * Monster panel
+ */
+div.monster_panel{
+    display: inline-block;
+    width: 7em;
+    height: 7em;
+    margin: 0.5em;
+    position: relative;
+    border-radius: 15%;
+}
+
+@media screen and (max-width : 990px){
+    div.monster_panel{
+        height: 6em;
+        width: 6em;
+        margin: 0.2em;
+    }
+}
+
+div.monster_panel span.stars{
+    position: absolute;
+    top: 0.4em;
+    right: 0.5em;
+}
+@media screen and (max-width : 990px){
+    div.monster_panel span.stars{
+        top: 0.3em;
+        right: 0.4em;
+    }
+}
+
+div.monster_panel span.stars img.star{
+    width: 1em;
+    height: 1em;
+    margin-left: -0.4em;
+}
+@media screen and (max-width : 990px){
+    div.monster_panel span.stars img.star{
+        width: 0.9em;
+        height: 0.9em;
+        margin-left: -0.5em;
+    }
+}
+
+div.monster_panel img.monster{
+    width: 6.5em;
+    height: 6.5em;
+    border-style: solid;
+    border-width: 0.3em;
+    border-radius: 15%;
+}
+@media screen and (max-width : 990px){
+    div.monster_panel img.monster{
+        width: 5.6em;
+        height: 5.6em;
+        border-width: 0.2em;
+        border-radius: 10%;
+    }
+}
+
+div.monster_panel span.level{
+    position: relative;
+    bottom: 1.6em;
+    font-weight: bold;
+    color: #000;
+    text-shadow: 0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
+    font-size: 100%;
+    right: -1.5em;
+    bottom: 1.5em;
+    z-index: 1;
+}
+
+div.monster_panel span.level::before {
+  content: "Lv. ";
+}
+
+/**
+ * /Monster panel
+ **