/*
	additional stylesheet for wkkf annual report 2016 - mmcguire
*/



/*	----------------------------------------------
						CHARTS
	----------------------------------------------
*/
.panel {
	position: relative;
}

/*	------	DONUT CHARTS	------	*/

	.chart_wrapper.donut {
		position: relative;
		display: inline-block;
		width: 30rem;
		height: 30rem;
		margin-bottom: 2rem;  
	}
	.chart_wrapper.donut.small  { 
		height: 17rem;
		width: 17rem; 
		margin: 2rem 1rem;
	}
	.chart_wrapper .donuts_wrapper {
		text-align: center;
	}
	.chart_wrapper.donut svg {
		display: inline-block;
		width: 30rem;
	}
	.chart_wrapper.donut.small svg {
		display: inline-block;
		width: 100%;
	}
	.doughnutTip {
		position: absolute;
		min-width: 30px;
		z-index: -1;
		opacity: 0;
		max-width: 300px;
		margin-top: -3rem;
		padding: .75rem 1rem;
		border-radius: 1px;
		background: #6d6e70;
		color: #ddd;
		font-size: 17px;
		text-align: center;
		line-height: 1.3;
		letter-spacing: .06em;
		border-radius: .1rem;
		box-shadow: 0 1px 3px rgba(0,0,0,0.5);
		pointer-events: none;
		-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
		filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
		border: solid 1px rgba(255,255,255,.5);
		transition: z-index .3s,
					opacity .3s;	
	}
	.doughnutTip.show {
		z-index: 4000;
		opacity: 1;
	}
	.doughnutTip:after {
		position: absolute;
		left: 50%;
		bottom: -6px;
		content: "";
		height: 0;
		margin: 0 0 0 -6px;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		border-top: 6px solid #6d6e70;
		line-height: 0;
		-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
		filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
	}
	.doughnutTip span {
		display: block;
		text-align: center;
		font-size: .9rem;
		text-shadow: -1px -1px 1px rgba(0,0,0,0.1);
	}
	.doughnutTip:before {
		position: absolute;
		left: 50%;
		bottom: -8px;
		content: "";
		height: 0;
		margin: 0 0 0 -8px;
		border-right: 7px solid transparent;
		border-left: 8px solid transparent;
		border-top: 7px solid rgba(255,255,255,.6);
		line-height: 0;
	}
	.chart_wrapper.donut .chart_title {
	  display: none;
		position: absolute;
			top: 20%;
			left: 20%;
			z-index: 60;
		width: 60%;
		height: 60%;
	}
	.chart_wrapper.donut.small .chart_title {
		display: table;
	}

	.chart_wrapper.donut .chart_title .text {
		display: table-cell;
		width: 100%;
		height: 100%;
		vertical-align: middle;
		text-align: center;
		text-transform: uppercase;	
		font-size: 1.15rem;
		line-height: 1.25em;
		font-weight: bold;
	}
	.chart_wrapper.donut .doughnutSummaryNumber {
	  position: absolute;
	  top: 50%;
	  width: 100%;
	  margin-top: -15%;
	  font-size: 55px;
	}
	.chart_wrapper.donut .chart path:hover { 
		opacity: 0.65; 
	}
	.chart_wrapper ~ .donut_legend {
		display: inline-block;
		position: absolute;
			top: 0;
			right: 0;
		width: 50%;	
		margin-top: 10rem;		
		font-size: 0;
	}
	.donut_legend .legend_item {
		padding: 1rem; 
		border-top: solid 1px #dadada;
	}
	.donut_legend .note {
		display: none;
		margin-top: 2rem;
		font-size: .9rem;
	}
	.donut_legend .legend_item:last-of-type {
		border-bottom: solid 1px #dadada;
	}
	.donut_legend .legend_item span {
		display: inline-block;
		height: 1rem;
		font-size: 1rem;
		vertical-align: top;
		line-height: 1rem;
	}
	.donut_legend .legend_item span + span {
		margin-left: 1rem;
	}
	.donut_legend .legend_color {
		width: 1rem;
		transform:translateY(.15rem);
		border-radius: 30rem;
	}
	.donut_legend .legend_title {
		font-weight: bold;
	}
	.donut_legend .legend_value {
		float: right;
		text-align: right;
	}
	
	.donuts_wrapper .donut_legend {
		position: relative;
		width: 100%;		
	}		
	.donuts_wrapper .donut_legend .legend_item {
		display: inline-block;
		width: 13rem;
		height: 4rem;
		font-size: .9rem;
		padding-right: 0;
		padding-left: 0;
	}
	.donuts_wrapper .donut_legend .legend_title {
		width: 10rem;
		vertical-align: top;
	}
	.donuts_wrapper .donut_legend .legend_value {
		display: none;
	}
	.donuts_wrapper .donut_legend .note {
		display: block;
	}
	
	
	.chart_wrapper.column {
		height: 40rem;
		margin: 5rem 0 10rem 0; 
		text-align: center;
	}
	.chart_wrapper.column.columnLabels {
		padding-left: 7rem;
	}
	
	.chart_wrapper .row_labels{
		display: none;
		position: absolute;
			left: 0;
			top: 0;
	}
	.chart_wrapper.column.columnLabels {
		height: 25rem;
	}
	.chart_wrapper.column.columnLabels .row_labels{
		position: absolute;
			top: 0;
			left: 0;		
		text-align: left;
		display: inline-block;
		width: 100%;
		margin-top: 4.5rem;
		height: 25rem;
	}
	.chart_wrapper.column.columnLabels .row_labels .chart_row {
		position: relative;
		display: block;
		width: 100%;
		text-align: left;
	}
	.chart_wrapper.column.columnLabels .row_labels .chart_row .label  {
		display: table;
		vertical-align: middle;
		height: 100%;
		position: relative;				
			z-index: 10;
		width: 6rem;
		text-align: left;
	}
	.chart_wrapper.column.columnLabels .row_labels .chart_row .label  .text {
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		width: 100%;
	}
	.chart_wrapper.column.columnLabels .row_labels .chart_row:after {
		content: '';
		display: inline-block;
		position: absolute;
			top: 50%;
			left: 0;
		width: 100%;
		height: 1px;
		border-bottom: solid 1px #d4d4d4;
	}
	
	.chart_wrapper .chart_column .chart_row {
		
	}
	.chart_wrapper.column .chart_column {
		display: inline-block;
		vertical-align: bottom;
		position: relative;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
		border-radius: .1rem;
		min-width: 2rem;
	}
	.image_chart .chart_column {
		background-size: cover;
	}

.grant_area .chart_column {
	background-size: cover !important;
}
	.chart_wrapper.column .chart_column + .chart_column {
		margin-left: 1%;
	}
	.chart_wrapper .chart_column .column_value {
		position: absolute;
		top: -2.5rem;
		left: 0;
		width: 120%;		
		font-weight: bold;
		text-transform: uppercase;
		font-size: 1.5rem;
		text-align: center;
		font-family: "Oswald", sans-serif;
	}
	.chart_wrapper.column.columnLabels .column_value {
		opacity: 0;
		display: inline-block;
		vizability: hidden;
		background: #DB0962;
		border-radius: .1rem;
		color: #fff!important;
		font-size: .65rem;
		line-height: 3em;
		transform: translateX(-50%) scale(1.35);
		text-align: center;
		text-shadow: -1px -1px 1px rgba(0,0,0,0.1);
		top: -4rem;
		left: 50%;
		transition: opacity .3s;
		font-family: "FFMetaWebNormal", sans-serif;
		font-weight: 400;
		max-width: none;
		padding-left: 0.5rem;
		padding-right: 4rem;
	}
	.chart_wrapper.column.columnLabels .column_value:after {
		position: absolute;
		left: 50%;
		bottom: -5px;
		content: "";
		height: 0;
		margin: 0 0 0 -6px;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		border-top: 6px solid #DB0962;
		line-height: 0;
	}

.chart_wrapper.column.columnLabels .chart_column:hover {
	z-index: 300;
}
.chart_wrapper.column.columnLabels .chart_column:hover .column_value {
		visibility: visible;
		opacity: 1;
	}

	.chart_wrapper .chart_column .column_title {
		position: absolute;
			top: 100%;
			left: 0;
		width: 100%;
		margin-top: 1rem;
		padding: 0 1rem;
	}
	
	.columns_total {
		padding: 1rem;
		margin-top: 5rem;
		text-align: center;
	}
	.columns_total h4 {
		margin: 0;
		line-height: 2rem;
		padding: 0;
		border: 0;
		font-weight: bold;
		border: none !important;
	}
	
	.chart_wrapper.combined_foundation {
		width: 50%;
	}