.qb-chart,.qb-chart-summary{
	margin:0;
	
	margin-top:25px;
	
	position:relative;clear:none;
	height:400px;
	background:#FFF;
	border:1px solid #DDD;
	
	.rounded-corners(3px);
	.paddingSubtractsFromWidth();
}

.qb-chart{
	width:70%;
	float:left;
	
	.bar-selection{
		position:realtive;
		float:left;
		margin:10px;
		height:40px;
	}
	
	.data-type-selection,.data-range-selection{
		position:relative;
		float:left;
		margin:10px;
		height:60px;
		
		> li{
			position:relative;float:left;clear:none;
			padding:8px 15px;
			margin:0 5px 0 0;
			
			font-family:@buttonFont;
			
			font-size:13px;
			.rounded-corners(3px);
			
			.transition(.1s);
			
			color:fade(@dark, 75%);
			cursor:default;
			
			&:not(.selected):hover{
				cursor:pointer;
				color:@dark;
			}
			
			&.selected{
				background:@dark;
				color:#FFF;
			}
		}
		
		&.data-range-selection{
			float:right;
			
			> li{
				float:right;
				margin:0 0 0 5px;
			}
		}
	}/*.data-type-selection,.data-range-selection*/
	
	.chart-container{
		position:absolute;
		width:100%;
		height:320px;
		bottom:0px;
		padding:10px;
		
		overflow:hidden;
		
		.paddingSubtractsFromWidth();
		
		.chart-view,.loading-chart-placeholder,.not-enough-data-placeholder{
			width:100%;
			height:100%;
		}
		
		.loading-chart-placeholder{
			background:rgba(0,0,0,.02);
			
			i{
				width:100%;
				font-size:40px;
				line-height:300px;
				text-align:center;
				color:#DDD;
			}
		}
		
		.not-enough-data-placeholder{
			background:rgba(0,0,0,.02);
			
			text-align:center;
			font-size:28px;
			
			width:100%;
			margin:0 0 10px 0;//10px bottom margin to push chart out of view
			
			line-height:80px;
			color:#DDD;
			font-family:@barFont;
			
			padding:80px 0;
			.paddingSubtractsFromWidth();
			
			i{
				font-size:60px;
				width:100%;
				text-align:center;
			}
		}
		
		.chart-view{
			position:relative;
			width:100%;
			height:100%;

			background:transparent;;

		}/*.chart-view*/
	}
}

.qb-chart-summary{
	width:25%;
	float:right;
	
	.qb-chart-stat-label,.qb-chart-stat-value{
		position:relative;float:left;clear:both;
		width:100%;
		margin:15px 0;
		text-align:center;
		font-family:@buttonFont;
	}
	.qb-chart-stat-label{
		margin-top:40px;
		color:fade(@dark, 50%);
		font-size:16px;
	}
	.qb-chart-stat-value{
		color:@dark;
		font-size:50px;
	}
}