Index: /extensions/bbcode_bar/bbcode_bar.inc.php
===================================================================
--- /extensions/bbcode_bar/bbcode_bar.inc.php	(revision 23277)
+++ /extensions/bbcode_bar/bbcode_bar.inc.php	(revision 23278)
@@ -26,5 +26,6 @@
     array('ol','ul'),
     array('img','url','email'),
-    array('size','color','smilies'),
+    array('size','color'),
+    array('smilies'),
     );
     
Index: /extensions/bbcode_bar/main.inc.php
===================================================================
--- /extensions/bbcode_bar/main.inc.php	(revision 23277)
+++ /extensions/bbcode_bar/main.inc.php	(revision 23278)
@@ -4,5 +4,5 @@
 Version: auto
 Description: Allow use BBCode for comments and descriptions.
-Plugin URI: http://piwigo.org/ext/extension_view.php?eid=140
+Plugin URI: auto
 Author: Atadilo & P@t & Mistic
 */
Index: /extensions/bbcode_bar/template/bbcode_bar.tpl
===================================================================
--- /extensions/bbcode_bar/template/bbcode_bar.tpl	(revision 23277)
+++ /extensions/bbcode_bar/template/bbcode_bar.tpl	(revision 23278)
@@ -7,43 +7,43 @@
     {counter start=0 print=false assign=bbc_counter}
     
-    {if $BBC.b}{counter}{ldelim}name:'{'Bold : [b]bold[/b]'|@translate}', key:'B', openWith:'[b]', closeWith:'[/b]', className:'markItUpBold'},{/if}
-    {if $BBC.i}{counter}{ldelim}name:'{'Italic : [i]italic[/i]'|@translate}', key:'I', openWith:'[i]', closeWith:'[/i]', className:'markItUpItalic'},{/if}
-    {if $BBC.u}{counter}{ldelim}name:'{'Underline : [u]underline[/u]'|@translate}', key:'U', openWith:'[u]', closeWith:'[/u]', className:'markItUpUnderline'},{/if}
-    {if $BBC.s}{counter}{ldelim}name:'{'Striped  : [s]striped[/s]'|@translate}', key:'S', openWith:'[s]', closeWith:'[/s]', className:'markItUpStroke'},{/if}
+    {if $BBC.b}{counter}{ldelim}name:'{'Bold : [b]bold[/b]'|@translate}', key:'B', openWith:'[b]', closeWith:'[/b]', className:'miuIcon miuBold'},{/if}
+    {if $BBC.i}{counter}{ldelim}name:'{'Italic : [i]italic[/i]'|@translate}', key:'I', openWith:'[i]', closeWith:'[/i]', className:'miuIcon miuItalic'},{/if}
+    {if $BBC.u}{counter}{ldelim}name:'{'Underline : [u]underline[/u]'|@translate}', key:'U', openWith:'[u]', closeWith:'[/u]', className:'miuIcon miuUnderline'},{/if}
+    {if $BBC.s}{counter}{ldelim}name:'{'Striped  : [s]striped[/s]'|@translate}', key:'S', openWith:'[s]', closeWith:'[/s]', className:'miuIcon miuStroke'},{/if}
     
     {if $SEP[0]}{counter}{ldelim}separator:'|'},{/if}
     
-    {if $BBC.p}{counter}{ldelim}name:'{'Paragraph : [p]Paragraph[/p]'|@translate}', openWith:'[p]', closeWith:'[/p]', className:'markItUpParagraph'},{/if}
-    {if $BBC.center}{counter}{ldelim}name:'{'Center : [center]center[/center]'|@translate}', openWith:'[center]', closeWith:'[/center]', className:'markItUpCenter'},{/if}
-    {if $BBC.right}{counter}{ldelim}name:'{'Right : [right]right[/right]'|@translate}', openWith:'[right]', closeWith:'[/right]', className:'markItUpRight'},{/if}
-    {if $BBC.quote}{counter}{ldelim}name:'{'Quote : [quote]quote[/quote]'|@translate}', openWith:'[quote]', closeWith:'[/quote]', className:'markItUpQuote'},{/if}
+    {if $BBC.p}{counter}{ldelim}name:'{'Paragraph : [p]Paragraph[/p]'|@translate}', openWith:'[p]', closeWith:'[/p]', className:'miuIcon miuParagraph'},{/if}
+    {if $BBC.center}{counter}{ldelim}name:'{'Center : [center]center[/center]'|@translate}', openWith:'[center]', closeWith:'[/center]', className:'miuIcon miuCenter'},{/if}
+    {if $BBC.right}{counter}{ldelim}name:'{'Right : [right]right[/right]'|@translate}', openWith:'[right]', closeWith:'[/right]', className:'miuIcon miuRight'},{/if}
+    {if $BBC.quote}{counter}{ldelim}name:'{'Quote : [quote]quote[/quote]'|@translate}', openWith:'[quote]', closeWith:'[/quote]', className:'miuIcon miuQuote'},{/if}
     
     {if $SEP[1]}{counter}{ldelim}separator:'|'},{/if}
     
-    {if $BBC.ul}{counter}{ldelim}name:'{'Unordered list : [ul][li]element[/li][/ul]'|@translate}', openWith:'[ul]\n', closeWith:'\n[/ul]', className:'markItUpListUL'},{/if}
-    {if $BBC.ol}{counter}{ldelim}name:'{'Ordered list : [ol][li]element[/li][/ol]'|@translate}', openWith:'[ol]\n', closeWith:'\n[/ol]', className:'markItUpListOL'},{/if}
-    {if $BBC.ul OR $BBC.ol}{counter}{ldelim}name:'{'List element : [li]element[/li]'|@translate}', multiline:true, openWith:'[li]', closeWith:'[/li]', className:'markItUpListLI'},{/if}
+    {if $BBC.ul}{counter}{ldelim}name:'{'Unordered list : [ul][li]element[/li][/ul]'|@translate}', openWith:'[ul]\n', closeWith:'\n[/ul]', className:'miuIcon miuListUL'},{/if}
+    {if $BBC.ol}{counter}{ldelim}name:'{'Ordered list : [ol][li]element[/li][/ol]'|@translate}', openWith:'[ol]\n', closeWith:'\n[/ol]', className:'miuIcon miuListOL'},{/if}
+    {if $BBC.ul OR $BBC.ol}{counter}{ldelim}name:'{'List element : [li]element[/li]'|@translate}', multiline:true, openWith:'[li]', closeWith:'[/li]', className:'miuIcon miuListLI'},{/if}
     
     {if $SEP[2]}{counter}{ldelim}separator:'|' },{/if}
     
-    {if $BBC.img}{counter}{ldelim}name:'{'Picture : [img]picture[/img]'|@translate}', key:'P', replaceWith:'[img][![Source:!:http://]!][/img]', className:'markItUpPicture'},{/if}
-    {if $BBC.url}{counter}{ldelim}name:'{'URL : [url=URL]Title[/url]'|@translate}', key:'L', openWith:'[url=[![Url:!:http://]!]]', closeWith:'[/url]', className:'markItUpLink'},{/if}
-    {if $BBC.email}{counter}{ldelim}name:'{'E-mail : [email]Email[/email]'|@translate}', key:'M', replaceWith:'[email][![Mail]!][/email]', className:'markItUpMail'},{/if}
+    {if $BBC.img}{counter}{ldelim}name:'{'Picture : [img]picture[/img]'|@translate}', key:'P', replaceWith:'[img][![Source:!:http://]!][/img]', className:'miuIcon miuPicture'},{/if}
+    {if $BBC.url}{counter}{ldelim}name:'{'URL : [url=URL]Title[/url]'|@translate}', key:'L', openWith:'[url=[![Url:!:http://]!]]', closeWith:'[/url]', className:'miuIcon miuLink'},{/if}
+    {if $BBC.email}{counter}{ldelim}name:'{'E-mail : [email]Email[/email]'|@translate}', key:'M', replaceWith:'[email][![Mail]!][/email]', className:'miuIcon miuMail'},{/if}
     
     {if $SEP[3]}{counter}{ldelim}separator:'|'},{/if}
     
     {if $BBC.size}{counter}
-    {ldelim}name:'{'Font size : [size=X]text[/size]'|@translate}', className:'markItUpSize',
+    {ldelim}name:'{'Font size : [size=X]text[/size]'|@translate}', className:'miuIcon miuSize',
       dropMenu :[
-        {ldelim}name:'{'tiny'|@translate}', openWith:'[size=7]', closeWith:'[/size]' },
-        {ldelim}name:'{'small'|@translate}', openWith:'[size=9]', closeWith:'[/size]' },
-        {ldelim}name:'{'normal'|@translate}', openWith:'[size=12]', closeWith:'[/size]' },
-        {ldelim}name:'{'large'|@translate}', openWith:'[size=18]', closeWith:'[/size]' },
-        {ldelim}name:'{'huge'|@translate}', openWith:'[size=24]', closeWith:'[/size]' },
+        {ldelim}name:'{'tiny'|@translate}', openWith:'[size=7]', closeWith:'[/size]', className:'miuSizeTiny' },
+        {ldelim}name:'{'small'|@translate}', openWith:'[size=9]', closeWith:'[/size]', className:'miuSizeSmall' },
+        {ldelim}name:'{'normal'|@translate}', openWith:'[size=12]', closeWith:'[/size]', className:'miuSizeNormal' },
+        {ldelim}name:'{'large'|@translate}', openWith:'[size=18]', closeWith:'[/size]', className:'miuSizeLarge' },
+        {ldelim}name:'{'huge'|@translate}', openWith:'[size=24]', closeWith:'[/size]', className:'miuSizeHuge' },
       ]
     },
     {/if}
     {if $BBC.color}{counter}
-    {ldelim}name:'{'Font color : [color=color]text[/color]'|@translate}', className:'markItUpColors', openWith:'[color=[![Color]!]]', closeWith:'[/color]', 
+    {ldelim}name:'{'Font color : [color=color]text[/color]'|@translate}', className:'miuIcon miuColors', openWith:'[color=[![Color]!]]', closeWith:'[/color]', 
       dropMenu: [
         {ldelim}name:'{'Yellow'|@translate}', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" },
@@ -61,4 +61,6 @@
     },
     {/if}
+    
+    {if $SEP[4]}{counter}{ldelim}separator:'|'},{/if}
   ]
 };{/strip}
Index: /extensions/bbcode_bar/template/bbcode_bar_admin.tpl
===================================================================
--- /extensions/bbcode_bar/template/bbcode_bar_admin.tpl	(revision 23277)
+++ /extensions/bbcode_bar/template/bbcode_bar_admin.tpl	(revision 23278)
@@ -1,10 +1,15 @@
-{html_head}{literal}
-<style type="text/css">
-  form.properties span.property {
-    width:55%;
-    font-weight:normal;
-  }
-</style>
-{/literal}{/html_head}
+{html_style}{literal}
+.miuIcon a {
+  display:inline-block;
+  width:16px;
+  height:16px;
+  padding:2px;
+  text-decoration:none;
+  background-color:rgba(241,241,241,0.9);
+  border-radius:2px;
+}
+{/literal}{/html_style}
+
+{combine_css path=$BBCODE_PATH|@cat:"template/markitup/style.markitup.css"}
 
 <div class="titrePage">
@@ -15,68 +20,83 @@
   <fieldset>
     <legend>{'Available options'|@translate}</legend>
-    <ul>
-      <li>
-        <label><span class="property">{'Bold : [b]bold[/b]'|@translate}</span>
-        <input type="checkbox" name="b" {$B_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/bold.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Italic : [i]italic[/i]'|@translate}</span>
-        <input type="checkbox" name="i" {$I_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/italic.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Underline : [u]underline[/u]'|@translate}</span>
-        <input type="checkbox" name="u" {$U_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/underline.png"></label>
-      </li>      
-      <li>
-        <label><span class="property">{'Striped  : [s]striped[/s]'|@translate}</span>
-        <input type="checkbox" name="s" {$S_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/stroke.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Paragraph : [p]Paragraph[/p]'|@translate}</span>
-        <input type="checkbox" name="p" {$P_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/p.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Center : [center]center[/center]'|@translate}</span>
-        <input type="checkbox" name="center" {$CENTER_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/center.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Right : [right]right[/right]'|@translate}</span>
-        <input type="checkbox" name="right" {$RIGHT_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/right.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Quote : [quote]quote[/quote]'|@translate}</span>
-        <input type="checkbox" name="quote" {$QUOTE_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/quote.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Unordered list : [ul][li]element[/li][/ul]'|@translate}</span>
-        <input type="checkbox" name="ul" {$UL_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/list-bullet.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Ordered list : [ol][li]element[/li][/ol]'|@translate}</span>
-        <input type="checkbox" name="ol" {$OL_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/list-numeric.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Picture : [img]picture[/img]'|@translate}</span>
-        <input type="checkbox" name="img" {$IMG_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/picture.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'URL : [url=URL]Title[/url]'|@translate}</span>
-        <input type="checkbox" name="url" {$URL_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/link.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'E-mail : [email]Email[/email]'|@translate}</span>
-        <input type="checkbox" name="email" {$EMAIL_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/mail.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Font size : [size=X]text[/size]'|@translate}</span>
-        <input type="checkbox" name="size" {$SIZE_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/fonts.png"></label>
-      </li>
-      <li>
-        <label><span class="property">{'Font color : [color=color]text[/color]'|@translate}</span>
-        <input type="checkbox" name="color" {$COLOR_STATUS} value="1"/> <img src="{$BBCODE_PATH}template/markitup/images/colors.png"></label>
-      </li>
+    <ul class="markItUp">
+      <li><label>
+        <span class="miuIcon miuBold"><a>&nbsp;</a></span>
+        <input type="checkbox" name="b" {$B_STATUS} value="1"/>
+        {'Bold : [b]bold[/b]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuItalic"><a>&nbsp;</a></span>
+        <input type="checkbox" name="i" {$I_STATUS} value="1"/>
+        {'Italic : [i]italic[/i]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuUnderline"><a>&nbsp;</a></span>
+        <input type="checkbox" name="u" {$U_STATUS} value="1"/>
+        {'Underline : [u]underline[/u]'|@translate}
+      </label></li>      
+      <li><label>
+        <span class="miuIcon miuStroke"><a>&nbsp;</a></span>
+        <input type="checkbox" name="s" {$S_STATUS} value="1"/>
+        {'Striped  : [s]striped[/s]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuParagraph"><a>&nbsp;</a></span>
+        <input type="checkbox" name="p" {$P_STATUS} value="1"/>
+        {'Paragraph : [p]Paragraph[/p]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuCenter"><a>&nbsp;</a></span>
+        <input type="checkbox" name="center" {$CENTER_STATUS} value="1"/>
+        {'Center : [center]center[/center]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuRight"><a>&nbsp;</a></span>
+        <input type="checkbox" name="right" {$RIGHT_STATUS} value="1"/>
+        {'Right : [right]right[/right]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuQuote"><a>&nbsp;</a></span>
+        <input type="checkbox" name="quote" {$QUOTE_STATUS} value="1"/>
+        {'Quote : [quote]quote[/quote]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuListUL"><a>&nbsp;</a></span>
+        <input type="checkbox" name="ul" {$UL_STATUS} value="1"/>
+        {'Unordered list : [ul][li]element[/li][/ul]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuListOL"><a>&nbsp;</a></span>
+        <input type="checkbox" name="ol" {$OL_STATUS} value="1"/>
+        {'Ordered list : [ol][li]element[/li][/ol]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuPicture"><a>&nbsp;</a></span>
+        <input type="checkbox" name="img" {$IMG_STATUS} value="1"/>
+        {'Picture : [img]picture[/img]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuLink"><a>&nbsp;</a></span>
+        <input type="checkbox" name="url" {$URL_STATUS} value="1"/>
+        {'URL : [url=URL]Title[/url]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuMail"><a>&nbsp;</a></span>
+        <input type="checkbox" name="email" {$EMAIL_STATUS} value="1"/>
+        {'E-mail : [email]Email[/email]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuSize"><a>&nbsp;</a></span>
+        <input type="checkbox" name="size" {$SIZE_STATUS} value="1"/>
+        {'Font size : [size=X]text[/size]'|@translate}
+      </label></li>
+      <li><label>
+        <span class="miuIcon miuColors"><a>&nbsp;</a></span>
+        <input type="checkbox" name="color" {$COLOR_STATUS} value="1"/>
+        {'Font color : [color=color]text[/color]'|@translate}
+      </label></li>
     </ul>
   </fieldset>
   
-  <p><input class="submit" type="submit" value="{'Submit'|@translate}" name="submit"/></p>
+  <p class="formButtons"><input class="submit" type="submit" value="{'Submit'|@translate}" name="submit"/></p>
 </form>
Index: /extensions/bbcode_bar/template/markitup/style.markitup.css
===================================================================
--- /extensions/bbcode_bar/template/markitup/style.markitup.css	(revision 23277)
+++ /extensions/bbcode_bar/template/markitup/style.markitup.css	(revision 23278)
@@ -1,5 +1,6 @@
 /* common */
 .markItUp * {
-  margin:0px; padding:0px;
+  margin:0px;
+  padding:0px;
   outline:none;
 }
@@ -46,5 +47,5 @@
 }
 .markItUpHeader ul .markItUpDropMenu {
-  background:transparent url(images/menu.png) no-repeat 120% 100%;
+  background:transparent url('images/menu.png') no-repeat 120% 100%;
   margin-right:5px;
 }
@@ -62,8 +63,4 @@
   margin:0px;
 }
-.markItUpHeader ul .markItUpSize li {
-  border-bottom:1px solid #444;
-  border-radius:2px;
-}
 .markItUpHeader ul .markItUpSeparator {
   margin:2px 10px !important;
@@ -77,8 +74,7 @@
 .markItUpHeader ul a {
   display:block;
-  width:16px; height:16px;
+  width:16px;
+  height:16px;
   text-indent:-10000px;
-  background-position:center center;
-  background-repeat:no-repeat;
   padding:2px;
   border:1px solid transparent;
@@ -92,104 +88,127 @@
   border:0;
 }
-.markItUpHeader ul .markItUpSize li a {
-  width:90px; 
-  padding:2px 5px 2px 25px;
-  background-position:2px 50%;
-}
-.markItUpHeader ul ul a:hover  {
-}
-.markItUpHeader ul .markItUpSize li a:hover  {
-  color:#FFF;
-  background-color:#000;
-}
 
 /* icons definitions */
-.markItUp .markItUpBold a {
-  background-image:url(images/bold.png);
-}
-.markItUp .markItUpItalic a {
-  background-image:url(images/italic.png);
-}
-.markItUp .markItUpUnderline a {
-  background-image:url(images/underline.png);
-}
-.markItUp .markItUpStroke a {
-  background-image:url(images/stroke.png);
-}
-
-.markItUp .markItUpParagraph a {
-  background-image:url(images/p.png);
-}
-.markItUp .markItUpCenter a {
-  background-image:url(images/center.png);
-}
-.markItUp .markItUpRight a {
-  background-image:url(images/right.png);
-}
-
-.markItUp .markItUpListUL a {
-  background-image:url(images/list-bullet.png);
-}
-.markItUp .markItUpListOL a {
-  background-image:url(images/list-numeric.png);
-}
-.markItUp .markItUpListLI a {
-  background-image:url(images/list-item.png);
-}
-
-.markItUp .markItUpPicture a  {
-  background-image:url(images/picture.png);
-}
-.markItUp .markItUpLink a {
-  background-image:url(images/link.png);
-}
-.markItUp .markItUpMail a {
-  background-image:url(images/mail.png);
-}
-.markItUp .markItUpQuote a {
-  background-image:url(images/quote.png);
-}
-
-.markItUp .markItUpSize a {
-  background-image:url(images/fonts.png);
-}
-.markItUp .preview a {
-  background-image:url(images/preview.png);
-}
+.miuIcon>a {
+  background:url('images/icons.png') 20px 20px no-repeat;
+}
+
+.miuBold>a {
+  background-position:0px 0px;
+}
+.markItUp .miuItalic>a {
+  background-position:-20px 0px;
+}
+.markItUp .miuUnderline>a {
+  background-position:-40px 0px;
+}
+.markItUp .miuStroke>a {
+  background-position:-60px 0px;
+}
+
+.markItUp .miuParagraph>a {
+  background-position:0px -20px;
+}
+.markItUp .miuCenter>a {
+  background-position:-20px -20px;
+}
+.markItUp .miuRight>a {
+  background-position:-40px -20px;
+}
+
+.markItUp .miuListUL>a {
+  background-position:0px -40px;
+}
+.markItUp .miuListOL>a {
+  background-position:-20px -40px;
+}
+.markItUp .miuListLI>a {
+  background-position:-40px -40px;
+}
+
+.markItUp .miuPicture>a  {
+  background-position:0px -60px;
+}
+.markItUp .miuLink>a {
+  background-position:-20px -60px;
+}
+.markItUp .miuMail>a {
+  background-position:-40px -60px;
+}
+.markItUp .miuQuote>a {
+  background-position:-60px -20px;
+}
+
+/* sizes */
+.markItUp .miuSize>a {
+  background-position:-60px -40px;
+}
+  .markItUpHeader ul .miuSize li {
+    border-bottom:1px solid #444;
+    border-radius:2px;
+  }
+  .markItUpHeader ul .miuSize li a {
+    width:auto; 
+    padding:2px 5px;
+    background-position:2px 50%;
+    height:auto;
+  }
+  .markItUpHeader ul .miuSize li a:hover  {
+    color:#FFF;
+    background-color:#000;
+  }
+  .markItUp .miuSizeTiny {
+    font-size:7px;
+  }
+  .markItUp .miuSizeSmall {
+    font-size:9px;
+  }
+  .markItUp .miuSizeNormal {
+    font-size:12px;
+  }
+  .markItUp .miuSizeLarge {
+    font-size:18px;
+  }
+  .markItUp .miuSizeHuge {
+    white-space:nowrap;
+    font-size:24px;
+  }
 
 /* colors */
-.markItUp .markItUpColors a {
-  background-image:url(images/colors.png);
-}
-  .markItUp .markItUpColors ul {
+.markItUp .miuColors>a {
+  background-position:-60px -60px;
+}
+  .markItUp .miuColors ul {
     width:81px;
     padding:1px;  
   }
-  .markItUp .markItUpColors  li {
+  .markItUp .miuColors  li {
     border:1px solid white;
-    width:25px;  height:25px;
+    width:25px;
+    height:25px;
     overflow:hidden;
-    padding:0px; margin:0px;
+    padding:0px;
+    margin:0px;
     float:left;
     border-radius:2px;
   }
-  .markItUp .markItUpColors ul a {
-    width:25px;  height:25px;
-    color:transparent;
-  }
-  .markItUp .markItUpColors li:hover {
-    background-color:none;
+  .markItUp .miuColors ul a {
+    width:25px;
+    height:25px;
+    text-indent:-10000px;
+  }
+  .markItUp .miuColors li:hover {
     border:1px solid #08e;
   }
   
-  .markItUp .markItUpColors .col1-1 a { background:yellow; }
-  .markItUp .markItUpColors .col1-2 a { background:orange; }
-  .markItUp .markItUpColors .col1-3 a { background:red; }
+  .markItUp .miuColors .col1-1 a { background:yellow; }
+  .markItUp .miuColors .col1-2 a { background:orange; }
+  .markItUp .miuColors .col1-3 a { background:red; }
   
-  .markItUp .markItUpColors .col2-1 a { background:blue; }
-  .markItUp .markItUpColors .col2-2 a { background:purple; }
-  .markItUp .markItUpColors .col2-3 a { background:green; }
+  .markItUp .miuColors .col2-1 a { background:blue; }
+  .markItUp .miuColors .col2-2 a { background:purple; }
+  .markItUp .miuColors .col2-3 a { background:green; }
   
-  .markItUp .markItUpColors .col3-1 a { background:white; }
-  .markItUp .markItUpColors .col3-2 a { background:gray; }
-  .markItUp .markItUpColors .col3-3 a { background:black; }
+  .markItUp .miuColors .col3-1 a { background:white; }
+  .markItUp .miuColors .col3-2 a { background:gray; }
+  .markItUp .miuColors .col3-3 a { background:black; }
