/* hover layer */
div.editable.element.hover{
	position: absolute; left: -1000px; top: -1000px; width: 0; height: 0; z-index: 9999;
	background-color: rgba(0, 60, 120, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(123, 157, 191, 0.5);
	transition: opacity 0.2s ease-out, background-color 0.2s ease-out, visibility 0s linear 0.2s;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}
div.editable.element.hover.active{
	transition-delay: 0s;
	visibility: visible;
	opacity: 1;
}

/* hover layer marks */
div.editable.element.hover.add{
	background-color: rgba(30, 220, 0, 0.4);
	box-shadow: 0 0 10px rgba(0, 200, 0, 0.5);
}
div.editable.element.hover.del{
	background-color: rgba(255, 30, 30, 0.4);
	box-shadow: 0 0 10px rgba(200, 0, 0, 0.5);
}

/* buttons */
div.editable.element.hover > img{
	position: absolute; z-index: 3;
	transition: opacity 0.2s ease-out;
	pointer-events: auto;
	opacity: 0.5;
}
div.editable.element.hover > img.add{
	right: -7px; bottom: -8px;
}
div.editable.element.hover > img.del{
	right: -7px; top: -6px;
}
div.editable.element.hover > img:hover{
	opacity: 1;
}

/* upload */
div.editable.element > div.upload{
	position: relative; width: 100%; height:100%; z-index: 2;
	overflow: hidden;
	pointer-events: auto;
}
div.editable.element > div.upload > form{
	display: block;
	position: absolute; top: 0; right: 0; height:100%; z-index:2;
	overflow: hidden;
}
div.editable.element > div.upload > form > input[name=file]{
	 height: 100%;
	 margin: 0; padding: 0; border: 0;
	 font-size: 1000px;
}
div.editable.element > iframe{
	position: absolute; top: 0; left: 0; width: 0; height: 0;
	pointer-events: none;
}