skinning tinymce to match locomotive style

app/views/admin/contents/_form.html.haml

@@ -1,5 +1,5 @@
 - content_for :head do
   = javascript_include_tag 'admin/plugins/tiny_mce/tinymce', 'admin/plugins/json2', 'admin/plugins/fancybox', 'admin/custom_fields/category', 'admin/contents'
-  = stylesheet_link_tag 'admin/plugins/fancybox', 'admin/box'
+  = stylesheet_link_tag 'admin/plugins/fancybox', 'admin/fancybox_changes'
 
 = render 'admin/custom_fields/custom_form', :form => f, :title => :attributes, :parent => @content_type

config/locales/admin_ui_fr.yml

@@ -59,7 +59,7 @@ fr:
       edit_category:
         title: Editer options
         help: Gèrer la liste des options de votre liste déroulante
-        collection_label: List des options
+        collection_label: Liste des options
       custom_form:
         edit_categories: Editer options
         delete_file: Supprimer fichier

doc/TODO

@@ -13,14 +13,14 @@ BOARD:
   x store page toolbar status in cookie
   x trim short text content
   x namespace js functions
+  - html view in the aloha popup
   - editable elements should wrap a tag: div, h1, ...etc (default span)
-  - also save contents ?
   - edit images (upload new ones, ...etc) => wait for aloha or send them an email ?
-  - google analytics tags (only visible in non edit mode)
+- customize tinyMCE: no html popup => div popup, nice icons
+- add images / files inside long text element (back-office side at first ?)
 - global regions: keyword in editable element (http://www.mongodb.org/display/DOCS/Updating)
 - create a repo for a tool "a la" vision
 - write my first tutorial about locomotive
-- add images / files inside long text element (back-office side at first ?)
 
 - refactor slugify method (use parameterize + create a module)
 - [content types] the "display column" selector should not include file types

lib/locomotive/liquid/tags/editable/short_text.rb

@@ -6,10 +6,6 @@ module Locomotive
 
           protected
 
-          # def render_element(context, element)
-          #   element.content
-          # end
-
           def render_element(context, element)
             if context.registers[:inline_editor]
               %{

public/javascripts/admin/application.js

@@ -49,10 +49,16 @@ var addCodeMirrorEditor = function(type, el, parser) {
 var TinyMceDefaultSettings = {
   script_url : '/javascripts/admin/plugins/tiny_mce/tiny_mce.js',
   theme : 'advanced',
-  skin : 'locomotive',
+  skin : 'cirkuit',
-  theme_advanced_buttons1 : 'code,|,bold,italic,|,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,formatselect,fontselect,fontsizeselect',
+  plugins: 'safari,inlinepopups,advimage',
-  theme_advanced_buttons2 : '',
+  theme_advanced_buttons1 : 'code,|,bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,image',
-  theme_advanced_buttons3 : ''
+  theme_advanced_buttons2 : 'formatselect,fontselect,fontsizeselect',
+  theme_advanced_buttons3 : '',
+  theme_advanced_toolbar_location : "top",
+  theme_advanced_toolbar_align : "left",
+  height: '300',
+  width: '710',
+  inlinepopups_skin: 'locomotive'
 };
 
 /* ___ global ___ */
@@ -60,6 +66,8 @@ var TinyMceDefaultSettings = {
 $(document).ready(function() {
   I18nLocale = $('meta[name=locale]').attr('content');
 
+  TinyMceDefaultSettings['language'] = I18nLocale;
+
   // sub menu links
   $('#submenu ul li.links').hover(function() {
     $(this).addClass('hover');

public/javascripts/admin/plugins/tiny_mce/langs/fr.js

@@ -0,0 +1,154 @@
+tinyMCE.addI18n({fr:{
+common:{
+edit_confirm:"Voulez-vous utiliser le mode WYSIWYG pour cette zone de texte\u00A0?",
+apply:"Appliquer",
+insert:"Ins\u00E9rer",
+update:"Mettre \u00E0 jour",
+cancel:"Annuler",
+close:"Fermer",
+browse:"Naviguer",
+class_name:"Classe",
+not_set:"-- Non init. --",
+clipboard_msg:"Copier/Couper/Coller n'est pas disponible sous Mozilla et sous Firefox.\nVoulez-vous plus d'information sur ce probl\u00E8me\u00A0?",
+clipboard_no_support:"Actuellement non support\u00E9 par votre navigateur, utilisez les raccourcis clavier \u00E0 ma place.",
+popup_blocked:"D\u00E9sol\u00E9, nous avons d\u00E9tect\u00E9 que votre bloqueur de popup a bloqu\u00E9 une fen\u00EAtre dont l'application a besoin. Vous devez d\u00E9sactiver votre bloqueur de popup pour pouvoir utiliser cet outil.",
+invalid_data:"Erreur : Valeurs incorrectes entr\u00E9es, elles sont marqu\u00E9es en rouge.",
+more_colors:"Plus de couleurs"
+},
+contextmenu:{
+align:"Alignement",
+left:"Gauche",
+center:"Centr\u00E9",
+right:"Droite",
+full:"Justifi\u00E9"
+},
+insertdatetime:{
+date_fmt:"%d-%m-%Y",
+time_fmt:"%H:%M:%S",
+insertdate_desc:"Ins\u00E9rer date",
+inserttime_desc:"Ins\u00E9rer heure",
+months_long:"Janvier,F\u00E9vrier,Mars,Avril,Mai,Juin,Juillet,Ao\u00FBt,Septembre,Octobre,Novembre,D\u00E9cembre",
+months_short:"Jan,F\u00E9v,Mar,Avr,Mai,Juin,Juil,Ao\u00FBt,Sep,Oct,Nov,D\u00E9c",
+day_long:"Dimanche,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi,Dimanche",
+day_short:"Dim,Lun,Mar,Mer,Jeu,Ven,Sam,Dim"
+},
+print:{
+print_desc:"Imprimer"
+},
+preview:{
+preview_desc:"Pr\u00E9visualiser"
+},
+directionality:{
+ltr_desc:"\u00C9criture de gauche \u00E0 droite",
+rtl_desc:"\u00C9criture de droite \u00E0 gauche"
+},
+layer:{
+insertlayer_desc:"Ins\u00E9rer une nouvelle couche",
+forward_desc:"D\u00E9placer vers l'avant",
+backward_desc:"D\u00E9placer vers l'arri\u00E8re",
+absolute_desc:"Activer le positionnement absolu",
+content:"Nouvelle couche..."
+},
+save:{
+save_desc:"Sauver",
+cancel_desc:"Annuler tous les changements"
+},
+nonbreaking:{
+nonbreaking_desc:"Ins\u00E9rer un espace ins\u00E9cable"
+},
+iespell:{
+iespell_desc:"Lancer le v\u00E9rificateur d'orthographe",
+download:"ieSpell non install\u00E9, voulez-vous l'installer maintenant\u00A0?"
+},
+advhr:{
+advhr_desc:"Ins\u00E9rer trait horizontal"
+},
+emotions:{
+emotions_desc:"\u00C9motions"
+},
+searchreplace:{
+search_desc:"Chercher",
+replace_desc:"Chercher/Remplacer"
+},
+advimage:{
+image_desc:"Ins\u00E9rer/\u00C9diter image"
+},
+advlink:{
+link_desc:"Ins\u00E9rer/\u00C9diter lien"
+},
+xhtmlxtras:{
+cite_desc:"Citation",
+abbr_desc:"Abr\u00E9viation",
+acronym_desc:"Acronyme",
+del_desc:"Effacement",
+ins_desc:"Insertion",
+attribs_desc:"Ins\u00E9rer/\u00C9diter les attributs"
+},
+style:{
+desc:"\u00C9diter la feuille de style CSS"
+},
+paste:{
+paste_text_desc:"Coller en tant que texte brut",
+paste_word_desc:"Coller \u00E0 partir d'un texte cr\u00E9\u00E9 sous Word",
+selectall_desc:"S\u00E9lectioner tout"
+},
+paste_dlg:{
+text_title:"Utilisez CTRL+V sur votre clavier pour coller le texte dans la fen\u00EAtre.",
+text_linebreaks:"Conserver les sauts de ligne",
+word_title:"Utilisez CTRL+V sur votre clavier pour coller le texte dans la fen\u00EAtre."
+},
+table:{
+desc:"Ins\u00E9rer un nouveau tableau",
+row_before_desc:"Ins\u00E9rer ligne avant",
+row_after_desc:"Ins\u00E9rer ligne apr\u00E8s",
+delete_row_desc:"Effacer ligne",
+col_before_desc:"Ins\u00E9rer colonne avant",
+col_after_desc:"Ins\u00E9rer colonne apr\u00E8s",
+delete_col_desc:"Effacer colonne",
+split_cells_desc:"Scinder les cellules fusionn\u00E9es",
+merge_cells_desc:"Fusionner les cellules",
+row_desc:"Propri\u00E9t\u00E9s de la ligne",
+cell_desc:"Propri\u00E9t\u00E9s de la cellule",
+props_desc:"Propri\u00E9t\u00E9s du tableau",
+paste_row_before_desc:"Coller la ligne avant",
+paste_row_after_desc:"Coller la ligne apr\u00E8s",
+cut_row_desc:"Couper la ligne",
+copy_row_desc:"Copier la ligne",
+del:"Effacer tableau",
+row:"Ligne",
+col:"Colonne",
+cell:"Cellule"
+},
+autosave:{
+unload_msg:"Les changements que vous avez faits seront perdus si vous changez de page."
+},
+fullscreen:{
+desc:"Passer en mode plein \u00E9cran"
+},
+media:{
+desc:"Ins\u00E9rer/\u00C9diter un fichier m\u00E9dia",
+edit:"\u00C9diter un fichier m\u00E9dia"
+},
+fullpage:{
+desc:"Propri\u00E9t\u00E9s du document"
+},
+template:{
+desc:"Ins\u00E9rer un mod\u00E8le pr\u00E9d\u00E9fini."
+},
+visualchars:{
+desc:"Activer les caract\u00E8res de mise en page."
+},
+spellchecker:{
+desc:"Activer le v\u00E9rificateur d'orthographe",
+menu:"Param\u00E8tres du v\u00E9rificateur d'orthographe",
+ignore_word:"Ignorer mot",
+ignore_words:"Ignorer tout",
+langs:"Langues",
+wait:"Patientez svp...",
+sug:"Suggestions",
+no_sug:"Aucune suggestions",
+no_mpell:"Aucune erreur trouv\u00E9e."
+},
+pagebreak:{
+desc:"Ins\u00E9rer saut de page."
+}}});

public/javascripts/admin/plugins/tiny_mce/plugins/inlinepopups/skins/locomotive/window.css

@@ -0,0 +1,72 @@
+/* Locomotive's version of Clearlooks 2 */
+
+/* Reset */
+.locomotive, .locomotive div, .locomotive span, .locomotive a { vertical-align:baseline; text-align:left; position:absolute; border:0; padding:0; margin:0; background:transparent; text-decoration:none; font-weight:normal; width:auto; height:auto; overflow:hidden; display:block; }
+
+/* General */
+/*.locomotive { position:absolute; direction:ltr; border: 10px solid rgba(0, 0, 0, 0.25); -moz-border-radius:10px; -webkit-border-radius: 10px; border-radius: 10px; }*/
+.locomotive {
+  position: absolute;
+  direction: ltr;
+  border: 0px;
+  -webkit-box-shadow: 0px 0px 50px #666;
+  box-shadow: 0px 0px 50px #666;
+}
+.locomotive .mceWrapper { position:static; }
+.mceEventBlocker { position:fixed; left:0; top:0; width:100%; height:100%; }
+.locomotive .mcePlaceHolder { top: 0; left: 0; background: #666; opacity:0.3; -ms-filter:'alpha(opacity=30)'; filter:alpha(opacity=30); }
+.locomotive_modalBlocker { position:fixed; left:0; top:0; width:100%; height:100%; background:#666; opacity:0.3; -ms-filter:'alpha(opacity=30)'; filter:alpha(opacity=30); display:none; }
+
+/* Top */
+.locomotive .mceTop { top: 0px; width: 100%; height: 47px; background: #fff; }
+.locomotive .mceTop span {
+  position: relative;
+  border-bottom: 1px dotted #BBBBBD;
+  color:#1E1F26;
+  font-size:1.1em;
+  font-weight:bold;
+  padding: 0;
+  margin: 0 10px;
+  line-height: 45px;
+  background: #fff;
+}
+
+/* Middle */
+.locomotive .mceMiddle { top: 0px; width: 100%; height: 100%; }
+.locomotive .mceMiddle span { top: 47px; position: relative; background: #fff; }
+
+/* Bottom */
+.locomotive .mceBottom { bottom: 0px; width: 100%; height: 1px; background: #8b8d9a; }
+
+/* Move & Close */
+.locomotive a.mceClose { display: none; }
+.locomotive a.mceMove { top: 1px; display: block; width: 100%; height: 35px; cursor: move; }
+
+/* Resize */
+.locomotive .mceResize { top:auto; left:auto; display:none; width:5px; height:5px; }
+.locomotive .mceResizable .mceResize {display:block}
+.locomotive .mceResizable .mceMin, .locomotive .mceMax {display:none}
+.locomotive .mceMinimizable .mceMin {display:block}
+.locomotive .mceMaximizable .mceMax {display:block}
+.locomotive .mceMaximized .mceMed {display:block}
+.locomotive .mceMaximized .mceMax {display:none}
+.locomotive a.mceResizeN {top:0; left:0; width:100%; cursor:n-resize}
+.locomotive a.mceResizeNW {top:0; left:0; cursor:nw-resize}
+.locomotive a.mceResizeNE {top:0; right:0; cursor:ne-resize}
+.locomotive a.mceResizeW {top:0; left:0; height:100%; cursor:w-resize;}
+.locomotive a.mceResizeE {top:0; right:0; height:100%; cursor:e-resize}
+.locomotive a.mceResizeS {bottom:0; left:0; width:100%; cursor:s-resize}
+.locomotive a.mceResizeSW {bottom:0; left:0; cursor:sw-resize}
+.locomotive a.mceResizeSE {bottom:0; right:0; cursor:se-resize}
+
+/* Alert/Confirm */
+.locomotive .mceButton {font-weight:bold; bottom:10px; width:80px; height:30px; background:url(img/button.gif); line-height:30px; vertical-align:middle; text-align:center; outline:0}
+.locomotive .mceMiddle .mceIcon {left:15px; top:35px; width:32px; height:32px}
+.locomotive .mceAlert .mceMiddle span, .locomotive .mceConfirm .mceMiddle span {background:transparent;left:60px; top:35px; width:320px; height:50px; font-weight:bold; overflow:auto; white-space:normal}
+.locomotive a:hover {font-weight:bold;}
+.locomotive .mceAlert .mceMiddle, .locomotive .mceConfirm .mceMiddle {background:#D6D7D5}
+.locomotive .mceAlert .mceOk {left:50%; top:auto; margin-left: -40px}
+.locomotive .mceAlert .mceIcon {background:url(img/alert.gif)}
+.locomotive .mceConfirm .mceOk {left:50%; top:auto; margin-left: -90px}
+.locomotive .mceConfirm .mceCancel {left:50%; top:auto}
+.locomotive .mceConfirm .mceIcon {background:url(img/confirm.gif)}

public/javascripts/admin/plugins/tiny_mce/themes/advanced/js/source_editor.js

@@ -50,10 +50,10 @@ function resizeInputs() {
   var el = document.getElementById('htmlSource');
 
   if (!tinymce.isIE) {
-		 wHeight = self.innerHeight - 65;
+     wHeight = self.innerHeight - 65 - 61; // FIXME (Did): 61 is the bottom actions bar
      wWidth = self.innerWidth - 16;
   } else {
-		 wHeight = document.body.clientHeight - 70;
+     wHeight = document.body.clientHeight - 70 - 61; // FIXME (Did): 61 is the bottom actions bar
      wWidth = document.body.clientWidth - 16;
   }
 

public/javascripts/admin/plugins/tiny_mce/themes/advanced/langs/fr.js

@@ -0,0 +1,62 @@
+tinyMCE.addI18n('fr.advanced',{
+style_select:"Styles",
+font_size:"Taille police",
+fontdefault:"Police",
+block:"Format",
+paragraph:"Paragraphe",
+div:"Div",
+address:"Adresse",
+pre:"Preformatt\u00E9",
+h1:"Titre 1",
+h2:"Titre 2",
+h3:"Titre 3",
+h4:"Titre 4",
+h5:"Titre 5",
+h6:"Titre 6",
+blockquote:"Citation",
+code:"Code",
+samp:"Exemple de code",
+dt:"Terme \u00E0 d\u00E9finir",
+dd:"D\u00E9finition du terme",
+bold_desc:"Gras (Ctrl+B)",
+italic_desc:"Italique (Ctrl+I)",
+underline_desc:"Soulign\u00E9 (Ctrl+U)",
+striketrough_desc:"Barr\u00E9",
+justifyleft_desc:"Align\u00E9 \u00E0 gauche",
+justifycenter_desc:"Centr\u00E9",
+justifyright_desc:"Align\u00E9 \u00E0 droite",
+justifyfull_desc:"Justifi\u00E9",
+bullist_desc:"Liste non-num\u00E9rot\u00E9e",
+numlist_desc:"Liste num\u00E9rot\u00E9e",
+outdent_desc:"Retirer l'indentation",
+indent_desc:"Indenter",
+undo_desc:"Annuler (Ctrl+Z)",
+redo_desc:"R\u00E9tablir (Ctrl+Y)",
+link_desc:"Ins\u00E9rer/\u00C9diter le lien",
+unlink_desc:"D\u00E9lier",
+image_desc:"Ins\u00E9rer/\u00C9diter l'image",
+cleanup_desc:"Nettoyer le code non propre",
+code_desc:"\u00C9diter source HTML",
+sub_desc:"Indice",
+sup_desc:"Exposant",
+hr_desc:"Ins\u00E9rer trait horizontal",
+removeformat_desc:"Enlever formattage",
+custom1_desc:"Votre description personnalis\u00E9e ici",
+forecolor_desc:"Choisir la couleur du texte",
+backcolor_desc:"Choisir la couleur de surlignage",
+charmap_desc:"Ins\u00E9rer caract\u00E8res sp\u00E9ciaux",
+visualaid_desc:"Activer/d\u00E9sactiver les guides et les \u00E9l\u00E9ments invisibles",
+anchor_desc:"Ins\u00E9rer/\u00C9diter ancre",
+cut_desc:"Couper",
+copy_desc:"Copier",
+paste_desc:"Coller",
+image_props_desc:"Propri\u00E9t\u00E9s de l'image",
+newdocument_desc:"Nouveau document",
+help_desc:"Aide",
+blockquote_desc:"Citation",
+clipboard_msg:"Copier/Couper/Coller n'est pas disponible sous Mozilla et sous Firefox.\n\r\n      Voulez-vous plus d'information sur ce probl\u00E8me\u00A0?",
+path:"Chemin",
+newdocument:"\u00CAtes-vous s\u00FBr de vouloir effacer l'enti\u00E8ret\u00E9 du document\u00A0?",
+toolbar_focus:"Aller aux boutons de l'\u00E9diteur - Alt+Q, Aller \u00E0 l'\u00E9diteur - Alt-Z, Aller au chemin de l'\u00E9l\u00E9ment - Alt-X",
+more_colors:"Plus de couleurs"
+});

public/javascripts/admin/plugins/tiny_mce/themes/advanced/langs/fr_dlg.js

@@ -0,0 +1,51 @@
+tinyMCE.addI18n('fr.advanced_dlg',{
+about_title:"\u00C0 propos de TinyMCE",
+about_general:"\u00C0 propos",
+about_help:"Aide",
+about_license:"Licence",
+about_plugins:"Plugins",
+about_plugin:"Plugin",
+about_author:"Auteur",
+about_version:"Version",
+about_loaded:"Plugins charg\u00E9s",
+anchor_title:"Ins\u00E9rer/\u00C9diter ancre",
+anchor_name:"Nom de l'ancre",
+code_title:"\u00C9diteur de la source HTML",
+code_wordwrap:"Rupture de ligne",
+colorpicker_title:"Choisir une couleur",
+colorpicker_picker_tab:"Nuancier",
+colorpicker_picker_title:"Nuancier",
+colorpicker_palette_tab:"Palette",
+colorpicker_palette_title:"Couleurs de la palette",
+colorpicker_named_tab:"Noms",
+colorpicker_named_title:"Couleurs nomm\u00E9es",
+colorpicker_color:"Couleur :",
+colorpicker_name:"Nom :",
+charmap_title:"Choisir le caract\u00E8re \u00E0 ins\u00E9rer",
+image_title:"Ins\u00E9rer/\u00C9diter image",
+image_src:"URL de l'image",
+image_alt:"Description de l'image",
+image_list:"Liste d'images",
+image_border:"Bordure",
+image_dimensions:"Dimensions",
+image_vspace:"Espacement vertical",
+image_hspace:"Espacement horizontal",
+image_align:"Alignement",
+image_align_baseline:"Base",
+image_align_top:"Sommet",
+image_align_middle:"Milieu",
+image_align_bottom:"Bas",
+image_align_texttop:"Haut du texte",
+image_align_textbottom:"Bas du texte",
+image_align_left:"Gauche",
+image_align_right:"Droite",
+link_title:"Ins\u00E9rer/\u00C9diter lien",
+link_url:"URL du lien",
+link_target:"Cible",
+link_target_same:"Ouvrir dans la m\u00EAme fen\u00EAtre",
+link_target_blank:"Ouvrir dans une nouvelle fen\u00EAtre",
+link_titlefield:"Titre",
+link_is_email:"L'url que vous avez entr\u00E9 semble \u00EAtre une adresse e-mail, voulez-vous ajouter le pr\u00E9fixe mailto:\u00A0?",
+link_is_external:"L'url que vous avez entr\u00E9 semble \u00EAtre une adresse web externe, voulez-vous ajouter le pr\u00E9fixe http://\u00A0?",
+link_list:"Liste de liens"
+});

public/javascripts/admin/plugins/tiny_mce/themes/advanced/skins/cirkuit/content.css

@@ -0,0 +1,66 @@
+/*body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
+body {background:#FFF;}
+body.mceForceColors {background:#FFF; color:#000;}
+h1 {font-size: 2em}
+h2 {font-size: 1.5em}
+h3 {font-size: 1.17em}
+h4 {font-size: 1em}
+h5 {font-size: .83em}
+h6 {font-size: .75em}
+.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
+a.mceItemAnchor {display:inline-block; width:11px !important; height:11px  !important; background:url(img/items.gif) no-repeat 0 0;}
+td.mceSelected, th.mceSelected {background-color:#3399ff !important}
+img {border:0;}
+table {cursor:default}
+table td, table th {cursor:text}
+ins {border-bottom:1px solid green; text-decoration: none; color:green}
+del {color:red; text-decoration:line-through}
+cite {border-bottom:1px dashed blue}
+acronym {border-bottom:1px dotted #CCC; cursor:help}
+abbr {border-bottom:1px dashed #CCC; cursor:help}
+
+* html body {
+scrollbar-3dlight-color:#F0F0EE;
+scrollbar-arrow-color:#676662;
+scrollbar-base-color:#F0F0EE;
+scrollbar-darkshadow-color:#DDD;
+scrollbar-face-color:#E0E0DD;
+scrollbar-highlight-color:#F0F0EE;
+scrollbar-shadow-color:#F0F0EE;
+scrollbar-track-color:#F5F5F5;
+}
+
+img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
+font[face=mceinline] {font-family:inherit !important}*/
+body, td, pre {color:#000; font: 12px/1.5em "Lucida Grande", Helvetica, Arial, sans-serif; margin:8px;}
+html,body {background:#FFF; padding: 0 !important; margin: 0 !important; }
+body {height: 94% !important; padding: .5% 5px !important;}
+body.mceForceColors {background:#FFF; color:#000;}
+h1 {font-size: 2em}
+h2 {font-size: 1.5em}
+h3 {font-size: 1.17em}
+h4 {font-size: 1em}
+h5 {font-size: .83em}
+h6 {font-size: .75em}
+.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
+a.mceItemAnchor {width:12px; line-height:6px; overflow:hidden; padding-left:12px; background:url(img/items.gif) no-repeat bottom left;}
+img.mceItemAnchor {width:12px; height:12px; background:url(img/items.gif) no-repeat;}
+img {border:0;}
+table {cursor:default}
+table td, table th {cursor:text}
+ins {border-bottom:1px solid green; text-decoration: none; color:green}
+del {color:red; text-decoration:line-through}
+cite {border-bottom:1px dashed blue}
+acronym {border-bottom:1px dotted #CCC; cursor:help}
+abbr, html\:abbr {border-bottom:1px dashed #CCC; cursor:help}
+
+* html body {
+scrollbar-3dlight-color:#F0F0EE;
+scrollbar-arrow-color:#676662;
+scrollbar-base-color:#F0F0EE;
+scrollbar-darkshadow-color:#DDD;
+scrollbar-face-color:#E0E0DD;
+scrollbar-highlight-color:#F0F0EE;
+scrollbar-shadow-color:#F0F0EE;
+scrollbar-track-color:#F5F5F5;
+}

public/javascripts/admin/plugins/tiny_mce/themes/advanced/skins/cirkuit/dialog.css

@@ -0,0 +1,65 @@
+/* Generic */
+body {
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 13px;
+/*  font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;*/
+  background: #fff;
+  padding:0;
+  margin:8px 8px 0 8px;
+  padding-bottom: 120px;
+}
+
+.title {
+  color: #8B8D9A;
+  padding: 5px 0px 10px 0px;
+}
+
+.tabs { display: none; }
+
+.mceActionPanel {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  height: 49px;
+  width: 100%;
+  background: #8b8d9a;
+  padding: 12px 0 0 0px;
+  text-align: right;
+}
+
+.mceActionPanel input {
+  color: #787A89;
+  text-shadow: 1px 1px 1px #fff;
+  background: #d9dce8;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  box-shadow: 1px 1px 1px #333;
+  padding: 8px 9px;
+  margin-right: 20px;
+  font-size: 1em;
+  font-family: 'Lucida Grande';
+  border: 0px;
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.01, rgb(215,219,231)),
+      color-stop(0.47, rgb(235,237,244)),
+      color-stop(0.7, rgb(235,237,244))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(215,219,231) 1%,
+      rgb(235,237,244) 47%,
+      rgb(235,237,244) 70%
+  );
+}
+
+
+
+/*#fancybox-inner .popup-actions p {
+  padding: 15px;
+  margin: 0px;
+  text-align: right;
+}*/

public/javascripts/admin/plugins/tiny_mce/themes/advanced/skins/cirkuit/dialog_old.css.css

@@ -0,0 +1,118 @@
+/*/* Generic */
+body {
+font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;
+background:#f1f1f1;
+padding:0;
+margin:8px 8px 0 8px;
+}
+
+html {background:#f1f1f1;}
+td {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
+textarea {resize:none;outline:none;}
+a:link, a:visited {color:black;}
+a:hover {color:#2B6FB6;}
+.nowrap {white-space: nowrap}
+
+/* Forms */
+fieldset {margin:0; padding:4px; border:1px solid #dfdfdf; font-family:Verdana, Arial; font-size:10px;}
+legend {color:#2B6FB6; font-weight:bold;}
+label.msg {display:none;}
+label.invalid {color:#EE0000; display:inline;}
+input.invalid {border:1px solid #EE0000;}
+input {background:#FFF; border:1px solid #dfdfdf;}
+input, select, textarea {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
+input, select, textarea {border:1px solid #dfdfdf;}
+input.radio {border:1px none #000000; background:transparent; vertical-align:middle;}
+input.checkbox {border:1px none #000000; background:transparent; vertical-align:middle;}
+.input_noborder {border:0;}
+
+/* Buttons */
+#insert, #cancel, #apply, .mceActionPanel .button, input.mceButton, .updateButton {
+  border: 1px solid #bbb;
+  margin:0;
+  padding:0 0 1px;
+  font-weight:bold;
+  font-size: 11px;
+  width:94px;
+  height:24px;
+  background:url(img/fade-butt.png) 0 0;
+  color:#000;
+  cursor:pointer;
+  -moz-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+}
+#insert:hover, #cancel:hover, input.mceButton:hover, .updateButton:hover,
+#insert:focus, #cancel:focus, input.mceButton:focus, .updateButton:focus {
+  border: 1px solid #555;
+}
+
+/* Browse */
+a.browse span {display:block; width:20px; height:18px; background:url(../../img/icons.gif) -860px 0; border:1px solid #FFF; margin-left:1px;}
+.mceOldBoxModel a.browse span {width:22px; height:20px;}
+a.browse:hover span {border:1px solid #0A246A; background-color:#B2BBD0;}
+a.browse span.disabled {border:1px solid white; -moz-opacity:0.3; opacity:0.3; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);}
+a.browse:hover span.disabled {border:1px solid white; background-color:transparent;}
+a.pickcolor span {display:block; width:20px; height:16px; background:url(../../img/icons.gif) -840px 0; margin-left:2px;}
+.mceOldBoxModel a.pickcolor span {width:21px; height:17px;}
+a.pickcolor:hover span {background-color:#B2BBD0;}
+a.pickcolor, a.browse {text-decoration:none}
+
+/* Charmap */
+table.charmap {border:1px solid #AAA; text-align:center}
+td.charmap, #charmap a {width:18px; height:18px; color:#000; border:1px solid #AAA; text-align:center; font-size:12px; vertical-align:middle; line-height: 18px;}
+#charmap a {display:block; color:#000; text-decoration:none; border:0}
+#charmap a:hover {background:#CCC;color:#2B6FB6}
+#charmap #codeN {font-size:10px; font-family:Arial,Helvetica,sans-serif; text-align:center}
+#charmap #codeV {font-size:40px; height:80px; border:1px solid #AAA; text-align:center}
+#charmap #charmapView {background-color:#fff;}
+
+/* Source */
+.wordWrapCode {vertical-align:middle; border:1px none #000000; background:transparent;}
+.mceActionPanel {margin-top:5px;}
+
+/* Tabs classes */
+.tabs {width:100%; height:18px; line-height:normal; background:url(img/tabs.gif) repeat-x 0 -72px;}
+.tabs ul {margin:0; padding:0; list-style:none;}
+.tabs li {float:left; background:url(img/tabs.gif) no-repeat 0 0; margin:0 2px 0 0; padding:0 0 0 10px; line-height:17px; height:18px; display:block;}
+.tabs li.current {background:url(img/tabs.gif) no-repeat 0 -18px; margin-right:2px;}
+.tabs span {float:left; display:block; background:url(img/tabs.gif) no-repeat right -36px; padding:0px 10px 0 0;}
+.tabs .current span {background:url(img/tabs.gif) no-repeat right -54px;}
+.tabs a {text-decoration:none; font-family:Verdana, Arial; font-size:10px;}
+.tabs a:link, .tabs a:visited, .tabs a:hover {color:black;}
+
+/* Panels */
+.panel_wrapper div.panel {display:none;}
+.panel_wrapper div.current {display:block; width:100%; height:300px; overflow:visible;}
+.panel_wrapper {border:1px solid #919B9C; border-top:0px; padding:10px; padding-top:5px; clear:both; background:white;}
+
+/* Columns */
+.column {float:left;}
+.properties {width:100%;}
+.properties .column1 {}
+.properties .column2 {text-align:left;}
+
+/* Titles */
+h1, h2, h3, h4 {color:#2B6FB6; margin:0; padding:0; padding-top:5px;}
+h3 {font-size:14px;}
+.title {font-size:12px; font-weight:bold; color:#2B6FB6;}
+
+/* Dialog specific */
+#link .panel_wrapper, #link div.current {height:125px;}
+#image .panel_wrapper, #image div.current {height:200px;}
+#plugintable thead {font-weight:bold; background:#DDD;}
+#plugintable, #about #plugintable td {border:1px solid #919B9C;}
+#plugintable {width:96%; margin-top:10px;}
+#pluginscontainer {height:290px; overflow:auto;}
+#colorpicker #preview {float:right; width:50px; height:14px;line-height:1px; border:1px solid black; margin-left:5px;}
+#colorpicker #colors {float:left; border:1px solid gray; cursor:crosshair;}
+#colorpicker #light {border:1px solid gray; margin-left:5px; float:left;width:15px; height:150px; cursor:crosshair;}
+#colorpicker #light div {overflow:hidden;}
+#colorpicker #previewblock {float:right; padding-left:10px; height:20px;}
+#colorpicker .panel_wrapper div.current {height:175px;}
+#colorpicker #namedcolors {width:150px;}
+#colorpicker #namedcolors a {display:block; float:left; width:10px; height:10px; margin:1px 1px 0 0; overflow:hidden;}
+#colorpicker #colornamecontainer {margin-top:5px;}
+#colorpicker #picker_panel fieldset {margin:auto;width:325px;}
+*/

public/javascripts/admin/plugins/tiny_mce/themes/advanced/skins/cirkuit/ui.css

@@ -0,0 +1,997 @@
+/* Reset */
+
+.cirkuitSkin table, .cirkuitSkin tbody, .cirkuitSkin a, .cirkuitSkin img, .cirkuitSkin tr, .cirkuitSkin div, .cirkuitSkin td, .cirkuitSkin iframe, .cirkuitSkin span, .cirkuitSkin *, .cirkuitSkin .mceText {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  white-space: nowrap;
+  text-decoration: none;
+  font-weight: normal;
+  cursor: default;
+  color: #000;
+  vertical-align: baseline;
+  width: auto;
+  border-collapse: separate;
+  text-align: left
+}
+
+.cirkuitSkin { display: inline-block; }
+
+.cirkuitSkin a:hover, .cirkuitSkin a:link, .cirkuitSkin a:visited, .cirkuitSkin a:active {
+  text-decoration: none;
+  font-weight: normal;
+  cursor: default;
+  color: #000
+}
+
+.cirkuitSkin table td {
+  vertical-align: middle
+}
+
+/* Containers */
+.cirkuitSkin table {
+  direction:ltr;
+}
+.cirkuitSkin iframe {
+  display: block;
+  background: #FFF;
+}
+
+.cirkuitSkin .mceToolbar {
+  height: 26px
+}
+
+.cirkuitSkin .mceLeft {
+  text-align: left
+}
+
+.cirkuitSkin .mceRight {
+  text-align: right
+}
+
+/* External */
+.cirkuitSkin .mceExternalToolbar {
+  position: absolute;
+  border: 1px solid #CCC;
+  border-bottom: 0;
+  display: none;
+}
+
+.cirkuitSkin .mceExternalToolbar td.mceToolbar {
+  padding-right: 13px;
+}
+
+.cirkuitSkin .mceExternalClose {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 7px;
+  height: 7px;
+  background: url('img/icons.png') -820px 0
+}
+
+/* Layout */
+.cirkuitSkin table.mceLayout {
+  border: 0;
+  border-left: 1px solid #CCC;
+  border-right: 1px solid #CCC
+}
+
+.cirkuitSkin table.mceLayout tr.mceFirst td {
+  border-top: 1px solid #ccced7;
+/*  border: none;*/
+/*  border-bottom: 10px solid #ebedf4;*/
+  background: #d7dbe7;
+/*  background: #fff;*/
+}
+
+.cirkuitSkin table.mceLayout tr.mceLast td {
+  border-bottom: 1px solid #CCC;
+  background: url('img/toolbarbg.png') center repeat-x;
+/*  background: transparent;*/
+}
+
+.cirkuitSkin table.mceToolbar, .cirkuitSkin tr.mceFirst .mceToolbar tr td, .cirkuitSkin tr.mceLast .mceToolbar tr td {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.cirkuitSkin td.mceToolbar {
+  padding-top: 1px;
+  vertical-align: top;
+  background-color: #DFDFDF;
+}
+
+.cirkuitSkin .mceIframeContainer {
+  border-top: 1px solid #CCC;
+  border-bottom: 1px solid #CCC;
+  /*height: 100%; 5/22/2010 - Joe Rozzi - taken out comparing to default theme ui.css */
+}
+
+.cirkuitSkin .mceStatusbar {
+  font-family: 'MS Sans Serif', sans-serif, Verdana, Arial;
+  font-size: 9pt;
+  line-height: 16px;
+  overflow: visible;
+  color: #666;
+  display: block;
+  height: 20px
+}
+
+.cirkuitSkin .mceStatusbar div {
+  float: left;
+  /*margin: 3px 0 0 4px;*/
+  margin:2px;
+  color: #666;
+}
+
+.cirkuitSkin .mceStatusbar a.mceResize {
+  display: block;
+  float: right;
+  background: url('img/icons.png') -801px -2px;
+  width: 20px;
+  height: 20px;
+  cursor: se-resize;
+  outline:0;
+}
+
+.cirkuitSkin .mceStatusbar a:hover {
+  text-decoration: underline
+}
+
+.cirkuitSkin table.mceToolbar {
+  margin-left: 3px
+}
+
+.cirkuitSkin span.mceIcon, .cirkuitSkin img.mceIcon {
+  display: block;
+  width: 20px;
+  height: 20px
+}
+
+.cirkuitSkin .mceIcon {
+  background: url('img/icons.png') no-repeat 20px 20px
+}
+
+.cirkuitSkin td.mceCenter {
+  text-align: center;
+}
+
+.cirkuitSkin td.mceCenter table {
+  margin: 0 auto;
+  text-align: left;
+}
+
+.cirkuitSkin td.mceRight table {
+  margin: 0 0 0 auto;
+}
+
+/* Button */
+.cirkuitSkin .mceButton {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  border-radius: 3px;
+  background-image: url("img/butt2.png");
+  background-position: left top;
+  background-repeat: repeat-x;
+  cursor: default;
+  display: block;
+  height: 20px;
+  margin: 1px;
+  padding: 1px 2px;
+  width: 20px;
+  background-color: #E9E8E8;
+  border-color: #B2B2B2;
+}
+
+.cirkuitSkin a.mceButtonEnabled:hover {
+  background-position: 0 -10px;
+  border-color: #777;
+}
+
+.cirkuitSkin a.mceButtonActive, .cirkuitSkin a.mceButtonSelected {
+  background-image: inherit;
+  border-color: #333;
+  background: #bcd0f5 !important;
+}
+
+.cirkuitSkin .mceButtonDisabled .mceIcon {
+  opacity: 0.3;
+  -ms-filter: 'alpha(opacity=30)';
+  filter: alpha(opacity = 30);
+}
+
+.cirkuitSkin .mceButtonLabeled {
+  width: auto;
+}
+
+.cirkuitSkin .mceButtonLabeled span.mceIcon {
+  float: left;
+}
+
+.cirkuitSkin span.mceButtonLabel {
+  display: block;
+  font-size: 10px;
+  padding: 4px 6px 0 22px;
+  font-family: Tahoma, Verdana, Arial, Helvetica;
+}
+
+.cirkuitSkin .mceButtonDisabled .mceButtonLabel {
+  color: #888;
+}
+
+/* Separator */
+.cirkuitSkin .mceSeparator {
+  background: none repeat scroll 0 0 transparent;
+  display: block;
+  height: 24px;
+  margin: 0 2px;
+  overflow: hidden;
+  width: 1px;
+}
+
+/* ListBox */
+.cirkuitSkin .mceListBox {
+  direction: ltr;
+  margin: 1px;
+}
+
+.cirkuitSkin .mceListBox, .cirkuitSkin .mceListBox a {
+  display: block
+}
+
+.cirkuitSkin .mceListBox .mceText {
+  padding: 1px 2px 1px 5px;
+  text-align: left;
+  text-decoration: none !important;
+  width: 70px;
+  background-image: url(img/butt2.png);
+  background-position: left top;
+  background-repeat: repeat-x;
+  font-family: Tahoma, Verdana, Arial, Helvetica;
+  font-size: 11px;
+  height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.cirkuitSkin .mceListBox .mceText, .cirkuitSkin .mceListBox .mceOpen {
+  background-color: #D5D5D5;
+  border-color: #B2B2B2;
+}
+
+.cirkuitSkin table.mceListBoxEnabled:hover .mceOpen, .cirkuitSkin .mceListBoxHover .mceOpen, .cirkuitSkin .mceListBoxSelected .mceOpen, .cirkuitSkin .mceListBoxSelected .mceText {
+  border-color: #777 !important;
+  background-color: #d5d5d5 !important;
+}
+
+.cirkuitSkin table.mceListBoxEnabled:hover .mceText, .cirkuitSkin .mceListBoxHover .mceText {
+  border-color: #777 !important;
+}
+
+.cirkuitSkin table.mceListBoxEnabled:hover .mceText, .cirkuitSkin .mceListBoxHover .mceText, .cirkuitSkin .mceListBoxSelected .mceText, .cirkuitSkin table.mceListBoxEnabled:hover .mceOpen, .cirkuitSkin .mceListBoxHover .mceOpen, .cirkuitSkin .mceListBoxSelected .mceOpen {
+  background-image: none;
+}
+
+.cirkuitSkin .mceListBoxDisabled a.mceText {
+  color: gray;
+  background-color: transparent;
+}
+
+.cirkuitSkin .mceListBoxMenu {
+  overflow: auto;
+  overflow-x: hidden
+}
+
+.cirkuitSkin .mceOldBoxModel .mceListBox .mceText {
+  height: 22px
+}
+
+.cirkuitSkin .mceOldBoxModel .mceListBox .mceOpen {
+  width: 11px;
+  height: 22px;
+}
+
+.cirkuitSkin select.mceNativeListBox {
+  font: 11px 'Lucida Grande', Helvetica, Arial, sans-serif;
+  background: #F0F0EE;
+  border: 1px solid gray;
+  margin-right: 2px;
+}
+
+.cirkuitSkin .mceListBox .mceOpen {
+  width: 14px;
+  height: 20px;
+  border-collapse: separate;
+  background-image: url(img/butt2.png);
+  background-position: left top;
+  background-repeat: repeat-x;
+  padding: 1px;
+  border-left: 0 none !important;
+}
+
+.cirkuitSkin .mceListBox .mceOpen span {
+  display: block;
+  width: 14px;
+  height: 20px;
+  background-image: url(img/down_arrow.gif);
+  background-position: 2px 1px;
+  background-repeat: no-repeat;
+}
+
+/* SplitButton */
+.cirkuitSkin .mceSplitButton {
+  width: 32px;
+  height: 20px;
+  direction: ltr
+}
+
+.cirkuitSkin .mceSplitButton a, .cirkuitSkin .mceSplitButton span {
+  height: 20px;
+}
+
+.cirkuitSkin .mceSplitButton a {
+  display: block;
+}
+
+.cirkuitSkin .mceSplitButton a.mceAction {
+  height: 20px;
+  width: 20px;
+  padding: 1px 2px;
+  display: block;
+}
+
+.cirkuitSkin .mceSplitButton span.mceAction {
+  width: 20px;
+  background: url('img/icons.png') 20px 20px;
+  display: block;
+}
+
+.cirkuitSkin .mceSplitButton a.mceOpen {
+  width: 10px;
+  height: 20px;
+  background-image: url(img/down_arrow.gif);
+  background-position: 1px 2px;
+  background-repeat: no-repeat;
+  padding: 1px;
+  border-left: 0 none !important;
+}
+
+.cirkuitSkin .mceSplitButtonDisabled .mceAction, .cirkuitSkin .mceSplitButtonDisabled span.mceOpen {
+  opacity: 0.3;
+  filter: alpha(opacity = 30);
+}
+
+.cirkuitSkin .mceSplitButtonActive a.mceAction {
+  border: 1px solid #0A246A;
+  background-color: #C2CBE0;
+}
+
+.cirkuitSkin table.mceSplitButton td {
+  background-image: url(img/butt2.png);
+  background-position: left top;
+  background-repeat: repeat-x;
+}
+
+.cirkuitSkin .mceSplitButton a.mceAction, .cirkuitSkin .mceSplitButton a.mceOpen {
+  border-color: #B2B2B2;
+}
+
+.cirkuitSkin .mceListBox a.mceText, .cirkuitSkin .mceSplitButton a.mceAction {
+  -moz-border-radius-bottomleft: 3px;
+  -webkit-border-bottom-left-radius: 3px;
+  -khtml-border-bottom-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  -moz-border-radius-topleft: 3px;
+  -webkit-border-top-left-radius: 3px;
+  -khtml-border-top-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+.cirkuitSkin .mceSplitButton a.mceOpen, .cirkuitSkin .mceListBox a.mceOpen {
+  -moz-border-radius-bottomright: 3px;
+  -webkit-border-bottom-right-radius: 3px;
+  -khtml-border-bottom-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  -moz-border-radius-topright: 3px;
+  -webkit-border-top-right-radius: 3px;
+  -khtml-border-top-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.cirkuitSkin .mceSplitButton a.mceOpen:hover, .cirkuitSkin .mceSplitButtonSelected a.mceOpen, .cirkuitSkin table.mceSplitButtonEnabled:hover a.mceAction, .cirkuitSkin .mceSplitButton a.mceAction:hover {
+  background-color: #d5d5d5;
+  border-color: #777 !important;
+}
+
+/* ColorSplitButton */
+.cirkuitSkin div.mceColorSplitMenu table {
+  background: #FFF;
+  border: 1px solid gray
+}
+
+.cirkuitSkin .mceColorSplitMenu td {
+  padding: 2px
+}
+
+.cirkuitSkin .mceColorSplitMenu a {
+  display: block;
+  width: 9px;
+  height: 9px;
+  overflow: hidden;
+  border: 1px solid #808080
+}
+
+.cirkuitSkin .mceColorSplitMenu td.mceMoreColors {
+  padding: 1px 3px 1px 1px
+}
+
+.cirkuitSkin .mceColorSplitMenu a.mceMoreColors {
+  width: 100%;
+  height: auto;
+  text-align: center;
+  font-family: Tahoma, Verdana, Arial, Helvetica;
+  font-size: 11px;
+  line-height: 20px;
+  border: 1px solid #FFF
+}
+
+.cirkuitSkin .mceColorSplitMenu a.mceMoreColors:hover {
+  border: 1px solid #0A246A;
+  background-color: #B6BDD2
+}
+
+.cirkuitSkin a.mceMoreColors:hover {
+  border: 1px solid #0A246A
+}
+
+.cirkuitSkin .mceColorPreview {
+  margin-left: 2px;
+  width: 16px;
+  height: 3px;
+  overflow: hidden;
+  background: #9a9b9a
+}
+
+.cirkuitSkin .mce_forecolor span.mceAction, .cirkuitSkin .mce_backcolor span.mceAction {
+  overflow: hidden;
+  height: 16px
+}
+
+/* Menu */
+.cirkuitSkin .mceMenu {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  border: 1px solid #D4D0C8
+}
+
+.cirkuitSkin .mceNoIcons span.mceIcon {
+  width: 0;
+}
+
+.cirkuitSkin .mceNoIcons a .mceText {
+  padding-left: 10px
+}
+
+.cirkuitSkin .mceMenu table {
+  background: #FFF
+}
+
+.cirkuitSkin .mceMenu a, .cirkuitSkin .mceMenu span, .cirkuitSkin .mceMenu {
+  display: block
+}
+
+.cirkuitSkin .mceMenu td {
+  height: 20px
+}
+
+.cirkuitSkin .mceMenu a {
+  position: relative;
+  padding: 3px 0 4px 0
+}
+
+.cirkuitSkin .mceMenu .mceText {
+  position: relative;
+  display: block;
+  font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
+  color: #000;
+  cursor: default;
+  margin: 0;
+  padding: 0 25px 0 25px;
+  display: block
+}
+
+.cirkuitSkin .mceMenu span.mceText, .cirkuitSkin .mceMenu .mcePreview {
+  font-size: 11px
+}
+
+.cirkuitSkin .mceMenu pre.mceText {
+  font-family: Monospace
+}
+
+.cirkuitSkin .mceMenu .mceIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 22px;
+}
+
+.cirkuitSkin .mceMenu .mceMenuItemEnabled a:hover, .cirkuitSkin .mceMenu .mceMenuItemActive {
+  background-color: #dbecf3
+}
+
+.cirkuitSkin td.mceMenuItemSeparator {
+  background: #DDD;
+  height: 1px
+}
+
+.cirkuitSkin .mceMenuItemTitle a {
+  border: 0;
+  background: #EEE;
+  border-bottom: 1px solid #DDD
+}
+
+.cirkuitSkin .mceMenuItemTitle span.mceText {
+  color: #000;
+  font-weight: bold;
+  padding-left: 4px
+}
+
+.cirkuitSkin .mceMenuItemDisabled .mceText {
+  color: #888
+}
+
+.cirkuitSkin .mceMenuItemSelected .mceIcon {
+  background: url('img/menu-check.png')
+}
+
+.cirkuitSkin .mceNoIcons .mceMenuItemSelected a {
+  background: url('img/menu-arrow.png') no-repeat -6px center
+}
+
+.cirkuitSkin .mceMenu span.mceMenuLine {
+  display: none
+}
+
+.cirkuitSkin .mceMenuItemSub a {
+  background: url('img/menu-arrow.png') no-repeat top right;
+}
+
+/* Progress,Resize */
+.cirkuitSkin .mceBlocker {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  opacity: 0.5;
+  -ms-filter: 'alpha(opacity=50)';
+  filter: alpha(opacity = 50);
+  background: #FFF
+}
+
+.cirkuitSkin .mceProgress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1001;
+  background: url('img/progress.gif') no-repeat;
+  width: 32px;
+  height: 32px;
+  margin: -16px 0 0 -16px
+}
+
+.cirkuitSkin .mcePlaceHolder {
+  border: 1px dotted gray
+}
+
+/* Formats */
+.cirkuitSkin .mce_formatPreview a {
+  font-size: 10px
+}
+
+.cirkuitSkin .mce_p span.mceText {
+}
+
+.cirkuitSkin .mce_address span.mceText {
+  font-style: italic
+}
+
+.cirkuitSkin .mce_pre span.mceText {
+  font-family: monospace
+}
+
+.cirkuitSkin .mce_h1 span.mceText {
+  font-weight: bolder;
+  font-size: 2em
+}
+
+.cirkuitSkin .mce_h2 span.mceText {
+  font-weight: bolder;
+  font-size: 1.5em
+}
+
+.cirkuitSkin .mce_h3 span.mceText {
+  font-weight: bolder;
+  font-size: 1.17em
+}
+
+.cirkuitSkin .mce_h4 span.mceText {
+  font-weight: bolder;
+  font-size: 1em
+}
+
+.cirkuitSkin .mce_h5 span.mceText {
+  font-weight: bolder;
+  font-size: .83em
+}
+
+.cirkuitSkin .mce_h6 span.mceText {
+  font-weight: bolder;
+  font-size: .75em
+}
+
+/* Theme */
+.cirkuitSkin span.mce_bold {
+  background-position: 0 0
+}
+
+.cirkuitSkin span.mce_italic {
+  background-position: -60px 0
+}
+
+.cirkuitSkin span.mce_underline {
+  background-position: -140px 0
+}
+
+.cirkuitSkin span.mce_strikethrough {
+  background-position: -120px 0
+}
+
+.cirkuitSkin span.mce_undo {
+  background-position: -160px 0
+}
+
+.cirkuitSkin span.mce_redo {
+  background-position: -100px 0
+}
+
+.cirkuitSkin span.mce_cleanup {
+  background-position: -40px 0
+}
+
+.cirkuitSkin span.mce_bullist {
+  background-position: -20px 0
+}
+
+.cirkuitSkin span.mce_numlist {
+  background-position: -80px 0
+}
+
+.cirkuitSkin span.mce_justifyleft {
+  background-position: -460px 0
+}
+
+.cirkuitSkin span.mce_justifyright {
+  background-position: -480px 0
+}
+
+.cirkuitSkin span.mce_justifycenter {
+  background-position: -420px 0
+}
+
+.cirkuitSkin span.mce_justifyfull {
+  background-position: -440px 0
+}
+
+.cirkuitSkin span.mce_anchor {
+  background-position: -200px 0
+}
+
+.cirkuitSkin span.mce_indent {
+  background-position: -400px 0
+}
+
+.cirkuitSkin span.mce_outdent {
+  background-position: -540px 0
+}
+
+.cirkuitSkin span.mce_link {
+  background-position: -500px 0
+}
+
+.cirkuitSkin span.mce_unlink {
+  background-position: -640px 0
+}
+
+.cirkuitSkin span.mce_sub {
+  background-position: -600px 0
+}
+
+.cirkuitSkin span.mce_sup {
+  background-position: -620px 0
+}
+
+.cirkuitSkin span.mce_removeformat {
+  background-position: -580px 0
+}
+
+.cirkuitSkin span.mce_newdocument {
+  background-position: -520px 0
+}
+
+.cirkuitSkin span.mce_image {
+  background-position: -380px 0
+}
+
+.cirkuitSkin span.mce_help {
+  background-position: -340px 0
+}
+
+.cirkuitSkin span.mce_code {
+  background-position: -260px 0
+}
+
+.cirkuitSkin span.mce_hr {
+  background-position: -360px 0
+}
+
+.cirkuitSkin span.mce_visualaid {
+  background-position: -660px 0
+}
+
+.cirkuitSkin span.mce_charmap {
+  background-position: -240px 0
+}
+
+.cirkuitSkin span.mce_paste {
+  background-position: -560px 0
+}
+
+.cirkuitSkin span.mce_copy {
+  background-position: -700px 0
+}
+
+.cirkuitSkin span.mce_cut {
+  background-position: -680px 0
+}
+
+.cirkuitSkin span.mce_blockquote {
+  background-position: -220px 0
+}
+
+.cirkuitSkin .mce_forecolor span.mceAction {
+  background-position: -720px 0
+}
+
+.cirkuitSkin .mce_backcolor span.mceAction {
+  background-position: -760px 0
+}
+
+.cirkuitSkin span.mce_forecolorpicker {
+  background-position: -720px 0
+}
+
+.cirkuitSkin span.mce_backcolorpicker {
+  background-position: -760px 0
+}
+
+/* Plugins */
+.cirkuitSkin span.mce_advhr {
+  background-position: -0px -20px
+}
+
+.cirkuitSkin span.mce_ltr {
+  background-position: -20px -20px
+}
+
+.cirkuitSkin span.mce_rtl {
+  background-position: -40px -20px
+}
+
+.cirkuitSkin span.mce_emotions {
+  background-position: -60px -20px
+}
+
+.cirkuitSkin span.mce_fullpage {
+  background-position: -80px -20px
+}
+
+.cirkuitSkin span.mce_fullscreen {
+  background-position: -100px -20px
+}
+
+.cirkuitSkin span.mce_iespell {
+  background-position: -120px -20px
+}
+
+.cirkuitSkin span.mce_insertdate {
+  background-position: -140px -20px
+}
+
+.cirkuitSkin span.mce_inserttime {
+  background-position: -160px -20px
+}
+
+.cirkuitSkin span.mce_absolute {
+  background-position: -180px -20px
+}
+
+.cirkuitSkin span.mce_backward {
+  background-position: -200px -20px
+}
+
+.cirkuitSkin span.mce_forward {
+  background-position: -220px -20px
+}
+
+.cirkuitSkin span.mce_insert_layer {
+  background-position: -240px -20px
+}
+
+.cirkuitSkin span.mce_insertlayer {
+  background-position: -260px -20px
+}
+
+.cirkuitSkin span.mce_movebackward {
+  background-position: -280px -20px
+}
+
+.cirkuitSkin span.mce_moveforward {
+  background-position: -300px -20px
+}
+
+.cirkuitSkin span.mce_media {
+  background-position: -320px -20px
+}
+
+.cirkuitSkin span.mce_nonbreaking {
+  background-position: -340px -20px
+}
+
+.cirkuitSkin span.mce_pastetext {
+  background-position: -360px -20px
+}
+
+.cirkuitSkin span.mce_pasteword {
+  background-position: -380px -20px
+}
+
+.cirkuitSkin span.mce_selectall {
+  background-position: -400px -20px
+}
+
+.cirkuitSkin span.mce_preview {
+  background-position: -420px -20px
+}
+
+.cirkuitSkin span.mce_print {
+  background-position: -440px -20px
+}
+
+.cirkuitSkin span.mce_cancel {
+  background-position: -460px -20px
+}
+
+.cirkuitSkin span.mce_save {
+  background-position: -480px -20px
+}
+
+.cirkuitSkin span.mce_replace {
+  background-position: -500px -20px
+}
+
+.cirkuitSkin span.mce_search {
+  background-position: -520px -20px
+}
+
+.cirkuitSkin span.mce_styleprops {
+  background-position: -560px -20px
+}
+
+.cirkuitSkin span.mce_table {
+  background-position: -580px -20px
+}
+
+.cirkuitSkin span.mce_cell_props {
+  background-position: -600px -20px
+}
+
+.cirkuitSkin span.mce_delete_table {
+  background-position: -620px -20px
+}
+
+.cirkuitSkin span.mce_delete_col {
+  background-position: -640px -20px
+}
+
+.cirkuitSkin span.mce_delete_row {
+  background-position: -660px -20px
+}
+
+.cirkuitSkin span.mce_col_after {
+  background-position: -680px -20px
+}
+
+.cirkuitSkin span.mce_col_before {
+  background-position: -700px -20px
+}
+
+.cirkuitSkin span.mce_row_after {
+  background-position: -720px -20px
+}
+
+.cirkuitSkin span.mce_row_before {
+  background-position: -740px -20px
+}
+
+.cirkuitSkin span.mce_merge_cells {
+  background-position: -760px -20px
+}
+
+.cirkuitSkin span.mce_table_props {
+  background-position: -980px -20px
+}
+
+.cirkuitSkin span.mce_row_props {
+  background-position: -780px -20px
+}
+
+.cirkuitSkin span.mce_split_cells {
+  background-position: -800px -20px
+}
+
+.cirkuitSkin span.mce_template {
+  background-position: -820px -20px
+}
+
+.cirkuitSkin span.mce_visualchars {
+  background-position: -840px -20px
+}
+
+.cirkuitSkin span.mce_abbr {
+  background-position: -860px -20px
+}
+
+.cirkuitSkin span.mce_acronym {
+  background-position: -880px -20px
+}
+
+.cirkuitSkin span.mce_attribs {
+  background-position: -900px -20px
+}
+
+.cirkuitSkin span.mce_cite {
+  background-position: -920px -20px
+}
+
+.cirkuitSkin span.mce_del {
+  background-position: -940px -20px
+}
+
+.cirkuitSkin span.mce_ins {
+  background-position: -960px -20px
+}
+
+.cirkuitSkin span.mce_pagebreak {
+  background-position: 0 -40px
+}
+
+.cirkuitSkin .mce_spellchecker span.mceAction {
+  background-position: -540px -20px
+}
+
+.cirkuitSkin span.mce_restoredraft {
+  background-position: -20px -40px
+}
+
+/* border */
+.cirkuitSkin .mceExternalToolbar, .cirkuitSkin .mceButton, .cirkuitSkin a.mceButtonEnabled:hover, .cirkuitSkin a.mceButtonActive, .cirkuitSkin a.mceButtonSelected, .cirkuitSkin .mceListBox .mceText, .cirkuitSkin .mceListBox .mceOpen, .cirkuitSkin table.mceListBoxEnabled:hover .mceText, .cirkuitSkin .mceListBoxHover .mceText, .cirkuitSkin .mceListBoxSelected .mceText, .cirkuitSkin table.mceListBoxEnabled:hover .mceOpen, .cirkuitSkin .mceListBoxHover .mceOpen, .cirkuitSkin .mceListBoxSelected .mceOpen, .cirkuitSkin select.mceListBox, .cirkuitSkin .mceSplitButton a.mceAction, .cirkuitSkin .mceSplitButton a.mceOpen, .cirkuitSkin .mceSplitButton a.mceOpen:hover, .cirkuitSkin .mceSplitButtonSelected a.mceOpen, .cirkuitSkin table.mceSplitButtonEnabled:hover a.mceAction, .cirkuitSkin .mceSplitButton a.mceAction:hover, .cirkuitSkin div.mceColorSplitMenu table, .cirkuitSkin .mceColorSplitMenu a, .cirkuitSkin .mceColorSplitMenu a.mceMoreColors, .cirkuitSkin .mceColorSplitMenu a.mceMoreColors:hover, .cirkuitSkin a.mceMoreColors:hover, .cirkuitSkin .mceMenu {
+  border-style: solid;
+  border-width: 1px;
+}
+

public/stylesheets/admin/formtastic_changes.css

@@ -107,6 +107,11 @@ form.formtastic fieldset ol li input[type=password] {
   border: 1px solid #a6a8b8;
 }
 
+form.formtastic fieldset ol li.text textarea.html {
+  height: 300px;
+  width: 46%;
+}
+
 form.formtastic fieldset ol li p.inline-hints {  margin-left: 20%; }
 form.formtastic fieldset ol li p.inline-hints a { color: #1f82bc; }