div.fusion{ 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; } div.fusion div.target{ display: inline-block; vertical-align: middle; } div.fusion div.sources{ display: inline-block; vertical-align: middle; } div.fusion 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; } div.fusion div.sub_sources{ display: inline-block; vertical-align: middle; border-left: 0.2em solid #c2a485; margin: 0.5em; padding: 0.5em; } div.fusion div.sub_sources:after{ content:"\A"; white-space: pre; } div.fusion div.monster{ display: inline-block; position: relative; vertical-align: top; } div.fusion div.monster.lv1{ width: 7em; height: 7em; margin: 0.5em; } div.fusion div.monster.lv2{ width: 6em; height: 6em; margin: 0.3em; } div.fusion div.monster.lv3{ width: 4em; height: 4em; margin: 0.2em; text-align: center; } div.fusion div.monster span.stars{ position: absolute; z-index: 1; top: 0.4em; right: 0.5em; } div.fusion div.monster.lv1 span.stars{ top: 0.5em; right: 0; } div.fusion div.monster.lv2 span.stars{ top: 0.4em; right: 0; } div.fusion div.monster.lv3 span.stars{ top: 0; right: 0; } div.fusion 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); } div.fusion 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); } div.fusion 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); } div.fusion div.monster img.monster{ border-style: solid; width: 100%; height: 100%; box-shadow: 0 0 1em #555555; } div.fusion div.monster.lv1 img.monster{ border-width: 0.3em; border-radius: 25%; } div.fusion div.monster.lv2 img.monster{ border-width: 0.2em; border-radius: 20%; } div.fusion div.monster.lv3 img.monster{ border-width: 0.1em; border-radius: 15%; } div.fusion div.monster span.level{ color: #000000; font-weight: bold; position: absolute; z-index: 1; } div.fusion 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; } div.fusion 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; } div.fusion 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; } div.fusion div.monster_details{ width: 8em; display: inline-block; vertical-align: top; } div.fusion div.monster_details.lv1{ display: block; } div.fusion div.monster_details h5{ text-align: center; } div.fusion div.monster_details.lv1 h5{ margin: 1em auto; font-size: 150%; text-shadow: 0 0 0.09em #000000, 0 0 2em #ffffff; } div.fusion div.monster_details.lv2 h5{ margin: 0.5em auto; font-size: 90%; text-shadow: 0 0 0.05em #000000, 0 0 2em #ffffff; } div.fusion div.monster_details hr.owned_separator{ margin: 0 1em; height: 0; } div.fusion div.monster_owned{ display: inline-block; position: relative; } div.fusion div.monster_owned.lv1{ width: 3.5em; height: 3.5em; margin: 0.2em; border-radius: 10%; } div.fusion div.monster_owned.lv2{ width: 2.3em; height: 2.3em; margin: 0.3em auto; border-radius: 5%; display: block; } div.fusion 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); } div.fusion div.monster_owned span.stars{ position: absolute; z-index: 1; } div.fusion div.monster_owned.lv1 span.stars{ top: 0.2em; right: 0.2em; } div.fusion div.monster_owned.lv2 span.stars{ top: -0.2em; right: 0em; } div.fusion div.monster_owned.lv3 span.stars{ top: -0.1em; right: 0.2em; } div.fusion 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); } div.fusion 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); } div.fusion 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); } div.fusion div.monster_details div.monster_owned img.monster{ border-style: solid; border-width: 0.1em; width: 100%; height: 100%; } div.fusion div.monster_owned.lv1 img.monster{ border-radius: 10%; } div.fusion div.monster_owned.lv2 img.monster{ border-radius: 10%; } div.fusion div.monster_owned.lv3 img.monster{ border-radius: 50%; } div.fusion 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; } div.fusion div.monster_owned.lv1 span.level{ bottom: 0.2em; left: 0.5em; font-size: 90%; } div.fusion div.monster_owned.lv2 span.level{ bottom: 0em; left: 0.5em; font-size: 80%; } div.fusion div.monster_owned.lv3 span.level{ top: initial; bottom: 0; left: 1.2em; font-size: 70%; }