glebtv-ckeditor 4.0.1

data/vendor/assets/javascripts/ckeditor/lang/zh.js

@@ -0,0 +1,5 @@
+/*
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+CKEDITOR.lang['zh']={"dir":"ltr","editor":"富文本編輯器","common":{"editorHelp":"按 ALT+0 以獲得幫助","browseServer":"瀏覽伺服器端","url":"URL","protocol":"通訊協定","upload":"上傳","uploadSubmit":"上傳至伺服器","image":"影像","flash":"Flash","form":"表單","checkbox":"核取方塊","radio":"選項按鈕","textField":"文字方塊","textarea":"文字區域","hiddenField":"隱藏欄位","button":"按鈕","select":"清單/選單","imageButton":"影像按鈕","notSet":"<尚未設定>","id":"ID","name":"名稱","langDir":"語言方向","langDirLtr":"由左而右 (LTR)","langDirRtl":"由右而左 (RTL)","langCode":"語言代碼","longDescr":"詳細 URL","cssClass":"樣式表類別","advisoryTitle":"標題","cssStyle":"樣式","ok":"確定","cancel":"取消","close":"关闭","preview":"预览","resize":"拖拽改變大小","generalTab":"一般","advancedTab":"進階","validateNumberFailed":"需要輸入數字格式","confirmNewPage":"現存的修改尚未儲存，要開新檔案？","confirmCancel":"部份選項尚未儲存，要關閉對話盒？","options":"选项","target":"目标","targetNew":"新窗口(_blank)","targetTop":"整页(_top)","targetSelf":"本窗口(_self)","targetParent":"父窗口(_parent)","langDirLTR":"由左而右 (LTR)","langDirRTL":"由右而左 (RTL)","styles":"樣式","cssClasses":"樣式表類別","width":"寬度","height":"高度","align":"對齊","alignLeft":"靠左對齊","alignRight":"靠右對齊","alignCenter":"置中","alignTop":"靠上對齊","alignMiddle":"置中對齊","alignBottom":"靠下對齊","invalidValue":"Invalid value.","invalidHeight":"高度必須為數字格式","invalidWidth":"寬度必須為數字格式","invalidCssLength":"Value specified for the \"%1\" field must be a positive number with or without a valid CSS measurement unit (px, %, in, cm, mm, em, ex, pt, or pc).","invalidHtmlLength":"Value specified for the \"%1\" field must be a positive number with or without a valid HTML measurement unit (px or %).","invalidInlineStyle":"Value specified for the inline style must consist of one or more tuples with the format of \"name : value\", separated by semi-colons.","cssLengthTooltip":"Enter a number for a value in pixels or a number with a valid CSS unit (px, %, in, cm, mm, em, ex, pt, or pc).","unavailable":"%1<span class=\"cke_accessibility\">, 已關閉</span>"},"about":{"copy":"Copyright &copy; $1. All rights reserved.","dlgTitle":"關於 CKEditor","help":"Check $1 for help.","moreInfo":"訪問我們的網站以獲取更多關於協議的信息","title":"關於 CKEditor","userGuide":"CKEditor User's Guide"},"basicstyles":{"bold":"粗體","italic":"斜體","strike":"刪除線","subscript":"下標","superscript":"上標","underline":"底線"},"bidi":{"ltr":"Text direction from left to right","rtl":"Text direction from right to left"},"blockquote":{"toolbar":"引用文字"},"clipboard":{"copy":"複製","copyError":"瀏覽器的安全性設定不允許編輯器自動執行複製動作。請使用快捷鍵 (Ctrl/Cmd+C) 複製。","cut":"剪下","cutError":"瀏覽器的安全性設定不允許編輯器自動執行剪下動作。請使用快捷鍵 (Ctrl/Cmd+X) 剪下。","paste":"貼上","pasteArea":"Paste Area","pasteMsg":"請使用快捷鍵 (<strong>Ctrl/Cmd+V</strong>) 貼到下方區域中並按下 <strong>確定</strong>","securityMsg":"因為瀏覽器的安全性設定，本編輯器無法直接存取您的剪貼簿資料，請您自行在本視窗進行貼上動作。","title":"貼上"},"colorbutton":{"auto":"自動","bgColorTitle":"背景顏色","colors":{"000":"Black","800000":"Maroon","8B4513":"Saddle Brown","2F4F4F":"Dark Slate Gray","008080":"Teal","000080":"Navy","4B0082":"Indigo","696969":"Dark Gray","B22222":"Fire Brick","A52A2A":"Brown","DAA520":"Golden Rod","006400":"Dark Green","40E0D0":"Turquoise","0000CD":"Medium Blue","800080":"Purple","808080":"Gray","F00":"Red","FF8C00":"Dark Orange","FFD700":"Gold","008000":"Green","0FF":"Cyan","00F":"Blue","EE82EE":"Violet","A9A9A9":"Dim Gray","FFA07A":"Light Salmon","FFA500":"Orange","FFFF00":"Yellow","00FF00":"Lime","AFEEEE":"Pale Turquoise","ADD8E6":"Light Blue","DDA0DD":"Plum","D3D3D3":"Light Grey","FFF0F5":"Lavender Blush","FAEBD7":"Antique White","FFFFE0":"Light Yellow","F0FFF0":"Honeydew","F0FFFF":"Azure","F0F8FF":"Alice Blue","E6E6FA":"Lavender","FFF":"White"},"more":"更多顏色…","panelTitle":"Colors","textColorTitle":"文字顏色"},"colordialog":{"clear":"Clear","highlight":"Highlight","options":"Color Options","selected":"Selected Color","title":"Select color"},"templates":{"button":"樣版","emptyListMsg":"(無樣版)","insertOption":"取代原有內容","options":"Template Options","selectPromptMsg":"請選擇欲開啟的樣版<br> (原有的內容將會被清除):","title":"內容樣版"},"contextmenu":{"options":"Context Menu Options"},"div":{"IdInputLabel":"Id","advisoryTitleInputLabel":"Advisory Title","cssClassInputLabel":"Stylesheet Classes","edit":"Edit Div","inlineStyleInputLabel":"Inline Style","langDirLTRLabel":"Left to Right (LTR)","langDirLabel":"Language Direction","langDirRTLLabel":"Right to Left (RTL)","languageCodeInputLabel":" Language Code","remove":"Remove Div","styleSelectLabel":"Style","title":"Create Div Container","toolbar":"Create Div Container"},"toolbar":{"toolbarCollapse":"折叠工具栏","toolbarExpand":"展开工具栏","toolbarGroups":{"document":"Document","clipboard":"Clipboard/Undo","editing":"Editing","forms":"Forms","basicstyles":"Basic Styles","paragraph":"Paragraph","links":"Links","insert":"Insert","styles":"Styles","colors":"Colors","tools":"Tools"},"toolbars":"編輯器工具欄"},"elementspath":{"eleLabel":"Elements path","eleTitle":"%1 元素"},"list":{"bulletedlist":"項目清單","numberedlist":"編號清單"},"indent":{"indent":"增加縮排","outdent":"減少縮排"},"find":{"find":"尋找","findOptions":"Find Options","findWhat":"尋找:","matchCase":"大小寫須相符","matchCyclic":"循環搜索","matchWord":"全字相符","notFoundMsg":"未找到指定的文字。","replace":"取代","replaceAll":"全部取代","replaceSuccessMsg":"共完成 %1 次取代","replaceWith":"取代:","title":"尋找與取代"},"fakeobjects":{"anchor":"錨點","flash":"Flash 動畫","hiddenfield":"隱藏欄位","iframe":"IFrame","unknown":"不明物件"},"flash":{"access":"允許腳本訪問","accessAlways":"永遠","accessNever":"永不","accessSameDomain":"相同域名","alignAbsBottom":"絕對下方","alignAbsMiddle":"絕對中間","alignBaseline":"基準線","alignTextTop":"文字上方","bgcolor":"背景顏色","chkFull":"啟動全螢幕顯示","chkLoop":"重複","chkMenu":"開啟選單","chkPlay":"自動播放","flashvars":"Flash 變數","hSpace":"水平距離","properties":"Flash 屬性","propertiesTab":"屬性","quality":"質素","qualityAutoHigh":"高（自動）","qualityAutoLow":"低（自動）","qualityBest":"最好","qualityHigh":"高","qualityLow":"低","qualityMedium":"中（自動）","scale":"縮放","scaleAll":"全部顯示","scaleFit":"精確符合","scaleNoBorder":"無邊框","title":"Flash 屬性","vSpace":"垂直距離","validateHSpace":"水平間距必須為數字格式","validateSrc":"請輸入欲連結的 URL","validateVSpace":"垂直間距必須為數字格式","windowMode":"視窗模式","windowModeOpaque":"不透明","windowModeTransparent":"透明","windowModeWindow":"視窗"},"font":{"fontSize":{"label":"大小","voiceLabel":"文字大小","panelTitle":"大小"},"label":"字體","panelTitle":"字體","voiceLabel":"字體"},"forms":{"button":{"title":"按鈕屬性","text":"顯示文字 (值)","type":"類型","typeBtn":"按鈕 (Button)","typeSbm":"送出 (Submit)","typeRst":"重設 (Reset)"},"checkboxAndRadio":{"checkboxTitle":"核取方塊屬性","radioTitle":"選項按鈕屬性","value":"選取值","selected":"已選取"},"form":{"title":"表單屬性","menu":"表單屬性","action":"動作","method":"方法","encoding":"表單編碼"},"hidden":{"title":"隱藏欄位屬性","name":"名稱","value":"值"},"select":{"title":"清單/選單屬性","selectInfo":"資訊","opAvail":"可用選項","value":"值","size":"大小","lines":"行","chkMulti":"可多選","opText":"顯示文字","opValue":"選取值","btnAdd":"新增","btnModify":"修改","btnUp":"上移","btnDown":"下移","btnSetValue":"設為預設值","btnDelete":"刪除"},"textarea":{"title":"文字區域屬性","cols":"字元寬度","rows":"列數"},"textfield":{"title":"文字方塊屬性","name":"名稱","value":"值","charWidth":"字元寬度","maxChars":"最多字元數","type":"類型","typeText":"文字","typePass":"密碼","typeEmail":"Email","typeSearch":"Search","typeTel":"Telephone Number","typeUrl":"URL"}},"format":{"label":"格式","panelTitle":"格式","tag_address":"位址","tag_div":"一般 (DIV)","tag_h1":"標題 1","tag_h2":"標題 2","tag_h3":"標題 3","tag_h4":"標題 4","tag_h5":"標題 5","tag_h6":"標題 6","tag_p":"一般","tag_pre":"已格式化"},"horizontalrule":{"toolbar":"插入水平線"},"iframe":{"border":"Show frame border","noUrl":"Please type the iframe URL","scrolling":"Enable scrollbars","title":"IFrame Properties","toolbar":"IFrame"},"image":{"alertUrl":"請輸入影像 URL","alt":"替代文字","border":"邊框","btnUpload":"上傳至伺服器","button2Img":"要把影像按鈕改成影像嗎？","hSpace":"水平距離","img2Button":"要把影像改成影像按鈕嗎？","infoTab":"影像資訊","linkTab":"超連結","lockRatio":"等比例","menu":"影像屬性","resetSize":"重設為原大小","title":"影像屬性","titleButton":"影像按鈕屬性","upload":"上傳","urlMissing":"Image source URL is missing.","vSpace":"垂直距離","validateBorder":"Border must be a whole number.","validateHSpace":"HSpace must be a whole number.","validateVSpace":"VSpace must be a whole number."},"smiley":{"options":"Smiley Options","title":"插入表情符號","toolbar":"表情符號"},"justify":{"block":"左右對齊","center":"置中","left":"靠左對齊","right":"靠右對齊"},"link":{"acccessKey":"存取鍵","advanced":"進階","advisoryContentType":"內容類型","advisoryTitle":"標題","anchor":{"toolbar":"插入/編輯錨點","menu":"錨點屬性","title":"錨點屬性","name":"錨點名稱","errorName":"請輸入錨點名稱","remove":"Remove Anchor"},"anchorId":"依元件 ID","anchorName":"依錨點名稱","charset":"連結資源之編碼","cssClasses":"樣式表類別","emailAddress":"電子郵件","emailBody":"郵件內容","emailSubject":"郵件主旨","id":"ID","info":"超連結資訊","langCode":"語言方向","langDir":"語言方向","langDirLTR":"由左而右 (LTR)","langDirRTL":"由右而左 (RTL)","menu":"編輯超連結","name":"名稱","noAnchors":"(本文件尚無可用之錨點)","noEmail":"請輸入電子郵件位址","noUrl":"請輸入欲連結的 URL","other":"<其他>","popupDependent":"從屬 (NS)","popupFeatures":"快顯視窗屬性","popupFullScreen":"全螢幕 (IE)","popupLeft":"左","popupLocationBar":"網址列","popupMenuBar":"選單列","popupResizable":"可縮放","popupScrollBars":"捲軸","popupStatusBar":"狀態列","popupToolbar":"工具列","popupTop":"右","rel":"Relationship","selectAnchor":"請選擇錨點","styles":"樣式","tabIndex":"定位順序","target":"目標","targetFrame":"<框架>","targetFrameName":"目標框架名稱","targetPopup":"<快顯視窗>","targetPopupName":"快顯視窗名稱","title":"超連結","toAnchor":"本頁錨點","toEmail":"電子郵件","toUrl":"URL","toolbar":"插入/編輯超連結","type":"超連接類型","unlink":"移除超連結","upload":"上傳"},"liststyle":{"armenian":"Armenian numbering","bulletedTitle":"Bulleted List Properties","circle":"Circle","decimal":"Decimal (1, 2, 3, etc.)","decimalLeadingZero":"Decimal leading zero (01, 02, 03, etc.)","disc":"Disc","georgian":"Georgian numbering (an, ban, gan, etc.)","lowerAlpha":"Lower Alpha (a, b, c, d, e, etc.)","lowerGreek":"Lower Greek (alpha, beta, gamma, etc.)","lowerRoman":"Lower Roman (i, ii, iii, iv, v, etc.)","none":"None","notset":"<not set>","numberedTitle":"Numbered List Properties","square":"Square","start":"Start","type":"Type","upperAlpha":"Upper Alpha (A, B, C, D, E, etc.)","upperRoman":"Upper Roman (I, II, III, IV, V, etc.)","validateStartNumber":"List start number must be a whole number."},"magicline":{"title":"Insert paragraph here"},"maximize":{"maximize":"最大化","minimize":"最小化"},"newpage":{"toolbar":"開新檔案"},"pagebreak":{"alt":"分頁符號","toolbar":"插入分頁符號"},"pastetext":{"button":"貼為純文字格式","title":"貼為純文字格式"},"pastefromword":{"confirmCleanup":"您想貼上的文字似乎是自 Word 複製而來，請問您是否要先清除 Word 的格式後再行貼上？","error":"It was not possible to clean up the pasted data due to an internal error","title":"自 Word 貼上","toolbar":"自 Word 貼上"},"preview":{"preview":"預覽"},"print":{"toolbar":"列印"},"removeformat":{"toolbar":"清除格式"},"save":{"toolbar":"儲存"},"selectall":{"toolbar":"全選"},"showblocks":{"toolbar":"顯示區塊"},"sourcearea":{"toolbar":"原始碼"},"specialchar":{"options":"Special Character Options","title":"請選擇特殊符號","toolbar":"插入特殊符號"},"scayt":{"about":"關於即時拼寫檢查","aboutTab":"關於","addWord":"添加單詞","allCaps":"Ignore All-Caps Words","dic_create":"Create","dic_delete":"Delete","dic_field_name":"Dictionary name","dic_info":"Initially the User Dictionary is stored in a Cookie. However, Cookies are limited in size. When the User Dictionary grows to a point where it cannot be stored in a Cookie, then the dictionary may be stored on our server. To store your personal dictionary on our server you should specify a name for your dictionary. If you already have a stored dictionary, please type its name and click the Restore button.","dic_rename":"Rename","dic_restore":"Restore","dictionariesTab":"字典","disable":"關閉即時拼寫檢查","emptyDic":"字典名不應為空.","enable":"啟用即時拼寫檢查","ignore":"忽略","ignoreAll":"全部忽略","ignoreDomainNames":"Ignore Domain Names","langs":"語言","languagesTab":"語言","mixedCase":"Ignore Words with Mixed Case","mixedWithDigits":"Ignore Words with Numbers","moreSuggestions":"更多拼寫建議","opera_title":"Not supported by Opera","options":"選項","optionsTab":"選項","title":"即時拼寫檢查","toggle":"啟用／關閉即時拼寫檢查","noSuggestions":"No suggestion"},"stylescombo":{"label":"樣式","panelTitle":"Formatting Styles","panelTitle1":"塊級元素樣式","panelTitle2":"內聯元素樣式","panelTitle3":"物件元素樣式"},"table":{"border":"邊框","caption":"標題","cell":{"menu":"儲存格","insertBefore":"向左插入儲存格","insertAfter":"向右插入儲存格","deleteCell":"刪除儲存格","merge":"合併儲存格","mergeRight":"向右合併儲存格","mergeDown":"向下合併儲存格","splitHorizontal":"橫向分割儲存格","splitVertical":"縱向分割儲存格","title":"儲存格屬性","cellType":"儲存格類別","rowSpan":"儲存格列數","colSpan":"儲存格欄數","wordWrap":"自動換行","hAlign":"水平對齊","vAlign":"垂直對齊","alignBaseline":"基線對齊","bgColor":"背景顏色","borderColor":"邊框顏色","data":"數據","header":"標題","yes":"是","no":"否","invalidWidth":"儲存格寬度必須為數字格式","invalidHeight":"儲存格高度必須為數字格式","invalidRowSpan":"儲存格列數必須為整數格式","invalidColSpan":"儲存格欄數度必須為整數格式","chooseColor":"Choose"},"cellPad":"內距","cellSpace":"間距","column":{"menu":"欄","insertBefore":"向左插入欄","insertAfter":"向右插入欄","deleteColumn":"刪除欄"},"columns":"欄數","deleteTable":"刪除表格","headers":"標題","headersBoth":"第一欄和第一列","headersColumn":"第一欄","headersNone":"無標題","headersRow":"第一列","invalidBorder":"邊框大小必須為數字格式","invalidCellPadding":"儲存格內距必須為數字格式","invalidCellSpacing":"儲存格間距必須為數字格式","invalidCols":"必須有一或更多的欄","invalidHeight":"表格高度必須為數字格式","invalidRows":"必須有一或更多的列","invalidWidth":"表格寬度必須為數字格式","menu":"表格屬性","row":{"menu":"列","insertBefore":"向上插入列","insertAfter":"向下插入列","deleteRow":"刪除列"},"rows":"列數","summary":"摘要","title":"表格屬性","toolbar":"表格","widthPc":"百分比","widthPx":"像素","widthUnit":"width unit"},"undo":{"redo":"重複","undo":"復原"},"wsc":{"btnIgnore":"忽略","btnIgnoreAll":"全部忽略","btnReplace":"取代","btnReplaceAll":"全部取代","btnUndo":"復原","changeTo":"更改為","errorLoading":"無法聯系侍服器: %s.","ieSpellDownload":"尚未安裝拼字檢查元件。您是否想要現在下載？","manyChanges":"拼字檢查完成：更改了 %1 個單字","noChanges":"拼字檢查完成：未更改任何單字","noMispell":"拼字檢查完成：未發現拼字錯誤","noSuggestions":"- 無建議值 -","notAvailable":"抱歉，服務目前暫不可用","notInDic":"不在字典中","oneChange":"拼字檢查完成：更改了 1 個單字","progress":"進行拼字檢查中…","title":"拼字檢查","toolbar":"拼字檢查"}};

data/vendor/assets/javascripts/ckeditor/plugins/CKCss/CKCss.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<install version="1.5" type="plugin" plugin="CKCss" method="upgrade">
+	<name>CKCss</name>
+	<version>1.4</version>
+	<creationDate>Sept 2012</creationDate>
+	<author>Charlie Croom, JoomlaCK Team</author>
+	<copyright>Copyright (C) 2012 - 2013 Webxsolution Ltd</copyright>
+	<authorUrl>http://www.joomlackeditor.com</authorUrl>
+	<license>GNU/GPLv2</license>
+	<description>CSS Editor for CKEditor</description>
+	<languages>
+	</languages>
+	<icon>ckcss.png</icon>
+	<files>	
+	<filename>ckcss.png</filename>
+	<filename>plugin.js</filename>
+	<folder>dialogs</folder>
+	<folder>lang</folder>
+	<folder>css</folder>
+    </files>
+	<params>
+		<param name="dialogtitle" type="text" default="CSS Editor Properties" label="Dialog Title" description="The Title shown in the dialog for this plugin" />
+		<param name="height" type="text" default="400" label="Dialog height" description="The height of dialog" />
+		<param name="width" type="text" default="550" label="Dialog width" description="The width of dialog"/>
+	</params>
+</install>

data/vendor/assets/javascripts/ckeditor/plugins/CKCss/css/styles.css

@@ -0,0 +1,10 @@
+/*------------------------------------------------------------------------
+# Copyright (C) 2005-2010 WebxSolution Ltd. All Rights Reserved.
+# @license - GPLv2.0
+# Author: WebxSolution Ltd
+# Websites:  http://www.webxsolution.com
+# Terms of Use: An extension that is derived from the JoomlaCK editor will only be allowed under the following conditions: http://joomlackeditor.com/terms-of-use
+# ------------------------------------------------------------------------*/ 
+.selectOvertype {
+	cursor:text;
+}

data/vendor/assets/javascripts/ckeditor/plugins/CKCss/dialogs/ckcss.js

@@ -0,0 +1,3589 @@
+var _editor;
+(function () {
+
+    var _positionVar = ['Top', 'Right', 'Bottom', 'Left'];
+    var _pageUsedElem = new Hash();
+    var imagePreviewBoxId = CKEDITOR.tools.getNextId() + '_imgPreview';
+
+    function distPreview(dlg, cssText) {
+        var prw1 = CKEDITOR.document.getById(imagePreviewBoxId);
+        var prw2 = CKEDITOR.document.getById(imagePreviewBoxId + '2');
+        var prw3 = CKEDITOR.document.getById(imagePreviewBoxId + '3');
+        var prw4 = CKEDITOR.document.getById(imagePreviewBoxId + '4');
+        var prw5 = CKEDITOR.document.getById(imagePreviewBoxId + '5');
+        var prw6 = CKEDITOR.document.getById(imagePreviewBoxId + '6');
+        var prw7 = CKEDITOR.document.getById(imagePreviewBoxId + '7');
+        var prw8 = CKEDITOR.document.getById(imagePreviewBoxId + '8');
+        var prw9 = CKEDITOR.document.getById(imagePreviewBoxId + '9');
+        var prwH1 = dlg.getContentElement('page1', 'stylePreview');
+        var prwH2 = dlg.getContentElement('page2', 'stylePreview');
+        var prwH3 = dlg.getContentElement('page3', 'stylePreview');
+        var prwH4 = dlg.getContentElement('page4', 'stylePreview');
+        var prwH5 = dlg.getContentElement('page5', 'stylePreview');
+        var prwH6 = dlg.getContentElement('page6', 'stylePreview');
+        var prwH7 = dlg.getContentElement('page7', 'stylePreview');
+        var prwH8 = dlg.getContentElement('page8', 'stylePreview');
+        var prwH9 = dlg.getContentElement('page9', 'stylePreview');
+
+        prwH1.setValue(cssText);
+        prwH2.setValue(cssText);
+        prwH3.setValue(cssText);
+        prwH4.setValue(cssText);
+        prwH5.setValue(cssText);
+        prwH6.setValue(cssText);
+        prwH7.setValue(cssText);
+        prwH8.setValue(cssText);
+        prwH9.setValue(cssText);
+
+        prw1.$.style.cssText = cssText;
+        prw2.$.style.cssText = cssText;
+        prw3.$.style.cssText = cssText;
+        prw4.$.style.cssText = cssText;
+        prw5.$.style.cssText = cssText;
+        prw6.$.style.cssText = cssText;
+        prw7.$.style.cssText = cssText;
+        prw8.$.style.cssText = cssText;
+        prw9.$.style.cssText = cssText;
+
+    }
+
+
+    function getParentTabName(elem) {
+        var element = elem.getInputElement(),
+            cursor = element;
+        while ((cursor = cursor.getParent()) && cursor.$.className.search('cke_dialog_page_contents') == -1)
+        { /*jsl:pass*/ }
+
+
+        if (!cursor)
+            return null;
+        return cursor.getAttribute('name');
+    }
+
+    function getParentTabElem(dlg, pageName) {
+        for (var i = 0; i < dlg.parts.tabs.$.children.length; i++) {
+            if (dlg.parts.tabs.$.children[i].id.indexOf('cke_' + pageName) != -1) {
+                return dlg.parts.tabs.$.children[i];
+            }
+        }
+        return null;
+    }
+
+    function isPageUsed(pageName, curStyle, cnt) {
+        if (cnt == 1) {
+            if (!_pageUsedElem.hasItem(curStyle)) _pageUsedElem.setItem(curStyle, pageName);
+            return true;
+        } else {
+            _pageUsedElem.removeItem(curStyle);
+        }
+
+        for (var itm in _pageUsedElem.items) {
+            if (_pageUsedElem.getItem(itm) == pageName) return true;
+        }
+        return false;
+    }
+
+    function boldTab(elem) {
+
+        var dlg = elem.getDialog();
+        var pageUsed = false;
+        var relTab = getParentTabElem(dlg, getParentTabName(elem));
+        var pageName = getParentTabName(elem);
+        var _vl = elem.getValue();
+        //if (_vl != ' ') {
+        if ((_vl == '') || (_vl == ' ')) {
+            pageUsed = isPageUsed(pageName, elem.id, -1)
+        } else {
+            pageUsed = isPageUsed(pageName, elem.id, +1)
+        }
+        if (pageUsed) {
+            relTab.style.fontWeight = 'bold';
+            relTab.style.color = '#990000';
+        } else {
+            relTab.style.fontWeight = '';
+            relTab.style.color = '';
+        }
+        //}
+    }
+
+    function findElement(dlg, elemId) {
+        for (var i = 0; i < dlg.definition.contents.length; i++) {
+            var elem = dlg.getContentElement(dlg.definition.contents[i].id, elemId);
+            if (elem != null) {
+                return elem;
+            }
+
+        }
+    }
+
+    function gestUm(elem) {
+        var dialog = elem.getDialog();
+        var um = findElement(dialog, elem.id + 'Um');
+        if (um != null) {
+            if (elem.isEnabled()) {
+                if (isNumeric(elem.getValue())) um.enable(); else um.disable();
+            } else {
+                um.disable();
+            }
+        }
+    }
+
+    function arContains(arr, obj) {
+        for (var i = 0; i < arr.length; i++) {
+            if (arr[i].value == obj) return i;
+        }
+        return -1;
+    }
+
+    function selectOnKeyDownAll(elem, pre, post, page, ev) {
+        var dialog = elem.getDialog();
+        var _val = elem.getValue();
+        var _topElem = dialog.getContentElement(page, pre + 'Top' + post);
+        for (var i = 0; i < _positionVar.length; i++) {
+            if (_positionVar[i] != 'Top') {
+                var elem = dialog.getContentElement(page, pre + _positionVar[i] + post);
+                selectOnKeyDown(elem, ev);
+            }
+        }
+    }
+
+    function selectOnKeyUpAll(elem, pre, post, page, ev) {
+        var dialog = elem.getDialog();
+        var _val = elem.getValue();
+        var _topElem = dialog.getContentElement(page, pre + 'Top' + post);
+        for (var i = 0; i < _positionVar.length; i++) {
+            if (_positionVar[i] != 'Top') {
+                var elem = dialog.getContentElement(page, pre + _positionVar[i] + post);
+                selectOnKeyUp(elem, ev);
+            }
+        }
+    }
+
+    function selectOnKeyPressAll(elem, pre, post, page, ev) {
+        var dialog = elem.getDialog();
+        var _val = elem.getValue();
+        var _topElem = dialog.getContentElement(page, pre + 'Top' + post);
+        for (var i = 0; i < _positionVar.length; i++) {
+            if (_positionVar[i] != 'Top') {
+                var elem = dialog.getContentElement(page, pre + _positionVar[i] + post);
+                selectOnKeyPress(elem, ev);
+            }
+        }
+    }
+
+    function setAll(elem, pre, post, page) {
+        var dialog = elem.getDialog();
+        var _val = elem.getValue();
+        var _topElem = dialog.getContentElement(page, pre + 'Top' + post);
+        for (var i = 0; i < _positionVar.length; i++) {
+            if (_positionVar[i] != 'Top') {
+                var elem = dialog.getContentElement(page, pre + _positionVar[i] + post);
+                if (_val) {
+                    elem.disable();
+                    elem.setValue(_topElem.getValue());
+                } else {
+                    elem.enable();
+                }
+            }
+        }
+    }
+
+    function elemSetup(elem, _style) {
+        var _value 	= _style[elem.id];
+        var editor 	= elem.getDialog().getParentEditor();
+        var overType = editor.lang.CKCss.value;
+
+        if (elem.id=='clipTop') _value = _style['clip'];
+        if ((_value != undefined) && (_value != '')) {
+            if (elem.id=='clipTop') {
+                var dialog = elem.getDialog();
+                var values = _style['clip'].replace('rect(','').replace(')','').split(',');
+                var page = getParentTabName(elem);
+                for (var i = 0; i < _positionVar.length; i++) {
+                    var elemClip = dialog.getContentElement(page,'clip' + _positionVar[i]);
+                    selectSetValue(elemClip,values[i]);
+                }
+            } else {
+                switch (elem.type) {
+                    case 'select':
+                        selectSetValue(elem,_value);
+                        break;
+                    default:
+                        elem.setValue(_value, _value);
+                        break;
+                }
+            }
+        } else {
+            switch (elem.type) {
+                case 'select':
+                    gestUm(elem);
+            }
+        }
+        boldTab(elem);
+    }
+
+    function selectSetValue(elem,_value) {
+        gestUm(elem);
+        if (arContains(elem.getInputElement().$.options, _value) > -1) {
+            elem.setValue(_value, _value);
+        } else {
+            if (arContains(elem.getInputElement().$.options, ' ') > -1) {
+                elem.remove(0);
+            }
+            var dialog = elem.getDialog();
+            var um = findElement(dialog, elem.id + 'Um');
+            if (um != null) {
+                if (_value.length > 2) {
+                    var _umValue = _value.substring(_value.length - 2, _value.length)
+                    var _value = _value.replace(_umValue, '');
+                }
+                if (isNumeric(_value)) {
+                    um.setValue(_umValue);
+                    um.enable();
+                } else {
+                    um.disable();
+                }
+            }
+            elem.add(_value, _value, null);
+            elem.setValue(_value);
+        }
+    }
+
+    function selectOnKeyDown(elem, ev) {
+        var obj = elem.getInputElement().$;
+        ev = ev.data.$;
+        fnKeyDownHandler_A(obj, ev);
+    }
+
+    function selectOnKeyUp(elem, ev) {
+        var obj = elem.getInputElement().$;
+        ev = ev.data.$;
+        fnKeyUpHandler_A(obj, ev);
+        gestUm(elem);
+        preview(elem);
+    }
+
+    function selectOnKeyPress(elem, ev) {
+        var obj = elem.getInputElement().$;
+        ev = ev.data.$;
+        return fnKeyPressHandler_A(obj, ev);
+    }
+
+    function selectOnChange(elem, ev) {
+        var obj = elem.getInputElement().$;
+        ev = ev.data.$;
+        fnChangeHandler_A(obj, ev);
+        preview(elem);
+
+        var sel  = elem.getInputElement();
+        var editor 	= elem.getDialog().getParentEditor();
+        var overType	= editor.lang.CKCss.value;
+        var selIndex = obj.selectedIndex;
+        var selectedtxt = obj.options[selIndex].text;
+
+        var opts 	= sel.getChildren();
+        var opt 	= opts.getItem(selIndex);
+
+        if(selectedtxt == overType || opt.hasClass('cssEditable'))
+        {
+            var className =  sel.getAttribute('class')
+            sel.setAttribute('class',className +' selectOvertype');
+            opt.setAttribute('class','cssEditable');
+        }
+        else
+        {
+            var className =  sel.getAttribute('class');
+            className =  className.replace(' selectOvertype','');
+            sel.setAttribute('class',className);
+        }
+    }
+
+    function preview(elem) {
+        var dialog = elem.getDialog();
+        var prw = CKEDITOR.document.getById(imagePreviewBoxId);
+        var _vl = elem.getValue();
+        var _style=elem.id;
+        var dlg=elem.getDialog();
+
+        //files
+        if ((_style == 'backgroundImage') || (_style == 'listStyleImage')) {
+            if(!_vl.match(/:\/\//))
+                _vl = _editor.config.baseHref + _vl;
+            _vl = 'url(\'' + _vl + '\')';
+        }
+
+        //clip:rect
+        if ((_style=='clipLeft')||(_style=='clipTop')||(_style=='clipBottom')||(_style=='clipRight')) {
+            var _notSet=true;
+            var elemPage=getParentTabName(elem);
+            var cur=_style.replace('clip','');
+            _vl='rect(';
+            for (var i = 0; i < _positionVar.length; i++) {
+                var cElem=dlg.getContentElement(elemPage,'clip' + _positionVar[i] );
+                var cElemUm=dlg.getContentElement(elemPage,'clip' + _positionVar[i] + "Um");
+                var _tmp=cElem.getValue();
+
+                if ((_tmp!=' ') && (_tmp!='')) {
+                    _notSet=false;
+                    if (isNumeric(_tmp)) _tmp+=cElemUm.getValue(); else _tmp='auto';
+                } else{
+                    _tmp='auto';
+                }
+                _vl+=_tmp + ',';
+            }
+            _style='clip';
+            if (!_notSet) {
+                _vl=_vl.substr(0,_vl.length-1) + ')';
+            } else {
+                /* ie non consente di impostare clip=''*/
+                if (CKEDITOR.env.ie) {
+                    _vl='rect(auto,auto,auto,auto)';
+                } else {
+                    _vl='';
+                }
+
+            }
+        }
+
+        if ((_vl != ' ') && (_vl != '')) {
+            if (isNumeric(_vl)) {
+                var um = findElement(dialog, _style + 'Um');
+                if (um != null) {
+                    _vl = _vl + um.getValue();
+                }
+            }
+            prw.setStyle(_style, _vl);
+        } else {
+            prw.removeStyle(_style);
+        }
+
+        prw.$.style.cssText = prw.$.style.cssText.replace(/\/administrator\//g,'/');
+
+        distPreview(dialog, prw.$.style.cssText);
+        boldTab(elem);
+        //        var prwH = dialog.getContentElement('page1', 'stylePreview');
+        //        prwH.setValue(prw.$.style.cssText);
+    }
+
+    function isNumeric(n) {
+        return !isNaN(parseFloat(n)) && isFinite(n);
+    }
+
+
+    var exampleDialog = function (editor) {
+        _editor=editor;
+        var _fontName = [[editor.lang.CKCss.notSet, ''],['Arial', 'arial, helvetica, sans-serif'], ['Comic Sans MS', 'comic sans ms, cursive'], ['Courier New', 'courier new, courier, monospace'],
+            ['Georgia', 'georgia, serif'], ['Lucida Sans Unicode', 'lucida sans unicode, lucida grande, sans-serif'], ['Tahoma', 'tahoma, geneva, sans-serif'], ['Times New Roman', 'times new roman, times, serif'], ['Trebuchet MS', 'trebuchet ms, helvetica, sans-serif'], ['Verdana', 'verdana, geneva, sans-serif']];
+        var _fontSize = [[editor.lang.CKCss.value, ' '], ['xx-small', 'xx-small'], ['x-small', 'x-small'], ['small', 'small'], ['medium', 'medium'], ['large', 'large'], ['x-large', 'x-large'], ['xx-large', 'xx-large'], ['smaller', 'smaller'], ['larger', 'larger'], [editor.lang.CKCss.notSet, '']];
+        var _um = [['px', 'px'], ['pt', 'pt'], ['in', 'in'], ['cm', 'cm'], ['mm', 'mm'], ['pc', 'pc'], ['em', 'em'], ['ex', 'ex'], ['%', '%']];
+        var _fontWeight = [[editor.lang.CKCss.notSet, ''], ['normal', 'normal'], ['bold', 'bold'], ['lighter', 'lighter'], ['bolder', 'bolder'], ['100', '100'], ['200', '200'], ['300', '300'], ['400', '400'], ['500', '500'], ['600', '600'], ['700', '700'], ['800', '800'], ['900', '900']]
+        var _fontStyle = [[editor.lang.CKCss.notSet, ''], ['italic', 'italic'], ['normal', 'normal'], ['oblique', 'oblique']]
+        var _fontVariant = [[editor.lang.CKCss.notSet, ''], ['normal', 'normal'], ['small-caps', 'small-caps']]
+        var _textTransform = [[editor.lang.CKCss.notSet, ''], ['capitalize', 'capitalize'], ['lowercase', 'lowercase'], ['none', 'none'], ['uppercase', 'uppercase']]
+        var _textDecoration = [['underline', 'underline'], ['overline', 'overline'], ['line-through', 'line-through'], ['blink', 'blink'], ['none', 'none']]
+        var _common2 = [[editor.lang.CKCss.value, ' '], [editor.lang.CKCss.notSet, '']];
+        var _common3 = [[editor.lang.CKCss.value, ' '], ['auto', 'auto'], [editor.lang.CKCss.notSet, '']];
+        var _common = [[editor.lang.CKCss.value, ' '], ['normal', 'normal'], [editor.lang.CKCss.notSet, '']];
+        var _verticalAlign = [[editor.lang.CKCss.value, ' '], ['baseline', 'baseline'], ['bottom', 'bottom'], ['middle', 'middle'], ['sub', 'sub'], ['super', 'super'], ['text-bottom', 'text-bottom'], ['text-top', 'text-top'], ['top', 'top'], [editor.lang.CKCss.notSet, '']];
+        var _textAlign = [['center', 'center'], ['justify', 'justify'], ['left', 'left'], ['right', 'right'], [editor.lang.CKCss.notSet, '']];
+        var _whiteSpace = [['normal', 'normal'], ['nowrap', 'nowrap'], ['pre', 'pre'], ['pre-line', 'pre-line'], ['pre-wrap', 'pre-wrap'], [editor.lang.CKCss.notSet, '']];
+        var _backgroundRepeat = [[editor.lang.CKCss.notSet, ''], ['no-repeat', 'no-repeat'], ['repeat', 'repeat'], ['repeat-x', 'repeat-x'], ['repeat-y', 'repeat-y']];
+        var _backgroundAttachment = [[editor.lang.CKCss.notSet, ''], ['fixed', 'fixed'], ['scroll', 'scroll']];
+        var _backgroundPositionX = [[editor.lang.CKCss.value, ' '], ['center', 'center'], ['left', 'left'], ['right', 'right'], [editor.lang.CKCss.notSet, '']];
+        var _backgroundPositionY = [[editor.lang.CKCss.value, ' '], ['bottom', 'bottom'], ['center', 'center'], ['top', 'top'], [editor.lang.CKCss.notSet, '']];
+        var _borderStyle = [[editor.lang.CKCss.notSet, ''], ['dashed', 'dashed'], ['dotted', 'dotted'], ['double', 'double'], ['groove', 'groove'], ['hidden', 'hidden'], ['inset', 'inset'], ['none', 'none'], ['outset', 'outset'], ['ridge', 'ridge'], ['solid', 'solid']];
+        var _borderWidth = [[editor.lang.CKCss.value, ' '], ['thin', 'thin'], ['medium', 'medium'], ['thick', 'thick'], [editor.lang.CKCss.notSet, '']];
+        var _position = [[editor.lang.CKCss.notSet, ''], ['absolute', 'absolute'], ['fixed', 'fixed'], ['relative', 'relative'], ['static', 'static']];
+        var _visibility = [[editor.lang.CKCss.notSet, ''], ['collapse', 'collapse'], ['hidden', 'hidden'], ['visible', 'visible']];
+        var _overflow = [[editor.lang.CKCss.notSet, ''], ['auto', 'auto'], ['hidden', 'hidden'], ['scroll', 'scroll'], ['visible', 'visible']];
+        var _display = [[editor.lang.CKCss.notSet, ''], ['block', 'block'], ['inline', 'inline'], ['inline-block', 'inline-block'], ['inline-table', 'inline-table'], ['list-item', 'list-item'], ['none', 'none'], ['run-in', 'run-in'], ['table', 'table'], ['table-caption', 'table-caption'], ['table-cell', 'table-cell'], ['table-column', 'table-column'], ['table-column-group', 'table-column-group'], ['table-footer-group', 'table-footer-group'], ['table-header-group', 'table-header-group'], ['table-row', 'table-row'], ['table-row-group', 'table-row-group']];
+        var _float = [[editor.lang.CKCss.notSet, ''], ['left', 'left'], ['none', 'none'], ['right', 'right']];
+        var _clear = [[editor.lang.CKCss.notSet, ''], ['both', 'both'], ['left', 'left'], ['none', 'none'], ['right', 'right']];
+        var _cursor = [[editor.lang.CKCss.notSet, ''], ['auto', 'auto'], ['crosshair', 'crosshair'], ['default', 'default'], ['e-resize', 'e-resize'], ['help', 'help'], ['move', 'move'], ['n-resize', 'n-resize'], ['ne-resize', 'ne-resize'], ['nw-resize', 'nw-resize'], ['pointer', 'pointer'], ['progress', 'progress'], ['s-resize', 's-resize'], ['se-resize', 'se-resize'], ['sw-resize', 'sw-resize'], ['text', 'text'], ['w-resize', 'w-resize'], ['wait', 'wait']];
+        var _listStyleType = [[editor.lang.CKCss.notSet, ''], ['disc', 'disc'], ['circle', 'circle'], ['square', 'square'], ['decimal', 'decimal'], ['decimal-leading-zero', 'decimal-leading-zero'], ['lower-roman', 'lower-roman'], ['upper-roman', 'upper-roman'], ['lower-greek', 'lower-greek'], ['lower-latin', 'lower-latin'], ['upper-latin', 'upper-latin'], ['armenian', 'armenian'], ['georgian', 'georgian'], ['lower-alpha', 'lower-alpha'], ['upper-alpha', 'upper-alpha'], ['none', 'none']];
+        var _listStylePosition = [[editor.lang.CKCss.notSet, ''], ['inside', 'inside'], ['outside', 'outside']];
+        var _tableLayout = [[editor.lang.CKCss.notSet, ''], ['auto', 'auto'], ['fixed', 'fixed']];
+        var _borderCollapse = [[editor.lang.CKCss.notSet, ''], ['collapse', 'collapse'], ['separate', 'separate']];
+        var _emptyCells = [[editor.lang.CKCss.notSet, ''], ['hide', 'hide'], ['show', 'show']];
+        var _captionSide = [[editor.lang.CKCss.notSet, ''], ['bottom', 'bottom'], ['top', 'top']];
+        function getDialogValue(dialogName, callback) {
+            var onOk = function () {
+                releaseHandlers(this);
+                callback(this, this._.parentDialog);
+                this._.parentDialog.changeFocus(true);
+            };
+            var onCancel = function () {
+                releaseHandlers(this);
+                this._.parentDialog.changeFocus();
+            };
+            var releaseHandlers = function (dialog) {
+                dialog.removeListener('ok', onOk);
+                dialog.removeListener('cancel', onCancel);
+            };
+            var bindToDialog = function (dialog) {
+                dialog.on('ok', onOk);
+                dialog.on('cancel', onCancel);
+            };
+            editor.execCommand(dialogName);
+            if (editor._.storedDialogs.colordialog)
+                bindToDialog(editor._.storedDialogs.colordialog);
+            else {
+                CKEDITOR.on('dialogDefinition', function (e) {
+                    if (e.data.name != dialogName)
+                        return;
+
+                    var definition = e.data.definition;
+
+                    e.removeListener();
+                    definition.onLoad = CKEDITOR.tools.override(definition.onLoad, function (orginal) {
+                        return function () {
+                            bindToDialog(this);
+                            definition.onLoad = orginal;
+                            if (typeof orginal == 'function')
+                                orginal.call(this);
+                        };
+                    });
+                });
+            }
+        }
+        
+        return {
+            title: 'CKCss Editor',
+            minWidth: 550,
+            minHeight: 400,
+            buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
+            onOk: function () {
+                var elem = null; //get the current selected element
+                var t = this;
+                if ( !this._.selectedElement )
+                {
+                    if (!this._.selectedElements) {
+                        var prwH = this.getContentElement('page1', 'stylePreview');
+                        var cssText = 	prwH.getValue();
+
+                        // Apply style.
+                        var style = new CKEDITOR.style( { element : 'span', attributes : {style : cssText } } );
+                        style.type = CKEDITOR.STYLE_INLINE;		// need to override... dunno why.
+                        style.apply( editor.document );
+                    } else {
+                        var elem;
+                        this._.selectedElements.forEach(function(elem) {
+                            var prwH = t.getContentElement('page1', 'stylePreview');
+                            var cssText = 	prwH.getValue();
+                            if(!cssText && !elem.hasAttribute('class') && !elem.hasAttribute('id') && elem.is('span'))
+                                elem.setAttribute('id','data-remove-span'); //mark to remove
+                            elem.$.style.cssText = prwH.getValue();
+                        });
+                        delete this._.selectedElements;
+                    }
+                }
+                else
+                {
+                    elem = this._.selectedElement;
+                    var prwH = this.getContentElement('page1', 'stylePreview');
+                    var cssText = 	prwH.getValue();
+                    if(!cssText && !elem.hasAttribute('class') && !elem.hasAttribute('id') && elem.is('span'))
+                        elem.setAttribute('id','data-remove-span'); //mark to remove
+                    elem.$.style.cssText = prwH.getValue();
+
+                    delete this._.selectedElement;
+                }
+            },
+            onLoad: onLoad(),
+            onShow: function () {
+                var elem = null,
+                    elems = null,
+                    selection = this.getParentEditor().getSelection();
+
+                if ( selection.getType() == CKEDITOR.SELECTION_ELEMENT ) {
+                    elem = selection.getSelectedElement();
+                } else {
+                    var range = selection.getRanges( true )[ 0 ];
+                    range.shrink( CKEDITOR.SHRINK_ELEMENT );
+
+                    var root = range.getCommonAncestor();
+                    if(root &&  (root.type == CKEDITOR.NODE_ELEMENT && root.is('div') || CKEDITOR.NODE_ELEMENT && root.is('td')))
+                        elem = root;
+
+                    if(elem == null){
+                        range.shrink( CKEDITOR.SHRINK_TEXT );
+                        root = range.getCommonAncestor();
+                        if(root && root.type == CKEDITOR.NODE_ELEMENT && root.is('p'))
+                            elem = root;
+                        if(elem == null)
+                            elem = root.getAscendant( 'a', true );
+                        if(elem == null)
+                            elem = root.getAscendant( 'span', true );
+
+                    }
+                    if (elem == null) {
+                        var iterator = range.createIterator(),
+                            enterMode = editor.config.enterMode;
+                        iterator.enforceRealBlocks = true;
+                        iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR;
+                        var block;
+                        elems = [];
+                        while ( ( block = iterator.getNextParagraph( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ) ) ) {
+                            elems.push(block);
+                        }
+                    }
+
+                }
+
+                if (elem != null) {
+                    //var prw = CKEDITOR.document.getById(imagePreviewBoxId);
+                    //var prwH = this.getContentElement('page1', 'stylePreview');
+                    //prwH.setValue(elem.$.style.cssText);
+                    //prw.$.style.cssText = elem.$.style.cssText;
+                    this._.selectedElement = elem;
+                    distPreview(this, elem.$.style.cssText);
+                    this.setupContent(elem.$.style);
+                } else if (elems != null) {
+                    this._.selectedElements = elems;
+                    distPreview(this, elems[0].$.style.cssText);
+                    this.setupContent(elems[0].$.style);
+                }
+            },
+            onHide: onHide(),
+            onCancel: onCancel(),
+            resizable: 'none' /* none,width,height or both  */,
+            contents: [{
+                id: 'page1',
+                label: editor.lang.CKCss.tabPage1,
+                accessKey: 'P',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            id: 'fontFamily',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['100px'],
+                            label: 'font-family',
+                            'default': '',
+                            items: _fontName,
+                            onChange: function (event) {
+                                selectOnChange(this, event);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'hbox',
+                            style: 'width:305px;float:left',
+                            widths: ['200px', '50px'],
+                            children: [{
+                                id: 'fontSize',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['100px'],
+                                label: 'font-size',
+                                'default': '',
+                                items: _fontSize,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'fontSizeUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:50px',
+                                label: '',
+                                'default': 'px',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page1', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            id: 'fontWeight',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['100px'],
+                            label: 'font-weight',
+                            'default': '',
+                            items: _fontWeight,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            id: 'fontStyle',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['100px'],
+                            label: 'font-style',
+                            'default': '',
+                            items: _fontStyle,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            id: 'fontVariant',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['100px'],
+                            label: 'font-variant',
+                            'default': '',
+                            items: _fontVariant,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '50px'],
+                            children:
+                                [
+                                    {
+                                        type: 'text',
+                                        id: 'color',
+                                        label: 'color',
+                                        labelLayout: 'horizontal',
+                                        widths: ['100px'],
+                                        'default': '',
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        },
+                                        onChange: function () {
+                                            preview(this);
+                                        }
+                                    },
+                                    {
+                                        type: 'button',
+                                        id: 'colorChoose',
+                                        label: editor.lang.CKCss.choose,
+                                        style: 'margin-left: 10px',
+                                        onClick: function () {
+                                            var self = this;
+                                            getDialogValue('colordialog', function (colorDialog) {
+                                                var destElem = self.getDialog().getContentElement('page1', 'color');
+                                                destElem.setValue(
+                                                    colorDialog.getContentElement('picker', 'selectedColor').getValue()
+                                                );
+                                                preview(destElem);
+                                            });
+                                        }
+                                    }
+                                ]
+                        }, {
+                            id: 'textTransform',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['100px'],
+                            label: 'text-transform',
+                            'default': '',
+                            items: _textTransform,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            id: 'textDecoration',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['100px'],
+                            label: 'text-decoration',
+                            multiple: true,
+                            size: 5,
+                            items: _textDecoration,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.CKCss.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div  id="' + imagePreviewBoxId + '">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+            }, {
+                id: 'page2',
+                label: editor.lang.CKCss.tabPage2,
+                accessKey: 'B',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            type: 'hbox',
+                            style: 'width:305px;float:left',
+                            widths: ['200px', '50px'],
+                            children: [{
+                                id: 'lineHeight',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['100px'],
+                                label: 'line-height',
+                                'default': '',
+                                items: _common,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'lineHeightUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:50px',
+                                label: '',
+                                'default': 'px',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page2', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            type: 'hbox',
+                            style: 'width:305px;float:left',
+                            widths: ['200px', '50px'],
+                            children: [{
+                                id: 'verticalAlign',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['100px'],
+                                label: 'vertical-align',
+                                'default': '',
+                                items: _verticalAlign,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'verticalAlignUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:50px',
+                                label: '',
+                                'default': '%',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page2', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            id: 'textAlign',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['100px'],
+                            label: 'text-align',
+                            'default': '',
+                            items: _textAlign,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'hbox',
+                            style: 'width:305px;float:left',
+                            widths: ['200px', '50px'],
+                            children: [{
+                                id: 'textIndent',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['100px'],
+                                label: 'text-indent',
+                                'default': '',
+                                items: _common2,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'textIndentUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:50px',
+                                label: '',
+                                'default': 'px',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page2', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            id: 'whiteSpace',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['100px'],
+                            label: 'white-space',
+                            'default': '',
+                            items: _whiteSpace,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'hbox',
+                            style: 'width:305px;float:left',
+                            widths: ['200px', '50px'],
+                            children: [{
+                                id: 'wordSpacing',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['100px'],
+                                label: 'word-spacing',
+                                'default': '',
+                                items: _common,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'wordSpacingUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:50px',
+                                label: '',
+                                'default': 'px',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page2', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            type: 'hbox',
+                            style: 'width:305px;float:left',
+                            widths: ['200px', '50px'],
+                            children: [{
+                                id: 'letterSpacing',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['100px'],
+                                label: 'letter-spacing',
+                                'default': '',
+                                items: _common2,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'letterSpacingUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:50px',
+                                label: '',
+                                'default': 'px',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page2', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.CKCss.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div  id="' + imagePreviewBoxId + '2">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+            }, {
+                id: 'page3',
+                label: editor.lang.CKCss.tabPage3,
+                accessKey: 'S',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '50px'],
+                            children:
+                                [
+                                    {
+                                        type: 'text',
+                                        id: 'backgroundColor',
+                                        label: 'background-color',
+                                        labelLayout: 'horizontal',
+                                        widths: ['150px'],
+                                        'default': '',
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        },
+                                        onChange: function () {
+                                            preview(this);
+                                        }
+                                    },
+                                    {
+                                        type: 'button',
+                                        id: 'colorChoose',
+                                        label: editor.lang.CKCss.choose,
+                                        style: 'margin-left: 10px',
+                                        onClick: function () {
+                                            var self = this;
+                                            getDialogValue('colordialog', function (colorDialog) {
+                                                var destElem = self.getDialog().getContentElement('page3', 'backgroundColor');
+                                                destElem.setValue(
+                                                    colorDialog.getContentElement('picker', 'selectedColor').getValue()
+                                                );
+                                                preview(destElem);
+                                            });
+                                        }
+                                    }
+                                ]
+                        },
+                            {
+                                type: 'vbox',
+                                padding: 0,
+                                children:
+                                    [
+                                        {
+                                            type: 'hbox',
+                                            widths: ['250px', '110px'],
+                                            align: 'right',
+                                            children:
+                                                [
+                                                    {
+                                                        id: 'backgroundImage',
+                                                        type: 'text',
+                                                        widths: ['150px'],
+                                                        labelLayout: 'horizontal',
+                                                        label: 'background-image',
+                                                        onChange: function () {
+                                                            //this.setValue('url(\'' + this.getValue() + '\')');
+                                                            preview(this);
+                                                        },
+                                                        setup: function (_style) {
+                                                            elemSetup(this, _style);
+                                                        }
+                                                    },
+                                                    {
+                                                        type: 'button',
+                                                        id: 'browse',
+                                                        // v-align with the 'txtUrl' field.
+                                                        // TODO: We need something better than a fixed size here.
+                                                        align: 'center',
+                                                        label: editor.lang.common.browseServer,
+                                                        hidden: true,
+                                                        filebrowser :
+                                                        {
+                                                            action : 'Browse',
+                                                            target:  'page3:backgroundImage',
+                                                            url: editor.config.filebrowserImageBrowseLinkUrl,
+                                                            params : //optional
+                                                            {
+                                                                type : 'Images',
+                                                                currentFolder : '/'
+                                                            }
+                                                        }
+                                                    }
+                                                ]
+                                        }
+                                    ]
+                            }, {
+                            id: 'backgroundRepeat',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['150px'],
+                            label: 'background-repeat',
+                            'default': '',
+                            items: _backgroundRepeat,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            id: 'backgroundAttachment',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['150px'],
+                            label: 'background-attachment',
+                            'default': '',
+                            items: _backgroundAttachment,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'hbox',
+                            style: 'width:355px;float:left',
+                            widths: ['200px', '50px'],
+                            children: [{
+                                id: 'backgroundPositionX',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['150px'],
+                                label: 'background-position-x',
+                                'default': '',
+                                items: _backgroundPositionX,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'backgroundPositionXUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:50px',
+                                label: '',
+                                'default': 'px',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page3', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            type: 'hbox',
+                            style: 'width:355px;float:left',
+                            widths: ['200px', '50px'],
+                            children: [{
+                                id: 'backgroundPositionY',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['150px'],
+                                label: 'background-position-y',
+                                'default': '',
+                                items: _backgroundPositionY,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'backgroundPositionYUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:50px',
+                                label: '',
+                                'default': 'px',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page3', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.CKCss.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div  id="' + imagePreviewBoxId + '3">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+            }, {
+                id: 'page4',
+                label: editor.lang.CKCss.tabPage4,
+                accessKey: 'S',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '122px', '182px', '182px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    html: '&nbsp;'
+                                }, {
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'border-style'
+                                }, {
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'border-width'
+                                }, {
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'border-color'
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '122px', '182px', '182px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    html: '&nbsp;'
+                                }, {
+                                    type: 'checkbox',
+                                    id: 'borderStyleAll',
+                                    label: editor.lang.CKCss.sameForAll,
+                                    style: 'text-align:center',
+                                    labelLayout: 'right',
+                                    setup: function () {
+                                        this.setValue(true);
+                                    },
+                                    onChange: function () {
+                                        setAll(this, 'border', 'Style', 'page4');
+
+                                    }
+                                }, {
+                                    type: 'checkbox',
+                                    id: 'borderWidthAll',
+                                    label: editor.lang.CKCss.sameForAll,
+                                    style: 'text-align:center',
+                                    labelLayout: 'right',
+                                    checked: true,
+                                    setup: function () {
+                                        this.setValue(true);
+                                    },
+                                    onChange: function () {
+                                        setAll(this, 'border', 'Width', 'page4');
+                                        setAll(this, 'border', 'WidthUm', 'page4');
+                                    }
+                                }, {
+                                    type: 'checkbox',
+                                    id: 'borderColorAll',
+                                    label: editor.lang.CKCss.sameForAll,
+                                    labelLayout: 'right',
+                                    style: 'text-align:center',
+                                    checked: true,
+                                    setup: function () {
+                                        this.setValue(true);
+                                    },
+                                    onChange: function () {
+                                        setAll(this, 'border', 'Color', 'page4')
+                                    }
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['182px', '182px', '182px'],
+                            children:
+                                [{
+                                    id: 'borderTopStyle',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['60px'],
+                                    label: 'Top:',
+                                    'default': '',
+                                    items: _borderStyle,
+                                    onChange: function () {
+                                        preview(this);
+                                        var dialog = this.getDialog();
+                                        var elem = dialog.getContentElement('page4', 'borderStyleAll');
+                                        if (elem.getValue()) elem.setValue(true);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:150px;float:left',
+                                    widths: ['80px', '45px'],
+                                    children: [{
+                                        id: 'borderTopWidth',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['0px'],
+                                        label: '',
+                                        'default': '',
+                                        items: _borderWidth,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                            selectOnKeyDownAll(this, 'border', 'Width', 'page4', event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                            selectOnKeyUpAll(this, 'border', 'Width', 'page4', event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            var rtn = selectOnKeyPress(this, event);
+                                            selectOnKeyPressAll(this, 'border', 'Width', 'page4', event);
+                                            return rtn;
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                            var dialog = this.getDialog();
+                                            var elem = dialog.getContentElement('page4', 'borderWidthAll');
+                                            if (elem.getValue()) elem.setValue(true);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'borderTopWidthUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var elem = dialog.getContentElement('page4', 'borderWidthAll');
+                                            if (elem.getValue()) elem.setValue(true);
+                                            var relElement = dialog.getContentElement('page4', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }, {
+                                    type: 'hbox',
+                                    padding: 0,
+                                    widths: ['60px', '50px'],
+                                    children:
+                                        [
+                                            {
+                                                type: 'text',
+                                                id: 'borderTopColor',
+                                                label: '',
+                                                labelLayout: '',
+                                                widths: ['0px'],
+                                                'default': '',
+                                                setup: function (_style) {
+                                                    elemSetup(this, _style);
+                                                },
+                                                onChange: function () {
+                                                    preview(this);
+                                                    var dialog = this.getDialog();
+                                                    var elem = dialog.getContentElement('page4', 'borderColorAll');
+                                                    if (elem.getValue()) elem.setValue(true);
+                                                }
+                                            },
+                                            {
+                                                type: 'button',
+                                                id: 'colorChoose',
+                                                label: editor.lang.CKCss.choose,
+                                                style: 'margin-left: 10px',
+                                                onClick: function () {
+                                                    var self = this;
+                                                    getDialogValue('colordialog', function (colorDialog) {
+                                                        var destElem = self.getDialog().getContentElement('page4', 'borderTopColor');
+                                                        destElem.setValue(
+                                                            colorDialog.getContentElement('picker', 'selectedColor').getValue()
+                                                        );
+                                                        preview(destElem);
+                                                        var dialog = destElem.getDialog();
+                                                        var elem = dialog.getContentElement('page4', 'borderColorAll');
+                                                        if (elem.getValue()) elem.setValue(true);
+                                                    });
+                                                }
+                                            }
+                                        ]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['182px', '182px', '182px'],
+                            children:
+                                [{
+                                    id: 'borderRightStyle',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['60px'],
+                                    label: 'Right:',
+                                    'default': '',
+                                    items: _borderStyle,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:150px;float:left',
+                                    widths: ['80px', '45px'],
+                                    children: [{
+                                        id: 'borderRightWidth',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['0px'],
+                                        label: '',
+                                        'default': '',
+                                        items: _borderWidth,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'borderRightWidthUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page4', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }, {
+                                    type: 'hbox',
+                                    padding: 0,
+                                    widths: ['60px', '50px'],
+                                    children:
+                                        [
+                                            {
+                                                type: 'text',
+                                                id: 'borderRightColor',
+                                                label: '',
+                                                labelLayout: '',
+                                                widths: ['0px'],
+                                                'default': '',
+                                                setup: function (_style) {
+                                                    elemSetup(this, _style);
+                                                },
+                                                onChange: function () {
+                                                    preview(this);
+                                                }
+                                            },
+                                            {
+                                                type: 'button',
+                                                id: 'colorChoose',
+                                                label: editor.lang.CKCss.choose,
+                                                style: 'margin-left: 10px',
+                                                onClick: function () {
+                                                    var self = this;
+                                                    getDialogValue('colordialog', function (colorDialog) {
+                                                        var destElem = self.getDialog().getContentElement('page4', 'borderRightColor');
+                                                        destElem.setValue(
+                                                            colorDialog.getContentElement('picker', 'selectedColor').getValue()
+                                                        );
+                                                        preview(destElem);
+                                                    });
+                                                }
+                                            }
+                                        ]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['182px', '182px', '182px'],
+                            children:
+                                [{
+                                    id: 'borderBottomStyle',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['60px'],
+                                    label: 'Bottom:',
+                                    'default': '',
+                                    items: _borderStyle,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:150px;float:left',
+                                    widths: ['80px', '45px'],
+                                    children: [{
+                                        id: 'borderBottomWidth',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['0px'],
+                                        label: '',
+                                        'default': '',
+                                        items: _borderWidth,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'borderBottomWidthUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page4', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }, {
+                                    type: 'hbox',
+                                    padding: 0,
+                                    widths: ['60px', '50px'],
+                                    children:
+                                        [
+                                            {
+                                                type: 'text',
+                                                id: 'borderBottomColor',
+                                                label: '',
+                                                labelLayout: '',
+                                                widths: ['0px'],
+                                                'default': '',
+                                                setup: function (_style) {
+                                                    elemSetup(this, _style);
+                                                },
+                                                onChange: function () {
+                                                    preview(this);
+                                                }
+                                            },
+                                            {
+                                                type: 'button',
+                                                id: 'colorChoose',
+                                                label: editor.lang.CKCss.choose,
+                                                style: 'margin-left: 10px',
+                                                onClick: function () {
+                                                    var self = this;
+                                                    getDialogValue('colordialog', function (colorDialog) {
+                                                        var destElem = self.getDialog().getContentElement('page4', 'borderBottomColor');
+                                                        destElem.setValue(
+                                                            colorDialog.getContentElement('picker', 'selectedColor').getValue()
+                                                        );
+                                                        preview(destElem);
+                                                    });
+                                                }
+                                            }
+                                        ]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['182px', '182px', '182px'],
+                            children:
+                                [{
+                                    id: 'borderLeftStyle',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['60px'],
+                                    label: 'Left:',
+                                    'default': '',
+                                    items: _borderStyle,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:150px;float:left',
+                                    widths: ['80px', '45px'],
+                                    children: [{
+                                        id: 'borderLeftWidth',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['0px'],
+                                        label: '',
+                                        'default': '',
+                                        items: _borderWidth,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'borderLeftWidthUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page4', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }, {
+                                    type: 'hbox',
+                                    padding: 0,
+                                    widths: ['60px', '50px'],
+                                    children:
+                                        [
+                                            {
+                                                type: 'text',
+                                                id: 'borderLeftColor',
+                                                label: '',
+                                                labelLayout: '',
+                                                widths: ['0px'],
+                                                'default': '',
+                                                setup: function (_style) {
+                                                    elemSetup(this, _style);
+                                                },
+                                                onChange: function () {
+                                                    preview(this);
+                                                }
+                                            },
+                                            {
+                                                type: 'button',
+                                                id: 'colorChoose',
+                                                label: editor.lang.CKCss.choose,
+                                                style: 'margin-left: 10px',
+                                                onClick: function () {
+                                                    var self = this;
+                                                    getDialogValue('colordialog', function (colorDialog) {
+                                                        var destElem = self.getDialog().getContentElement('page4', 'borderLeftColor');
+                                                        destElem.setValue(
+                                                            colorDialog.getContentElement('picker', 'selectedColor').getValue()
+                                                        );
+                                                        preview(destElem);
+                                                    });
+                                                }
+                                            }
+                                        ]
+                                }]
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.CKCss.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div id="' + imagePreviewBoxId + '4">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+
+            }, {
+                id: 'page5',
+                label: editor.lang.CKCss.tabPage5,
+                accessKey: 'S',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '213px', '60px', '213px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'padding'
+                                }, {
+                                    type: 'checkbox',
+                                    id: 'paddingAll',
+                                    label: editor.lang.CKCss.sameForAll,
+                                    style: 'text-align:center',
+                                    labelLayout: 'Right:',
+                                    setup: function () {
+                                        this.setValue(true);
+                                    },
+                                    onChange: function () {
+                                        setAll(this, 'padding', '', 'page5')
+                                        setAll(this, 'padding', 'Um', 'page5');
+                                    }
+                                }, {
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'margin'
+                                }, {
+                                    type: 'checkbox',
+                                    id: 'marginAll',
+                                    label: editor.lang.CKCss.sameForAll,
+                                    style: 'text-align:center',
+                                    labelLayout: 'right',
+                                    checked: true,
+                                    setup: function () {
+                                        this.setValue(true);
+                                    },
+                                    onChange: function () {
+                                        setAll(this, 'margin', '', 'page5')
+                                        setAll(this, 'margin', 'Um', 'page5');
+                                    }
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '213px', '60px', '213px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'Top:'
+                                },
+
+                                    {
+                                        type: 'hbox',
+                                        style: 'width:150px;float:left',
+                                        widths: ['80px', '45px'],
+                                        children: [{
+                                            id: 'paddingTop',
+                                            type: 'select',
+                                            labelLayout: 'horizontal',
+                                            widths: ['0px'],
+                                            label: '',
+                                            'default': '',
+                                            items: _common2,
+                                            onKeyDown: function (event) {
+                                                selectOnKeyDown(this, event);
+                                                selectOnKeyDownAll(this, 'padding', '', 'page5', event);
+                                            },
+                                            onKeyUp: function (event) {
+                                                selectOnKeyUp(this, event);
+                                                selectOnKeyUpAll(this, 'padding', '', 'page5', event);
+                                            },
+                                            onKeyPress: function (event) {
+                                                var rtn = selectOnKeyPress(this, event);
+                                                selectOnKeyPressAll(this, 'padding', '', 'page5', event);
+                                                return rtn;
+                                            },
+                                            onChange: function (event) {
+                                                gestUm(this);
+                                                selectOnChange(this, event);
+                                                var dialog = this.getDialog();
+                                                var elem = dialog.getContentElement('page5', 'paddingAll');
+                                                if (elem.getValue()) elem.setValue(true);
+                                            },
+                                            setup: function (_style) {
+                                                elemSetup(this, _style);
+                                            }
+                                        }, {
+                                            id: 'paddingTopUm',
+                                            type: 'select',
+                                            labelLayout: 'horizontal',
+                                            style: 'width:45px',
+                                            label: '',
+                                            'default': 'px',
+                                            items: _um,
+                                            onChange: function () {
+                                                var dialog = this.getDialog();
+                                                var elem = dialog.getContentElement('page5', 'paddingAll');
+                                                if (elem.getValue()) elem.setValue(true);
+                                                var relElement = dialog.getContentElement('page5', this.id.substring(0, this.id.length - 2));
+                                                preview(relElement);
+                                            }
+                                        }]
+                                    },
+                                    {
+                                        type: 'html',
+                                        style: 'text-align:center',
+                                        html: 'Top:'
+                                    }, {
+                                    type: 'hbox',
+                                    style: 'width:150px;float:left',
+                                    widths: ['80px', '45px'],
+                                    children: [{
+                                        id: 'marginTop',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['0px'],
+                                        label: '',
+                                        'default': '',
+                                        items: _common2,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                            selectOnKeyDownAll(this, 'margin', '', 'page5', event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                            selectOnKeyUpAll(this, 'margin', '', 'page5', event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            var rtn = selectOnKeyPress(this, event);
+                                            selectOnKeyPressAll(this, 'margin', '', 'page5', event);
+                                            return rtn;
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                            var dialog = this.getDialog();
+                                            var elem = dialog.getContentElement('page5', 'marginAll');
+                                            if (elem.getValue()) elem.setValue(true);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'marginTopUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var elem = dialog.getContentElement('page5', 'marginAll');
+                                            if (elem.getValue()) elem.setValue(true);
+                                            var relElement = dialog.getContentElement('page5', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '213px', '60px', '213px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'right'
+                                },
+
+                                    {
+                                        type: 'hbox',
+                                        style: 'width:150px;float:left',
+                                        widths: ['80px', '45px'],
+                                        children: [{
+                                            id: 'paddingRight',
+                                            type: 'select',
+                                            labelLayout: 'horizontal',
+                                            widths: ['0px'],
+                                            label: '',
+                                            'default': '',
+                                            items: _common2,
+                                            onKeyDown: function (event) {
+                                                selectOnKeyDown(this, event);
+                                            },
+                                            onKeyUp: function (event) {
+                                                selectOnKeyUp(this, event);
+                                            },
+                                            onKeyPress: function (event) {
+                                                return selectOnKeyPress(this, event);
+                                            },
+                                            onChange: function (event) {
+                                                gestUm(this);
+                                                selectOnChange(this, event);
+                                            },
+                                            setup: function (_style) {
+                                                elemSetup(this, _style);
+                                            }
+                                        }, {
+                                            id: 'paddingRightUm',
+                                            type: 'select',
+                                            labelLayout: 'horizontal',
+                                            style: 'width:45px',
+                                            label: '',
+                                            'default': 'px',
+                                            items: _um,
+                                            onChange: function () {
+                                                var dialog = this.getDialog();
+                                                var relElement = dialog.getContentElement('page5', this.id.substring(0, this.id.length - 2));
+                                                preview(relElement);
+                                            }
+                                        }]
+                                    },
+                                    {
+                                        type: 'html',
+                                        style: 'text-align:center',
+                                        html: 'right'
+                                    }, {
+                                    type: 'hbox',
+                                    style: 'width:150px;float:left',
+                                    widths: ['80px', '45px'],
+                                    children: [{
+                                        id: 'marginRight',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['0px'],
+                                        label: '',
+                                        'default': '',
+                                        items: _common2,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'marginRightUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page5', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '213px', '60px', '213px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'Bottom:'
+                                },
+
+                                    {
+                                        type: 'hbox',
+                                        style: 'width:150px;float:left',
+                                        widths: ['80px', '45px'],
+                                        children: [{
+                                            id: 'paddingBottom',
+                                            type: 'select',
+                                            labelLayout: 'horizontal',
+                                            widths: ['0px'],
+                                            label: '',
+                                            'default': '',
+                                            items: _common2,
+                                            onKeyDown: function (event) {
+                                                selectOnKeyDown(this, event);
+                                            },
+                                            onKeyUp: function (event) {
+                                                selectOnKeyUp(this, event);
+                                            },
+                                            onKeyPress: function (event) {
+                                                return selectOnKeyPress(this, event);
+                                            },
+                                            onChange: function (event) {
+                                                gestUm(this);
+                                                selectOnChange(this, event);
+                                            },
+                                            setup: function (_style) {
+                                                elemSetup(this, _style);
+                                            }
+                                        }, {
+                                            id: 'paddingBottomUm',
+                                            type: 'select',
+                                            labelLayout: 'horizontal',
+                                            style: 'width:45px',
+                                            label: '',
+                                            'default': 'px',
+                                            items: _um,
+                                            onChange: function () {
+                                                var dialog = this.getDialog();
+                                                var relElement = dialog.getContentElement('page5', this.id.substring(0, this.id.length - 2));
+                                                preview(relElement);
+                                            }
+                                        }]
+                                    },
+                                    {
+                                        type: 'html',
+                                        style: 'text-align:center',
+                                        html: 'Bottom:'
+                                    }, {
+                                    type: 'hbox',
+                                    style: 'width:150px;float:left',
+                                    widths: ['80px', '45px'],
+                                    children: [{
+                                        id: 'marginBottom',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['0px'],
+                                        label: '',
+                                        'default': '',
+                                        items: _common2,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'marginBottomUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page5', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['60px', '213px', '60px', '213px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    style: 'text-align:center',
+                                    html: 'Left:'
+                                },
+
+                                    {
+                                        type: 'hbox',
+                                        style: 'width:150px;float:left',
+                                        widths: ['80px', '45px'],
+                                        children: [{
+                                            id: 'paddingLeft',
+                                            type: 'select',
+                                            labelLayout: 'horizontal',
+                                            widths: ['0px'],
+                                            label: '',
+                                            'default': '',
+                                            items: _common2,
+                                            onKeyDown: function (event) {
+                                                selectOnKeyDown(this, event);
+                                            },
+                                            onKeyUp: function (event) {
+                                                selectOnKeyUp(this, event);
+                                            },
+                                            onKeyPress: function (event) {
+                                                return selectOnKeyPress(this, event);
+                                            },
+                                            onChange: function (event) {
+                                                gestUm(this);
+                                                selectOnChange(this, event);
+                                            },
+                                            setup: function (_style) {
+                                                elemSetup(this, _style);
+                                            }
+                                        }, {
+                                            id: 'paddingLeftUm',
+                                            type: 'select',
+                                            labelLayout: 'horizontal',
+                                            style: 'width:45px',
+                                            label: '',
+                                            'default': 'px',
+                                            items: _um,
+                                            onChange: function () {
+                                                var dialog = this.getDialog();
+                                                var relElement = dialog.getContentElement('page5', this.id.substring(0, this.id.length - 2));
+                                                preview(relElement);
+                                            }
+                                        }]
+                                    },
+                                    {
+                                        type: 'html',
+                                        style: 'text-align:center',
+                                        html: 'Left:'
+                                    }, {
+                                    type: 'hbox',
+                                    style: 'width:150px;float:left',
+                                    widths: ['80px', '45px'],
+                                    children: [{
+                                        id: 'marginLeft',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['0px'],
+                                        label: '',
+                                        'default': '',
+                                        items: _common2,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'marginLeftUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page5', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.CKCss.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div id="' + imagePreviewBoxId + '5">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+
+            }, {
+                id: 'page6',
+                label: editor.lang.CKCss.tabPage6,
+                accessKey: 'S',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    id: 'position',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['80px'],
+                                    label: 'position',
+                                    'default': '',
+                                    items: _position,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'width',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'width',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'widthUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page6', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    id: 'zIndex',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['80px'],
+                                    label: 'z-index',
+                                    'default': '',
+                                    items: _common3,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'height',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'height',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'heightUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page6', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    html: '&nbsp;'
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'top',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'top',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'topUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page6', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    html: '&nbsp;'
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'right',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'right',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'rightUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page6', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    html: '&nbsp;'
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'bottom',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'bottom',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'bottomUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page6', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    html: '&nbsp;'
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'left',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'left',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'leftUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page6', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.common.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div  id="' + imagePreviewBoxId + '6">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+
+            }, {
+                id: 'page7',
+                label: editor.lang.CKCss.tabPage7,
+                accessKey: 'S',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    id: 'visibility',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['80px'],
+                                    label: 'visibility',
+                                    'default': '',
+                                    items: _visibility,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+
+                                    id: 'overflow',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['80px'],
+                                    label: 'overflow',
+                                    'default': '',
+                                    items: _overflow,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }]
+
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    id: 'display',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['80px'],
+                                    label: 'display',
+                                    'default': '',
+                                    items: _display,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'html',
+                                    html: 'clip:rect(...)'
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    id: 'styleFloat',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['80px'],
+                                    label: 'float',
+                                    'default': '',
+                                    items: _float,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'clipTop',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'top',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    }, {
+                                        id: 'clipTopUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page7', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    id: 'clear',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['80px'],
+                                    label: 'clear',
+                                    'default': '',
+                                    items: _clear,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'clipRight',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'right',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        }
+                                    }, {
+                                        id: 'clipRightUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page7', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    id: 'cursor',
+                                    type: 'select',
+                                    labelLayout: 'horizontal',
+                                    widths: ['80px'],
+                                    label: 'cursor',
+                                    'default': '',
+                                    items: _cursor,
+                                    onChange: function () {
+                                        preview(this);
+                                    },
+                                    setup: function (_style) {
+                                        elemSetup(this, _style);
+                                    }
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'clipBottom',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'bottom',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        }
+                                    }, {
+                                        id: 'clipBottomUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page7', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'hbox',
+                            padding: 0,
+                            widths: ['273px', '273px'],
+                            children:
+                                [{
+                                    type: 'html',
+                                    html: '&nbsp;'
+                                }, {
+                                    type: 'hbox',
+                                    style: 'width:273px;float:left',
+                                    widths: ['160px', '45px'],
+                                    children: [{
+                                        id: 'clipLeft',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        widths: ['80px'],
+                                        label: 'left',
+                                        'default': '',
+                                        items: _common3,
+                                        onKeyDown: function (event) {
+                                            selectOnKeyDown(this, event);
+                                        },
+                                        onKeyUp: function (event) {
+                                            selectOnKeyUp(this, event);
+                                        },
+                                        onKeyPress: function (event) {
+                                            return selectOnKeyPress(this, event);
+                                        },
+                                        onChange: function (event) {
+                                            gestUm(this);
+                                            selectOnChange(this, event);
+                                        }
+                                    }, {
+                                        id: 'clipLeftUm',
+                                        type: 'select',
+                                        labelLayout: 'horizontal',
+                                        style: 'width:45px',
+                                        label: '',
+                                        'default': 'px',
+                                        items: _um,
+                                        onChange: function () {
+                                            var dialog = this.getDialog();
+                                            var relElement = dialog.getContentElement('page7', this.id.substring(0, this.id.length - 2));
+                                            preview(relElement);
+                                        }
+                                    }]
+                                }]
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.common.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div  id="' + imagePreviewBoxId + '7">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+
+            }, {
+                id: 'page8',
+                label: editor.lang.CKCss.tabPage8,
+                accessKey: 'S',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            id: 'listStyleType',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['150px'],
+                            label: 'list-style-type',
+                            'default': '',
+                            items: _listStyleType,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'hbox',
+                            widths: ['250px', '110px'],
+                            align: 'right',
+                            children:
+                                [
+                                    {
+                                        id: 'listStyleImage',
+                                        type: 'text',
+                                        widths: ['150px'],
+                                        labelLayout: 'horizontal',
+                                        label: 'list-style-image',
+                                        onChange: function () {
+                                            //this.setValue('url(\'' + this.getValue() + '\')');
+                                            preview(this);
+                                        },
+                                        setup: function (_style) {
+                                            elemSetup(this, _style);
+                                        }
+                                    },
+                                    {
+                                        type: 'button',
+                                        id: 'browse',
+                                        // v-align with the 'txtUrl' field.
+                                        // TODO: We need something better than a fixed size here.
+                                        align: 'center',
+                                        label: editor.lang.common.browseServer,
+                                        hidden: true,
+                                        filebrowser :
+                                        {
+                                            action : 'Browse',
+                                            target:  'page8:listStyleImage',
+                                            url: editor.config.filebrowserImageBrowseLinkUrl,
+                                            params : //optional
+                                            {
+                                                type : 'Images',
+                                                currentFolder : '/'
+                                            }
+                                        }
+                                    }
+                                ]
+                        }, {
+                            id: 'listStylePosition',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['150px'],
+                            label: 'list-style-position',
+                            'default': '',
+                            items: _listStylePosition,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.common.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div  id="' + imagePreviewBoxId + '8">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+
+            }, {
+                id: 'page9',
+                label: editor.lang.CKCss.tabPage9,
+                accessKey: 'S',
+                elements: [{
+                    type: 'vbox',
+                    padding: 3,
+                    children:
+                        [{
+                            id: 'tableLayout',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['150px'],
+                            label: 'table-layout',
+                            'default': '',
+                            items: _tableLayout,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            id: 'borderCollapse',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['150px'],
+                            label: 'borderCollapse',
+                            'default': '',
+                            items: _borderCollapse,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'hbox',
+                            style: 'width:273px;float:left',
+                            widths: ['160px', '45px'],
+                            children: [{
+                                id: 'borderSpacing',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                widths: ['150px'],
+                                label: 'border-spacing',
+                                'default': '',
+                                items: _common2,
+                                onKeyDown: function (event) {
+                                    selectOnKeyDown(this, event);
+                                },
+                                onKeyUp: function (event) {
+                                    selectOnKeyUp(this, event);
+                                },
+                                onKeyPress: function (event) {
+                                    return selectOnKeyPress(this, event);
+                                },
+                                onChange: function (event) {
+                                    gestUm(this);
+                                    selectOnChange(this, event);
+                                },
+                                setup: function (_style) {
+                                    elemSetup(this, _style);
+                                }
+                            }, {
+                                id: 'borderSpacingUm',
+                                type: 'select',
+                                labelLayout: 'horizontal',
+                                style: 'width:45px',
+                                label: '',
+                                'default': 'px',
+                                items: _um,
+                                onChange: function () {
+                                    var dialog = this.getDialog();
+                                    var relElement = dialog.getContentElement('page9', this.id.substring(0, this.id.length - 2));
+                                    preview(relElement);
+                                }
+                            }]
+                        }, {
+                            id: 'emptyCells',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['150px'],
+                            label: 'empty-cells',
+                            'default': '',
+                            items: _emptyCells,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            id: 'captionSide',
+                            type: 'select',
+                            labelLayout: 'horizontal',
+                            widths: ['150px'],
+                            label: 'captionSide',
+                            'default': '',
+                            items: _captionSide,
+                            onChange: function () {
+                                preview(this);
+                            },
+                            setup: function (_style) {
+                                elemSetup(this, _style);
+                            }
+                        }, {
+                            type: 'html',
+                            style: 'width:95%;',
+                            html: CKEDITOR.tools.htmlEncode(editor.lang.common.preview) + '<br><div style="text-align:center;border:1px solid #c0c0c0;background-color:#ffffff;height:50px;overflow:auto"><div  id="' + imagePreviewBoxId + '9">AaBbYyGgLlJj</div></div>'
+                        }, {
+                            id: 'stylePreview',
+                            type: 'textarea',
+                            style: 'width:100%;',
+                            rows: 3
+
+                        }]
+                }]
+
+            }]
+        };
+
+        function onLoad() { }
+        function onHide() { }
+        function onCancel() { }
+    };
+    CKEDITOR.dialog.add('CKCss', function (editor) {
+        return exampleDialog(editor);
+    });
+
+
+
+    /*--------------------------------------------------------------
+     http://chakrabarty.com/pp_editable_dropdown.html
+     http://chakrabarty.com/combobox.html
+     --------------------------------------------------------------*/
+
+    /*----------------------------------------------
+     The Common functions used for all dropdowns are:
+     -----------------------------------------------
+
+     -- function FindKeyCode(e)
+     -- function FindKeyChar(e)
+     -- function fnLeftToRight(getdropdown)
+     -- function fnRightToLeft(getdropdown)
+
+     --------------------------- source: http://chakrabarty.com/pp_editable_dropdown.html */
+
+    function fnLeftToRight(getdropdown)
+    {
+        getdropdown.style.direction = "ltr";
+    }
+
+    function fnRightToLeft(getdropdown)
+    {
+        getdropdown.style.direction = "rtl";
+    }
+
+
+    /*
+     Since Internet Explorer and NetscapeFirefoxChrome have different
+     ways of returning the key code, displaying keys
+     browser-independently is a bit harder.
+     However, you can create a script that displays keys
+     for either browser.
+     The following function will display each key
+     in the status line:
+
+     The "FindKey.." function receives the "event" object
+     from the event handler and stores it in the variable "e".
+     It checks whether the "e.which" property exists (for NetscapeFirefoxChrome),
+     and stores it in the "keycode" variable if present.
+     Otherwise, it assumes the browser is Internet Explorer
+     and assigns to keycode the "e.keyCode" property.
+     */
+
+    function FindKeyCode(e)
+    {
+        if(e.which)
+        {
+            keycode=e.which;  //NetscapeFirefoxChrome
+        }
+        else
+        {
+            keycode=e.keyCode; //Internet Explorer
+        }
+
+        //alert("FindKeyCode"+ keycode);
+        return keycode;
+    }
+
+    function FindKeyChar(e)
+    {
+        keycode = FindKeyCode(e);
+        if((keycode==8)||(keycode==127))
+        {
+            character="backspace"
+        }
+        else if((keycode==46))
+        {
+            character="delete"
+        }
+        else
+        {
+            character=String.fromCharCode(keycode);
+        }
+        //alert("FindKey"+ character);
+        return character;
+    }
+
+    /*----------------------------------------------
+     Dropdown specific global variables are:
+     -----------------------------------------------
+     1) vEditableOptionIndex_A   --> this needs to be set by Programmer!! See explanation.
+     2) vEditableOptionText_A    --> this needs to be set by Programmer!! See explanation.
+     3) vUseActualTexbox_A       --> this needs to be set by Programmer!! See explanation.
+     4) vPreviousSelectIndex_A
+     5) vSelectIndex_A
+     6) vSelectChange_A
+
+     --------------------------- source: http://chakrabarty.com/pp_editable_dropdown.html */
+
+    /*----------------------------------------------
+     Dropdown specific functions
+     (which manipulate dropdown specific global variables)
+     -----------------------------------------------
+     1) function fnChangeHandler_A(getdropdown)
+     2) function fnFocusHandler_A (getdropdown)
+     3) function fnKeyPressHandler_A(getdropdown, e)
+     4) function fnKeyUpHandler_A(getdropdown, e)
+     5) function fnKeyDownHandler_A(getdropdown, e)
+
+     --------------------------- source: http://chakrabarty.com/pp_editable_dropdown.html */
+
+    /*------------------------------------------------
+     IMPORTANT: Global Variable required to be SET by programmer
+     -------------------------- source: http://chakrabarty.com/pp_editable_dropdown.html  */
+
+    var vEditableOptionIndex_A = 0;
+
+    // Give Index of Editable option in the dropdown.
+    // For eg.
+    // if first option is editable then vEditableOptionIndex_A = 0;
+    // if second option is editable then vEditableOptionIndex_A = 1;
+    // if third option is editable then vEditableOptionIndex_A = 2;
+    // if last option is editable then vEditableOptionIndex_A = (length of dropdown - 1).
+    // Note: the value of vEditableOptionIndex_A cannot be greater than (length of dropdown - 1)
+
+    var vEditableOptionText_A = "--?--";
+
+    // Give the default text of the Editable option in the dropdown.
+    // For eg.
+    // if the editable option is <option ...>--?--</option>,
+    // then set vEditableOptionText_A = "--?--";
+
+    var vUseActualTexbox_A = "no";
+    // = "no" ...
+    //      default is 'no' because there is no need to use an actual textbox if using a PC (with physical keyboard)
+    //      if using iPad/iPhone or Android device, which usually have a virtual soft keyboard, then textbox will automatically show up next to dropdown on those devices
+    // = "yes" ...
+    //      set this to 'yes' if and only if you want an actual textbox to show up next to dropdown at all times (even on devices with physical keyboards)
+
+    /*------------------------------------------------
+     Global Variables required for
+     fnChangeHandler_A(), fnKeyPressHandler_A() and fnKeyUpHandler_A()
+     for Editable Dropdowns
+     -------------------------- source: http://chakrabarty.com/pp_editable_dropdown.html  */
+
+    var vPreviousSelectIndex_A = 0;
+    // Contains the Previously Selected Index, set to 0 by default
+
+    var vSelectIndex_A = 0;
+    // Contains the Currently Selected Index, set to 0 by default
+
+    var vSelectChange_A = 'MANUAL_CLICK';
+    // Indicates whether Change in dropdown selected option
+    // was due to a Manual Click
+    // or instead due to System properties of dropdown.
+
+    // vSelectChange_A = 'MANUAL_CLICK' indicates that
+    // the jump to a non-editable option in the dropdown was due
+    // to a Manual click (i.e.,changed on purpose by user).
+
+    // vSelectChange_A = 'AUTO_SYSTEM' indicates that
+    // the jump to a non-editable option was due to System properties of dropdown
+    // (i.e.,user did not change the option in the dropdown;
+    // instead an automatic jump happened due to inbuilt
+    // dropdown properties of browser on typing of a character )
+
+    /*------------------------------------------------
+     Functions required for  Editable Dropdowns
+     -------------------------- source: http://chakrabarty.com/pp_editable_dropdown.html  */
+
+    function fnSanityCheck_A(getdropdown)
+    {
+        if(vEditableOptionIndex_A>(getdropdown.options.length-1))
+        {
+            alert("PROGRAMMING ERROR: The value of variable vEditableOptionIndex_... cannot be greater than (length of dropdown - 1)");
+            return false;
+        }
+    }
+
+    function fnKeyDownHandler_A(getdropdown, e)
+    {
+        fnSanityCheck_A(getdropdown);
+
+        // Press [ <- ] and [ -> ] arrow keys on the keyboard to change alignment/flow.
+        // ...go to Start : Press  [ <- ] Arrow Key
+        // ...go to End : Press [ -> ] Arrow Key
+        // (this is useful when the edited-text content exceeds the ListBox-fixed-width)
+        // This works best on Internet Explorer, and not on NetscapeFirefoxChrome
+
+        var vEventKeyCode = FindKeyCode(e);
+
+        // Press left/right arrow keys
+        if(vEventKeyCode == 37)
+        {
+            fnLeftToRight(getdropdown);
+        }
+        if(vEventKeyCode == 39)
+        {
+            fnRightToLeft(getdropdown);
+        }
+
+        // Delete key pressed
+        if(vEventKeyCode == 46)
+        {
+            if(getdropdown.options.length != 0)
+            // if dropdown is not empty
+            {
+                if (getdropdown.options.selectedIndex == vEditableOptionIndex_A)
+                // if option is the Editable field
+                {
+                    getdropdown.options[getdropdown.options.selectedIndex].text = '';
+                    getdropdown.options[getdropdown.options.selectedIndex].value = '';
+                }
+            }
+        }
+
+        // backspace key pressed
+        if(vEventKeyCode == 8 || vEventKeyCode == 127)
+        {
+            if(getdropdown.options.length != 0)
+            // if dropdown is not empty
+            {
+                if (getdropdown.options.selectedIndex == vEditableOptionIndex_A)
+                // if option is the Editable field
+                {
+                    // make Editable option Null if it is being edited for the first time
+                    if ((getdropdown[vEditableOptionIndex_A].text == vEditableOptionText_A)||(getdropdown[vEditableOptionIndex_A].value == vEditableOptionText_A))
+                    {
+                        getdropdown.options[getdropdown.options.selectedIndex].text = '';
+                        getdropdown.options[getdropdown.options.selectedIndex].value = '';
+                    }
+                    else
+                    {
+                        getdropdown.options[getdropdown.options.selectedIndex].text = getdropdown.options[getdropdown.options.selectedIndex].text.slice(0,-1);
+                        getdropdown.options[getdropdown.options.selectedIndex].value = getdropdown.options[getdropdown.options.selectedIndex].value.slice(0,-1);
+                    }
+                }
+            }
+            if(e.which) //NetscapeFirefoxChrome
+            {
+                e.which = '';
+            }
+            else //Internet Explorer
+            {
+                e.keyCode = '';
+            }
+            if (e.cancelBubble)	  //Internet Explorer
+            {
+                e.cancelBubble = true;
+                e.returnValue = false;
+            }
+            if (e.stopPropagation)	 //NetscapeFirefoxChrome
+            {
+                e.stopPropagation();
+            }
+            if (e.preventDefault)	 //NetscapeFirefoxChrome
+            {
+                e.preventDefault();
+            }
+        }
+    }
+
+    function fnFocusHandler_A(getdropdown)
+    {
+        //use textbox for devices such as android and ipad that don't have a physical keyboard (textbox allows use of virtual soft keyboard)
+        if ( (navigator.userAgent.toLowerCase().search(/android|ipad|iphone|ipod/) > -1) || (vUseActualTexbox_A == 'yes') )
+        {
+            if (getdropdown[(vEditableOptionIndex_A)].selected == true)
+            {
+                document.getElementById('textboxoption_A').style.visibility='';
+                document.getElementById('textboxoption_A').style.display='';
+            }
+            else
+            {
+                document.getElementById('textboxoption_A').style.visibility='hidden';
+                document.getElementById('textboxoption_A').style.display='none';
+            }
+        }
+    }
+
+    function fnChangeHandler_A(getdropdown)
+    {
+        fnSanityCheck_A(getdropdown);
+
+        vPreviousSelectIndex_A = vSelectIndex_A;
+        // Contains the Previously Selected Index
+
+        vSelectIndex_A = getdropdown.options.selectedIndex;
+        // Contains the Currently Selected Index
+
+        if ((vPreviousSelectIndex_A == (vEditableOptionIndex_A)) && (vSelectIndex_A != (vEditableOptionIndex_A))&&(vSelectChange_A != 'MANUAL_CLICK'))
+        // To Set value of Index variables - source: http://chakrabarty.com/pp_editable_dropdown.html
+        {
+            getdropdown[(vEditableOptionIndex_A)].selected=true;
+            vPreviousSelectIndex_A = vSelectIndex_A;
+            vSelectIndex_A = getdropdown.options.selectedIndex;
+            vSelectChange_A = 'MANUAL_CLICK';
+            // Indicates that the Change in dropdown selected
+            // option was due to a Manual Click
+        }
+
+        //use textbox for devices such as android and ipad that don't have a physical keyboard (textbox allows use of virtual soft keyboard)
+        if ( (navigator.userAgent.toLowerCase().search(/android|ipad|iphone|ipod/) > -1) || (vUseActualTexbox_A == 'yes') )
+        {
+            fnFocusHandler_A(getdropdown);
+        }
+    }
+
+    function fnKeyPressHandler_A(getdropdown, e)
+    {
+        fnSanityCheck_A(getdropdown);
+
+        keycode = FindKeyCode(e);
+        keychar = FindKeyChar(e);
+
+        // Check for allowable Characters
+        // The various characters allowable for entry into Editable option..
+        // may be customized by minor modifications in the code (if condition below)
+        // (you need to know the keycode/ASCII value of the  character to be allowed/disallowed.
+        // - source: http://chakrabarty.com/pp_editable_dropdown.html
+
+        if ((keycode>47 && keycode<59)||(keycode>62 && keycode<127) ||(keycode==32))
+        {
+            var vAllowableCharacter = "yes";
+        }
+        else
+        {
+            var vAllowableCharacter = "no";
+        }
+
+        //alert(window); alert(window.event);
+
+        if(getdropdown.options.length != 0)
+        // if dropdown is not empty
+            if (getdropdown.options.selectedIndex == (vEditableOptionIndex_A))
+            // if selected option the Editable option of the dropdown
+            {
+
+                // Empty space (ascii 32)  is not captured by NetscapeFirefoxChrome when .text is used
+                // NetscapeFirefoxChrome removes extra spaces at end of string when .text is used
+                // NetscapeFirefoxChrome allows one empty space at end of string when .value is used
+                // Hence, use .value insead of .text
+                var vEditString = getdropdown[vEditableOptionIndex_A].value;
+
+                // make Editable option Null if it is being edited for the first time
+                if(vAllowableCharacter == "yes")
+                {
+                    if ((getdropdown[vEditableOptionIndex_A].text == vEditableOptionText_A)||(getdropdown[vEditableOptionIndex_A].value == vEditableOptionText_A))
+                        vEditString = "";
+                }
+
+                if (vAllowableCharacter == "yes")
+                // To handle addition of a character - source: http://chakrabarty.com/pp_editable_dropdown.html
+                {
+                    vEditString+=String.fromCharCode(keycode);
+                    // Concatenate Enter character to Editable string
+
+                    // The following portion handles the "automatic Jump" bug
+                    // The "automatic Jump" bug (Description):
+                    //   If a alphabet is entered (while editing)
+                    //   ...which is contained as a first character in one of the read-only options
+                    //   ..the focus automatically "jumps" to the read-only option
+                    //   (-- this is a common property of normal dropdowns
+                    //    ..but..is undesirable while editing).
+
+                    var i=0;
+                    var vEnteredChar = String.fromCharCode(keycode);
+                    var vUpperCaseEnteredChar = vEnteredChar;
+                    var vLowerCaseEnteredChar = vEnteredChar;
+
+
+                    if(((keycode)>=97)&&((keycode)<=122))
+                    // if vEnteredChar lowercase
+                        vUpperCaseEnteredChar = String.fromCharCode(keycode - 32);
+                    // This is UpperCase
+
+
+                    if(((keycode)>=65)&&((keycode)<=90))
+                    // if vEnteredChar is UpperCase
+                        vLowerCaseEnteredChar = String.fromCharCode(keycode + 32);
+                    // This is lowercase
+
+                    if(e.which) //For NetscapeFirefoxChrome
+                    {
+                        // Compare the typed character (into the editable option)
+                        // with the first character of all the other
+                        // options (non-editable).
+
+                        // To note if the jump to the non-editable option was due
+                        // to a Manual click (i.e.,changed on purpose by user)
+                        // or instead due to System properties of dropdown
+                        // (i.e.,user did not change the option in the dropdown;
+                        // instead an automatic jump happened due to inbuilt
+                        // dropdown properties of browser on typing of a character )
+
+                        for (i=0;i<=(getdropdown.options.length-1);i++)
+                        {
+                            if(i!=vEditableOptionIndex_A)
+                            {
+                                var vEnteredDigitNumber = getdropdown[vEditableOptionIndex_A].text.length;
+                                var vFirstReadOnlyChar = getdropdown[i].text.substring(0,1);
+                                var vEquivalentReadOnlyChar = getdropdown[i].text.substring(vEnteredDigitNumber,vEnteredDigitNumber+1);
+                                if (vEnteredDigitNumber >= getdropdown[i].text.length)
+                                {
+                                    vEquivalentReadOnlyChar = vFirstReadOnlyChar;
+                                }
+                                if( (vEquivalentReadOnlyChar == vUpperCaseEnteredChar)||(vEquivalentReadOnlyChar == vLowerCaseEnteredChar)
+                                    ||(vFirstReadOnlyChar == vUpperCaseEnteredChar)||(vFirstReadOnlyChar == vLowerCaseEnteredChar) )
+                                {
+                                    vSelectChange_A = 'AUTO_SYSTEM';
+                                    // Indicates that the Change in dropdown selected
+                                    // option was due to System properties of dropdown
+                                    break;
+                                }
+                                else
+                                {
+                                    vSelectChange_A = 'MANUAL_CLICK';
+                                    // Indicates that the Change in dropdown selected
+                                    // option was due to a Manual Click
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Set the new edited string into the Editable option
+                getdropdown.options[vEditableOptionIndex_A].text = vEditString;
+                getdropdown.options[vEditableOptionIndex_A].value = vEditString;
+
+                return false;
+            }
+        return true;
+    }
+
+    function fnKeyUpHandler_A(getdropdown, e)
+    {
+        fnSanityCheck_A(getdropdown);
+
+        if(e.which) // NetscapeFirefoxChrome
+        {
+            if(vSelectChange_A == 'AUTO_SYSTEM')
+            {
+                // if editable dropdown option jumped while editing
+                // (due to typing of a character which is the first character of some other option)
+                // then go back to the editable option.
+                getdropdown[(vEditableOptionIndex_A)].selected=true;
+                vSelectChange_A = 'MANUAL_CLICK';
+            }
+
+            var vEventKeyCode = FindKeyCode(e);
+            // if [ <- ] or [ -> ] arrow keys are pressed, select the editable option
+            if((vEventKeyCode == 37)||(vEventKeyCode == 39))
+            {
+                getdropdown[vEditableOptionIndex_A].selected=true;
+            }
+        }
+    }
+
+    /*-------------------------------------------------------------------------------------------- source: http://chakrabarty.com/pp_editable_dropdown.html */
+
+    /***************************************************************
+
+     http://chakrabarty.com/pp_editable_dropdown.html
+     http://chakrabarty.com/combobox.html
+
+     ***************************************************************/
+
+    function Hash() {
+        this.length = 0;
+        this.items = new Array();
+        for (var i = 0; i < arguments.length; i += 2) {
+            if (typeof (arguments[i + 1]) != 'undefined') {
+                this.items[arguments[i]] = arguments[i + 1];
+                this.length++;
+            }
+        }
+
+        this.removeItem = function (in_key) {
+            var tmp_previous;
+            if (typeof (this.items[in_key]) != 'undefined') {
+                this.length--;
+                var tmp_previous = this.items[in_key];
+                delete this.items[in_key];
+            }
+
+            return tmp_previous;
+        }
+
+        this.getItem = function (in_key) {
+            return this.items[in_key];
+        }
+
+        this.setItem = function (in_key, in_value) {
+            var tmp_previous;
+            if (typeof (in_value) != 'undefined') {
+                if (typeof (this.items[in_key]) == 'undefined') {
+                    this.length++;
+                }
+                else {
+                    tmp_previous = this.items[in_key];
+                }
+
+                this.items[in_key] = in_value;
+            }
+
+            return tmp_previous;
+        }
+
+        this.hasItem = function (in_key) {
+            return typeof (this.items[in_key]) != 'undefined';
+        }
+
+        this.clear = function () {
+            for (var i in this.items) {
+                delete this.items[i];
+            }
+
+            this.length = 0;
+        }
+    }
+})();