diff --git a/templates/index.html.ep b/templates/index.html.ep
index d818149..a649811 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -210,19 +210,24 @@
            }
          });
 
+         //         var filterQuot = /(^quot?=[A-Z])|(quot$)/g;
+         var filterQuot = /^quot/;
          classicCollocatorTable = $('#classicoloctable').DataTable({
            ajax: {
-             method: "GET",
-             url: '/derekovecs/getClassicCollocators',
-             dataType: 'json',
-             dataSrc: "",
-             timeout: 30000,
-             data: { w: paraResults[0][0].rank }
+               method: "GET",
+               url: '/derekovecs/getClassicCollocators',
+               dataType: 'json',
+               dataSrc: "",
+               timeout: 30000,
+               data: { w: paraResults[0][0].rank }
            },
            "initComplete":function(settings, json){
              $("td.collocator").click(function(){
                queryKorAPCII(this.textContent + " /w5 " + CIIsearchWords);
              });
+             classicCollocatorTable.columns(".detail").visible(false);
+             $("#ccd").css('width', '450px');
+             classicCollocatorTable.columns.adjust().draw();
            },
            "sScrollY": "780px",
            "bScrollCollapse": true,
@@ -235,15 +240,16 @@
              { "data": "lfmd", render: function ( data, type, row ) {return data.toFixed(1) }},
              //             { "data": "fpmi", type: "scientific", render: function ( data, type, row ) {return data.toExponential(2) }  },
              { "data": "npmi", render: function ( data, type, row ) {return data.toFixed(2) }},
-             { "data": "llfmd", class: "detail", render: function ( data, type, row ) {return data.toFixed(1) }},
-             { "data": "rlfmd", class: "detail", render: function ( data, type, row ) {return data.toFixed(1) }},
-             { "data": "lnpmi", class: "detail", render: function ( data, type, row ) {return data.toFixed(2) }},
-             { "data": "rnpmi", class: "detail", render: function ( data, type, row ) {return data.toFixed(2) }},
+             { "data": "llfmd", render: function ( data, type, row ) {return data.toFixed(1) }},
+             { "data": "rlfmd", render: function ( data, type, row ) {return data.toFixed(1) }},
+             { "data": "lnpmi", render: function ( data, type, row ) {return data.toFixed(2) }},
+             { "data": "rnpmi", render: function ( data, type, row ) {return data.toFixed(2) }},
              { "data": "f" },
              { "data": "word",  sClass: "collocator" }
            ],
            "columnDefs": [
              { className: "dt-right", "targets": [0,1,2,3,4,5,6,7] },
+             { className: "dt-right detail", "targets": [3,4,5,6] },
              { "searchable": false,
                "orderable": false,
                "targets": []
@@ -262,140 +268,143 @@
            var columns = classicCollocatorTable.columns(".detail");
            if(this.checked) {
              columns.visible(true);
+             $("#ccd").css('width', 'auto');
            } else {
              columns.visible(false);
+             $("#ccd").css('width', '450px');
            }
+           classicCollocatorTable.columns.adjust().draw();
          } );
 
-           $("td.collocator").click(function(){
-             queryKorAPCII(this.textContent + " /w5 " + CIIsearchWords);
-           });
-
-           collocatorTable.on( 'order.dt search.dt', function () {
-             collocatorTable.column(0, {order:'applied'}).nodes().each( function (cell, i) {
-               cell.innerHTML = i+1;
-             } );
-           }).draw();
-         }
-
-         if (localStorage && !window.location.hash) { // let's not crash if some user has IE7
-           var index = parseInt(localStorage['tab']||'0');
-           $("#tabs").tabs({ active: index });
-         }
-         $("#tabs").css("visibility", "visible"); // now we can show the tabs
-       });
-
-       $(function(){
-         $("#dropdownoptions").dialog({
-           title: "Options",
-           autoOpen: false,
-           modal: false,
-           draggable: false,
-           height: "auto",
-           width: "auto",
-           resizable: false,
-           buttons: {
-             "Cancel": function() {
-               $( this ).dialog( "close" );
-             },
-             "Apply": function() {
-               window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
-             }
-           }
+         $("td.collocator").click(function(){
+           queryKorAPCII(this.textContent + " /w5 " + CIIsearchWords);
          });
-       });
 
-       $(function(){
-         $("#showoptions").click(function(){
-           $("#dropdownoptions").dialog("open");
-           var target = $(this);
-           $("#dropdownoptions").dialog("widget").position({
-             my: 'left bottom',
-             at: 'left bottom',
-             of: target
-           });
-         });
-       });
+         collocatorTable.on( 'order.dt search.dt', function () {
+           collocatorTable.column(0, {order:'applied'}).nodes().each( function (cell, i) {
+             cell.innerHTML = i+1;
+           } );
+         }).draw();
+       }
 
-       $( function() {
-         $( "#no_iterations" ).spinner({
-           spin: function( event, ui ) {
-             if ( ui.value < 1000 ) {
-               $( this ).spinner( "value", 1000 );
-               return false;
-             } else if ( ui.value > 10000 ) {
-               $( this ).spinner( "value", 10000 );
-               return false;
-             }
-           }
-         });
-       } );
+       if (localStorage && !window.location.hash) { // let's not crash if some user has IE7
+         var index = parseInt(localStorage['tab']||'0');
+         $("#tabs").tabs({ active: index });
+       }
+       $("#tabs").css("visibility", "visible"); // now we can show the tabs
+     });
 
-       $( function() {
-         $( "#neighbours" ).spinner({
-           spin: function( event, ui ) {
-             if ( ui.value < 0 ) {
-               $( this ).spinner( "value", 0 );
-               return false;
-             } else if ( ui.value > 200 ) {
-               $( this ).spinner( "value", 200 );
-               return false;
-             }
-           }
-         });
-       } );
-
-       $( function() {
-         $( "#cutoff" ).spinner({
-           spin: function( event, ui ) {
-             if ( ui.value < 100000 ) {
-               $( this ).spinner( "value", 100000 );
-               return false;
-             } else if ( ui.value > 2000000 ) {
-               $( this ).spinner( "value", 2000000 );
-               return false;
-             }
-           }
-         });
-       } );
-
-       $( function() {
-         $( "#tabs" ).tabs().addClass('tabs-min');
-       } );
-
-       $( function() {
-         $( ".controlgroup-vertical" ).controlgroup({
-           "direction": "vertical"
-         });
-       } );
-
-       $(function() {
-         $( document ).tooltip({
-           content: function() {
-             return $(this).attr('title');
-           }}
-         )
-       });
-
-       $(function () {
-         $(document).tooltip({
-           content: function () {
-             return $(this).prop('title');
+     $(function(){
+       $("#dropdownoptions").dialog({
+         title: "Options",
+         autoOpen: false,
+         modal: false,
+         draggable: false,
+         height: "auto",
+         width: "auto",
+         resizable: false,
+         buttons: {
+           "Cancel": function() {
+             $( this ).dialog( "close" );
            },
-           show: null, 
-           close: function (event, ui) {
-             ui.tooltip.hover(
-               function () {
-                 $(this).stop(true).fadeTo(400, 1);
-               },    
-               function () {
-                 $(this).fadeOut("400", function () {
-                   $(this).remove();
-                 })
-               });
+           "Apply": function() {
+             window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
            }
+         }
+       });
+     });
+
+     $(function(){
+       $("#showoptions").click(function(){
+         $("#dropdownoptions").dialog("open");
+         var target = $(this);
+         $("#dropdownoptions").dialog("widget").position({
+           my: 'left bottom',
+           at: 'left bottom',
+           of: target
          });
        });
+     });
+
+     $( function() {
+       $( "#no_iterations" ).spinner({
+         spin: function( event, ui ) {
+           if ( ui.value < 1000 ) {
+             $( this ).spinner( "value", 1000 );
+             return false;
+           } else if ( ui.value > 10000 ) {
+             $( this ).spinner( "value", 10000 );
+             return false;
+           }
+         }
+       });
+     } );
+
+     $( function() {
+       $( "#neighbours" ).spinner({
+         spin: function( event, ui ) {
+           if ( ui.value < 0 ) {
+             $( this ).spinner( "value", 0 );
+             return false;
+           } else if ( ui.value > 200 ) {
+             $( this ).spinner( "value", 200 );
+             return false;
+           }
+         }
+       });
+     } );
+
+     $( function() {
+       $( "#cutoff" ).spinner({
+         spin: function( event, ui ) {
+           if ( ui.value < 100000 ) {
+             $( this ).spinner( "value", 100000 );
+             return false;
+           } else if ( ui.value > 2000000 ) {
+             $( this ).spinner( "value", 2000000 );
+             return false;
+           }
+         }
+       });
+     } );
+
+     $( function() {
+       $( "#tabs" ).tabs().addClass('tabs-min');
+     } );
+
+     $( function() {
+       $( ".controlgroup-vertical" ).controlgroup({
+         "direction": "vertical"
+       });
+     } );
+
+     $(function() {
+       $( document ).tooltip({
+         content: function() {
+           return $(this).attr('title');
+         }}
+       )
+     });
+
+     $(function () {
+       $(document).tooltip({
+         content: function () {
+           return $(this).prop('title');
+         },
+         show: null, 
+         close: function (event, ui) {
+           ui.tooltip.hover(
+             function () {
+               $(this).stop(true).fadeTo(400, 1);
+             },    
+             function () {
+               $(this).fadeOut("400", function () {
+                 $(this).remove();
+               })
+             });
+         }
+       });
+     });
     </script>
     <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/derekovecs/js/tsne.js"></script>
@@ -511,13 +520,18 @@
 
      #topwrapper {
        width: 100%;
-       //   border: 1px solid red;
-       overflow: hidden; /* will contain if #first is longer than #second */
+       display: flex;
+//       border: 1px solid red;
      }
 
      #wrapper {
+       width: 100%;
+       display: flex;
+       flex-wrap: wrap;
+      padding:5px;
+//       border: 1px solid green;
        //   border: 1px solid red;
-       overflow: hidden; /* will contain if #first is longer than #second */
+       //  overflow: hidden; /* will contain if #first is longer than #second */
      }
 
      #pagetitle {
@@ -920,7 +934,7 @@
         <div id="tabs-1">
           % if($lists && (@$lists) > 0 && (@$lists)[0]) {
             <div id="wrapper">
-              <div id="first" style="width: 320px">
+              <div id="first" style="min-width: 320px; margin-bottom: 15px;">
                 <table class="display compact nowrap" id="firsttable">
                   <thead>
                     <tr>
@@ -976,14 +990,14 @@
           </div>
              % }
         </div>
-        <div id="tabs-2">
+        <div id="tabs-2" style="display: flex;  padding: 5px; flex-flow: row wrap;">
           <div id="som2" style="width: 800;">
+            <div id="sominfo1"><span id="somcolor1">   </span> <span id="somword1"> </span> <span id="somcolor2">   </span> <span id="somword2"> </span> <span id="somcolor3">   </span></div>
+            <div id="sominfo" style="text-align: right">SOM iteration <span id="iterations">0</span></div>
           </div>
-          <div id="sominfo1"><span id="somcolor1">   </span> <span id="somword1"> </span> <span id="somcolor2">   </span> <span id="somword2"> </span> <span id="somcolor3">   </span></div>
-          <div id="sominfo">SOM iteration <span id="iterations">0</span></div>
         </div>
-        <div id="tabs-3" style="width:1500px">
-          <div style="width: 45%; float: left;" id="secondt">
+        <div id="tabs-3" style="display: flex;  padding:5px; flex-flow: row wrap;">
+          <div style="margin-right: 20px; margin-bottom: 10px;" id="secondt">
             <table class="display compact nowrap"  id="secondtable">
               <thead>
                 <tr>
@@ -1017,7 +1031,7 @@
               </tbody>
             </table>
           </div>
-          <div id="ccd" style="margin-left:0px; float:right; width:800px;">
+          <div id="ccd" style="">
             <table class="display compact nowrap" id="classicoloctable">
               <thead>
                 % if($collocators) {
@@ -1055,8 +1069,10 @@
               </tbody>
             </table>
           </div>
+<!--
           <div style="clear:both" ></div>
           <div style="float: right; overflow: hidden" id="extra"><button onClick="showCollocatorSOM()"> </button></div>
+-->
         </div>
       </div>
     </div> <!-- topwrapper  -->