/*=== Report panels CSS ===*/
.report_panel {
	text-align: center;
	height: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 2000;
	
	.csstransitions & {
		-webkit-perspective: 200px;
		-moz-perspective: 200px;
		-o-perspective: 200px;
		perspective: 200px;
	}
	
	.content {
		font-weight: bold;
		background: #f9f9f9;
		border: 1px solid #c3c3c3;
		border-top: 0px;
		padding: 15px 30px 10px;
		display: inline-block;
		border-radius: 0px 0px 4px 4px;
		box-shadow: 0px 1px 2px 0px #bbb;
		text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
		max-width: 20%;
		text-align: left;
		.opacity(1);

		.csstransitions & {
			-webkit-transform: rotateX(0deg);
			-moz-transform: rotateX(0deg);
			-o-transform: rotateX(0deg);
			transform: rotateX(0deg);

			-webkit-transform-origin: 0px 0px;
			-moz-transform-origin: 0px 0px;
			-o-transform-origin: 0px 0px;
			transform-origin: 0px 0px;

			.transition(all 200ms ease);
		}
		
		.hide& {
			.opacity(0);

			.csstransitions & {
				-webkit-transform: rotateX(-75deg);
				-moz-transform: rotateX(-75deg);
				-o-transform: rotateX(-75deg);
				transform: rotateX(-75deg);
			}
		}
		
		.loading& {
			background: #dac073;
			border-color: #c5ac60;
			color: #fff;
		}
		
		.report& {
			background: #96c671;
			border-color: #82b35d;
			color: #fff;
		}
		.error& {
			background: #f47474;
			border-color: #e26464;
			color: #fff;
			
			.close {
				position: absolute;
				cursor: pointer;
				right: 2px;
				top: 2px;
				height: 12px;
				width: 12px;
				background: url("images/sprites.png?%VERSION%") no-repeat -200px -240px;
				
				.spritesX2();
			}
		}
		
		.icon {
			display: inline-block;
			width: 16px;
			height: 17px;
			margin-left: -23px;
			float: left;
			display: none;
			background: url("images/sprites.png?%VERSION%") no-repeat -400px -80px;

			.spritesX2();
		}
		
	}
}
/*=== END Report panels CSS ===*/