#game-dashboard{
	position: relative;
	z-index: 100;
	*{
		.border-box();
	}
	#overlay{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.65);
	}

	#dashboard{
		width: 1200px;
		height: 600px;
		position: fixed;
		left: 50%;
		top: 50%;
		margin:-290px auto auto -600px;
		//background: rgba(255, 255, 255, 0.9);

		//border:1px solid #ccc;
		.b-shadow(~"inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12), 0 0 1px 0 #ccc");
		#gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );

		.radius(5px);
		overflow:hidden;
		> div{
			padding: 15px;
			//border:none !important;
			//#gradient > .vertical( #f5f5f5, #ebebeb );
			//.b-shadow(~"inset 0 0 0 1px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12)");
		}
	}
	
	ul{
		list-style: none;
	}

	h2{
		margin-bottom: 15px;
	}
}

/*User Card*/
#user-card{
	height: 84%;
	width: 20%;
	float: left;
	border-right:1px solid #ccc;
	text-align:center;
	h3{
		margin:15px 0;
	}
	ul{
		font-size: 14px;
		font-weight: bold;
		li{
			line-height: 1.75;
		}
	}
}

#mini-stats-card{
	margin-top: 10px;
	background: rgba(240, 240, 240, 0.9);
	.b-shadow(inset 0 0 1px rgba(0, 0, 0, 0.2));
	.clearfix();

	.level{
		padding: 10px;
	}
	strong{
		font-size:36px;
		line-height: 1;
		display: block;
	}
	strong + span{
		display: block;
		font-size: 14px;
		font-weight: bold;
		color: #999;
		margin:0 0 10px 0;
	}
	.percentHolder{
		text-align: left;
		margin-bottom: 5px;
		+ span{
			font-weight: bold;
		}
	}

	.num-badges, .num-collections{
		padding: 5px;
		float: left;
		width: 50%;
		border-top:1px solid #fff;
	}
	.num-badges{
		border-right:1px solid #fff
	}
}


/*Badges*/
#achievements-list{
	overflow-y: scroll;
	height: 84%;
	width: 30%;
	float: left;
	border-right:1px solid #ccc;
	li{
		.clearfix();
		+ li{
			padding-top: 20px;
		}
	}
	.badge{
		float: left;
		margin-right: 15px;
	}
	.badge-grade {
		right: auto;
		left: -8px;
	}
	h3, p{
		margin-bottom: 5px;
	}
	p{
		line-height: 1.4;
	}
	p + span{
		font-size: 11px;
		color: #aaa;
	}
}

/*Coins*/
#z-coins{
	width: 15%;
	height: 25%;
	float: left;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	position: relative;
	text-align: center;
	a{
		position: absolute;
		right: 5px;
		bottom: 5px;
		.smaller();
	}
}

#z-coin{
	display: block;
	width: 85px;
	height: 85px;
	line-height: 85px;
	font-size: 36px;
	font-style: italic;
	background: gold;
	.radius(50%);
	margin:0 auto 7px auto;
	&:hover{
		-webkit-animation: spinCoin 1s infinite;
	}
}



/*Leaderboard*/
#leaderboard{
	width: 35%;
	height: 25%;
	float: left;
	border-bottom:1px solid #ccc;
}

.leaderboard-rank{
	float: left;
	width: 120px;
	margin-right: 15px;
	padding: 10px;
	text-align: center;
	.radius(4px);
//	background: rgba(240, 240, 240, 0.9);
	#gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
	.b-shadow(~"inset 0 0 1px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1)");
	&:last-child{
		margin-right: 0;
	}
	strong, span{
		display: block;
	}
	strong{
		font-size:24px;
		line-height: 1.5;
	}
	span{
		font-size: 16px;
		font-weight: bold;
		color: #999;
	}
}



/*Stats*/
#stats{
	width: 50%;
	height: 59%;
	float: left;
}

.stat-row{
	width: 70%;
	padding:0 0 30px 0;
	white-space: nowrap;
	h3{
		width: 35%;
		text-align: right;
		display: inline-block;
	}
	.stat-level,
	.stat-points{
		float: none;
		display: inline-block;
		width: 5%;
		text-align: center;
	}
	.stat-level{
		font-weight: bold;
	}
	.stat-points{
		width: 10%;
		position: relative;
		top: -8px;
		em{
			position: absolute;
			top: 14px;
			left: 0;
			text-align: center;
			.smaller();
			width: 100%;
			font-style: normal;
		}
	}
	.percentHolder{
		width: 45%;
		float: right;
	}
}



/*Collections*/
#collections{
	width: 100%;
	height: 16%;
	float: left;
	border-top:1px solid #ccc;
	padding:0 !important;
	position: relative;
	z-index: 100;
}

#carousel-wrapper{
	width: 92%;
	height: 100%;
	float: left;
	//overflow: hidden;
}

#carousel{
	height: 100%;
	position: relative;
}

.nav-button{
	width: 4%;
	height: 100%;
	text-align: center;
	line-height: 96px;
	font-size: 30px;
	float: left;
	display: block;
	.t-shadow(0 -1px 0 #fff);
	.b-shadow( 0 0 4px 0 #ccc);
	#gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
	position: relative;
	z-index: 10;
}

.collection-panel{
	position: relative;
	width: 350px;
	height: 100%;
	float: left;
	.badge{
		margin: 0;
		float: left;
		margin-right: 15px;
	}
	> div{
		&:hover{
			//-webkit-animation: slideCollectionUp 1 0.25s ;
			-webkit-animation-name: slideCollectionUp;
			-webkit-animation-duration: .25s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-delay: 0;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-direction: alternate;
			-webkit-animation-play-state: running;
			-webkit-animation-fill-mode: forwards;

			z-index: 100;
			.b-shadow(0 0 5px 0 #aaa);
		}
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 200%;
		padding:15px 15px;
		#gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );

		.b-shadow(inset 0 0 1px 0 #ccc);
	}
	.number-collected{
		margin: 10px 0;
		.have-it,
		.have-it-not{
			display: inline-block;
			width: 12px;
			height: 12px;
			.radius(50%);
			background: green;
		}
		.have-it-not{
			background: #ccc;
			.opacity(50);
		}
		.total-completed{
			float: right;
		}
	}
}
//to show an open panel
.collection-panel + .collection-panel{
	> div{
		//top: auto;
		//bottom: 0;
	}
}

.collection-items{
	margin-top: 30px;
	.collection-item{
		width: 40px;
		height: 40px;
		background: pink;
		display: inline-block;
		float: left;
		margin-right: 10px;
	}
}