Editor working .

wise-doc/src/main/webapp/css/editor2.css

@@ -1,8 +1,8 @@
 @import "/mindplot/src/main/javascript/widget/lightbox.css";
 @import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
 
-@header-height : 70px;
-@header-toolbar-height : 30px;
+@header-height : 75px;
+@header-toolbar-height : 35px;
 @header-info-height : @header-height - @header-toolbar-height;
 
 /* Common Default Style */
@@ -247,9 +247,22 @@ h4 {
 /********************************************************************************/
 
 div#header {
-    background-color: #000000;
     width: 100%;
     height: @header-height;
+    background: #393939; /* Old browsers */
+    background: -moz-linear-gradient(top, #393939 0%, #000000 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #000000)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, #393939 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #393939 0%, #000000 100%); /* Opera11.10+ */
+    background: -ms-linear-gradient(top, #393939 0%, #000000 100%); /* IE10+ */
+    background: linear-gradient(top, #393939 0%, #000000 100%); /* W3C */
+}
+
+div#headerLogo {
+    background: url(../nicons/logo-small.png) no-repeat center top;
+    height: 40px;
+    width: 80px;
+    float: left;
 }
 
 div#headerInfo {
@@ -258,66 +271,90 @@ div#headerInfo {
     color: white;
 }
 
+div#headerActions {
+    text-align: right;
+    margin-top: 13px;
+    padding-right: 10px;
+    color: white;
+    float: right;
+}
+
+div#headerActions span {
+    border-bottom: 3px solid rgb(247, 201, 49);
+}
+
+div#headerMapTitle {
+    width: 200px;
+    height:(@header-info-height ) - 13;
+    text-align: left;
+    padding-top: 13px;
+    padding-left: 50px;
+    color: white;
+    float: left;
+    font-style: italic;
+}
+
+div#headerMapTitle span {
+    padding: 4px 50px ;
+    border: 1px solid rgb(90, 90, 90);
+    background-color: rgb(45, 45, 45);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
 div#toolbar {
     width: 100%;
     height: @header-toolbar-height;
-    background: whiteSmoke;
-    border-top: 1px solid #E5E5E5;
+    background-image: linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -o-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -moz-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -webkit-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -ms-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, rgb(229, 227, 209)), color-stop(0.87, rgb(252, 250, 237)));
+    border-bottom: 3px double rgb(190, 190, 190);
+    border-top: 1px solid rgb(190, 190, 190);
 }
 
 div#toolbar .buttonContainer {
     height: @header-toolbar-height;
     float: left;
-    color: black;
-    border: 1px solid #BBB4D6;
+    /*color: black;*/
+    /*border: 1px solid #BBB4D6;*/
     margin-left: 5px;
 }
 
+/******************************************************************************************/
+/* Buttons*/
+/******************************************************************************************/
+
 div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
-    width: 30px;
-    height: @header-toolbar-height;
+    width: 28px;
+    height: 28px;
     float: left;
     text-align: center;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 2px;
 }
 
-div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
-    margin: 0;
-    cursor: pointer;
-    border: 1px solid #d3d3d3;
+div#toolbar .buttonOn:hover {
     cursor: pointer;
     opacity: 1;
+    background: url(../nicons/btn-bg-hover.png) no-repeat center top;
 }
 
 div#toolbar .buttonOn {
-    margin: 1px;
     opacity: 0.8;
+    background: url(../nicons/btn-bg-normal.png) no-repeat center top;
 }
 
 div#toolbar .buttonOff {
-    margin: 1px;
     opacity: 0.4;
-}
-
-div#toolbar .button img {
-    height: @header-toolbar-height;
-    border: 0;
-}
-
-div#saveButton {
-    background: url(../images/save.png) no-repeat center top;
-}
-
-div#undoEdition {
-    background: url(../images/file_undo_dis.png) no-repeat center top;
-}
-
-div#redoEdition {
-    background: url(../images/file_redo_dis.png) no-repeat center top;
-}
-
-div#export {
-    background: url(../images/file_export.png) no-repeat center top;
-    position: relative;
+    background: url(../nicons/btn-bg-normal.png) no-repeat center top;
 }
 
 div#exportAnchor {
@@ -328,101 +365,149 @@ div#exportAnchor {
     left: 0;
 }
 
-div#zoomIn {
-    background: url(../images/zoom_in.png) no-repeat center top;
-}
-
-div#zoomOut {
-    background: url(../images/zoom_out.png) no-repeat center top;
-}
-
-div#addTopic {
-    background: url(../images/topic_add.png) no-repeat center top;
-}
-
-div#deleteTopic {
-    background: url(../images/topic_delete.png) no-repeat center top;
-}
-
-div#topicColor {
-    background: url(../images/topic_bgcolor.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicIcon {
-    background: url(../images/topic_icon.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicNote {
-    background: url(../images/note.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicNote {
-    background: url(../images/topic_icon.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicLink {
-    background: url(../images/topic_link.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicNote {
-    background-image: url(../images/note.png);
-    z-index: 4;
-}
-
-div#topicBorder {
-    background: url(../images/topic_border.png) no-repeat center top;
-}
-
-div#fontFamily {
-    background: url(../images/font_type.png) no-repeat center top;
-}
-
-div#topicShape {
-    background: url(../images/topic_shape.png) no-repeat center top;
-}
-
-div#fontBold {
-    background: url(../images/font_bold.png) no-repeat center top;
-}
-
-div#fontItalic {
-    background: url(../images/font_italic.png) no-repeat center top;
-}
-
-div#fontColor {
-    background: url(../images/font_color.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#fontSize {
+div#toolbar .buttonExtOn, div#toolbar .buttonExtOff, div#toolbar .buttonExtActive, div#toolbar .buttonExtOn:hover {
+    width: 40px;
+    height: 28px;
     float: left;
-    background: url(../images/font_size.png) no-repeat center top;
+    text-align: left;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 5px;
 }
 
-div#font-size {
-    font-size: 10px;
+div#toolbar .buttonExtOn:hover {
+    opacity: 1;
+    background: url(../nicons/btne-bg-hover.png) no-repeat center top;
+
 }
 
-div#shareIt {
-    background: url(../images/collab_share.png) no-repeat center top;
+div#toolbar .buttonExtActive {
+    opacity: 1;
+    background: url(../nicons/btne-bg-selected.png) no-repeat center top;
+
 }
 
-div#publishIt {
-    background: url(../images/collab_publish.png) no-repeat center top;
+div#toolbar .buttonExtOn {
+    opacity: 0.8;
+    background: url(../nicons/btne-bg-normal.png) no-repeat center top;
 }
 
-div#tagIt {
-    background: url(../images/collab_tag.png) no-repeat center top;
+div#toolbar .buttonExtOff {
+    opacity: 0.4;
+    background: url(../nicons/btne-bg-normal.png) no-repeat center top;
 }
 
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+/*div#saveButton {*/
+/*background: url(../nicons/save.png) no-repeat center top;*/
+/*}*/
+
+/*div#undoEdition {*/
+/*background: url(../nicons/undo.png) no-repeat center top;*/
+/*}*/
+
+/*div#redoEdition {*/
+/*background: url(../nicons/redo.png) no-repeat center top;*/
+/*}*/
+
+/*div#export {*/
+/*background: url(../nicons/export.png) no-repeat center top;*/
+/*}*/
+
+/*div#zoomIn {*/
+/*background: url(../nicons/zoom-in.png) no-repeat center top;*/
+/*}*/
+
+/*div#zoomOut {*/
+/*background: url(../nicons/zoom-out.png) no-repeat center top;*/
+/*}*/
+
+/*div#addTopic {*/
+/*background: url(../nicons/topic-add.png) no-repeat center top;*/
+/*}*/
+
+/*div#deleteTopic {*/
+/*background: url(../nicons/topic-delete.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicColor {*/
+/*background: url(../nicons/topic-color.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicIcon {*/
+/*background: url(../nicons/topic-icon.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background: url(../nicons/note.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background: url(../nicons/topic-icon.png) no-repeat center top;*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicLink {*/
+/*background: url(../nicons/topic-link.png) no-repeat center top;*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background-image: url(../nicons/note.png);*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicBorder {*/
+/*background: url(../nicons/topic-border.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontFamily {*/
+/*background: url(../nicons/font-type.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicShape {*/
+/*background: url(../nicons/topic-shape.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontBold {*/
+/*background: url(../nicons/font-bold.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontItalic {*/
+/*background: url(../nicons/font-italic.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontColor {*/
+/*background: url(../nicons/font-color.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontSize {*/
+/*background: url(../nicons/font-size.png) no-repeat center top;*/
+/*}*/
+
+/*div#shareIt {*/
+/*background: url(../nicons/share.png) no-repeat center top;*/
+/*}*/
+
+/*div#publishIt {*/
+/*background: url(../nicons/publish.png) no-repeat center top;*/
+/*}*/
+
+/*div#tagIt {*/
+/*background: url(../nicons/tag.png) no-repeat center top;*/
+/*}*/
+
 div#topicRelation {
     width: 56px;
-    background: url(../images/topic_relationship.png) no-repeat center top;
+    background: url(../nicons/topic-relation.png) no-repeat center top;
     z-index: 4;
 }
 
@@ -435,20 +520,20 @@ div#colorPalette {
     top: 89px;
 }
 
-.toolbarPanel {
-    z-index: 4;
-    top: @header-height+3;
-    -moz-transition: opacity 0.218s ease 0s;
-    background: none repeat scroll 0 0 #FFFFFF;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    cursor: default;
-    font-size: 13px;
-    margin: 0;
-    outline: medium none;
-    padding: 0 0 6px;
-    position: absolute;
-}
+/*.toolbarPanel {*/
+/*z-index: 4;*/
+/*top: @header-height;*/
+/*-moz-transition: opacity 0.218s ease 0s;*/
+/*background: none repeat scroll 0 0 #FFFFFF;*/
+/*border: 1px solid rgba(0, 0, 0, 0.2);*/
+/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
+/*cursor: default;*/
+/*font-size: 13px;*/
+/*margin: 0;*/
+/*outline: medium none;*/
+/*padding: 0 0 6px;*/
+/*position: absolute;*/
+/*}*/
 
 div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
     cursor: pointer;
@@ -473,7 +558,7 @@ div#mindplot {
 }
 
 div#workspaceContainer {
-    background: url(../images/grid.gif) bottom left repeat !important;
+    /*background: url(../images/grid.gif) bottom left repeat !important;*/
 }
 
 div#small_error_icon {
@@ -495,17 +580,117 @@ div#small_error_icon {
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 }
 
-.toolbarTip {
-    background-color: black;
-    padding: 5px 5px;
-    color: #f5f5f5;
+.linkTip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
     /*font-weight: bold;*/
     /*width: 100px;*/
-    font-size: 11px;
+    font-size: 13px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 }
 
+.toolbarPaneTip {
+    background-color: rgb(228, 226, 210);
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+    -moz-border-radius: 60px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    border: 3px double rgb(190, 190, 190);
+}
 
+.toolbarTip {
+    background-color: #000000;
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+}
+
+/* */
+.btn-primary {
+    cursor: pointer;
+    display: inline-block;
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    color: #ffffff;
+    background-color: #0064cd;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+    background-image: linear-gradient(top, #049cdb, #0064cd);
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    border-color: #0064cd #0064cd #003f81;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+
+.btn-primary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}
+
+.btn-secondary {
+    cursor: pointer;
+    display: inline-block;
+    background-color: #e6e6e6;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
+    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.btn-secondary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}

wise-doc/src/main/webapp/html/editor.html

@@ -8,18 +8,16 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <![endif]-->
     <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
-
+    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
     <link rel="stylesheet/less" type="text/css" href="../css/editor2.css"/>
-    <link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/>
 
+    <link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/>
     <script type='text/javascript'
             src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
-    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
 
     <script type='text/javascript'
             src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
     <script type='text/javascript' src='/core-js/target/classes/core.js'></script>
-
     <script type="text/javascript">
 
         //Google-Brix framework load callback function
@@ -119,35 +117,76 @@
 
 <div id="header">
     <div id="headerInfo">
-          Algo a aca ....
+        <div id="headerActions">
+            <span>MyWiseMappigs</span> | <span>Settings</span> | <span>Logout</span>
+        </div>
+        <div id="headerLogo"></div>
+        <div id="headerMapTitle">Title: <span>Hola</span></div>
     </div>
     <div id="toolbar">
         <div id="editTab" class="tabContent">
             <div id="file" class="buttonContainer">
-                <div id="undoEdition" class="buttonOn" title="Undo Edition"></div>
-                <div id="redoEdition" class="buttonOn" title="Redo Edition"></div>
+                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                    <img src="../nicons/undo.png"/>
+                </div>
+                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                    <img src="../nicons/redo.png"/>
+                </div>
             </div>
             <div id="zoom" class="buttonContainer">
-                <div id="zoomIn" class="buttonOn" title="Zoom In"></div>
-                <div id="zoomOut" class="buttonOn" title="Zoom Out"></div>
+                <div id="zoomIn" class="buttonOn" title="Zoom In">
+                    <img src="../nicons/zoom-in.png"/>
+                </div>
+                <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                    <img src="../nicons/zoom-out.png"/>
+                </div>
             </div>
             <div id="node" class="buttonContainer">
-                <div id="topicShape" class="buttonOn" title="SYMB_TOPIC_SHAPE"></div>
-                <div id="addTopic" class="buttonOn" title="SYMB_ TOPIC_ADD"></div>
-                <div id="deleteTopic" class="buttonOn" title="Delete"></div>
-                <div id="topicBorder" class="buttonOn" title="Boder Color"></div>
-                <div id="topicColor" class="buttonOn" title="Background Color"></div>
-                <div id="topicIcon" class="buttonOn" title="Add Icon"></div>
-                <div id="topicNote" class="buttonOn" title="Add Note"></div>
-                <div id="topicLink" class="buttonOn" title="Add Link"></div>
-                <div id="topicRelation" class="buttonOn" title="Add Relationship"></div>
+                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                    <img src="../nicons/topic-shape.png"/>
+                </div>
+                <div id="addTopic" class="buttonOn" title="Add Topic">
+                    <img src="../nicons/topic-add.png"/>
+                </div>
+                <div id="deleteTopic" class="buttonOn" title="Delete">
+                    <img src="../nicons/topic-delete.png"/>
+                </div>
+                <div id="topicBorder" class="buttonOn" title="Border Color">
+                    <img src="../nicons/topic-border.png"/>
+                </div>
+                <div id="topicColor" class="buttonExtOn" title="Background Color">
+                    <img src="../nicons/topic-color.png"/>
+                </div>
+                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                    <img src="../nicons/topic-icon.png"/>
+                </div>
+                <div id="topicNote" class="buttonOn" title="Add Note">
+                    <img src="../nicons/topic-note.png"/>
+                </div>
+                <div id="topicLink" class="buttonOn" title="Add Link">
+                    <img src="../nicons/topic-link.png"/>
+                </div>
+                <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                    <img src="../nicons/topic-relation.png"/>
+                </div>
             </div>
             <div id="font" class="buttonContainer">
-                <div id="fontFamily" class="buttonOn" title="Font Style"></div>
-                <div id="fontSize" class="buttonOn" title="Font Size"></div>
-                <div id="fontBold" class="buttonOn" title="Bold Style"></div>
-                <div id="fontItalic" class="buttonOn" title="Italic Style"></div>
-                <div id="fontColor" class="buttonOn" title="Fond Color"></div>
+                <div id="fontFamily" class="buttonOn" title="Font Style">
+                    <img src="../nicons/font-type.png"/>
+                </div>
+                <div id="fontSize" class="buttonExtOn" title="Font Size">
+                    <img src="../nicons/font-size.png"/>
+                </div>
+                <div id="fontBold" class="buttonOn" title="Bold Style">
+                    <img src="../nicons/topic-border.png"/>
+                </div>
+                <div id="fontItalic" class="buttonOn" title="Italic Style">
+                    <img src="../nicons/font-italic.png"/>
+                </div>
+                <div id="fontColor" class="buttonExtOn" title="Fond Color">
+                    <img src="../nicons/font-color.png"/>
+
+                </div>
             </div>
         </div>
     </div>