help for etudier widget

resources/library/interactivities/Etudier.wgt/css/basic.css

@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -212,6 +213,7 @@ li>div{
 .real_text{
     width: 100%;
     height: 100%;
+    word-wrap: break-word;
 }
 
 .block_border{
@@ -357,7 +359,6 @@ li>div{
 
 #wgt_name{
     height: 44px;
-    width: 200px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -366,9 +367,8 @@ li>div{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -378,7 +378,6 @@ li>div{
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -387,7 +386,6 @@ li>div{
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -480,3 +478,27 @@ li>div{
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
 }
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px 0 5px 5px;
+}
+
+.open{
+    
+}
\ No newline at end of file

resources/library/interactivities/Etudier.wgt/index.html

@@ -49,6 +49,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
                     <select class="style_select">
@@ -63,6 +64,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="slider">
                         <ul>							
                         </ul>

resources/library/interactivities/Etudier.wgt/locales/fr/index.html

@@ -23,6 +23,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
                     <select class="style_select">
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="slider">
                         <ul>							
                         </ul>

resources/library/interactivities/Etudier.wgt/locales/ru/index.html

@@ -23,6 +23,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
                     <select class="style_select">
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="slider">
                         <ul>							
                         </ul>