/* Vendor */
/** A prefix appended to all background-image URLs. */
/** Colours common to the UI, */
/** A mixin for performing a rotate transform across multiple browsers. */
/** The modifier classes here are applied by the root node and indicate the the state of the root node managing interactions (e.g dragging and resizing). */
.ce--dragging, .ce--resizing { /** Prevent the user selecting any content in the page while we're dragging or resizing. */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.ce--dragging { cursor: move        !important; }

.ce--resizing { cursor: nwse-resize !important; }

/** All editiable elements are assigned the .ce-element class. Modifiers are used to identify the type of element (e.g image, text, list, etc.) and to indicate state (e.g resizing, focused, etc.) */
.ce-element { /* Types of element */ /** As image elements are represented as a `<div>` in the DOM we use the background to display the image. */ /** Like images, video elements are represented as a `<div>` in the DOM, unlike images there is source image to apply to the background, instead we display a video icon in the background and use the after element to display information about the video's source. */ /* The various states for elements */ /** When an element that supports text content is empty (e.g '') some browsers don't provide a height for the element and so it can appear to disappear until the user adds content. To resolve this issue we use a puesdo element to ensure the element contains content. */ /* Element is being dragged */ /** Element is being dropped on to. Depending on the position of the element being dragged over the element (the mouse cursor) the drop modifiers provide a guide to the placement of the dragging element after it's dropped. */ /* Table rows cannot be handled in the same way as other elements for drop styling and instead they must only use a background image. */ /** Element has focus `--focused` (only one element can have focus) or the mouse cursor is currently over the element. */ /** When the mouse cursor is over the corners of a resizable element (e.g an image or video) the following modifiers are applied to indicate to the user they can resize the element in a given direction. */ }

.ce-element--type-image, .ce-element--type-video { background-repeat: no-repeat; position: relative; cursor: pointer; z-index: 1; /** Image and video elements use puesdo elements to display information such as the size of the element and for videos the `src` also. */ /** The before element is used to display the size of the element, by default the size is hidden unless the user moves the mouse cursor over the element or the element is being resized. */ }

.ce-element--type-image:after, .ce-element--type-image:before, .ce-element--type-video:after, .ce-element--type-video:before { background: rgba(0, 0, 0, 0.5); border-radius: 2px; color: white; display: none; font-family: arial, sans-serif; font-size: 10px; line-height: 10px; padding: 4px 4px 3px; position: absolute; }

.ce-element--type-image:before, .ce-element--type-video:before { content: attr(data-ce-size); right: 10px; top: 10px; }

.ce-element--type-image.ce-element--over:before, .ce-element--type-image.ce-element--resizing:before, .ce-element--type-video.ce-element--over:before, .ce-element--type-video.ce-element--resizing:before { display: block; }

.ce-element--type-image { background-position: 0 0; background-size: cover; }

.ce-element--type-video { background: #333 url("images/video.svg") center/auto 48px no-repeat; }

.ce-element--type-video:after { bottom: 10px; content: attr(data-ce-title); display: block; left: 10px; }

.ce-element--empty:after { display: inline-block; content: '\00a0'; }

.ce-element--dragging { background-color: rgba(51, 51, 51, 0.1) !important; opacity: 0.5; /** HACK: Forces the the element being dragged not to obscure elements that can be dropped on (for example an image floated over a paragraph). */ z-index: -1; /** For images and videos we set the outline color instead of changing the inner style. */ }

.ce-element--dragging.ce-element--type-image, .ce-element--dragging.ce-element--type-video { background-color: #333 !important; opacity: 1.0; outline-color: rgba(51, 51, 51, 0.1) !important; }

.ce-element--drop { position: relative !important; }

.ce-element--drop:before { background: #f39c12 url("images/drop-vert-above.svg") center/auto 32px repeat; bottom: 0; content: '' !important; left: 0; opacity: 0.8; position: absolute; right: 0; top: 0; z-index: 9; }

.ce-element--drop-below:before { -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); }

.ce-element--drop-left:before { background-image: url("images/drop-horz.svg"); -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ transform: rotate(0deg); }

.ce-element--drop-right:before { background-image: url("images/drop-horz.svg"); -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); }

.ce-element--drop.ce-element--type-table-row { background: #f39c12 url("images/drop-vert-above.svg") center/auto 32px repeat; }

.ce-element--drop.ce-element--type-table-row:before { display: none; }

.ce-element--drop.ce-element--type-table-row.ce-element--drop-below { background: #f39c12 url("images/drop-vert-below.svg") center/auto 32px repeat; }

.ce-element--focused, .ce-element--over { background-color: rgba(243, 156, 18, 0.1); outline: none; /** For images and videos we add an outline so as not to distort their appearance. */ }

.ce-element--focused.ce-element--type-image, .ce-element--focused.ce-element--type-video, .ce-element--over.ce-element--type-image, .ce-element--over.ce-element--type-video { background-color: #333; outline: 4px solid rgba(243, 156, 18, 0.35); }

.ce-element--resize-top-left { cursor: nw-resize; }

.ce-element--resize-top-right { cursor: ne-resize; }

.ce-element--resize-bottom-right { cursor: se-resize; }

.ce-element--resize-bottom-left { cursor: sw-resize; }

/** When an element is dragged a helper element is created that follows the mouse cursor, the helper represents the element being dragged in a simplified form. */
.ce-drag-helper { background: #fff; border-radius: 2px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25); color: #4e4e4e; font: arial, sans-serif; font-size: 12px; height: 120px; left: 0; line-height: 135%; margin: 5px 0px 0px 5px; overflow: hidden; padding: 15px; position: absolute; top: 0; width: 120px; word-wrap: break-word; z-index: 9; /** A puesdo element is used to display the type of element the helper represents. */ /** For elements that have text content displayed within the helper we clip the content and use a puesdo element to fade out any verical overflow. */ /** Image helpers display a version of the image as a background image within the helper element. */ }

.ce-drag-helper:before { background: #2980b9; color: white; content: attr(data-ce-type); display: block; font-family: arial, sans-serif; font-size: 10px; line-height: 10px; padding: 4px 4px 3px; position: absolute; right: 0; top: 0; }

.ce-drag-helper--type-list:after, .ce-drag-helper--type-list-item-text:after, .ce-drag-helper--type-pre-text:after, .ce-drag-helper--type-table:after, .ce-drag-helper--type-table-row:after, .ce-drag-helper--type-text:after { background-image: linear-gradient(rgba(255, 255, 255, 0), white 66%); bottom: 0; content: ''; display: block; height: 40px; left: 0; position: absolute; width: 100%; }

.ce-drag-helper--type-image { background-repeat: no-repeat; background-size: cover; }

/** The alignment of elements such as images and videos horizontally is achieved through the `align-left` and `align-right` classes. We provide basic stylings for these classes so that this style sheet works out the box, it is however expected that these styles will be extended if not overridden by the site CSS. */
.ce-element--type-image, .ce-element--type-video { display: block; margin-left: auto; margin-right: auto; }

.ce-element--type-image.align-left, .ce-element--type-video.align-left { clear: initial; float: left; }

.ce-element--type-image.align-right, .ce-element--type-video.align-right { clear: initial; float: right; }

/** Show a placeholder for empty table cells. */
.ce-element--type-table-cell-text:empty:before { content: '...'; font-style: italic; opacity: 0.5; }

/** Special class applied to a temporary element which is inserted into a parent element to measure the width excluding padding. */
.ce-measure { display: block !important; }

/* Settings */
/** All widgets are assigned a z-index equal to or higher than this setting. The base z-index can be adjusted to overcome z-index conflicts with existing page elements. */
/** For UI widgets that appear on the page (as opposed to appearing in front of a modal screen) we define a base background colour. */
/** The colour used when casting shadows for widgets that appear to float. */
/** Confirm, Cancel and Edit actions are common amoung the various ui components. Each action has an associated/common colour. */
/** The background colour used to highlight editiable regions to users when they hold down the shift key. */
/** Tooltips feature for a number of components, their base appearance is configured using a mixin. */
/** The following settings relate to typography. For portability we limit the the use of fonts to: - `type-icon` used for displaying icons (courtesy of http://icomoon.io). - `type-text` used for displaying text. */
@font-face { font-family: 'icon'; src: url("icons.woff"); font-weight: normal; font-style: normal; }

/* UI */
/*
The widget CSS class should be applied any UI element that's insert into the DOM
and not within a widget, the widget CSS class resets the style for of all
supported child elements.
*/
.ct-widget, .ct-widget * { /* Reset */ /* Defaults */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.ct-widget div, .ct-widget span, .ct-widget iframe, .ct-widget a, .ct-widget b, .ct-widget i fieldset, .ct-widget form, .ct-widget label, .ct-widget legend, .ct-widget table, .ct-widget caption, .ct-widget tbody, .ct-widget tfoot, .ct-widget thead, .ct-widget tr, .ct-widget th, .ct-widget td, .ct-widget * div, .ct-widget * span, .ct-widget * iframe, .ct-widget * a, .ct-widget * b, .ct-widget * i fieldset, .ct-widget * form, .ct-widget * label, .ct-widget * legend, .ct-widget * table, .ct-widget * caption, .ct-widget * tbody, .ct-widget * tfoot, .ct-widget * thead, .ct-widget * tr, .ct-widget * th, .ct-widget * td { border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline; }

.ct-widget ol, .ct-widget ul, .ct-widget * ol, .ct-widget * ul { list-style: none; }

.ct-widget table, .ct-widget * table { border-collapse: collapse; border-spacing: 0; }

.ct-widget { opacity: 0; font-family: arial, sans-serif; font-size: 14px; line-height: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index: 999999; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; }

.ct-widget--active { opacity: 1; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; }

/** Attributes are similar to sections in that they are used to divide up configuration blocks within a dialog's view. However attributes exclusively support text inputs (no switches) and both the name and value of an attribute can be modified (unlike sections where the label is fixed). */
.ct-widget .ct-attribute { border-bottom: 1px solid #eee; height: 48px; vertical-align: top; /** Each section has a name and value component, both of which can be modified. */ }

.ct-widget .ct-attribute::after { clear: both; content: ""; display: table; }

.ct-widget .ct-attribute__name { background: #f6f6f6; border: none; color: #646464; float: left; height: 47px; outline: none; padding: 0 16px; font-family: arial, sans-serif; font-size: 14px; line-height: 48px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 25%; /** If the the attributes name is invalid then the `invalid` modifier is set against the input (programmatically). */ }

.ct-widget .ct-attribute__name--invalid { color: #f03f4b; }

.ct-widget .ct-attribute__value { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: white; border: none; color: #646464; float: right; height: 47px; outline: none; padding: 0 16px; font-family: arial, sans-serif; font-size: 14px; line-height: 48px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 75%; }

/** Cropmarks define the region within an image that will be cropped. They appear in the image dialog when crop is active. */
.ct-widget .ct-crop-marks { height: 320px; left: 73px; position: absolute; top: 0; width: 427px; /** The clipper is used to prevent the rulers extending outside of the image. */ /** The cropping region is defined by 2 L shaped framing rulers at opposite corners. */ /** The rulers defing the crop region can be moved by the user, handles provide a draggable handle for each ruler. */ }

.ct-widget .ct-crop-marks__clipper { height: 100%; overflow: hidden; position: relative; width: 100%; }

.ct-widget .ct-crop-marks__ruler--top-left { position: absolute; }

.ct-widget .ct-crop-marks__ruler--top-left:after { border: 1px solid rgba(255, 255, 255, 0.5); border-bottom: none; border-right: none; box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 1px rgba(0, 0, 0, 0.25); content: ''; height: 999px; left: 0; position: absolute; top: 0; width: 999px; }

.ct-widget .ct-crop-marks__ruler--bottom-right { position: absolute; }

.ct-widget .ct-crop-marks__ruler--bottom-right:after { border: 1px solid rgba(255, 255, 255, 0.5); border-top: none; border-left: none; bottom: 0; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), inset -1px -1px 1px rgba(0, 0, 0, 0.25); content: ''; height: 999px; position: absolute; right: 0; width: 999px; }

.ct-widget .ct-crop-marks__handle { background: #2980b9; border: 1px solid #409ad5; border-radius: 7px; cursor: pointer; height: 15px; margin-left: -7px; margin-top: -7px; position: absolute; width: 15px; }

.ct-widget .ct-crop-marks__handle--bottom-right { margin-left: -8px; margin-top: -8px; }

.ct-widget .ct-crop-marks__handle:hover { background: #2e8ece; }

/** The content tools library supports a number of dialogs for different types of functionality (e.g insert an image, change a tables dimensions, etc). The dialog component itself sits above the page content (typically over a modal. */
/** If the dialog is performing a remote task that requires the user to wait for a response from the server then it may be set to a busy state. The busy state uses an animation (a rotating cog) defined below. */
@-webkit-keyframes busy-dialog { 0% { transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: transform; }
  100% { transform: translate(-50%, -50%) rotate(359deg);
    -webkit-transform: transform; } }

@-moz-keyframes busy-dialog { 0% { transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: transform; }
  100% { transform: translate(-50%, -50%) rotate(359deg);
    -moz-transform: transform; } }

@keyframes busy-dialog { 0% { transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: transform;
    -moz-transform: transform;
    -ms-transform: transform;
    -o-transform: transform;
    transform: transform; }
  100% { transform: translate(-50%, -50%) rotate(359deg);
    -webkit-transform: transform;
    -moz-transform: transform;
    -ms-transform: transform;
    -o-transform: transform;
    transform: transform; } }

.ct-widget { /** The controls section of the dialog features icon and text buttons which provide the user with controls for the contents dialog. */ /** Controls can be grouped left, right or centrally. Both a left and right group can coexist but the central group can only be used on it's own. */ /** Controls can either contain text or an icon depending on the modifier set against the component (`text` or `icon` respectively). */ /** The following classes relate to the various types of dialog available. */ /** The image dialog supports the insertion of images, the dialog has a number of states to support the various steps in inserting an image. */ /** The properties dialog displays the attributes and styles for an element in page, each property can by modified and each style turned on or off. */ /** The table dialog supports the insertion and updating of tables. */ /** The video dialog supports the insertion of embedded videos (vimeo and youtube). */ /** Anchored dialogs are a special type of dialog that are appear at a fixed position with the page, for example above a selection of text. They are used to support simple task (such as inserting a link) in a less intrusive mannor than full dialogs. Anchored dialogs support an single text input and a confirm button only. */ }

.ct-widget.ct-dialog { background: white; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.35); border-radius: 2px; height: 480px; left: 50%; margin-left: -350px; margin-top: -240px; position: fixed; top: 50%; width: 700px; z-index: 1000099; /** The `busy` modifier maybe programatically applied to a dialog to prevent any further interaction with the dialog until a task has been completed. */ }

.ct-widget.ct-dialog--busy .ct-dialog__busy { display: block; }

.ct-widget.ct-dialog--busy .ct-dialog__body { opacity: 0.1; }

.ct-widget .ct-dialog { /** The `header`, `caption` and `close` components of the dialog make up what might traditionally be thought of as a title bar for a window. */ /** The dialog `body` is typically composed of a `view` and `controls` component. The `view` component contains the dialogs content (e.g an image) and the `controls` component the controls (e.g crop, rotate, insert). */ /** If the dialog is in a busy state then the `busy` component is displayed. */ }

.ct-widget .ct-dialog__header { color: #a4a4a4; border-bottom: 1px solid #eee; height: 48px; padding: 0 16px; position: relative; }

.ct-widget .ct-dialog__caption { font-family: arial, sans-serif; font-size: 18px; line-height: 48px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.ct-widget .ct-dialog__close { border-left: 1px solid #eee; cursor: pointer; height: 48px; line-height: 48px; position: absolute; right: 0; text-align: center; top: 0; font-family: 'icon'; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 48px; }

.ct-widget .ct-dialog__close:before { content: '\ea0f'; }

.ct-widget .ct-dialog__close:hover:before { color: #646464; }

.ct-widget .ct-dialog__body { margin: auto; width: 572px; }

.ct-widget .ct-dialog__view { height: 320px; margin-top: 32px; }

.ct-widget .ct-dialog__controls { margin-top: 16px; }

.ct-widget .ct-dialog__controls::after { clear: both; content: ""; display: table; }

.ct-widget .ct-dialog__busy { display: none; position: absolute; }

.ct-widget .ct-dialog__busy:before { -webkit-animation: busy-dialog 5s linear; -moz-animation: busy-dialog 5s linear; animation: busy-dialog 5s linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; color: #a4a4a4; content: "\e994"; left: 50%; position: fixed; top: 50%; font-family: 'icon'; font-size: 80px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.ct-widget .ct-control-group { font-size: 0; }

.ct-widget .ct-control-group--center { text-align: center; }

.ct-widget .ct-control-group--left { float: left; }

.ct-widget .ct-control-group--right { float: right; }

.ct-widget .ct-control { margin-left: 16px; position: relative; }

.ct-widget .ct-control:first-child { margin-left: 0; }

.ct-widget .ct-control--icon { border-radius: 2px; color: #a4a4a4; cursor: pointer; display: inline-block; height: 32px; line-height: 32px; text-align: center; font-family: 'icon'; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 32px; }

.ct-widget .ct-control--icon:after { background: black; border-radius: 2px; color: white; content: attr(data-tooltip); display: block; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; left: -26.5px; line-height: 20px; opacity: 0.0; padding: 0 8px; position: absolute; bottom: 37px; font-family: arial, sans-serif; font-size: 12px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; visibility: hidden; width: 85px; word-break: break-word; }

.ct-widget .ct-control--icon:hover:after { opacity: 0.8; visibility: visible; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; transition-delay: 2s; }

.ct-widget .ct-control--icon:before { content: ''; }

.ct-widget .ct-control--icon:hover { background: #eee; color: #646464; }

.ct-widget .ct-control--active, .ct-widget .ct-control--on { background: #a4a4a4; color: white; }

.ct-widget .ct-control--active:hover, .ct-widget .ct-control--on:hover { background: #646464; color: white; }

.ct-widget .ct-control--rotate-ccw:before { content: '\e965'; }

.ct-widget .ct-control--rotate-cw:before { content: '\e966'; }

.ct-widget .ct-control--crop:before { content: '\ea57'; }

.ct-widget .ct-control--remove:before { content: '\e9ac'; }

.ct-widget .ct-control--styles:before { content: '\e90b'; }

.ct-widget .ct-control--attributes:before { content: '\e994'; }

.ct-widget .ct-control--code:before { content: '\ea80'; }

.ct-widget .ct-control--icon.ct-control--muted { cursor: default; }

.ct-widget .ct-control--icon.ct-control--muted:before { opacity: 0.5; }

.ct-widget .ct-control--icon.ct-control--muted:hover { color: #a4a4a4; background: transparent; }

.ct-widget .ct-control--text { background: #2980b9; border-radius: 2px; color: white; cursor: pointer; display: inline-block; font-weight: bold; height: 32px; overflow: hidden; padding: 0 8px; text-align: center; text-overflow: ellipsis; font-family: arial, sans-serif; font-size: 14px; line-height: 32px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: top; width: 100px; }

.ct-widget .ct-control--text:hover { background: #2e8ece; }

.ct-widget .ct-control--apply, .ct-widget .ct-control--insert, .ct-widget .ct-control--ok { background: #27ae60; }

.ct-widget .ct-control--apply:hover, .ct-widget .ct-control--insert:hover, .ct-widget .ct-control--ok:hover { background: #2cc36b; }

.ct-widget .ct-control--cancel, .ct-widget .ct-control--clear { background: #e74c3c; }

.ct-widget .ct-control--cancel:hover, .ct-widget .ct-control--clear:hover { background: #ea6153; }

.ct-widget .ct-control--text.ct-control--muted { background: #ccc; cursor: default; }

.ct-widget .ct-control--text.ct-control--muted:hover { background: #ccc; }

.ct-widget .ct-control--upload { overflow: hidden; }

.ct-widget.ct-image-dialog--empty .ct-progress-bar, .ct-widget.ct-image-dialog--empty .ct-control--rotate-ccw, .ct-widget.ct-image-dialog--empty .ct-control--rotate-cw, .ct-widget.ct-image-dialog--empty .ct-control--crop, .ct-widget.ct-image-dialog--empty .ct-control--insert, .ct-widget.ct-image-dialog--empty .ct-control--cancel, .ct-widget.ct-image-dialog--empty .ct-control--clear { display: none; }

.ct-widget.ct-image-dialog--uploading .ct-control--rotate-ccw, .ct-widget.ct-image-dialog--uploading .ct-control--rotate-cw, .ct-widget.ct-image-dialog--uploading .ct-control--crop, .ct-widget.ct-image-dialog--uploading .ct-control--upload, .ct-widget.ct-image-dialog--uploading .ct-control--insert, .ct-widget.ct-image-dialog--uploading .ct-control--clear { display: none; }

.ct-widget.ct-image-dialog--populated .ct-progress-bar, .ct-widget.ct-image-dialog--populated .ct-control--upload, .ct-widget.ct-image-dialog--populated .ct-control--cancel { display: none; }

.ct-widget .ct-image-dialog { /** HACK: We style the file upload button as a control, however to ensure the user activates the system file browser dialog we hide the file input in the control and use a large font to ensure it covers the whole control. */ }

.ct-widget .ct-image-dialog__view { background: #eee; position: relative; }

.ct-widget .ct-image-dialog__view:empty { font-family: 'icon'; font-size: 80px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 320px; text-align: center; }

.ct-widget .ct-image-dialog__view:empty:before { color: white; content: '\e90d'; }

.ct-widget .ct-image-dialog__image { background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: contain; height: 100%; width: 100%; }

.ct-widget .ct-image-dialog__file-upload { cursor: pointer; font-size: 400px; left: 0; opacity: 0; position: absolute; top: 0; }

.ct-widget.ct-properties-dialog--attributes .ct-properties-dialog__attributes { display: block; }

.ct-widget.ct-properties-dialog--styles .ct-properties-dialog__styles { display: block; }

.ct-widget.ct-properties-dialog--styles .ct-properties-dialog__styles:empty:before { color: #a4a4a4; content: attr(data-ct-empty); display: block; font-style: italic; margin-top: 20px; text-align: center; }

.ct-widget.ct-properties-dialog--code .ct-properties-dialog__code { display: block; }

.ct-widget .ct-properties-dialog { /** The code tab supports an textarea for editing inner HTML. */ }

.ct-widget .ct-properties-dialog__view { border: 1px solid #ddd; overflow: auto; }

.ct-widget .ct-properties-dialog__attributes, .ct-widget .ct-properties-dialog__code, .ct-widget .ct-properties-dialog__styles { display: none; }

.ct-widget .ct-properties-dialog__inner-html { border: none; display: block; font-family: courier, "Bitstream Vera Sans Mono", Consolas, Courier, monospace; height: 318px; padding: 16px; outline: none; resize: none; width: 100%; }

.ct-widget .ct-properties-dialog__inner-html--invalid { color: #f03f4b; }

.ct-widget .ct-table-dialog__view { border: 1px solid #ddd; overflow: auto; }

.ct-widget .ct-video-dialog__preview:empty { background: #eee; font-family: 'icon'; font-size: 80px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 320px; text-align: center; }

.ct-widget .ct-video-dialog__preview:empty:before { color: white; content: '\ea98'; }

.ct-widget .ct-video-dialog__input { border: none; border-bottom: 1px solid #eee; height: 32px; line-height: 32px; outline: none; padding: 0 4px; font-family: arial, sans-serif; font-size: 14px; line-height: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: top; width: 456px; }

.ct-widget .ct-video-dialog__input:focus { border-bottom: 1px solid #e1e1e1; }

.ct-widget.ct-anchored-dialog { border-bottom: 2px solid #27ae60; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.35); font-size: 0; height: 34px; left: 0; margin-left: -144px; margin-top: -48px; position: absolute; top: 0; z-index: 1000099; }

.ct-widget.ct-anchored-dialog:after { border: 16px solid rgba(255, 255, 255, 0); border-top-color: #27ae60; content: ''; left: 128px; position: absolute; top: 34px; }

.ct-widget .ct-anchored-dialog__input { border: none; color: #646464; height: 32px; outline: none; font-family: arial, sans-serif; font-size: 14px; line-height: 32px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 0 8px 0 16px; vertical-align: top; width: 256px; }

.ct-widget .ct-anchored-dialog__button { background: #4db6ac; cursor: pointer; display: inline-block; height: 32px; line-height: 32px; text-align: center; font-family: 'icon'; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 32px; }

.ct-widget .ct-anchored-dialog__button:before { color: white; content: '\ea10'; }

.ct-widget .ct-anchored-dialog__button:hover { background: #5fbdb4; }

.ct-widget .ct-anchored-dialog__target-button { background: white; cursor: pointer; display: inline-block; height: 32px; line-height: 32px; text-align: center; font-family: 'icon'; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 32px; }

.ct-widget .ct-anchored-dialog__target-button:before { color: #a4a4a4; content: '\ea7d'; }

.ct-widget .ct-anchored-dialog__target-button:hover:before { color: #b1b1b1; }

.ct-widget .ct-anchored-dialog__target-button--active:before { color: #4db6ac; }

.ct-widget .ct-anchored-dialog__target-button--active:hover:before { color: #5fbdb4; }

/** Flashes are used to display a visual confirmation to the user that an action has completed successfully (or failed). */
.ct-widget { /** The flash animation displays an icon in the center of the user's screen that flashes into view and then out. */ /** The flash timer animation is used purely to indicated to the Javascript that created the flash element that the animation has finished. */ /** The icon that is flashed. */ }

@-webkit-keyframes flash { 0% { opacity: 0;
    font-size: 32px;
    -webkit-transform: font-size; }
  25% { font-size: 320px;
    opacity: 1;
    -webkit-transform: all; }
  50% { font-size: 320px;
    opacity: 1;
    -webkit-transform: all; }
  75% { font-size: 320px;
    opacity: 1;
    -webkit-transform: all; }
  100% { opacity: 0;
    -webkit-transform: all; } }

@-moz-keyframes flash { 0% { opacity: 0;
    font-size: 32px;
    -moz-transform: font-size; }
  25% { font-size: 320px;
    opacity: 1;
    -moz-transform: all; }
  50% { font-size: 320px;
    opacity: 1;
    -moz-transform: all; }
  75% { font-size: 320px;
    opacity: 1;
    -moz-transform: all; }
  100% { opacity: 0;
    -moz-transform: all; } }

@keyframes flash { 0% { opacity: 0;
    font-size: 32px;
    -webkit-transform: font-size;
    -moz-transform: font-size;
    -ms-transform: font-size;
    -o-transform: font-size;
    transform: font-size; }
  25% { font-size: 320px;
    opacity: 1;
    -webkit-transform: all;
    -moz-transform: all;
    -ms-transform: all;
    -o-transform: all;
    transform: all; }
  50% { font-size: 320px;
    opacity: 1;
    -webkit-transform: all;
    -moz-transform: all;
    -ms-transform: all;
    -o-transform: all;
    transform: all; }
  75% { font-size: 320px;
    opacity: 1;
    -webkit-transform: all;
    -moz-transform: all;
    -ms-transform: all;
    -o-transform: all;
    transform: all; }
  100% { opacity: 0;
    -webkit-transform: all;
    -moz-transform: all;
    -ms-transform: all;
    -o-transform: all;
    transform: all; } }

@-webkit-keyframes flash-timer { 0% { opacity: 1;
    -webkit-transform: opacity; }
  99% { opacity: 1;
    -webkit-transform: opacity; }
  100% { opacity: 0;
    -webkit-transform: opacity; } }

@-moz-keyframes flash-timer { 0% { opacity: 1;
    -moz-transform: opacity; }
  99% { opacity: 1;
    -moz-transform: opacity; }
  100% { opacity: 0;
    -moz-transform: opacity; } }

@keyframes flash-timer { 0% { opacity: 1;
    -webkit-transform: opacity;
    -moz-transform: opacity;
    -ms-transform: opacity;
    -o-transform: opacity;
    transform: opacity; }
  99% { opacity: 1;
    -webkit-transform: opacity;
    -moz-transform: opacity;
    -ms-transform: opacity;
    -o-transform: opacity;
    transform: opacity; }
  100% { opacity: 0;
    -webkit-transform: opacity;
    -moz-transform: opacity;
    -ms-transform: opacity;
    -o-transform: opacity;
    transform: opacity; } }

.ct-widget.ct-flash { color: rgba(255, 255, 255, 0.9); height: 0; left: 0; position: fixed; font-family: 'icon'; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0; width: 0; z-index: 1000999; /** Modifiers that can be applied to the flash to change it's appearance. */ }

.ct-widget.ct-flash:before { left: 50%; opacity: 0; position: fixed; text-shadow: 0 0 20px rgba(0, 0, 0, 0.5); top: 50%; transform: translate(-50%, -50%); }

.ct-widget.ct-flash--active { -webkit-animation: flash-timer 2s ease-in; -moz-animation: flash-timer 2s ease-in; animation: flash-timer 2s ease-in; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; }

.ct-widget.ct-flash--active:before { -webkit-animation: flash 2s ease-in; -moz-animation: flash 2s ease-in; animation: flash 2s ease-in; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; font-size: 320px; opacity: 1; }

.ct-widget.ct-flash--ok:before { content: '\ea10'; }

.ct-widget.ct-flash--no:before { content: '\ea0f'; }

/** Grip's provide a visual hint to the user that they can use the mouse to drag an item (for example the toolbar has a grip that can be used to drag it to a new location. */
/** The ignition switch is how users start and stop editing the page. */
/** If the app is performing a remote task that requires the user to wait for a response from the server then the ignition may be set to a busy state. The busy state uses an animation (a rotating cog) defined below. */
@-webkit-keyframes busy-ignition { 0% { transform: rotate(0deg);
    -webkit-transform: transform; }
  100% { transform: rotate(359deg);
    -webkit-transform: transform; } }

@-moz-keyframes busy-ignition { 0% { transform: rotate(0deg);
    -moz-transform: transform; }
  100% { transform: rotate(359deg);
    -moz-transform: transform; } }

@keyframes busy-ignition { 0% { transform: rotate(0deg);
    -webkit-transform: transform;
    -moz-transform: transform;
    -ms-transform: transform;
    -o-transform: transform;
    transform: transform; }
  100% { transform: rotate(359deg);
    -webkit-transform: transform;
    -moz-transform: transform;
    -ms-transform: transform;
    -o-transform: transform;
    transform: transform; } }

.ct-widget.ct-ignition { /** Position of the switch on the page */ left: 16px; position: fixed; bottom: 54px; /** Depending on the current state of the switch we show either the edit button (page ready to edit), or the confirm and cancel buttons ( page currently being edited). */ }

.ct-widget.ct-ignition .ct-ignition__button { display: none; }

.ct-widget.ct-ignition--editing .ct-ignition__button--confirm, .ct-widget.ct-ignition--editing .ct-ignition__button--cancel { display: block; }

.ct-widget.ct-ignition--ready .ct-ignition__button--edit { display: block; }

.ct-widget.ct-ignition--busy .ct-ignition__button { display: none; }

.ct-widget.ct-ignition--busy .ct-ignition__button--busy { display: block; }

.ct-widget .ct-ignition { /** The ignition switch is constructed of 3 buttons, edit, confirm and cancel. */ }

.ct-widget .ct-ignition__button { border-radius: 21px; content: ''; cursor: pointer; display: block; height: 42px; line-height: 38px; opacity: 0.9; position: absolute; text-align: center; font-family: 'icon'; font-size: 24px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 42px; /* Busy button */ /* Confirm button */ /* Cancel button */ /* Edit button */ }

.ct-widget .ct-ignition__button:before { color: white; font-size: 18px; }

.ct-widget .ct-ignition__button--busy { -webkit-animation: busy-ignition 5s linear; -moz-animation: busy-ignition 5s linear; animation: busy-ignition 5s linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; background: #646464; cursor: default; }

.ct-widget .ct-ignition__button--busy:before { content: '\e994'; }

.ct-widget .ct-ignition__button--busy:hover { background: #646464; }

.ct-widget .ct-ignition__button--confirm { background: #4db6ac; }

.ct-widget .ct-ignition__button--confirm:before { content: '\ea10'; }

.ct-widget .ct-ignition__button--confirm:hover { background: #5fbdb4; }

.ct-widget .ct-ignition__button--cancel { background: #f03f4b; left: 50px; }

.ct-widget .ct-ignition__button--cancel:before { content: '\ea0f'; }

.ct-widget .ct-ignition__button--cancel:hover { background: #f25761; }

.ct-widget .ct-ignition__button--edit { background: #4db6ac; /** Unlike the confirm and cancel buttons we rotate the edit button's pencil icon on mouse over to add a sense of purpose :) */ }

.ct-widget .ct-ignition__button--edit:before { content: '\e905'; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; }

.ct-widget .ct-ignition__button--edit:hover { background: #5fbdb4; }

.ct-widget .ct-ignition__button--edit:hover:before { display: inline-block; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); }

/** The inspector provides a breadcrumb style path (constructured from tags) for the currently selected element and its parent/ancestor tags. Tags can be selected which triggers the properties dialog. This allows elements which typically can't be directly selected using the editor to be modified. */
.ct-widget { /** The inspector bar is consists of a list of one or more tags, each tag represents an element in the lineage between the currently selected element and the top level element it is defined within, e.g for a table division the path might look like this: table > tbody > tr > td */ }

.ct-widget.ct-inspector { background: rgba(236, 239, 241, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1); bottom: 0; height: 32px; left: 0; overflow: hidden; padding: 3px 16px 0; position: fixed; width: 100%; display: none; }

.ct-widget .ct-inspector__tags::after { clear: both; content: ""; display: table; }

.ct-widget .ct-inspector__tags:before { color: #464646; content: '\ea80'; display: block; float: left; height: 24px; line-height: 24px; margin-right: 16px; text-align: center; font-family: 'icon'; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 24px; }

.ct-widget .ct-tag { background-color: #2980b9; border-radius: 2px 0 0 2px; color: white; cursor: pointer; float: left; font-weight: bold; height: 24px; line-height: 24px; margin-left: 24px; padding: 0 8px; position: relative; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }

.ct-widget .ct-tag:after { border-style: solid; border-bottom: 12px solid rgba(255, 0, 0, 0); border-left: 12px solid #2980b9; border-right: none; border-top: 12px solid rgba(255, 0, 0, 0); content: ''; display: block; height: 24px; bottom: 0; right: -24px; position: absolute; width: 24px; -moz-transform: scale(0.9999); }

.ct-widget .ct-tag:first-child { margin-left: 0; }

.ct-widget .ct-tag:hover { background-color: #4aa3df; }

.ct-widget .ct-tag:hover:after { border-left-color: #4aa3df; }

.ct-widget .ct-tag:nth-child(1) { background-color: #8e44ad; }

.ct-widget .ct-tag:nth-child(1):after { border-left-color: #8e44ad; }

.ct-widget .ct-tag:nth-child(1):hover { background-color: #9b50ba; }

.ct-widget .ct-tag:nth-child(1):hover:after { border-left-color: #9b50ba; }

.ct-widget .ct-tag:nth-child(2) { background-color: #2980b9; }

.ct-widget .ct-tag:nth-child(2):after { border-left-color: #2980b9; }

.ct-widget .ct-tag:nth-child(2):hover { background-color: #2e8ece; }

.ct-widget .ct-tag:nth-child(2):hover:after { border-left-color: #2e8ece; }

.ct-widget .ct-tag:nth-child(3) { background-color: #27ae60; }

.ct-widget .ct-tag:nth-child(3):after { border-left-color: #27ae60; }

.ct-widget .ct-tag:nth-child(3):hover { background-color: #2cc36b; }

.ct-widget .ct-tag:nth-child(3):hover:after { border-left-color: #2cc36b; }

.ct-widget .ct-tag:nth-child(4) { background-color: #d35400; }

.ct-widget .ct-tag:nth-child(4):after { border-left-color: #d35400; }

.ct-widget .ct-tag:nth-child(4):hover { background-color: #ed5e00; }

.ct-widget .ct-tag:nth-child(4):hover:after { border-left-color: #ed5e00; }

.ct-widget .ct-tag:nth-child(5) { background-color: #f39c12; }

.ct-widget .ct-tag:nth-child(5):after { border-left-color: #f39c12; }

.ct-widget .ct-tag:nth-child(5):hover { background-color: #f4a62a; }

.ct-widget .ct-tag:nth-child(5):hover:after { border-left-color: #f4a62a; }

.ct-widget .ct-tag:nth-child(6) { background-color: #16a085; }

.ct-widget .ct-tag:nth-child(6):after { border-left-color: #16a085; }

.ct-widget .ct-tag:nth-child(6):hover { background-color: #19b698; }

.ct-widget .ct-tag:nth-child(6):hover:after { border-left-color: #19b698; }

/** The modal widget provides a layer over the page limiting interaction to just the components positioned above the layer. This is commonly used when displaying a dialog, for example if we're editing a table's properties then the modal ensures the user can't change the element selected on the page while the dialog is open. */
.ct-widget.ct-modal { background: rgba(0, 0, 0, 0.7); height: 0; left: 0; position: fixed; top: 0; width: 0; z-index: 1000009; }

.ct-widget.ct-modal--transparent { background: transparent; }

.ct-widget--active.ct-modal { height: 100%; width: 100%; }

/** The progress bar appears in dialogs (such as the image dialog) and provides feedback to the user on a task (such as uploading an image). */
.ct-widget .ct-progress-bar { border: 1px solid #eee; height: 32px; line-height: 32px; padding: 1px; width: 456px; /** Note: The width of the progress bar should be set (as a percentage) programatially, e.g `progressBarDOM.style.width = '50%'`. */ }

.ct-widget .ct-progress-bar__progress { background: #2980b9; height: 28px; }

/** Sections are used to divide up configuration blocks within a dialog's view. They contain wither a switch or an input, for example the table dialog has header (switch), body (input - e.g number of columns) and footer (switch) sections. */
.ct-widget .ct-section { border-bottom: 1px solid #eee; color: #bdbdbd; cursor: pointer; font-style: italic; height: 48px; padding: 0 16px; font-family: arial, sans-serif; font-size: 16px; line-height: 48px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /** If the section is a switch then the `applied` modifier is set when the switch is on. */ /** If the section contains an input field the `contains-input` modifier is set. */ /** Each section has a label describing the purpose of the switch or input within the section. */ }

.ct-widget .ct-section::after { clear: both; content: ""; display: table; }

.ct-widget .ct-section:hover { background: #f6f6f6; }

.ct-widget .ct-section--applied { color: #646464; font-style: normal; }

.ct-widget .ct-section--applied .ct-section__switch { background-color: #27ae60; border: 1px solid #1e8449; }

.ct-widget .ct-section--applied .ct-section__switch:before { left: 25px; -webkit-transition-property: left; -moz-transition-property: left; transition-property: left; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; }

.ct-widget .ct-section--contains-input .ct-section__label { width: 75%; }

.ct-widget .ct-section__label { float: left; overflow: hidden; text-overflow: ellipsis; width: 472px; white-space: nowrap; }

.ct-widget .ct-section__switch { background-color: #ccc; border: 1px solid #b3b3b3; border-radius: 12px; box-shadow: inset 0px 0 2px rgba(0, 0, 0, 0.1); float: right; height: 24px; margin-top: 12px; position: relative; width: 48px; }

.ct-widget .ct-section__switch:before { background: white; border-radius: 10px; content: ''; height: 20px; left: 1px; position: absolute; top: 1px; -webkit-transition-property: left; -moz-transition-property: left; transition-property: left; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; width: 20px; }

.ct-widget .ct-section__input { background: white; border: none; color: #646464; float: right; height: 47px; outline: none; padding: 0 16px; text-align: right; font-family: arial, sans-serif; font-size: 14px; line-height: 48px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 25%; /** If the contents of the sections input is invalid then the `invalid` modifier is set against the input (programmatically). */ }

.ct-widget .ct-section__input--invalid { color: #f03f4b; }

/** The toolbox widget displays a set of tools the user can use to edit the content of the page. */
.ct-widget { /** Define the spacing for the toolbox: spacing / 1 = the padding around the contents of the toolbox. spacing / 1 = the vertical padding around the toolbox's grip. spacing / 2 = the margin between each tool. spacing / 2 = the vertical padding around each tool group. */ /** The size of a tool. */ /** The grip is positioned at the top of the toolbox. If the user clicks and holds the mouse down whilst over the grip then the toolbox will be draggable until they release the mouse button. */ /** Tools are organized into groups of related tools. */ /** The toolbox features a set of tools for editing the page content. */ }

.ct-widget.ct-toolbox { /** The position of the toolbox is typically determined by the position the user last placed it (this information is stored in local storage). However we set a default position for the first time the toolbox is displayed. */ background: #eceff1; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.35); left: 128px; padding: 8px; position: fixed; z-index: 99999; bottom: 0; left: 0; right: 0; top: auto !important; /** When the toolbox is being dragged to a new position by the user the dragging modifier is applied. Whilst being dragged we reduce the opacity of the toolbox to make it easier for the user to see the content being dragged over. */ }

.ct-widget.ct-toolbox--dragging { opacity: 0.5; display: none; }

.ct-widget .ct-toolbox__grip { display: none; }

.ct-widget .ct-tool-group { /** Tools are floated to align horizontally so each group must clear its children. */ display: inline-block; float: right; }

.ct-widget .ct-tool-group::after { clear: both; content: ""; display: table; }

.ct-widget .ct-tool-group:first-child { padding-top: 0; }

.ct-widget .ct-tool { border-radius: 2px; color: #464646; cursor: pointer; float: left; height: 32px; margin: 4px; margin-right: 4px; margin-top: 7px; margin-bottom: 7px; position: relative; text-align: center; font-family: 'icon'; font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 32px; /** Tools are displayed in rows of 3 so re remove margin from the last (3rd) tool in every row. */ /** The following modifiers reflect the state of the tool. */ /** The tools is currently disabled and cannot be selected (the hover style is also disabled). */ /** The button has been clicked on and the mouse button is still in the down state. */ /** The tool is currently applied to the selected element, and if there is one text selection. */ /** Each of the modifiers below sets the content of the puesdo before element to match the required icon. The list is ordered by the position each tool in the default toolbox (as opposed to alphabetically). */ }

.ct-widget .ct-tool:after { background: black; border-radius: 2px; color: white; content: attr(data-tooltip); display: block; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; left: -26.5px; line-height: 20px; opacity: 0.0; padding: 0 8px; position: absolute; bottom: 37px; font-family: arial, sans-serif; font-size: 12px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; visibility: hidden; width: 85px; word-break: break-word; }

.ct-widget .ct-tool:hover:after { opacity: 0.8; visibility: visible; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; transition-delay: 2s; }

.ct-widget .ct-tool:before { line-height: 32px; }

.ct-widget .ct-tool:nth-child(3n) { margin-right: 0; }

.ct-widget .ct-tool:hover { background: rgba(255, 255, 255, 0.5); }

.ct-widget .ct-tool--disabled { color: rgba(70, 70, 70, 0.33); }

.ct-widget .ct-tool--disabled:hover { background: transparent; }

.ct-widget .ct-tool--down { background: rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); line-height: 34px; }

.ct-widget .ct-tool--down:hover { background: rgba(0, 0, 0, 0.025); }

.ct-widget .ct-tool--applied { background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); }

.ct-widget .ct-tool--applied:hover { background: rgba(0, 0, 0, 0.15); }

.ct-widget .ct-tool--bold:before { content: "\ea62"; }

.ct-widget .ct-tool--heading:before { content: "H"; font-weight: bold; }

.ct-widget .ct-tool--subheading:before { content: "H"; }

.ct-widget .ct-tool--paragraph:before { content: "P"; }

.ct-widget .ct-tool--preformatted:before { content: "\ea80"; }

.ct-widget .ct-tool--italic:before { content: "\ea64"; }

.ct-widget .ct-tool--link:before { content: "\e9cb"; }

.ct-widget .ct-tool--align-left:before { content: "\ea77"; }

.ct-widget .ct-tool--align-center:before { content: "\ea78"; }

.ct-widget .ct-tool--align-right:before { content: "\ea79"; }

.ct-widget .ct-tool--unordered-list:before { content: "\e9ba"; }

.ct-widget .ct-tool--ordered-list:before { content: "\e9b9"; }

.ct-widget .ct-tool--table:before { content: "\ea71"; }

.ct-widget .ct-tool--indent:before { content: "\ea7b"; }

.ct-widget .ct-tool--unindent:before { content: "\ea7c"; }

.ct-widget .ct-tool--line-break:before { content: "\ea6e"; }

.ct-widget .ct-tool--image:before { content: "\e90d"; }

.ct-widget .ct-tool--video:before { content: "\ea98"; }

.ct-widget .ct-tool--undo:before { content: "\e965"; }

.ct-widget .ct-tool--redo:before { content: "\e966"; }

.ct-widget .ct-tool--remove:before { content: "\e9ac"; }

.ct-widget .ct-tool--heading { display: none; }

.ct-widget .ct-tool--subheading { display: none; }

.ct-widget .ct-tool--paragraph { display: none; }

.ct-widget .ct-tool--preformatted { display: none; }

.ct-widget .ct-tool--align-left { display: none; }

.ct-widget .ct-tool--align-center { display: none; }

.ct-widget .ct-tool--align-right { display: none; }

.ct-widget .ct-tool--unordered-list { display: none; }

.ct-widget .ct-tool--ordered-list { display: none; }

.ct-widget .ct-tool--table { display: none; }

.ct-widget .ct-tool--indent { display: none; }

.ct-widget .ct-tool--unindent { display: none; }

.ct-widget .ct-tool--line-break { display: none; }

.ct-widget .ct-tool--image { display: none; }

.ct-widget .ct-tool--video { display: none; }

/** The highlight class below is used to highlight editable regions within the page to users to help them see what they can edit. It's slightly unusual in that it's specified as a modifier of `ct`. */
@-webkit-keyframes highlight { 0% { outline-color: rgba(255, 255, 255, 0);
    -webkit-transform: background-color; }
  25% { outline-color: rgba(243, 156, 18, 0.25);
    -webkit-transform: background-color; }
  50% { outline-color: rgba(243, 156, 18, 0.25);
    -webkit-transform: background-color; }
  100% { outline-color: rgba(255, 255, 255, 0);
    -webkit-transform: background-color; } }

@-moz-keyframes highlight { 0% { outline-color: rgba(255, 255, 255, 0);
    -moz-transform: background-color; }
  25% { outline-color: rgba(243, 156, 18, 0.25);
    -moz-transform: background-color; }
  50% { outline-color: rgba(243, 156, 18, 0.25);
    -moz-transform: background-color; }
  100% { outline-color: rgba(255, 255, 255, 0);
    -moz-transform: background-color; } }

@keyframes highlight { 0% { outline-color: rgba(255, 255, 255, 0);
    -webkit-transform: background-color;
    -moz-transform: background-color;
    -ms-transform: background-color;
    -o-transform: background-color;
    transform: background-color; }
  25% { outline-color: rgba(243, 156, 18, 0.25);
    -webkit-transform: background-color;
    -moz-transform: background-color;
    -ms-transform: background-color;
    -o-transform: background-color;
    transform: background-color; }
  50% { outline-color: rgba(243, 156, 18, 0.25);
    -webkit-transform: background-color;
    -moz-transform: background-color;
    -ms-transform: background-color;
    -o-transform: background-color;
    transform: background-color; }
  100% { outline-color: rgba(255, 255, 255, 0);
    -webkit-transform: background-color;
    -moz-transform: background-color;
    -ms-transform: background-color;
    -o-transform: background-color;
    transform: background-color; } }

.ct-app { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.ct-app *, .ct-app *:before, .ct-app *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.ct--highlight { outline: 4px solid rgba(243, 156, 18, 0.25); -webkit-animation: highlight 0.5s ease-in; -moz-animation: highlight 0.5s ease-in; animation: highlight 0.5s ease-in; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; }

/** When applied to the `body` this class prevents the page from scrolling. This can be a useful trait when overlaying content such as a dialog where scrolling is either undesirable or relevant only to the overlayed content. */
.ct--no-scroll { overflow: hidden; }

/** Sometimes it necessary to take focus from an element such as when asking a user to provide a URL for a link. To provide an indication of the element's selection before focus was list this class can be applied to a `span` surrounding the element's selection. Once focus is returned to the element the class should be removed. */
.ct--puesdo-select { background: rgba(0, 0, 0, 0.1); }

/*# sourceMappingURL=content-tools.css.map */