diff --git a/htdocs/boxes.php b/htdocs/boxes.php
index f13392e7925..067eb65b234 100644
--- a/htdocs/boxes.php
+++ b/htdocs/boxes.php
@@ -22,7 +22,7 @@
  *	\brief      File of class to manage widget boxes
  *	\author     Rodolphe Qiedeville
  *	\author	    Laurent Destailleur
- *	\version    $Id: boxes.php,v 1.56 2011/08/08 15:28:01 eldy Exp $
+ *	\version    $Id: boxes.php,v 1.57 2011/08/15 17:45:55 eldy Exp $
  */
 
 
@@ -41,18 +41,21 @@ function printBoxesArea($user,$areacode)
 	$infobox=new InfoBox($db);
 	$boxarray=$infobox->listboxes($areacode,$user);
 
-	//$boxid_left = array();
-	//$boxid_right = array();
 	if (count($boxarray))
 	{
 		print_fiche_titre($langs->trans("OtherInformationsBoxes"),'','','','otherboxes');
 		print '<table width="100%" class="notopnoleftnoright">';
 		print '<tr><td class="notopnoleftnoright">'."\n";
 
-		print '<table width="100%" style="border-collapse: collapse; border: 0px; margin: 0px; padding: 0px;"><tr>';
 
-		// Affichage colonne gauche
-		print '<td width="50%" valign="top" class="notopnoleft" style="padding-right: 8px;">'."\n";
+        if (! empty($conf->global->MAIN_TRY_DIV)) print '<div class="fichehalfleft">';
+        else {
+    		print '<table width="100%" style="border-collapse: collapse; border: 0px; margin: 0px; padding: 0px;"><tr>';
+
+    		// Affichage colonne gauche
+    		print '<td class="notopnoleft" width="50%" valign="top" style="padding-right: 8px;">'."\n";
+        }
+
 
 		print "\n<!-- Box left container -->\n";
 		print '<div id="left" class="connectedSortable">'."\n";
@@ -65,29 +68,27 @@ function printBoxesArea($user,$areacode)
 				$ii++;
 				//print 'box_id '.$boxarray[$ii]->box_id.' ';
 				//print 'box_order '.$boxarray[$ii]->box_order.'<br>';
-				//$boxid_left[$key] = $box->box_id;
 				// Affichage boite key
 				$box->loadBox($conf->box_max_lines);
 				$box->showBox();
 			}
 		}
 
-		// If no box on left, we add an invisible empty box
-//		if ($ii==0)
-//		{
-			$emptybox=new ModeleBoxes($db);
-			$emptybox->box_id='A';
-			$emptybox->info_box_head=array();
-			$emptybox->info_box_contents=array();
-			$emptybox->showBox(array(),array());
-//		}
+		$emptybox=new ModeleBoxes($db);
+		$emptybox->box_id='A';
+		$emptybox->info_box_head=array();
+		$emptybox->info_box_contents=array();
+		$emptybox->showBox(array(),array());
 
 		print "</div>\n";
 		print "<!-- End box container -->\n";
 
-		print "</td>\n";
-		// Affichage colonne droite
-		print '<td width="50%" valign="top">';
+        if (! empty($conf->global->MAIN_TRY_DIV)) print '</div><div class="fichehalfright"><div class="ficheaddleft">';
+        else {
+    		print "</td>\n";
+    		// Affichage colonne droite
+    		print '<td class="notopnoleft" width="50%" valign="top">';
+        }
 
 		print "\n<!-- Box right container -->\n";
 		print '<div id="right" class="connectedSortable">'."\n";
@@ -100,27 +101,26 @@ function printBoxesArea($user,$areacode)
 				$ii++;
 				//print 'box_id '.$boxarray[$ii]->box_id.' ';
 				//print 'box_order '.$boxarray[$ii]->box_order.'<br>';
-				//$boxid_right[$key] = $boxarray[$key]->box_id;
 				// Affichage boite key
 				$box->loadBox($conf->box_max_lines);
 				$box->showBox();
 			}
 		}
 
-		// If no box on right, we show add an invisible empty box
-//		if ($ii==0)
-//		{
-			$emptybox=new ModeleBoxes($db);
-			$emptybox->box_id='B';
-			$emptybox->info_box_head=array();
-			$emptybox->info_box_contents=array();
-			$emptybox->showBox(array(),array());
-//		}
+		$emptybox=new ModeleBoxes($db);
+		$emptybox->box_id='B';
+		$emptybox->info_box_head=array();
+		$emptybox->info_box_contents=array();
+		$emptybox->showBox(array(),array());
 
 		print "</div>\n";
 		print "<!-- End box container -->\n";
-		print "</td>";
-		print "</tr></table>\n";
+
+		if (! empty($conf->global->MAIN_TRY_DIV)) print '</div></div>';
+        else {
+    		print "</td>";
+    		print "</tr></table>\n";
+        }
 		print "\n";
 
 		print "</td></tr>";
diff --git a/htdocs/ecm/index.php b/htdocs/ecm/index.php
index 13b1dad5fe0..a4a30b25a2c 100644
--- a/htdocs/ecm/index.php
+++ b/htdocs/ecm/index.php
@@ -20,7 +20,7 @@
  *	\file       htdocs/ecm/index.php
  *	\ingroup    ecm
  *	\brief      Main page for ECM section area
- *	\version    $Id: index.php,v 1.103 2011/07/31 23:50:55 eldy Exp $
+ *	\version    $Id: index.php,v 1.104 2011/08/15 17:43:41 eldy Exp $
  *	\author		Laurent Destailleur
  */
 
@@ -313,6 +313,9 @@ $morejs="
     jQuery(document).ready(function () {
         jQuery('#containerlayout').layout({
         	name: \"ecmlayout\"
+        ,   paneClass:    \"ecm-layout-pane\"
+        ,   esizerClass: \"ecm-layout-resizer\"
+        ,   togglerClass: \"ecm-layout-toggler\"
         ,   center__paneSelector:   \"#ecm-layout-center\"
         ,   north__paneSelector:    \"#ecm-layout-north\"
         ,   west__paneSelector:     \"#ecm-layout-west\"
@@ -888,5 +891,5 @@ else
 // End of page
 $db->close();
 
-llxFooter('$Date: 2011/07/31 23:50:55 $ - $Revision: 1.103 $');
+llxFooter('$Date: 2011/08/15 17:43:41 $ - $Revision: 1.104 $');
 ?>
diff --git a/htdocs/index.php b/htdocs/index.php
index adbe84b25e1..f32afc72c89 100644
--- a/htdocs/index.php
+++ b/htdocs/index.php
@@ -20,7 +20,7 @@
 /**
  *	\file       htdocs/index.php
  *	\brief      Dolibarr home page
- *	\version    $Id: index.php,v 1.201 2011/08/04 12:07:30 eldy Exp $
+ *	\version    $Id: index.php,v 1.202 2011/08/15 17:43:43 eldy Exp $
  */
 
 define('NOCSRFCHECK',1);	// This is login page. We must be able to go on it from another web site.
@@ -51,7 +51,7 @@ if (!isset($conf->global->MAIN_INFO_SOCIETE_NOM) || empty($conf->global->MAIN_IN
  * View
  */
 
-// If smartphone mode, we do no show main page, we show only menu
+// If smartphone mode, we do not show main page, we show only menu
 if (preg_match('/^smartphone/',$conf->smart_menu) && isset($conf->browser->phone))
 {
     $limitmenuto=GETPOST('limitmenuto')?GETPOST('limitmenuto'):0;
@@ -89,24 +89,15 @@ if (! empty($conf->global->MAIN_MOTD))
     }
 }
 
-print '<table width="100%" class="notopnoleftnoright">';
 
-print '<tr><td valign="top" class="notopnoleft">';
+if (! empty($conf->global->MAIN_TRY_DIV)) print '<div class="fichecenter"><div class="fichethirdleft">';
+else print '<table width="100%" class="notopnoleftnoright"><tr><td valign="top" class="notopnoleft">';
 
 
 /*
  * Informations area
  */
 
-if (file_exists(DOL_DOCUMENT_ROOT.'/logo.png'))
-{
-    print '<table class="noborder" width="100%">';
-    print '<tr><td colspan="3" style="text-align:center;">';
-    print '<img src="/logo.png"></td></tr>';
-    print "</table><br>\n";
-}
-
-
 print '<table class="noborder" width="100%">';
 print '<tr class="liste_titre"><td colspan="2">'.$langs->trans("Informations").'</td></tr>';
 print '<tr '.$bc[false].'>';
@@ -263,7 +254,9 @@ if ($user->societe_id == 0)
     print '</table>';
 }
 
-print '</td><td width="65%" valign="top" class="notopnoleftnoright">';
+
+if (! empty($conf->global->MAIN_TRY_DIV)) print '</div><div class="fichetwothirdright"><div class="ficheaddleft">';
+else print '</td><td width="65%" valign="top" class="notopnoleftnoright">';
 
 
 /*
@@ -523,9 +516,9 @@ foreach($dashboardlines as $key => $board)
 print '</table>';   // End table array
 
 
-print '</td></tr></table>';      // End table left area
+if (! empty($conf->global->MAIN_TRY_DIV)) print '</div></div></div><div class="fichecenter"><br>';
+else print '</td></tr></table>';      // End table left area
 
-print '<br>';
 
 
 /*
@@ -535,6 +528,7 @@ print '<br>';
 printBoxesArea($user,"0");
 
 
+if (! empty($conf->global->MAIN_TRY_DIV)) print '</div>';
 
 /*
  * Show security warnings
@@ -574,7 +568,7 @@ if ($user->admin && empty($conf->global->MAIN_REMOVE_INSTALL_WARNING))
 
 $db->close();
 
-llxFooter('$Date: 2011/08/04 12:07:30 $ - $Revision: 1.201 $');
+llxFooter('$Date: 2011/08/15 17:43:43 $ - $Revision: 1.202 $');
 
 
 /**
diff --git a/htdocs/lib/functions.lib.php b/htdocs/lib/functions.lib.php
index 2b56ceabceb..a1bfc384eae 100644
--- a/htdocs/lib/functions.lib.php
+++ b/htdocs/lib/functions.lib.php
@@ -28,7 +28,7 @@
  *	\file			htdocs/lib/functions.lib.php
  *	\brief			A set of functions for Dolibarr
  *					This file contains all frequently used functions.
- *	\version		$Id: functions.lib.php,v 1.552 2011/08/04 22:01:23 eldy Exp $
+ *	\version		$Id: functions.lib.php,v 1.553 2011/08/15 17:43:40 eldy Exp $
  */
 
 // For compatibility during upgrade
@@ -183,14 +183,16 @@ function dol_clone($object)
 /**
  *	Optimize a size for some browsers (phone, smarphone, ...)
  * 	@param			size		Size we want
- * 	@param			type		Type of optimizing(''=Optimize for a truncate, 'width'=Optimize for screen width)
+ * 	@param			type		Type of optimizing:
+ * 								'' = function used to define a size for truncation
+ * 								'width' = function is used to define a width
  *	@return         int			New size after optimizing
  */
 function dol_size($size,$type='')
 {
     global $conf;
     if (empty($conf->browser->phone)) return $size;
-    if ($type == 'width') return 250;
+    if ($type == 'width' && $size > 250) return 250;
     else return 10;
 }
 
@@ -2677,7 +2679,7 @@ function load_fiche_titre($titre, $mesg='', $picto='title.png', $pictoisfullpath
 
     $return.= "\n";
     $return.= '<table '.($id?'id="'.$id.'" ':'').'summary="" width="100%" border="0" class="notopnoleftnoright" style="margin-bottom: 2px;"><tr>';
-    if (empty($conf->browser->phone) && $picto) $return.= '<td class="nobordernopadding" width="40" align="left" valign="middle">'.img_picto('',$picto, 'id="pictotitle"', $pictoisfullpath).'</td>';
+    $return.= '<td class="nobordernopadding hideonsmartphone" width="40" align="left" valign="middle">'.img_picto('',$picto, 'id="pictotitle"', $pictoisfullpath).'</td>';
     $return.= '<td class="nobordernopadding" valign="middle">';
     $return.= '<div class="titre">'.$titre.'</div>';
     $return.= '</td>';
diff --git a/htdocs/main.inc.php b/htdocs/main.inc.php
index 81463c09b11..f7cfc6e0cd9 100644
--- a/htdocs/main.inc.php
+++ b/htdocs/main.inc.php
@@ -25,7 +25,7 @@
  *	\file       htdocs/main.inc.php
  *	\ingroup	core
  *	\brief      File that defines environment for Dolibarr pages only (variables not required by scripts)
- *	\version    $Id: main.inc.php,v 1.759 2011/08/10 22:47:36 eldy Exp $
+ *	\version    $Id: main.inc.php,v 1.760 2011/08/15 17:43:43 eldy Exp $
  */
 
 @ini_set('memory_limit', '64M');	// This may be useless if memory is hard limited by your PHP
@@ -193,6 +193,9 @@ if (isset($_SERVER["HTTP_USER_AGENT"]))
 	// Other
 	if (in_array($conf->browser->name,array('firefox','iceweasel'))) $conf->browser->firefox=1;
 	//$conf->browser->phone='android';
+
+    // Force usage of left menu when smartphone is used
+	if ($conf->browser->phone) $conf->global->MAIN_MENU_USE_JQUERY_LAYOUT='forced';
 }
 
 
@@ -1100,19 +1103,20 @@ function top_menu($head, $title='', $target='', $disablejs=0, $disablehead=0, $a
 						//contentIgnoreSelector: "span",
 						togglerTip_open: "Close This Pane",
 						togglerTip_closed: "Open This Pane",
-						resizerTip:	"Resize This Pane"
+						resizerTip:	"Resize This Pane",
+						fxSpeed: "fast"
 					},
 					west: {
 						paneClass: "leftContent",
-						spacing_closed:	14,
-						togglerLength_closed: 14,
-						togglerAlign_closed: "top",
+						//spacing_closed:	14,
+						//togglerLength_closed: 14,
+						//togglerAlign_closed: "auto",
 						//togglerLength_open: 0,
 						//	effect defaults - overridden on some panes
 						//slideTrigger_open:	"mouseover",
 						//initClosed:	true,
 						fxName:	"drop",
-						fxSpeed: "normal",
+						fxSpeed: "fast",
 						fxSettings: { easing: "" }
 					},
 					north: {
@@ -1123,7 +1127,8 @@ function top_menu($head, $title='', $target='', $disablejs=0, $disablehead=0, $a
 						togglerLength_open:	0,
 						togglerLength_closed: -1,
 						slidable: false,
-						fxName:	"none"
+						fxName:	"none",
+						fxSpeed: "fast"
 					},
 					center: {
 						paneSelector: "#mainContent"
@@ -1151,7 +1156,7 @@ function top_menu($head, $title='', $target='', $disablejs=0, $disablehead=0, $a
     	print "\n".'<script type="text/javascript">
                     jQuery(document).ready(function () {
                     	jQuery(function() {
-                        	$(".classfortooltip").tipTip({maxWidth: "600px", edgeOffset: 10, delay: 50, fadeIn: 50, fadeOut: 50});
+                        	jQuery(".classfortooltip").tipTip({maxWidth: "'.dol_size(600,'width').'px", edgeOffset: 10, delay: 50, fadeIn: 50, fadeOut: 50});
                         });
                     });
                 </script>';
diff --git a/htdocs/theme/auguria/style.css.php b/htdocs/theme/auguria/style.css.php
index 04342fd5927..479a6777d56 100644
--- a/htdocs/theme/auguria/style.css.php
+++ b/htdocs/theme/auguria/style.css.php
@@ -20,7 +20,7 @@
 /**
  *		\file       htdocs/theme/auguria/style.css.php
  *		\brief      Fichier de style CSS du theme auguria
- *		\version    $Id: style.css.php,v 1.97 2011/08/14 23:55:16 eldy Exp $
+ *		\version    $Id: style.css.php,v 1.98 2011/08/15 17:43:42 eldy Exp $
  */
 
 //if (! defined('NOREQUIREUSER')) define('NOREQUIREUSER','1');	// Not disabled cause need to load personalized language
@@ -169,12 +169,19 @@ div.float
     float:<?php print $left; ?>;
 }
 
-/* For hide object and add pointer cursor */
+/* ============================================================================== */
+/* Styles to hide objects                                                         */
+/* ============================================================================== */
 
 .hideobject { display: none; }
+<?php if (! empty($conf->browser->phone)) { ?>
+.hideonsmartphone { display: none; }
+<?php } ?>
 .linkobject { cursor: pointer; }
 
-/* For dragging lines */
+/* ============================================================================== */
+/* Styles for dragging lines                                                      */
+/* ============================================================================== */
 
 .dragClass {
     color: #002255;
@@ -191,17 +198,35 @@ td.showDragHandle {
 /* Styles de positionnement des zones                                             */
 /* ============================================================================== */
 
-td.vmenu {
-    margin-<?php print $right; ?>: 2px;
-    padding: 0px;
-    padding-bottom: 0px;
-    width: 164px;
+div.fiche {
+	margin-<?php print $left; ?>: <?php print empty($conf->browser->phone)?'10':'2'; ?>px;
+	margin-<?php print $right; ?>: <?php print empty($conf->browser->phone)?'6':''; ?>px;
 }
 
-div.fiche {
-	margin-<?php print $left; ?>: 10px;
-	margin-<?php print $right; ?>: 6px;
+div.fichecenter {
+	width: 100%;
+	clear: both;	/* This is to have div fichecenter that are true rectangles */
 }
+div.fichethirdleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 35%;\n"; } ?>
+}
+div.fichetwothirdright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 65%;\n"; } ?>
+}
+div.fichehalfleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.fichehalfright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.ficheaddleft {
+	<?php if (empty($conf->browser->phone)) { print "padding-left: 6px;\n"; } ?>
+}
+
 
 /* ============================================================================== */
 /* Menu top et 1ere ligne tableau                                                 */
@@ -491,8 +516,14 @@ img.login, img.printer, img.entity {
 /* Menu gauche                                                                    */
 /* ============================================================================== */
 
-<?php if ((GETPOST("optioncss") == 'print')
-|| (! empty($conf->browser->phone) && empty($conf->global->MAIN_SEARCHFORM_WITH_SMARTHPONE) && empty($conf->global->BOOKMARKS_SHOW_WITH_SMARTHPONE))) { ?>
+td.vmenu {
+    margin-<?php print $right; ?>: 2px;
+    padding: 0px;
+    padding-bottom: 0px;
+    width: 164px;
+}
+
+<?php if (GETPOST("optioncss") == 'print') { ?>
 .vmenu {
 	display: none;
 }
@@ -653,10 +684,6 @@ td.photo {
  *  PANES and CONTENT-DIVs
  */
 
-#mainContent {
-	background: #ffffff url(<?php echo DOL_URL_ROOT.'/theme/auguria/img/headbg2.jpg' ?>) 0 0 no-repeat;
-}
-
 #mainContent, #leftContent .ui-layout-pane {
     padding:    0px;
     overflow:	auto;
@@ -702,7 +729,6 @@ td.photo {
     padding: 2px !important;
 }
 
-
 /*
  *  PANES and CONTENT-DIVs
  */
@@ -726,88 +752,132 @@ td.photo {
  *  RESIZER-BARS
  */
 .ui-layout-resizer  { /* all 'resizer-bars' */
-    background:     #EEE;
-    border:         1px solid #BBB;
-    border-width:   0;
+	width: 8px !important;
+}
+.ui-layout-resizer-hover    {   /* affects both open and closed states */
+}
+/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+    otherwise color shifts while dragging when bar can't keep up with mouse */
+/*.ui-layout-resizer-open-hover ,*/ /* hover-color to 'resize' */
+.ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
+    background: #DDD;
+    width: 8px;
+}
+.ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
+    border-left:  1px solid #BBB;
+    border-right: 1px solid #BBB;
+}
+/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
+    background: #E1A4A4; /* red */
+}
+.ui-layout-resizer-closed:hover {
+    background-color: #EEDDDD;
+}
+.ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
+    opacity: .10; /* show only a slight shadow */
+    filter:  alpha(opacity=10);
     }
-    .ui-layout-resizer-drag {       /* REAL resizer while resize in progress */
+    .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
+        opacity: 1.00; /* on-hover, show the resizer-bar normally */
+        filter:  alpha(opacity=100);
     }
-    .ui-layout-resizer-hover    {   /* affects both open and closed states */
-    }
-    /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
-        otherwise color shifts while dragging when bar can't keep up with mouse */
-    /* .ui-layout-resizer-open-hover , */ /* hover-color to 'resize' */
-    .ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
-        background: #AAA;
-    }
-    .ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
-        border-left:  1px solid #BBB;
-        border-right: 1px solid #BBB;
-    }
-    /* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
-    .ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
-        background: #E1A4A4; /* red */
-    }
-
-    .ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
-        background: #EBD5AA;
-    }
-    .ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
-        opacity: .10; /* show only a slight shadow */
-        filter:  alpha(opacity=10);
-        }
-        .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
-            opacity: 1.00; /* on-hover, show the resizer-bar normally */
-            filter:  alpha(opacity=100);
-        }
-        /* sliding resizer - add 'outside-border' to resizer on-hover
-         * this sample illustrates how to target specific panes and states */
-        .ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
-        .ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
-        .ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
-        .ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
+/* sliding resizer - add 'outside-border' to resizer on-hover
+ * this sample illustrates how to target specific panes and states */
+.ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
+.ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
+.ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
+.ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
 
 /*
  *  TOGGLER-BUTTONS
  */
 .ui-layout-toggler {
-    border: 1px solid #BBB; /* match pane-border */
-    background-color: #BBB;
+    border-top: 1px solid #AAA; /* match pane-border */
+    border-right: 1px solid #AAA; /* match pane-border */
+    border-bottom: 1px solid #AAA; /* match pane-border */
+    background-color: #DDD;
+    top: 5px !important;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler {
-        opacity: .60;
-        filter:  alpha(opacity=60);
+.ui-layout-toggler-open {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler-closed {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+
+/* hide the toggler-button when the pane is 'slid open' */
+.ui-layout-resizer-sliding  ui-layout-toggler {
+    display: none;
+}
+
+.ui-layout-north {
+	height: <?php print (empty($conf->browser->phone)?'42':'42'); ?>px !important;
+}
+
+/* ECM */
+
+#containerlayout .ecm-layout-pane { /* all 'panes' */
+    background: #FFF;
+    border:     1px solid #BBB;
+    /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+       otherwise you may get double-scrollbars - on the pane AND on the content-div
+    */
+    padding:    0px;
+    overflow:   auto;
+}
+/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+#containerlayout .ecm-layout-content {
+	padding:    10px;
+	position:   relative; /* contain floated or positioned elements */
+	overflow:   auto; /* add scrolling to content-div */
+}
+
+.ecm-layout-toggler {
+    background-color: #DDD;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity */
-        background-color: #FC6;
-        opacity: 1.00;
-        filter:  alpha(opacity=100);
-    }
-    .ui-layout-toggler-north ,
-    .ui-layout-toggler-south {
-        border-width: 0 1px; /* left/right borders */
-    }
-    .ui-layout-toggler-west ,
-    .ui-layout-toggler-east {
-        border-width: 1px 0; /* top/bottom borders */
-    }
-    /* hide the toggler-button when the pane is 'slid open' */
-    .ui-layout-resizer-sliding  ui-layout-toggler {
-        display: none;
-    }
-    /*
-     *  style the text we put INSIDE the togglers
-     */
-    .ui-layout-toggler .content {
-        color:          #666;
-        font-size:      12px;
-        font-weight:    bold;
-        width:          100%;
-        padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+.ecm-layout-toggler-open {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler-closed {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+#ecm-layout-west-resizer {
+	width: 6px !important;
+}
+
+.ecm-layout-resizer  { /* all 'resizer-bars' */
+    background:     #EEE;
+    border:         1px solid #BBB;
+    border-width:   0;
     }
 
 .ecm-in-layout-center {
-    border-left: 0px !important;
+    border-left: 1px !important;
     border-right: 0px !important;
     border-top: 0px !important;
 }
@@ -820,6 +890,7 @@ td.photo {
 }
 
 
+
 /* ============================================================================== */
 /* Onglets                                                                        */
 /* ============================================================================== */
@@ -962,8 +1033,6 @@ span.tabspan {
 /* Boutons actions                                                                */
 /* ============================================================================== */
 
-/* Nouvelle syntaxe a utiliser */
-
 .butAction, .butAction:link, .butAction:visited, .butAction:hover, .butAction:active, .butActionDelete, .butActionDelete:link, .butActionDelete:visited, .butActionDelete:hover, .butActionDelete:active {
 	font-family: <?php print $fontlist ?>;
 	font-weight: bold;
@@ -1352,10 +1421,6 @@ a.impayee:hover { font-weight: bold; color: #550000; }
 
 .fieldrequired { font-weight: bold; color: #000055; }
 
-#pictotitle {
-	<?php print !empty($conf->browser->phone)?'display: none;':''; ?>
-}
-
 .photo {
 border: 0px;
 /* filter:alpha(opacity=55); */
diff --git a/htdocs/theme/bureau2crea/style.css.php b/htdocs/theme/bureau2crea/style.css.php
index 4cb4d438607..8becec21162 100644
--- a/htdocs/theme/bureau2crea/style.css.php
+++ b/htdocs/theme/bureau2crea/style.css.php
@@ -22,7 +22,7 @@
 /**
  *		\file       htdocs/theme/bureau2crea/style.css.php
  *		\brief      Fichier de style CSS du theme bureau2crea
- *		\version    $Id: style.css.php,v 1.43 2011/08/14 23:55:35 eldy Exp $
+ *		\version    $Id: style.css.php,v 1.44 2011/08/15 17:43:41 eldy Exp $
  */
 
 //if (! defined('NOREQUIREUSER')) define('NOREQUIREUSER','1');	// Not disabled cause need to load personalized language
@@ -204,12 +204,19 @@ form {
     margin: 0em 0em 0em 0em;
 }
 
-/* For hide object and add pointer cursor */
+/* ============================================================================== */
+/* Styles to hide objects                                                         */
+/* ============================================================================== */
 
 .hideobject { display: none; }
+<?php if (! empty($conf->browser->phone)) { ?>
+.hideonsmartphone { display: none; }
+<?php } ?>
 .linkobject { cursor: pointer; }
 
-/* For dragging lines */
+/* ============================================================================== */
+/* Styles for dragging lines                                                      */
+/* ============================================================================== */
 
 .dragClass {
     color: #002255;
@@ -239,12 +246,37 @@ div.vmenu {
 }
 
 div.fiche {
-	margin: 0px 10px 10px 10px;
+	margin-<?php print $left; ?>: <?php print empty($conf->browser->phone)?'10':'2'; ?>px;
+	margin-<?php print $right; ?>: <?php print empty($conf->browser->phone)?'6':''; ?>px;
     padding: 0px;
     position: relative;
     height: auto;
 }
 
+div.fichecenter {
+	width: 100%;
+	clear: both;	/* This is to have div fichecenter that are true rectangles */
+}
+div.fichethirdleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 35%;\n"; } ?>
+}
+div.fichetwothirdright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 65%;\n"; } ?>
+}
+div.fichehalfleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.fichehalfright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.ficheaddleft {
+	<?php if (empty($conf->browser->phone)) { print "padding-left: 6px;\n"; } ?>
+}
+
 
 /* ============================================================================== */
 /* Barre de redimensionnement menu                                                */
@@ -564,8 +596,7 @@ margin: 0;
 position: relative;
 width: 210px;
 }
-<?php if ((GETPOST("optioncss") == 'print')
-|| (! empty($conf->browser->phone) && class_exists('Smartphone') && empty($conf->global->MAIN_SEARCHFORM_WITH_SMARTHPONE) && empty($conf->global->BOOKMARKS_SHOW_WITH_SMARTHPONE))) { ?>
+<?php if (GETPOST("optioncss") == 'print') { ?>
 .vmenu {
 	display: none;
 }
@@ -764,10 +795,6 @@ td.photo {
  *  PANES and CONTENT-DIVs
  */
 
-#mainContent {
-
-}
-
 #mainContent, #leftContent .ui-layout-pane {
     padding:    0px;
     overflow:	auto;
@@ -836,88 +863,132 @@ td.photo {
  *  RESIZER-BARS
  */
 .ui-layout-resizer  { /* all 'resizer-bars' */
-    background:     #EEE;
-    border:         1px solid #BBB;
-    border-width:   0;
+	width: 8px !important;
+}
+.ui-layout-resizer-hover    {   /* affects both open and closed states */
+}
+/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+    otherwise color shifts while dragging when bar can't keep up with mouse */
+/*.ui-layout-resizer-open-hover ,*/ /* hover-color to 'resize' */
+.ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
+    background: #DDD;
+    width: 8px;
+}
+.ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
+    border-left:  1px solid #BBB;
+    border-right: 1px solid #BBB;
+}
+/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
+    background: #E1A4A4; /* red */
+}
+.ui-layout-resizer-closed:hover {
+    background-color: #EEDDDD;
+}
+.ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
+    opacity: .10; /* show only a slight shadow */
+    filter:  alpha(opacity=10);
     }
-    .ui-layout-resizer-drag {       /* REAL resizer while resize in progress */
+    .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
+        opacity: 1.00; /* on-hover, show the resizer-bar normally */
+        filter:  alpha(opacity=100);
     }
-    .ui-layout-resizer-hover    {   /* affects both open and closed states */
-    }
-    /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
-        otherwise color shifts while dragging when bar can't keep up with mouse */
-    /* .ui-layout-resizer-open-hover , */ /* hover-color to 'resize' */
-    .ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
-        background: #AAA;
-    }
-    .ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
-        border-left:  1px solid #BBB;
-        border-right: 1px solid #BBB;
-    }
-    /* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
-    .ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
-        background: #E1A4A4; /* red */
-    }
-
-    .ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
-        background: #EBD5AA;
-    }
-    .ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
-        opacity: .10; /* show only a slight shadow */
-        filter:  alpha(opacity=10);
-        }
-        .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
-            opacity: 1.00; /* on-hover, show the resizer-bar normally */
-            filter:  alpha(opacity=100);
-        }
-        /* sliding resizer - add 'outside-border' to resizer on-hover
-         * this sample illustrates how to target specific panes and states */
-        .ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
-        .ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
-        .ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
-        .ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
+/* sliding resizer - add 'outside-border' to resizer on-hover
+ * this sample illustrates how to target specific panes and states */
+.ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
+.ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
+.ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
+.ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
 
 /*
  *  TOGGLER-BUTTONS
  */
 .ui-layout-toggler {
-    border: 1px solid #BBB; /* match pane-border */
-    background-color: #BBB;
+    border-top: 1px solid #AAA; /* match pane-border */
+    border-right: 1px solid #AAA; /* match pane-border */
+    border-bottom: 1px solid #AAA; /* match pane-border */
+    background-color: #DDD;
+    top: 5px !important;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler {
-        opacity: .60;
-        filter:  alpha(opacity=60);
+.ui-layout-toggler-open {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler-closed {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+
+/* hide the toggler-button when the pane is 'slid open' */
+.ui-layout-resizer-sliding  ui-layout-toggler {
+    display: none;
+}
+
+.ui-layout-north {
+	height: <?php print (empty($conf->browser->phone)?'40':'40'); ?>px !important;
+}
+
+/* ECM */
+
+#containerlayout .ecm-layout-pane { /* all 'panes' */
+    background: #FFF;
+    border:     1px solid #BBB;
+    /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+       otherwise you may get double-scrollbars - on the pane AND on the content-div
+    */
+    padding:    0px;
+    overflow:   auto;
+}
+/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+#containerlayout .ecm-layout-content {
+	padding:    10px;
+	position:   relative; /* contain floated or positioned elements */
+	overflow:   auto; /* add scrolling to content-div */
+}
+
+.ecm-layout-toggler {
+    background-color: #DDD;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity */
-        background-color: #FC6;
-        opacity: 1.00;
-        filter:  alpha(opacity=100);
-    }
-    .ui-layout-toggler-north ,
-    .ui-layout-toggler-south {
-        border-width: 0 1px; /* left/right borders */
-    }
-    .ui-layout-toggler-west ,
-    .ui-layout-toggler-east {
-        border-width: 1px 0; /* top/bottom borders */
-    }
-    /* hide the toggler-button when the pane is 'slid open' */
-    .ui-layout-resizer-sliding  ui-layout-toggler {
-        display: none;
-    }
-    /*
-     *  style the text we put INSIDE the togglers
-     */
-    .ui-layout-toggler .content {
-        color:          #666;
-        font-size:      12px;
-        font-weight:    bold;
-        width:          100%;
-        padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+.ecm-layout-toggler-open {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler-closed {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+#ecm-layout-west-resizer {
+	width: 6px !important;
+}
+
+.ecm-layout-resizer  { /* all 'resizer-bars' */
+    background:     #EEE;
+    border:         1px solid #BBB;
+    border-width:   0;
     }
 
 .ecm-in-layout-center {
-    border-left: 0px !important;
+    border-left: 1px !important;
     border-right: 0px !important;
     border-top: 0px !important;
 }
@@ -930,6 +1001,7 @@ td.photo {
 }
 
 
+
 /* ============================================================================== */
 /* Onglets                                                                        */
 /* ============================================================================== */
@@ -1512,10 +1584,6 @@ a.impayee:hover { font-weight: bold; color: #550000; }
 
 .fieldrequired { font-weight: bold; color: #000055; }
 
-#pictotitle {
-	<?php print !empty($conf->browser->phone)?'display: none;':''; ?>
-}
-
 .photo {
 border: 0px;
 /* filter:alpha(opacity=55); */
diff --git a/htdocs/theme/cameleo/style.css.php b/htdocs/theme/cameleo/style.css.php
index 7d827d68581..0e2b3344601 100644
--- a/htdocs/theme/cameleo/style.css.php
+++ b/htdocs/theme/cameleo/style.css.php
@@ -22,7 +22,7 @@
 /**
  *		\file       htdocs/theme/eldy/style.css.php
  *		\brief      Fichier de style CSS du theme Cameleo
- *		\version    $Id: style.css.php,v 1.10 2011/08/14 23:55:24 eldy Exp $
+ *		\version    $Id: style.css.php,v 1.11 2011/08/15 17:43:42 eldy Exp $
  */
 
 //if (! defined('NOREQUIREUSER')) define('NOREQUIREUSER','1');	// Not disabled cause need to load personalized language
@@ -195,12 +195,19 @@ div.float
     float:<?php print $left; ?>;
 }
 
-/* For hide object and add pointer cursor */
+/* ============================================================================== */
+/* Styles to hide objects                                                         */
+/* ============================================================================== */
 
 .hideobject { display: none; }
+<?php if (! empty($conf->browser->phone)) { ?>
+.hideonsmartphone { display: none; }
+<?php } ?>
 .linkobject { cursor: pointer; }
 
-/* For dragging lines */
+/* ============================================================================== */
+/* Styles for dragging lines                                                      */
+/* ============================================================================== */
 
 .dragClass {
 	color: #002255;
@@ -222,20 +229,36 @@ div.leftContent {
         background-color: #FFF;
 }
 
-
-td.vmenu {
-    margin-<?php print $right; ?>: 2px;
-    padding: 0px;
-    padding-bottom: 0px;
-    padding-top: 1px;
-    width: 200px;
-}
-
 div.fiche {
-        margin-<?php print $left; ?>: 5px;
-	margin-<?php print $right; ?>: 5px;*/
+	margin-<?php print $left; ?>: <?php print empty($conf->browser->phone)?'5':'2'; ?>px;
+	margin-<?php print $right; ?>: <?php print empty($conf->browser->phone)?'5':''; ?>px;
 }
 
+div.fichecenter {
+	width: 100%;
+	clear: both;	/* This is to have div fichecenter that are true rectangles */
+}
+div.fichethirdleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 35%;\n"; } ?>
+}
+div.fichetwothirdright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 65%;\n"; } ?>
+}
+div.fichehalfleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.fichehalfright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.ficheaddleft {
+	<?php if (empty($conf->browser->phone)) { print "padding-left: 6px;\n"; } ?>
+}
+
+
 /* ============================================================================== */
 /* Menu top et 1ere ligne tableau                                                 */
 /* ============================================================================== */
@@ -564,8 +587,15 @@ img.login, img.printer, img.entity {
 /* Menu gauche                                                                    */
 /* ============================================================================== */
 
-<?php if ((GETPOST("optioncss") == 'print')
-|| (! empty($conf->browser->phone) && empty($conf->global->MAIN_SEARCHFORM_WITH_SMARTHPONE) && empty($conf->global->BOOKMARKS_SHOW_WITH_SMARTHPONE))) { ?>
+td.vmenu {
+    margin-<?php print $right; ?>: 2px;
+    padding: 0px;
+    padding-bottom: 0px;
+    padding-top: 1px;
+    width: 200px;
+}
+
+<?php if (GETPOST("optioncss") == 'print') { ?>
 .vmenu {
     display: none;
 }
@@ -774,10 +804,6 @@ td.photo {
  *  PANES and CONTENT-DIVs
  */
 
-#mainContent {
-	/*background: #ffffff url(<?php echo DOL_URL_ROOT.'/theme/cameleo/img/headbg2.jpg' ?>) 0 0 no-repeat;*/
-}
-
 #mainContent, #leftContent .ui-layout-pane {
     padding:    0px;
     overflow:	auto;
@@ -857,88 +883,132 @@ td.photo {
  *  RESIZER-BARS
  */
 .ui-layout-resizer  { /* all 'resizer-bars' */
-    background:     #FFF;
-    border:         1px solid #BBB;
-    border-width:   0;
+	width: 8px !important;
+}
+.ui-layout-resizer-hover    {   /* affects both open and closed states */
+}
+/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+    otherwise color shifts while dragging when bar can't keep up with mouse */
+/*.ui-layout-resizer-open-hover ,*/ /* hover-color to 'resize' */
+.ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
+    background: #DDD;
+    width: 8px;
+}
+.ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
+    border-left:  1px solid #BBB;
+    border-right: 1px solid #BBB;
+}
+/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
+    background: #E1A4A4; /* red */
+}
+.ui-layout-resizer-closed:hover {
+    background-color: #EEDDDD;
+}
+.ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
+    opacity: .10; /* show only a slight shadow */
+    filter:  alpha(opacity=10);
     }
-    .ui-layout-resizer-drag {       /* REAL resizer while resize in progress */
+    .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
+        opacity: 1.00; /* on-hover, show the resizer-bar normally */
+        filter:  alpha(opacity=100);
     }
-    .ui-layout-resizer-hover    {   /* affects both open and closed states */
-    }
-    /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
-        otherwise color shifts while dragging when bar can't keep up with mouse */
-    /*.ui-layout-resizer-open-hover ,*/ /* hover-color to 'resize' */
-    .ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
-        background: #AAA;
-    }
-    .ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
-        border-left:  1px solid #BBB;
-        border-right: 1px solid #BBB;
-    }
-    /* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
-    .ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
-        background: #E1A4A4; /* red */
-    }
-
-    .ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
-        background: #EBD5AA;
-    }
-    .ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
-        opacity: .10; /* show only a slight shadow */
-        filter:  alpha(opacity=10);
-        }
-        .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
-            opacity: 1.00; /* on-hover, show the resizer-bar normally */
-            filter:  alpha(opacity=100);
-        }
-        /* sliding resizer - add 'outside-border' to resizer on-hover
-         * this sample illustrates how to target specific panes and states */
-        .ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
-        .ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
-        .ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
-        .ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
+/* sliding resizer - add 'outside-border' to resizer on-hover
+ * this sample illustrates how to target specific panes and states */
+.ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
+.ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
+.ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
+.ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
 
 /*
  *  TOGGLER-BUTTONS
  */
 .ui-layout-toggler {
-    border: 0px solid #842F00; /* match pane-border */
-    background-color: #A81E00;
+    border-top: 1px solid #AAA; /* match pane-border */
+    border-right: 1px solid #AAA; /* match pane-border */
+    border-bottom: 1px solid #AAA; /* match pane-border */
+    background-color: #DDD;
+    top: 5px !important;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler {
-        opacity: .60;
-        filter:  alpha(opacity=60);
+.ui-layout-toggler-open {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler-closed {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+
+/* hide the toggler-button when the pane is 'slid open' */
+.ui-layout-resizer-sliding  ui-layout-toggler {
+    display: none;
+}
+
+.ui-layout-north {
+	height: <?php print (empty($conf->browser->phone)?'54':'21'); ?>px !important;
+}
+
+/* ECM */
+
+#containerlayout .ecm-layout-pane { /* all 'panes' */
+    background: #FFF;
+    border:     1px solid #BBB;
+    /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+       otherwise you may get double-scrollbars - on the pane AND on the content-div
+    */
+    padding:    0px;
+    overflow:   auto;
+}
+/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+#containerlayout .ecm-layout-content {
+	padding:    10px;
+	position:   relative; /* contain floated or positioned elements */
+	overflow:   auto; /* add scrolling to content-div */
+}
+
+.ecm-layout-toggler {
+    background-color: #DDD;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity */
-        background-color: #FC6;
-        opacity: 1.00;
-        filter:  alpha(opacity=100);
-    }
-    .ui-layout-toggler-north ,
-    .ui-layout-toggler-south {
-        border-width: 0 1px; /* left/right borders */
-    }
-    .ui-layout-toggler-west ,
-    .ui-layout-toggler-east {
-        border-width: 1px 0; /* top/bottom borders */
-    }
-    /* hide the toggler-button when the pane is 'slid open' */
-    .ui-layout-resizer-sliding  ui-layout-toggler {
-        display: none;
-    }
-    /*
-     *  style the text we put INSIDE the togglers
-     */
-    .ui-layout-toggler .content {
-        color:          #666;
-        font-size:      12px;
-        font-weight:    bold;
-        width:          100%;
-        padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+.ecm-layout-toggler-open {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler-closed {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+#ecm-layout-west-resizer {
+	width: 6px !important;
+}
+
+.ecm-layout-resizer  { /* all 'resizer-bars' */
+    background:     #EEE;
+    border:         1px solid #BBB;
+    border-width:   0;
     }
 
 .ecm-in-layout-center {
-    border-left: 0px !important;
+    border-left: 1px !important;
     border-right: 0px !important;
     border-top: 0px !important;
 }
@@ -951,6 +1021,7 @@ td.photo {
 }
 
 
+
 /* ============================================================================== */
 /* Onglets                                                                        */
 /* ============================================================================== */
@@ -1472,10 +1543,6 @@ a.impayee:hover { font-weight: bold; color: #550000; }
 
 .fieldrequired { font-weight: bold; color: #000055; }
 
-#pictotitle {
-	<?php print !empty($conf->browser->phone)?'display: none;':''; ?>
-}
-
 .photo {
 border: 0px;
 /* filter:alpha(opacity=55); */
diff --git a/htdocs/theme/eldy/style.css.php b/htdocs/theme/eldy/style.css.php
index e13d37c92f3..20d8628db7a 100644
--- a/htdocs/theme/eldy/style.css.php
+++ b/htdocs/theme/eldy/style.css.php
@@ -21,7 +21,7 @@
 /**
  *		\file       htdocs/theme/eldy/style.css.php
  *		\brief      Fichier de style CSS du theme Eldy
- *		\version    $Id: style.css.php,v 1.102 2011/08/14 23:55:19 eldy Exp $
+ *		\version    $Id: style.css.php,v 1.103 2011/08/15 17:43:42 eldy Exp $
  */
 
 //if (! defined('NOREQUIREUSER')) define('NOREQUIREUSER','1');	// Not disabled cause need to load personalized language
@@ -183,12 +183,19 @@ div.float
     float:<?php print $left; ?>;
 }
 
-/* For hide object and add pointer cursor */
+/* ============================================================================== */
+/* Styles to hide objects                                                         */
+/* ============================================================================== */
 
 .hideobject { display: none; }
+<?php if (! empty($conf->browser->phone)) { ?>
+.hideonsmartphone { display: none; }
+<?php } ?>
 .linkobject { cursor: pointer; }
 
-/* For dragging lines */
+/* ============================================================================== */
+/* Styles for dragging lines                                                      */
+/* ============================================================================== */
 
 .dragClass {
 	color: #002255;
@@ -205,18 +212,35 @@ td.showDragHandle {
 /* Styles de positionnement des zones                                             */
 /* ============================================================================== */
 
-td.vmenu {
-    margin-<?php print $right; ?>: 2px;
-    padding: 0px;
-    padding-bottom: 0px;
-    padding-top: 1px;
-    width: 168px;
+div.fiche {
+	margin-<?php print $left; ?>: <?php print empty($conf->browser->phone)?'10':'2'; ?>px;
+	margin-<?php print $right; ?>: <?php print empty($conf->browser->phone)?'6':''; ?>px;
 }
 
-div.fiche {
-	margin-<?php print $left; ?>: 10px;
-	margin-<?php print $right; ?>: 6px;
+div.fichecenter {
+	width: 100%;
+	clear: both;	/* This is to have div fichecenter that are true rectangles */
 }
+div.fichethirdleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 35%;\n"; } ?>
+}
+div.fichetwothirdright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 65%;\n"; } ?>
+}
+div.fichehalfleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.fichehalfright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.ficheaddleft {
+	<?php if (empty($conf->browser->phone)) { print "padding-left: 6px;\n"; } ?>
+}
+
 
 /* ============================================================================== */
 /* Menu top et 1ere ligne tableau                                                 */
@@ -522,8 +546,15 @@ img.login, img.printer, img.entity {
 /* Menu gauche                                                                    */
 /* ============================================================================== */
 
-<?php if ((GETPOST("optioncss") == 'print')
-|| (! empty($conf->browser->phone) && empty($conf->global->MAIN_SEARCHFORM_WITH_SMARTHPONE) && empty($conf->global->BOOKMARKS_SHOW_WITH_SMARTHPONE))) { ?>
+td.vmenu {
+    margin-<?php print $right; ?>: 2px;
+    padding: 0px;
+    padding-bottom: 0px;
+    padding-top: 1px;
+    width: 168px;
+}
+
+<?php if (GETPOST("optioncss") == 'print') { ?>
 .vmenu {
     display: none;
 }
@@ -649,10 +680,6 @@ td.photo {
  *  PANES and CONTENT-DIVs
  */
 
-#mainContent {
-	background: #ffffff url(<?php echo DOL_URL_ROOT.'/theme/eldy/img/headbg2.jpg' ?>) 0 0 no-repeat;
-}
-
 #mainContent, #leftContent .ui-layout-pane {
     padding:    0px;
     overflow:	auto;
@@ -721,88 +748,132 @@ td.photo {
  *  RESIZER-BARS
  */
 .ui-layout-resizer  { /* all 'resizer-bars' */
-    background:     #EEE;
-    border:         1px solid #BBB;
-    border-width:   0;
+	width: 8px !important;
+}
+.ui-layout-resizer-hover    {   /* affects both open and closed states */
+}
+/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+    otherwise color shifts while dragging when bar can't keep up with mouse */
+/*.ui-layout-resizer-open-hover ,*/ /* hover-color to 'resize' */
+.ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
+    background: #DDD;
+    width: 8px;
+}
+.ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
+    border-left:  1px solid #BBB;
+    border-right: 1px solid #BBB;
+}
+/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
+    background: #E1A4A4; /* red */
+}
+.ui-layout-resizer-closed:hover {
+    background-color: #EEDDDD;
+}
+.ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
+    opacity: .10; /* show only a slight shadow */
+    filter:  alpha(opacity=10);
     }
-    .ui-layout-resizer-drag {       /* REAL resizer while resize in progress */
+    .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
+        opacity: 1.00; /* on-hover, show the resizer-bar normally */
+        filter:  alpha(opacity=100);
     }
-    .ui-layout-resizer-hover    {   /* affects both open and closed states */
-    }
-    /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
-        otherwise color shifts while dragging when bar can't keep up with mouse */
-    /*.ui-layout-resizer-open-hover ,*/ /* hover-color to 'resize' */
-    .ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
-        background: #AAA;
-    }
-    .ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
-        border-left:  1px solid #BBB;
-        border-right: 1px solid #BBB;
-    }
-    /* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
-    .ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
-        background: #E1A4A4; /* red */
-    }
-
-    .ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
-        background: #EBD5AA;
-    }
-    .ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
-        opacity: .10; /* show only a slight shadow */
-        filter:  alpha(opacity=10);
-        }
-        .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
-            opacity: 1.00; /* on-hover, show the resizer-bar normally */
-            filter:  alpha(opacity=100);
-        }
-        /* sliding resizer - add 'outside-border' to resizer on-hover
-         * this sample illustrates how to target specific panes and states */
-        .ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
-        .ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
-        .ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
-        .ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
+/* sliding resizer - add 'outside-border' to resizer on-hover
+ * this sample illustrates how to target specific panes and states */
+.ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
+.ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
+.ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
+.ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
 
 /*
  *  TOGGLER-BUTTONS
  */
 .ui-layout-toggler {
-    border: 1px solid #BBB; /* match pane-border */
-    background-color: #BBB;
+    border-top: 1px solid #AAA; /* match pane-border */
+    border-right: 1px solid #AAA; /* match pane-border */
+    border-bottom: 1px solid #AAA; /* match pane-border */
+    background-color: #DDD;
+    top: 5px !important;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler {
-        opacity: .60;
-        filter:  alpha(opacity=60);
+.ui-layout-toggler-open {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler-closed {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+
+/* hide the toggler-button when the pane is 'slid open' */
+.ui-layout-resizer-sliding  ui-layout-toggler {
+    display: none;
+}
+
+.ui-layout-north {
+	height: <?php print (empty($conf->browser->phone)?'54':'21'); ?>px !important;
+}
+
+/* ECM */
+
+#containerlayout .ecm-layout-pane { /* all 'panes' */
+    background: #FFF;
+    border:     1px solid #BBB;
+    /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+       otherwise you may get double-scrollbars - on the pane AND on the content-div
+    */
+    padding:    0px;
+    overflow:   auto;
+}
+/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+#containerlayout .ecm-layout-content {
+	padding:    10px;
+	position:   relative; /* contain floated or positioned elements */
+	overflow:   auto; /* add scrolling to content-div */
+}
+
+.ecm-layout-toggler {
+    background-color: #DDD;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity */
-        background-color: #FC6;
-        opacity: 1.00;
-        filter:  alpha(opacity=100);
-    }
-    .ui-layout-toggler-north ,
-    .ui-layout-toggler-south {
-        border-width: 0 1px; /* left/right borders */
-    }
-    .ui-layout-toggler-west ,
-    .ui-layout-toggler-east {
-        border-width: 1px 0; /* top/bottom borders */
-    }
-    /* hide the toggler-button when the pane is 'slid open' */
-    .ui-layout-resizer-sliding  ui-layout-toggler {
-        display: none;
-    }
-    /*
-     *  style the text we put INSIDE the togglers
-     */
-    .ui-layout-toggler .content {
-        color:          #666;
-        font-size:      12px;
-        font-weight:    bold;
-        width:          100%;
-        padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+.ecm-layout-toggler-open {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler-closed {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+#ecm-layout-west-resizer {
+	width: 6px !important;
+}
+
+.ecm-layout-resizer  { /* all 'resizer-bars' */
+    background:     #EEE;
+    border:         1px solid #BBB;
+    border-width:   0;
     }
 
 .ecm-in-layout-center {
-    border-left: 0px !important;
+    border-left: 1px !important;
     border-right: 0px !important;
     border-top: 0px !important;
 }
@@ -1075,6 +1146,8 @@ border-left: 1px solid #000000;
 /* Main boxes */
 
 table.noborder {
+width: 100%;
+
 border-collapse: collapse;
 border-top-color: #FEFEFE;
 
@@ -1353,10 +1426,6 @@ a.impayee:hover { font-weight: bold; color: #550000; }
 
 .fieldrequired { font-weight: bold; color: #000055; }
 
-#pictotitle {
-	<?php print !empty($conf->browser->phone)?'display: none;':''; ?>
-}
-
 .photo {
 border: 0px;
 /* filter:alpha(opacity=55); */
diff --git a/htdocs/theme/freelug/style.css.php b/htdocs/theme/freelug/style.css.php
index 0f70e0b1397..02b7769035e 100644
--- a/htdocs/theme/freelug/style.css.php
+++ b/htdocs/theme/freelug/style.css.php
@@ -19,7 +19,7 @@
 /**
  *		\file       htdocs/theme/freelug/style.css.php
  *		\brief      Fichier de style CSS du theme Freelug
- *		\version    $Id: style.css.php,v 1.45 2011/08/14 23:55:33 eldy Exp $
+ *		\version    $Id: style.css.php,v 1.46 2011/08/15 17:43:42 eldy Exp $
  */
 
 //if (! defined('NOREQUIREUSER')) define('NOREQUIREUSER','1');	// Not disabled cause need to load personalized language
@@ -164,12 +164,19 @@ div.float
     float:<?php print $left; ?>;
 }
 
-/* For hide object and add pointer cursor */
+/* ============================================================================== */
+/* Styles to hide objects                                                         */
+/* ============================================================================== */
 
 .hideobject { display: none; }
+<?php if (! empty($conf->browser->phone)) { ?>
+.hideonsmartphone { display: none; }
+<?php } ?>
 .linkobject { cursor: pointer; }
 
-/* For dragging lines */
+/* ============================================================================== */
+/* Styles for dragging lines                                                      */
+/* ============================================================================== */
 
 .dragClass {
     color: #002255;
@@ -188,9 +195,35 @@ td.showDragHandle {
 
 div.fiche
 {
-	margin-left: 5px;
+	margin-<?php print $left; ?>: <?php print empty($conf->browser->phone)?'10':'2'; ?>px;
+	margin-<?php print $right; ?>: <?php print empty($conf->browser->phone)?'6':''; ?>px;
 }
 
+div.fichecenter {
+	width: 100%;
+	clear: both;	/* This is to have div fichecenter that are true rectangles */
+}
+div.fichethirdleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 35%;\n"; } ?>
+}
+div.fichetwothirdright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 65%;\n"; } ?>
+}
+div.fichehalfleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.fichehalfright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.ficheaddleft {
+	<?php if (empty($conf->browser->phone)) { print "padding-left: 6px;\n"; } ?>
+}
+
+
 /* ============================================================================== */
 /* Menu superieur et 1ere ligne tableau                                           */
 /* ============================================================================== */
@@ -413,7 +446,7 @@ img.printer
 /* Menu gauche                                                                    */
 /* ============================================================================== */
 
-<?php if ((! empty($_GET["optioncss"]) && $_GET["optioncss"] == 'print')) { ?>
+<?php if (GETPOST("optioncss") == 'print') { ?>
 .vmenu {
     display: none;
 }
@@ -523,6 +556,37 @@ td.photo {
 }
 
 
+/* ============================================================================== */
+/* Panes for Main                                                   */
+/* ============================================================================== */
+
+/*
+ *  PANES and CONTENT-DIVs
+ */
+
+#mainContent, #leftContent .ui-layout-pane {
+    padding:    0px;
+    overflow:	auto;
+}
+
+#mainContent, #leftContent .ui-layout-center {
+	padding:    0px;
+	position:   relative; /* contain floated or positioned elements */
+    overflow:   auto;  /* add scrolling to content-div */
+}
+
+/* ============================================================================== */
+/* Barre de redmiensionnement menu                                                */
+/* ============================================================================== */
+
+.ui-layout-resizer-west-open {
+	/*left: 200px !important;*/
+}
+
+.ui-layout-north {
+        height: 57px !important;
+}
+
 /* ============================================================================== */
 /* Toolbar for ECM or Filemanager                                                 */
 /* ============================================================================== */
@@ -542,6 +606,7 @@ td.photo {
 /*    background: #FFFFFF;*/
 }
 
+
 /* ============================================================================== */
 /* Panes for ECM or Filemanager                                                   */
 /* ============================================================================== */
@@ -558,7 +623,7 @@ td.photo {
 /*
  *  PANES and CONTENT-DIVs
  */
-.ui-layout-pane { /* all 'panes' */
+#containerlayout .ui-layout-pane { /* all 'panes' */
     background: #FFF;
     border:     1px solid #BBB;
     /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
@@ -566,100 +631,144 @@ td.photo {
     */
     padding:    0px;
     overflow:   auto;
-    }
-    /* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
-    .ui-layout-content {
-        padding:    10px;
-        position:   relative; /* contain floated or positioned elements */
-        overflow:   auto; /* add scrolling to content-div */
-    }
+}
+/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+#containerlayout .ui-layout-content {
+	padding:    10px;
+	position:   relative; /* contain floated or positioned elements */
+	overflow:   auto; /* add scrolling to content-div */
+}
 
 /*
  *  RESIZER-BARS
  */
 .ui-layout-resizer  { /* all 'resizer-bars' */
-    background:     #EEE;
-    border:         1px solid #BBB;
-    border-width:   0;
+	width: 8px !important;
+}
+.ui-layout-resizer-hover    {   /* affects both open and closed states */
+}
+/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+    otherwise color shifts while dragging when bar can't keep up with mouse */
+/*.ui-layout-resizer-open-hover ,*/ /* hover-color to 'resize' */
+.ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
+    background: #DDD;
+    width: 8px;
+}
+.ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
+    border-left:  1px solid #BBB;
+    border-right: 1px solid #BBB;
+}
+/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
+    background: #E1A4A4; /* red */
+}
+.ui-layout-resizer-closed:hover {
+    background-color: #EEDDDD;
+}
+.ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
+    opacity: .10; /* show only a slight shadow */
+    filter:  alpha(opacity=10);
     }
-    .ui-layout-resizer-drag {       /* REAL resizer while resize in progress */
+    .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
+        opacity: 1.00; /* on-hover, show the resizer-bar normally */
+        filter:  alpha(opacity=100);
     }
-    .ui-layout-resizer-hover    {   /* affects both open and closed states */
-    }
-    /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
-        otherwise color shifts while dragging when bar can't keep up with mouse */
-    /* .ui-layout-resizer-open-hover , */ /* hover-color to 'resize' */
-    .ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
-        background: #AAA;
-    }
-    .ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
-        border-left:  1px solid #BBB;
-        border-right: 1px solid #BBB;
-    }
-    /* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
-    .ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
-        background: #E1A4A4; /* red */
-    }
-
-    .ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
-        background: #EBD5AA;
-    }
-    .ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
-        opacity: .10; /* show only a slight shadow */
-        filter:  alpha(opacity=10);
-        }
-        .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
-            opacity: 1.00; /* on-hover, show the resizer-bar normally */
-            filter:  alpha(opacity=100);
-        }
-        /* sliding resizer - add 'outside-border' to resizer on-hover
-         * this sample illustrates how to target specific panes and states */
-        .ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
-        .ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
-        .ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
-        .ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
+/* sliding resizer - add 'outside-border' to resizer on-hover
+ * this sample illustrates how to target specific panes and states */
+.ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
+.ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
+.ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
+.ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
 
 /*
  *  TOGGLER-BUTTONS
  */
 .ui-layout-toggler {
-    border: 1px solid #BBB; /* match pane-border */
-    background-color: #BBB;
+    border-top: 1px solid #AAA; /* match pane-border */
+    border-right: 1px solid #AAA; /* match pane-border */
+    border-bottom: 1px solid #AAA; /* match pane-border */
+    background-color: #DDD;
+    top: 5px !important;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler {
-        opacity: .60;
-        filter:  alpha(opacity=60);
+.ui-layout-toggler-open {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler-closed {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+
+/* hide the toggler-button when the pane is 'slid open' */
+.ui-layout-resizer-sliding  ui-layout-toggler {
+    display: none;
+}
+
+.ui-layout-north {
+	height: <?php print (empty($conf->browser->phone)?'21':'21'); ?>px !important;
+}
+
+/* ECM */
+
+#containerlayout .ecm-layout-pane { /* all 'panes' */
+    background: #FFF;
+    border:     1px solid #BBB;
+    /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+       otherwise you may get double-scrollbars - on the pane AND on the content-div
+    */
+    padding:    0px;
+    overflow:   auto;
+}
+/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+#containerlayout .ecm-layout-content {
+	padding:    10px;
+	position:   relative; /* contain floated or positioned elements */
+	overflow:   auto; /* add scrolling to content-div */
+}
+
+.ecm-layout-toggler {
+    background-color: #DDD;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity */
-        background-color: #FC6;
-        opacity: 1.00;
-        filter:  alpha(opacity=100);
-    }
-    .ui-layout-toggler-north ,
-    .ui-layout-toggler-south {
-        border-width: 0 1px; /* left/right borders */
-    }
-    .ui-layout-toggler-west ,
-    .ui-layout-toggler-east {
-        border-width: 1px 0; /* top/bottom borders */
-    }
-    /* hide the toggler-button when the pane is 'slid open' */
-    .ui-layout-resizer-sliding  ui-layout-toggler {
-        display: none;
-    }
-    /*
-     *  style the text we put INSIDE the togglers
-     */
-    .ui-layout-toggler .content {
-        color:          #666;
-        font-size:      12px;
-        font-weight:    bold;
-        width:          100%;
-        padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+.ecm-layout-toggler-open {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler-closed {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+#ecm-layout-west-resizer {
+	width: 6px !important;
+}
+
+.ecm-layout-resizer  { /* all 'resizer-bars' */
+    background:     #EEE;
+    border:         1px solid #BBB;
+    border-width:   0;
     }
 
 .ecm-in-layout-center {
-    border-left: 0px !important;
+    border-left: 1px !important;
     border-right: 0px !important;
     border-top: 0px !important;
 }
diff --git a/htdocs/theme/phones/smartphone/theme/default/default.css.php b/htdocs/theme/phones/smartphone/theme/default/default.css.php
index e78dff8f646..03ba337440c 100644
--- a/htdocs/theme/phones/smartphone/theme/default/default.css.php
+++ b/htdocs/theme/phones/smartphone/theme/default/default.css.php
@@ -18,7 +18,7 @@
 /**
  *		\file       htdocs/theme/phones/smartphone/theme/default/default.css.php
  *		\brief      Fichier de style CSS du theme Smartphone default
- *		\version    $Id: default.css.php,v 1.14 2011/08/03 01:39:44 eldy Exp $
+ *		\version    $Id: default.css.php,v 1.15 2011/08/15 17:43:42 eldy Exp $
  */
 
 if (! defined('NOTOKENRENEWAL')) define('NOTOKENRENEWAL','1'); // Disables token renewal
@@ -110,11 +110,87 @@ input.ui-input-text, textarea.ui-input-text {
 
 
 
-div.titre {
+/* ============================================================================== */
+/* Styles de positionnement des zones                                             */
+/* ============================================================================== */
+
+div.fiche {
+	margin-<?php print $left; ?>: <?php print empty($conf->browser->phone)?'10':'2'; ?>px;
+	margin-<?php print $right; ?>: <?php print empty($conf->browser->phone)?'6':''; ?>px;
+}
+
+div.fichecenter {
+	width: 100%;
+	clear: both;	/* This is to have div fichecenter that are true rectangles */
+}
+div.fichethirdleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 35%;\n"; } ?>
+}
+div.fichetwothirdright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 65%;\n"; } ?>
+}
+div.fichehalfleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.fichehalfright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.ficheaddleft {
+	<?php if (empty($conf->browser->phone)) { print "padding-left: 6px;\n"; } ?>
+}
+
+
+/* ============================================================================== */
+/* Boutons actions                                                                */
+/* ============================================================================== */
+
+.butAction, .butAction:link, .butAction:visited, .butAction:hover, .butAction:active, .butActionDelete, .butActionDelete:link, .butActionDelete:visited, .butActionDelete:hover, .butActionDelete:active {
+    overflow: hidden;
+    padding: 0.6em 25px;
+    position: relative;
+    white-space: nowrap;
+
 	font-family: <?php print $fontlist ?>;
-	font-weight: normal;
-	color: #336666;
+	background: white;
+	border: 1px solid #8CACBB;
+	color: #436976;
+	padding: 0em 0.7em;
+	margin: 0em 0.5em;
 	text-decoration: none;
+	white-space: nowrap;
+}
+
+.butAction:hover   {
+	background: #dee7ec;
+}
+
+.butActionDelete, .butActionDelete:link, .butActionDelete:visited, .butActionDelete:hover, .butActionDelete:active {
+    border: 1px solid #997777;
+}
+
+.butActionDelete:hover {
+    background: #FFe7ec;
+}
+
+.butActionRefused {
+	font-family: <?php print $fontlist ?> !important;
+	font-weight: bold !important;
+	background: white !important;
+	border: 1px solid #AAAAAA !important;
+	color: #AAAAAA !important;
+	padding: 0em 0.7em !important;
+	margin: 0em 0.5em !important;
+	text-decoration: none !important;
+	white-space: nowrap !important;
+	cursor: not-allowed;
+}
+
+span.butAction, span.butActionDelete {
+	cursor: pointer;
 }
 
 
@@ -225,3 +301,216 @@ table.nobordernopadding td {
 border: 0px;
 padding: 0px 0px;
 }
+
+
+
+tr.liste_titre {
+height: 24px;
+background: -moz-linear-gradient(center top , #81A8CE, #5E87B0) repeat scroll 0 0 #5E87B0;
+border: 1px solid #456F9A;
+color: #FFFFFF;
+font-family: <?php print $fontlist ?>;
+/* border-bottom: 1px solid #FDFFFF; */
+white-space: nowrap;
+}
+td.liste_titre {
+background: -moz-linear-gradient(center top , #81A8CE, #5E87B0) repeat scroll 0 0 #5E87B0;
+border: 1px solid #456F9A;
+color: #FFFFFF;
+font-family: <?php print $fontlist ?>;
+font-weight: normal;
+/* border-bottom: 1px solid #FDFFFF; */
+white-space: nowrap;
+}
+td.liste_titre_sel
+{
+background: -moz-linear-gradient(center top , #81A8CE, #5E87B0) repeat scroll 0 0 #5E87B0;
+color: #FFFFFF;
+font-family: <?php print $fontlist ?>;
+font-weight: normal;
+/* text-decoration: underline; */
+/* border-bottom: 1px solid #FDFFFF; */
+white-space: nowrap;
+}
+input.liste_titre {
+background: transparent;
+background-repeat: repeat-x;
+border: 0px;
+}
+
+tr.liste_total td {
+border-top: 1px solid #DDDDDD;
+background: #F0F0F0;
+background-repeat: repeat-x;
+color: #332266;
+font-weight: normal;
+white-space: nowrap;
+}
+
+
+.impair {
+/* background: #d0d4d7; */
+background: #eaeaea;
+font-family: <?php print $fontlist ?>;
+border: 0px;
+}
+/*
+.impair:hover {
+background: #c0c4c7;
+border: 0px;
+}
+*/
+
+.pair	{
+/* background: #e6ebed; */
+background: #f4f4f4;
+font-family: <?php print $fontlist ?>;
+border: 0px;
+}
+/*
+.pair:hover {
+background: #c0c4c7;
+border: 0px;
+}
+*/
+
+
+
+div.titre {
+	padding-top: 10px;
+	font-family: <?php print $fontlist ?>;
+	font-weight: normal;
+	color: #336666;
+	text-decoration: none;
+}
+
+
+
+/* ============================================================================== */
+/* Onglets                                                                        */
+/* ============================================================================== */
+
+div.tabs {
+    top: 20px;
+    margin: 1px 0px 0px 0px;
+    padding: 0px 6px 0px 0px;
+    text-align: <?php print $left; ?>;
+}
+
+div.tabBar {
+    color: #234046;
+    padding-top: 10px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-bottom: 8px;
+    margin: 0px 0px 10px 0px;
+    -moz-border-radius-topleft:6px;
+    -moz-border-radius-topright:6px;
+    -moz-border-radius-bottomleft:6px;
+    -moz-border-radius-bottomright:6px;
+    border-right: 1px solid #555555;
+    border-bottom: 1px solid #555555;
+    border-left: 1px solid #D0D0D0;
+    border-top: 1px solid #D8D8D8;
+    background: #dee7ec url(<?php echo DOL_URL_ROOT.'/theme/auguria/img/tab_background.png' ?>) repeat-x;
+}
+
+div.tabsAction {
+    margin: 20px 0em 1px 0em;
+    padding: 0em 0em;
+    text-align: right;
+}
+
+
+a.tabTitle {
+	display: none;
+}
+
+a.tab:link {
+    background: #dee7ec;
+    color: #436976;
+	font-family: <?php print $fontlist ?>;
+    padding: 0px 6px;
+    margin: 0em 0.2em;
+    text-decoration: none;
+    white-space: nowrap;
+    -moz-border-radius-topleft:6px;
+    -moz-border-radius-topright:6px;
+
+    border-<?php print $right; ?>: 1px solid #555555;
+    border-<?php print $left; ?>: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+}
+a.tab:visited {
+    background: #dee7ec;
+    color: #436976;
+	font-family: <?php print $fontlist ?>;
+    padding: 0px 6px;
+    margin: 0em 0.2em;
+    text-decoration: none;
+    white-space: nowrap;
+    -moz-border-radius-topleft:6px;
+    -moz-border-radius-topright:6px;
+
+    border-<?php print $right; ?>: 1px solid #555555;
+    border-<?php print $left; ?>: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+}
+a.tab#active {
+    background: white;
+    border-bottom: #dee7ec 1px solid;
+	font-family: <?php print $fontlist ?>;
+    color: #436976;
+    padding: 0px 6px;
+    margin: 0em 0.2em;
+    text-decoration: none;
+    -moz-border-radius-topleft:6px;
+    -moz-border-radius-topright:6px;
+
+    border-<?php print $right; ?>: 1px solid #555555;
+    border-<?php print $left; ?>: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+    border-bottom: 1px solid white;
+}
+a.tab:hover {
+    background: white;
+    color: #436976;
+	font-family: <?php print $fontlist ?>;
+    padding: 0px 6px;
+    margin: 0em 0.2em;
+    text-decoration: none;
+    -moz-border-radius-topleft:6px;
+    -moz-border-radius-topright:6px;
+
+    border-<?php print $right; ?>: 1px solid #555555;
+    border-<?php print $left; ?>: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+}
+
+a.tabimage {
+    color: #436976;
+	font-family: <?php print $fontlist ?>;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+td.tab {
+    background: #dee7ec;
+}
+
+span.tabspan {
+    background: #dee7ec;
+    color: #436976;
+	font-family: <?php print $fontlist ?>;
+    padding: 0px 6px;
+    margin: 0em 0.2em;
+    text-decoration: none;
+    white-space: nowrap;
+    -moz-border-radius-topleft:6px;
+    -moz-border-radius-topright:6px;
+
+    border-<?php print $right; ?>: 1px solid #555555;
+    border-<?php print $left; ?>: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+}
+
diff --git a/htdocs/theme/yellow/style.css.php b/htdocs/theme/yellow/style.css.php
index a482ff99b4c..eb7c9692cc9 100644
--- a/htdocs/theme/yellow/style.css.php
+++ b/htdocs/theme/yellow/style.css.php
@@ -19,7 +19,7 @@
 /**
  *		\file       htdocs/theme/yellow/style.css.php
  *		\brief      Fichier de style CSS du theme Yellow
- *		\version    $Id: style.css.php,v 1.47 2011/08/14 23:55:27 eldy Exp $
+ *		\version    $Id: style.css.php,v 1.48 2011/08/15 17:43:42 eldy Exp $
  */
 
 //if (! defined('NOREQUIREUSER')) define('NOREQUIREUSER','1');	// Not disabled cause need to load personalized language
@@ -152,12 +152,19 @@ div.float
     float:<?php print $left; ?>;
 }
 
-/* For hide object and add pointer cursor */
+/* ============================================================================== */
+/* Styles to hide objects                                                         */
+/* ============================================================================== */
 
 .hideobject { display: none; }
+<?php if (! empty($conf->browser->phone)) { ?>
+.hideonsmartphone { display: none; }
+<?php } ?>
 .linkobject { cursor: pointer; }
 
-/* For dragging lines */
+/* ============================================================================== */
+/* Styles for dragging lines                                                      */
+/* ============================================================================== */
 
 .dragClass {
     color: #002244;
@@ -177,10 +184,33 @@ td.showDragHandle {
 
 div.fiche
 {
-	margin-left: 4px;
-	margin-right: 2px;
+	margin-<?php print $left; ?>: <?php print empty($conf->browser->phone)?'8':'2'; ?>px;
+	margin-<?php print $right; ?>: <?php print empty($conf->browser->phone)?'4':''; ?>px;
 }
 
+div.fichecenter {
+	width: 100%;
+	clear: both;	/* This is to have div fichecenter that are true rectangles */
+}
+div.fichethirdleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 35%;\n"; } ?>
+}
+div.fichetwothirdright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 65%;\n"; } ?>
+}
+div.fichehalfleft {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.fichehalfright {
+	<?php if (empty($conf->browser->phone)) { print "float: ".$left.";\n"; } ?>
+	<?php if (empty($conf->browser->phone)) { print "width: 50%;\n"; } ?>
+}
+div.ficheaddleft {
+	<?php if (empty($conf->browser->phone)) { print "padding-left: 6px;\n"; } ?>
+}
 
 
 /* ============================================================================== */
@@ -394,7 +424,7 @@ img.printer
 /* Menu gauche                                                                    */
 /* ============================================================================== */
 
-<?php if ((! empty($_GET["optioncss"]) && $_GET["optioncss"] == 'print')) { ?>
+<?php if (GETPOST("optioncss") == 'print') { ?>
 .vmenu {
     display: none;
 }
@@ -517,6 +547,37 @@ td.photo {
 }
 
 
+/* ============================================================================== */
+/* Panes for Main                                                   */
+/* ============================================================================== */
+
+/*
+ *  PANES and CONTENT-DIVs
+ */
+
+#mainContent, #leftContent .ui-layout-pane {
+    padding:    0px;
+    overflow:	auto;
+}
+
+#mainContent, #leftContent .ui-layout-center {
+	padding:    0px;
+	position:   relative; /* contain floated or positioned elements */
+    overflow:   auto;  /* add scrolling to content-div */
+}
+
+/* ============================================================================== */
+/* Barre de redmiensionnement menu                                                */
+/* ============================================================================== */
+
+.ui-layout-resizer-west-open {
+	/*left: 200px !important;*/
+}
+
+.ui-layout-north {
+        height: 57px !important;
+}
+
 /* ============================================================================== */
 /* Toolbar for ECM or Filemanager                                                 */
 /* ============================================================================== */
@@ -536,6 +597,7 @@ td.photo {
 /*    background: #FFFFFF;*/
 }
 
+
 /* ============================================================================== */
 /* Panes for ECM or Filemanager                                                   */
 /* ============================================================================== */
@@ -552,7 +614,7 @@ td.photo {
 /*
  *  PANES and CONTENT-DIVs
  */
-.ui-layout-pane { /* all 'panes' */
+#containerlayout .ui-layout-pane { /* all 'panes' */
     background: #FFF;
     border:     1px solid #BBB;
     /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
@@ -560,100 +622,144 @@ td.photo {
     */
     padding:    0px;
     overflow:   auto;
-    }
-    /* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
-    .ui-layout-content {
-        padding:    10px;
-        position:   relative; /* contain floated or positioned elements */
-        overflow:   auto; /* add scrolling to content-div */
-    }
+}
+/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+#containerlayout .ui-layout-content {
+	padding:    10px;
+	position:   relative; /* contain floated or positioned elements */
+	overflow:   auto; /* add scrolling to content-div */
+}
 
 /*
  *  RESIZER-BARS
  */
 .ui-layout-resizer  { /* all 'resizer-bars' */
-    background:     #EEE;
-    border:         1px solid #BBB;
-    border-width:   0;
+	width: 8px !important;
+}
+.ui-layout-resizer-hover    {   /* affects both open and closed states */
+}
+/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+    otherwise color shifts while dragging when bar can't keep up with mouse */
+/*.ui-layout-resizer-open-hover ,*/ /* hover-color to 'resize' */
+.ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
+    background: #DDD;
+    width: 8px;
+}
+.ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
+    border-left:  1px solid #BBB;
+    border-right: 1px solid #BBB;
+}
+/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
+    background: #E1A4A4; /* red */
+}
+.ui-layout-resizer-closed:hover {
+    background-color: #EEDDDD;
+}
+.ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
+    opacity: .10; /* show only a slight shadow */
+    filter:  alpha(opacity=10);
     }
-    .ui-layout-resizer-drag {       /* REAL resizer while resize in progress */
+    .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
+        opacity: 1.00; /* on-hover, show the resizer-bar normally */
+        filter:  alpha(opacity=100);
     }
-    .ui-layout-resizer-hover    {   /* affects both open and closed states */
-    }
-    /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
-        otherwise color shifts while dragging when bar can't keep up with mouse */
-    /* .ui-layout-resizer-open-hover , */ /* hover-color to 'resize' */
-    .ui-layout-resizer-dragging {   /* resizer beging 'dragging' */
-        background: #AAA;
-    }
-    .ui-layout-resizer-dragging {   /* CLONED resizer being dragged */
-        border-left:  1px solid #BBB;
-        border-right: 1px solid #BBB;
-    }
-    /* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
-    .ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
-        background: #E1A4A4; /* red */
-    }
-
-    .ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
-        background: #EBD5AA;
-    }
-    .ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
-        opacity: .10; /* show only a slight shadow */
-        filter:  alpha(opacity=10);
-        }
-        .ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
-            opacity: 1.00; /* on-hover, show the resizer-bar normally */
-            filter:  alpha(opacity=100);
-        }
-        /* sliding resizer - add 'outside-border' to resizer on-hover
-         * this sample illustrates how to target specific panes and states */
-        .ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
-        .ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
-        .ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
-        .ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
+/* sliding resizer - add 'outside-border' to resizer on-hover
+ * this sample illustrates how to target specific panes and states */
+.ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
+.ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
+.ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
+.ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }
 
 /*
  *  TOGGLER-BUTTONS
  */
 .ui-layout-toggler {
-    border: 1px solid #BBB; /* match pane-border */
-    background-color: #BBB;
+    border-top: 1px solid #AAA; /* match pane-border */
+    border-right: 1px solid #AAA; /* match pane-border */
+    border-bottom: 1px solid #AAA; /* match pane-border */
+    background-color: #DDD;
+    top: 5px !important;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler {
-        opacity: .60;
-        filter:  alpha(opacity=60);
+.ui-layout-toggler-open {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler-closed {
+	height: 48px !important;
+	width: 5px !important;
+    -moz-border-radius:0px 10px 10px 0px;
+	-webkit-border-radius:0px 10px 10px 0px;
+	border-radius:0px 10px 10px 0px;
+}
+.ui-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+
+/* hide the toggler-button when the pane is 'slid open' */
+.ui-layout-resizer-sliding  ui-layout-toggler {
+    display: none;
+}
+
+.ui-layout-north {
+	height: <?php print (empty($conf->browser->phone)?'21':'21'); ?>px !important;
+}
+
+/* ECM */
+
+#containerlayout .ecm-layout-pane { /* all 'panes' */
+    background: #FFF;
+    border:     1px solid #BBB;
+    /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+       otherwise you may get double-scrollbars - on the pane AND on the content-div
+    */
+    padding:    0px;
+    overflow:   auto;
+}
+/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+#containerlayout .ecm-layout-content {
+	padding:    10px;
+	position:   relative; /* contain floated or positioned elements */
+	overflow:   auto; /* add scrolling to content-div */
+}
+
+.ecm-layout-toggler {
+    background-color: #DDD;
     }
-    .ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity */
-        background-color: #FC6;
-        opacity: 1.00;
-        filter:  alpha(opacity=100);
-    }
-    .ui-layout-toggler-north ,
-    .ui-layout-toggler-south {
-        border-width: 0 1px; /* left/right borders */
-    }
-    .ui-layout-toggler-west ,
-    .ui-layout-toggler-east {
-        border-width: 1px 0; /* top/bottom borders */
-    }
-    /* hide the toggler-button when the pane is 'slid open' */
-    .ui-layout-resizer-sliding  ui-layout-toggler {
-        display: none;
-    }
-    /*
-     *  style the text we put INSIDE the togglers
-     */
-    .ui-layout-toggler .content {
-        color:          #666;
-        font-size:      12px;
-        font-weight:    bold;
-        width:          100%;
-        padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+.ecm-layout-toggler-open {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler-closed {
+	height: 48px !important;
+	width: 6px !important;
+}
+.ecm-layout-toggler .content {	/* style the text we put INSIDE the togglers */
+    color:          #666;
+    font-size:      12px;
+    font-weight:    bold;
+    width:          100%;
+    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
+}
+#ecm-layout-west-resizer {
+	width: 6px !important;
+}
+
+.ecm-layout-resizer  { /* all 'resizer-bars' */
+    background:     #EEE;
+    border:         1px solid #BBB;
+    border-width:   0;
     }
 
 .ecm-in-layout-center {
-    border-left: 0px !important;
+    border-left: 1px !important;
     border-right: 0px !important;
     border-top: 0px !important;
 }
@@ -666,6 +772,7 @@ td.photo {
 }
 
 
+
 /* ============================================================================== */
 /* Onglets                                                                        */
 /* ============================================================================== */
@@ -956,10 +1063,6 @@ a.impayee:hover { font-weight: bold; color: #550000; }
 
 .fieldrequired { font-weight: bold; color: #442200; }
 
-#pictotitle {
-	<?php print !empty($conf->browser->phone)?'display: none;':''; ?>
-}
-
 .photo {
 border: 0px;
 /* filter:alpha(opacity=55); */