/***

  jQuery UI CSS

***/
  
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

.ui-icon { width: 16px; height: 16px; background-image: url(data:image/png;base64, ); }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }

/***

  Flatlander CSS

***/

.flatlanderWrapper {
  position:relative;
  width: 100%;
  display: inline-block;
  vertical-align: middle;

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.flatlanderImageWrapper {
  position:relative;
  width: 100%;
}

.flatlanderWrapper * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.flatlanderWrapper :not(input) {
  -moz-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.flatlanderWrapper img {
  width: 100%;
  vertical-align: middle;
}

.flatlanderWorkspace {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  cursor: crosshair;
}

.flatlanderEditable .flatlanderArea {
  position:absolute;
  min-width:1px;
  cursor: pointer;
  cursor: context-menu;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: rgba(121, 121, 121, 0.25);
  border-color: rgba(71, 71, 71, 0.3);
  border-style: solid;
  opacity: 1;
  color: #000;
  border-width: 2px;
}

.flatlanderEditable .flatlanderArea.active {
  border-style: dashed;
  animation: selected 250ms infinite;
  -webkit-animation: selected 250ms infinite;
  -moz-animation: selected 250ms infinite;
  -o-animation: selected 250ms infinite;
  -ms-animation: selected 250ms infinite;
}

@keyframes selected {
  0%    { border-color: rgba(240, 255, 163, 0.2); }
  50%   { border-color: rgba(240, 255, 163, 0.1); }
  100%  { border-color: rgba(240, 255, 163, 0.2); }
}

@-webkit-keyframes selected {
  0%    { border-color: rgba(240, 255, 163, 0.2); }
  50%   { border-color: rgba(240, 255, 163, 0.1); }
  100%  { border-color: rgba(240, 255, 163, 0.2); }
}

@-moz-keyframes selected {
  0%    { border-color: rgba(240, 255, 163, 0.2); }
  50%   { border-color: rgba(240, 255, 163, 0.1); }
  100%  { border-color: rgba(240, 255, 163, 0.2); }
}

@-o-keyframes selected {
  0%    { border-color: rgba(240, 255, 163, 0.2); }
  50%   { border-color: rgba(240, 255, 163, 0.1); }
  100%  { border-color: rgba(240, 255, 163, 0.2); }
}

@-ms-keyframes selected {
  0%    { border-color: rgba(240, 255, 163, 0.2); }
  50%   { border-color: rgba(240, 255, 163, 0.1); }
  100%  { border-color: rgba(240, 255, 163, 0.2); }
}

.flatlanderEditable .flatlanderArea .hotspot_point {
  width: 30px;
  height: 30px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlDOUIxNUY5NThEMzExRTM5NTkzREIzQUE2NTNBQ0U5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlDOUIxNUZBNThEMzExRTM5NTkzREIzQUE2NTNBQ0U5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUM5QjE1Rjc1OEQzMTFFMzk1OTNEQjNBQTY1M0FDRTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUM5QjE1Rjg1OEQzMTFFMzk1OTNEQjNBQTY1M0FDRTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5fC98PAAAAR0lEQVR42mIsKipiIBP8h9KM5GhmYhggMGrxqMWjFo9aPGrx4LeYBamWobSWGjo+ZqTQp6P18ajFoxaPWjxq8ajF1AUAAQYA6aEFlac3lJIAAAAASUVORK5CYII=);
  left: 50%;
  top: 50%;
  position: absolute;
  margin-top: -15px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: -15px;
}

.flatlanderEditable .flatlanderArea:before {
  background: rgba(255,255,255,0.5);
  padding: 0 10px;
  border-radius: 2px;
  content: attr(data-title);
  font-family: Helvetica, Arial, Verdana, sans-serif;
  display: inline-block;
  text-align: left;
  position: absolute;
  left: 10px;
  right:10px;
  top: 10px;
  line-height: 20px;
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flatlanderEditable .flatlanderArea:hover:before {
  width: auto;
  white-space: normal;
}

/*** editor ***/

.flatlanderEditor {
  display: block;
  width: 300px; 
  margin-left: 10px;
  position: absolute;
  top: 0px;
  left: 100%;
  z-index: 50;
  background-color: #FFF;
  padding: 10px 10px 30px 10px;
}


.flatlanderEditor label {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -moz-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
  width: 100%;
  display: inline-block;
}

.flatlanderEditor input[type="file"] {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 25px;
}

.flatlanderEditor [name="fl-radioform"] {
  margin-top: 15px;
  width: 100px;
}

.flatlanderEditor [name="fl-radioform"] > div {
  width: 30%;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: center;
  height: 30px;
}

.flatlanderEditor form {
  margin: 0;
}

.flatlanderEditor button[rel="deleteArea"],
.flatlanderEditor button[rel="deleteFocusPoint"],
.flatlanderEditor button[rel="deleteBackground"] {
  margin-bottom: 0px;
  outline: none;
  cursor: pointer;
  transition: background 100ms, border 100ms;
}

.flatlanderEditor button[rel="deleteFocusPoint"],
.flatlanderEditor button[rel="deleteBackground"] {
  display: none;
}

.flatlanderEditor button[rel="addFocusPoint"] {
  margin-bottom: 20px;
  outline: none;
  cursor: pointer; 
}

.flatlanderEditor .fl-editorContainer {
  font-family :Helvetica, Arial, Verdana, sans-serif;
  width: 300px;
  display: inline-block;
  height: 100%;
  width: 100%;
}

.flatlanderEditor .fl-editorContainer fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.flatlanderEditor .fl-editorContainer fieldset[name="contenttype"] {
  position: relative;
  margin-top: 10px;
  height: 180px;
}

.flatlanderEditor .fl-editorContainer fieldset[name="contenttype"] > label{
  position: absolute;
  top: 0;
  left: 0;
  padding:5px;
  width:50%;
  cursor: pointer;
}

.flatlanderEditor .fl-editorContainer fieldset[name="contenttype"] > label.active{
  background: #CCC;
}

.flatlanderEditor .fl-editorContainer fieldset[name="contenttype"] > label[for="html"]{
  left: 50%;
}

.flatlanderEditor .fl-editorContainer fieldset[name="contenttype"] > textarea{
  position: absolute;
  top: 25px;
  display: none;
  height: 12em;
}

.flatlanderEditor .fl-editorContainer fieldset[name="contenttype"] > label.active + textarea{
  display: inline-block;
}

.flatlanderEditor .fl-editorContainer select{
  width: 100%;
  margin: 0px 0 15px 0;
  outline: none;
}

.flatlanderEditor .fl-editorContainer textarea {
  line-height:2em;
  border: solid 1px #CCC;
  display:inline-block;
  width:100%;
  outline:none;
  transition:box-shadow 200ms;
  margin-bottom: 15px;
  max-width: 100%;
  resize: none;
}

.flatlanderEditor .fl-closeEditor {
  display: inline-block;
  width:100%;
  height: 30px;
  color: #666;
  font-size: 14px;
  cursor: move;
  text-align: right;
  padding-right: 15px;
  padding-top: 5px;
  
  background: #eeeeee;
  border-bottom: solid 1px #999;
}

.flatlanderEditor .fl-closeEditor span{
  cursor: pointer;
}

.flatlanderEditor .fl-closeEditor span:hover {
  text-decoration: underline;
}

.flatlanderEditor .fl-layers{
  border: solid 1px #999;
  margin:  0;
  padding: 0;
  list-style: none;
  background: #DBDBDB;
  margin-bottom: 10px;
  border-bottom: solid 2px #999;
  overflow: hidden;
}

.flatlanderEditor .fl-layers:empty {
  border: none;
}

.flatlanderEditor .fl-layers:empty ~ *{
   display: none !important;
}

.flatlanderEditor .fl-layers li{
  padding: 8px 10px;
  background: #F5F5F5;
  border-bottom: solid 1px #999;
  cursor: pointer;
  height: 35px !important;
  transition: opacity 100ms, box-shadow: 100ms;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.flatlanderEditor .fl-layers li.ui-sortable-helper{
  box-shadow: 0 1px 2px 1px rgba(0,0,0,0.25);
  opacity: 0.9;
  cursor: move;
}

.flatlanderEditor .fl-layers li:last-child{
  border-bottom: none;
  margin-bottom: 0px;
}

.flatlanderEditor .fl-layers li.fl-active{
  background: rgb(240, 255, 163);
}

.flatlanderEditor hr {
    padding: 0;
    border: none;
    border-top: medium double #A7A7A7;
    color: #A7A7A7;
    text-align: center;
} 