
.admincp_manager {
	.am_top {
		background: @header-bg;
		color: @header-color;
		width:200px;
		position:fixed;
		top:0px;
		bottom:0px;
		left:0px;

		> a, > a:hover {
			font-size: @font-size-base + 4;
			font-weight:200;
			letter-spacing:1px;
			margin-bottom:30px;
			background:darken(@header-bg, 10%);
			border-bottom:1px lighten(@header-bg, 20%) solid;
			height:40px;
			line-height:40px;
			text-indent:50px;
			color: @header-color;
			display:block;
			overflow:hidden;
			position:relative;
		}

		> a:before {
			.fa('\f053');
			width:40px;
			height:40px;
			text-align:center;
			padding-top:10px;
			position:absolute;
			left:0px;
			top:0px;
			font-size:20px;
			background:darken(@header-bg, 20%);
			color:darken(@header-color, 20%);
		}

		> a:hover:before {
			background: @brand-primary;
			color: @brand-primary-color;
			transition:@transition;
		}

		> ul {
			li {
				display:block;

				a, a:hover {
					color: @header-color;
					font-weight:300;
					display:block;
					padding:6px 0px;
					text-indent:5px;
					font-size: @font-size-base + 1;

					i {
						margin-right:10px;
					}
				}

				a:hover {
					background:darken(@header-bg, 5%);
					color:lighten(@header-color, 40%);
					transition:@transition;
				}

				a.active, a.active:hover {
					background: @brand-primary;
					color: @brand-primary-color;

					i {
						color:#fff;
					}
				}
			}
		}
	}

	.am_content {
		/*
		position:fixed;
		top:0px;
		left:200px;
		bottom:0px;
		right:0px;
		overflow:auto;
		*/
		margin-left:200px;

		.admincp_design_info {
			position:fixed;
			left:200px;
			top:0px;
			bottom:0px;
			width:300px;
			background: @block-bg;
			padding:10px;

			.theme_flavors {
				select {
					width:100%;
				}
			}

			.theme_actions {
				position:absolute;
				bottom:0px;
				left:0px;
				right:0px;

				ul {
					li {
						a, a:hover {
							display:block;
							padding:10px;
							color: @block-color;
							font-weight:normal;
							border-top:1px darken(@block-bg, 6%) solid;
							font-size: @font-size-base - 2;

							i {
								margin-right:10px;
							}
						}

						a:hover {
							background:darken(@block-bg, 4%);
							transition:@transition;

							i {
								color: @brand-primary;
							}
						}
					}
				}
			}
		}

		.admincp_design {
			margin-left:330px;

			.table_header {
				background: @body-bg;
				padding-left:0px;
			}

			.table {
				width:29%;
				display:inline-block;
				margin:0px 10px 10px 0px;
			}
		}
	}
}

.ace_editor_loader {
	display:none;
	position:fixed;
	left:200px;
	top:0px;
	right:0px;
	bottom:0px;
	height:100%;

	.ace_editor {
		width:100%;
		height:100%;
	}
}

._colorpicker_holder {
	cursor:pointer;
	position:absolute;
	right:-2px;
	width:40px;
	top:0px;
	bottom:0px;
	border:2px darken(@form-bg, 10%) solid;
}

._colorpicker_holder:hover {
	border-color: @brand-primary;
	transition:@transition;
}

/*
.preview .themes {
	text-align:center;
	margin-top:10px;

	article {
		width:200px;
		height:300px;
		text-align:left;
		border:1px darken(@blockBg, 6%) solid;
	}
}
*/

/*
.themes {
	.theme_colors {
		padding-top:40px;
		text-align:center;

		> span {
			display:inline-block;
			width:100px;
			height:130px;
			margin:10px;
			border:1px darken(@blockBg, 10%) solid;
		}
	}

	article {
		width:250px;
		height:350px;
		background:@blockBg;
		color:@blockColor;
		position:relative;
		display:inline-block;
		vertical-align:top;
		margin:0px 10px 20px 0px;
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;

		h1 {
			a, a:hover {
				display:block;
				position:absolute;
				left:0px;
				top:0px;
				bottom:0px;
				right:0px;

				em {
					display:none;
					position:absolute;
					left:50%;
					top:50%;
					margin-left:-40px;
					padding:6px 20px;
					text-indent:0px;
					font-weight:300;
					text-decoration:none;
					letter-spacing:1px;
					text-transform:uppercase;
					background:@brandPrimary;
					color:@brandPrimaryColor;
					font-size:@fontSizeBase + 2;
				}

				span {
					position:absolute;
					left:0px;
					top:0px;
					right:0px;
					background:@topBg;
					color:@topColor;
					font-weight:200;
					font-size:@fontSizeBase + 4;
					height:40px;
					line-height:40px;
					letter-spacing:1px;
					text-indent:8px;
				}
			}

			a:hover {
				background:rgba(0, 0, 0, 0.4);
				transition:@transition;

				em {
					display:block;
				}
			}
		}
	}
}
*/
.themes {
	text-align:center;
}

.themes article::before, .themes article::after, .themes article h1::before {
	content: '';
	position:absolute;
	top:-14px;
	left:5px;
	background:fade(red, 60%);
	width:8px;
	height:8px;
	border-radius:50%;
}

.themes article::after {
	left:18px;
	background:fade(yellow, 60%);
}

.themes	article h1::before {
	left:30px;
	background:fade(green, 60%);
}

.themes article#is-default {
	width:800px;
	height:394px;
}

.themes article {
	background:#f2f2f2;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	width:300px;
	height:400px;
	display:inline-block;
	margin:0px 30px 30px 0px;
	position:relative;
	vertical-align:top;
}

.themes article {
	border:2px lighten(#dfdfdf, 2%) solid;
	border-top-width:20px;
	width:550px;
	height:271px;
	border-radius:3px;
	position:relative;
	box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
	background-position:top center;

	.color_pattern {
		position:absolute;
		left:0px;
		bottom:0px;
		right:0px;
		padding:3px;
	}

}

.themes a, .themes a:hover {
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	height:40px;
	line-height:40px;
	overflow:hidden;
	text-align:center;
	background:rgba(0, 0, 0, 0.5);
	color:#fff;
	text-decoration:none;
	font-weight:300;
	font-size:20px;
	letter-spacing:1px;
	transition: all 0.50s ease;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);

	em {
		display:none;
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-40px;
		padding:6px 20px;
		text-indent:0px;
		font-weight:300;
		text-decoration:none;
		letter-spacing:1px;
		text-transform:uppercase;
		background: @brand-primary;
		color: @brand-primary-color;
		font-size: @font-size-base + 2;
	}
}

.themes article:hover a, .themes article:hover a:hover {
	height:auto;
	bottom:0px;
	transition: all 0.50s ease;

	em {
		display:block;
	}
}

.phpfox_store_featured {
	> i {
		display:block;
		margin:0px auto 40px 0px;
	}
}

.admincp_apps_holder {
	> section.preview {
		background:#fff;
		padding-top:10px;
		margin-left:-20px;
		margin-right:-10px;

		> h1 {
			font-size:22px;
			margin-top:20px;
			padding-bottom:30px;
			font-weight:200;
			text-align:center;
		}
	}
}

.design-uploader:hover {
	border-color: @brand-primary;
}

.design-uploader {
	position:absolute;
	top:0px;
	right:0px;
	width:41px;
	height:41px;
	border:2px #dddddd solid;
	background: @block-bg;
	overflow:hidden;

	i, i:hover {
		position:absolute;
		top:0px;
		right:0px;
		width:41px;
		height:41px;
		text-align:center;
		font-size:22px;
		z-index:1;
	}

	i::before {
		display:block;
		margin-top:10px;
	}

	input[type="file"] {
		width:30px;
		height:30px;
		position:absolute;
		top:0px;
		right:0px;
		z-index:2;
		opacity:0;
		cursor:pointer;
	}
}