SWDB/public/css/runs.css

table#runs{
    color: #ffffff;
    border-collapse: collapse;
    width: 100%;
}

table#runs td.area, td.date, td.team, td.time, td.reward, td.action{
    border-top: 0.1em solid #99999977;
}

table#runs td.area{
    text-align: center;
    width: 4em;
}

table#runs td.area div.area{
    position: relative;
    width: 2.4em;
    height: 2.4em;
}

table#runs td.area div.area img.area{
    width: 2em;
    height: 2em;
    border: 0.2em solid #555555;
    border-radius: 0.5em;
    background-color: #777777;
}

table#runs td.area div.area span.stage{
    position: absolute;
    right: 0.5em;
    bottom: 0em;
    font-size: 80%;
    text-shadow: 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.2em #000, 0 0 0.1em #000, 0 0 0.1em #000;
    pointer-events: none;
}

table#runs td.area div.area span.difficulty{
    position: absolute;
    top: 0em;
    right: 0.5em;
    pointer-events: none;
}
table#runs td.area div.area span.difficulty img.difficulty{
    height: 0.6em;
    width: 0.6em;
    margin: 0 -0.3em;
    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);
}

table#runs td.date{
    font-size: 70%;
}

table#runs td.team{
    font-size: 30%;
    width: 46em;
}

table#runs td.team div.helper{
    vertical-align: top;
    background-color: #777777;
}

table#runs td.team div.monster_panel.disabled{
    opacity: 0.5;
    vertical-align: top;
}

table#runs td.team div.monster_panel img.leader{
    width: 5em;
    height: 5em;
    display: block;
    position: absolute;
    top: -1.7em;
    left: -0.7em;
}

table#runs td.team hr.frontline{
    display: block;
    width: 46em;
    margin: -0.6em 0 0.2em 0;
    color: #666666;
}

table#runs td.time{
    font-weight: bold;
    font-size: 75%;
}

table#runs td.time span.ms{
    font-size: 70%;
}

table#runs td.time span.defeated{
    color: #cc0000;
    text-shadow: 0 0 0.05em #ffffff;
}

table#runs td.time span.rank{
    display: inline-block;
    vertical-align: bottom;
    font-size: 250%;
    color: #ff6633;
    text-shadow: 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.2em #ff0, 0 0 0.2em #ff0, 0 0 0.2em #ff0, 0 0 0.2em #ff0;
    font-style: italic;
}

table#runs td.time span.rank{
    display: inline-block;
    vertical-align: bottom;
}

table#runs td.reward div.item{
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    position: relative;
    border: 0.2em solid #555555;
    border-radius: 0.5em;
    background-color: #777777;
}

table#runs td.reward div.item img.item{
    width: 1.6em;
    height: 1.6em;
    border-radius: 0.4em;
}

table#runs td.reward div.item span.item{
    position: absolute;
    left: 0;
    top: 1.6em;
    font-size: 60%;
    width: 2.6em;
    text-align: right;
    text-shadow: 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.2em #000, 0 0 0.1em #000, 0 0 0.1em #000;
}

table#runs td.reward div.item_rune table.rune{
    display: none;
    position: absolute;
    right: 1.8em;
    bottom: 0;
    font-size: 75%;
}

table#runs td.reward div.item_rune:hover table.rune{
    display: block;
}

table#runs td.reward div.item_enchantment div.enchantment_panel{
    display: none;
    position: absolute;
    right: 1.8em;
    bottom: 0;
    font-size: 75%;
}

table#runs td.reward div.item_enchantment:hover div.enchantment_panel{
    display: block;
}

table#runs td.action img.save_team{
    width: 1em;
    height: 1em;
    cursor: pointer;
}


section#save_team{
    z-index: 1;
    display: none;
    position: fixed;
    width: 80%;
    height: 70%;
    margin: 0 10%;
    top: 10%;
    filter: drop-shadow(0 0 10em #000000) drop-shadow(0 0 6em #000000);
}

section#save_team table{
    width: 100%;
}

section#save_team table td.save_title{
    width: 10em;
    text-align: right;
    padding-right: 2em;
}

section#save_team table td.save_values{
    text-align: left;
    padding-right: 2em;
}