improve email styling

ot_templating/Resources/Private/Templates/Forms/EmailToSender.html

@@ -14,21 +14,20 @@
 
         #recap {
             border-collapse: collapse;
-            width: 100%;
+            width: 80%;
+            margin: 60px 10%;
         }
 
-        #recap td, #recap th {
+        .first-lvl {
             border: 1px solid #ddd;
             padding: 8px;
         }
 
-        #recap tr:nth-child(even){background-color: #f2f2f2;}
+        tr.first-lvl:nth-child(even){background-color: #f2f2f2;}
 
-        #recap tr:hover {background-color: #ddd;}
-
-        #recap th {
-            padding-top: 12px;
-            padding-bottom: 12px;
+        th.first-lvl {
+            padding-top: 8px;
+            padding-bottom: 8px;
             text-align: left;
             background-color: #99ccff;
             color: white;
@@ -44,9 +43,9 @@
 
     <table id="recap">
         <formvh:renderAllFormValues renderable="{form.formDefinition}" as="formValue">
-            <tr>
-                <td>{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
-                <td>
+            <tr class="first-lvl">
+                <td class="first-lvl">{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
+                <td class="first-lvl">
                     <f:if condition="{formValue.value}">
                         <f:then>
                             <f:if condition="{formValue.isMultiValue}">