.#{$alias} {
	##{$alias}-lightbox-overlay {
		display: none;
		position: absolute;
		z-index: 99999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		background-color: rgba(0, 0, 0, 0.5);
		##{$alias}-lightbox-container {
			@include border-radius(5px);
			position: absolute;
			width: px(1000);
			min-height: px(110);
			max-height: px(600);
			top: 5%;
			left: 50%;
			margin-left: -px(400);
			background-color: $white;
			h1.#{$alias}-lightbox-headline {
				@include border-radius(5px 5px 0 0);
				background: $info;
				display: block;
				top: -#{px(2)};
				position: absolute;
				color: #fff;
				width: px(798);
				height: px(40);
				margin: 0;
				padding: 0;
				span {
					display: block;
					font-size: px(14);
					font-family: Arial, Helvetica, sans-serif;
					font-weight: bold;
					position: absolute;
					top: px(11);
					left: px(40);
				}
				img.#{$alias}-lightbox-icon {
					position: relative;
					top: px(6);
					left: px(10);
					width: px(24);
				}
				a.#{$alias}-close-btn {
					display: block;
					width: px(37);
					height: px(28);
					position: absolute;
					top: px(7);
					right: px(6);
					&:hover i {
						color: $primary;
					}
				}
			}
			.#{$alias}-seo-status-container {
				background: $white;
				padding: px(60) px(41) px(20) px(41);
				max-height: px(520);
				overflow-y: auto;
				font-family: $primary_font;
				font-size: px(12);
				font-weight: $normal;
				line-height: px(30);
			}
		}
	}
	
	.#{$alias}-dashboard-status-box {
		h1 {
			color: #394651;
			position: relative;
			font: normal px(21) Arial, Helvetica, sans-serif;
			width: 100%;
			display: block;
			padding: 0 0 px(8) 0;
			margin: 0 0 px(10) 0;
		}
		.#{$alias}-dashboard-box-content {
			margin: px(10) 3%;
			width: 94%;
		}
		.#{$alias}-callout {
			padding: px(5) px(14) !important;
		}
	}
	.#{$alias}-dashboard-status-box-row {
		display: table;
		width: 100%;
		min-height: px(120);
		margin: 0 0 px(10) 0;
		.#{$alias}-dashboard-status-icon {
			width: px(20);
			display: table-cell;
		}
		h2 {
			display: table-cell;
			width: px(200);
			border-right: px(1) solid #ccc;
			padding: px(5) 0 px(5) px(2);
			font: normal px(12) Arial, Helvetica, sans-serif;
		}
		.#{$alias}-dashboard-status-box-content {
			padding-left: px(10);
			display: table-cell;
			&.is_ajax_content {
				text-indent: -#{px(1000)};
			}
		}
	}
	.#{$alias}-cache-info {
		display: block;
		text-align: right;
		color: #999999;
		width: px(300);
		bottom: px(10);
		right: px(10);
		position: absolute;
		font-size: px(11);
		margin: px(10) 0 0;
	}
	.#{$alias}-lists-status {
		display: block;
		width: 100%;
		list-style: none;
		overflow: hidden;
		margin: 0 0 -#{px(20)} 0;
		li {
			display: block;
			float: left;
			margin-right: 0.5;
			width: px(201);
			height: px(50);
			margin: 0 px(20) px(20) 0;
			position: relative;
			.#{$alias}-lists-icon {
				display: block;
				position: relative;
				bottom: -#{px(10)};
				margin-right: 0;
				width: px(32);
				height: px(32);
			}
			&:last-child {
				border: none;
			}
			label {
				display: block;
				margin-right: px(5);
				position: absolute;
				top: px(32);
				left: px(47);
				font-weight: bold;
				font-size: px(15);
				cursor: default;
			}
			span {
				position: absolute;
				display: block;
				font-weight: bold;
				font-size: px(25);
				font-weight: 700;
				top: px(10);
				left: px(45);
				sup {
					position: absolute;
					top: -#{px(8)};
					font-size: px(12);
					font-weight: bold;
				}
			}
		}
	}
	
	.#{$alias}-website-preview {
		.#{$alias}-borwser-frame {
			width: 100%;
			height: auto;
			min-height: px(100);
			position: relative;
			overflow: hidden;
		}
		.browser-preview {
			width: 100%;
			height: auto;
			position: absolute;
			z-index: 10;
			top: 0;
			left: 0;
		}
		.the-website-preview {
			width: 100%;
			height: auto;
			position: relative;
			z-index: 1;
			margin-top: px(39);
		}
		h4 {
			margin: 0 0 px(10) 0;
			&:last-child {
				margin-bottom: px(10);
			}
			a {
				text-decoration: none;
				background-color: #f0f0f0;
				color: #484848;
				display: inline-block;
				font-weight: bold;
				padding: px(2) px(4) px(1);
				//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
				transition: all 150ms ease-out 0s;
				&:hover {
					background-color: #f39c12;
					color: #fff;
				}
			}
		}
		h3 {
			margin: px(20) 0 px(10);
			a {
				text-decoration: none;
				background-color: #f0f0f0;
				color: #484848;
				display: inline-block;
				font-weight: bold;
				padding: px(2) px(4) px(1);
				//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
				transition: all 150ms ease-out 0s;
				&:hover {
					background-color: #f39c12;
					color: #fff;
				}
			}
		}
	}
	
	##{$alias}-audience-visits-graph {
		height: px(220);
		overflow: hidden;
		background-position: center center;
	}
	
	.#{$alias}-meter {
		text-align: left;
		background-color: #f2eee3;
		height: px(20);
		padding: px(1) px(2);
		position: absolute;
		top: 50%;
		left: 50%;
		@include vendor(transform, translate(-50%, -50%));
		width: 30%;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: px(5);
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: 0 px(1) px(5) #bcbcbc inset, 0 px(1) 0 #c3b17e;
		span {
			display: inline-block;
			height: 100%;
			background-color: #777;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: px(3);
			//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
			box-shadow: 0 px(1) 0 rgba(255, 255, 255, .5) inset;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: width .4s ease-in-out;
			background-size: px(30) px(30);
			background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
			background-color: #218ab1;
		}
		&.#{$alias}-animate span {
			-webkit-animation: animate-stripes 3s linear infinite;
			-moz-animation: animate-stripes 3s linear infinite;
		}
	}
	@-webkit-keyframes animate-stripes {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: px(60) 0;
		}
	}
	@-moz-keyframes animate-stripes {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: px(60) 0;
		}
	}
	##{$alias}-lightbox-loading {
		display: none;
		height: 100%;
		position: absolute;
		width: 100%;
		z-index: 100;
		cursor: wait;
		##{$alias}-loading-overlay {
			background-color: #ccc;
			filter: alpha(opacity=50);
			opacity: 0.5;
			height: 100%;
			position: relative;
			width: 100%;
			background: none;
		}
		##{$alias}-loading-box {
			border: px(1) solid #aaa;
			//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
			box-shadow: rgba(0,0,0,0.2) 0 px(4) px(16) 0;
			background-color: #fff;
			filter: alpha(opacity=100);
			height: px(100);
			left: 33%;
			opacity: 1.0;
			position: absolute;
			top: px(300);
			width: 40%;
			z-index: 10000;
			top: 33%;
			.#{$alias}-loading-text {
				color: #999;
				font-size: px(11);
				position: relative;
				text-align: center;
				text-transform: uppercase;
				top: px(25);
			}
		}
	}
	##{$alias}-main-loading {
		display: none;
		height: 100%;
		position: absolute;
		width: 100%;
		z-index: 100;
		cursor: wait;
		top: 0;
		left: 0;
		##{$alias}-loading-overlay {
			background-color: #ccc;
			filter: alpha(opacity=50);
			opacity: 0.5;
			height: 100%;
			position: relative;
			width: 100%;
		}
		##{$alias}-loading-box {
			border: px(1) solid #aaa;
			//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
			box-shadow: rgba(0,0,0,0.2) 0 px(4) px(16) 0;
			background-color: #fff;
			filter: alpha(opacity=100);
			height: px(100);
			left: 33%;
			opacity: 1.0;
			position: absolute;
			top: px(300);
			width: 40%;
			z-index: 10000;
			.#{$alias}-loading-text {
				color: #999;
				font-size: px(11);
				position: relative;
				text-align: center;
				text-transform: uppercase;
				top: px(25);
			}
		}
	}
}