.type.normal { background-color: #b0b098; }
.type.fighting { background-color: #c03028; }
.type.flying { background-color: #b0a0ff; }
.type.poison { background-color: #a828a8; }
.type.ground { background-color: #e8c870; }
.type.rock { background-color: #b89848; }
.type.bug { background-color: #b0d028; }
.type.ghost { background-color: #705898; }
.type.steel { background-color: #c0c0d8; }
.type.fire { background-color: #ff8038; }
.type.water { background-color: #6898f8; }
.type.grass { background-color: #58c820; }
.type.electric { background-color: #ffc800; }
.type.psychic { background-color: #f858a0; }
.type.ice { background-color: #70e0e0; }
.type.dragon { background-color: #7038f8; }
.type.dark { background-color: #705848; }
.type.question { background-color: #68a090; }
.type.shadow { background-color: #305858; }
.type.fairy { background-color: #ff98d8; }

.type
{
    display: inline-block;
    font-size: 13px;
    line-height: 0;
    vertical-align: middle;
    padding: 10px 0;
    width: 64px;
    height: 0;
    color: white;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    box-shadow: 0 -1px 0 0 rgba(0,0,0,0.3) inset;
    border-radius: 7px;
    background-color: #f2f2f2;
    background-image: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.1) 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,rgba(0,0,0,0.1))); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, transparent 0%,rgba(0,0,0,0.1) 100%); /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, transparent 0%,rgba(0,0,0,0.1) 100%); /* Opera 11.10+ */
    background-image: -ms-linear-gradient(top, transparent 0%,rgba(0,0,0,0.1) 100%); /* IE10+ */
    background-image: linear-gradient(to bottom, transparent 0%,rgba(0,0,0,0.1) 100%); /* W3C */
}
