section.content{ display: block; text-align: left; } section.content div.monster div.profile{ text-align: center; display: inline-block; vertical-align: top; } @media screen and (max-width : 990px){ section.content div.monster div.profile{ text-align: center; width: 30%; } } section.content div.monster div.skills{ text-align: center; display: inline-block; width: 60%; } @media screen and (max-width : 990px){ section.content div.monster div.skills{ width: 65%; } } section.content div.monster div.skills div.skill{ display: inline-block; vertical-align: top; width: 22%; margin: 0.5em; color: #ffffff; text-align: center; position: relative; } @media screen and (max-width : 990px){ section.content div.monster div.skills div.skill{ font-size: 80%; } } 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; } section.content div.monster div.skills div.skill span.skill_level{ font-size: 110%; position: relative; 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; } section.content div.monster div.skills div.skill span.skill_level.maxed{ color: #f2c920; } 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; top: 3.2em; display: block; margin-top: -1.3em; font-size: 80%; line-height: 0.9em; } section.content div.monster table#skill_averages{ margin: auto auto auto 2em; color: #ffffff; display: inline-block; vertical-align: top; max-width: 30%; } @media screen and (max-width : 990px){ section.content div.monster table#skill_averages{ display: revert; margin: -2em auto auto auto; font-size: 100%; width: 70%; max-width: 90%; } } section.content div.monster table#skill_averages td.title{ text-align: right; } section.content div.monstertable#skill_averages td.value{ text-align: left; padding-left: 1em; }