div.diagram{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    border: 0.2em solid #c8ad78;
    background-color: #a4886c;
    border-radius: 0.5em;
    margin: 0.5em;
    width: 275px;
    height: 400px;
}

div.diagram h3{
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom: 0.1em solid #c8ad78;
    margin: 0 0 0.5em 0;
    padding: 0.5em;
    background-color: #93775b;
}

div.diagram table.legend{
    list-style: none;
    text-align: left;
    font-weight: bold;
    width: 100%;
    font-size: 90%;
}

div.diagram table.legend tr.color_0{color: #ffffff;}
div.diagram table.legend tr.color_1{color: #33ff33;}
div.diagram table.legend tr.color_2{color: #ff3333;}
div.diagram table.legend tr.color_3{color: #6666ff;}
div.diagram table.legend tr.color_4{color: #ffff33;}
div.diagram table.legend tr.color_5{color: #ff33ff;}
div.diagram table.legend tr.color_6{color: #33ffff;}
div.diagram table.legend tr.color_normal{color: #cccccc;}
div.diagram table.legend tr.color_magic{color: #55ff55;}
div.diagram table.legend tr.color_rare{color: #15c6e1;}
div.diagram table.legend tr.color_hero{color: #ad7fa8;}
div.diagram table.legend tr.color_legend{color: #f57900;}
div.diagram table.legend td{
    padding-right: 1em;
    text-shadow: 0 0 0.1em #000000;
}

div#drop_rune_stars img.star{
    width: 1em;
    height: 1em;
    margin-right: -0.5em;
}