diff --git a/ganttzk/src/main/resources/web/ganttz/zul/plannerLayout.zul b/ganttzk/src/main/resources/web/ganttz/zul/plannerLayout.zul
index 4a58b8093..cda703cfa 100644
--- a/ganttzk/src/main/resources/web/ganttz/zul/plannerLayout.zul
+++ b/ganttzk/src/main/resources/web/ganttz/zul/plannerLayout.zul
@@ -18,99 +18,102 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
 <?taglib uri="/WEB-INF/tld/i18n.tld" prefix="i18n" ?>
 
 <borderlayout width="auto" height="100%" class="inner-layout">
-       <north height="30px" border="0" sclass="toolbar-box">
-       <zscript><![CDATA[
+    <north height="32px" border="0" sclass="toolbar-box">
+        <zscript><![CDATA[
 planner = self;
 ]]>
-</zscript>
+        </zscript>
 
-       <hbox align="center" id="toolbar">
+        <hbox align="center" id="toolbar">
 
-        <separator/>
-        <!--  Commands -->
-        <templateFinderPopup id="templateFinderPopup" acceptButtonLabel="${i18n:_('Create Project')}" caption="${i18n:_('Choosing Template')}" />
+            <separator />
 
-        <button onClick="planner.invalidate()"
-            image="/common/img/ico_refresh.png"
-            tooltiptext="${i18n:_('Refresh')}" visible="false" />
-        <button id="btnPrint" onClick="planner.print()"
-            image="/common/img/ico_print.png"
-            tooltiptext="${i18n:_('Print')}" />
-        <separator/>
+            <!--  Commands -->
+            <templateFinderPopup id="templateFinderPopup"
+                acceptButtonLabel="${i18n:_('Create Project')}" caption="${i18n:_('Choosing Template')}" />
+            <button onClick="planner.invalidate()" image="/common/img/ico_refresh.png"
+                tooltiptext="${i18n:_('Refresh')}" visible="false" />
+            <button id="btnPrint" onClick="planner.print()"
+                image="/common/img/ico_print.png" tooltiptext="${i18n:_('Print')}" />
 
-        <!--  Visualization modes -->
-        <label>${i18n:_('Zoom')}:</label>
-        <listbox id="listZoomLevels" mold="select" rows="1"
-            model="${planner.zoomLevels}"
-            onSelect="planner.setZoomLevel(self.selectedItem.value);" >
-        </listbox>
+            <separator />
 
-        <!-- Progress type -->
+            <!--  Visualization modes -->
+            <label>${i18n:_('Zoom')}:</label>
+            <listbox id="listZoomLevels" mold="select" rows="1"
+                model="${planner.zoomLevels}" onSelect="planner.setZoomLevel(self.selectedItem.value);">
+            </listbox>
 
-        <button id="showCriticalPath" onClick="planner.showCriticalPath();"
-            image="/common/img/ico_criticalpath.png"
-            tooltiptext="${i18n:_('Show/Hide Critical path')}" />
-        <button id="showAllLabels" onClick="planner.showAllLabels();"
-            image="/common/img/ico_labels.png"
-            tooltiptext="${i18n:_('Show/Hide labels')}" sclass="planner-command show-labels" />
-        <button id="showAllResources" onClick="planner.showAllResources();"
-            image="/common/img/ico_resources.png"
-            tooltiptext="${i18n:_('Show/Hide resources')}" sclass="planner-command show-resources" />
-        <button id="expandAll" onClick="planner.expandAll();"
-            image="/common/img/ico_expand.png"
-            tooltiptext="${i18n:_('Expand/Collapse all')}"
-            sclass="planner-command" />
-        <button id="flattenTree" onClick="planner.flattenTree();"
-            image="/common/img/ico_flatten.png"
-            tooltiptext="${i18n:_('Flatten/Unflatten tree')}"
-            sclass="planner-command" />
+            <!-- Progress type -->
+
+            <hbox sclass="view-options">
+                <button id="showCriticalPath" onClick="planner.showCriticalPath();"
+                    image="/common/img/ico_criticalpath.png"
+                    tooltiptext="${i18n:_('Show/Hide Critical path')}"
+                    sclass="planner-command" />
+                <button id="showAllLabels" onClick="planner.showAllLabels();"
+                    image="/common/img/ico_labels.png" tooltiptext="${i18n:_('Show/Hide labels')}"
+                    sclass="planner-command show-labels" />
+                <button id="showAllResources" onClick="planner.showAllResources();"
+                    image="/common/img/ico_resources.png" tooltiptext="${i18n:_('Show/Hide resources')}"
+                    sclass="planner-command show-resources" />
+                <button id="expandAll" onClick="planner.expandAll();"
+                    image="/common/img/ico_expand.png" tooltiptext="${i18n:_('Expand/Collapse all')}"
+                    sclass="planner-command" />
+                <button id="flattenTree" onClick="planner.flattenTree();"
+                    image="/common/img/ico_flatten.png" tooltiptext="${i18n:_('Flatten/Unflatten tree')}"
+                    sclass="planner-command" />
+                <button id="showReportedHours" onClick="planner.showReportedHours();"
+                    image="/common/img/ico_costs.png" tooltiptext="${i18n:_('Show/Hide reported hours')}"
+                    sclass="planner-command" />
+
+            </hbox>
+
+            <hbox class="show-advances" align="center">
+                <button id="showAdvances" onClick="planner.showAdvances();"
+                    image="/common/img/ico_progress.png" style="width:46px"
+                    tooltiptext="${i18n:_('Show/Hide Progress')}"
+                    sclass="planner-command" />
+                <combobox id="cbProgressTypes" width="1px"
+                    visible="false" sclass="progress-types" />
+            </hbox>
+
+            <separator />
+
+            <!--  Filtering -->
+            <vbox id="orderFilter" />
+            <vbox id="orderElementFilter" />
+            <separator />
 
-        <hbox class="show-advances" align="center">
-            <button id="showAdvances" onClick="planner.showAdvances();"
-                image="/common/img/ico_progress.png"
-                style="width:46px"
-                tooltiptext="${i18n:_('Show/Hide Progress')}"
-                sclass="planner-command" />
-            <combobox id="cbProgressTypes" width="1px" visible="false" sclass="progress-types"/>
         </hbox>
+    </north>
 
-        <button id="showReportedHours" onClick="planner.showReportedHours();"
-            image="/common/img/ico_costs.png"
-            tooltiptext="${i18n:_('Show/Hide reported hours')}"
-            sclass="planner-command"/>
-        <separator />
+    <center border="0">
+        <borderlayout sclass="plannerlayout_center" height="100%">
+            <west flex="false" collapsible="true" splittable="true"
+                width="300px" id="taskdetailsContainer" sclass="taskdetailsContainer">
+                <div sclass="leftpanelgap" id="insertionPointLeftPanel"></div>
+            </west>
+            <center id="taskpanel" sclass="taskspanel">
+                <borderlayout>
+                    <north border="0">
+                        <div sclass="timetrackergap" id="insertionPointTimetracker"></div>
+                    </north>
+                    <center id="centerPanel" autoscroll="true"
+                        border="10" sclass="rightpanellayout">
+                        <div id="insertionPointRightPanel" sclass="taskspanelgap"></div>
+                    </center>
+                </borderlayout>
 
-        <!--  Filtering -->
-        <vbox id="orderFilter"/>
-        <vbox id="orderElementFilter"/>
-        <separator />
-
-       </hbox>
-       </north>
-
-        <center border="0">
-            <borderlayout sclass="plannerlayout_center" height="100%">
-                <west flex="false" collapsible="true" splittable="true" width="300px"
-                    id="taskdetailsContainer" sclass="taskdetailsContainer">
-                            <div sclass="leftpanelgap" id="insertionPointLeftPanel"></div>
-                </west>
-                <center id="taskpanel" sclass="taskspanel">
-                    <borderlayout>
-                        <north border="0"><div sclass="timetrackergap" id="insertionPointTimetracker"></div></north>
-                        <center id="centerPanel" autoscroll="true" border="10" sclass="rightpanellayout">
-                            <div id="insertionPointRightPanel" sclass="taskspanelgap"></div>
-                        </center>
-                    </borderlayout>
-
-                </center>
-            </borderlayout>
-        </center>
-        <south collapsible="true" title="${i18n:_('Graphics')}" sclass="scheduling-graphics"
-            id="graphics" onOpen="planner.changeChartVisibility(event.open);" height="200px">
-            <div id="insertionPointChart" />
-        </south>
-    </borderlayout>
+            </center>
+        </borderlayout>
+    </center>
+    <south collapsible="true" title="${i18n:_('Graphics')}"
+        sclass="scheduling-graphics" id="graphics"
+        onOpen="planner.changeChartVisibility(event.open);" height="200px">
+        <div id="insertionPointChart" />
+    </south>
+</borderlayout>
\ No newline at end of file
diff --git a/navalplanner-webapp/src/main/webapp/common/css/navalplan_zk.css b/navalplanner-webapp/src/main/webapp/common/css/navalplan_zk.css
index 166a6ae7a..ab4336b2b 100644
--- a/navalplanner-webapp/src/main/webapp/common/css/navalplan_zk.css
+++ b/navalplanner-webapp/src/main/webapp/common/css/navalplan_zk.css
@@ -200,33 +200,35 @@ button.z-button {
 /* Perspective and planner buttons
 --------------------------------------------------- */
 
-.planner-icon, .planner-command {
-   padding: 2px;
+.toolbar-box {
+	border:0;
 }
 
-.planner-icon .z-button-cm {
-   padding: 2px;
-}
-.planner-icon .z-button-cm:active {
-   padding: 2px 1px 1px 2px;
+.toolbar-box .z-button {
+   padding: 1px 2px 2px 2px;
 }
 
 .planner-command .z-button-cm,
+.planner-icon .z-button-cm {
+   padding: 2px;
+}
+
+.toolbar-box .z-button .z-button-cm,
 .advancedallocationlayout .z-north-body .z-button-cm {
     height: 24px;
     padding: 2px;
 }
-.planner-command .z-button-cm:active {
-   padding: 2px 1px 1px 2px;
+
+.toolbar-box .z-button.z-button-clk .z-button-cm {
+    padding-right: 3px;
 }
 
-.planner-command.clicked .z-button-cm {
-    background-color: #A1D586; /* green2 (active background)*/
-    border-right: 0px;
-    border-bottom: 1px solid #439e32;
-    border-top: 2px solid #3f5917;
-    border-left: 2px solid #3f5917;
-    padding: 2px 1px 1px 2px;
+.toolbar-box .clicked .z-button-cm,
+.toolbar-box .z-button-cm:active {
+    background-color: #E6F2F9; /* blue (active background)*/
+    border-top: 1px solid #006699;
+    border-left: 1px solid #006699;
+    padding: 2px;
 }
 
 .sub_menu .z-button-cm {
@@ -1127,12 +1129,6 @@ span.z-dottree-line {
     margin: 0 0 0 0;
 }
 
-.toolbar-box .planner-icon,
-.toolbar-box  .planner-command {
-   padding-top: 1px;
-   padding-right: 1px;
-}
-
 .toolbar-box .z-button-cm  {
     background-color: transparent;
     border-color:transparent;
@@ -1155,15 +1151,11 @@ span.z-dottree-line {
 }
 
 .toolbar-box table.z-button-disd:active  {
-    margin-top: 1px;
-    margin-right: 1px;
-    border-top: 0;
-    border-left: 0;
-    padding-left: 2px;
+    border-color: transparent;
+    padding-left: 3px;
+    padding-right: 3px;
 }
 
-
-
 /* =================================================== */
 
 .vertical-separator {
@@ -1473,6 +1465,7 @@ display:none;
 }
 
 .second_level_ #watermark .timetracker_column_even,
+.second_level_ #watermark .timetracker_column,
 .second_level_ #watermark .bankHoliday {
     height: 99999px;
 }
@@ -1517,7 +1510,7 @@ display:none;
 
 .show-advances img  {
     position:relative;
-    left: -8px;
+    left: -6px;
 }
 
 .progress-types.z-combobox .z-combobox-img {
@@ -1559,3 +1552,7 @@ input.z-spinner-text-disd,
 input.z-datebox-text-disd {
     color: #000000 !important;
 }
+.z-calendar .z-calendar-calmon td.z-calendar-seld,
+.z-calendar .z-calendar-calday td.z-calendar-seld {
+    padding: 0;
+}