/* Widget Stats
=================================================================== */

.jqstooltip {
	.box-sizing(content-box);
}

.smallstat {
	background: white;
	padding: 10px;
	position: relative;
	text-align: right;
	
	.linechart-overlay, .boxchart-overlay {
		width: 84px;
		padding: 10px;
		text-align: center;
		margin-right: 10px;
		float: left;
		.backgroundColor;
		overflow: hidden;
	}
	
	.piechart-overlay {
		padding: 5px;
		text-align: center;
		margin-right: 10px;
		float: left;
		.backgroundColor;
		overflow: hidden;
	}
	
	.piechart {
		color: white; 
		font-size: 10px;
	}
	
	i {
		text-align: center;
		display: block;
		color: white;
		width: 50px;
		font-size: 22px;
		padding: 14px 0px;
		float: left;
		margin-right: 10px;
		.backgroundColor;
		
	}
	
	.title {
		top: 12px;
		color: @grey;
		display: block;
		font-size: 12px;
		margin-top: 4px;
		font-weight: bold;
	}
	
	.value {
		font-size: 20px;
		
	}
	
	.more {
		background: lighten(@grey, 20%);
		border-top: 1px solid lighten(@grey, 15%);
		margin: 12px -10px -10px -10px;
		padding: 5px 10px;
		display: block;
		font-size: 12px;
		text-align: left;
		
		&:hover {
			color: @darkGrey;
			text-decoration: none;
		}
		
		span {
			
		}
		
		i {
			padding: 0;
			margin: 4px 0 0 0;
			display: inline;
			color: @darkGrey;
			font-size: 10px;
			float: right;
			width: 10px;
		}
	}	
	
}

/* Box Stats
=================================================================== */
ul.stats {
	list-style: none;
	padding: 0;
	border-top: 1px solid lighten(@grey, 20%);
	margin: 20px -10px -10px -10px;
	.clearfix;
	
	li {
		position: relative;
		z-index: 2;
		width: 25%;
		border-right: 1px solid lighten(@grey, 20%);
		float: left;
		text-align: center;
		padding: 20px 0px;
		margin: 0;
		overflow:hidden;
		
		&:fisrt-child {
			
		}
		
		&:last-child {
			border: none;
		}
		
		.bgchart {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
			top: 0px;
			left: 0px;
		}
		
	}
	
}

/* Info Box
=================================================================== */
.info-box {
	
	.backgroundColor {
		color: white;
		padding: 10px;
	}
	
	.title, .value {
		font-weight: bold;
		font-size: 12px;
		margin: 0;
		padding: 0;
	}
	
	.date, .change {
		font-size: 10px;
		margin: 0;
		padding: 0;		
	}
	
	.title, .date {
		float: left;
	}
	
	.value, .change {
		float: right;
	}
	
	.quarters {
		background: white;
		.clearfix;
		
		.quarter {
			padding: 10px;
			span {
				display: block;
				font-size: 10px;
				color: @grey;
			}
		}
		
		.q1, .q2, .q3, .q4 {
			width: 50%;
			float:left;
		}
		
		.q1, .q2 {
			border-bottom: 1px solid lighten(@grey, 20%);
			height: 60px;
		}
		
		.q2 {
			padding: 0;
		}
		
		.q2, .q4 {
			text-align: right;
		}
		
		.q4 {
			border-left: 1px solid lighten(@grey, 20%);
		}
		
		.verticalChart {
			float: right;
			text-align: center;
			margin: 3px 0 0 0;
			width: 100%;
			padding: 6px;

		    .singleBar {
		        width: 10.5%;
		        margin:0 0px 0 3px;

		        .bar {
		            height: 22px;
		            .border-radius(1px);

		            .value {
		                background: @grey;
		                .border-radius(1px);
		            }
		        }

		        .title {
		            margin: 2px auto 0 auto;
		            text-align: center;
					color: @grey;
					font-size: 8px;
					font-weight: 400;
					width: 100%;
		        }
		    }
		}
		
	}
	
}