$app-prefix: 	'wte-';
$nv-prefix: 	$app-prefix + 'nv-';
$rte-prefix: 	$app-prefix + 'rte-';
$comp-prefix: 	$app-prefix + 'comp-';
$mdl-prefix: 	$app-prefix + 'mdl-';
$am-prefix: 	$app-prefix + 'am-';
$cm-prefix: 	$app-prefix + 'cm-';
$pn-prefix: 	$app-prefix + 'pn-';
$com-prefix: 	$app-prefix + 'com-';
$sm-prefix: 	$app-prefix + 'sm-';
$cv-prefix: 	$app-prefix + 'cv-';
$mainColor:		#444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
$mainDkColor:	darken($mainColor, 4%);/*#383838*/
$mainLhColor:	lighten($mainColor, 5%);/*#515151*/
$fontColor:		#eee; /*l: #d8d7db*/
$fontColorDk:	#777;
$mainFont:		Helvetica, sans-serif;
$colorBlue:		#3b97e3;
$colorRed: 		#DD3636;
$colorYell:		#ffca6f;
$colorGreen:	#62c462;

$imageCompDim:	50px;

@mixin user-select($v) {
    -moz-user-select: 	$v;
	-khtml-user-select: $v;
	-webkit-user-select:$v;
	-ms-user-select: 	$v;
	-o-user-select: 	$v;
 	user-select: 		$v;
}

@mixin opacity($v) {
  opacity: 		$v;
  $opacity-ie: 	$v * 100;
  filter: 		alpha(opacity=$opacity-ie);
}

@mixin appearance($v){
	-webkit-appearance: $v;
	-moz-appearance: $v;
	appearance: $v;
}

.#{$app-prefix}test {

  &::btn { color: '#fff';}

  &input {}

  &header {}
}
.opac50{
	@include opacity(0.50);
}
.checker-bg{
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
}

/********************* MAIN ************************/
body{
	background-color:	$fontColor;
	font-family: 		$mainFont;
	margin: 0;
}
html,body,#wte-app, .#{$app-prefix}editor{ height: 100%; }
.clear{ clear:both }
.no-select{
 	@include user-select(none);
}
#wte-app{
	height: 100%;
	min-width: 1250px;
}
.#{$app-prefix}editor{
	position:relative;
	border: 3px solid $mainColor;
	border-left:none;
	border-right:none;
	box-sizing: border-box;
}
/*************  CANVAS  ****************/
.#{$cv-prefix}canvas {
  position: absolute;
  width: 80%;
  height: 100%;
  top: 0; left: 3.5%;
  overflow: auto;
  z-index:1;

  	> div {
	    height: 100%;
	    overflow: auto;
	    width: 100%;
	}
}
.#{$cv-prefix}canvas *{box-sizing: border-box;}

.btn-cl {
  font-size: 25px;
  @include opacity(0.3);
  cursor: pointer;
  &:hover{
  	@include opacity(0.7);
  }
}
/*************  RTE  ****************/
#commands.panel {
    min-width: 35px;
    height: 100%;
    z-index:3;
}
#options.panel{ z-index:4; bottom: 0;}
#views.panel {
	width: 16.5%;
	font-weight: lighter;
	color:  $fontColor;
	right:0; top:0;
  	z-index: 3;
  	height: 100%;
  	padding:0;
}
#views.panel .c{height:100%}
#commands.panel, #options.panel {width: 3.5%; left:0;}
#options .c { display: table;  margin: 0 auto; }

/*********TEST**********/
body.dragging, body.dragging * { cursor: move !important;}
.dragged {
	position: absolute;
	@include opacity(0.50);
	z-index: 2000;}
ol.example li.placeholder {position: relative;}
ol.example li.placeholder:before {position: absolute;}
/*********END-TEST**********/

.no-dots, .ui-resizable-handle{ border: none !important; margin:0 !important; outline: none !important; }


/********* COMMANDS **********/

.#{$com-prefix}dashed div {
	outline: 1px dashed #888;
	outline-offset: -2px;
  	box-sizing: border-box;
}

body .#{$cv-prefix}canvas .selected-component{//TODO
	outline: 3px solid $colorBlue;
}

div.#{$com-prefix}hover { outline: 1px solid $colorBlue; }

div.#{$com-prefix}hover-delete{
	outline: 2px solid $colorRed;
  	@include opacity(0.50);
}
div.#{$com-prefix}hover-move{
	outline: 3px solid $colorYell;
}
.#{$com-prefix}badge{
	pointer-events: none;
	background-color: $colorBlue;
	color: #fff;
	padding: 2px 5px;
	position: absolute; z-index: 1;
	font-size: 12px;
}
.#{$com-prefix}badge-red{
	@extend .#{$com-prefix}badge;
	background-color: $colorRed;
}
.#{$com-prefix}badge-yellow{
	@extend .#{$com-prefix}badge;
	background-color: $colorYell;
}
.#{$com-prefix}placeholder{
	position: absolute;
}
.#{$com-prefix}placeholder-int{
	background-color: $colorGreen;
	height: 100%; width: 100%;
	pointer-events: 'none';
	padding: 2px;
}

/********* PANELS **********/

$leftWidth: 16.5%;

.#{$pn-prefix}panel {
  background-color: $mainColor;
  display: inline-block;
  padding: 5px;
  position: absolute;
  box-sizing: border-box;
  text-align: center;
  z-index:3;

  &##{$pn-prefix}commands{
  	min-width: 35px;
    height: 100%;
    width: 3.5%; left:0;
  }

  &##{$pn-prefix}options{
  	@extend ##{$pn-prefix}commands;
  	bottom: 0;
  	height: auto;
  }

  &##{$pn-prefix}views{
  	border-bottom: 2px solid darken($mainColor, 3%);
  	right: 0;
  	width: $leftWidth;
  	z-index: 4;
  }

  &##{$pn-prefix}views-container{
  	height: 100%;
    padding: 50px 0 0;
    right: 0;
    width: $leftWidth;
    overflow: auto;
  }
}

.#{$pn-prefix}btn{
	box-sizing: border-box;
	height: 35px; width: 35px;
	line-height: 35px;
	background-color: transparent;
	border:none;
	color:  $fontColor;
	font-size: 25px;
	margin-bottom: 5px;
	border-radius: 2px;
	cursor: pointer;
	padding: 0 5px;
	position: relative;

	&.#{$pn-prefix}active{
		background-color: $mainDkColor;
    	box-shadow: 0 0 3px darken($mainDkColor,5%) inset;
	}

	> .#{$pn-prefix}arrow-rd {
	  	border-bottom: 5px solid $fontColor;
	  	border-left: 5px solid transparent;
	  	bottom: 2px; right: 2px;
	  	position: absolute;
	}

	> .#{$pn-prefix}buttons{
		background-color: $mainColor;
		border-radius: 2px;
		position: absolute;
		display: none;
		left: 50px;
		top: 0;
		padding: 5px;

		&.#{$pn-prefix}visible{ display: block; }

		> .#{$pn-prefix}arrow-l {
			border-bottom: 5px solid transparent;
		    border-right: 5px solid $mainColor;
		    border-top: 5px solid transparent;
		    left: -5px; top: 15px;
		    position: absolute;
		}
	}
}


/************* Navigator *************/

.#{$nv-prefix}opac50{
	@include opacity(0.50);
}
.#{$nv-prefix}navigator{
	position:relative;
	height: 100%;
	##{$nv-prefix}placeholder{
		width: 100%;
		position: absolute;
		##{$nv-prefix}plh-int{
	    	height: 100%;
	    	padding: 1px;
	    	&.#{$nv-prefix}insert{
	    		background-color: $colorGreen;
	    	}
		}
	}
	.#{$nv-prefix}item {
		color: $fontColor;
		font-weight: lighter;
		text-align: left;
		position: relative;
		background-color: rgba(0, 0, 0, 0.3);
	}
	.#{$nv-prefix}item.#{$nv-prefix}hide {
	  @include opacity(0.55);
	}
	.#{$nv-prefix}item ##{$nv-prefix}counter {
	  font-size: 10px;
	  position: absolute;
	  right: 27px;
	  top: 9px;
	}
	.#{$nv-prefix}item ##{$nv-prefix}btn-eye{
		@extend .btn;
		height: auto !important; width: auto !important;
		font-size: 13px;
	    left: 0; top: 0;
	    padding: 7px 5px 7px 10px;
	    position: absolute;
	    color: darken($fontColor,25%);
	    cursor:pointer;
	    z-index: 1;
	}
	.#{$nv-prefix}item .#{$nv-prefix}title {
		font-size: 11px;
		padding: 7px 10px 7px 30px;
	}
	.#{$nv-prefix}item ##{$nv-prefix}caret {
		font-size: 7px;
		width: 8px;
	}
}
.#{$nv-prefix}item .#{$nv-prefix}title {
  background-color: $mainDkColor;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 7px 10px 7px 25px;
  text-shadow: 0 1px 0 darken($mainDkColor,8%);/*#252525*/
  border-bottom: 1px solid darken($mainDkColor,4%);/*#303030*/
  border-top: 1px solid lighten($mainDkColor,3%);/*#414141*/
  cursor:pointer;
}
.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
	border-left: 1px solid lighten($mainDkColor,2%);
}
.#{$nv-prefix}item > .#{$nv-prefix}children {
  margin-left: 15px;
  display: none;
}
.#{$nv-prefix}item.open > .#{$nv-prefix}children { display: block; }
.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ content:''; }
.#{$nv-prefix}item > ##{$nv-prefix}move {
	color: darken($fontColor,50%);
	position: absolute;
	cursor: move;
  	font-size: 12px;
  	right: 0; top: 0;
  	padding: 7px 10px 7px 5px;
}
.#{$nv-prefix}item{
	&.#{$nv-prefix}selected{
		border: 2px solid $colorBlue;
	}
}

/************* END Navigator *************/

/* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */
.btn.expand{ background-image: none;}
.tempComp{
	background-color: #5b5b5b;
	border: 2px dashed #ccc;
	outline:none !important;
	position: absolute; z-index: 55;
	opacity:0.55;
	filter: alpha(opacity=55);
}

/***********  Components *************/

.#{$comp-prefix}image-placeholder {
	display:	block;
  	background-color: #f5f5f5;
  	color: 	$fontColorDk;
  	height: $imageCompDim; width: $imageCompDim;
  	line-height: $imageCompDim;
  	outline: 3px solid $colorYell;
  	outline-offset: -3px;
  	text-align: center;
  	font-size: $imageCompDim/3;
  	cursor: pointer;

  	&.fa-picture-o::after{
		content:  "\f03e";
	}
}
/***********  END Components *************/


/********* Style Manager **********/

$darkBorder:		darken($mainDkColor,4%); /*303030*/
$lightBorder:		lighten($mainDkColor,3%); /*414141*/
$darkTextShadow:	darken($mainDkColor,8%); /*#252525*/
$inputFontColor:	darken($fontColor,10%); /*#d5d5d5*/
$arrowColor:		darken($fontColor,24%); /*b1b1b1*/

.#{$sm-prefix}close-btn{
	display:block;
	font-size: 23px;
	position: absolute;
	cursor: pointer;
	right: 5px;
	top: 0;
	@include opacity(0.2);

	&:hover{ @include opacity(0.7); }
}
.#{$sm-prefix}sector {
	clear:both;
	border-bottom: 1px solid $darkBorder;
	color:	$fontColor;
	font-weight: lighter;
	text-align:left;

	.#{$sm-prefix}title{
	  background-color: $mainDkColor;
	  font-size: 13px;
	  letter-spacing: 1px;
	  padding: 12px 10px 12px 25px;
	  text-shadow: 0 1px 0 $darkTextShadow;
	  border-bottom: 1px solid $darkBorder;
	  border-top: 1px solid $lightBorder;
	  cursor:pointer;
	}

	.#{$sm-prefix}label {
		margin: 5px 5px 2px 0;
	}
	/*------------------Field--------------------*/
	.#{$sm-prefix}field {
	  width: 100%;
	  position:relative;

	  	input {
		  box-sizing: border-box;
		  color: $inputFontColor;
		  background:none; border:none;
		  padding: 3px 21px 3px 0;
   	 	  width: 100%;
		}

		select {
		  background: none; border: none;
		  color: $inputFontColor;
		  color: transparent;
		  width: 100%; padding: 2px 0;
		  text-shadow: 0 0 0 $inputFontColor;
		  position: relative;
		  z-index:1;
		  @include appearance(none);

		  &::-ms-expand { display: none;}
		}

		.#{$sm-prefix}unit {
		  position: absolute;
		  right: 10px; top: 3px;
		  font-size: 10px;
		  color: $arrowColor;
		  cursor:pointer;
		}

		.#{$sm-prefix}int-arrows, .#{$sm-prefix}sel-arrow{
		  height: 100%; width: 9px;
		  position: absolute;
		  right: 0; top: 0;
		  cursor: ns-resize;
		}
		.#{$sm-prefix}sel-arrow{ cursor:pointer }

		.#{$sm-prefix}u-arrow, .#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow{
			position: absolute;
			height: 0; width: 0;
			border-left: 3px solid transparent;
			border-right: 4px solid transparent;
			cursor:pointer;
		}

		.#{$sm-prefix}u-arrow {
		  border-bottom: 4px solid $arrowColor;
		  top: 4px;
		}
		.#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow{
		  border-top: 4px solid $arrowColor;
		  bottom: 4px;
		}
		.#{$sm-prefix}d-s-arrow{ bottom: 7px; }

	 	&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite {
		  background-color: darken($mainDkColor, 2.5%);/*353535*/
		  border: 1px solid darken($mainDkColor, 6.5%);/*292929*/
		  box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);/*575757*/
		  color: $inputFontColor;
		  border-radius: 2px;
		  box-sizing: border-box;
		  padding: 0 5px;
		}
		&.#{$sm-prefix}select{ padding:0; }
		&.#{$sm-prefix}select select{ height: 20px; }
		&.#{$sm-prefix}select option { margin: 5px 0;}
		&.#{$sm-prefix}composite{
			background-color: transparent;
			border: 1px solid darken($mainDkColor, 2.5%);
		}
		&.#{$sm-prefix}list{
			width:auto;
			padding:0;
			overflow: hidden;
			float:left;

			input{ display:none; }
			label{ cursor:pointer; padding: 5px; display:block;}
			.#{$sm-prefix}radio:checked + label{
				background-color: lighten($mainDkColor, 13%);/*5b5b5b*/
			}
			.#{$sm-prefix}icon{
				background-repeat: no-repeat;
				background-position:center;
			    text-shadow: none;
			    line-height: normal;
			    //padding: 5px 19px;
			}
		}

		&.#{$sm-prefix}integer select{ width:auto; padding: 0; color: transparent;}

	}
	/*------------------END Field--------------------*/

	.#{$sm-prefix}list .#{$sm-prefix}el{
		float:left;
		border-left: 1px solid $darkTextShadow;
		text-shadow: 0 1px 0 darken($mainDkColor, 9%);/*232323*/

		&:first-child{border:none}
		&:hover{background: $mainDkColor; }
	}

	.#{$sm-prefix}properties {
		font-size: 11px;
		padding: 10px 5px;
	}

	/*------------------Property--------------------*/
	.#{$sm-prefix}property{
		box-sizing: border-box;
		float:left; width:50%;
		margin-bottom: 5px;
		padding: 0 5px;

		&.#{$sm-prefix}file, &.#{$sm-prefix}composite, &.#{$sm-prefix}stack, &.#{$sm-prefix}list{
			width:100%;
		}
		.#{$sm-prefix}btn{
			background-color: lighten($mainDkColor, 13%);/*#5d5d5d*/
			border-radius: 2px;
			box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset;
			padding: 5px;
			position: relative;
			text-align: center;
			height: auto; width: 100%;
			cursor: pointer;
			color: $fontColor;
			box-sizing: border-box;
			text-shadow: -1px -1px 0 $mainDkColor;
			border: none;
			@include opacity(0.85);
		}
		.#{$sm-prefix}btn-c {
		  box-sizing: border-box;
		  float: left;
		  width: 100%;
		  padding: 0 5px;
		}

		&.#{$sm-prefix}file ##{$sm-prefix}preview-box {
		  background-color: $lightBorder;
		  border-radius: 2px;
		  margin-top: 5px;
		  position:relative;
		  overflow: hidden;

		  	&.#{$sm-prefix}show{
				border: 1px solid darken($lightBorder,1%);
				padding: 3px 5px;
			}
			##{$sm-prefix}close{
				@extend .#{$sm-prefix}close-btn;
				display:block;
			}
		}
		&.#{$sm-prefix}file .#{$sm-prefix}show ##{$sm-prefix}preview-file{ height: 50px;}
		&.#{$sm-prefix}file ##{$sm-prefix}preview-file {
		  background-size: auto 100%;
		  background-repeat: no-repeat;
		  background-position: center center;
		}

		.#{$sm-prefix}layers {
		  background-color: $mainDkColor;
		  border: 1px solid darken($mainDkColor, 2.5%);
		  box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);
		  border-radius: 2px;
		  margin-top: 5px;
		  min-height: 30px;
		}

		.#{$sm-prefix}layer {
		  background-color: lighten($mainDkColor, 4.5%);
		  border-radius: 2px;
		  box-shadow: 1px 1px 0 darken($mainDkColor, 2.5%), 1px 1px 0 lighten($mainDkColor, 9%) inset;
		  margin: 2px;
		  padding: 7px;
		  position: relative;
		  cursor: pointer;

		  	> ##{$sm-prefix}preview-box {
			  @extend .checker-bg;
			  height: 15px;
			  position: absolute;
			  right: 27px;
			  top: 6px;
			  width: 15px;
			}
			##{$sm-prefix}preview-box, ##{$sm-prefix}preview{
				border-radius:2px;
			}
			##{$sm-prefix}close-layer{
				display:block;
				font-size: 23px;
				position: absolute;
				cursor: pointer;
				right: 5px;
				top: 0;
				@include opacity(0.2);
			}
		  	> ##{$sm-prefix}preview-box ##{$sm-prefix}preview {
			  background-color: white;
			  height: 100%;
			  width: 100%;
			}
			&.#{$sm-prefix}active {
			  background-color: lighten($mainDkColor, 7%);
			}
			&.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box{
				display:none;
			}
		}
	}
	/*------------------END Property--------------------*/

	.#{$sm-prefix}stack .#{$sm-prefix}properties{padding-top: 5px;}

	.#{$sm-prefix}stack ##{$sm-prefix}add {
		  background: none;
		  border: none;
		  color: white;
		  cursor: pointer;
		  font-size: 22px;
		  line-height: 10px;
		  position: absolute;
		  right: 0; top: -20px;
		  opacity: 0.75;

		  &:hover{  @include opacity(1); }
	}

	.#{$sm-prefix}color-picker {
		background-color: $fontColor;
	  	border: 2px solid lighten($mainDkColor, 11.5%);
	  	box-sizing: border-box;
	  	cursor: pointer;
	  	height: 100%; width: 20px;
		position: absolute;
	    right: 0; top: 0;
	}

	.#{$sm-prefix}btn-upload ##{$sm-prefix}upload {
	  left: 0; top: 0;
	  position: absolute;
	  width: 100%;
	  opacity: 0;
	  cursor: pointer;
	}
	.#{$sm-prefix}btn-upload ##{$sm-prefix}label { padding: 2px 0;}

}
/********* END Style Manager **********/


/********* Modal dialog **********/

.#{$mdl-prefix}backlayer {
	background-color: #000;
  	position: absolute;
  	top: 0; z-index: 1;
  	width:100%; height:100%;
  	@include opacity(0.5);
}

.#{$mdl-prefix}container {
  	position: absolute;
  	top: 0; z-index: 10;
  	width:100%; height:100%;
}

.#{$mdl-prefix}dialog {
  	background-color: lighten($mainColor, 2%);
  	border-bottom: 2px solid #353535;
  	text-shadow: -1px -1px 0 #353535;
  	margin: 30px auto 0;
  	max-width: 850px;
  	width: 90%;
   	color: $fontColor;
   	border-radius: 3px;
   	font-weight: lighter;
   	position:relative;
   	z-index: 2;

   	.#{$mdl-prefix}btn-close {
   		@extend .btn-cl;
   		position: absolute;
   		right: 15px; top: 5px;
	}
}

.#{$mdl-prefix}header, .#{$mdl-prefix}content{
	padding:10px 15px;
	clear: both;
}
.#{$mdl-prefix}header{
	position: relative;
	border-bottom: 1px solid $mainDkColor;
	padding: 15px 15px 7px;
}
.#{$mdl-prefix}content{
	border-top: 1px solid $mainLhColor;
}

/********* Assets Manager **********/

.#{$am-prefix}assets {
  background-color: $mainDkColor;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 10px;
  width: 45%;
  float:right;
  height: 325px;
  overflow: auto;

  	.#{$am-prefix}highlight { background-color: $mainColor; }

  	.#{$am-prefix}asset {
	  border-bottom: 1px solid darken($mainDkColor, 3%);
	  padding: 5px;
	  cursor:pointer;
	  position: relative;
	  	&:hover ##{$am-prefix}close { display: block;}

	  	##{$am-prefix}preview{
			height: 70px; width: 30%;
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			background-color: $mainColor;
			border-radius: 2px;
		    float: left;
		}
	}
	##{$am-prefix}close {
		@extend .btn-cl;
		position: absolute;
		right: 5px;
	  	top: 0;
	  	display: none;
	}

	##{$am-prefix}meta {
	  width: 70%;
	  float: left;
	  font-size: 12px;
	  padding: 5px 0 0 5px;
	  box-sizing: border-box;

	  	> div { margin-bottom: 5px;}
	  	##{$am-prefix}dimensions {
		  font-size: 10px;
		  @include opacity(0.5);
		}
	}
}

/********* File uploader **********/

$uploadPadding:	150px 10px;

.#{$am-prefix}file-uploader {
	width: 55%;
	float:left;

	> form {
	  background-color: $mainDkColor;
	  border: 2px dashed #999999;
	  border-radius: 3px;
	  position: relative;
	  text-align: center;
	  margin-bottom: 15px;

	  	&.#{$am-prefix}hover {
			border: 2px solid $colorGreen;
			color: lighten($colorGreen, 5%); /*#7ee07e*/
		}

		&.#{$am-prefix}disabled{
			border-color: red;
		}

	  	##{$am-prefix}uploadFile{
	  		@include opacity(0);
	  		padding: $uploadPadding;
		  	width: 100%;
		  	box-sizing: border-box;
		}
	}

	##{$am-prefix}title {
		position: absolute;
		padding: $uploadPadding;
		width: 100%;
	}
}


/********* Code Manager **********/

.#{$cm-prefix}editor-c{
	float:left;
	box-sizing: border-box;
	width:50%;
}
.#{$cm-prefix}editor{
	font-size: 12px;

	&##{$cm-prefix}htmlmixed {
		padding-right: 10px;
		border-right: 1px solid $mainDkColor;
		##{$cm-prefix}title { color: #a97d44;}
	}
	&##{$cm-prefix}css {
		padding-left: 10px;
		border-left: 1px solid $mainLhColor;
		##{$cm-prefix}title { color: #ddca7e;}
	}
	##{$cm-prefix}title {
	  background-color: $mainDkColor;
	  font-size: 12px;
	  padding: 5px 10px 3px;
	  text-align: right;
	}
}

/*************RTE****************/

##{$rte-prefix}toolbar {
  background-color: $mainColor;
  border: 1px solid $mainDkColor;
  position: absolute;
  border-radius: 3px;
  overflow: hidden;
  z-index: 5;

  .#{$rte-prefix}btn {
  		color: $fontColor;
		padding: 5px;
		width:	25px;
		border-right: 1px solid #353535;
		text-align: center;
		cursor: pointer;

	  	&:last-child{ border-right:none; }
	  	&.btn-info{ background-color: darken($mainDkColor,3%); }
	  	&:hover {  background-color: $mainLhColor;}
	}
}

/********* Spectrum **********/

.sp-hue, .sp-slider{ cursor: row-resize;}
.sp-color, .sp-dragger{ cursor: crosshair;}
.sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;}
.sp-hue{ left: 90%; }
.sp-color{right: 15%;}
.sp-container {
  background-color: #454545;
  border: 1px solid #333333;
  box-shadow: 0 0 7px #111;
  border-radius: 3px;
}
.sp-picker-container{border:none;}
.colpick_dark .colpick_color {  outline: 1px solid #333;}
.sp-cancel, .sp-cancel:hover {
  bottom: -8px;
  color: #777 !important;
  font-size: 25px;
  left: 0;
  position: absolute;
  text-decoration:none;
}
.sp-alpha-handle {
  background-color: #ccc;
  border: 1px solid #555;
  width: 4px;
}
.sp-color, .sp-hue { border: 1px solid #333333;}
.sp-slider {
  background-color: #ccc;
  border: 1px solid #555;
  height: 3px;
  left: -4px;
  width: 22px;
}
.sp-dragger{background:transparent; box-shadow: 0 0 0 1px #111;}
.sp-button-container{
	float: none;
	width: 100%;
	position: relative;
	text-align: right;
}
.sp-container button, .sp-container button:hover, .sp-container button:active{
	background: #333;
    border-color: #292929;
    color: #757575;
    text-shadow: none;
    box-shadow: none;
    padding: 3px 5px;
}

/*********JQuery-UI**********/
.ui-sortable-helper{
	opacity: 0.7; filter: alpha(opacity=70);
}
.ui-sort-highlight{/*ui-sortable-placeholder*/
	background:#123;
	height:20px;
}
.ui-resizable{ position:relative;}
.ui-resizable-se, .ui-resizable-s,.ui-resizable-e{
	position:absolute;
	right: 0;
	bottom:0;
	cursor: nwse-resize;
	height:15px;
	width:15px;
	outline: none !important;
}
.ui-resizable-se{
	opacity: 0; filter: alpha(opacity=0);
	font-size: 10px;
	font-family: FontAwesome;
}
.ui-resizable-se::before{
	content: "\f065";
}
.ui-resizable:hover > .ui-resizable-se{ opacity: 0.3; filter: alpha(opacity=30); }
.ui-resizable-s{
	height:10px;
	width:100%;
	cursor: ns-resize;
}
.ui-resizable-e{
	width:10px;
	height:100%;
	cursor: ew-resize;
}