#elements-container {
	width: 250px;
	background: @panel-background;
	box-shadow: 1px 0px 2px rgba(0,0,0,.3);
	border-right: 1px solid #111010;

	#elements-list {
		padding: 0 !important;

		> li {
			color: @panel-heading-color;
			background-color: darken(@panel-box-background, 4%);
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
			font-size: 12px;
			text-transform: capitalize;
			padding: 5px 10px;
			margin: 0;
			.box-shadow(inset 0 1px 0 rgba(255,255,255,0.04));
			border-bottom: 1px solid #1e1e1e;

			.fa {
				float: right;
			}
		}
	}

	#el-preview-container:hover .el-preview {
	  	zoom: 1;
	  	filter: alpha(opacity=45);
	  	opacity: 0.45;
	  	.transition(opacity .3s ease-in-out);
	}

	#el-preview-container .el-preview:hover {
	  	cursor: pointer;  
	  	zoom: 1;
	  	filter: alpha(opacity=100);
	  	opacity: 1;
	}

	.el-preview {
		width: 50%;
		float: left;
		padding: 0 10px;
		filter: alpha(opacity=9);
	  	opacity: 0.9;
		font-weight: bold;
		margin-bottom: 8px;

		&:hover {
			cursor: pointer;  
	  		zoom: 1;
	  		filter: alpha(opacity=100);
	  		opacity: 1;
		}
		
		> .el-preview-body {
			height: 37px;
			width: 100%;
			overflow: hidden;
			color: @panel-color;

			> * {
				width: 100%;
				height: 100%;
				margin: 0;
			}

			.progress {
				height: 55%;
				margin-top: 10px;

				> .progress-bar {
					width: 70% !important;
					font-size: 11px;
				}
			}

			> .page-header {
				margin: 0;
				border: none;
				padding-top: 10px;

				> h1 {
					font-size: 9px;
					margin: 0;
					border-bottom: 1px solid @gray-lighter;
					padding-bottom: 2px;
				}

				> small {
					font-size: 9px;
				}
			}

			.btn-group {
				> .btn {
					width: 33%;
					font-size: 5px;
					color: transparent;
					margin-top: 10px;
				}
			}

			> .heading {
				margin: 0;
				padding: 0;
				text-align: center;
			}

			> .well {
				font-size: 9px;
				padding: 13px 7px 6px;
				margin: 0;
				border: none;
				box-shadow: inset 0 0 6px lighten(#000000, 30%);
			}

			> .row-prev {
				margin: 0;

				> .col {
					background: @panel-box-background;
					margin-right: 2px;
					height: 100%;
					width: 31.8%;
					float: left;

					&:last-of-type {
						margin-right: 0;
					}
				}
			}

			> .container-prev {
				background: @panel-box-background;
				border-radius: 5px;
				border: 2px dashed @brand-success;
			}


			> .jumbotron {
				padding: 5px;
				border-radius: 5px;
				box-shadow: inset 0 0 8px lighten(#000000, 10%);
				margin: 0;
				height: 37px;

				> a {
					display: none;
				}

				h1 {
					font-size: 12px;
					padding: 0;
					margin: 4px 4px 2px 4px;
				}

				p {
					font-size: 6px;
					margin: 0 5px;
				}

				.btn {
					width: 80%;
					height: 30px;
					font-size: 10px;
				}
			}
		}

		.el-preview-name {
				color: @panel-color;
				text-align: center;
				font-size: 14px;
				padding-top: 5px;
				height: initial;
			}
	}
	
	.img-test:hover figure{
	  	zoom: 1;
	  	filter: alpha(opacity=45);
	  	opacity: 0.45;
	  	.transition(opacity .3s ease-in-out);
	}

	.img-test figure:hover{
	  	cursor: pointer;  
	  	zoom: 1;
	  	filter: alpha(opacity=100);
	  	opacity: 1;
	}
	
	.img-test {
		padding: 0 10px;

		figure {
			float: left;
			width: 50%;
			color: @panel-color;
			text-align: center;
			font-size: 14px;
			filter: alpha(opacity=9);
	  		opacity: 0.9;

	  		> figcaption {
	  			padding-top: 5px;
	  		}

			img {
				
			}

			
		}
	}

	#elements-panel, #themes-panel, #screens-panel {
		height: 33px;
		overflow: hidden;
	}

	#elements-panel.open, #themes-panel.open, #screens-panel.open {
		height: 92%;
	}

	.elements-panel-heading {
		color: @panel-color;
		background-color: darken(@panel-box-background, 4%);
		text-transform: uppercase;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
		font-size: 10px;
		padding: 5px 10px;
		margin: 0;

		.fa {
			float: right;
		}
	}

	.panel-inner {
		height: 100%;
		overflow: auto;
	}

	#themes-panel {

		figure {
			margin: 15px;

			> img {
				width: 100%;
				height: 140px;
			}

			> figcaption {
				padding: 7px 5px 0;
				color: @panel-color;

				> .name {
					font-size: 15px;
				}

				> .source {
					font-size: 12px;
				}
			}

			&:hover {
				cursor: pointer;
			}
		}

		figure.active {
			border: 3px solid @brand-success;
		}
	}

	#elements-panel {
		.list-unstyled {
			padding: 15px 15px 10px;
			margin: 0;

			> lip {
				padding: 5px 10px;
				background: @panel-box-background;
				color: @panel-color;
				margin-bottom: 5px;
				border-radius: 2px;
				text-transform: capitalize;
				box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
				border-bottom: 1px solid #1e1e1e;
				transition: all 250ms ease-out;
				font-size: 13px;
				text-shadow: 0px 1px 1px #000000;

				&:hover {
					cursor: pointer;
					background: lighten(@panel-box-background, 10%);
				}
			}

		}
	}
}

#controls {
	padding: 10px 15px;

	#el-search {
		width: 100%;
		display: none;
		margin: 5px 0;
		padding: 0 10px;
		font-size: 13px;
		background-color: @panel-box-background;
		border: none;
		height: 30px;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		.placeholder(@panel-color);
		color: @panel-color;
	}

	.ui-selectmenu-button {
		float: none;
	}

	.btn {
		margin-top: -20px;
		color: @panel-color;
		font-size: 15px;
		background-color: transparent;
		padding: 3px;
		outline: none;

		&:hover {
			color: lighten(@panel-color, 20%);
		}

		> .fa-info {
			font-size: 18px;
		}

		> .fa-search {
			font-size: 14px;
		}
	}

	.btn.inactive {
		text-shadow: 0 1px 0 #494949;
		color: #141414;
	}
}