.fontLoading0 {
		font-family: 'Droid Sans', sans-serif;
		font-weight: 400;
		font-size: 10px;
	}
	.fontLoading1 {
		font-family: 'Source Serif Pro', serif;
		font-weight: 600;
		font-size: 10px;
	}
	.fontLoading2 {
		font-family: 'Source Serif Pro', serif;
		font-weight: 400;
		font-size: 10px;
	}
	.fontLoading3 {
		font-family: 'Source Serif Pro', serif;
		font-weight: 700;
		font-size: 10px;
	}
	.fontLoading4 {
		font-family: 'Droid Sans', sans-serif;
		font-weight: 700;
		font-size: 10px;
	}
	hr {
		border: none;
		height: 1px;
		/* Set the hr color */
		color: #ccc; /* old IE */
		background-color: #ccc; /* Modern Browsers */
	}
	hr.shortHR {
		margin: 4px 0;
	}

	.clickRect {
		cursor: pointer;
	}
	.bar-top-zero {
		stroke-width: 1px;
		stroke: gray;
	}
	text {
		fill: black;
		font: 12px sans-serif;
		text-anchor: middle;
		user-select: none;
	}
	.axis text {
		font: 12px sans-serif;
		/*text-anchor: middle;*/
	}
	.axis path,
	.axis parapath,
	.axis line {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}
	.axis .parapath {
		stroke: #333;
		opacity: 0.3;
	}
	.axis .parapath.corner {
		stroke: #333;
		opacity: 0.8;
	}
	.axis .parapoly {
		fill: darkslateblue;
		opacity: 0.1;
	}
	.axisLabel {
		font: 12px sans-serif;
		text-anchor: start;
		pointer-events: none;
	}
	.tick line {
		opacity: 0.2;
	}
	.x .tick line {
		opacity: 0.1;
	}
	.x .tick text {
		opacity: 0;
	}
	.separatorLine {
		stroke-width: 1px;
		stroke: black;
	}
	.separatorRect {
		fill: black;
	}

/*===== TOOLTIP STUFF ====================================================================*/

	/* based on https://css-tricks.com/bubble-point-tooltips-with-css3-jquery/ */

	.tooltipParent {
		position: relative;
	}
	.tooltipGrandParent {
		position: relative;
		top: -503px;
		left: 0;
	}
	.tooltip2, .arrow1:after {
		background: #fffff3;
		border: 1px solid #333;
	}
	.tooltip2 {
		pointer-events: none;
		opacity: 0;
		display: inline-block;
		position: absolute;
		padding: 7px 10px;
		color: #000;
		border-radius: 7px;
		margin-top: 5px;
		text-align: left;
		line-height: 128%;
		text-decoration: none;
		box-shadow: 1px 1px 2px #333;	/* h-offset; v-offset; spread; color */
		width: 200px;	/* tied to arrRight left -- 20px less than */
		z-index: 10;
	}

	.arrow1 {	/* container of arrowChild */
		height: 1px;
		width: 1px;
		position: absolute;
		left: 20px;
		top: 100px;
		border-width: 12px;
		border-style: solid;
		border-color: #333 transparent transparent transparent;
	}
	.arrow1.arrLeft {
		left: -25px;
		border-color: transparent #333 transparent transparent;
	}
	.arrow1.arrRight {
		left: 220px;
		border-color: transparent transparent transparent #333;
	}
	.arrowChild {	/* child of arrow1 */
		height: 1px;
		width: 1px;
		position: relative;
		top: -14px;			/* 1 extra for more arrow thickness, which goes better w. the drop shadow */
		left: -11px;
		border-width: 11px;		/* outer arrow minus this = border width (above) */
		border-style: solid;
		border-color: #fffff3 transparent transparent transparent;
	}
	.arrowChild.acLeft {
		top: -11px;
		left: -9px;
		border-color: transparent #fffff3 transparent transparent;
	}
	.arrowChild.acRight {
		top: -11px;
		left: -12px;
		border-color: transparent transparent transparent #fffff3;
	}

	.tooltip2.active {
		opacity: 0.96;
	}
	.tooltip2 .textualTooltip {
		opacity: 0;
		-webkit-transition: opacity 0.2s linear;
		-moz-transition: opacity 0.2s linear;
		-ms-transition: opacity 0.2s linear;
		-o-transition: opacity 0.2s linear;
		transition: opacity 0.2s linear;
	}
	.tooltip2.newTooltip .textualTooltip {
		opacity: 1;
	}
	.tooltip2 .textualTooltip ul {
		margin: 0;
		padding-left: 20px;
		-webkit-padding-start: 20px;
		-moz-padding-start: 20px;
	}
	.tooltip2 .textualTooltip ul li {
		font-weight: 400;
		font-family: 'Droid Sans', sans-serif;
		font-size: 13px;
		line-height: 1.5em;
	}
	.tooltip2 div.textSection {
		margin: 0;
		padding: 0;
	}
	.tooltip2 div.detailTextSection {
		opacity: 0;
		position: absolute;
		left: 0px;
		top: 0px;
		margin: 0;
		padding: 0px 0px 8px 0px;
		/*background-color: #efefef;*/
	}

	.tooltip2 p {
		margin: 6px 0 2px 0;
		font-weight: 400;
		font-family: 'Droid Sans', sans-serif;
		font-size: 13px;
	}
	.tooltip2 p.title {
		font-weight: 600;
		font-family: 'Source Serif Pro', serif;
		font-size: 15px;
		text-transform: uppercase;
	}

	.tooltip2 span.rep-num {
		font-weight: 700;
		font-size: 15px;
	}
	.tooltip2 .repTextActive {
		color: red;
		font-weight: 700;
	}

	.tooltip2 p.summation {
		font-weight: 600;
		font-family: 'Droid Sans', sans-serif;
		font-size: 14px;
	}
	.tooltip2 p.summation2 {
		margin-top: 4px;
		font-weight: 600;
		font-family: 'Droid Sans', sans-serif;
		font-size: 14px;
	}
	.tooltip2 p.summation3 {
		margin-top: 4px;
		margin-bottom: 6px;
		padding-left: 5px;
		font-weight: 600;
		font-family: 'Droid Sans', sans-serif;
		font-size: 14px;
	}
	p.pDarken {
		background-color: #444;
		color: #eee;
	}

/*===== END TOOLTIP STUFF ====================================================================*/

/*===== KEY STUFF ====================================================================*/
	.keyClass {
		position: absolute;
		width: 175px;
		border: 1px solid #666;
		background: #fefee3; /* For browsers that do not support gradients    f9f0c0 */
		background: -webkit-linear-gradient(160deg, #fefee3, #f6f3c9); /* for Safari 5.1 to 6.0 */
		background: -o-linear-gradient(160deg, #fefee3, #f6f3c9); /* for Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(160deg, #fefee3, #f6f3c9); /* for Firefox 3.6 to 15 */
		background: linear-gradient(160deg, #fefee3, #f6f3c9); /* std syntax */
		opacity: 1;
		box-shadow: 2px 2px 6px #333;	/* h-offset; v-offset; spread; color */
	}
	.keyParent {
		position: relative;
	}
	.keyClass p.keyTitle1 {
		margin: 5px 10px 0 10px;
		padding: 3px;
		font-weight: 700;
		font-family: 'Source Serif Pro', serif;
		font-size: 18px;
		color: #222;
	}
	.keyText {
		margin: 10px 10px 2px 38px;
		padding: 3px;
		font-weight: 400;
		font-family: 'Source Serif Pro', serif;
		font-size: 14px;
		color: #222;
	}
	.keyDataSq {
		font-size: 15px;
	}

	.button {
		cursor: pointer;
		border: 2px solid black;
		margin-top: 0px;
		float: left;
		width: 14px;
		height: 14px;
	}
	.button.highlighted {
		border: 2px solid red;
	}
	.buttonLabel {
		cursor: pointer;
		margin-top: 0px;
		margin-bottom: 6px;
		padding-left: 7px;
		padding-top: 3px;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		user-select: none;
		float: left;
	}
	.buttonLabel.highlighted {
		color: red;
		/*font-weight: 700;*/
	}

/*===== END KEY STUFF ====================================================================*/