.title-card {
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
	text-align: center;
}
.title-card:after {
	content: 'Vampire: The Requiem';
	display: inline-block;
	position: relative;
	padding: 0 10px;
	color: #8c8b8b;
	font-size: 30px;
}

.attributes-card {
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
	text-align: center;
	width: 100%
}
.attributes-card:after {
	content: 'Attributes';
	display: inline-block;
	position: relative;
	padding: 0 10px;
	color: #8c8b8b;
	font-size: 20px;
}

.skills-card {
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
	text-align: center;
	width: 33.33%;
	display: inline-block;
}
.skills-card:after {
	content: 'Skills';
	display: inline-block;
	position: relative;
	padding: 0 10px;
	color: #8c8b8b;
	font-size: 20px;
}

.other-traits-card {
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
	text-align: center;
	width: 66%;
	display: inline-block;
}
.other-traits-card:after {
	content: 'Other Traits';
	display: inline-block;
	position: relative;
	padding: 0 10px;
	color: #8c8b8b;
	font-size: 20px;
}

.names-table {
	margin: 5px 0;
	display: flex;
}

.names-label {
	width: 40%;
	min-width: -moz-min-content;
	min-width: -webkit-min-content;
	min-width: min-content;
}

.names-input {
	width: 40%;
}

.names_and_such {
	display: flex;
}

.attributes-section {
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.skills-traits-section {
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.leftmost-of-three {
    width: 33.33%;
}

.center-of-three {
    width: 33.33%;
}

.rightmost-of-three {
    width: 33.33%;
}

.attributes-legend {
    width: 10%;
	min-width: 6em;
}

.dot-checkbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	outline: none;
	border: 2px solid #999;
	margin: 3px 1px;
}

.dot-checkbox:checked {
	border: solid black;
	background-color: black;
}

.black-box-checkbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	outline: none;
	border: 1px solid #999;
	margin: 3px 1px;
}

.black-box-checkbox:checked {
	border: solid black;
	background-color: black;
}

.health-checkbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	outline: none;
	border: 1px solid #999;
	margin: 3px 1px;
}

.health-empty-checkbox {
	background: none;
}

.health-bashing-checkbox {
	background: 
		linear-gradient(to top left,
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) calc(50% - 0.8px),
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) calc(50% + 0.8px),
			rgba(0,0,0,0) 100%);
}

.health-lethal-checkbox {   
	background: 
		linear-gradient(to top left,
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) calc(50% - 0.8px),
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) calc(50% + 0.8px),
			rgba(0,0,0,0) 100%),
		linear-gradient(to top right,
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) calc(50% - 0.8px),
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) calc(50% + 0.8px),
			rgba(0,0,0,0) 100%);
}

.health-aggravated-checkbox {
	background: 
		linear-gradient(to top left,
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) calc(50% - 0.8px),
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) calc(50% + 0.8px),
			rgba(0,0,0,0) 100%),
		linear-gradient(to top right,
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) calc(50% - 0.8px),
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) calc(50% + 0.8px),
			rgba(0,0,0,0) 100%),
		linear-gradient(to right,
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) calc(50% - 0.8px),
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) calc(50% + 0.8px),
			rgba(0,0,0,0) 100%);
}

.attributes-mental {
    width: 25%;
	border-left: solid gray;
	padding-left: 1%;
}

.attributes-physical {
    width: 25%;
	border-left: solid gray;
	padding-left: 1%;
}

.attributes-social {
    width: 25%;
	border-left: solid gray;
	padding-left: 1%;
}

.skills-div {
    width: 33%;
}

.left-other-traits-div {
    width: 33%;
}

.right-other-traits-div {
    width: 33%;
}

.checkboxes {
	display: flex;
}

div.input-with-checkboxes {
	
}