updated 'Ordre phrases' app

resources/library/interactivities/Ordre phrase.wgt/index.html

@@ -60,11 +60,6 @@
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -74,7 +69,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="ub-widget">
-
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>

resources/library/interactivities/Ordre phrase.wgt/locales/fr/index.html

@@ -36,11 +36,6 @@
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -50,7 +45,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="ub-widget">
-
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>

resources/library/interactivities/Ordre phrase.wgt/locales/fr/script/template2.js

@@ -26,7 +26,7 @@ function checkResponse()
 */
 
 var sankoreLang = {
-    view: "Afficher", 
+    view: "Fermer", 
     edit: "Modifier",
     example: "Cette phrase\nest un\nexemple",
     wgt_name: "Ordonner des phrases",
@@ -36,23 +36,23 @@ var sankoreLang = {
     none: "aucun",
     help: "Aide",
     help_content: "<p><h2>Ordonner des phrases</h2></p>"+
-"<p><h3>Ordonner des segments de phrases pour reconstituer le texte.</h3></p>"+
+    "<p><h3>Ordonner des segments de phrases pour reconstituer le texte.</h3></p>"+
 
-"<p>Des étiquettes avec des phrases sont dans le désordre. Le but est de les remettre en ordre pour avoir un texte compréhensible et correct. Lorsque le texte est en ordre, l’interactivité se colore en vert. L’activité s’effectue par un glisser-déposer des étiquettes pour remettre le texte en ordre.</p>"+
+    "<p>Des étiquettes avec des phrases sont dans le désordre. Le but est de les remettre en ordre pour avoir un texte compréhensible et correct. Lorsque le texte est en ordre, l’interactivité se colore en vert. L’activité s’effectue par un glisser-déposer des étiquettes pour remettre le texte en ordre.</p>"+
 
-"<p>Le bouton “Recharger” réinitialise l’exercice.</p>"+
+    "<p>Le bouton “Recharger” réinitialise l’exercice.</p>"+
 
-"<p>Le bouton “Modifier” vous permet : </p>"+
+    "<p>Le bouton “Modifier” vous permet : </p>"+
-"<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
+    "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
-"<li>de déterminer le texte à reconstituer et le nombre de séparations dans l’énoncé.</li></ul>"+
+    "<li>de déterminer le texte à reconstituer et le nombre de séparations dans l’énoncé.</li></ul>"+
 
-"<p>Pour insérer du texte dans la zone, cliquez sur la zone et saisissez le texte souhaité.</p>"+
+    "<p>Pour insérer du texte dans la zone, cliquez sur la zone et saisissez le texte souhaité.</p>"+
-"<p>Pour ajouter des séparations dans l’énoncé, retournez à la ligne. Votre texte sera séparé lors d'un retour à la ligne.</p>"+
+    "<p>Pour ajouter des séparations dans l’énoncé, retournez à la ligne. Votre texte sera séparé lors d'un retour à la ligne.</p>"+
 
-"<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>"
+    "<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>",
+    theme:"Thème"
 };
 
-
 var sentence = "";
 var curSentence = "";
 
@@ -82,9 +82,10 @@ var input_width = 606;
 var widget_padding = 0;
 
 $(document).ready(function(){
+    if(window.sankore)
         if(sankore.preference("ord_phrases_style","")){
             changeStyle(sankore.preference("ord_phrases_style",""));
-        $(".style_select").val(sankore.preference("ord_phrases_style",""));
+            $("#style_select").val(sankore.preference("ord_phrases_style",""));
         } else
             changeStyle("3")
         
@@ -92,13 +93,23 @@ $(document).ready(function(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='3']").text(sankoreLang.none);    
+    
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
+    
+    $("#style_select").change(function (event){
+        changeStyle($(this).find("option:selected").val());
+    })
     
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");                
+                $("#parameters").css("display","none");                
                 $(this).css("display", "none");
                 $("#wgt_edit").css("display", "block");
                 modeView();
@@ -107,7 +118,7 @@ $(document).ready(function(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");                
+                $("#parameters").css("display","block");                
                 $(this).css("display", "none");
                 $("#wgt_display").css("display", "block");
                 modeEdit();
@@ -120,11 +131,13 @@ $(document).ready(function(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#ub-widget").show();
             });
         } else {      
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             $("#ub-widget").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
@@ -158,13 +171,7 @@ $(document).ready(function(){
         }
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
     
-    $(".style_select").change(function (event){
-        changeStyle($(this).find("option:selected").val());
-    })
 })
 
 function str_replace( w, b, s ){
@@ -230,10 +237,10 @@ function changeStyle(val){
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
             $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
-            $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
-            $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select option:first").attr('selected',true);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -247,10 +254,10 @@ function changeStyle(val){
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select option:first").next().attr('selected',true);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -264,10 +271,10 @@ function changeStyle(val){
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select option:last").attr('selected',true);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }
@@ -355,7 +362,7 @@ function modeEdit()
 
 if (window.widget) {
     window.widget.onleave = function(){
-        sankore.setPreference("ord_phrases_style", $(".style_select").find("option:selected").val());
+        sankore.setPreference("ord_phrases_style", $("#style_select").find("option:selected").val());
         if($( "#mp_word textarea" ).val())
         {
             modeView();

resources/library/interactivities/Ordre phrase.wgt/locales/ru/index.html

@@ -36,11 +36,6 @@
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
-                    <select class="style_select">
-                        <option value="1"></option>
-                        <option value="2"></option>
-                        <option value="3"></option>
-                    </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -50,7 +45,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="ub-widget">
-
+                        <div id="parameters">
+                            <div class="inline">
+                                <label>
+                                    <select id="style_select">
+                                        <option value="1"></option>
+                                        <option value="2"></option>
+                                        <option value="3"></option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>

resources/library/interactivities/Ordre phrase.wgt/locales/ru/script/template2.js

@@ -27,7 +27,7 @@ function checkResponse()
 
 var sankoreLang = {
     edit: "Изменить",
-    view: "Просмотр",
+    view: "Закрыть",
     example: "это\nпример\nпредложения",
     wgt_name: "Порядок фраз",
     reload: "Обновить",
@@ -35,10 +35,10 @@ var sankoreLang = {
     pad: "Планшет",
     none: "Нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 }
 
-
 var sentence = "";
 var curSentence = "";
 
@@ -68,9 +68,10 @@ var input_width = 606;
 var widget_padding = 0;
 
 $(document).ready(function(){
+    if(window.sankore)
         if(sankore.preference("ord_phrases_style","")){
             changeStyle(sankore.preference("ord_phrases_style",""));
-        $(".style_select").val(sankore.preference("ord_phrases_style",""));
+            $("#style_select").val(sankore.preference("ord_phrases_style",""));
         } else
             changeStyle("3")
         
@@ -78,13 +79,23 @@ $(document).ready(function(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='3']").text(sankoreLang.none);    
+    
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
+    
+    $("#style_select").change(function (event){
+        changeStyle($(this).find("option:selected").val());
+    })
     
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");                
+                $("#parameters").css("display","none");                
                 $(this).css("display", "none");
                 $("#wgt_edit").css("display", "block");
                 modeView();
@@ -93,7 +104,7 @@ $(document).ready(function(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");                
+                $("#parameters").css("display","block");                
                 $(this).css("display", "none");
                 $("#wgt_display").css("display", "block");
                 modeEdit();
@@ -106,11 +117,13 @@ $(document).ready(function(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#ub-widget").show();
             });
         } else {      
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             $("#ub-widget").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
@@ -144,13 +157,7 @@ $(document).ready(function(){
         }
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
     
-    $(".style_select").change(function (event){
-        changeStyle($(this).find("option:selected").val());
-    })
 })
 
 function str_replace( w, b, s ){
@@ -216,10 +223,10 @@ function changeStyle(val){
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
             $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
-            $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
-            $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select option:first").attr('selected',true);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -233,10 +240,10 @@ function changeStyle(val){
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select option:first").next().attr('selected',true);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -250,10 +257,10 @@ function changeStyle(val){
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select option:last").attr('selected',true);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }
@@ -341,7 +348,7 @@ function modeEdit()
 
 if (window.widget) {
     window.widget.onleave = function(){
-        sankore.setPreference("ord_phrases_style", $(".style_select").find("option:selected").val());
+        sankore.setPreference("ord_phrases_style", $("#style_select").find("option:selected").val());
         if($( "#mp_word textarea" ).val())
         {
             modeView();

resources/library/interactivities/Ordre phrase.wgt/scripts/template2.js

@@ -28,7 +28,7 @@ function checkResponse()
 
 var sankoreLang = {
     edit: "Edit",
-    view: "Display",
+    view: "Close",
     example: "this is\nan example\nsentence",
     wgt_name: "Order phrases",
     reload: "Reload",
@@ -36,7 +36,8 @@ var sankoreLang = {
     pad: "Pad",
     none: "None",
     help: "Help",
-    help_content: "This is an example of help content ..."
+    help_content: "This is an example of help content ...",
+    theme: "Theme"
 }
 
 
@@ -72,7 +73,7 @@ $(document).ready(function(){
     if(window.sankore)
         if(sankore.preference("ord_phrases_style","")){
             changeStyle(sankore.preference("ord_phrases_style",""));
-            $(".style_select").val(sankore.preference("ord_phrases_style",""));
+            $("#style_select").val(sankore.preference("ord_phrases_style",""));
         } else
             changeStyle("3")
         
@@ -80,13 +81,23 @@ $(document).ready(function(){
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='3']").text(sankoreLang.none);    
+    
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
+    
+    $("#style_select").change(function (event){
+        changeStyle($(this).find("option:selected").val());
+    })
     
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");                
+                $("#parameters").css("display","none");                
                 $(this).css("display", "none");
                 $("#wgt_edit").css("display", "block");
                 modeView();
@@ -95,7 +106,7 @@ $(document).ready(function(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");                
+                $("#parameters").css("display","block");                
                 $(this).css("display", "none");
                 $("#wgt_display").css("display", "block");
                 modeEdit();
@@ -108,11 +119,13 @@ $(document).ready(function(){
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").slideUp("100", function(){
                 tmp.removeClass("open");
                 $("#ub-widget").show();
             });
         } else {      
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             $("#ub-widget").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
@@ -146,13 +159,7 @@ $(document).ready(function(){
         }
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
     
-    $(".style_select").change(function (event){
-        changeStyle($(this).find("option:selected").val());
-    })
 })
 
 function str_replace( w, b, s ){
@@ -218,10 +225,10 @@ function changeStyle(val){
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
             $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
-            $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
-            $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select option:first").attr('selected',true);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -235,10 +242,10 @@ function changeStyle(val){
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select option:first").next().attr('selected',true);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -252,10 +259,10 @@ function changeStyle(val){
             $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select option:last").attr('selected',true);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }
@@ -343,7 +350,7 @@ function modeEdit()
 
 if (window.widget) {
     window.widget.onleave = function(){
-        sankore.setPreference("ord_phrases_style", $(".style_select").find("option:selected").val());
+        sankore.setPreference("ord_phrases_style", $("#style_select").find("option:selected").val());
         if($( "#mp_word textarea" ).val())
         {
             modeView();

resources/library/interactivities/Ordre phrase.wgt/styles/of_puppets.css

@@ -3,7 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;    
-    border-radius: 50px;
+    border-radius: 35px;
     overflow: hidden;
 }
 
@@ -149,57 +149,40 @@ textarea{
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;
-    color: #8c5730;
+    color: #7F613F;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    height: 44px;
     margin: 10px 10px 0 0;
     float: right;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;    
-    color: #8c5730;
+    line-height: 32px;
 }
 
 #wgt_display{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/toolbar-edit.png) left -32px no-repeat;
-    background-repeat: no-repeat;
+    color: white;
-    background-position: top 0;
     display: none;
 }
 
 #wgt_edit{    
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/slate-toolbar-edit.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_reload{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-toolbar-reload.png);
+    background: url(../img/slate-toolbar-reload.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
-}
-
-.style_select{    
-    width: 120px;
-    /*font-family: "Lobster13Regular";*/
-    font-size: 24px;
-    float: right;
-    margin: 10px 20px 0 0;
-    border-radius: 10px;
-    background-image: url(../img/ar_down.png);
-    background-color: #d4aa79;
-    color: #8c5730;
-    background-position: 105px 11px;
-    background-repeat: no-repeat;
-    -webkit-appearance: menulist-text;
-    display: none;
 }
 
 .btl_pad{
@@ -234,51 +217,50 @@ textarea{
     background-image: url(../img/pad-bottom-right.png) !important;
 }
 
-.pad_color{
+.without_radius{
-    color: white !important;
+    border-radius: 0 !important;
 }
 
-.pad_reload{
+.without_back{
-    background-image: url(../img/slate-toolbar-reload-white.png) !important;
+    background: none !important;
 }
 
-.pad_edit{
+.pad_color{
-    background-image: url(../img/slate-display.png) !important;
+    color: #FC9 !important;
+    text-shadow: none !important;
 }
 
-.pad_select{
+.pad_reload{
-    background-color: black !important;
+    background: url(../img/toolbar-reload.png) left top no-repeat !important;
-    color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
 }
 
-.without_radius{
+.pad_edit{
-    border-radius: 0 !important;
+    background: url(../img/toolbar-edit.png) left top no-repeat !important;    
 }
 
-.without_back{
+.pad_help{
-    background: none !important;
+    background: url(../img/toolbar-help.png) left top no-repeat !important;
 }
 
-.none_select{
+.help_wood{
-    background-color: #333 !important;
+    background: url(../img/slate-toolbar-help.png) left -32px no-repeat !important;
     color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
+    text-shadow: #7F613F 0 -1px 0 !important;
 }
 
-.pad_help{
+.help_pad{
-    background-image: url(../img/slate-help-white.png) !important;
+    background: url(../img/toolbar-help.png) left -32px no-repeat !important;
+    color: white !important;
 }
 
 #wgt_help{
-    padding-left: 32px;
+    padding-left: 35px;
-    background-image: url(../img/slate-help.png);
+    background: url(../img/slate-toolbar-help.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #help{
-    width: 100%;
     height: 100%;    
     overflow: auto;
     display: none;
@@ -289,3 +271,34 @@ textarea{
 .open{
 
 }
+
+#parameters{    
+    display: none;
+    padding: 10px 20px;
+    background: url("../img/parameters-bg.png");
+    border-radius: 4px 4px 0 0;
+}
+
+.inline{
+    display: inline-block;
+    font-family: "helvetica neue";
+    font-size: 14px;
+    color: #666;
+}
+
+#parameters label {
+    font-style: italic;
+}
+
+#style_select{   
+    margin-left: 10px;
+}
+
+.display_wood{
+    background: url(../img/slate-toolbar-edit.png) left -32px no-repeat !important;
+    text-shadow: #7F613F 0 -1px 0;
+}
+
+.radius_ft{
+    border-radius: 45px !important;
+}