From ca83ac3b278e61e3301eaa100ab7b3932fb1bda0 Mon Sep 17 00:00:00 2001
From: Raphael Gauthier <raphael.gauthier@normation.com>
Date: Thu, 14 Feb 2019 10:10:13 +0100
Subject: [PATCH] Work in progress

---
 .../web/components/RuleCompliance.scala       |   14 +-
 .../rudder/web/services/DisplayNode.scala     |    8 +-
 .../web/services/EventListDisplayer.scala     |    8 +-
 .../rudder/web/services/NodeGrid.scala        |    2 +-
 .../rudder/web/services/ReportDisplayer.scala |    2 +-
 .../TechniqueLibraryManagement.scala          |    2 +-
 .../configuration/ParameterManagement.scala   |    4 +-
 .../web/snippet/node/PendingHistoryGrid.scala |    2 +-
 .../javascript/rudder/rudder-datatable.js     |   14 +-
 .../main/webapp/javascript/rudder/rudder.js   |   32 +-
 .../secure/administration/apiManagement.html  |    9 +-
 .../parameterManagement.html                  |    8 +-
 .../webapp/secure/utilities/eventLogs.html    |    4 +
 .../webapp/style/rudder/rudder-bootstrap.css  |   76 +-
 .../webapp/style/rudder/rudder-directives.css |    3 +
 .../webapp/style/rudder/rudder-groups.css     |    8 +
 .../main/webapp/style/rudder/rudder-menu.css  |  178 +--
 .../main/webapp/style/rudder/rudder-rules.css |   23 +-
 .../main/webapp/style/rudder/rudder-table.css |  289 ++++
 .../src/main/webapp/style/rudder/rudder.css   | 1210 +----------------
 .../Popup/accept_new_server.html              |    2 +-
 .../Popup/expected_policy_popup.html          |    2 +-
 .../Popup/refuse_new_server.html              |    2 +-
 .../templates-hidden/common-layout.html       |    1 +
 24 files changed, 429 insertions(+), 1474 deletions(-)
 create mode 100644 webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-table.css

diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleCompliance.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleCompliance.scala
index 4f84109e87b..ebcfe6ca3eb 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleCompliance.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleCompliance.scala
@@ -120,14 +120,14 @@ class RuleCompliance (
       <div class="section-title">Recent changes</div>
     </div>
     <div id="recentChanges">
-      <div class="alert alert-info " style="font-size: 14px">
-        <div style="width:90%;display:inline-block;">
-        <span class="glyphicon glyphicon-info-sign"></span>
-        Details of changes for each period are displayed below the graph. Click to change the selected period.
-        </div>
-        <div class="recentChange_refresh">
-          {SHtml.ajaxButton(<i class="fa fa-refresh"></i>, () => refresh() , ("class","btn btn-primary btn-refresh") , ("title","Refresh"))}
+      <div class="alert alert-info">
+        <div>
+          <span class="glyphicon glyphicon-info-sign"></span>
+          Details of changes for each period are displayed below the graph. Click to change the selected period.
         </div>
+          <div class="recentChange_refresh">
+            {SHtml.ajaxButton(<i class="fa fa-refresh"></i>, () => refresh() , ("class","btn btn-primary btn-refresh") , ("title","Refresh"))}
+          </div>
       </div>
 
       <div id="changesChartContainer">
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
index 1142c0a3958..393ca255fb6 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
@@ -115,7 +115,7 @@ object DisplayNode extends Loggable {
                     },
             "bAutoWidth": false,
             "aoColumns": [ {"sWidth": "200px"},{"sWidth": "150px"},{"sWidth": "350px"}],
-            "sDom": '<"dataTables_wrapper_top"fl>rt<"dataTables_wrapper_bottom"ip>',
+            "sDom": '<"dataTables_wrapper_top"f>rt<"dataTables_wrapper_bottom"lip>',
             "lengthMenu": [ [10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "All"] ],
             "pageLength": 25
         });
@@ -133,7 +133,7 @@ object DisplayNode extends Loggable {
     val detailsId = htmlId(jsId,"details_")
     val softGridDataId = htmlId(jsId,"soft_grid_data_")
     val softPanelId = htmlId(jsId,"sd_soft_")
-    val eltIdswidth = List( ("process",List("50","50","50","60","120","50","100","850"),1),("var",List("200","800"),0))
+    val eltIdswidth = List( ("process",List("50","50","70","85","120","50","100","850"),1),("var",List("200","800"),0))
     val eltIds = List( "vm", "fs", "net","bios", "controllers", "memories", "ports", "processors", "slots", "sounds", "storages", "videos")
 
     JsRaw("var "+softGridDataId +"= null") &
@@ -161,7 +161,7 @@ object DisplayNode extends Loggable {
                 "bPaginate": true,
                 "bAutoWidth": false,
                 "bInfo":true,
-                "sDom": '<"dataTables_wrapper_top"fl>rt<"dataTables_wrapper_bottom"ip>',
+                "sDom": '<"dataTables_wrapper_top"f>rt<"dataTables_wrapper_bottom"lip>',
                 "lengthMenu": [ [10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "All"] ],
                 "pageLength": 25
               });
@@ -194,7 +194,7 @@ object DisplayNode extends Loggable {
                     },
                 "bAutoWidth": false,
                 "bInfo":true,
-                "sDom": '<"dataTables_wrapper_top"fl>rt<"dataTables_wrapper_bottom"ip>',
+                "sDom": '<"dataTables_wrapper_top"f>rt<"dataTables_wrapper_bottom"lip>',
                 "lengthMenu": [ [10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "All"] ],
                 "pageLength": 25
               });
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/EventListDisplayer.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/EventListDisplayer.scala
index e11f0b77b90..9f57b564354 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/EventListDisplayer.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/EventListDisplayer.scala
@@ -347,9 +347,9 @@ class EventListDisplayer(
       eventId match {
         case None => NodeSeq.Empty
         case Some(id) =>
-          <h4 id={"showParameters%s".format(id)} class="curspoint showParameters" onclick={"showParameters(%s)".format(id)}>
-            Raw Technical Details
-          </h4>
+          <button id={"showParameters%s".format(id)} class="btn btn-default showParameters" onclick={"showParameters(event, %s)".format(id)}>
+            <b class="action">Show</b> raw technical details
+          </button>
           <pre id={"showParametersInfo%s".format(id)} style="display:none;" class="technical-details">{ event.details.map { n =>xmlPretty.format(n) + "\n"} }</pre>
       }
     }
@@ -1628,7 +1628,7 @@ class EventListDisplayer(
               , { "sWidth": "100px" }
               , { "sWidth": "100px" }
             ],
-            "sDom": '<"dataTables_wrapper_top"fl>rt<"dataTables_wrapper_bottom"ip>'
+            "sDom": '<"dataTables_wrapper_top"f>rt<"dataTables_wrapper_bottom"lip>'
           });
         """))
   }
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/NodeGrid.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/NodeGrid.scala
index d7f40ef041f..0bf33840162 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/NodeGrid.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/NodeGrid.scala
@@ -145,7 +145,7 @@ class NodeGrid(
             ],
             "lengthMenu": [ [10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "All"] ],
             "pageLength": 25 ,
-            "sDom": '<"dataTables_wrapper_top"fl>rt<"dataTables_wrapper_bottom"ip>'
+            "sDom": '<"dataTables_wrapper_top"f>rt<"dataTables_wrapper_bottom"lip>'
           });
             """
         ) &
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/ReportDisplayer.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/ReportDisplayer.scala
index 0c10e9ef99b..2825419b0f2 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/ReportDisplayer.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/ReportDisplayer.scala
@@ -535,7 +535,7 @@ class ReportDisplayer(
        "oLanguage": {
          "sSearch": ""
        },
-       "sDom": '<"dataTables_wrapper_top"fl>rt<"dataTables_wrapper_bottom"ip>',
+       "sDom": '<"dataTables_wrapper_top"f>rt<"dataTables_wrapper_bottom"lip>',
        "aaSorting": [[ 0, "asc" ]],
        "aoColumns": [
          ${colums}
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/administration/TechniqueLibraryManagement.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/administration/TechniqueLibraryManagement.scala
index 6162e9c77e4..03eaf1ee2fe 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/administration/TechniqueLibraryManagement.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/administration/TechniqueLibraryManagement.scala
@@ -349,7 +349,7 @@ class TechniqueLibraryManagement extends DispatchSnippet with Loggable {
         showTechniqueDetails()
       case _ =>
         <div id={htmlId_bottomPanel}>
-          <div  class="centertext">
+          <div  class="text-center">
           Click on a Technique or a category from user library to
           display its details.</div>
         </div>
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/ParameterManagement.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/ParameterManagement.scala
index 883abff77e0..785a29c1c82 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/ParameterManagement.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/configuration/ParameterManagement.scala
@@ -166,7 +166,7 @@ class ParameterManagement extends DispatchSnippet with Loggable {
               { "sWidth": "600px" },
               { "sWidth": "140px" }
             ],
-            "sDom": '<"dataTables_wrapper_top"fl>rt<"dataTables_wrapper_bottom"ip>',
+            "sDom": '<"dataTables_wrapper_top"f>rt<"dataTables_wrapper_bottom"lip>',
             "lengthMenu": [ [10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "All"] ],
             "pageLength": 25
           });
@@ -190,7 +190,9 @@ class ParameterManagement extends DispatchSnippet with Loggable {
                   jTr.prop("open", "closed");
                   $(this).find("td.listclose").removeClass("listclose").addClass("listopen");
                   #table_var#.fnClose(this);
+                  $(this).removeClass("opened");
                 } else {
+                  $(this).addClass("opened");
                   jTr.prop("open", "opened");
                   $(this).find("td.listopen").removeClass("listopen").addClass("listclose");
                   var jsid = jTr.attr("jsuuid");
diff --git a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/PendingHistoryGrid.scala b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/PendingHistoryGrid.scala
index aff580548dc..35feca3a04c 100644
--- a/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/PendingHistoryGrid.scala
+++ b/webapp/sources/rudder/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/PendingHistoryGrid.scala
@@ -109,7 +109,7 @@ object PendingHistoryGrid extends Loggable {
             },
             "aaSorting": [[ 0, "desc" ]],
             "sPaginationType": "full_numbers",
-            "sDom": '<"dataTables_wrapper_top"fl>rt<"dataTables_wrapper_bottom"ip>'
+            "sDom": '<"dataTables_wrapper_top"f>rt<"dataTables_wrapper_bottom"lip>'
           });
           $('.dataTables_filter input').attr("placeholder", "Filter");
           $("#new_servers_tab").tabs();
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder-datatable.js b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder-datatable.js
index 6da5b87fb78..5c79517ba24 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder-datatable.js
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder-datatable.js
@@ -521,9 +521,6 @@ function createRuleTable(gridId, data, checkboxColumn, actionsColumn, compliance
   }
   var table = createTable(gridId,data,columns, params, contextPath, refresh, "rules", isPopup);
   table.search("").columns().search("");
-  if(isPopup){
-    $('#'+gridId).addClass("table table-hover table-striped table-bordered");
-  }
 
   // Add callback to checkbox column
   $("#checkAll").prop("checked", false);
@@ -1115,9 +1112,6 @@ function createNodeTable(gridId, data, contextPath, refresh) {
         var el = '<span>'+sData+state+'</span>';
         var nodeLink = $(el);
         link.append(nodeLink);
-        var icon = $("<i>");
-        icon.addClass("fa fa-search space-left node-details");
-        link.append(icon);
         $(nTd).empty();
         $(nTd).append(link);
       }
@@ -1130,7 +1124,7 @@ function createNodeTable(gridId, data, contextPath, refresh) {
     , "mDataProp": "osName"
     , "sTitle": "OS name"
   } , {
-      "sWidth": "5%"
+      "sWidth": "7%"
     , "mDataProp": "osVersion"
     , "sTitle": "OS version"
   } , {
@@ -1161,7 +1155,7 @@ function createNodeTable(gridId, data, contextPath, refresh) {
         $(nTd).prepend(link);
       }
   } , {
-      "sWidth": "12%"
+      "sWidth": "10%"
     , "mDataProp": "lastReport"
     , "sTitle": "Last seen"
   } ];
@@ -1382,7 +1376,9 @@ function createEventLogTable(gridId, data, contextPath, refresh, pickEventLogsIn
               var IdTd = tableRow.find("td.eventId");
               if (IdTd.hasClass("listclose")) {
                 myTable.fnClose(this);
+                tableRow.removeClass("opened");
               } else {
+                tableRow.addClass("opened");
                 // Set details
                 var detailsId =  'details-'+fnData.id;
                 // First open the row an d set the id
@@ -1710,6 +1706,7 @@ function createInnerTable(myTable,  createFunction, contextPath, kind) {
         }
         detailsId += "-details";
         if ( i === -1 ) {
+          $(this).addClass("opened");
           $(this).find("td.listopen").removeClass("listopen").addClass("listclose");
           var table = $("<table></table>");
           var tableId = fnData.jsid;
@@ -1730,6 +1727,7 @@ function createInnerTable(myTable,  createFunction, contextPath, kind) {
           $('#'+detailsId).slideDown(300);
           anOpen.push( this );
         } else {
+          $(this).removeClass("opened");
           $(this).find("td.listclose").removeClass("listclose").addClass("listopen");
           $('#'+detailsId).slideUp(300, function () {
             myTable.fnClose( this );
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder.js b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder.js
index 631a16d279e..818a81a1b02 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder.js
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/javascript/rudder/rudder.js
@@ -208,27 +208,6 @@ function moveFilterAndPaginateArea(tableId) {
   }
 }
 
-
-
-/**
- * Move the filter and paginate zones in the location described by tableId_paginate_area and tableId_filter_area
- * move the info (1 to 10) to the info area
- * @param tableId
- * @return
- */
-function moveFilterAndFullPaginateArea(tableId) {
-  $(tableId+"_paginate_area").append($(tableId+"_paginate"));
-  $(tableId+"_info_area").append($(tableId+"_info"));
-  if ($(tableId+"_filter_area")) {
-    $(tableId+"_filter_area").append($(tableId+"_filter"));
-  }
-  if ($(tableId+"_length")) {
-    $(tableId+"_info_area").append($(tableId+"_length"));
-  }
-
-}
-
-
 function dropFilterArea(tableId) {
   $(tableId+"_info").remove();
   $(tableId+"_filter").remove();
@@ -358,11 +337,12 @@ if ((version >= 5.5) && (filters))
    }
 }
 
-function showParameters(s){
-  if(document.getElementById("showParametersInfo" + s).style.display == "none")
-    document.getElementById("showParametersInfo" + s).style.display = "block";
-  else
-    document.getElementById("showParametersInfo" + s).style.display = "none";
+function showParameters(e, s){
+  var btn = $(e.target)
+  var txt = btn.find(".action").text();
+  btn.find(".action").text(txt=="Show" ? "Hide" : "Show");
+  $("#showParametersInfo" + s).toggle();
+
 }
 
 function redirectTo(url,event) {
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/administration/apiManagement.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/administration/apiManagement.html
index cd014d60883..d07a31a461a 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/administration/apiManagement.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/administration/apiManagement.html
@@ -23,8 +23,8 @@
     .btn.delete-button{
       margin-left:10px;
     }
-    #newAccount-expiration {
-      width:100%
+    .clearfix {
+      margin-left: -15px;
     }
     .toggle.btn {
       min-width: 94px !important;
@@ -32,6 +32,7 @@
     #newAccount-expiration {
       margin-top: 6px;
       margin-bottom: 12px;
+      width:100%
     }
   </style>
   <script data-lift="with-cached-resource" src="/javascript/rudder/angular/apiAccount.js" ></script>
@@ -73,7 +74,7 @@
             </div>
             <button class="btn btn-box-tool btn-blue pull-right space-top space-bottom" ng-click="getAccounts()">Refresh <span class="fa fa-refresh"></span></button>
           </div>
-          <table datatable="ng" dt-options="options" dt-column-defs="columns"  class="table-striped table-hover table-bordered table" id="accountGrid" >
+          <table datatable="ng" dt-options="options" dt-column-defs="columns" id="accountGrid" >
             <thead>
               <tr class="head tablewidth">
                 <th >Account Name</th>
@@ -83,7 +84,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr ng-repeat="account in accounts | filter:filterAccount track by $index">
+              <tr ng-repeat="account in accounts | filter:filterAccount track by $index" ng-class="{'color1': $index%2!=0, 'color2': $index%2==0}">
                 <td class="align-middle">
                   {{account.name}}
                   <span ng-if="account.description" data-toggle="tooltip" data-placement="top" data-html="true" title={{account.description}} class="bsTooltip fa fa-question-circle info-icon ruddericon tooltipable"></span>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/configurationManager/parameterManagement.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/configurationManager/parameterManagement.html
index 9e2ff41e7ee..640196a33cb 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/configurationManager/parameterManagement.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/configurationManager/parameterManagement.html
@@ -5,10 +5,9 @@
     <title>Rudder - Parameters Management</title>
     <style type="text/css">
     .portlet-content{
-      padding:0 15px;
-    }
-    .inner-portlet{
-      padding-top: 2px;
+      float: left;
+      width: 100%;
+      padding:0 15px 15px 15px;
     }
     .btn.space-bottom{
       margin-bottom:15px;
@@ -55,7 +54,6 @@
         </div>
       </lift:authz>
     </div>
-    <hr class="spacer" />
     <lift:authz role="directive_write">
       <div id="globalParameterForm"></div>
     </lift:authz>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/utilities/eventLogs.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/utilities/eventLogs.html
index 48e9358fb46..061d7527370 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/utilities/eventLogs.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/utilities/eventLogs.html
@@ -9,6 +9,10 @@
       #filterLogs{
         margin-bottom:12px;
       }
+      .btn.showParameters{
+        margin-bottom: 10px;
+        min-width: 195px;
+      }
     </style>
   </head>
 
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-bootstrap.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-bootstrap.css
index 4bf7b6592aa..e8ece8e2e69 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-bootstrap.css
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-bootstrap.css
@@ -95,10 +95,6 @@ body{
   z-index: 99999;
 }
 
-.content-wrapper .table {
-  margin-bottom:0;
-}
-
 .skin-yellow .modal{
   overflow-x: hidden;
   overflow-y: auto;
@@ -259,7 +255,6 @@ body{
 	float: left;
 }
 
-
 .col-xl {
   width:70%;
 }
@@ -413,9 +408,6 @@ body{
   font-weight: 600;
   cursor: help;
 }
-.dataTable .progress .progress-bar {
-  cursor: help;
-}
 
 #complianceGauge {
   max-width: 100%;
@@ -464,34 +456,7 @@ body{
 .skin-yellow.modal .tooltip {
   opacity: 1;
 }
-.skin-yellow .modal .dataTable tr.head{
-  background-image: none;
-  background-image: none;
-  background-color: #DAD9D9;
-}
-.skin-yellow .modal tr.head th{
-  color: #000 !important;
-  border-bottom: none;
-  width: 20%;
-  font-size: 14px;
-}
-.skin-yellow .modal .dataTables_paginate a {
-  background: rgb(255, 255, 255);
-}
-.skin-yellow .modal #pendingNodeConfirm_wrapper table{
-  box-shadow: none;
-}
-.skin-yellow .modal table{
-  border: none;
-}
-.skin-yellow .modal .dataTables_wrapper_top {
-  background-color: #fff;
-}
 
-.skin-yellow .modal .table-striped > tbody > tr:nth-child(odd) > td.dataTables_empty{
-  background-color: #FFFFFF;
-  border: none;
-}
 .skin-yellow .modal .space-top{
   margin-top: 30px !important;
 }
@@ -516,32 +481,7 @@ body{
 .skin-yellow .modal .well.jstree-rudder.jstree-focused, .skin-yellow .modal .well.jstree-rudder {
   background: #FBFBFB;
 }
-.content-wrapper #grid_remove_popup_grid a,.content-wrapper #grid_dependentRulesGrid a {
-  color: #2E2D2D;
-  text-decoration: underline;
-  transition-duration: .1s;
-}
-.content-wrapper #grid_remove_popup_grid a:hover,.content-wrapper #grid_dependentRulesGrid a:hover {
-  color: #ec8e0c;
-}
-.skin-yellow .modal table thead th {
-  border-right: 1px solid #B4B3A8 !important;
-}
-.skin-yellow .modal #pendingNodeConfirm_wrapper table thead th {
-  border-bottom: 1px solid #B4B3A8 !important;
-  border-right: none !important;
-}
-.skin-yellow .modal .dataTables_wrapper_bottom{
-  font-size: 12px;
-  background-color: rgb(213, 213, 213);
-}
-.skin-yellow .modal .dataTables_wrapper_top {
-  padding: 0 6px;
-  line-height: 37px;
-}
-.skin-yellow .modal #remove_popup_grid * {
-  border-color: #d8d8d8 !important;
-}
+
 .content-wrapper form input {
   width: auto;
 }
@@ -571,9 +511,8 @@ body{
   color: #565656;
   background-color: #fff;
 }
-/* PopUp error details */
-
 
+/* PopUp error details */
 .content-wrapper #showhidetechnicalerrors{
   margin-left: 65%;
 }
@@ -853,17 +792,8 @@ input.no-tw-bs, .no-tw-bs input[type="checkbox"], .no-tw-bs input[type="radio"]{
 .content-wrapper .btn-default:active {
   border : 1px solid #adadad !important;
 }
-.content-wrapper .dataTable{
-    font-size:14px;
-}
-.content-wrapper .dataTable a {
-  color: #333;
-  text-decoration: none;
-}
+
 .content-wrapper a:hover {
   color: #337ab7;
-  text-decoration:underline;
-}
-.content-wrapper .dataTable a:hover {
   text-decoration:none;
 }
\ No newline at end of file
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-directives.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-directives.css
index 187770733e2..4afa5a79a70 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-directives.css
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-directives.css
@@ -106,6 +106,9 @@
 #directiveRulesTab .only-tags .btn-xs.pull-right{
   float:left !important;
 }
+#grid_rules_grid_zone tr.head th {
+    padding: 4px 6px;
+}
 #edit-box{
   padding:10px;
   overflow-y:auto;
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-groups.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-groups.css
index e526361282c..b65e9b43d63 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-groups.css
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-groups.css
@@ -69,4 +69,12 @@
 }
 #groupsTree > .page-title{
   padding-bottom:7px;
+}
+#serverGrid tr.head th {
+  padding: 4px 6px;
+}
+#SearchNodes {
+  float: left;
+  width: 100%;
+  margin-bottom: 10px;
 }
\ No newline at end of file
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
index bc308676d52..3cffac31a80 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
@@ -97,26 +97,17 @@ header.main-header .logo-lg img{
   overflow : hidden;
 }
 /* - JSON - */
-tbody.toggle-color{
-  border-left:1px solid #c3c3c3;
-  border-right:1px solid #c3c3c3;
-}
-tbody.toggle-color > tr > td{
-  padding-bottom:0;
-}
-tbody.toggle-color > tr.color1 > td,tbody.toggle-color > tr.color2 > td{
-  padding-bottom:4px;
-}
 pre.json-beautify, .content-wrapper pre.json-beautify{
   border: none;
   background-color: transparent;
   border-radius: 0;
   cursor: pointer;
-  max-height: 70px;
+  max-height: 45px;
   transition-duration: .2s;
   overflow: hidden;
   position: relative;
   margin-bottom: 0;
+  padding: 0;
   padding-right: 25px;
   white-space: pre-wrap;
   word-break: break-all;
@@ -132,7 +123,7 @@ pre.json-beautify.toggle, .content-wrapper pre.json-beautify.toggle{
 pre.json-beautify:after,.content-wrapper pre.json-beautify:after{
   position:absolute;
   right:10px;
-  top : 10px;
+  top : 4px;
   color:#333;
   content: "\f054";
   display: inline-block;
@@ -289,30 +280,7 @@ pre.json-beautify.toggle:after, .content-wrapper pre.json-beautify.toggle:after{
 .user.user-menu .glyphicon,.tasks-menu .fa-book{
 	margin-right: 5px;
 }
-.skin-yellow.sidebar-collapse div.topQuickSearchResults.ac_results {
-  left: 95px !important;
-}
-.skin-yellow div.topQuickSearchResults.ac_results {
-  width: 250px !important;
-  left: 275px !important;
-  top: 42px !important;
-  transition-duration: .3s;
-  transition-timing-function: ease-in-out;
-  border: none;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-}
-div.topQuickSearchResults.ac_results .ac_over {
-  background-color: #fff !important;
-  color: #222D32 !important;
-  border-top: 1px solid #ccc;
-}
-div.topQuickSearchResults.ac_results li {
-  border:none;
-  border-top: 1px solid #ccc;
-}
+
 .skin-yellow .sidebar-form.topbar-search-form{
   display: inline-block;
   margin: 0;
@@ -523,10 +491,6 @@ a.sidebar-toggle{
   transition-duration:.2s;
 }
 
-.ui-widget-content .dataTable a {
-  color: #333;
-}
-
 .inner-portlet #auditMode h3 {
   width: 100%;
 }
@@ -562,10 +526,6 @@ a.sidebar-toggle{
   margin: 3px 5px;
   border-radius:0;
 }
-.content-wrapper td, .content-wrapper th {
-  padding: 4px 3px;
-  line-height: 1.42857143;
-}
 .content-wrapper .panel-default > .panel-heading {
   color: #333;
   background-color:#fff;
@@ -939,9 +899,7 @@ ul.graph-legend > li.legend:hover{
 #details .callout-fade{
   margin-top:15px;
 }
-.box-body div{
-  color:#555;
-}
+
 #details .box-body h4{
   color:#333;
   margin-bottom: 4px;
@@ -1224,35 +1182,13 @@ ul.graph-legend > li.legend:hover{
   border-top-left-radius:0;
   border-bottom-left-radius:0;
 }
-#nodePropertiesTab{
-  table-layout:fixed;
-}
-#nodePropertiesTab_info {
-  position: relative;
-  top: 3px;
-  padding-left: 3px;
-}
 #nodeProp .btn-success.new-icon{
   margin: 5px 0 7px 0;
 }
 #nodeProp .addon-json + textarea{
   min-height:initial;
 }
-#nodePropertiesTab tbody > tr > td:nth-child(2){
-  padding:0;
-}
-#nodePropertiesTab thead > tr > th:last-child{
-  border-left:none;
-}
-#nodeProp table .dataTables_empty{
-  display:none;
-}
-tbody.toggle-color > tr:nth-child(odd){
-  background-color: #eee;
-}
-table.tablewidth{
-  border:1px solid #d6d6d6;
-}
+
 .node-tab-content{
   float:left;
   width:100%;
@@ -1269,35 +1205,11 @@ table.tablewidth{
   padding-right:0;
   font-size:14px;
 }
-table.dataTable td i.node-details{
-  visibility:hidden;
-}
-table.dataTable td:hover i.node-details{
-  visibility:visible;
-}
-table > tbody > tr > td.action{
-  width:80px;
-}
 .content-wrapper #nodePropertiesTab_wrapper label {
   margin-bottom: 0;
   font-weight: normal;
   font-size: 13.2px;
 }
-.content-wrapper .dataTables_length label.text-fit{
-  font-size:13.2px;
-  margin-bottom:0;
-}
-.content-wrapper .dataTables_filter label{
-  margin-bottom:0;
-}
-.content-wrapper .dataTables_filter label input{
-  font-size:13.2px;
-  margin-bottom:0;
-  line-height:normal;
-  font-weight:normal;
-  padding: 6px 12px;
-  border-radius: 4px;
-}
 #nodePropertiesTab > tbody > tr > td.delete-action > .fa{
   display:none;
   cursor:pointer;
@@ -1559,13 +1471,11 @@ form .tooltip-content p {
   min-width: 78px;
   background-color: #777;
 }
-.dataTable td.content-wrapper ,.dataTable td .content-wrapper {
-  background-color:transparent;
-}
+
 .text-align-center{
   text-align:center;
 }
-.content-wrapper .jstree-container-ul .rudder-label.label-sm,.dataTable .rudder-label.label-sm{
+.rudder-label.label-sm{
   padding: 0 !important;
   min-width: 45px !important;
   margin-right: -1px;
@@ -1575,10 +1485,9 @@ form .tooltip-content p {
   height: 18px;
   line-height: 18px;
   font-style: normal !important;
+  font-size: 10px;
 }
-.dataTable .rudder-label.label-sm{
-  margin-right:5px;
-}
+
 #nodeDetails .rudder-label{
   position: relative;
   margin-bottom: -4px;
@@ -1591,11 +1500,7 @@ form .tooltip-content p {
   padding: 4px 12px;
   min-width: 68px;
 }
-.content-wrapper .rudder-label.label-sm{
-  font-size: 10px;
-  padding: 3px 8px;
-  min-width: 50px;
-}
+
 .content-wrapper .rudder-label.label-audit{
   background-color: #3694d1;
 }
@@ -2615,13 +2520,7 @@ form input.dyngroupReloadingButton, form button#launchDebugScriptButton{
   background-color:transparent;
   margin-top: 20px;
 }
-#pendingNodeConfirm_wrapper .ui-widget-header .dataTables_filter{
-  float:left;
-  text-align:left;
-}
-#pendingNodeConfirm_wrapper .ui-widget-header .dataTables_filter input{
-  margin-left:5px;
-}
+
 #pendingNodeConfirm{
   margin-top:10px;
 }
@@ -3013,17 +2912,6 @@ table a > i.fa-pencil:hover{
   color:#999;
 }
 
-/* TABLE */
-.content-wrapper .dataTable{
-  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-
-.content-wrapper .dataTable > thead th div {
-    color: #fff;
-}
-
 /* TABS */
 .ui-tabs-nav {
   border-bottom : 2px solid #e9e9e9;
@@ -3084,47 +2972,7 @@ table a > i.fa-pencil:hover{
   margin:0;
 }
 
-/* DATATABLES */
-.dataTables_paginate > .ui-button,
-.dataTables_paginate > span > .ui-button,
-.dataTables_paginate > span > .ellipsis{
-  padding: 2px 8px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  background-color: #f7f7f7;
-  transition-property: background-color;
-  transition-duration: .2s;
-}
-.dataTables_paginate > .ui-button:hover,
-.dataTables_paginate > span > .ui-button:hover{
-  background-color: #fff;
-}
-.dataTables_paginate > .ui-button:first-child {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.dataTables_paginate > .ui-button:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.dataTables_paginate .ui-button.ui-state-disabled{
-  color: #555 !important;
-  cursor: default !important;
-  background-color: #e8e8e8 !important;
-  opacity: .6;
-}
-.dataTables_paginate > span > .ellipsis{
-  margin-right: -1px;
-  cursor: default !important;
-}
-.dataTables_length select {
-  padding: 2px;
-  background-color: #fff;
-  border-radius: 4px;
-  color: #555;
-  border: 1px solid #ccc;
-  margin: 0 2px;
-}
+
 
 /* DATEPICKERS */
 #ui-datepicker-div{
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-rules.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-rules.css
index 65c26ac0b3a..6a0acb64eab 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-rules.css
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-rules.css
@@ -82,14 +82,31 @@ label.rule-info + div{
 .new-icon.category + .btn.btn-box-tool > .fa{
   margin-left:0;
 }
-#recentChanges .btn-refresh{
-  margin:-6px -6px 0 0;
+.recentChange_refresh{
+  float: right;
+  position: absolute;
+  top: calc(50% - 17px);
+  right: 8px;
+}
+#recentChanges {
+  /** If we want to scroll correctly to recent changes we need to set a minimum height,
+      or else when the graph appear (just after the scroll) we will only the the recent change section title
+  */
+  min-height: 300px;
+}
+#recentChanges .alert-info{
+  position: relative;
+  margin-top: 10px;
 }
 
 .targetContainer {
   min-height: 65px;
 }
-
+#details .dataTables_wrapper{
+  margin: 10px 0 20px 0;
+  float: left;
+  width: 100%;
+}
 @media (min-width: 991px) and (max-width: 1300px){
   .new-icon.category:before{
     content:"Add";
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-table.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-table.css
new file mode 100644
index 00000000000..c7f94ebb4aa
--- /dev/null
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-table.css
@@ -0,0 +1,289 @@
+.content-wrapper td, .content-wrapper th {
+  padding: 4px 3px;
+  line-height: 1.42857143;
+}
+
+/* <WRAPPER TOP> */
+.dataTables_wrapper_top,
+.dataTables_wrapper_bottom {
+  float            : left;
+  width            : 100%;
+  border           : 1px solid #e5e5e5;
+  padding          : 6px;
+  background-color : #f5f6f7;
+}
+.dataTables_wrapper_top {
+  border-bottom    : none;
+}
+.dataTables_filter{
+  float: left;
+}
+.dataTables_refresh{
+  float: right;
+}
+.dataTables_filter label{
+  margin-bottom: 0;
+}
+.dataTables_filter input{
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+  border: 1px solid #d0d0d0;
+  min-width: 250px;
+  outline: none !important;
+  transition-duration: .2s;
+}
+.dataTables_filter input:focus{
+  border-color: #c1c1c1;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(208, 208, 208, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgb(208, 208, 208);
+}
+/* </WRAPPER TOP> */
+
+/* <TABLE> */
+.dataTable{
+  width         : 100%;
+  border        : 1px solid #e5e5e5;
+  font-size     : 14px;
+  margin-bottom : 0px;
+}
+
+.dataTable .dataTable {
+  border-bottom: none !important;
+  border-right: none;
+  border-top: none;
+}
+/* </TABLE> */
+
+/* <THEAD> */
+.dataTable tr.head{
+  border-bottom : 1px solid #e5e5e5;
+  font-size: 1.15em;
+}
+/* </THEAD> */
+
+/* <TH> */
+.dataTable tr.head th{
+  padding: 10px 6px;
+  outline: none !important;
+  cursor: pointer;
+  transition-duration: .2s;
+}
+.dataTable .dataTable tr.head th {
+  padding: 4px 6px;
+  font-size: 0.9em;
+}
+.dataTable tr.head th.sorting{
+  color: #3481b9;
+}
+.dataTable tr.head th.sorting.sorting_desc,
+.dataTable tr.head th.sorting.sorting_asc{
+  color: #222D42;
+}
+.dataTable tr.head th.sorting:hover,
+.dataTable tr.head th.sorting.sorting_desc:hover,
+.dataTable tr.head th.sorting.sorting_asc:hover{
+  cursor: pointer;
+  color: #0e5e9f;
+}
+
+.DataTables_sort_icon.ui-icon-triangle-1-n,
+.DataTables_sort_icon.ui-icon-triangle-1-s,
+.listopen:before,
+.listclose:before {
+  margin-left: 4px;
+  display: inline-block;
+  font-family: FontAwesome;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  color: #999;
+}
+.DataTables_sort_icon.ui-icon-triangle-1-n:before{
+    content: "\f0d8";
+}
+.DataTables_sort_icon.ui-icon-triangle-1-s:before{
+    content: "\f0d7";
+}
+td.eventId{
+  position:relative
+}
+td.listopen,
+td.listclose{
+  cursor: pointer;
+}
+td.listopen:before,
+.listclose:before {
+  min-width: 12px;
+}
+td.listopen:before {
+  content: "\f0da";
+}
+td.listclose:before {
+  content: "\f0d7";
+}
+td.listclose:after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  transform: rotate(45deg);
+  background-color: #e2f1ff;
+  border-bottom: 1px solid #e4e4e4;
+  border-right: 1px solid #e4e4e4;
+  bottom: -7px;
+}
+.dataTable .dataTable td.listclose:after {
+  border: none !important;
+}
+/* </TH> */
+
+/* <TBODY><TR> */
+.dataTable > tbody > tr {
+  border-top: 1px solid transparent;
+}
+.dataTable > tbody > tr.details{
+  border-top: none;
+}
+.dataTable > tbody > tr.color2{
+  background-color: #f7f7f7;
+}
+.dataTable > tbody > tr:hover{
+  background-color: #e2f2ff;
+}
+.dataTable > tbody > tr.eventLogDescription {
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid #e5e5e5;
+  background-color: #FFF !important;
+}
+.dataTable > tbody > tr.opened {
+  border-top: 1px solid #E5E5E5 !important;
+  background-color: #e2f2ff;
+}
+
+.dataTable > tbody > tr.opened + tr.details + tr{
+  border-top: 1px solid #e4e4e4;
+}
+/* <TBODY><TR><TD> */
+.dataTable > tbody > tr > td{
+  padding: 6px;
+}
+.dataTable > tbody > tr > td.details{
+  padding: 0;
+}
+.dataTable > tbody > tr > td.listclose{
+  position: relative;
+}
+.dataTable > tbody > tr > td .rudder-label.label-sm{
+  margin-right: 6px;
+}
+
+.dataTable > tbody > tr > td .label-text {
+  cursor: help;
+  padding: 4px 0;
+}
+
+.dataTable .innerDetails {
+  display: none;
+  background : #f5f6f7;
+  padding-left:50px;
+  border-top: 1px solid #e4e4e4;
+  float: left;
+  width: 100%;
+}
+.dataTable .dataTable .innerDetails {
+  border-top: none !important;
+}
+
+.dataTable .innerDetails > div{
+  background-color: #fff;
+  margin: 0 !important;
+}
+/* </TBODY></TR></TD> */
+
+/* <WRAPPER BOTTOM> */
+.dataTables_wrapper_bottom {
+  border-top : none;
+}
+.dataTables_length,
+.dataTables_info{
+  float:left;
+}
+
+.dataTables_info{
+  padding-top: 3px;
+  margin-left: 15px;
+  opacity: .6;
+  font-style: italic;
+}
+.dataTables_paginate {
+  float: right;
+  text-align: right;
+  padding-top: 3px;
+}
+.dataTables_paginate > .ui-button,
+.dataTables_paginate > span > .ui-button,
+.dataTables_paginate > span > .ellipsis{
+  padding: 2px 8px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  background-color: #f7f7f7;
+  transition-property: background-color;
+  transition-duration: .2s;
+}
+.dataTables_paginate > .ui-button:hover,
+.dataTables_paginate > span > .ui-button:hover{
+  background-color: #fff;
+}
+.dataTables_paginate > .ui-button:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.dataTables_paginate > .ui-button:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.dataTables_paginate .ui-button.ui-state-disabled{
+  color: #555 !important;
+  cursor: default !important;
+  background-color: #e8e8e8 !important;
+  opacity: .6;
+}
+.dataTables_paginate > span > .ellipsis{
+  margin-right: -1px;
+  cursor: default !important;
+}
+.dataTables_length select {
+  padding: 2px;
+  background-color: #fff;
+  border-radius: 4px;
+  color: #555;
+  border: 1px solid #ccc;
+  margin: 0 2px;
+}
+.dataTables_paginate .fg-button {
+  border-top: 1px solid #cbcbcb;
+  border-right: none !important;
+  font-weight: normal !important;
+}
+.dataTables_paginate > .fg-button:last-child{
+  border-right: 1px solid #cbcbcb !important;
+}
+.paginate_button_disabled, .paginate_button, .paginate_active {
+  border-top: 1px solid #B4B3A8;
+  border-bottom: 1px solid #B4B3A8;
+  border-left: 1px solid #B4B3A8;
+  border-right: none;
+  display:inline-block;
+}
+
+/* </WRAPPER BOTTOM> */
+
+.dataTable > tbody > tr > td.dataTables_empty{
+  color: #777;
+  font-style: italic;
+  padding: 10px 6px;
+}
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder.css
index 0bd55d6880a..1ca63b4928f 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder.css
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder.css
@@ -37,6 +37,20 @@
 @-moz-document url-prefix() {
   fieldset { display: table-cell; }
 }
+
+* {
+  margin:0;
+  padding: 0;
+  list-style: none;
+}
+
+html {
+  height:100%;
+}
+
+
+
+
 /**********************************
  *Node inventory details
  **********************************/
@@ -55,11 +69,6 @@
   padding: 0px;
 }
 
-.sInventory table {
-  margin: 0px;
-  padding: 0px;
-}
-
 #chartjs-tooltip {
   opacity: 1;
   position: absolute !important;
@@ -85,17 +94,10 @@
   overflow: auto;
 }
 
-div.innerDetails {
-  display: none;
-  background : #DEDEDE;
-  padding-left:5%;
-}
-
 /**********************************
  * Node details
  **********************************/
 
-
 #nodeDetails {
  padding:10px;
 }
@@ -116,30 +118,8 @@ div.innerDetails {
   float: left;
 }
 
-table.nomargin {
- margin: 0px;
- width: 100%;
-}
-td.crTree {
-  border-top: 0px;
-  width: 32%;
-  vertical-align: top;
-}
-
-td.nodeIndernal {
-  border-top: 0px;
-  width: 56%;
-  vertical-align: top;
-}
-
-.showParameters {
-  margin-top:5px;
-  margin-bottom:3px;
-  text-decoration:underline;
-}
-
 /**********************************
- *          formulaire            *
+ *            FORM                *
  **********************************/
 
 .directiveTechnicalInfo{
@@ -151,12 +131,8 @@ td.nodeIndernal {
    cursor: pointer;
 }
 
-.inner-portlet div.intro {
-   margin: 5px 0px 0px 0px !important;
-}
-
 div.intro {
-   margin: 0px 0px 0px 0px;
+   margin: 5px 0px 0px 0px;
    padding: 0px;
    width: 100%;
    font-size: 1em;
@@ -177,14 +153,6 @@ div.intro div ul {
    padding: 0 0 0 20px;
 }
 
-form a {
-   color: #333333;
-}
-
-form table a {
-   color: black;
-}
-
 form h2 {
    padding: 0 10px;
    font-size: 1.2em;
@@ -202,49 +170,10 @@ form h3 {
    margin-left:10px;
 }
 
-form hr {
-   margin: 0 15px;
-   width: 95%;
-   clear: both;
-}
-form select {
-   width: auto;
-   padding: 2px;
-   background-color: #f8f8f8;
-   border: 1px solid #b4b3a8;
-}
-form label.champ {
-   float: left;
-   padding-right: 20px;
-   width: 25%;
-   text-align: right;
-}
-form input {
-   width: 130px;
-   padding: 2px;
-   background-color: #f8f8f8;
-   border: 1px solid #b4b3a8;
-}
-
 td.directiveVarValue > input {
   width: 500px;
 }
 
-form input[type=checkbox] {
-   width:auto;
-   padding:0px;
-}
-
-form textarea {
-  padding: 2px;
-  border: 1px solid #b4b3a8;
-}
-
-form input.radio {
-  width: auto;
-  border: 0px;
-}
-
 .compositionCheckbox input {
   margin-left : 5px;
   vertical-align: middle;
@@ -261,74 +190,6 @@ button.ui-state-default {
 
 }
 
-.dangerButton {
-  color: #990000 !important;
-}
-
-.dangerButton:hover {
-  background-color: #B33630 !important;
-  background-image: linear-gradient(#DC5F59, #B33630) !important;
-  background-repeat: repeat-x !important;
-  border-color: #CD504A !important;
-  color: #FFFFFF !important;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
-}
-
-button.largeButton {
-  width:250px !important;
-}
-
-.popupButton button {
-   background: linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
-   border: 1px solid #b4b3a8;
-   transition: none 0s ease 0s;
-   margin: 2px 0px 2px 0px;
-}
-
-.popupButton button:hover {
-   background-color: #EEEBE7;
-   font-weight: bold;
-   color: #000;
-   background: none;
-   border-color: #FBCB09;
-}
-
-.popupButton input {
-   background-color: #f8f8f8;
-   border: 1px solid #b4b3a8;
-}
-
-form .center input {
-   color: #000;
-   background-color: #fba511;
-   border: 1px solid #ff7200;
-}
-form span.inputDetail {
-   color: #666;
-   font-weight: 500;
-}
-form div.entete {
-   margin: 10px;
-   background-color: #fff3c9;
-}
-form .entete p {
-   float: left;
-   margin: 5px;
-   padding: 0 5px;
-}
-form p.search {
-   float: right;
-}
-
-
-#searchControl {
-  margin-top:10px;
-}
-#searchControl span {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
 form select.selectComparator {
    width: 150px;
 }
@@ -344,28 +205,6 @@ form select.selectField {
 
 }
 
-.cursor{
-  cursor:pointer;
-}
-
-.listopen:before{
-  content:url('../../images/tableau/flecheDroiteGris.png');
-  padding-right: 3px;
-}
-
-.listclose:before{
-  content:url('../../images/tableau/flecheBasGris.png');
-  padding-right: 3px;
-}
-
-input.hasDatepicker {
-  width:90px;
-}
-
-button.ui-datepicker-trigger {
-  width: 25px !important;
-}
-
 form input.removeLineButton {
   padding: 0em 0.3em;
   width:18px !important;
@@ -378,290 +217,6 @@ input.deleteNetwork * {
   padding: 10px 20px;
 }
 
-/**************************************
-Tableau
-**************************************/
-#acceptNodeGrid {
-  width:100%;
-  border-left: 1px solid #B4B3A8;
-  border-right: 1px solid #B4B3A8;
-}
-#acceptNodeGrid > tbody > tr > td:nth-child(5),#acceptNodeGrid > tbody > tr > td:nth-child(6){
-  text-align:center;
-}
-#pending_server_history {
-  width:100%;
-  border-left: 1px solid #B4B3A8;
-  border-right: 1px solid #B4B3A8;
-}
-
-.sgridbph{
-  border:0;
-  padding:0;
-  height:200px;
-}
-
-.titleId{
-  padding-left: 15px;
-}
-
-.tablewidth{
-  width:100%;
-}
-
-.reportTableTitleWidth{
-  width:auto;
-}
-
-.reportbiggerWidth{
-  width:110px;
-}
-.reportTitleWidth{
-  width:92px;
-}
-.autotablewidth{
-  width:auto;
-}
-.tablepadding{
-  padding-left:15px;
-  padding-top:5px;
-  line-height: normal;
-}
-.tablemargin{
-  margin-top:5px;
-}
-
-.dataTables_wrapper table {
-  width:100%;
-  border: 1px solid #e8e8e8;
-  border-top: none;
-  border-bottom: none;
-}
-
-.content-wrapper #grid_rules_grid_zone a{
-  color:#333;
-}
-#acceptNodeGrid_wrapper {
-  margin: 10px;
-}
-
-caption {
-   display: none;
-}
-
-th, tr, td {
-   padding: 4px 3px;
-   text-align: left;
-}
-tr.head, tr.foot {
-   color: #fff;
-   font-weight: bold;
-}
-tr.foot {
-   background: url(../images/tableau/cCentrebas.jpg) bottom left;
-}
-tr.head {
-  background-image: -webkit-linear-gradient(top, #888, #555);
-  background-image: -moz-linear-gradient(top, #888, #555);
-  background-color: #666;
-}
-
-.head th.first {
-   padding: 5px 10px;
-   background: url(../images/tableau/cGhaut.jpg) no-repeat top left;
-}
-.head th.last {
-   background: url(../images/tableau/cDhaut.jpg) no-repeat top right;
-}
-.foot td.first {
-   padding: 5px 10px;
-   background: url(../images/tableau/cGbas.jpg) no-repeat bottom left;
-}
-.foot td.last {
-   background: url(../images/tableau/cDbas.jpg) no-repeat bottom right;
-}
-th a {
-   color: #fff;
-   font-weight: bold;
-   text-decoration: none;
-}
-tr.color1 {
-   background-color: #eee;
-}
-
-tr.color2 {
-   background-color: #fff;
-}
-
-td.center, .center {
-  text-align : center;
-}
-
-td.right {
-  text-align : right;
-}
-
-.warning {
-  color: #c00;
-}
-
-a.warning {
-  color: #c00;
-  padding-left: 30px;
-}
-
-table.dataTable td img, table.dataTable th img {
-  float: none;
-  margin: 0;
-  padding: 4px 0 0 0;
-}
-
-
-.head th input, .foot td input {
-  padding: 0.1em;
-  background-color: #f8f8f8;
-  border: 1px solid #b4b3a8;
-}
-
-.field_errors, .error, .errors {
-  color: #c00800;
-}
-
-.field_errors {
-  margin-top:4px;
-}
-
-.field_errors li {
-  list-style-position:inside;
-}
-
-
-
-/**********************
-* Custom for DataTable
-***********************/
-
-.dataTables_filter {
-  text-align:right;
-  width:50%;
-  float:right;
-}
-
-.newFilter .dataTables_filter {
-  float:left;
-  text-align:left;
-}
-
-.dataTables_filter input {
-  padding: 2px;
-  border: 1px solid #ccc;
-}
-
-.newFilter .dataTables_filter input {
-  padding: 8px 5px;
-  border: 1px solid #ccc;
-}
-
-.dataTables_length {
-  width:27%;
-  float:left;
-}
-
-.dataTables_{
-  float:right;
-  width:50%;
-  text-align:right
-}
-
-.dataTables_pickstart, .dataTables_pickend, .dataTables_pickdates{
-  float:right;
-}
-input.pickStartInput, input.pickEndInput {
-  width: 135px !important;
-  margin: 5px;
-}
-
-.dataTables_refresh{
-  float:right;
-  width:15%;
-  text-align:right
-}
-
-.recentChange_refresh {
-  float: right;
-  width: 10%;
-  text-align: right;
-}
-
-.paginate {
-  width : 50%;
-  align:left;
-  height:20px;
-}
-.sorting span,.sorting_asc span,.sorting_desc span   {
-  float:right;
-  width:14px;
-}
-.sorting {
-  cursor: pointer;
-}
-.sorting_asc {
-  cursor: pointer;
-}
-.sorting_desc {
-  cursor: pointer;
-}
-
-/**********************************
- * Pagination nested
- **********************************/
-
-.dataTables_paginate {
-  float: right;
-  text-align: right;
-}
-
-.dataTables_info {
-  float: left;
-  width: 27%;
-  padding: 3px 0px 3px 0px;
-  color: #777;
-}
-table.noMarginGrid {
-  border-left : 0 ;
-  border-right : 0 ;
-}
-.noMarginGrid {
-  margin: 0;
-}
-#reportsGrid_wrapper {
-  margin: 0;
-}
-#explanationMessage{
-  display: inline-block;
-}
-
-/*
-.dataTables_wrapper_top {
-  padding: 6px;
-  overflow: hidden;
-  display: block;
-  border-top: 1px solid #B4B3A8;
-  border-left: 1px solid #B4B3A8;
-  border-right: 1px solid #B4B3A8;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-*/
-.dataTables_wrapper_top {
-  padding: 6px;
-  overflow: hidden;
-  display: block;
-  border: 1px solid #e8e8e8;
-  border-bottom: none;
-  border-radius: 0;
-}
-
 @media screen and (min-width: 993px) {
   #reportsGrid tr>th:last-child,#reportsGrid tr>td:last-child{
     width:30% !important;
@@ -685,18 +240,7 @@ table.noMarginGrid {
   white-space: normal;
 }
 
-.dataTables_wrapper_bottom {
-  overflow: hidden;
-  display: inline-block;
-  display: block;
-  border: 1px solid #e8e8e8;
-  border-top: none;
-}
-.dataTables_wrapper_bottom > div{
-  padding: 6px;
-}
 #grid_rules_grid_zone {
-  border-right: 1px solid #B4B3A8;
   width: 100%;
   table-layout: fixed;
 }
@@ -709,7 +253,6 @@ table.noMarginGrid {
 
 }
 
-
 .reportIcon {
   padding-left: 6px !important;
 }
@@ -728,9 +271,7 @@ table.noMarginGrid {
 .cpiefsave{
   float:right;
 }
-.pimversionspad{
-  padding:20px;
-}
+
 .wbBaseField * {
   vertical-align: middle;
 }
@@ -747,8 +288,6 @@ table.noMarginGrid {
 .variableDefinition > span,
 .variableDefinition td,
 .variableDefinition input {
-  font-size: 12px;
-  font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
   vertical-align: middle;
 }
 
@@ -768,11 +307,6 @@ fieldset.groupFieldset {
   padding: 1px 10px 1px 10px;
 }
 
-fieldset.techniqueDetailsFieldset {
-  margin: 10px;
-  padding: 1px 10px 1px 10px;
-}
-
 div.foldableSection div.section-title {
   cursor: pointer;
 }
@@ -828,22 +362,6 @@ div.foldedSection div.section-title:before {
 .lopaddscala{
   padding:0px
 }
-.createitem{
-  text-align: right;
-}
-
-td.directiveVarLabel {
-  width:25%;
-  margin-right:2px;
-  text-align: left;
-  font-size: 14px;
-  font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
-}
-
-td.directiveVarLabel span {
-  font-size: 14px;
-  font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
-}
 
 td.directiveVarValue  {
   width:70%;
@@ -854,27 +372,10 @@ td.directiveVarValue  {
   height: 300px;
 }
 
-/**********************************
- * Temporal information
- *********************************/
-.variableDefinition td {
-   border-top: 0px;
-}
 
 /*********************************
 * Search servers
 *********************************/
-
-.nodeheader {
-  font-weight: bold;
-  font-size: medium;
-  text-align: center;
-}
-
-.nodeheadercontent {
-
-}
-
 .paddscala{
   padding: 0px 0px 0px 15px;
 }
@@ -909,25 +410,12 @@ fieldset.searchNodes {
   clear: both;
 }
 
-.reasonNode {
-  padding:8px;
-  margin:5px;
-  width: 550px;
-  clear: both;
-}
-
-
 fieldset.groupCategoryUpdateComponent {
   padding:5px;
   margin:5px;
   width: 580px;
 
 }
-fieldset.groupUpdateComponent {
-  padding:8px;
-  margin:5px;
-  width: 580px;
-}
 
 tr.query_line, .query_line td {
   padding: 4px 1px;
@@ -943,80 +431,6 @@ tr.query_line, .query_line td {
   display: inline-block;
 }
 
-.compositionRadio {
-  display: table-row-group !important;
-  text-align:left;
-}
-
-table#serverGrid tbody td {
-  border-left: solid 1px #ABABAB;
-  border-bottom: solid 1px #ABABAB;
-  border-top: 0px;
-}
-
-#serverGrid_wrapper table {
-  margin:0;
-}
-
-.dataTables_scrollHeadInner table {
-  margin:0px;
-}
-
-.dataTables_scrollHeadInner {
-  background:url("../../images/tableau/fdTaboHead.jpg") repeat-x scroll left top transparent;
-}
-
-.dataTables_scrollBody table {
-  margin:0px;
-}
-
-#serverGrid_paginate_area {
-  float:left;
-}
-div.dataTables_scroll {
-  clear: both;
-}
-
-#serverGrid_info_area {
-  margin:0 0 0 5px;
-}
-
-#serverGrid_info_area div {
-  display:inline-block;
-}
-
-#serverGrid_tooManyResult {
-  width: 748px;
-  margin:0 0 0 10px;
-  border: solid 1px #ABABAB;
-}
-
-
-.paginate_button {
-  padding: 2px 6px;
-  margin: 0;
-  cursor: pointer;
-  font-size:12px;
-}
-
-.paginate_button:hover {
-  background-color: #FFF3C9;
-  text-decoration: underline;
-}
-
-.paginate_button_disabled {
-  padding: 2px 6px;
-  margin: 0;
-}
-
-.paginate_active {
-  padding: 1px 5px 2px 5px;
-  margin: 0;
-  color: #333333;
-  font-size:13px;
-}
-
-
 /************************
  * Search groups
  ************************/
@@ -1043,123 +457,23 @@ fieldset.groupCategory {
    padding: 5px 0 5px 0;
 }
 
-
-fieldset.crEditHierarchy {
-  width:45%;
-  margin:5px;
-  padding:5px;
-  display: inline-block;
-  vertical-align: top;
-}
-/* Firefox specific behavior cause bug https://bugzilla.mozilla.org/show_bug.cgi?id=504622 https://bugzilla.mozilla.org/show_bug.cgi?id=261037 */
-@-moz-document url-prefix() {
-  fieldset.crEditHierarchy {
-    display: table-column;
-  }
-}
-
 div.hierarchySpacer {
   width:5%;
   display: inline-block;
 }
-/*
-
-*/
-* {
-   margin:0;
-   padding: 0;
-   list-style: none;
-}
-
-html {
-   height:100%;
-}
-
-img {
-   border: none;
-}
-a:focus {
-   border: none;
-   outline: none;
-}
-
-/**************************************
-structure
-**************************************/
-.subContainerReasonField {
-  padding: 0 4px 0 4px;
-}
-
-div#prelude {
-   display: none;
-}
-
-div#navigation {
-   float: left;
-   background-color: #1e1e1e;
-   border-top-right-radius: 10px;
-   border-bottom-right-radius: 10px;
-}
-
-#deploymentLastStatus  {
-  float:left
-}
-
-#deploymentProcessing {
-  float:left
-}
-div.pendingModificationStatus {
-  float:right;
-  width:200px;
-  padding-bottom:10px;
-}
-
-div.pendingModificationStatus a {
-  font-size:1.1em;
-  color:white;
-}
-
-/**************************************
-header - haut de page
-**************************************/
-.logoutbutwidth{
-  width:130px;
-}
-div#infosUser {
-   padding: 10px 5px;
-   height: 30px;
-   color: #f79d10;
-}
-#infosUser p {
-   float: left;
-}
-#infosUser .whoUser {
-   margin-left: 30px;
-   font-size: 1.4em;
-   font-weight: bold;
-   color: #f79d10;
-}
-*html #infosUser .whoUser {
-   margin-left: 20px;
-}
-#infosUser .detailsUser {
-   padding-top: 0.2em;
-   font-size: 1.1em;
-   color: #999;
-}
-#infosUser .whoUser a {
-   margin: 0;
-   padding: 0;
-   color: #f79d10;
-   text-decoration: underline;
+
+/**************************************
+structure
+**************************************/
+.subContainerReasonField {
+  padding: 0 4px 0 4px;
 }
-#infosUser .detailsUser a {
-   margin: 0;
-   padding: 0;
-   font-weight: normal;
-   color: #999;
-   text-decoration: underline;
-   cursor: pointer;
+
+div#navigation {
+   float: left;
+   background-color: #1e1e1e;
+   border-top-right-radius: 10px;
+   border-bottom-right-radius: 10px;
 }
 
 #documentation {
@@ -1173,22 +487,10 @@ div#infosUser {
   color: #999;
 }
 
-
 .automaticCleanDetail {
   padding : 5px 5px 0;
 } 
 
-#create-user {
-   border: none;
-   font-size: 1em;
-   font-weight: normal;
-   color: #f79d10;
-   text-decoration: none;
-}
-span.ui-button-text {
-   background: none;
-   border: none;
-}
 #opener {
    border: none;
    background: none;
@@ -1210,57 +512,6 @@ span.ui-button-text {
    text-decoration: none;
 }
 
-.deploymentButton {
-  background: #DDDDDD !important;
-}
-
-.modificationsDisplayer {
-  float:right;
-  margin-right: 50px;
-  margin-top: 10px;
-}
-
-.modificationsDisplayer span {
-  margin-right: 30px;
-  padding: 0;
-  font-weight: normal;
-  color: #FFFFFF;
-  font-size: 14px;
-  font-weight: bold;
-  clear : both;
-  float : left;
-}
-.modificationsDisplayer a{
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-/**************************************
-contenu
-**************************************/
-
-div#contenu {
-   margin: 0 auto;
-   position: relative;
-   float: left;
-   width: 94%;
-   padding-left: 3%;
-   background-color: #2e2d2d;
-}
-#contenu h1 {
-   margin: 0 0 5px 0;
-   color: #fff;
-}
-p#filAriane {
-   padding: 0 5px 10px 0;
-   font-size: 1em;
-   color: #f79d10;
-   background-color: #2e2d2d;
-}
-#filAriane a {
-   color: #f79d10;
-}
-
 /**************************************
 Home portlet
 **************************************/
@@ -1270,7 +521,6 @@ Home portlet
    float: left;
 }
 
-
 p img {
    float: none !important;
    margin: 0px !important;
@@ -1330,21 +580,11 @@ table .innerDetails li{
 #actions_zone{
   margin:10px 10px 0px 5px;
 }
-.popcurs{
-  text-decoration: underline;
-  cursor:pointer;
-}
+
 .curspoint{
   cursor:pointer;
 }
-.newservertable{
-  max-height: 300px;
-  overflow-y: auto;
-}
-.newservercell{
-  overflow:scroll;
-  max-height: 100px;
-}
+
 
 #ui-dialog-title-addPopup{
   height: 25px;
@@ -1363,91 +603,6 @@ table .innerDetails li{
 .popupButton span {
   float: none;
 }
-#succesConfirmationDialog{
-  z-index : 9995;
-}
-/**************************************
-popin Login
-**************************************/
-
-#dialogLogOut {
-  display:none;
-}
-
-#dialogLogOut a:hover {
-   text-decoration: underline;
-}
-#login {
-   padding-right: 15px;
-}
-#login p {
-   font-size: 1.2em;
-   font-weight: 800;
-   text-align: center;
-}
-#login a {
-   color: #000;
-}
-#login a:hover {
-   text-decoration: none;
-}
-
-
-/**************************************
-popin Account
-**************************************/
-.userinfowidth{
-  width:130px;
-}
-#account h2 {
-   color: #f79d10;
-   font-size: 2em;
-   font-weight: 800;
-}
-#account div {
-   padding: 10px 10px 20px 10px;
-}
-#account p {
-   margin: 10px 0;
-   font-size: 1.2em;
-   font-weight: 800;
-}
-#account p.right {
-   margin-right: 10px;
-}
-#account p.right a {
-   font-size: 0.8em;
-}
-#account p.validateTips {
-   margin: 15px 0;
-}
-#account label {
-   float: left;
-   padding: 5px 10px 0 0;
-   width: 20%;
-   text-align: right;
-}
-#account input {
-   width: 210px;
-   border: 1px solid #b4b3a8;
-   background-color: #f8f8f8;
-}
-#account textarea {
-   margin-top: 5px;
-   width: 465px;
-   color: #666;
-}
-#account a {
-   color: #000;
-}
-#account a:hover {
-   text-decoration: none;
-}
-
-/**************************************
-popin Alert
-**************************************/
-
 
 /*****************************************
 * Popup creation groupe/category
@@ -1465,12 +620,8 @@ popin Alert
 }
 
 /*************************
-*   Divers
+*   Misc
 **************************/
-
-/*
- * Underlined, dotted grey: that text has a tooltip
- */
 .tooltip {
   color: #999;
   padding-top: 0px;
@@ -1531,35 +682,7 @@ td.complianceTd, td.parametersTd {
   height: 15px;
 }
 
-.mediumButton {
-  width: 65px !important;
-  height: 22px !important;
-  line-height: 10px;
-}
-
-.mediumButton span {
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}
-
-.mediumButton img {
-  height: 15px;
-}
-.autoWidthButton {
-  width: auto !important;
-}
-
 /* others */
-
-.errorscala{
-  border-bottom:1px solid red;
-  cursor:pointer;
-}
-.tree li.filteredNode {
-  display:none;
-}
 .deca{
   padding: 10px;
 }
@@ -1567,11 +690,6 @@ td.complianceTd, td.parametersTd {
 .inline{
   display:inline;
 }
-.iconscala{
-  float:left;
-  margin-right:5px;
-  margin-top:2px;
-}
 
 .err{
   padding-left: 50px;
@@ -1586,10 +704,6 @@ td.complianceTd, td.parametersTd {
   float:left;
   margin-right:9px;
 }
-.erroricon{
-  float:left;
-  margin-right:10px;
-}
 .icon{
   float:left;
   margin-right:20px;
@@ -1597,9 +711,7 @@ td.complianceTd, td.parametersTd {
 .greenscala{
   color:green
 }
-.centertext{
-  text-align:center;
-}
+
 .greyscala{
   color: #999;
 }
@@ -1658,11 +770,6 @@ hr.spacer {
   width:67%;
 }
 
-.twoColPopup {
-  float:left;
-  width:66%;
-}
-
 .rudderBaseFieldClassName {
   width:99%;
 }
@@ -1671,35 +778,12 @@ hr.spacer {
   width:101%;
 }
 
-.twoColParentCategory {
-  float:left;
-  width:62%;
-  margin-right: 2px;
-}
-
 .threeCol {
   float:left;
   width:30%;
   margin-right: 4px;
 }
 
-.threeColReason {
-  float:left;
-  width:30%;
-  margin-right: 2px;
-  margin-bottom: 5px;
-}
-
-.threeColErrors {
-  float:left;
-  margin-right: 2px;
-}
-
-.smallCol {
-  float:left;
-  margin-right: 2px;
-  width:20%;
-}
 .largeCol {
   float:left;
   margin-right: 2px;
@@ -1730,14 +814,6 @@ legend {
   padding-right: 5px;
 }
 
-#createANewItem {
-  margin: 5px 0px 9px 0px;
-}
-
-#createANewItemContentForm div {
-/*   margin-top:3px; */
-}
-
 /************************************
 Portlet content for object details
 (for example, details about a Directive
@@ -1788,34 +864,14 @@ div.tabInform {
  *Directive display
 ************************************/
 
-.policyTitle {
-  font-size:1.3em;
-  font-weight:bold;
-  text-align:center;
-}
-
-.policyDescription {
-   font-weight:bold;
-}
-
-#policyDetails {
-  margin : 10px;
-  padding : 5px;
-  border: 1px solid #2d2d2d;
-}
-
-.directiveContainer {
-  margin : 5px;
-}
-
 .directiveTitle {
   font-weight:bold;
 }
 
 tr.parametersDescription {
-  border-bottom: 1px solid #ABABAB;
-  border-top: 0px;
+  background-color: #f9f9f9 !important;
   height: 30px;
+  border-top: 1px solid #e5e5e5 !important;
 }
 
 .parametersDescriptionDetails {
@@ -1828,47 +884,12 @@ tr.parametersDescription {
   padding:5px;
 }
 
-.emptyTd {
-  border: 0pt none !important;
-  background : #DEDEDE !important;
-}
-
-.reportTable {
-  border-bottom : 2pt ridge;
-}
-
-.detailReport {
-  border: 0pt none;
-}
-.firstTd {
-
-  border-left: 1px ridge #ABABAB !important;
-}
-
-td.nestedImg{
-  padding: 0px 3px !important;
-}
 .evlogviewpad li{
   list-style-type: disc;
 }
 .evloglmargin{
   margin: 7px;
 }
-.reportsList {
-  margin : 10px;
-  padding : 5px;
-}
-
-.reportsTitle {
-  font-size:1.3em;
-  font-weight:bold;
-}
-
-.reportsGroup {
-  margin : 10px;
-  padding : 5px;
-  border: 1px solid #2d2d2d;
-}
 
 .reportsNode {
   margin : 10px;
@@ -1881,40 +902,18 @@ td.nestedImg{
   font-size: 1.1em;
 }
 
-.reportDetailsGroup {
-  padding: 0 20px;
-  border-left:1px dotted;
-  border-right:1px dotted;
+.field_errors, .error, .errors {
+  color: #c00800;
 }
 
-td.EnforceSuccess,td.AuditNotApplicable,td.EnforceNotApplicable,td.AuditCompliant,td.Compliant,td.NotApplicable,td.Success{
-  background-color:#9bc832;
-  color: #fff;
-}
-td.AuditNonCompliant,td.NonCompliant {
-  background-color:#ff7125;
-  color: #fff;
-}
-td.Missing,td.EnforceError,td.AuditError,td.Error,td.Unexpected,td.BadPolicyMode {
-  background-color:#c9302c;
-  color: #fff;
-}
-td.Pending{
-  background-color: #5bc0de;
-  color: #fff;
-}
-td.Disabled, td.NoAnswer {
-  background-color: #b4b4b4;
-  color: #fff;
-}
-td.Repaired{
-  background-color: #F5DD4D;
-  color: #333;
+.field_errors {
+  margin-top:4px;
 }
-td.details,.content-wrapper td.details{
-  border:none;
-  padding:0;
+
+.field_errors li {
+  list-style-position:inside;
 }
+
 li.eventLogUpdatePolicy {
   list-style-position: inside;
   list-style-type: none;
@@ -1924,35 +923,12 @@ table.eventLogUpdatePolicy {
   margin-top: 0px;
   margin-left: 0px;
 }
-table.detailedReport {
-  margin : 0;
-  padding: 0 0 0 100px;
-  width: 100%
-}
-
-span.detailedReportTitle {
-  position:absolute;
-}
 
 table.fixedlayout{
   table-layout:fixed;
   word-wrap:break-word
 }
 
-tr.detailedReportLine, td.detailedReportLine {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-td.severityWidth, th.severityWidth {
-  width: 200px;
-}
-
-tr.unfoldable {
-  cursor:pointer;
-}
-
 .diffOldValue {
   text-decoration:line-through;
 }
@@ -1974,11 +950,6 @@ tr.unfoldable {
   vertical-align: middle;
 }
 
-.treefilternodecursor{
-  cursor:pointer;
-  cursor:hand;
-}
-
 .treeActiveTechniqueName , .treeActiveTechniqueCategoryName , .treeGroupCategoryName, .treeRuleCategoryName {
   color: #555
 }
@@ -1992,17 +963,6 @@ i.jstree-icon.jstree-themeicon.fa.fa-file-text.jstree-themeicon-custom {
   color: #555;
 }
 
-.dataTable tr > td a{
-  text-decoration:none !important;
-  color: #333;
-}
-.dataTable tr > td a:hover{
-  color:#000 !important;
-}
-.dataTable tr > td .ui-state-hover a:hover{
-  color:#c77405 !important;
-}
-
 tr.disabledRule > td .rudder-labNodeel ~ a:after{
   color: #999;
   content:"- Disabled";
@@ -2025,15 +985,6 @@ a>.jstree-icon{
   background-position: 0!important;
 }
 
-.homePageBlock {
-  margin: 10px;
-}
-
-.homePageBlock li {
-  list-style-type: disc;
-  list-style-position:inside;
-}
-
 del {
   text-decoration: none;
   background: #FFD6D6;
@@ -2044,59 +995,6 @@ ins {
   background: #D6FFD6;
 }
 
-table thead th div.DataTables_sort_wrapper {
-  position: relative;
-  padding-right: 20px;
-  font-size: 13.2px;
-  line-height: initial;
-}
-table thead th div.DataTables_sort_wrapper span {
-  position: absolute;
-  top: 50%;
-  margin-top: -8px;
-  right: 0;
-}
-
-table thead th {
-  border-top: none !important;
-  border-right: none !important;
-}
-
-.fg-button {
-  border-top: 1px solid #B4B3A8;
-  border-right: none !important;
-  font-weight: normal !important;
-}
-
-.paginate_button_disabled, .paginate_button, .paginate_active {
-  border-top: 1px solid #B4B3A8;
-  border-bottom: 1px solid #B4B3A8;
-  border-left: 1px solid #B4B3A8;
-  border-right: none;
-  display:inline-block;
-}
-
-.dataTables_paginate .ui-state-default {
-  text-decoration: none !important;
-}
-
-.dataTables_wrapper table {
-  border-collapse: collapse;
-}
-
-#serverGrid_wrapper .dataTables_wrapper_top {
-  border-top-left-radius: 0px !important;
-  border-top-right-radius: 0px !important;
-}
-
-#SearchNodes {
-  margin: 0px 0px 10px 0px;
-}
-
-.dataTables_paginate .last {
-  border-right: 1px solid #B4B3A8 !important;
-}
-
 #allowedNetworksForm {
   margin-top: -7px;
 }
@@ -2169,16 +1067,6 @@ table thead th {
   border: 1px solid #2173a9;
 }
 /* --------------- */
-
-div.ac_results {
-  width: 304px !important;
-}
-
-.ac_over {
-  background-color: #414141 !important;
-  color: white !important;
-}
-
 fieldset {
   border: 1px solid #B4B3A8;
 }
@@ -2368,18 +1256,6 @@ input[type="number"] {
     opacity: 0.5;
 }
 
-#recentChanges {
-  /** If we want to scroll correctly to recent changes we need to set a minimum height,
-      or else when the graph appear (just after the scroll) we will only the the recent change section title
-  */
-  min-height: 300px;
-}
-#recentChanges .alert-info{
-  font-size:14px;
-}
-#recentChanges .alert-info .glyphicon{
-  font-size:16px;
-}
 #selectedPeriod{
   font-size:14px;
 }
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/accept_new_server.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/accept_new_server.html
index 7cda3800833..2837ad41d0d 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/accept_new_server.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/accept_new_server.html
@@ -23,7 +23,7 @@ <h4 class="text-center">
                 </h4>
                 <div id="pendingNodeConfirm_paginate_area" class="nodisplay"></div>
                 <div class="table-responsive">
-                    <table id="pendingNodeConfirm" class="space-bottom table table-stripped table-hover">
+                    <table id="pendingNodeConfirm" class="space-bottom">
                       <thead>
                         <tr class="head">
                           <th>Node name</th>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/expected_policy_popup.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/expected_policy_popup.html
index 0bb5cba53b2..bf02e2f439b 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/expected_policy_popup.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/expected_policy_popup.html
@@ -25,7 +25,7 @@ <h4 class="text-center">The following Rules will be applied to this node as it j
                     </div>
                 <br/>
                 <div class="table-responsive space-bottom">
-                    <table id="pendingNodeConfirm" class="table table-bordered table-stripped table-hover">
+                    <table id="pendingNodeConfirm">
                       <thead>
                         <tr class="head">
                           <th>Node name</th>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/refuse_new_server.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/refuse_new_server.html
index 0e414789863..7a2be64ef18 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/refuse_new_server.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/Popup/refuse_new_server.html
@@ -23,7 +23,7 @@ <h4 class="text-center">
                 </h4>
                 <div id="pendingNodeConfirm_paginate_area" class="nodisplay"></div>
                 <div class="table-responsive space-bottom space-top">
-                    <table id="pendingNodeConfirm" class="table table-stripped table-hover">
+                    <table id="pendingNodeConfirm">
                       <thead>
                         <tr class="head">
                           <th>Node name</th>
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html
index 348dda1c4f0..c7e5110267a 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/templates-hidden/common-layout.html
@@ -25,6 +25,7 @@
 
     <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/AdminLTE/AdminLTE.min.css"/>
     <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/rudder/rudder-menu.css"/>
+    <link type="text/css" rel="stylesheet" data-lift="with-cached-resource" href="/style/rudder/rudder-table.css" media="screen" />
 
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/utils/WeakMap.js"></script>
     <script type="text/javascript" data-lift="with-cached-resource" src="/javascript/utils/MutationObserver.js"></script>