.name, .title {
    display: inline-block;
    margin-right: 0.5em;
}

.attributes tr th {
    text-align: left;
}

.attributes tr td {
    padding-right: 4px;
    text-align: right;
}

.barcell {
    vertical-align: middle;
}

.barcontainer {
    width: 80%;
    height: 30px;
    margin: auto;
    background-color: gray;
    background: linear-gradient(to bottom, rgba(92,92,92,0.5) 0%, rgba(127,127,127,0.5) 50%, rgba(117,117,117,0.5) 51%, rgba(176,176,176,0.5) 100%);
}

.bar {
    display: inline-block;
    height: 100%;
}

.good {
    background-color: blue;
    background: linear-gradient(to bottom, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 49%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 100%);
}

.evil {
    background-color: red;
    background: linear-gradient(to bottom, rgba(232,150,150,1) 0%,rgba(202,80,80,1) 49%,rgba(216,80,80,1) 50%,rgba(153,50,50,1) 100%);
}

input[type="number"] {
	width: 8ch;
	text-align: right;
}