body {
    background-color: #CFDDCE;
    color: #545050;
    font-family: "Open Sans",sans-serif;
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
h1 {
    background-color: #A0B89E;
    font-weight: 300;
    text-align: center;
	margin: 0;
}
h2 {
    background-color: #ABC2A9;
    font-weight: 300;
    text-align: center;
	margin: 0;
}
b {
    display: inline-block;
    min-width: 4em;
}
.info b:after {
    content: ":";
}
#left {
    float: left;
    width: 350px;
}
#main, #colors, #traits {
	margin-left: 10px;
}

ul {
    margin: 20px 0 0;
    padding-left: 0px;
}
li {
	display:block;
	margin-bottom: 5px;
}
li b {
	vertical-align: top;
	display: inline-block;
    width: 115px;
	top: 0px;
}
li span {
	display: inline-block;
}
small {
	font-size: 0.66em;
}
li:after {
    content: attr(title);
	vertical-align: top;
}
#colors li:not(.half) {
	list-style-position: inside;
	text-indent: -40px;
	margin-left: 40px;
	line-height: 0.5em;
}

li.half {
    width: 45%;
    display: inline-block;
}
#colors li:before {
    content: " ";
    display: inline-block;
    height: 30px;
    margin-right: 5px;
    width: 30px;
    border-radius: 5px;
}

#colors li:before {
	box-shadow: 0 0 0 1px #a0b89e;
	vertical-align: text-top;
}

#right {
	float: right;
    width: calc(100% - 350px);
}



a {
	padding: 5px;
	font-size: 1.25em;
    color: #2AA23B;
    text-decoration: none;
	display: flex;
}

.da:before {

    content: "";
	align-content: center;
    width: 75px;
    height: 1.5em;
    background-image: url("img/da.png");
    display: flex;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}


.fa:before {
	align-content: center;
    content: "";
    width: 75px;
    height: 1.5em;
    background-image: url("img/fa.png");
    display: flex;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}