lafeber_ckeditor 3.7.3

data/app/assets/javascripts/ckeditor/skins/moono/skin.js

@@ -0,0 +1,314 @@
+/**
+ * @license Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.html or http://ckeditor.com/license
+ */
+
+/*
+skin.js
+=========
+
+In this file we interact with the CKEditor JavaScript API to register the skin
+and enable additional skin related features.
+
+The level of complexity of this file depends on the features available in the
+skin. There is only one mandatory line of code to be included here, which is
+setting CKEDITOR.skin.name. All the rest is optional, but recommended to be
+implemented as they make higher quality skins.
+
+For this skin, the following tasks are achieved in this file:
+
+	1. Register the skin.
+	2. Register browser specific skin files.
+	3. Define the "Chameleon" feature.
+	4. Register the skin icons, to have them used on the development version of
+	  the skin.
+*/
+
+// 1. Register the skin
+// ----------------------
+// The CKEDITOR.skin.name property must be set to the skin name. This is a
+// lower-cased name, which must match the skin folder name as well as the value
+// used on config.skin to tell the editor to use the skin.
+//
+// This is the only mandatory property to be defined in this file.
+CKEDITOR.skin.name = 'moono';
+
+// 2. Register browser specific skin files
+// -----------------------------------------
+// (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Browser_Hacks)
+//
+// To help implementing browser specific "hacks" to the skin files and have it
+// easy to maintain, it is possible to have dedicated files for such browsers,
+// for both the main skin CSS files: editor.css and dialog.css.
+//
+// The browser files must be named after the main file names, appended by an
+// underscore and the browser name (e.g. editor_ie.css, dialog_ie8.css).
+//
+// The accepted browser names must match the CKEDITOR.env properties. The most
+// common names are: ie, opera, webkit and gecko. Check the documentation for
+// the complete list:
+// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.env.html
+//
+// Internet explorer is an expection and the browser version is also accepted
+// (ie7, ie8, ie9, ie10), as well as a special name for IE in Quirks mode (iequirks).
+//
+// The available browser specific files must be set separately for editor.css
+// and dialog.css.
+CKEDITOR.skin.ua_editor = 'ie,ie7,ie8,gecko';
+CKEDITOR.skin.ua_dialog = 'ie,ie7,ie8,opera';
+
+// 3. Define the "Chameleon" feature
+// -----------------------------------
+// (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Chameleon)
+//
+// "Chameleon" is a unique feature available in CKEditor. It makes it possible
+// to end users to specify which color to use as the basis for the editor UI.
+// It is enough to set config.uiColor to any color value and voila, the UI is
+// colored.
+//
+// The only detail here is that the skin itself must be compatible with the
+// Chameleon feature. That's because the skin CSS files are the responsible to
+// apply colors in the UI and each skin do that in different way and on
+// different places.
+//
+// Implementing the Chameleon feature requires a bit of JavaScript programming.
+// The CKEDITOR.skin.chameleon function must be defined. It must return the CSS
+// "template" to be used to change the color of a specific CKEditor instance
+// available in the page. When a color change is required, this template is
+// appended to the page holding the editor, overriding styles defined in the
+// skin files.
+//
+// The "$color" placeholder can be used in the returned string. It'll be
+// replaced with the desired color.
+CKEDITOR.skin.chameleon = (function() {
+	// This method can be used to adjust colour brightness of various element.
+	// Colours are accepted in 7-byte hex format, for example: #00ff00.
+	// Brightness ratio must be a float number within [-1, 1],
+	// where -1 is black, 1 is white and 0 is the original colour.
+	var colorBrightness = (function() {
+		function channelBrightness( channel, ratio ) {
+			return ( '0' + ( ratio < 0 ?
+					0 | channel * ( 1 + ratio )
+				:
+					0 | channel + ( 255 - channel ) * ratio ).toString( 16 )
+				).slice( -2 );
+		}
+
+		return function( hexColor, ratio ) {
+			var channels = hexColor.match( /[^#]./g );
+
+			for ( var i = 0 ; i < 3 ; i++ )
+				channels[ i ] = channelBrightness( parseInt( channels[ i ], 16 ), ratio );
+
+			return '#' + channels.join( '' );
+		};
+	})(),
+
+	// Use this function just to avoid having to repeat all these rules on
+	// several places of our template.
+	verticalGradient = (function() {
+		var template = new CKEDITOR.template( 'background:#{to};'+
+			'background-image:-webkit-gradient(linear,lefttop,leftbottom,from({from}),to({to}));'+
+			'background-image:-moz-linear-gradient(top,{from},{to});'+
+			'background-image:-webkit-linear-gradient(top,{from},{to});'+
+			'background-image:-o-linear-gradient(top,{from},{to});'+
+			'background-image:-ms-linear-gradient(top,{from},{to});'+
+			'background-image:linear-gradient(top,{from},{to});'+
+			'filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=\'{from}\',endColorstr=\'{to}\');' );
+
+		return function( from, to ) {
+			return template.output( { from: from, to: to } );
+		};
+	})(),
+
+	// Style templates for various user interface parts:
+	// 	* Default editor template.
+	// 	* Default panel template.
+	templates = {
+		editor: new CKEDITOR.template(
+			'{id}.cke_chrome [border-color:{defaultBorder};] ' +
+			'{id} .cke_top [ ' +
+					'{defaultGradient}' +
+					'border-bottom-color:{defaultBorder};' +
+				'] ' +
+			'{id} .cke_bottom [' +
+					'{defaultGradient}' +
+					'border-top-color:{defaultBorder};' +
+				'] ' +
+			'{id} .cke_resizer [border-right-color:{ckeResizer}] ' +
+
+			// Dialogs.
+			'{id} .cke_dialog_title [' +
+					'{defaultGradient}' +
+					'border-bottom-color:{defaultBorder};' +
+				'] ' +
+			'{id} .cke_dialog_footer [' +
+					'{defaultGradient}' +
+					'border-top-color:{defaultBorder};' +
+				'] ' +
+			'{id} .cke_dialog_tab [' +
+					'{lightGradient}' +
+					'border-color:{defaultBorder};' +
+				'] ' +
+			'{id} .cke_dialog_contents [' +
+					'border-top-color:{defaultBorder};' +
+				'] ' +
+			'{id} .cke_dialog_tab_selected [' +
+					'background:{dialogTabSelected};' +
+					'border-bottom-color:{dialogTabSelected};' +
+				'] ' +
+			'{id} .cke_dialog_body [' +
+					'background:{dialogBody};' +
+					'border-color:{defaultBorder};' +
+				'] ' +
+
+			// Toolbars, buttons.
+			'{id} .cke_toolgroup [' +
+					'{lightGradient}' +
+					'border-color:{defaultBorder};' +
+				'] ' +
+			'{id} a.cke_button_off:hover, {id} a.cke_button_off:focus, {id} a.cke_button_off:active [' +
+					'{mediumGradient}' +
+				'] ' +
+			'{id} .cke_button_on [' +
+					'{ckeButtonOn}' +
+				'] ' +
+			'{id} .cke_toolbar_separator [' +
+					'background-color: {ckeToolbarSeparator};' +
+				'] ' +
+
+			// Combo buttons.
+			'{id} .cke_combo_button [' +
+					'border-color:{defaultBorder};' +
+					'{lightGradient}' +
+				'] ' +
+			'{id} a.cke_combo_button:hover, {id} a.cke_combo_button:focus, {id} .cke_combo_on a.cke_combo_button [' +
+					'border-color:{defaultBorder};' +
+					'{mediumGradient}' +
+				'] ' +
+
+			// Elementspath.
+			'{id} .cke_path_item [' +
+					'color:{elementsPathColor};' +
+				'] ' +
+			'{id} a.cke_path_item:hover, {id} a.cke_path_item:focus, {id} a.cke_path_item:active [' +
+					'background-color:{elementsPathBg};' +
+				'] ' +
+
+			'{id}.cke_panel [' +
+				'border-color:{defaultBorder};' +
+			'] '
+		),
+		panel: new CKEDITOR.template(
+			// Panel drop-downs.
+			'.cke_panel_grouptitle [' +
+					'{lightGradient}' +
+					'border-color:{defaultBorder};' +
+				'] ' +
+
+			// Context menus.
+			'.cke_menubutton_icon [' +
+					'background-color:{menubuttonIcon};' +
+				'] ' +
+			'.cke_menubutton:hover .cke_menubutton_icon, .cke_menubutton:focus .cke_menubutton_icon, .cke_menubutton:active .cke_menubutton_icon [' +
+					'background-color:{menubuttonIconHover};' +
+				'] ' +
+			'.cke_menuseparator [' +
+					'background-color:{menubuttonIcon};' +
+				'] ' +
+
+			// Color boxes.
+			'a:hover.cke_colorbox, a:focus.cke_colorbox, a:active.cke_colorbox [' +
+					'border-color:{defaultBorder};' +
+				'] ' +
+			'a:hover.cke_colorauto, a:hover.cke_colormore, a:focus.cke_colorauto, a:focus.cke_colormore, a:active.cke_colorauto, a:active.cke_colormore [' +
+					'background-color:{ckeColorauto};' +
+					'border-color:{defaultBorder};' +
+				'] '
+		)
+	};
+
+	return function( editor, part ) {
+		var uiColor = editor.uiColor,
+			// The following are CSS styles used in templates.
+			// Styles are generated according to current editor.uiColor.
+			templateStyles = {
+				// CKEditor instances have a unique ID, which is used as class name into
+				// the outer container of the editor UI (e.g. ".cke_1").
+				//
+				// The Chameleon feature is available for each CKEditor instance,
+				// independently. Because of this, we need to prefix all CSS selectors with
+				// the unique class name of the instance.
+				id: '.' + editor.id,
+
+				// These styles are used by various UI elements.
+				defaultBorder: colorBrightness( uiColor, -0.1 ),
+				defaultGradient: verticalGradient( colorBrightness( uiColor, 0.9 ), uiColor ),
+				lightGradient: verticalGradient( colorBrightness( uiColor, 1 ), colorBrightness( uiColor, 0.7 ) ),
+				mediumGradient: verticalGradient( colorBrightness( uiColor, 0.8 ), colorBrightness( uiColor, 0.5 ) ),
+
+				// These are for specific UI elements.
+				ckeButtonOn: verticalGradient( colorBrightness( uiColor, 0.6 ), colorBrightness( uiColor, 0.7 ) ),
+				ckeResizer: colorBrightness( uiColor, -0.4 ),
+				ckeToolbarSeparator: colorBrightness( uiColor, 0.5 ),
+				ckeColorauto: colorBrightness( uiColor, 0.8 ),
+				dialogBody: colorBrightness( uiColor, 0.7 ),
+				dialogTabSelected: '#fff',
+				elementsPathColor: colorBrightness( uiColor, -0.6 ),
+				elementsPathBg: uiColor,
+				menubuttonIcon: colorBrightness( uiColor, 0.5 ),
+				menubuttonIconHover: colorBrightness( uiColor, 0.3 )
+			};
+
+		return templates[ part ]
+			.output( templateStyles )
+			.replace( /\[/g, '{' )				// Replace brackets with braces.
+			.replace( /\]/g, '}' );
+	};
+})();
+
+// %REMOVE_START%
+
+// 4. Register the skin icons for development purposes only
+// ----------------------------------------------------------
+// (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Icons)
+//
+// This code is here just to make the skin work fully when using its "source"
+// version. Without this, the skin will still work, but its icons will not be
+// used (again, on source version only).
+//
+// This block of code is not necessary on the release version of the skin.
+// Because of this it is very important to include it inside the REMOVE_START
+// and REMOVE_END comment markers, so the skin builder will properly clean
+// things up.
+//
+// If a required icon is not available here, the plugin defined icon will be
+// used instead. This means that a skin is not required to provide all icons.
+// Actually, it is not required to provide icons at all.
+
+(function() {
+	// The available icons. This list must match the file names (without
+	// extension) available inside the "icons" folder.
+	var icons = ( 'about,anchor-rtl,anchor,bgcolor,bidiltr,bidirtl,blockquote,' +
+		'bold,bulletedlist-rtl,bulletedlist,button,checkbox,copy-rtl,copy,' +
+		'creatediv,cut-rtl,cut,docprops-rtl,docprops,find-rtl,find,flash,form,' +
+		'hiddenfield,horizontalrule,icons,iframe,image,imagebutton,indent-rtl,' +
+		'indent,italic,justifyblock,justifycenter,justifyleft,justifyright,' +
+		'link,maximize,newpage-rtl,newpage,numberedlist-rtl,numberedlist,' +
+		'outdent-rtl,outdent,pagebreak-rtl,pagebreak,paste-rtl,paste,' +
+		'pastefromword-rtl,pastefromword,pastetext-rtl,pastetext,preview-rtl,' +
+		'preview,print,radio,redo-rtl,redo,removeformat,replace,save,scayt,' +
+		'select-rtl,select,selectall,showblocks-rtl,showblocks,smiley,' +
+		'source-rtl,source,specialchar,spellchecker,strike,subscript,' +
+		'superscript,table,templates-rtl,templates,textarea-rtl,textarea,' +
+		'textcolor,textfield,textfield-rtl,underline,undo-rtl,undo,unlink' ).split( ',' );
+
+	var iconsFolder = CKEDITOR.getUrl( CKEDITOR.skin.path() + 'icons/' );
+
+	for ( var i = 0; i < icons.length; i++ ) {
+		CKEDITOR.skin.icons[ icons[ i ] ] = { path: iconsFolder + icons[ i ] + '.png', offset: 0 } ;
+	}
+})();
+
+// %REMOVE_END%
+

data/app/assets/javascripts/ckeditor/skins/moono/toolbar.css

@@ -0,0 +1,436 @@
+/*
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+/*
+toolbar.css (part of editor.css)
+==================================
+
+This files styles the CKEditor toolbar and its buttons. For toolbar combo
+styles, check richcombo.css.
+
+The toolbar is rendered as a big container (called toolbox), which contains
+smaller "toolbars". Each toolbar represents a group of items that cannot be
+separated. The following is the visual representation of the toolbox.
+
++-- .cke_toolbox ----------------------------------------------------------+
+| +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... +-- .cke_toolbar_break --+ |
+| |                  | |                  |     |                        | |
+| +------------------+ +------------------+     +------------------------+ |
+| +-- .cke_toolbar --+ +-- .cke_toolbar --+ ...                            |
+| |                  | |                  |                                |
+| +------------------+ +------------------+                                |
++--------------------------------------------------------------------------+
+
+The following instead is the visual representation of a single toolbar:
+
++-- .cke_toolbar ----------------------------------------------------------------+
+| +-- .cke_toolbar_start --+ +-- .cke_toolgroup (*) --+ +-- .cke_toolbar_end --+ |
+| |                        | |                        | |                      | |
+| +------------------------+ +------------------------+ +----------------------+ |
++--------------------------------------------------------------------------------+
+(*) .cke_toolgroup is available only when the toolbar items can be grouped
+    (buttons). If the items can't be group (combos), this box is not available
+	and the items are rendered straight in that place.
+
+This file also styles toolbar buttons, which are rendered inside the above
+.cke_toolgroup containers. This is the visual representation of a button:
+
++-- .cke_button -------------------------------------+
+| +-- .cke_button_icon --+ +-- .cke_button_label --+ |
+| |                      | |                       | |
+| +----------------------+ +-----------------------+ |
++----------------------------------------------------+
+
+Special outer level classes used in this file:
+
+	.cke_hc: Available when the editor is rendered on "High Contrast".
+	.cke_rtl: Available when the editor UI is on RTL.
+*/
+
+/* The box that holds each toolbar. */
+.cke_toolbar
+{
+	float: left;
+}
+
+.cke_rtl .cke_toolbar
+{
+	float: right;
+}
+
+/* The box that holds buttons. */
+.cke_toolgroup
+{
+	float: left;
+	margin: 0 6px 5px 0;
+	border: 1px solid #a6a6a6;
+	border-bottom-color: #979797;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
+	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
+	box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
+
+	background: #e4e4e4;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e4e4e4));
+	background-image: -moz-linear-gradient(top, #ffffff, #e4e4e4);
+	background-image: -webkit-linear-gradient(top, #ffffff, #e4e4e4);
+	background-image: -o-linear-gradient(top, #ffffff, #e4e4e4);
+	background-image: -ms-linear-gradient(top, #ffffff, #e4e4e4);
+	background-image: linear-gradient(top, #ffffff, #e4e4e4);
+	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffffff', endColorstr='#ffe4e4e4');
+}
+
+.cke_hc .cke_toolgroup
+{
+	border: 0;
+	margin-right: 10px;
+	margin-bottom: 10px;
+}
+
+.cke_toolgroup *:first-child
+{
+	-moz-border-top-left-radius: 2px;
+	-moz-border-bottom-left-radius: 2px;
+	-webkit-border-top-left-radius: 2px;
+	-webkit-border-bottom-left-radius: 2px;
+	border-top-left-radius: 2px;
+	border-bottom-left-radius: 2px;
+}
+
+.cke_toolgroup *:last-child
+{
+	-moz-border-top-right-radius: 2px;
+	-moz-border-bottom-right-radius: 2px;
+	-webkit-border-top-right-radius: 2px;
+	-webkit-border-bottom-right-radius: 2px;
+	border-top-right-radius: 2px;
+	border-bottom-right-radius: 2px;
+}
+
+.cke_rtl .cke_toolgroup *:first-child
+{
+	-moz-border-radius: 0 2px 2px 0;
+	-webkit-border-radius: 0 2px 2px 0;
+	border-radius: 0 2px 2px 0;
+}
+
+.cke_rtl .cke_toolgroup *:last-child
+{
+	-moz-border-radius: 2px 0 0 2px;
+	-webkit-border-radius: 2px 0 0 2px;
+	border-radius: 2px 0 0 2px;
+}
+
+.cke_rtl .cke_toolgroup
+{
+	float: right;
+	margin-left: 6px;
+	margin-right: 0;
+}
+
+/* A toolbar button . */
+a.cke_button
+{
+	display: inline-block;
+	height: 18px;
+	padding: 4px 6px;
+	outline: none;
+	cursor: default;
+	float: left;
+	border: 0;
+}
+
+.cke_rtl .cke_button
+{
+	float: right;
+}
+
+.cke_hc .cke_button
+{
+	border: 1px solid black;
+
+	/* Compensate the added border */
+	padding: 3px 5px;
+	margin: -2px 4px 0 -2px;
+}
+
+/* This class is applied to the button when it is "active" (pushed).
+   This style indicates that the feature associated with the button is active
+   i.e. currently writing in bold or when spell checking is enabled. */
+.cke_button_on
+{
+	-moz-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
+	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
+	box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
+
+	background: #b5b5b5;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#cacaca));
+	background-image: -moz-linear-gradient(top, #aaa, #cacaca);
+	background-image: -webkit-linear-gradient(top, #aaa, #cacaca);
+	background-image: -o-linear-gradient(top, #aaa, #cacaca);
+	background-image: -ms-linear-gradient(top, #aaa, #cacaca);
+	background-image: linear-gradient(top, #aaa, #cacaca);
+	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffaaaaaa', endColorstr='#ffcacaca');
+}
+
+.cke_hc .cke_button_on
+{
+	border-width: 3px;
+
+	/* Compensate the border change */
+	padding: 1px 3px;
+}
+
+/* This class is applied to the button when the feature associated with the
+   button cannot be used (grayed-out).
+   i.e. paste button remains disabled when there is nothing in the clipboard to
+   be pasted. */
+.cke_button_disabled
+{
+	opacity: 0.3;
+}
+
+a.cke_button_on:hover,
+a.cke_button_on:focus,
+a.cke_button_on:active
+{
+	-moz-box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);
+	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);
+	box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);
+}
+
+a.cke_button_off:hover,
+a.cke_button_off:focus,
+a.cke_button_off:active
+{
+	-moz-box-shadow: 0 0 1px rgba(0,0,0,.3) inset;
+	-webkit-box-shadow: 0 0 1px rgba(0,0,0,.3) inset;
+	box-shadow: 0 0 1px rgba(0,0,0,.3) inset;
+
+	background: #ccc;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ccc));
+	background-image: -moz-linear-gradient(top, #f2f2f2, #ccc);
+	background-image: -webkit-linear-gradient(top, #f2f2f2, #ccc);
+	background-image: -o-linear-gradient(top, #f2f2f2, #ccc);
+	background-image: -ms-linear-gradient(top, #f2f2f2, #ccc);
+	background-image: linear-gradient(top, #f2f2f2, #ccc);
+	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fff2f2f2', endColorstr='#ffcccccc');
+}
+
+/* The icon which is a visual representation of the button. */
+.cke_button_icon
+{
+	cursor: inherit;
+	background-repeat: no-repeat;
+	margin-top: 1px;
+	width: 16px;
+	height: 16px;
+	float: left;
+	display: inline-block;
+}
+
+.cke_rtl .cke_button_icon
+{
+	float: right;
+}
+
+.cke_hc .cke_button_icon
+{
+	display: none;
+}
+
+/* The label of the button that stores the name of the feature. By default,
+   labels are invisible. They can be revealed on demand though. */
+.cke_button_label
+{
+	display: none;
+	padding-left: 3px;
+	margin-top: 1px;
+	line-height: 17px;
+	vertical-align: middle;
+	float: left;
+	cursor: default;
+	color: #474747;
+	text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+
+.cke_rtl .cke_button_label
+{
+	padding-right: 3px;
+	padding-left: 0;
+	float: right;
+}
+
+.cke_hc .cke_button_label
+{
+	padding: 0;
+	display: inline-block;
+	font-size: 12px;
+}
+
+/* The small arrow available on buttons that can be expanded
+   (e.g. the color buttons). */
+.cke_button_arrow
+{
+	/* Arrow in CSS */
+	display: inline-block;
+	margin: 8px 0 0 1px;
+	width: 0;
+	height: 0;
+	cursor: default;
+	vertical-align: top;
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-top: 3px solid #474747;
+}
+
+.cke_rtl .cke_button_arrow
+{
+	margin-right: 5px;
+	margin-left: 0;
+}
+
+.cke_hc .cke_button_arrow
+{
+	font-size: 10px;
+	margin: 3px -2px 0 3px;
+	width: auto;
+	border: 0;
+}
+
+/* The vertical separator which is used within a single toolbar to split
+   buttons into sub-groups. */
+.cke_toolbar_separator
+{
+	float: left;
+	background-color: #c0c0c0;
+	background-color: rgba(0,0,0,.2);
+	margin: 5px 2px 0;
+	height: 18px;
+	width: 1px;
+
+	-webkit-box-shadow: 1px 0 1px rgba(255,255,255,.5);
+	-moz-box-shadow: 1px 0 1px rgba(255,255,255,.5);
+	box-shadow: 1px 0 1px rgba(255,255,255,.5);
+}
+
+.cke_rtl .cke_toolbar_separator
+{
+	float: right;
+
+	-webkit-box-shadow: -1px 0 1px rgba(255,255,255,.1);
+	-moz-box-shadow: -1px 0 1px rgba(255,255,255,.1);
+	box-shadow: -1px 0 1px rgba(255,255,255,.1);
+}
+
+.cke_hc .cke_toolbar_separator
+{
+	width: 0;
+	border-left: 1px solid;
+	margin: 1px 5px 0 0px;
+}
+
+/* The dummy element that breaks toolbars.
+   Once it is placed, the very next toolbar is moved to the new row. */
+.cke_toolbar_break
+{
+	display: block;
+	clear: left;
+}
+
+.cke_rtl .cke_toolbar_break
+{
+	clear: right;
+}
+
+/* The button, which when clicked hides (collapses) all the toolbars. */
+.cke_toolbox_collapser
+{
+	width: 12px;
+	height: 11px;
+	float: right;
+	margin: 11px 0 0;
+	font-size: 0;
+	cursor: default;
+	text-align: center;
+
+	border: 1px solid #a6a6a6;
+	border-bottom-color: #979797;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
+	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
+	box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
+
+	background: #e4e4e4;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e4e4e4));
+	background-image: -moz-linear-gradient(top, #ffffff, #e4e4e4);
+	background-image: -webkit-linear-gradient(top, #ffffff, #e4e4e4);
+	background-image: -o-linear-gradient(top, #ffffff, #e4e4e4);
+	background-image: -ms-linear-gradient(top, #ffffff, #e4e4e4);
+	background-image: linear-gradient(top, #ffffff, #e4e4e4);
+	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffffff', endColorstr='#ffe4e4e4');
+}
+
+.cke_toolbox_collapser:hover
+{
+	background: #ccc;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ccc));
+	background-image: -moz-linear-gradient(top, #f2f2f2, #ccc);
+	background-image: -webkit-linear-gradient(top, #f2f2f2, #ccc);
+	background-image: -o-linear-gradient(top, #f2f2f2, #ccc);
+	background-image: -ms-linear-gradient(top, #f2f2f2, #ccc);
+	background-image: linear-gradient(top, #f2f2f2, #ccc);
+	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fff2f2f2', endColorstr='#ffcccccc');
+}
+
+.cke_toolbox_collapser.cke_toolbox_collapser_min
+{
+	margin: 0 2px 4px;
+}
+
+.cke_rtl .cke_toolbox_collapser
+{
+	float: left;
+}
+
+/* The CSS arrow, which belongs to the toolbar collapser. */
+.cke_toolbox_collapser .cke_arrow
+{
+	display: inline-block;
+
+	/* Pure CSS Arrow */
+	height: 0;
+	width: 0;
+	font-size: 0;
+	margin-top: 1px;
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-bottom: 3px solid #474747;
+	border-top: 3px solid transparent;
+}
+
+.cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow
+{
+	margin-top: 4px;
+	border-bottom-color: transparent;
+	border-top-color: #474747;
+}
+
+.cke_hc .cke_toolbox_collapser .cke_arrow
+{
+	font-size: 8px;
+	width: auto;
+	border: 0;
+	margin-top: 0;
+	margin-right: 2px;
+}