:root {
	--R0-base: #FF9500;
	--C0-base: #99CD00;
	--E0-base: #960EB8;
	--H0-base: #2065FF;
	--B0-base: #AF2E23;
}

body {
	background-color:  Snow;
}
.jumbotron {
	background-color:  Wheat;
}
.aQuestion {
	background-color:  MistyRose;
}
.traitPage {
	background-color:  WhiteSmoke;
}
.traitTitle {
	font-size:  x-large;
}

#headerImg {
	background-color:  WhiteSmoke !important;
}
/*
#R1_0-subtraits .arrow-text {
	background-color:  Moccasin;
}
#R1_0-page .arrow {
	background-color:  var(--R0-base);
}
#R1_0-text{
	color:  DarkRed;
}
#R1_0-page .arrow:after {
	border-right:  30px solid var(--R0-base);
}
#R1_0-page .arrow:before {
	border-left:  30px solid var(--R0-base);
}
#R1_0-arrow {
	background:  Moccasin !important;
}
#R1_0-arrow:before {
	border-left:  30px solid var(--R0-base) !important;
}
#R1_0-arrow:after {
	border-right:  30px solid var(--R0-base) !important;
}

#C2_0-subtraits .arrow-text {
	background-color:  LightGreen;
}
#C2_0-page .arrow {
	background-image:  linear-gradient(to right,PaleGreen,DarkGreen);
	border:  1px solid PaleGreen;
}
#C2_0-text{
	color:  DarkGreen;
}
#C2_0-page .arrow:after{
	border-right:  30px solid var(--C0-base);
}
#C2_0-page .arrow:before {
	border-left:  30px solid var(--C0-base);
}
#C2_0-arrow {
	background:  LightGreen !important;
}
#C2_0-arrow:before {
	border-left:  30px solid var(--C0-base) !important;
}
#C2_0-arrow:after  {
	border-right:  30px solid var(--C0-base) !important;
}

#E3_0-subtraits .arrow-text {
	background-color:  Lavender;
}
#E3_0-page .arrow {
	background-image:  linear-gradient(to right,Thistle,Indigo);
	border:  1px solid Thistle;
}
#E3_0-text{
	color:  Indigo;
}
#E3_0-page .arrow:after {
	border-right:  30px solid Thistle;
}
#E3_0-page .arrow:before {
	border-left:  30px solid Indigo;
}
#E3_0-arrow {
	background:  Lavender !important;
}
#E3_0-arrow:before {
	border-left:  30px solid var(--E0-base) !important
}
#E3_0-arrow:after {
	border-right:  30px solid var(--E0-base) !important
}

#H4_0-subtraits .arrow-text {
	background-color:  LightCyan;
}
#H4_0-page .arrow {
	background-image:  linear-gradient(to right,PaleTurquoise,DarkCyan);
	border:  1px solid PaleTurquoise;
}
#H4_0-text{
	color:  DarkCyan;
}
#H4_0-page .arrow:after {
	border-right:  30px solid PaleTurquoise;
}
#H4_0-page .arrow:before {
	border-left:  30px solid DarkCyan;
}
#H4_0-arrow {
	background:  LightCyan !important;
}
#H4_0-arrow:before {
	border-left:  30px solid var(--H0-base) !important;
}
#H4_0-arrow:after {
	border-right:  30px solid var(--H0-base) !important;
}

#B5_0-subtraits .arrow-text {
	background-color:  MistyRose;
}
#B5_0-page .arrow {
	background-image:  linear-gradient(to right,Pink,Maroon);
	border:  1px solid Pink;
}
#B5_0-text{
	color:  Maroon;
}
#B5_0-page .arrow:after {
	border-right:  30px solid Pink;
}
#B5_0-page .arrow:before {
	border-left:  30px solid Maroon;
}
#B5_0-arrow {
	background:  MistyRose !important;
}
#B5_0-arrow:before {
	border-left:  30px solid var(--B0-base) !important;
}
#B5_0-arrow:after {
	border-right:  30px solid var(--B0-base) !important;
}
*/
/*
.traitArrowVLow {
	width:  30%;
	font-size:  30px;
}

.traitArrowLow {
	width:  18%;
	font-size:  30px;
}
.traitArrowHigh {
	width:  18%;
	font-size:  30px;
}
.traitArrowVHigh {
	width:  30%;
	font-size:  30px;
}
*/
.margin5 {
	margin-top:  5px;
	margin-bottom:  5px;
}
.margin10 {
	margin-top:  10px;
	margin-bottom:  10px;
}

.margin15 {
	margin-top:  15px;
	margin-bottom:  15px;
}

.margin25 {
	margin-top:  25px;
	margin-bottom:  25px;
}

.anX {
	top:  -15px;
	color:  Blue;
	font-size:  40px;
	text-shadow:  2px 2px LightBlue;
}
.arrow {
	width:  90%;
	height:  40px;
	position:  relative;
	display:  flex;
	margin:  0 auto;
}
.arrow:after {
	content: "";
	position: absolute;
	left: -30px;
	bottom: 0px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}
.arrow:before {
	content: "";
	position: absolute;
	right: -30px;
	bottom: 0px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}
.arrow-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	border:  2px solid black;
}