scrivito_editors 0.66.0 → 0.70.0.rc1

data/app/assets/javascripts/scrivito_editors/binary_editor.js.coffee

@@ -1,22 +1,25 @@
 scrivito.on 'content', (content) ->
   return unless scrivito.in_editable_view()
-  fields = $(content).find('[data-scrivito-field-type=binary]:not([data-editor])')
-  scrivito.editors._file_dropzone fields,
-    (el, file) -> el.scrivito('save', file).then(-> el.scrivito('reload')),
-    'image-editor-dragover'
-  fields.filter('[data-scrivito-editors-allow-delete]').each -> setup_delete_btn $(this)
+  fields = $(content).find('''
+    [data-scrivito-field-type=binary]:not([data-editor]),
+    [data-editor~=binary]
+  ''')
 
-setup_delete_btn = (el) ->
-  return unless el.scrivito('content')
-  container = if el.prop('tagName') is 'IMG'
-    css_class = 'scrivito-editor-image-container'
-    el.wrap("<div class=#{css_class}></div>") unless el.parent(".#{css_class}").length
-    el.parent(".#{css_class}")
-  else
-    el
+  fields.each ->
+    element = $(this)
+    container = scrivito.editors._setup_binary_button_container(element,
+        'scrivito-editor-binary-button-container')
 
-  return if container.find('.delete-binary').length
-  $("<a href=# class='delete-binary editing-button editing-red delete'>
-     <i class='editing-icon editing-icon-trash'></i></a>")
-    .prependTo(container)
-    .click -> el.scrivito('save', null).then(-> el.scrivito('reload')) and off
+    scrivito.editors._file_dropzone container,
+      (_, file) -> element.scrivito('save', file).then(-> element.scrivito('reload')),
+      'image-editor-dragover'
+
+    if element.scrivito('content') && element.is('[data-scrivito-editors-allow-delete]')
+      setup_delete_btn(container, element)
+
+setup_delete_btn = (container, element) ->
+  if container && container.find('.delete-binary').length == 0
+    $("<a href='#' class='delete-binary editing-button'>
+       <i class='editing-icon editing-icon-trash'></i></a>")
+      .prependTo(container)
+      .click -> element.scrivito('save', null).then(-> element.scrivito('reload')) and off

data/app/assets/javascripts/scrivito_editors/date_editor.js.coffee

@@ -15,14 +15,20 @@ $ ->
             # Prevent the property view to close when the ESC key is pressed.
             event.stopPropagation()
 
-      save = (dateTimeText) ->
-        datetimepicker_element = $(this)
-        cmsField = datetimepicker_element.data('cmsField')
-        datetime = datetimepicker_element.datetimepicker('getDate')
+      save = (datetimepickerElement, dateTimeText, additionalDoneEvent) ->
+        cmsField = datetimepickerElement.data('cmsField')
+        datetime = datetimepickerElement.datetimepicker('getDate')
         cmsField.scrivito('save', datetime)
           .done ->
             cmsField.trigger('save.scrivito_editors')
-            cmsField.scrivito('reload')
+            if additionalDoneEvent
+              cmsField.trigger(additionalDoneEvent)
+
+      onClose = (dateTimeText) ->
+        save $(this), dateTimeText, 'scrivito_editors:blur'
+
+      onSelect = (dateTimeText) ->
+        save $(this), dateTimeText
 
       $('body').on 'click', '[data-scrivito-field-type="date"]:not(.hasDatepicker):not([data-editor]), [data-editor~="date"]', (event) ->
         event.preventDefault()
@@ -35,7 +41,10 @@ $ ->
         dateFormat = cmsField.attr('data-date-format')
         timeFormat = cmsField.attr('data-time-format')
 
-        options = onClose: save
+        options =
+          onClose: onClose
+          onSelect: onSelect
+
         options.dateFormat = dateFormat || 'yy-mm-dd'
         options.timeFormat = timeFormat if timeFormat
 

data/app/assets/javascripts/scrivito_editors/helpers/file_dropzone.js.coffee

@@ -1,10 +1,16 @@
 scrivito.editors._file_dropzone = (fields, callback) -> fields.each(-> setup $(this), callback)
+
 setup = (el, callback) ->
-  field = el.closest('[data-scrivito-field-name]')
-  el.on 'dragenter', -> field.addClass('image-editor-dragover') and off
-  el.on 'dragleave', -> field.removeClass('image-editor-dragover') and off
+  el.on 'dragenter', ->
+    el.children().not('img').css(pointerEvents: 'none')
+    el.addClass('image-editor-dragover') and off
+
+  el.on 'dragleave', ->
+    el.children().not('img').css(pointerEvents: 'auto')
+    el.removeClass('image-editor-dragover') and off
+
   el.on 'drop', (e) ->
-    field.removeClass 'image-editor-dragover'
+    el.removeClass 'image-editor-dragover'
     if (files = e.originalEvent.dataTransfer?.files)?.length is 1
-      callback field, files[0]
+      callback el, files[0]
     off

data/app/assets/javascripts/scrivito_editors/helpers/setup_binary_button_container.js.coffee

@@ -0,0 +1,6 @@
+scrivito.editors._setup_binary_button_container = (element, container_class) ->
+  container = element.parent(".scrivito-editor-button-container")
+  if container.length
+    container.addClass(container_class)
+  else
+    element.wrap("<div class='#{container_class} scrivito-editor-button-container' />").parent()

data/app/assets/javascripts/scrivito_editors/html_editor.js.coffee

@@ -97,6 +97,7 @@ $ ->
     cmsField = $(editor.$element)
     editor.core.destroy()
     cmsField.removeClass('scrivito_editors_redactor')
+    cmsField.trigger('scrivito_editors:blur')
 
   # Saves the current editor content to the CMS.
   saveContents = (editor) ->

data/app/assets/javascripts/scrivito_editors/{image_editor.js.coffee → image_drop_editor.js.coffee}

@@ -3,7 +3,7 @@ scrivito.on 'content', (content) ->
   setup = (sel) -> scrivito.editors._file_dropzone $(content).find(sel), save
   setup 'img[data-scrivito-field-type=linklist]:not([data-editor])'
   setup 'img[data-scrivito-field-type=reference]:not([data-editor])'
-  setup '[data-editor~=image]'
+  setup '[data-editor~=image_drop]'
 
 save = (field, file) ->
   createImage(file).then (obj) ->

data/app/assets/javascripts/scrivito_editors/image_editor.js.coffee.erb

@@ -0,0 +1,76 @@
+scrivito.on 'content', (content) ->
+  return unless scrivito.in_editable_view()
+  $(content).find(  '''
+      img[data-scrivito-field-type=binary]:not([data-editor]),
+      [data-editor~=image]
+    ''').each -> setup_edit_btn $(this)
+
+setup_edit_btn = (element) ->
+  scrivito.editors._setup_binary_button_container(element, 'scrivito-editor-image-button-container')
+
+  if element.scrivito('content')
+    $("<a href='#' class='edit-image editing-button'>
+       <i class='editing-icon editing-icon-edit'></i></a>")
+      .insertBefore(element)
+      .click (event) ->
+        event.preventDefault()
+        open_image_editing_dialog(element)
+
+open_image_editing_dialog = (element) ->
+  content = $("<div class='image_kit_start' />")
+  dialog = scrivito.dialog(content, open_image_editing_dialog_options())
+  setup_image_kit_container(element, dialog)
+
+open_image_editing_dialog_options = ->
+  dialog_options =
+    color: "dark"
+    confirm:
+      title: "Confirm"
+      color: "green"
+    cancel:
+      title: "Cancel"
+      color: "lightgrey"
+
+scrivito_imgly_asset_path_resolver = (path) ->
+  <%= ScrivitoEditors::Engine.imgly_assets { |file| image_path(file) }.to_json %>[path]
+
+setup_image_kit = (image, container) ->
+  new ImglyKit(
+    renderer: "canvas"
+    assetsUrl: "imgly_sdk"
+    image: image
+    versionCheck: false
+    container: container[0]
+    ui:
+      enabled: true
+      assetPathResolver: scrivito_imgly_asset_path_resolver
+  )
+
+setup_image_kit_container = (element, dialog) ->
+  container = $(".image_kit_start")
+  image = new Image()
+  url = element.scrivito("content").url
+
+  #workaround to prevent crossOrigin warnings in chrome and safari
+  if url.indexOf("?") < 0
+    url += "?" + new Date().getTime()
+  else
+    url += "&" + new Date().getTime()
+
+  #Order is important for CORS problem in browsers http://stackoverflow.com/a/18422548
+  image.crossOrigin = "Anonymous"
+  image.src = url
+
+  image.onload = ->
+    kit = setup_image_kit(image, container)
+    kit.ui.selectOperations(except: "stickers")
+    kit.run()
+    dialog.when_closed.then(=> save_edited_image(element, kit))
+
+save_edited_image = (element, kit) ->
+  kit.render("blob", "image/jpeg").then (blob) ->
+    element.scrivito "save",
+      scrivito.upload_binary
+        blob: blob
+        filename: element.scrivito("content").filename
+    .then -> element.scrivito("reload")

data/app/assets/javascripts/scrivito_editors/reload.js.coffee

@@ -0,0 +1,12 @@
+$ ->
+  # Enable `data-reload=true` for automatic reload when an editor is done.
+  #
+  # For example:
+  #   scrivito_tag(:div, @obj, :my_attribute, data: { reload: true })
+
+  selector = '[data-scrivito-field-type][data-reload=true]'
+
+  scrivito.on 'content', ->
+    if scrivito.in_editable_view()
+      $(':root').on 'scrivito_editors:blur', selector, (event) ->
+        $(this).scrivito("reload")

data/app/assets/javascripts/scrivito_editors/slider_editor.js.coffee

@@ -11,7 +11,7 @@ $ ->
         content = ui.value
         cmsField.scrivito('save', content).done ->
           cmsField.trigger('save.scrivito_editors')
-          cmsField.scrivito('reload')
+          cmsField.trigger('scrivito_editors:blur')
 
       onSlide = (event, ui) ->
         cmsField = $(@).data('cmsField')

data/app/assets/javascripts/scrivito_editors/string_editor.js.coffee

@@ -26,8 +26,7 @@ $ ->
     cmsField = $(event.currentTarget)
 
     save(cmsField).done ->
-      if cmsField.attr('data-reload') == 'true'
-        cmsField.scrivito('reload')
+      cmsField.trigger('scrivito_editors:blur')
 
     finishEditing(cmsField)
 
@@ -45,7 +44,11 @@ $ ->
     cleanUp(cmsField)
 
     clone = cmsFieldAndPastedContent(cmsField).clone()
-    clone.find('div:not(:first,:has(br)),p:not(:first)').before('\n')
+    # Starting with empty element, entering 3 lines, per browser:
+    # Chrome: 1<div>2</div><div>3</div>
+    # IE: <p>1</p><p>2</p><p>3</p>
+    # Firefox: 1<br>2<br>3<br>
+    clone.find('div:not(:has(br)),p:not(:first)').before('\n')
     clone.find('br').replaceWith('\n')
     content = clone.text()
     clone.remove()

data/app/assets/javascripts/scrivito_editors/stringlist_editor.js.coffee

@@ -0,0 +1,13 @@
+#= require jquery.caret
+#= require jquery.tag-editor
+
+scrivito.on 'content', (content) ->
+  if scrivito.in_editable_view()
+    $(content).find('''
+      [data-scrivito-field-type=stringlist]:not([data-editor]),
+      [data-editor~=stringlist]
+    ''').each ->
+      field = $(this)
+      field.tagEditor
+        initialTags: field.scrivito('content')
+        onChange: (field, editor, tags) -> field.scrivito('save', tags)

data/app/assets/javascripts/scrivito_editors_core.js

@@ -1,4 +1,6 @@
 //= require redactor
+//= require canvas-to-blob
+//= require imglykit
 //= require_self
 //= require_tree ./scrivito_editors
 

data/app/assets/stylesheets/imglykit-night-ui.css

@@ -0,0 +1,1098 @@
+/*!
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #1E1E1E;
+  overflow: hidden;
+  text-align: left; }
+  .imglykit div, .imglykit span, .imglykit applet, .imglykit object, .imglykit iframe,
+  .imglykit h1, .imglykit h2, .imglykit h3, .imglykit h4, .imglykit h5, .imglykit h6, .imglykit p, .imglykit blockquote, .imglykit pre,
+  .imglykit a, .imglykit abbr, .imglykit acronym, .imglykit address, .imglykit big, .imglykit cite, .imglykit code,
+  .imglykit del, .imglykit dfn, .imglykit em, .imglykit img, .imglykit ins, .imglykit kbd, .imglykit q, .imglykit s, .imglykit samp,
+  .imglykit small, .imglykit strike, .imglykit strong, .imglykit sub, .imglykit sup, .imglykit tt, .imglykit var,
+  .imglykit b, .imglykit u, .imglykit i, .imglykit center,
+  .imglykit dl, .imglykit dt, .imglykit dd, .imglykit ol, .imglykit ul, .imglykit li,
+  .imglykit fieldset, .imglykit form, .imglykit label, .imglykit legend,
+  .imglykit table, .imglykit caption, .imglykit tbody, .imglykit tfoot, .imglykit thead, .imglykit tr, .imglykit th, .imglykit td,
+  .imglykit article, .imglykit aside, .imglykit canvas, .imglykit details, .imglykit embed,
+  .imglykit figure, .imglykit figcaption, .imglykit footer, .imglykit header, .imglykit hgroup,
+  .imglykit menu, .imglykit nav, .imglykit output, .imglykit ruby, .imglykit section, .imglykit summary,
+  .imglykit time, .imglykit mark, .imglykit audio, .imglykit video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline; }
+  .imglykit table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+  .imglykit caption, .imglykit th, .imglykit td {
+    text-align: left;
+    font-weight: normal;
+    vertical-align: middle; }
+  .imglykit q, .imglykit blockquote {
+    quotes: none; }
+    .imglykit q:before, .imglykit q:after, .imglykit blockquote:before, .imglykit blockquote:after {
+      content: "";
+      content: none; }
+  .imglykit a img {
+    border: none; }
+  .imglykit * {
+    box-sizing: border-box; }
+
+.imglykit-float-left {
+  float: left; }
+
+.imglykit-float-right {
+  float: right; }
+
+.imglykit-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: table;
+  width: 100%;
+  height: 100%;
+  table-layout: fixed; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-canvas-container-row {
+  display: table-row; }
+
+.imglykit-container .imglykit-canvas-container {
+  position: relative;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  display: table-cell;
+  overflow: hidden; }
+
+.imglykit-container .imglykit-canvas-inner-container {
+  position: relative; }
+  .imglykit-container .imglykit-canvas-inner-container canvas {
+    cursor: move; }
+  .imglykit-container .imglykit-canvas-inner-container .imglykit-canvas-controls {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%; }
+    .imglykit-container .imglykit-canvas-inner-container .imglykit-canvas-controls.imglykit-canvas-controls-disabled {
+      display: none; }
+
+.imglykit-webcam-video {
+  width: 100px;
+  height: 100px; }
+
+.imglykit-webcam-button {
+  -webkit-border-radius: 26.5px;
+  -moz-border-radius: 26.5px;
+  -ms-border-radius: 26.5px;
+  -o-border-radius: 26.5px;
+  border-radius: 26.5px;
+  margin: 15px auto 0 !important;
+  width: 110px;
+  height: 53px;
+  padding-top: 7px !important;
+  background: #43ADEB;
+  cursor: pointer; }
+  .imglykit-webcam-button img {
+    margin: auto;
+    width: 39px !important;
+    height: 39px !important; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-splash-container {
+  display: table;
+  width: 100%;
+  height: 100%;
+  padding: 30px;
+  table-layout: fixed; }
+  .imglykit-container .imglykit-splash-container.imglykit-header-padding {
+    padding-top: 100px; }
+  .imglykit-container .imglykit-splash-container .imglykit-splash-cell {
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+    border-radius: 5px;
+    display: table-cell; }
+  .imglykit-container .imglykit-splash-container .imglykit-splash-button {
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+    border-radius: 5px;
+    display: inline-block;
+    margin-bottom: 10px;
+    padding: 0 15px;
+    background: #43ADEB;
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 18px;
+    line-height: 38px;
+    font-weight: bold;
+    color: white; }
+  .imglykit-container .imglykit-splash-container .imglykit-splash-or {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    height: 30px; }
+    .imglykit-container .imglykit-splash-container .imglykit-splash-or-line {
+      position: relative;
+      display: table-cell; }
+      .imglykit-container .imglykit-splash-container .imglykit-splash-or-line:before {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        display: block;
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        width: 100%;
+        height: 1px;
+        content: ''; }
+    .imglykit-container .imglykit-splash-container .imglykit-splash-or-word {
+      display: table-cell;
+      vertical-align: middle;
+      width: 30px;
+      font-family: Helvetica, Arial, sans-serif;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.2); }
+  .imglykit-container .imglykit-splash-container .imglykit-splash-row, .imglykit-container .imglykit-splash-container .imglykit-splash-cell {
+    width: 100%;
+    text-align: center;
+    vertical-align: middle; }
+    .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-cell, .imglykit-container .imglykit-splash-container .imglykit-splash-cell .imglykit-splash-cell {
+      padding: 10px; }
+  .imglykit-container .imglykit-splash-container .imglykit-splash-row {
+    display: table-row;
+    cursor: pointer; }
+    .imglykit-container .imglykit-splash-container .imglykit-splash-row--upload, .imglykit-container .imglykit-splash-container .imglykit-splash-row--camera {
+      height: 45%; }
+    .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content {
+      margin: auto;
+      margin-top: 10px;
+      width: 250px;
+      font-family: Helvetica, Arial, Verdana; }
+      .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content h1 {
+        margin-bottom: 5px;
+        font-size: 20px;
+        font-weight: bold;
+        color: white; }
+      .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content .imglykit-splash-text {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.2); }
+    .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-upload-hidden-input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      visibility: hidden;
+      width: 0;
+      height: 0; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-header-row {
+  display: table-row;
+  height: 30px; }
+
+.imglykit-container .imglykit-header {
+  display: table-cell;
+  background: #1A1A1A;
+  text-align: center;
+  color: white;
+  font: bold 11px Helvetica, Arial, sans-serif;
+  line-height: 30px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 30px;
+  z-index: 2; }
+  .imglykit-container .imglykit-header .imglykit-close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    margin-right: 10px; }
+    .imglykit-container .imglykit-header .imglykit-close-button img {
+      vertical-align: middle; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-top-controls-row {
+  display: table-row; }
+
+.imglykit-container .imglykit-top-controls {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  display: table-cell;
+  width: 100%;
+  height: 40px;
+  color: white;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  padding: 0 20px;
+  z-index: 2;
+  background: #2B2B2B; }
+  .imglykit-container .imglykit-top-controls > * * {
+    display: inline-block; }
+  .imglykit-container .imglykit-top-controls, .imglykit-container .imglykit-top-controls * {
+    line-height: 30px; }
+  .imglykit-container .imglykit-top-controls.imglykit-header-padding {
+    top: 30px; }
+
+.imglykit-container .imglykit-top-controls-left, .imglykit-container .imglykit-top-controls-right {
+  padding-top: 5px; }
+
+.imglykit-container .imglykit-top-controls-left {
+  float: left; }
+
+.imglykit-container .imglykit-top-controls-right {
+  float: right;
+  display: none; }
+  .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out {
+    padding: 0 15px;
+    cursor: pointer;
+    border-left: 1px solid #363636; }
+    .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in img, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out img {
+      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+      opacity: 0.4;
+      vertical-align: middle; }
+    .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in:hover img, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out:hover img {
+      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+      opacity: 1; }
+  .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out {
+    padding-right: 0; }
+  .imglykit-container .imglykit-top-controls-right .imglykit-zoom-level {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+    opacity: 0.4;
+    padding: 0 10px; }
+
+.imglykit-container .imglykit-undo {
+  cursor: pointer;
+  border-right: 1px solid #363636;
+  color: rgba(255, 255, 255, 0.4);
+  padding: 0 10px;
+  display: none; }
+  .imglykit-container .imglykit-undo img {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+    opacity: 0.4;
+    margin-right: 5px;
+    vertical-align: middle; }
+
+.imglykit-container .imglykit-export {
+  cursor: pointer;
+  border-right: 1px solid #363636;
+  color: rgba(255, 255, 255, 0.4);
+  padding: 0 10px;
+  display: none; }
+  .imglykit-container .imglykit-export img {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+    opacity: 0.4;
+    margin-right: 5px;
+    vertical-align: middle; }
+
+.imglykit-container .imglykit-new {
+  cursor: pointer;
+  border-right: 1px solid #363636;
+  color: rgba(255, 255, 255, 0.4);
+  padding-right: 10px; }
+  .imglykit-container .imglykit-new img {
+    margin-right: 5px;
+    vertical-align: middle; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-knob {
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+  background: white;
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  cursor: pointer; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-crosshair {
+  width: 34px;
+  height: 34px;
+  cursor: pointer;
+  float: left; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-transparent-knob {
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+  -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(0, 0, 0, 0.5);
+  margin-top: -10px;
+  margin-left: -10px;
+  cursor: pointer; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit .imglykit-loadingOverlay {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: rgba(30, 30, 30, 0.9); }
+
+.imglykit .imglykit-loadingOverlay-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -40px;
+  margin-left: -75px;
+  border-radius: 5px;
+  width: 150px;
+  height: 70px;
+  padding: 10px;
+  background: #1E1E1E; }
+  .imglykit .imglykit-loadingOverlay-content img {
+    display: block;
+    margin: auto;
+    margin-bottom: 10px; }
+  .imglykit .imglykit-loadingOverlay-content span {
+    display: block;
+    font: bold 11px Helvetica, Arial, sans-serif;
+    text-align: center;
+    color: white; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-controls-row {
+  display: table-row; }
+
+.imglykit-container .imglykit-controls-container {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  display: table-cell;
+  width: 100%;
+  height: 80px;
+  background: #2B2B2B; }
+
+.imglykit-container .imglykit-controls {
+  width: 100%;
+  text-align: center;
+  height: 80px; }
+  .imglykit-container .imglykit-controls > div:not(.imglykit-scrollbar-background) > * {
+    width: 100%;
+    display: table;
+    table-layout: fixed; }
+    .imglykit-container .imglykit-controls > div:not(.imglykit-scrollbar-background) > * > * {
+      display: table-cell;
+      vertical-align: top; }
+  .imglykit-container .imglykit-controls .imglykit-controls-list-container {
+    overflow: hidden;
+    height: 80px; }
+  .imglykit-container .imglykit-controls .imglykit-controls-list {
+    position: absolute;
+    width: 100%;
+    overflow: hidden;
+    overflow-x: auto;
+    text-align: center;
+    white-space: nowrap;
+    height: 80px;
+    font-size: 0; }
+  .imglykit-container .imglykit-controls li {
+    -webkit-transition: background-color 0.2s ease-out;
+    -moz-transition: background-color 0.2s ease-out false;
+    -o-transition: background-color 0.2s ease-out false;
+    transition: background-color 0.2s ease-out;
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+    cursor: pointer;
+    line-height: 80px;
+    border-left: 1px solid #363636; }
+    .imglykit-container .imglykit-controls li:last-child {
+      border-right: 1px solid #363636; }
+    .imglykit-container .imglykit-controls li.imglykit-controls-item--with-label:hover img {
+      margin-bottom: 20px; }
+    .imglykit-container .imglykit-controls li img {
+      -webkit-transition: all 0.2s ease-out;
+      -moz-transition: all 0.2s ease-out false;
+      -o-transition: all 0.2s ease-out false;
+      transition: all 0.2s ease-out;
+      width: 40px;
+      vertical-align: middle; }
+    .imglykit-container .imglykit-controls li.imglykit-controls-item-active {
+      background: rgba(0, 0, 0, 0.3); }
+    .imglykit-container .imglykit-controls li .imglykit-controls-label {
+      -webkit-transition: all 0.2s ease-out;
+      -moz-transition: all 0.2s ease-out false;
+      -o-transition: all 0.2s ease-out false;
+      transition: all 0.2s ease-out;
+      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+      opacity: 0;
+      position: absolute;
+      bottom: -20px;
+      width: 100%;
+      color: white;
+      font: bold 10px Helvetica, Arial, sans-serif;
+      text-align: center; }
+    .imglykit-container .imglykit-controls li:hover .imglykit-controls-label {
+      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+      opacity: 1;
+      bottom: 13px; }
+  .imglykit-container .imglykit-controls .imglykit-controls-item-label {
+    color: white;
+    font-size: 10px;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: bold;
+    margin-top: 10px; }
+  .imglykit-container .imglykit-controls .imglykit-controls-icon {
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    font-size: 0; }
+    .imglykit-container .imglykit-controls .imglykit-controls-icon img {
+      vertical-align: middle; }
+  .imglykit-container .imglykit-controls .imglykit-controls-item-canvas {
+    display: inline-block;
+    width: 42px;
+    height: 50px;
+    vertical-align: middle; }
+  .imglykit-container .imglykit-controls li[data-disabled] {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
+    opacity: 0.2; }
+  .imglykit-container .imglykit-controls li:hover:not([data-disabled]), .imglykit-container .imglykit-controls .imglykit-controls-button:hover:not([data-disabled]) {
+    -webkit-box-shadow: 0 -3px 0 0 #43ADEB inset;
+    -moz-box-shadow: 0 -3px 0 0 #43ADEB inset;
+    box-shadow: 0 -3px 0 0 #43ADEB inset;
+    background-color: rgba(0, 0, 0, 0.3); }
+    .imglykit-container .imglykit-controls li:hover:not([data-disabled]) img, .imglykit-container .imglykit-controls .imglykit-controls-button:hover:not([data-disabled]) img {
+      -webkit-transform: scale(1.1);
+      -moz-transform: scale(1.1);
+      -ms-transform: scale(1.1);
+      -o-transform: scale(1.1);
+      transform: scale(1.1); }
+  .imglykit-container .imglykit-controls .imglykit-controls-button {
+    -webkit-transition: background-color 0.2s ease-out;
+    -moz-transition: background-color 0.2s ease-out false;
+    -o-transition: background-color 0.2s ease-out false;
+    transition: background-color 0.2s ease-out;
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    font-size: 0;
+    cursor: pointer;
+    position: relative; }
+    .imglykit-container .imglykit-controls .imglykit-controls-button:first-child {
+      border-right: 1px solid #363636; }
+    .imglykit-container .imglykit-controls .imglykit-controls-button:last-child {
+      border-left: 1px solid #363636; }
+    .imglykit-container .imglykit-controls .imglykit-controls-button img {
+      vertical-align: middle;
+      width: 40px;
+      -webkit-transition: all 0.2s ease-out;
+      -moz-transition: all 0.2s ease-out false;
+      -o-transition: all 0.2s ease-out false;
+      transition: all 0.2s ease-out; }
+  .imglykit-container .imglykit-controls .imglykit-controls-done .imglykit-controls-done-highlighted {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 80px;
+    height: 80px;
+    line-height: 80px; }
+  .imglykit-container .imglykit-controls .imglykit-controls-done.highlighted > img {
+    display: none; }
+  .imglykit-container .imglykit-controls .imglykit-controls-done.highlighted .imglykit-controls-done-highlighted {
+    display: block; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-controls-overview ul.imglykit-controls-list {
+  display: block; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-controls-filters ul.imglykit-controls-list li {
+  line-height: normal; }
+  .imglykit-container .imglykit-controls-filters ul.imglykit-controls-list li img {
+    width: 40px;
+    height: 40px;
+    margin-top: 10px; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-controls-stickers ul.imglykit-controls-list li {
+  background-size: 42px;
+  background-repeat: no-repeat;
+  background-position: center center; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-canvas-stickers-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; }
+  .imglykit-container .imglykit-canvas-stickers-container .imglykit-canvas-stickers {
+    position: relative;
+    display: inline-block;
+    cursor: move; }
+    .imglykit-container .imglykit-canvas-stickers-container .imglykit-canvas-stickers .imglykit-knob {
+      bottom: 0;
+      right: 0; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-controls-text ul.imglykit-controls-list li {
+  color: white;
+  font-size: 32px;
+  line-height: 80px; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-canvas-text-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+  .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text {
+    position: relative;
+    display: inline-block; }
+    .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-crosshair {
+      position: absolute;
+      width: 34px;
+      height: 34px;
+      left: -34px; }
+    .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea {
+      position: relative;
+      display: inline-block; }
+      .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea textarea {
+        background: transparent;
+        border: 2px solid white;
+        resize: none;
+        padding: 0; }
+      .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea .imglykit-knob {
+        bottom: -2px;
+        right: -8px; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-slider {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  height: 80px;
+  line-height: 80px; }
+  .imglykit-container .imglykit-slider > * {
+    display: table-cell; }
+  .imglykit-container .imglykit-slider .imglykit-slider-content {
+    position: absolute;
+    top: 38px;
+    width: 100%; }
+  .imglykit-container .imglykit-slider .imglykit-slider-minus, .imglykit-container .imglykit-slider .imglykit-slider-plus {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
+    opacity: 0.2;
+    color: white;
+    font-size: 12px;
+    width: 40px;
+    text-align: center; }
+  .imglykit-container .imglykit-slider .imglykit-slider-slider {
+    width: auto;
+    position: relative;
+    z-index: 1; }
+    .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-background, .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-fill {
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      -ms-border-radius: 6px;
+      -o-border-radius: 6px;
+      border-radius: 6px;
+      background: #1A1A1A;
+      height: 12px;
+      top: 50%;
+      margin-top: -8px;
+      cursor: pointer; }
+    .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-fill {
+      position: absolute;
+      background: #43ADEB; }
+    .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-center-dot {
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      -ms-border-radius: 50%;
+      -o-border-radius: 50%;
+      border-radius: 50%;
+      width: 24px;
+      height: 24px;
+      background: #43ADEB;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      cursor: pointer;
+      margin: -14px 0 0 -12px; }
+    .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-dot {
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      -ms-border-radius: 50%;
+      -o-border-radius: 50%;
+      border-radius: 50%;
+      -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+      -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+      width: 30px;
+      height: 30px;
+      background: white;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: -17px 0 0 -15px;
+      cursor: pointer; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-color-picker {
+  position: relative;
+  border-left: 1px solid #363636;
+  height: 80px; }
+  .imglykit-container .imglykit-color-picker .imglykit-color-picker-color {
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+    border-radius: 3px;
+    background: black;
+    margin-top: 15px; }
+  .imglykit-container .imglykit-color-picker .imglykit-controls-item-label {
+    position: absolute;
+    line-height: 11px;
+    width: 100%;
+    bottom: 10px;
+    left: 0; }
+  .imglykit-container .imglykit-color-picker .imglykit-transparent-knob {
+    pointer-events: none; }
+  .imglykit-container .imglykit-color-picker canvas {
+    cursor: pointer; }
+
+.imglykit-container .imglykit-color-picker-overlay {
+  position: absolute;
+  cursor: default;
+  background: #353535;
+  width: 240px;
+  height: 240px;
+  padding: 20px;
+  bottom: 115px;
+  right: -80px;
+  position: absolute;
+  border-color: #353535;
+  display: none; }
+  .imglykit-container .imglykit-color-picker-overlay:before {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 0;
+    border-color: #353535;
+    top: 100%;
+    left: 50%;
+    margin-top: -1px;
+    margin-left: -15px;
+    border-left: 15px solid transparent;
+    border-right: 15px solid transparent;
+    border-top: 15px solid #353535;
+    border-top-color: inherit; }
+  .imglykit-container .imglykit-color-picker-overlay.imglykit-visible {
+    display: block; }
+  .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container {
+    width: 200px;
+    height: 30px;
+    position: relative;
+    margin-bottom: 10px; }
+    .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container canvas {
+      background: black;
+      position: absolute;
+      left: 0;
+      top: 0; }
+    .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container .imglykit-transparent-knob {
+      top: 50%; }
+  .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container {
+    width: 30px;
+    height: 160px;
+    position: relative;
+    float: left; }
+    .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container canvas {
+      background: black;
+      position: absolute;
+      top: 0;
+      left: 0; }
+    .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container .imglykit-transparent-knob {
+      left: 50%; }
+  .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-saturation-container {
+    width: 160px;
+    height: 160px;
+    position: relative;
+    float: left;
+    margin-right: 10px; }
+    .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-saturation-container canvas {
+      background: black;
+      position: absolute;
+      top: 0;
+      left: 0; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-canvas-crop-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: table;
+  table-layout: fixed; }
+  .imglykit-container .imglykit-canvas-crop-container.imglykit-canvas-crop-container-hidden {
+    display: none; }
+  .imglykit-container .imglykit-canvas-crop-container > * {
+    display: table-row; }
+    .imglykit-container .imglykit-canvas-crop-container > * > * {
+      display: table-cell;
+      background: rgba(34, 34, 34, 0.9); }
+  .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-center-center {
+    position: relative;
+    background: transparent;
+    cursor: move;
+    border: 1px solid white; }
+    .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-center-center.imglykit-canvas-crop-center-center-nomove {
+      cursor: auto; }
+  .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%; }
+    .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs > * {
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      -ms-border-radius: 50%;
+      -o-border-radius: 50%;
+      border-radius: 50%;
+      position: absolute;
+      background: white;
+      width: 20px;
+      height: 20px;
+      border: 2px solid rgba(0, 0, 0, 0.3);
+      cursor: pointer; }
+    .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=top-left] {
+      top: -10px;
+      left: -10px; }
+    .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=top-right] {
+      top: -10px;
+      right: -10px; }
+    .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=bottom-left] {
+      bottom: -10px;
+      left: -10px; }
+    .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=bottom-right] {
+      bottom: -10px;
+      right: -10px; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-canvas-radial-blur-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+  .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-dot {
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -o-border-radius: 50%;
+    border-radius: 50%;
+    position: absolute;
+    background: white;
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    margin-left: -10px;
+    margin-top: -10px; }
+  .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-circle-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden; }
+  .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-circle {
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -o-border-radius: 50%;
+    border-radius: 50%;
+    border: 2px solid white;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    pointer-events: none; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-canvas-tilt-shift-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+  .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-dot {
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -o-border-radius: 50%;
+    border-radius: 50%;
+    position: absolute;
+    background: white;
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    margin-left: -10px;
+    margin-top: -10px; }
+  .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-rect-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden; }
+  .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-rect {
+    border: 2px solid white;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    pointer-events: none; }
+
+/*
+ * Copyright (c) 2013-2015 9elements GmbH
+ *
+ * Released under Attribution-NonCommercial 3.0 Unported
+ * http://creativecommons.org/licenses/by-nc/3.0/
+ *
+ * For commercial use, please contact us at contact@9elements.com
+ */
+.imglykit-container .imglykit-scrollbar-background {
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out false;
+  -o-transition: all 0.3s ease-out false;
+  transition: all 0.3s ease-out;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  width: 100%;
+  height: 11px;
+  background: #1E1E1E;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  cursor: pointer; }
+  .imglykit-container .imglykit-scrollbar-background.visible {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+    opacity: 1; }
+
+.imglykit-container .imglykit-scrollbar-button {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  background: #43ADEB;
+  height: 7px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 50px;
+  margin: 2px;
+  cursor: pointer; }