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; 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; } @media screen and (max-width : 990px){ body#body_report_skillup section#list{ width: 100%; } } 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; text-align: left; } @media screen and (max-width : 990px){ body#body_report_skillup section#list div.monster{ height: 6em; width: 6em; border: 0.1em solid #000000; margin: 0.2em; border-radius: 10%; } } body#body_report_skillup section#list div.monster div.profile{ width: 35%; display: inline-block; vertical-align: top; } 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; } body#body_report_skillup section#list div.monster div.profile div#details{ display: inline-block; vertical-align: top; text-align: center; } 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; } body#body_report_skillup section#list div.monster div.profile div#details span.stars{ display: block; } 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; } 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; } body#body_report_skillup section#list div.monster div.skills{ text-align: center; display: inline-block; width: 30%; } body#body_report_skillup section#list div.monster div.skills div.skill{ display: inline-block; vertical-align: top; max-width: 22%; margin: 0.5em; color: #ffffff; text-align: center; } body#body_report_skillup section#list div.monster div.skills div.skill img{ width: 3em; height: 3em; border: 0.1em solid #f2c920; border-radius: 0.5em; } body#body_report_skillup section#list div.monster div.skills div.skill span.skill_level{ font-size: 110%; position: relative; top: -2em; 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{ color: #f2c920; } body#body_report_skillup section#list 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; } body#body_report_skillup section#list div.monster table#skill_averages{ margin-left: 2em; color: #ffffff; display: inline-block; vertical-align: top; max-width: 30%; } body#body_report_skillup section#list div.monster table#skill_averages td.title{ text-align: right; } body#body_report_skillup section#list div.monstertable#skill_averages td.value{ text-align: left; padding-left: 1em; }