Index: /CKEditor/branches/features/v4-panel/_source/plugins/colorbutton/plugin.js
===================================================================
--- /CKEditor/branches/features/v4-panel/_source/plugins/colorbutton/plugin.js	(revision 7016)
+++ /CKEditor/branches/features/v4-panel/_source/plugins/colorbutton/plugin.js	(revision 7017)
@@ -154,10 +154,10 @@
 					' href="javascript:void(\'', lang.auto, '\')"' +
 					' role="option" aria-posinset="1" aria-setsize="', total, '">' +
-					'<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
+					'<table role="presentation" cellspacing=0 cellpadding=0 style="width:100%">' +
 						'<tr>' +
 							'<td>' +
 								'<span class="cke_colorbox" id="', colorBoxId, '"></span>' +
 							'</td>' +
-							'<td colspan=7 align=center>',
+							'<td colspan=7 style="text-align:center">',
 								lang.auto,
 							'</td>' +
@@ -207,4 +207,5 @@
 								' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
 								' href="javascript:void(\'', lang.more, '\')"',
+								' style="text-align:center"',
 								' role="option" aria-posinset="', total, '" aria-setsize="', total, '">',
 								lang.more,
Index: /CKEditor/branches/features/v4-panel/_source/plugins/floatpanel/plugin.js
===================================================================
--- /CKEditor/branches/features/v4-panel/_source/plugins/floatpanel/plugin.js	(revision 7016)
+++ /CKEditor/branches/features/v4-panel/_source/plugins/floatpanel/plugin.js	(revision 7017)
@@ -37,14 +37,41 @@
 	}
 
+	function getClickOutsidePanel( opener )
+	{
+		return function( ev )
+		{
+			var target = ev.data.getTarget();
+			if ( !( this.element.contains( target ) ) )
+			{
+				// Bypass when opener is clicked (close panel).
+				if ( opener && ( opener.equals( target ) || opener.contains( target ) ) )
+					return;
+
+				// Bypass all opened child panels.
+				var panel = this;
+				while( panel = panel._.activeChild )
+				{
+					if ( panel.element.contains( target ) )
+						return;
+				}
+
+				// Panel close is caused by user's navigating away the focus, e.g. click outside the panel.
+				// DO NOT restore focus in this case.
+				delete this._.returnFocus;
+				this.hide();
+			}
+		};
+	}
+
 	CKEDITOR.ui.floatPanel = CKEDITOR.tools.createClass(
 	{
 		$ : function( editor, parentElement, definition, level )
 		{
-			definition.forceIFrame = 1;
+			var panelIframe = definition.forceIFrame || editor.config.panelUseIFrame !== false;
 
 			var doc = parentElement.getDocument(),
 				panel = getPanel( editor, doc, parentElement, definition, level || 0 ),
 				element = panel.element,
-				iframe = element.getFirst().getFirst();
+				iframe = panelIframe ? element.getFirst().getFirst() : null;
 
 			this.element = element;
@@ -144,50 +171,60 @@
 
 				// Configure the IFrame blur event. Do that only once.
-				if ( !this._.blurSet )
-				{
-					// Non IE prefer the event into a window object.
-					var focused = CKEDITOR.env.ie ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow );
-
-					// With addEventListener compatible browsers, we must
-					// useCapture when registering the focus/blur events to
-					// guarantee they will be firing in all situations. (#3068, #3222 )
-					CKEDITOR.event.useCapture = true;
-
-					focused.on( 'blur', function( ev )
-						{
-							if ( !this.allowBlur() )
-								return;
-
-							// As we are using capture to register the listener,
-							// the blur event may get fired even when focusing
-							// inside the window itself, so we must ensure the
-							// target is out of it.
-							var target;
-							if ( CKEDITOR.env.ie && !this.allowBlur()
-								 || ( target = ev.data.getTarget() )
-								      && target.getName && target.getName() != 'iframe' )
-								return;
-
-							if ( this.visible && !this._.activeChild && !isShowing )
+				if ( iframe )
+				{
+					if ( !this._.blurSet )
+					{
+						// Non IE prefer the event into a window object.
+						var focused = CKEDITOR.env.ie ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow );
+
+						// With addEventListener compatible browsers, we must
+						// useCapture when registering the focus/blur events to
+						// guarantee they will be firing in all situations. (#3068, #3222 )
+						CKEDITOR.event.useCapture = true;
+
+						focused.on( 'blur', function( ev )
 							{
-								// Panel close is caused by user's navigating away the focus, e.g. click outside the panel.
-								// DO NOT restore focus in this case.
-								delete this._.returnFocus;
-								this.hide();
-							}
-						},
-						this );
-
-					focused.on( 'focus', function()
-						{
-							this._.focused = true;
-							this.hideChild();
-							this.allowBlur( true );
-						},
-						this );
-
-					CKEDITOR.event.useCapture = false;
-
-					this._.blurSet = 1;
+								if ( !this.allowBlur() )
+									return;
+
+								// As we are using capture to register the listener,
+								// the blur event may get fired even when focusing
+								// inside the window itself, so we must ensure the
+								// target is out of it.
+								var target;
+								if ( CKEDITOR.env.ie && !this.allowBlur()
+									 || ( target = ev.data.getTarget() )
+										  && target.getName && target.getName() != 'iframe' )
+										return;
+
+								if ( this.visible && !this._.activeChild && !isShowing )
+								{
+									// Panel close is caused by user's navigating away the focus, e.g. click outside the panel.
+									// DO NOT restore focus in this case.
+									delete this._.returnFocus;
+									this.hide();
+								}
+							},
+							this );
+
+						focused.on( 'focus', function()
+							{
+								this._.focused = true;
+								this.hideChild();
+								this.allowBlur( true );
+							},
+							this );
+
+						CKEDITOR.event.useCapture = false;
+
+						this._.blurSet = 1;
+					}
+				}
+				else
+				{
+					// Close on clicking outside of panel or doc blurs.
+					this._.clickOutside = getClickOutsidePanel( offsetParent );
+					CKEDITOR.document.on( 'mousedown', this._.clickOutside, this );
+					( CKEDITOR.env.ie ? new CKEDITOR.dom.window( window ) : CKEDITOR.document )[ 'on' ]( 'blur', this.hide, this );
 				}
 
@@ -231,7 +268,4 @@
 								target.setStyle( 'width', width + 'px' );
 
-								// IE doesn't compute the scrollWidth if a filter is applied previously
-								block.element.addClass( 'cke_frameLoaded' );
-
 								var height = block.element.$.scrollHeight;
 
@@ -307,10 +341,10 @@
 						} , this );
 
-						panel.isLoaded ? panelLoad() : panel.onLoad = panelLoad;
+						!iframe || panel.isLoaded ? panelLoad() : panel.onLoad = panelLoad;
 
 						// Set the panel frame focus, so the blur event gets fired.
 						CKEDITOR.tools.setTimeout( function()
 						{
-							iframe.$.contentWindow.focus();
+							iframe ? iframe.$.contentWindow.focus() : element.focus();
 							// We need this get fired manually because of unfired focus() function.
 							this.allowBlur( true );
@@ -329,7 +363,15 @@
 				if ( this.visible && ( !this.onHide || this.onHide.call( this ) !== true ) )
 				{
+					if ( this._.iframe )
+						// Blur previously focused element in panel frame. (#6671)
+						CKEDITOR.env.gecko && this._.iframe.getFrameDocument().$.activeElement.blur();
+					else
+					{
+						CKEDITOR.document.removeListener( 'mousedown', this._.clickOutside );
+						delete this._.clickOutside;
+						( CKEDITOR.env.ie ? new CKEDITOR.dom.window( window ) : CKEDITOR.document ).removeListener( 'blur', this.hide );
+					}
+
 					this.hideChild();
-					// Blur previously focused element. (#6671)
-					CKEDITOR.env.gecko && this._.iframe.getFrameDocument().$.activeElement.blur();
 					this.element.setStyle( 'display', 'none' );
 					this.visible = 0;
@@ -429,2 +471,13 @@
 	} );
 })();
+
+
+/**
+ * Whether renders the float panel in an iframe, which makes it easier to style the panel content
+ * from editor's content style sheet assigned by {@link CKEDITOR.config.contentCss}.
+ * @name CKEDITOR.config.panelUseIFrame
+ * @type Boolean
+ * @default true
+ * @example
+ * config.panelUseIFrame = false;
+ */
Index: /CKEditor/branches/features/v4-panel/_source/plugins/menu/plugin.js
===================================================================
--- /CKEditor/branches/features/v4-panel/_source/plugins/menu/plugin.js	(revision 7016)
+++ /CKEditor/branches/features/v4-panel/_source/plugins/menu/plugin.js	(revision 7017)
@@ -196,5 +196,5 @@
 
 				// Get the element representing the current item.
-				var element = this._.panel.getBlock( this.id ).element.getDocument().getById( this.id + String( index ) );
+				var element = this._.panel.getBlock( this.id ).element.getDocument().getById( this.id + '_item_' + String( index ) );
 
 				// Show the submenu.
@@ -399,5 +399,5 @@
 			render : function( menu, index, output )
 			{
-				var id = menu.id + String( index ),
+				var id = menu.id + '_item_' + String( index ),
 					state = ( typeof this.state == 'undefined' ) ? CKEDITOR.TRISTATE_OFF : this.state;
 
Index: /CKEditor/branches/features/v4-panel/_source/plugins/panel/plugin.js
===================================================================
--- /CKEditor/branches/features/v4-panel/_source/plugins/panel/plugin.js	(revision 7016)
+++ /CKEditor/branches/features/v4-panel/_source/plugins/panel/plugin.js	(revision 7017)
@@ -94,5 +94,5 @@
 				'">' );
 
-		if ( this.forceIFrame || this.css.length )
+		if ( this.forceIFrame )
 		{
 			output.push(
@@ -123,81 +123,89 @@
 	},
 
-	getHolderElement : function()
-	{
-		var holder = this._.holder;
-
-		if ( !holder )
-		{
-			if ( this.forceIFrame || this.css.length )
+	getHolderElement : ( function()
+	{
+		function keyHandler( evt )
+		{
+			var keystroke = evt.data.getKeystroke(),
+				dir = this.document.getById( this.id ).getAttribute( 'dir' );
+
+			// Delegate key processing to block.
+			if ( this._.onKeyDown && this._.onKeyDown( keystroke ) === false )
 			{
-				var iframe = this.document.getById( this.id + '_frame' ),
-					parentDiv = iframe.getParent(),
-					dir = parentDiv.getAttribute( 'dir' ),
-					className = parentDiv.getParent().getAttribute( 'class' ),
-					langCode = parentDiv.getParent().getAttribute( 'lang' ),
-					doc = iframe.getFrameDocument();
-
-				var onLoad = CKEDITOR.tools.addFunction( CKEDITOR.tools.bind( function( ev )
-					{
-						this.isLoaded = true;
-						if ( this.onLoad )
-							this.onLoad();
-					}, this ) );
-
-				var data =
-					'<!DOCTYPE html>' +
-					'<html dir="' + dir + '" class="' + className + '_container" lang="' + langCode + '">' +
-						'<head>' +
-							'<style>.' + className + '_container{visibility:hidden}</style>' +
-						'</head>' +
-						'<body class="cke_' + dir + ' cke_panel_frame ' + CKEDITOR.env.cssClass + '" style="margin:0;padding:0"' +
-						' onload="( window.CKEDITOR || window.parent.CKEDITOR ).tools.callFunction(' + onLoad + ');"></body>' +
-						// It looks strange, but for FF2, the styles must go
-						// after <body>, so it (body) becames immediatelly
-						// available. (#3031)
-						CKEDITOR.tools.buildStyleHtml( this.css ) +
-					'<\/html>';
-
-				doc.write( data );
-
-				var win = doc.getWindow();
-
-				// Register the CKEDITOR global.
-				win.$.CKEDITOR = CKEDITOR;
+				evt.data.preventDefault();
+				return;
+			}
+
+			// ESC/ARROW-LEFT(ltr) OR ARROW-RIGHT(rtl)
+			if ( keystroke == 27 || keystroke == ( dir == 'rtl' ? 39 : 37 ) )
+			{
+				if ( this.onEscape && this.onEscape( keystroke ) === false )
+					evt.data.preventDefault();
+			}
+		}
+
+		return function()
+		{
+			var holder = this._.holder, target;
+
+			if ( !holder )
+			{
+				if ( this.forceIFrame )
+				{
+					var iframe = this.document.getById( this.id + '_frame' ),
+							parentDiv = iframe.getParent(),
+							dir = parentDiv.getAttribute( 'dir' ),
+							className = parentDiv.getParent().getAttribute( 'class' ),
+							langCode = parentDiv.getParent().getAttribute( 'lang' ),
+							doc = iframe.getFrameDocument();
+
+					var onLoad = CKEDITOR.tools.addFunction( CKEDITOR.tools.bind( function( ev )
+																				  {
+																					  this.isLoaded = true;
+																					  if ( this.onLoad )
+																						  this.onLoad();
+																				  }, this ) );
+
+					var data =
+							'<!DOCTYPE html>' +
+									'<html dir="' + dir + '" class="' + className + '" lang="' + langCode + '">' +
+									'<head>' +
+									'<style>.' + className + '_container{visibility:hidden}</style>' +
+									'</head>' +
+									'<body class="cke_' + dir + ' cke_panel_frame ' + CKEDITOR.env.cssClass + '" style="margin:0;padding:0"' +
+									' onload="( window.CKEDITOR || window.parent.CKEDITOR ).tools.callFunction(' + onLoad + ');"></body>' +
+								// It looks strange, but for FF2, the styles must go
+								// after <body>, so it (body) becames immediatelly
+								// available. (#3031)
+									CKEDITOR.tools.buildStyleHtml( this.css ) +
+									'<\/html>';
+
+					doc.write( data );
+
+					var win = doc.getWindow();
+
+					// Register the CKEDITOR global.
+					win.$.CKEDITOR = CKEDITOR;
+
+
+					target = doc;
+					holder = doc.getBody();
+					holder.unselectable();
+					CKEDITOR.env.air && CKEDITOR.tools.callFunction( onLoad );
+				}
+				else
+				{
+					holder = this.document.getById( this.id );
+					target = this.element;
+				}
 
 				// Arrow keys for scrolling is only preventable with 'keypress' event in Opera (#4534).
-				doc.on( 'key' + ( CKEDITOR.env.opera? 'press':'down' ), function( evt )
-					{
-						var keystroke = evt.data.getKeystroke(),
-							dir = this.document.getById( this.id ).getAttribute( 'dir' );
-
-						// Delegate key processing to block.
-						if ( this._.onKeyDown && this._.onKeyDown( keystroke ) === false )
-						{
-							evt.data.preventDefault();
-							return;
-						}
-
-						// ESC/ARROW-LEFT(ltr) OR ARROW-RIGHT(rtl)
-						if ( keystroke == 27 || keystroke == ( dir == 'rtl' ? 39 : 37 ) )
-						{
-							if ( this.onEscape && this.onEscape( keystroke ) === false )
-								evt.data.preventDefault();
-						}
-					},
-					this );
-
-				holder = doc.getBody();
-				holder.unselectable();
-				CKEDITOR.env.air && CKEDITOR.tools.callFunction( onLoad );
+				target.on( 'key' + ( CKEDITOR.env.opera ? 'press' : 'down' ), keyHandler, this );
+				this._.holder = holder;
 			}
-			else
-				holder = this.document.getById( this.id );
-
-			this._.holder = holder;
-		}
-
-		return holder;
-	},
+
+			return holder;
+		};
+	} )(),
 
 	addBlock : function( name, block )
Index: /CKEditor/branches/features/v4-panel/_source/skins/kama/menu.css
===================================================================
--- /CKEditor/branches/features/v4-panel/_source/skins/kama/menu.css	(revision 7016)
+++ /CKEditor/branches/features/v4-panel/_source/skins/kama/menu.css	(revision 7017)
@@ -130,10 +130,4 @@
 	margin-left: 24px;
 	background-color: #fff;
-}
-/* Set these after the document has been loaded and we know the dimensions*/
-.cke_skin_kama .cke_frameLoaded .cke_menuitem .cke_label
-{
-	filter: alpha(opacity=70); /* IE */
-	opacity: 0.70; /* Safari, Opera and Mozilla */
 }
 
Index: /CKEditor/branches/features/v4-panel/_source/skins/kama/panel.css
===================================================================
--- /CKEditor/branches/features/v4-panel/_source/skins/kama/panel.css	(revision 7016)
+++ /CKEditor/branches/features/v4-panel/_source/skins/kama/panel.css	(revision 7017)
@@ -39,5 +39,5 @@
  */
 
-html.cke_skin_kama_container
+html.cke_skin_kama
 {
 	overflow: auto;
@@ -55,5 +55,5 @@
 }
 
-ul.cke_panel_list
+.cke_skin_kama ul.cke_panel_list
 {
 	list-style-type: none;
@@ -63,10 +63,5 @@
 }
 
-li.cke_panel_listItem
-{
-	margin: 0px;
-}
-
-.cke_panel_listItem a
+.cke_skin_kama .cke_panel_listItem a
 {
 	padding: 2px;
@@ -79,4 +74,9 @@
 }
 
+.cke_skin_kama .cke_panel_listItem a *
+{
+	cursor: pointer;
+}
+
 /* IE6 */
 * html .cke_panel_listItem a
@@ -95,5 +95,5 @@
 }
 
-.cke_panel_listItem.cke_selected a
+.cke_skin_kama .cke_panel_listItem.cke_selected a
 {
 	border: 1px solid #ccc;
@@ -101,7 +101,7 @@
 }
 
-.cke_panel_listItem a:hover,
-.cke_panel_listItem a:focus,
-.cke_panel_listItem a:active
+.cke_skin_kama .cke_panel_listItem a:hover,
+.cke_skin_kama .cke_panel_listItem a:focus,
+.cke_skin_kama .cke_panel_listItem a:active
 {
 	border-color: #316ac5;
@@ -109,8 +109,8 @@
 }
 
-.cke_hc .cke_panel_listItem.cke_selected a,
-.cke_hc .cke_panel_listItem a:hover,
-.cke_hc .cke_panel_listItem a:focus,
-.cke_hc .cke_panel_listItem a:active
+.cke_skin_kama .cke_hc .cke_panel_listItem.cke_selected a,
+.cke_skin_kama .cke_hc .cke_panel_listItem a:hover,
+.cke_skin_kama .cke_hc .cke_panel_listItem a:focus,
+.cke_skin_kama .cke_hc .cke_panel_listItem a:active
 {
 	border-width: 3px;
@@ -118,5 +118,5 @@
 }
 
-.cke_panel_grouptitle
+.cke_skin_kama .cke_panel_block .cke_panel_grouptitle
 {
 	font-size: 11px;
@@ -130,12 +130,12 @@
 }
 
-.cke_panel_listItem p,
-.cke_panel_listItem h1,
-.cke_panel_listItem h2,
-.cke_panel_listItem h3,
-.cke_panel_listItem h4,
-.cke_panel_listItem h5,
-.cke_panel_listItem h6,
-.cke_panel_listItem pre
+.cke_skin_kama .cke_panel_listItem p,
+.cke_skin_kama .cke_panel_listItem h1,
+.cke_skin_kama .cke_panel_listItem h2,
+.cke_skin_kama .cke_panel_listItem h3,
+.cke_skin_kama .cke_panel_listItem h4,
+.cke_skin_kama .cke_panel_listItem h5,
+.cke_skin_kama .cke_panel_listItem h6,
+.cke_skin_kama .cke_panel_listItem pre
 {
 	margin-top: 3px;
@@ -150,5 +150,5 @@
 }
 
-.cke_colorblock
+.cke_skin_kama .cke_colorblock
 {
 	padding: 3px;
@@ -157,6 +157,6 @@
 }
 
-.cke_colorblock,
-.cke_colorblock a
+.cke_skin_kama .cke_colorblock,
+.cke_skin_kama .cke_colorblock a
 {
 	text-decoration: none;
@@ -164,5 +164,5 @@
 }
 
-span.cke_colorbox
+.cke_skin_kama span.cke_colorbox
 {
 	width: 10px;
@@ -172,10 +172,10 @@
 }
 
-.cke_rtl span.cke_colorbox
+.cke_skin_kama .cke_rtl span.cke_colorbox
 {
 	float: right;
 }
 
-a.cke_colorbox
+.cke_skin_kama a.cke_colorbox
 {
 	border: #fff 1px solid;
@@ -184,12 +184,12 @@
 }
 
-.cke_rtl a.cke_colorbox
+.cke_skin_kama .cke_rtl a.cke_colorbox
 {
 	float: right;
 }
 
-a:hover.cke_colorbox,
-a:focus.cke_colorbox,
-a:active.cke_colorbox
+.cke_skin_kama a:hover.cke_colorbox,
+.cke_skin_kama a:focus.cke_colorbox,
+.cke_skin_kama a:active.cke_colorbox
 {
 	border: #316ac5 1px solid;
@@ -197,6 +197,6 @@
 }
 
-a.cke_colorauto,
-a.cke_colormore
+.cke_skin_kama a.cke_colorauto,
+.cke_skin_kama a.cke_colormore
 {
 	border: #fff 1px solid;
@@ -206,10 +206,10 @@
 }
 
-a:hover.cke_colorauto,
-a:hover.cke_colormore,
-a:focus.cke_colorauto,
-a:focus.cke_colormore,
-a:active.cke_colorauto,
-a:active.cke_colormore
+.cke_skin_kama a:hover.cke_colorauto,
+.cke_skin_kama a:hover.cke_colormore,
+.cke_skin_kama a:focus.cke_colorauto,
+.cke_skin_kama a:focus.cke_colormore,
+.cke_skin_kama a:active.cke_colorauto,
+.cke_skin_kama a:active.cke_colormore
 {
 	border: #316ac5 1px solid;
Index: /CKEditor/branches/features/v4-panel/_source/skins/kama/reset.css
===================================================================
--- /CKEditor/branches/features/v4-panel/_source/skins/kama/reset.css	(revision 7016)
+++ /CKEditor/branches/features/v4-panel/_source/skins/kama/reset.css	(revision 7017)
@@ -32,4 +32,76 @@
 }
 
+.cke_skin_kama h1
+{
+	font-size: 1.8em;
+}
+.cke_skin_kama h2
+{
+	font-size: 1.6em;
+}
+.cke_skin_kama h3
+{
+	font-size: 1.4em;
+}
+.cke_skin_kama h4
+{
+	font-size: 1.2em;
+}
+.cke_skin_kama h5
+{
+	font-size: 1em;
+}
+.cke_skin_kama h6
+{
+	font-size: 0.8em;
+}
+
+.cke_skin_kama h1,
+.cke_skin_kama h2,
+.cke_skin_kama h3,
+.cke_skin_kama h4,
+.cke_skin_kama h5,
+.cke_skin_kama h6
+{
+	font-weight: bolder;
+}
+
+.cke_skin_kama pre,
+.cke_skin_kama code,
+.cke_skin_kama kbd,
+.cke_skin_kama samp,
+.cke_skin_kama tt
+{
+	font-family: monospace;
+}
+
+.cke_skin_kama address,
+.cke_skin_kama cite,
+.cke_skin_kama var
+{
+	font-style: italic;
+}
+
+.cke_skin_kama ins
+{
+	text-decoration: underline;
+}
+
+.cke_skin_kama del
+{
+	text-decoration: 	line-through;
+}
+
+.cke_skin_kama big
+{
+	font-size: 15px;
+}
+.cke_skin_kama small
+{
+	font-size: 10px;
+}
+
+
+cke_skin_kama
 .cke_skin_kama .cke_rtl *,
 .cke_skin_kama .cke_rtl a:hover,
Index: /CKEditor/branches/features/v4-panel/_source/skins/kama/skin.js
===================================================================
--- /CKEditor/branches/features/v4-panel/_source/skins/kama/skin.js	(revision 7016)
+++ /CKEditor/branches/features/v4-panel/_source/skins/kama/skin.js	(revision 7017)
@@ -1,3 +1,3 @@
-/*
+/*
 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
@@ -174,16 +174,19 @@
 			{
 				var panel = event.data[ 0 ];
-				var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();
-
-				// Add stylesheet if missing.
-				if ( !iframe.getById( 'cke_ui_color' ) )
-				{
-					var node = getStylesheet( iframe );
-					uiColorMenus.push( node );
-
-					var color = editor.getUiColor();
-					// Set uiColor for new menu.
-					if ( color )
-						updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );
+				var panelFrame = panel._iframe;
+				if ( panelFrame )
+				{
+					var frameDoc = this._.iframe.getFrameDocument();
+					// Add stylesheet if missing.
+					if ( !frameDoc.getById( 'cke_ui_color' ) )
+					{
+						var node = getStylesheet( frameDoc );
+						uiColorMenus.push( node );
+
+						var color = editor.getUiColor();
+						// Set uiColor for new menu.
+						if ( color )
+							updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );
+					}
 				}
 			});