From cb2adba7030b7a2eba73afa7e4ec1f48b57a6073 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Tue, 19 Jun 2007 15:47:29 +0200
Subject: [PATCH] more redesign and code cleanup

darcs-hash:20070619134729-6e07b-8b411d5cba884bcaf19559cbd53f694cf2fe2f2e.gz
---
 ajax.php                            |  59 ++++--
 config.php                          |   2 +-
 import.php                          |   3 -
 lang/en.php                         |   2 +-
 login.php                           |  44 +++--
 pix/imagebox/close.jpg              | Bin 0 -> 24242 bytes
 pix/imagebox/loading.gif            | Bin 0 -> 1787 bytes
 pix/imagebox/next_image.jpg         | Bin 0 -> 1601 bytes
 pix/imagebox/prev_image.jpg         | Bin 0 -> 1558 bytes
 pix/imagebox/spacer.gif             | Bin 0 -> 45 bytes
 scripts/formatDate.js               | 290 ++++++++++++++++++++++++++++
 scripts/gui.js                      | 168 ++++++++++++++--
 styles/design.css                   | 140 ++++++++++++++
 styles/layout.css                   | 209 ++++++++++++++++++++
 styles/scripted.css                 |  61 ++++++
 template.php                        |  12 +-
 templates/blank.gif                 | Bin 42 -> 0 bytes
 templates/entry_edit.tpl            | 119 ++++++------
 templates/entry_show.tpl            | 162 ++++++++--------
 templates/entry_vcf.tpl             |   2 +-
 templates/export_list_csv.tpl       |   2 +-
 templates/export_list_csv_entry.tpl |   2 +-
 templates/extended_edit.tpl         |  16 --
 templates/extended_show.tpl         |  28 ---
 templates/filter.tpl                |  50 -----
 templates/footer.tpl                |  75 ++-----
 templates/header.tpl                |  97 +++++++---
 templates/import.tpl                |  31 ++-
 templates/importVCF.tpl             |  25 ---
 templates/importVCF_entry.tpl       |  39 ----
 templates/import_entry.tpl          |  68 +++----
 templates/list.tpl                  |   2 +-
 templates/list_entry.tpl            |  49 ++---
 templates/list_filter.tpl           |  63 ------
 templates/login.tpl                 |  51 +++--
 templates/openxchange_edit.tpl      |  71 -------
 templates/openxchange_show.tpl      |  72 -------
 templates/orgs.tpl                  |  28 +--
 templates/pngbehavior.htc           |  53 -----
 templates/search.tpl                |  16 ++
 templates/tags.tpl                  |   7 +-
 templates/toolbar.tpl               |  40 ++--
 42 files changed, 1305 insertions(+), 853 deletions(-)
 create mode 100644 pix/imagebox/close.jpg
 create mode 100644 pix/imagebox/loading.gif
 create mode 100644 pix/imagebox/next_image.jpg
 create mode 100644 pix/imagebox/prev_image.jpg
 create mode 100644 pix/imagebox/spacer.gif
 create mode 100644 scripts/formatDate.js
 create mode 100644 styles/design.css
 create mode 100644 styles/layout.css
 create mode 100644 styles/scripted.css
 delete mode 100644 templates/blank.gif
 delete mode 100644 templates/extended_edit.tpl
 delete mode 100644 templates/extended_show.tpl
 delete mode 100644 templates/filter.tpl
 delete mode 100644 templates/importVCF.tpl
 delete mode 100644 templates/importVCF_entry.tpl
 delete mode 100644 templates/list_filter.tpl
 delete mode 100644 templates/openxchange_edit.tpl
 delete mode 100644 templates/openxchange_show.tpl
 delete mode 100644 templates/pngbehavior.htc
 create mode 100644 templates/search.tpl

diff --git a/ajax.php b/ajax.php
index 75a5822..997eba1 100644
--- a/ajax.php
+++ b/ajax.php
@@ -2,7 +2,6 @@
 require_once('init.php');
 ldap_login();
 
-header('Content-Type: text/xml; charset=utf-8');
 
 /*
 echo '<bla><[!CDATA[';
@@ -13,25 +12,18 @@ echo ']]></bla>';
 $FIELD = preg_replace('/entry\[/','',$_REQUEST['field']);
 $FIELD = preg_replace('/\W+/','',$FIELD);
 
-if($FIELD == 'marker'||$FIELD == 'markers'){
+if($_REQUEST['dn'] && $_REQUEST['addnote']){
+  ajax_addnote($_REQUEST['dn'],$_REQUEST['addnote']);
+}elseif($_REQUEST['dn'] && $_REQUEST['settags']){
+  ajax_settags($_REQUEST['dn'],$_REQUEST['settags']);
+}elseif($_REQUEST['dn'] && $_REQUEST['loadtags']){
+  ajax_loadtags($_REQUEST['dn'],$_REQUEST['loadtags']);
+}elseif($FIELD == 'marker'||$FIELD == 'markers'){
   ajax_taglookup($_REQUEST['value']);
 }else{
   ajax_lookup($FIELD,$_REQUEST['value']);
 }
 
-/*
-if(!empty($_REQUEST['taglookup'])){
-  ajax_taglookup($_REQUEST['taglookup']);
-}elseif(!empty($_REQUEST['lookup']) && !empty($_REQUEST['s'])){
-  ajax_lookup($_REQUEST['lookup'],$_REQUEST['s']);
-}elseif(!empty($_REQUEST['addnote'])){
-  ajax_addnote($_REQUEST['addnote'],$_REQUEST['note']);
-}elseif(!empty($_REQUEST['settags'])){
-  ajax_settags($_REQUEST['settags'],$_REQUEST['tags']);
-}
-*/
-
-
 /**
  * Add a note to the existing notes
  */
@@ -40,6 +32,8 @@ function ajax_addnote($dn,$note){
   global $LDAP_CON;
   global $FIELDS;
 
+  header('Content-Type: text/html; charset=utf-8');
+
   // fetch the existing note
   $result = ldap_search($LDAP_CON,$dn,'(objectClass=inetOrgPerson)',array($FIELDS['note']));
   if(ldap_count_entries($LDAP_CON,$result)){
@@ -57,7 +51,7 @@ function ajax_addnote($dn,$note){
 }
 
 /**
- * Sett tags for a contact
+ * Set tags for a contact
  */
 function ajax_settags($dn,$tags){
   global $conf;
@@ -65,6 +59,8 @@ function ajax_settags($dn,$tags){
   global $FIELDS;
   if(!$FIELDS['_marker']) return;
 
+  header('Content-Type: text/html; charset=utf-8');
+
   $tags = explode(',',$tags);
   $tags = array_map('trim',$tags);
   $tags = array_unique($tags);
@@ -82,11 +78,41 @@ function ajax_settags($dn,$tags){
   }
 }
 
+/**
+ * Load current tags of an entry
+ */
+function ajax_loadtags($dn,$type='plain'){
+  global $conf;
+  global $LDAP_CON;
+  global $FIELDS;
+  if(!$FIELDS['_marker']) return;
+
+  header('Content-Type: text/html; charset=utf-8');
+
+  $sr = ldap_search($LDAP_CON,$dn,'(objectClass=inetOrgPerson)',array($FIELDS['_marker']));
+  if(!ldap_count_entries($LDAP_CON,$sr)) return false;
+  $result = ldap_get_binentries($LDAP_CON, $sr);
+  $entry  = $result[0];
+
+  if($type == 'plain'){
+    echo join(', ',$entry[$FIELDS['_marker']]);
+  }else{
+    foreach ($entry[$FIELDS['_marker']] as $tag){
+      echo '<a href="index.php?marker=';
+      echo rawurlencode($tag);
+      echo '" class="tag">';
+      echo htmlspecialchars($tag);
+      echo '</a> ';
+    }
+  }
+}
+
 /**
  * Find all tags (markers) starting with the given
  * string
  */
 function ajax_taglookup($tag){
+  header('Content-Type: text/xml; charset=utf-8');
   global $conf;
   global $LDAP_CON;
   global $FIELDS;
@@ -127,6 +153,7 @@ function ajax_taglookup($tag){
  * Do a simple lookup in any simple field
  */
 function ajax_lookup($field,$search){
+    header('Content-Type: text/xml; charset=utf-8');
     global $conf;
     global $LDAP_CON;
     global $FIELDS;
diff --git a/config.php b/config.php
index 349a116..d46910e 100644
--- a/config.php
+++ b/config.php
@@ -54,6 +54,6 @@
   $conf['dateformat']  = '%d.%m.%Y';
 
   // Force recompilation of smarty templates?
-  $conf['smartycompile'] = 0;
+  $conf['smartycompile'] = 1;
 
 
diff --git a/import.php b/import.php
index 2f880f1..c26e85c 100644
--- a/import.php
+++ b/import.php
@@ -99,9 +99,6 @@ function zaurus_entry($cnct){
   $entry['mobile']       = empty($cnct['HomeMobile']) ? $cnct['BusinessMobile'] : $cnct['HomeMobile'];
   $entry['fax']          = empty($cnct['BusinessFax']) ? $cnct['HomeFax'] : $cnct['BusinessFax'];
 
-#  $entry['anniversary'] = $cnt[''];
-
-  utf8_decode_array($entry);
   return $entry;
 }
 
diff --git a/lang/en.php b/lang/en.php
index da1b254..1f2b97d 100644
--- a/lang/en.php
+++ b/lang/en.php
@@ -53,7 +53,7 @@ $lang['csvexport']        = 'CSV';
 $lang['vcfexport']        = 'VCard';
 $lang['vcfimport']        = 'Import';
 $lang['search']           = 'Search';
-$lang['submit']           = 'Send';
+$lang['submit']           = 'Save';
 $lang['help']             = 'Help';
 $lang['select']           = 'Select';
 $lang['orgs']             = 'Companies';
diff --git a/login.php b/login.php
index 1e4b0d0..524d75f 100644
--- a/login.php
+++ b/login.php
@@ -1,26 +1,30 @@
-<?
-  require_once('init.php');
+<?php
+/**
+ * Do the login/logout process
+ */
 
-  $msg = $lang['msg_login'];
-  if(isset($_REQUEST['username'])){
+require_once('init.php');
+
+$msg = $lang['msg_login'];
+if(isset($_REQUEST['username'])){
     if (empty($_REQUEST['password'])) { $_REQUEST['password']=''; }
     if (do_ldap_bind($_REQUEST['username'],$_REQUEST['password'])){
-      //forward to next page
-      if(!empty($_SESSION['ldapab']['lastlocation'])){
-        header('Location: '.$_SESSION['ldapab']['lastlocation']);
-      }else{
-        header('Location: index.php');
-      }
-      exit;
+        //forward to next page
+        if(!empty($_SESSION['ldapab']['lastlocation'])){
+            header('Location: '.$_SESSION['ldapab']['lastlocation']);
+        }else{
+            header('Location: index.php');
+        }
+        exit;
     }else{
-      $msg = $lang['msg_loginfail'];;
+        $msg = $lang['msg_loginfail'];;
     }
-  }
+}
+
+//prepare templates
+tpl_std();
+$smarty->assign('msg',$msg);
+//display templates
+header('Content-Type: text/html; charset=utf-8');
+$smarty->display('login.tpl');
 
-  //prepare templates
-  tpl_std();
-  $smarty->assign('msg',$msg);
-  //display templates
-  header('Content-Type: text/html; charset=utf-8');
-  $smarty->display('login.tpl');
-?>
diff --git a/pix/imagebox/close.jpg b/pix/imagebox/close.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3fcd7c5504a77d2ece05fb1731b2aaea0c154d9a
GIT binary patch
literal 24242
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
R{iu88yJHe}o=K43{~zmJ!M*?h

literal 0
HcmV?d00001

diff --git a/pix/imagebox/loading.gif b/pix/imagebox/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5bb90fd6a49107a321c35b9cee4a7b810314b51f
GIT binary patch
literal 1787
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

literal 0
HcmV?d00001

diff --git a/pix/imagebox/next_image.jpg b/pix/imagebox/next_image.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0a6e3cf4b8566af880b784b00895a07a4b8667b9
GIT binary patch
literal 1601
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

literal 0
HcmV?d00001

diff --git a/pix/imagebox/prev_image.jpg b/pix/imagebox/prev_image.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2ce01dc0bc89c74eedb814da300972d5e5114b20
GIT binary patch
literal 1558
zcmY+A2T+qq7>4)HpH2+~q=_aJMHr7z11Df8(uX1vDaVNkMQOrC1(hS5ipVKQLXoC|
zOr%&)ih$zD86qMbJRl$zKoqb52Y9qxz%t{rGyCoL&c3tnx1xU0OCamC%W)Tg5CAa6
z3y7uw!S*mCEDk^b2>@^xOCNwVjTyB+2rwUt6-YD)P65PsVDSk?igy@^Lau>Aqt-#A
zF&HccgT~?TcpOghM<5u6QAiXHjmAky;3TAEq{Ya{tY7+CB)@b&`o4Ffhk$?u>cAI<
z2mnEVU;-rKgCpYD;v|qb=Ql7|Bn|=N(a<{I)U^sBkgzNOXb1_xDCnyPTAKrn0R%a$
zJc*2>&@_k&2AYI5Gk}orcRxfx$dfz*VVazQNC+gwPa+5~0a$_I;98-P6goRRf#R;O
z7-kpRkZ_UXeSKweOXP(D=d&qI4D#Vqe-)8Eld}_k<t@%lpWyKpL}1I_hJbqN6v~%N
zF<s7cHZMp`o@>zyxWk&Rzq#A5-MY@z_MF$5L^g1ptR*^;N=NP`6&;Lf-DQ?paI>-@
z@TnI1F4GI!{e0=HRiy25QQ{B|h5nnxaWBFc1nVaW=980zcPDtoms*x{Xmfp(r>{{I
z<oV~LjL>mxt3kG7oxdcPIizjdrC2WgY7~(q*tjapUpa2n>$+uTK0{N|A~)pvJhnOR
z$%d}zb~RUCPDZo}*DgN;A3O7rpT^mA>jk}O<{*DQWYqF<-@tO9e^Q}Ei-C_dRGq4&
z^dE9S*(3)4`6?gJq|4_tro^*N2Gd?7xXcQ2`**~2sM+6+CO2yoZ;0fiU2Q4Zj@8=_
zN-k`3->QZUl$!xktM|h2t(`_v@XpRS^+&Am5zal+{F2Z3M&)0sef)+P*S80qCSSQP
zacvdzo;_j0(llTf0!izPSCjm)KG!>L-rgrG;&<juxY>+rMAVolsuoOY_YJq5v(I1%
zi`vemM0DEOHFHu_XVe5#p4-1D#8RB<j=3dPnV}adBCWpKZb~cjnKJ@mpy7U**##Lo
zl;Xzu7ra`gXtK&g;<hu?d{4I_&tyP6`Z2je1ju34$sdnDrp(igcpe9KdoiL@X3E}Z
zX(|~KUsQkEn#=RJ?S#M9XnoPPkpIxKzGG9%GhTI<aNc?3*t4IdGDBvY9>Igf!QBrA
zR3A9mG4o7mt=!Ek<I;UZ?!He%nOJs?K~iJQtAh5^2j8Nsk5|Uu5L9NpR-TIj-sJox
zwo4A-MlsjHd-+UHG)t47HdIWFhkZYcYV`hI*Zbucz4QXNu=|6w-~OZD=B6GH{)xj$
zsukD@s#vvJdeeDH<qeSo3U>BZ9ebLIg5}e$9&^)5hs$fJ1G8xIlh3^Lp!(Nu7V3k#
zhbPPmVjinJTMW->dJx;?Ctq{R)69dWSR#?G&rNqIb$;+>E+~WH;#txA)F`KF;)C%W
zhRbi7s|}I|yxk)t?KO`?XF4IwdgP5?(s!2Vj>Zh;^6A0|_ISjC+5~I3YHZ0O)trtE
ztTQ_nb{4-dOAnFK*%#SeyW$Wm0+s5q-38?dsxc{~F?|I?ZFi|NT@imY@3~!LewF61
z=be$tm}RA2S$RueAUW5*BBtye0p;aW$>ciPY~=)zPBjtaGVqpcl`J9U0QIWkh~X2R
zRLTwdrb|pYy}HRmt@}@Rl3G1cO}RR8kQJ$R=0&8<-CkBr*TQ1rl~5IQ;+10WToLf^
z@GEfIKTAESkoWk{Yp$J#LP|{{bVFEmzVH$Cs722mkLcu!N=}{EOh;r|;@gx>9oh@4
zv$Er}_4MT^QM)UVCye{gJL6l&d}{mATig9KY5oG@&SeGj`!>_z0mpf(n3&!v7pk!J
z-TdC_Y+3t_F-+={BguGA>D;Q#&N^+Q4i=>6vcwH+K3_)v)(FxYRW(@jkg+#3biOA|
zS8?D#GbT%y(m|XvDUR&+@aZdaN|#sQ9!20R6?%R$mJT4jm&eG58955qhdL=5_#atQ
Bap(X5

literal 0
HcmV?d00001

diff --git a/pix/imagebox/spacer.gif b/pix/imagebox/spacer.gif
new file mode 100644
index 0000000000000000000000000000000000000000..68b18e31a53a03e862270cedd16ecb44d62d5588
GIT binary patch
literal 45
ucmZ?wbhEHbWMyDwXkcLY|NlP&1B2pE7Dgb&paUX6G7L;CE&VGa7_0%`wg}n)

literal 0
HcmV?d00001

diff --git a/scripts/formatDate.js b/scripts/formatDate.js
new file mode 100644
index 0000000..11c6197
--- /dev/null
+++ b/scripts/formatDate.js
@@ -0,0 +1,290 @@
+Array.prototype.exists = function (x) {
+    for (var i = 0; i < this.length; i++) {
+        if (this[i] == x) return true;
+    }
+    return false;
+}
+
+Date.prototype.formatDate = function (input,time) {
+    // formatDate :
+    // a PHP date like function, for formatting date strings
+    // See: http://www.php.net/date
+    //
+    // input : format string
+    // time : epoch time (seconds, and optional)
+    //
+    // if time is not passed, formatting is based on 
+    // the current "this" date object's set time.
+    //
+    // supported:
+    // a, A, B, d, D, F, g, G, h, H, i, j, l (lowercase L), L, 
+    // m, M, n, O, r, s, S, t, U, w, W, y, Y, z
+    //
+    // unsupported:
+    // I (capital i), T, Z    
+
+    var switches =    ["a", "A", "B", "d", "D", "F", "g", "G", "h", "H", 
+                       "i", "j", "l", "L", "m", "M", "n", "O", "r", "s", 
+                       "S", "t", "U", "w", "W", "y", "Y", "z"];
+    var daysLong =    ["Sunday", "Monday", "Tuesday", "Wednesday", 
+                       "Thursday", "Friday", "Saturday"];
+    var daysShort =   ["Sun", "Mon", "Tue", "Wed", 
+                       "Thu", "Fri", "Sat"];
+    var monthsShort = ["Jan", "Feb", "Mar", "Apr",
+                       "May", "Jun", "Jul", "Aug", "Sep",
+                       "Oct", "Nov", "Dec"];
+    var monthsLong =  ["January", "February", "March", "April",
+                       "May", "June", "July", "August", "September",
+                       "October", "November", "December"];
+    var daysSuffix = ["st", "nd", "rd", "th", "th", "th", "th", // 1st - 7th
+                      "th", "th", "th", "th", "th", "th", "th", // 8th - 14th
+                      "th", "th", "th", "th", "th", "th", "st", // 15th - 21st
+                      "nd", "rd", "th", "th", "th", "th", "th", // 22nd - 28th
+                      "th", "th", "st"];                        // 29th - 31st
+
+    function a() {
+        // Lowercase Ante meridiem and Post meridiem
+        return self.getHours() > 11? "pm" : "am";
+    }
+    function A() {
+        // Uppercase Ante meridiem and Post meridiem
+        return self.getHours() > 11? "PM" : "AM";
+    }
+
+    function B(){
+        // Swatch internet time. code simply grabbed from ppk,
+        // since I was feeling lazy:
+        // http://www.xs4all.nl/~ppk/js/beat.html
+        var off = (self.getTimezoneOffset() + 60)*60;
+        var theSeconds = (self.getHours() * 3600) + 
+                         (self.getMinutes() * 60) + 
+                          self.getSeconds() + off;
+        var beat = Math.floor(theSeconds/86.4);
+        if (beat > 1000) beat -= 1000;
+        if (beat < 0) beat += 1000;
+        if ((""+beat).length == 1) beat = "00"+beat;
+        if ((""+beat).length == 2) beat = "0"+beat;
+        return beat;
+    }
+    
+    function d() {
+        // Day of the month, 2 digits with leading zeros
+        return new String(self.getDate()).length == 1?
+        "0"+self.getDate() : self.getDate();
+    }
+    function D() {
+        // A textual representation of a day, three letters
+        return daysShort[self.getDay()];
+    }
+    function F() {
+        // A full textual representation of a month
+        return monthsLong[self.getMonth()];
+    }
+    function g() {
+        // 12-hour format of an hour without leading zeros
+        return self.getHours() > 12? self.getHours()-12 : self.getHours();
+    }
+    function G() {
+        // 24-hour format of an hour without leading zeros
+        return self.getHours();
+    }
+    function h() {
+        // 12-hour format of an hour with leading zeros
+        if (self.getHours() > 12) {
+          var s = new String(self.getHours()-12);
+          return s.length == 1?
+          "0"+ (self.getHours()-12) : self.getHours()-12;
+        } else { 
+          var s = new String(self.getHours());
+          return s.length == 1?
+          "0"+self.getHours() : self.getHours();
+        }  
+    }
+    function H() {
+        // 24-hour format of an hour with leading zeros
+        return new String(self.getHours()).length == 1?
+        "0"+self.getHours() : self.getHours();
+    }
+    function i() {
+        // Minutes with leading zeros
+        return new String(self.getMinutes()).length == 1? 
+        "0"+self.getMinutes() : self.getMinutes(); 
+    }
+    function j() {
+        // Day of the month without leading zeros
+        return self.getDate();
+    }    
+    function l() {
+        // A full textual representation of the day of the week
+        return daysLong[self.getDay()];
+    }
+    function L() {
+        // leap year or not. 1 if leap year, 0 if not.
+        // the logic should match iso's 8601 standard.
+        var y_ = Y();
+        if (         
+            (y_ % 4 == 0 && y_ % 100 != 0) ||
+            (y_ % 4 == 0 && y_ % 100 == 0 && y_ % 400 == 0)
+            ) {
+            return 1;
+        } else {
+            return 0;
+        }
+    }
+    function m() {
+        // Numeric representation of a month, with leading zeros
+        return self.getMonth() < 9?
+        "0"+(self.getMonth()+1) : 
+        self.getMonth()+1;
+    }
+    function M() {
+        // A short textual representation of a month, three letters
+        return monthsShort[self.getMonth()];
+    }
+    function n() {
+        // Numeric representation of a month, without leading zeros
+        return self.getMonth()+1;
+    }
+    function O() {
+        // Difference to Greenwich time (GMT) in hours
+        var os = Math.abs(self.getTimezoneOffset());
+        var h = ""+Math.floor(os/60);
+        var m = ""+(os%60);
+        h.length == 1? h = "0"+h:1;
+        m.length == 1? m = "0"+m:1;
+        return self.getTimezoneOffset() < 0 ? "+"+h+m : "-"+h+m;
+    }
+    function r() {
+        // RFC 822 formatted date
+        var r; // result
+        //  Thu    ,     21          Dec         2000
+        r = D() + ", " + j() + " " + M() + " " + Y() +
+        //        16     :    01     :    07          +0200
+            " " + H() + ":" + i() + ":" + s() + " " + O();
+        return r;
+    }
+    function S() {
+        // English ordinal suffix for the day of the month, 2 characters
+        return daysSuffix[self.getDate()-1];
+    }
+    function s() {
+        // Seconds, with leading zeros
+        return new String(self.getSeconds()).length == 1?
+        "0"+self.getSeconds() : self.getSeconds();
+    }
+    function t() {
+
+        // thanks to Matt Bannon for some much needed code-fixes here!
+        var daysinmonths = [null,31,28,31,30,31,30,31,31,30,31,30,31];
+        if (L()==1 && n()==2) return 29; // leap day
+        return daysinmonths[n()];
+    }
+    function U() {
+        // Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)
+        return Math.round(self.getTime()/1000);
+    }
+    function W() {
+        // Weeknumber, as per ISO specification:
+        // http://www.cl.cam.ac.uk/~mgk25/iso-time.html
+        
+        // if the day is three days before newyears eve,
+        // there's a chance it's "week 1" of next year.
+        // here we check for that.
+        var beforeNY = 364+L() - z();
+        var afterNY  = z();
+        var weekday = w()!=0?w()-1:6; // makes sunday (0), into 6.
+        if (beforeNY <= 2 && weekday <= 2-beforeNY) {
+            return 1;
+        }
+        // similarly, if the day is within threedays of newyears
+        // there's a chance it belongs in the old year.
+        var ny = new Date("January 1 " + Y() + " 00:00:00");
+        var nyDay = ny.getDay()!=0?ny.getDay()-1:6;
+        if (
+            (afterNY <= 2) && 
+            (nyDay >=4)  && 
+            (afterNY >= (6-nyDay))
+            ) {
+            // Since I'm not sure we can just always return 53,
+            // i call the function here again, using the last day
+            // of the previous year, as the date, and then just
+            // return that week.
+            var prevNY = new Date("December 31 " + (Y()-1) + " 00:00:00");
+            return prevNY.formatDate("W");
+        }
+        
+        // week 1, is the week that has the first thursday in it.
+        // note that this value is not zero index.
+        if (nyDay <= 3) {
+            // first day of the year fell on a thursday, or earlier.
+            return 1 + Math.floor( ( z() + nyDay ) / 7 );
+        } else {
+            // first day of the year fell on a friday, or later.
+            return 1 + Math.floor( ( z() - ( 7 - nyDay ) ) / 7 );
+        }
+    }
+    function w() {
+        // Numeric representation of the day of the week
+        return self.getDay();
+    }
+    
+    function Y() {
+        // A full numeric representation of a year, 4 digits
+
+        // we first check, if getFullYear is supported. if it
+        // is, we just use that. ppks code is nice, but wont
+        // work with dates outside 1900-2038, or something like that
+        if (self.getFullYear) {
+            var newDate = new Date("January 1 2001 00:00:00 +0000");
+            var x = newDate .getFullYear();
+            if (x == 2001) {              
+                // i trust the method now
+                return self.getFullYear();
+            }
+        }
+        // else, do this:
+        // codes thanks to ppk:
+        // http://www.xs4all.nl/~ppk/js/introdate.html
+        var x = self.getYear();
+        var y = x % 100;
+        y += (y < 38) ? 2000 : 1900;
+        return y;
+    }
+    function y() {
+        // A two-digit representation of a year
+        var y = Y()+"";
+        return y.substring(y.length-2,y.length);
+    }
+    function z() {
+        // The day of the year, zero indexed! 0 through 366
+        var t = new Date("January 1 " + Y() + " 00:00:00");
+        var diff = self.getTime() - t.getTime();
+        return Math.floor(diff/1000/60/60/24);
+    }
+        
+    var self = this;
+    if (time) {
+        // save time
+        var prevTime = self.getTime();
+        self.setTime(time);
+    }
+    
+    var ia = input.split("");
+    var ij = 0;
+    while (ia[ij]) {
+        if (ia[ij] == "\\") {
+            // this is our way of allowing users to escape stuff
+            ia.splice(ij,1);
+        } else {
+            if (switches.exists(ia[ij])) {
+                ia[ij] = eval(ia[ij] + "()");
+            }
+        }
+        ij++;
+    }
+    // reset time, back to what it was
+    if (prevTime) {
+        self.setTime(prevTime);
+    }
+    return ia.join("");
+}
diff --git a/scripts/gui.js b/scripts/gui.js
index 3ec99e0..e4a9a26 100644
--- a/scripts/gui.js
+++ b/scripts/gui.js
@@ -1,5 +1,105 @@
 
+/**
+ * Inplace tag editing
+ */
+function tagedit() {
+    var txt  = document.createElement('textarea');
+    txt.id   = 'tagedit_editor';
+    txt.name = 'marker';
+    txt.className = 'ipe';
+    $(txt).load('ajax.php',{loadtags: 'plain', dn: DN});
+    $(txt).Autocomplete({
+        source: 'ajax.php',
+        delay: 300,
+        helperClass: 'autocompleter',
+        selectClass: 'autocompleterSelect',
+        inputWidth: true,
+        minchars: 1,
+        multiple: true,
+        multipleSeperator: ','
+    });
 
+    var save       = new Image();
+    save.src       = 'pix/accept.png';
+    save.id        = 'tagedit_save';
+    save.className = 'click';
+    $(save).click(function(){
+        $('#taglist').load('ajax.php',{settags: $('#tagedit_editor').val(), dn: DN});
+        $('#tagedit_save').remove();
+        $('#tagedit_cancel').remove();
+        $('#tagedit_start').show();
+    });
+
+    var canc       = new Image();
+    canc.src       = 'pix/cancel.png';
+    canc.id        = 'tagedit_cancel';
+    canc.className = 'click';
+    $(canc).click(function(){
+        $('#taglist').load('ajax.php',{loadtags: 'html', dn: DN});
+        $('#tagedit_save').remove();
+        $('#tagedit_cancel').remove();
+        $('#tagedit_start').show();
+    });
+
+    $('#tagedit_start').hide();
+    $('#taglist').empty().prepend(txt);
+    $('#tagedit').append(save);
+    $('#tagedit').append(canc);
+    $('#tagedit_editor').focus();
+}
+
+/**
+ * Inplace note adding
+ */
+function noteedit(type){
+    var txt  = document.createElement('textarea');
+    txt.id   = 'noteedit_editor';
+    txt.className = 'ipe';
+
+    // prepare text
+    var text = '';
+    if(type=='call'){
+        text += '**Call** ';
+    }else if(type=='mail'){
+        text += '**Mail** ';
+    }else if(type=='todo'){
+        text += '**Todo** ';
+    }else if(type=='note'){
+        text += '**Note** ';
+    }
+    var dt = new Date();
+    text += '//'+dt.formatDate('j. M y H:i')+' '+USER+'//: ';
+    $(txt).val(text);
+
+    var save       = new Image();
+    save.src       = 'pix/accept.png';
+    save.id        = 'noteedit_save';
+    save.className = 'click';
+    $(save).click(function(){
+        $('#notes').load('ajax.php',{addnote: $('#noteedit_editor').val(), dn: DN});
+        $('#noteedit_editor').remove();
+        $('#noteedit_save').remove();
+        $('#noteedit_cancel').remove();
+        $('#noteedit .ed').show()
+    });
+
+    var canc       = new Image();
+    canc.src       = 'pix/cancel.png';
+    canc.id        = 'noteedit_cancel';
+    canc.className = 'click';
+    $(canc).click(function(){
+        $('#noteedit_editor').remove();
+        $('#noteedit_save').remove();
+        $('#noteedit_cancel').remove();
+        $('#noteedit .ed').show();
+    });
+
+    $('#notes').prepend(txt);
+    $('#noteedit .ed').hide();
+    $('#noteedit').append(save);
+    $('#noteedit').append(canc);
+    $('#noteedit_editor').focus();
+}
 
 
 
@@ -8,8 +108,8 @@
  */
 $(document).ready(function() {
 
-  // autocompletion
-  $('#taglookup').Autocomplete({
+    // autocompletion
+    $('#taglookup').Autocomplete({
         source: 'ajax.php',
         delay: 300,
         helperClass: 'autocompleter',
@@ -18,8 +118,8 @@ $(document).ready(function() {
         minchars: 1,
         //multiple: true,
         //multipleSeperator: ','
-  });
-  $('#tageditlookup').Autocomplete({
+    });
+    $('#tageditlookup').Autocomplete({
         source: 'ajax.php',
         delay: 300,
         helperClass: 'autocompleter',
@@ -28,23 +128,65 @@ $(document).ready(function() {
         minchars: 1,
         multiple: true,
         multipleSeperator: ','
-  });
-  // autocompletion
-  $('input.ac').Autocomplete({
+    });
+    // autocompletion
+    $('input.ac').Autocomplete({
         source: 'ajax.php',
         delay: 300,
         helperClass: 'autocompleter',
         selectClass: 'autocompleterSelect',
         inputWidth: true,
         minchars: 1,
-  });
+    });
 
-  $.ImageBox.init({
+    // nice images
+    $.ImageBox.init({
         loaderSRC: 'pix/imagebox/loading.gif',
         closeHTML: '<img src="pix/imagebox/close.jpg" border="0" />'
-  });
+    });
+
+    // tag editing
+    if($('#tagedit')){
+        var img       = new Image();
+        img.src       = 'pix/tag_blue_edit.png';
+        img.className = 'click';
+        img.id        = 'tagedit_start';
+        $('#tagedit').empty().after(img);
+        $(img).click(tagedit)
+    }
+
+    // note editing
+    if($('#noteedit')){
+        var img;
+
+        img           = new Image();
+        img.src       = 'pix/note.png';
+        img.className = 'click ed';
+        $(img).click(function(){noteedit('note');});
+        $('#noteedit').append(img);
+
+        img           = new Image();
+        img.src       = 'pix/arrow_right.png';
+        img.className = 'click ed';
+        $(img).click(function(){noteedit('todo');});
+        $('#noteedit').append(img);
+
+        img           = new Image();
+        img.src       = 'pix/email.png';
+        img.className = 'click ed';
+        $(img).click(function(){noteedit('mail');});
+        $('#noteedit').append(img);
+
+        img           = new Image();
+        img.src       = 'pix/phone.png';
+        img.className = 'click ed';
+        $(img).click(function(){noteedit('call');});
+        $('#noteedit').append(img);
+    }
+
+
+    // set focus
+    if($('#searchfield')) $('#searchfield').focus();
+    if($('#firstfield')) $('#firstfield').focus();
 
-  // set focus
-  if($('#searchfield')) $('#searchfield').focus();
-  if($('#firstfield')) $('#firstfield').focus();
 });
diff --git a/styles/design.css b/styles/design.css
new file mode 100644
index 0000000..5a4d9f2
--- /dev/null
+++ b/styles/design.css
@@ -0,0 +1,140 @@
+/* some general setups */
+
+* { padding: 0; margin: 0; }
+
+body {
+    font: 80% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
+    background-color: #fff;
+    color: #333;
+}
+
+img {
+    border: 0;
+}
+
+div {
+    margin: 0;
+    padding: 0;
+}
+
+/* genral link setup */
+
+a:link,
+a:visited {
+    text-decoration: none;
+    color: #06c;
+}
+
+a:hover,
+a:active {
+    text-decoration: underline;
+    color: #06c;
+}
+
+.click {
+    cursor: pointer;
+}
+
+/* logo */
+
+div#titlerow div.logo a {font-size:25px; font-weight:bolder}
+div#titlerow div.logo span {font-size:16px; font-weight:bold}
+
+/* photo */
+
+img.photo {
+    border: 1px solid #999;
+    padding: 0.5em;
+}
+
+/* forms */
+
+input, select, textarea {
+    border: 1px solid #999;
+    background-color: #F5F5F5;
+}
+
+input:focus, select:focus, textarea:focus {
+    border: 1px solid #06c;
+}
+
+/* editing and other link icons */
+
+a.ed_help {
+    background: transparent url(../pix/help.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_orgs {
+    background: transparent url(../pix/book_open.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_new {
+    background: transparent url(../pix/page_add.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_show {
+    background: transparent url(../pix/page_red.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_edit {
+    background: transparent url(../pix/page_edit.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_copy {
+    background: transparent url(../pix/page_copy.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_delete {
+    background: transparent url(../pix/page_delete.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_vcfexport {
+    background: transparent url(../pix/vcard.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_csvexport {
+    background: transparent url(../pix/page_white_excel.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_vcfimport {
+    background: transparent url(../pix/page_in.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 16px;
+}
+
+a.ed_login {
+    background: transparent url(../pix/key.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 18px;
+}
+
+a.ed_logout {
+    background: transparent url(../pix/key_go.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 18px;
+}
+
+a.tag {
+    background: transparent url(../pix/tag_blue.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 18px;
+    white-space: nowrap;
+}
+
+
+/* TagCloud */
+div#tagcloud {text-align: justify}
+div#tagcloud a {white-space: nowrap;}
+a.cloud_0 {font-size: 90%; }
+a.cloud_1 {font-size: 110%; }
+a.cloud_2 {font-size: 140%; }
+a.cloud_3 {font-size: 150%; }
+a.cloud_4 {font-size: 160%; }
+a.cloud_5 {font-size: 180%; }
+a.cloud_6 {font-size: 200%; }
+
diff --git a/styles/layout.css b/styles/layout.css
new file mode 100644
index 0000000..dcffc41
--- /dev/null
+++ b/styles/layout.css
@@ -0,0 +1,209 @@
+/* body */
+body {
+    padding: 0.5em;
+}
+
+/* top row */
+
+div#titlerow {
+    overflow: hidden;
+    height: 3em;
+    margin-bottom: 1em;
+}
+
+div#titlerow div.logo {
+    float: left;
+    margin-left: 2em;
+}
+
+div#titlerow div.search {
+    float: right;
+    margin-top: 1em;
+}
+
+div#titlerow div.search form {
+    float: left;
+}
+
+div#titlerow div.search form.tags {
+    margin-left: 1em;
+}
+
+
+/* Editing buttons */
+
+div#toolbar {
+    overflow: hidden;
+    padding-left: 2em;
+}
+
+div#toolbar ul li {
+    list-style-type: none;
+    float: left;
+    border-left: 1px solid #999;
+    border-top: 1px solid #999;
+    border-right: 1px solid #999;
+    margin: 0 0.2em 0 0.2em;
+    text-align: center;
+    -moz-border-radius: 50% 50% 0 0;
+    padding: 0.2em 0.4em 0.1em 0.4em;
+}
+
+div#toolbar ul li.sep {
+    border: none;
+    width: 1em;
+}
+
+/* A-Z filters */
+
+div#filterrow {
+    float: left;
+    overflow: hidden;
+    clear: left;
+    width: 2em;
+}
+
+div#filterrow ul li {
+    list-style-type: none;
+    border-left: 1px solid #999;
+    border-top: 1px solid #999;
+    border-bottom: 1px solid #999;
+    margin: 0.2em 0 0.2em 0.6em;
+    text-align: center;
+    -moz-border-radius: 50% 0 0 50%;
+    margin-right: -1px;
+}
+
+/* content */
+
+div#content {
+    margin-left: 2em;
+    border: 1px solid #999;
+    padding: 1em;
+    height: auto !important;
+    min-height: 45em;
+    height: 45em;
+}
+
+/* list of contacts or organizations */
+table.list tr:hover {
+    background-color: #DCDCDC !important;
+}
+
+table.list tr.even {
+    background-color: #F5F5F5;
+}
+
+table.list td {
+    padding: 0.1em;
+}
+
+/* contact view */
+div#show table.show table {
+    margin-left: 2em;
+}
+
+div#show table.show table th {
+    font-weight: normal;
+    text-align: right;
+    padding-right: 1em;
+    width: 20%;
+}
+
+div#show table th,
+div#show table td {
+    vertical-align: top;
+}
+
+div#show h3 {
+    margin: 1em 0 0.6em 0;
+}
+
+/* contact edit */
+div#edit table th,
+div#edit table td {
+    vertical-align: top;
+    padding: 0.2em;
+}
+
+div#edit table th {
+    font-weight: normal;
+    text-align: right;
+    padding-right: 1em;
+    width: 35%;
+}
+
+div#edit textarea.input,
+div#edit input.input {
+    width: 95%;
+}
+
+div#edit span.hint {
+    font-size: 75%;
+}
+
+/* tagcloud */
+div#tagcloud {
+    margin: 2em;
+}
+
+/* login form */
+
+form#login {
+    width: 30em;
+    margin: 7em auto;
+}
+
+form#login fieldset {
+    padding: 1em 2em;
+    border: 1px solid #999;
+}
+
+form#login legend {
+    background: transparent url(../pix/key.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 20px;
+}
+
+form#login div.msg {
+    font-weight: bold;
+    margin-bottom: 1em;
+}
+
+form#login div.row {
+    margin: 0.6em;
+}
+
+form#login input.input {
+    width: 12em;
+}
+
+form#login input.button {
+    display: block;
+    margin: 1em auto;
+}
+
+/* import */
+
+form#import {
+    width: 30em;
+    margin: 2em auto;
+}
+
+form#import fieldset {
+    padding: 1em 2em;
+    border: 1px solid #999;
+}
+
+form#import legend {
+    background: transparent url(../pix/page_in.png) 0px 1px no-repeat;
+    padding: 1px 0px 1px 20px;
+}
+
+/* footer */
+div#footrow {
+    margin-left: 2em;
+}
+
+div#footrow div.login{
+    float: right;
+}
diff --git a/styles/scripted.css b/styles/scripted.css
new file mode 100644
index 0000000..d387cfb
--- /dev/null
+++ b/styles/scripted.css
@@ -0,0 +1,61 @@
+
+/**
+ * Autocompletion
+ */
+.autocompleter {
+    background-color: #fff;
+    border: 1px solid #999;
+    font-size: 80%;
+}
+
+.autocompleterSelect {
+    background-color: #06c;
+    color: #fff;
+}
+
+/**
+ * ImageBox effects
+ */
+
+#ImageBoxOverlay {
+    background-color: #000;
+}
+#ImageBoxCaption {
+    background-color: #F4F4EC;
+}
+#ImageBoxContainer {
+    width: 250px;
+    height: 250px;
+    background-color: #F4F4EC;
+}
+#ImageBoxCaptionText {
+    font-weight: bold;
+    padding-bottom: 5px;
+    font-size: 13px;
+}
+#ImageBoxCaptionImages {
+    margin: 0;
+}
+#ImageBoxNextImage {
+    background-image: url(pix/imagebox/spacer.gif);
+    background-color: transparent;
+}
+#ImageBoxPrevImage {
+    background-image: url(pix/imagebox/spacer.gif);
+    background-color: transparent;
+}
+#ImageBoxNextImage:hover {
+    background-image: url(pix/imagebox/next_image.jpg);
+    background-repeat:  no-repeat;
+    background-position: right top;
+}
+#ImageBoxPrevImage:hover {
+    background-image: url(pix/imagebox/prev_image.jpg);
+    background-repeat:  no-repeat;
+    background-position: left bottom;
+}
+
+textarea.ipe {
+    width: 95%;
+    height: 5em;
+}
diff --git a/template.php b/template.php
index 5c74ed3..c5e850e 100644
--- a/template.php
+++ b/template.php
@@ -152,17 +152,7 @@ function tpl_orgs(){
   global $FIELDS;
 
   $orgs = array();
-
-  $sr = ldap_list($LDAP_CON,$conf['publicbook'],"ObjectClass=inetOrgPerson",array($FIELDS['organization']));
-  $result1 = ldap_get_binentries($LDAP_CON, $sr);
-  //check users private addressbook
-  if(!empty($_SESSION['ldapab']['binddn'])){
-    $sr = @ldap_list($LDAP_CON,
-                    $conf['privatebook'].','.$_SESSION['ldapab']['binddn'],
-                    "ObjectClass=inetOrgPerson",array($FIELDS['organization']));
-    $result2 = ldap_get_binentries($LDAP_CON, $sr);
-  }
-  $result = array_merge((array)$result1,(array)$result2);
+  $result = ldap_queryabooks("ObjectClass=inetOrgPerson",array($FIELDS['organization']));
 
   if(count($result)){
     foreach ($result as $entry){
diff --git a/templates/blank.gif b/templates/blank.gif
deleted file mode 100644
index 9935f82104a336a22da8f8bac84db0749a4bd27b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 42
pcmZ?wbhEHbWMp7uXkY+=|Ns9h{$ycf01D`U_#hbuCPp6yYXG?z2LJ#7

diff --git a/templates/entry_edit.tpl b/templates/entry_edit.tpl
index 8dad65b..13e87eb 100644
--- a/templates/entry_edit.tpl
+++ b/templates/entry_edit.tpl
@@ -1,5 +1,7 @@
 {include file="header.tpl"}
 
+<div id="edit">
+
 <h1>
   {if $entry.type != ''}
   <img src="pix/{$entry.type|h}.png" border="0" width="22" height="22" align="middle" title="{$entry.type|h}">
@@ -16,22 +18,22 @@
 <!--  -->
   <tr>
     <td valign="top" width="50%" align="center">
-      <table>
+      <table width="100%">
 {* always required ... if $fields.name *}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.name}:</td>
+          <th>{$lang.name}:</th>
           <td><input type="text" class="input" name="entry[name]" value="{$entry.name|h}" id="firstfield"></td>
         </tr>
 {* /if *}
 {if $fields.givenname}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.givenname}:</td>
+          <th>{$lang.givenname}:</th>
           <td><input type="text" class="input" name="entry[givenname]" value="{$entry.givenname|h}"></td>
         </tr>
 {/if}
 {if $fields.title}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.title}:</td>
+          <th>{$lang.title}:</th>
           <td><input type="text" class="input" name="entry[title]" value="{$entry.title|h}"></td>
         </tr>
 {/if}
@@ -43,18 +45,18 @@
   </tr>
 
   <tr>
-    <td colspan="2"><hr /></td>
+    <td colspan="2">&nbsp;</td>
   </tr>
 
   <tr>
     <td valign="top" width="50%" align="center">
-      <table>
+      <table width="100%">
         <tr>
-          <td colspan="2"><b>{$lang.business}</b></td>
+          <td colspan="2"><h3>{$lang.business}</h3></td>
         </tr>
 {if $fields.organization}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.organization}:</td>
+          <th>{$lang.organization}:</th>
           <td>
             <input type="text" class="input ac" name="entry[organization]" value="{$entry.organization|h}">
           </td>
@@ -62,31 +64,31 @@
 {/if}
 {if $fields.office}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.office}:</td>
+          <th>{$lang.office}:</th>
           <td><input type="text" class="input" name="entry[office]" value="{$entry.office|h}"></td>
         </tr>
 {/if}
 {if $fields.street}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.street}:</td>
+          <th>{$lang.street}:</th>
           <td><input type="text" class="input ac" name="entry[street]" value="{$entry.street|h}"></td>
         </tr>
 {/if}
 {if $fields.zip}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.zip}:</td>
+          <th>{$lang.zip}:</th>
           <td><input type="text" class="input" name="entry[zip]" value="{$entry.zip|h}"></td>
         </tr>
 {/if}
 {if $fields.location}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.location}:</td>
+          <th>{$lang.location}:</th>
           <td><input type="text" class="input ac" name="entry[location]" value="{$entry.location|h}"></td>
         </tr>
 {/if}
 {if $fields.state}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.state}:</td>
+          <th>{$lang.state}:</th>
           <td><input type="text" class="input ac" name="entry[state]" value="{$entry.state|h}"></td>
         </tr>
 {/if}
@@ -94,37 +96,37 @@
         <tr>
           <td align="right" valign="top">{$lang.country}:</td>
           <td>
-            <input type="text" class="input ac" name="entry[country]" value="{$entry.country|h}"><br>
+            <input type="text" class="input ac" name="entry[country]" value="{$entry.country|h}"><br />
           </td>
         </tr>
 {/if}
 {if $fields.phone}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.phone}:</td>
+          <th>{$lang.phone}:</th>
           <td><input type="text" class="input" name="entry[phone]" value="{$entry.phone|h}"></td>
         </tr>
 {/if}
 {if $fields.switchboard}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.switchboard}:</td>
+          <th>{$lang.switchboard}:</th>
           <td><input type="text" class="input" name="entry[switchboard]" value="{$entry.switchboard|h}"></td>
         </tr>
 {/if}
 {if $fields.fax}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.fax}:</td>
+          <th>{$lang.fax}:</th>
           <td><input type="text" class="input" name="entry[fax]" value="{$entry.fax|h}"></td>
         </tr>
 {/if}
 {if $fields.pager}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.pager}:</td>
+          <th>{$lang.pager}:</th>
           <td><input type="text" class="input" name="entry[pager]" value="{$entry.pager|h}"></td>
         </tr>
 {/if}
 {if $fields.manager}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.manager}:</td>
+          <th>{$lang.manager}:</th>
           <td>
             <select name="entry[manager]" class="input">
               <option value="">--- {$lang.select} ---</option>
@@ -151,37 +153,31 @@
 
     <td valign="top" width="50%" align="center">
 
-      <table>
+      <table width="100%">
         <tr>
-          <td colspan="2"><b>{$lang.private}</b></td>
+          <td colspan="2"><h3>{$lang.private}</b></h3>
         </tr>
 {if $fields.homestreet}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.homestreet}:</td>
+          <th>{$lang.homestreet}:</th>
           <td><textarea name="entry[homestreet]" class="input" rows="2" cols="30">{$entry.homestreet|h}</textarea></td>
         </tr>
 {/if}
 {if $fields.homephone}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.homephone}:</td>
+          <th>{$lang.homephone}:</th>
           <td><input type="text" class="input" name="entry[homephone]" value="{$entry.homephone|h}"></td>
         </tr>
 {/if}
 {if $fields.mobile}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.mobile}:</td>
+          <th>{$lang.mobile}:</th>
           <td><input type="text" class="input" name="entry[mobile]" value="{$entry.mobile|h}"></td>
         </tr>
 {/if}
-{if $fields.url}
-        <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.url}:</td>
-          <td><input type="text" class="input ac" name="entry[url]" value="{$entry.url|h}"></td>
-        </tr>
-{/if}
 {if $fields.photo}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.photo}:<br /><span class="hint">({$lang.msg_jpegonly})</span></td>
+          <th>{$lang.photo}:<br /><span class="hint">({$lang.msg_jpegonly})</span></th>
           <td>{if $entry.photo}
                 <input type="checkbox" class="radio" name="delphoto" id="delphoto" value="1">
                 <label for="delphoto">{$lang.delphoto}</label>
@@ -193,39 +189,45 @@
 {/if}
 {if $fields.birthday}
         <tr>
-          <td align="right" valign="top">{$lang.birthday}:<br><span class="hint">({$lang.msg_dateformat})</span></td>
+          <td align="right" valign="top">{$lang.birthday}:<br /><span class="hint">({$lang.msg_dateformat})</span></td>
           <td><input type="text" class="input" name="entry[birthday]" value="{$entry.birthday|h}" maxlength="10"></td>
         </tr>
 {/if}
 {if $fields.anniversary}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.anniversary}:<br><span class="hint">({$lang.msg_dateformat})</span></td>
+          <th>{$lang.anniversary}:<br /><span class="hint">({$lang.msg_dateformat})</span></th>
           <td><input type="text" class="input" name="entry[anniversary]" value="{$entry.anniversary|h}" maxlength="10"></td>
         </tr>
 {/if}
 {if $fields.spouse}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.spouse}:</td>
+          <th>{$lang.spouse}:</th>
           <td><input type="text" class="input" name="entry[spouse]" value="{$entry.spouse|h}"></td>
         </tr>
 {/if}
 
         <tr>
-          <td colspan="2"><b>{$lang.communication}</b></td>
+          <td colspan="2"><h3>{$lang.communication}</h3></td>
+        </tr>
+{if $fields.url}
+        <tr>
+          <th>{$lang.url}:</th>
+          <td><input type="text" class="input ac" name="entry[url]" value="{$entry.url|h}"></td>
         </tr>
+{/if}
 {if $fields._mail}
         {foreach from=$entry.mail|smarty:nodefaults item=mail}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.mail} {counter}:</td>
+          <th>{$lang.mail} {counter}:</th>
           <td><input type="text" class="input" name="entry[mail][]" value="{$mail}"></td>
         </tr>
         {/foreach}
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.mail} {counter}:</td>
+          <th>{$lang.mail} {counter}:</th>
           <td><input type="text" class="input" name="entry[mail][]" value=""></td>
         </tr>
         <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.mail} {counter}:</td>
+          <th>{$lang.mail} {counter}:</th>
           <td><input type="text" class="input" name="entry[mail][]" value=""></td>
         </tr>
 {/if}
@@ -247,23 +249,16 @@
   </tr>
 
   <tr>
-    <td colspan="2"><hr /></td>
+    <td colspan="2">&nbsp;</td>
+  </tr>
+
+  <tr>
+    <td colspan="2"><h3>{$lang.extended}</h3></td>
   </tr>
 
   <tr>
     <td width="50%" valign="top" align="center">
-      <table>
-        <tr>
-          <td colspan="2"><b>{$lang.extended}</b></td>
-        </tr>
-{if $fields._marker}
-        <tr>
-          <td align="right" valign="top" nowrap="nowrap">{$lang.marker}:<br><span class="hint">({$lang.msg_tagsep})</span></td>
-          <td>
-            <textarea class="input" name="entry[markers]" id="tageditlookup">{$entry.markers|h}</textarea>
-          </td>
-        </tr>
-{/if}
+      <table width="100%">
 {if $fields.note}
         <tr>
           <td align="right" valign="top">{$lang.note}:</td>
@@ -274,13 +269,21 @@
       </table>
     </td>
     <td width="50%" valign="top" align="center">
-      <table>
+      <table width="100%">
+{if $fields._marker}
+        <tr>
+          <th>{$lang.marker}:<br /><span class="hint">({$lang.msg_tagsep})</span></th>
+          <td>
+            <textarea class="input" name="entry[markers]" id="tageditlookup">{$entry.markers|h}</textarea>
+          </td>
+        </tr>
+{/if}
 {if $fields.certificate}
         <tr>
           <td align="right" valign="top">{$lang.certificate}:</td>
           <td>
             <textarea name="entry[certificate]" class="input" rows="6" cols="28" onClick="this.form.elements['entry[certificate]'].select();">{$entry.certificate|h}</textarea>
-            <br><input type="button" name="clearCert" value="Clear" onClick="if (confirm('Are you sure?')) this.form.elements['entry[certificate]'].value='';">
+            <br /><input type="button" name="clearCert" value="Clear" onClick="if (confirm('Are you sure?')) this.form.elements['entry[certificate]'].value='';">
           </td>
         </tr>
 {/if}
@@ -294,7 +297,7 @@
         <tr>
           <td align="right" valign="top">{$lang.timezone}:</td>
           <td>
-            <input type="text" class="inputbr" name="entry[timezone]" value="{$entry.timezone|h}"><br>
+            <input type="text" class="inputbr" name="entry[timezone]" value="{$entry.timezone|h}"><br />
           </td>
         </tr>
 {/if}
@@ -305,10 +308,10 @@
   {if $entry.dn == ''}
   <tr>
     <td colspan="2" align="center">
-      {$lang.msg_addto}<br>
+      {$lang.msg_addto}<br />
       <table><tr><td>
       <input type="radio" name="type" value="public" id="typepublic" class="radio" checked="checked">
-      <label for="typepublic"><img src="pix/public.png" border="0" width="16" height="16" align="middle">{$lang.publicbook}</label><br>
+      <label for="typepublic"><img src="pix/public.png" border="0" width="16" height="16" align="middle">{$lang.publicbook}</label><br />
       <input type="radio" name="type" value="private" id="typeprivate" class="radio">
       <label for="typeprivate"><img src="pix/private.png" border="0" width="16" height="16" align="middle">{$lang.privatebook}</label>
       </td></tr></table>
@@ -317,10 +320,12 @@
   {/if}
 
   <tr>
-    <td colspan="2" align="center"><br><input type="submit" class="input" value="{$lang.submit}"></td>
+    <td colspan="2" align="center"><br /><input type="submit" class="button" value="{$lang.submit}"></td>
   </tr>
 </table>
 
 </form>
 
+</div>
+
 {include file="footer.tpl"}
diff --git a/templates/entry_show.tpl b/templates/entry_show.tpl
index fa794bd..e94d2db 100644
--- a/templates/entry_show.tpl
+++ b/templates/entry_show.tpl
@@ -1,33 +1,38 @@
 {include file="header.tpl"}
 
+<div id="show">
+
 {if $entry.photo != ''}
-  <a href="img.php?dn={$entry.dn|escape:url}&amp;.jpg" rel="imagebox" title="{$entry.givenname|h} {$entry.name|h}"><img src="img.php?dn={$entry.dn|escape:url}" align="right" class="photo" width="130" /></a>
+    <a href="img.php?dn={$entry.dn|escape:url}&amp;.jpg" rel="imagebox"
+       title="{$entry.givenname|h} {$entry.name|h}"><img src="img.php?dn={$entry.dn|escape:url}"
+       align="right" class="photo" width="130" /></a>
 {/if}
 <h1>
-  <img src="pix/{$entry.type|h}.png" border="0" width="22" height="22" align="middle" title="{$entry.type|h}" />
-  {$entry.givenname|h} {$entry.name|h}
+    <img src="pix/{$entry.type|h}.png" border="0" width="22" height="22"
+    align="middle" title="{$entry.type|h}" alt="" />
+    {$entry.givenname|h} {$entry.name|h}
 </h1>
 
-<table width="100%" {if $user}ondblclick="window.location.href='entry.php?dn={$entry.dn|escape:url}&mode=edit'"{/if|h}>
+<table width="100%" class="show"
+       {if $user}ondblclick="window.location.href='entry.php?dn={$entry.dn|escape:url}&amp;mode=edit'"{/if}>
   <tr>
     <td valign="top" width="50%">
-      <b>{$lang.business}</b>
-      <dl><dd>
-        <table>
+      <h3>{$lang.business}</h3>
+        <table width="100%">
           <tr>
             <td colspan="2">
-              {$entry.title|h} {$entry.givenname|h} {$entry.name|h}<br>
+              {$entry.title|h} {$entry.givenname|h} {$entry.name|h}<br />
 {if $entry.organization}
-              <a href="index.php?org={$entry.organization|escape:url}">{$entry.organization|h}</a><br>
+              <a href="index.php?org={$entry.organization|escape:url}">{$entry.organization|h}</a><br />
 {/if}
 {if $entry.office}
-              {$entry.office|h}<br>
+              {$entry.office|h}<br />
 {/if}
 {if $entry.street}
-              {$entry.street|h}<br>
+              {$entry.street|h}<br />
 {/if}
 {if $entry.location}
-              {$entry.zip} {$entry.location|h}<br>
+              {$entry.zip} {$entry.location|h}<br />
 {/if}
 {if $entry.state}
               {$entry.state|h}
@@ -35,196 +40,181 @@
 {if $entry.country}
               {$entry.country|h}
 {/if}
-              <br><br>
+              <br /><br />
             </td>
           </tr>
 {if $entry.phone}
           <tr>
-            <td align="right">{$lang.phone}:</td>
+            <th>{$lang.phone}:</th>
             <td>{$entry.phone|h}</td>
           </tr>
 {/if}
 {if $entry.switchboard}
           <tr>
-            <td align="right">{$lang.switchboard}:</td>
+            <th>{$lang.switchboard}:</th>
             <td>{$entry.switchboard|h}</td>
           </tr>
 {/if}
 {if $entry.fax}
           <tr>
-            <td align="right">{$lang.fax}:</td>
+            <th>{$lang.fax}:</th>
             <td>{$entry.fax|h}</td>
           </tr>
 {/if}
 {if $entry.pager}
           <tr>
-            <td align="right">{$lang.pager}:</td>
+            <th>{$lang.pager}:</th>
             <td>{$entry.pager|h}</td>
           </tr>
 {/if}
 {if $managername}
           <tr>
-            <td align="right">{$lang.manager}:</td>
+            <th>{$lang.manager}:</th>
             <td>{$managername}</td>
           </tr>
 {/if}
 {if $entry.position}
           <tr>
-            <td align="right">{$lang.position}:</td>
+            <th>{$lang.position}:</th>
             <td>{$entry.position|h}</td>
           </tr>
 {/if}
 {if $entry.department}
           <tr>
-            <td align="right">{$lang.department}:</td>
+            <th>{$lang.department}:</th>
             <td>{$entry.department|h}</td>
           </tr>
 {/if}
 
         </table>
-      </dd></dl>
-
 
     </td>
 
 
     <td valign="top" width="50%">
-      <b>{$lang.private}</b>
-      <dl><dd>
-        <table>
+      <h3>{$lang.private}</h3>
+        <table width="100%">
           <tr>
             <td colspan="2">
-              {$entry.title} {$entry.givenname} {$entry.name|h}<br>
+              {$entry.title|h} {$entry.givenname|h} {$entry.name|h}<br />
 {if $entry.homestreet}
-              {$entry.homestreet|h|nl2br}<br><br>
+              {$entry.homestreet|h|nl2br}<br /><br />
 {/if}
             </td>
           </tr>
 {if $entry.homephone}
           <tr>
-            <td align="right">{$lang.homephone}:</td>
+            <th>{$lang.homephone}:</th>
             <td>{$entry.homephone|h}</td>
           </tr>
 {/if}
 {if $entry.mobile}
           <tr>
-            <td align="right">{$lang.mobile}:</td>
+            <th>{$lang.mobile}:</th>
             <td>{$entry.mobile|h}</td>
           </tr>
 {/if}
-{if $entry.url}
-          <tr>
-            <td align="right">{$lang.url}:</td>
-            <td><a href="{$entry.url}" target="_blank">{$entry.url|h}</a></td>
-          </tr>
-{/if}
 {if $entry.birthday}
           <tr>
-            <td align="right">{$lang.birthday}:</td>
+            <th>{$lang.birthday}:</th>
             <td>{$entry.birthday|h}</td>
           </tr>
 {/if}
 {if $entry.anniversary}
           <tr>
-            <td align="right">{$lang.anniversary}:</td>
+            <th>{$lang.anniversary}:</th>
             <td>{$entry.anniversary|date_format:$conf.dateformat|h}</td>
           </tr>
 {/if}
 {if $entry.spouse}
           <tr>
-            <td align="right">{$lang.spouse}:</td>
+            <th>{$lang.spouse}:</th>
             <td>{$entry.spouse|h}</td>
           </tr>
 {/if}
 
         </table>
-      </dd></dl>
 
-      <b>{$lang.communication}</b>
-      <dl><dd>
-        <table>
+      <h3>{$lang.communication}</h3>
+        <table width="100%">
+{if $entry.url}
+          <tr>
+            <th>{$lang.url}:</th>
+            <td><a href="{$entry.url|http}" target="_blank">{$entry.url|h}</a></td>
+          </tr>
+{/if}
 {if $entry.mail}
           <tr>
-            <td valign="top" align="right">{$lang.mail}:</td>
+            <th>{$lang.mail}:</th>
             <td>
               {foreach from=$entry.mail item=mail}
-                <a href="mailto:{$mail|escape:url}">{$mail|h}</a><br>
+                <a href="mailto:{$mail|escape:url}">{$mail|h}</a><br />
               {/foreach}
             </td>
           </tr>
 {/if}
 {if $entry.instantmessenger}
           <tr>
-            <td align="right">{$lang.instantmessenger}:</td>
+            <th>{$lang.instantmessenger}:</th>
             <td>{$entry.instantmessenger|h}</td>
           </tr>
 {/if}
 {if $entry.ipphone}
           <tr>
-            <td align="right">{$lang.ipphone}:</td>
+            <th>{$lang.ipphone}:</th>
             <td>{$entry.ipphone|h}</td>
           </tr>
 {/if}
 
         </table>
-      </dd></dl>
 
     </td>
   </tr>
 </table>
 
-<hr noshade="noshade" size="1" />
+<h3>{$lang.extended}</h3>
 
-<table width="100%">
+<table width="100%" class="show">
   <tr>
     <td width="50%" valign="top">
-      <b>{$lang.extended}</b>
-      <dl><dd>
-        <table>
-{if $fields._marker}
-          <tr>
-            <td valign="top" align="right">
-              {$lang.marker}:
-            </td>
-            <td id="tedit_insert">
-              <span id="tedit_out">
-                {foreach from=$entry.marker item=marker}
-                  <a href="index.php?marker={$marker|escape:url}" class="tag">{$marker|h}</a> 
-                {/foreach}
-              </span>
-              {if $user}
-                <img src="pix/tag_blue_edit.png" align="right" width="16" height="16" onclick="tedit_showEditor('{$dn}')" class="click" />
-              {/if}
-            </td>
-          </tr>
-{/if}
+        <table width="100%">
 {if $fields.note}
           <tr>
-            <td valign="top" align="right">
+            <th>
               {$lang.note}:
-            </td>
+              <div {if $user}id="noteedit"{/if}>&nbsp;</div>
+            </th>
             <td>
-              {if $user}
-                 <img src="pix/phone.png" width="16" height="16" onclick="nedit_showEditor('call','{$entry.dn}','{$user|escape:javascript}');" class="click" />
-                 <img src="pix/email.png" width="16" height="16" onclick="nedit_showEditor('mail','{$entry.dn}','{$user|escape:javascript}');" class="click" />
-                 <img src="pix/arrow_right.png" width="16" height="16" onclick="nedit_showEditor('todo','{$entry.dn}','{$user|escape:javascript}');" class="click" />
-                 <img src="pix/note.png" width="16" height="16" onclick="nedit_showEditor('note','{$entry.dn}','{$user|escape:javascript}');" class="click" />
-              {/if}
-              <dl class="notes"><dd id="nedit_insert">
+              <div id="notes">
                 {$entry.note|noteparser}
-              </dd></dl>
+                &nbsp;
+              </div>
             </td>
           </tr>
 {/if}
         </table>
-      </dd></dl>
     </td>
     <td width="50%" valign="top">
-      <dl><dd>
-        <table >
+        <table width="100%">
+{if $fields._marker}
+          <tr>
+            <th>
+              {$lang.marker}:
+              <div {if $user}id="tagedit"{/if}>&nbsp;</div>
+            </th>
+            <td>
+              <span id="taglist">
+                {foreach from=$entry.marker item=marker}
+                  <a href="index.php?marker={$marker|escape:url}" class="tag">{$marker|h}</a>
+                {/foreach}
+                &nbsp;
+              </span>
+            </td>
+          </tr>
+{/if}
 {if $entry.certificate}
          <tr>
-           <td align="right">{$lang.certificate}:</td>
+           <th>{$lang.certificate}:</th>
            <td><form>
               <textarea rows=3 cols=28 name='certificate' onClick='this.form.certificate.select();'>{$entry.certificate|h}</textarea>
             </form></td>
@@ -232,22 +222,22 @@
 {/if}
 {if $entry.domain}
           <tr>
-            <td align="right">{$lang.domain}:</td>
+            <th>{$lang.domain}:</th>
             <td>{$entry.domain|h}</td>
           </tr>
 {/if}
 {if $entry.timezone}
           <tr>
-            <td align="right">{$lang.timezone}:</td>
+            <th>{$lang.timezone}:</th>
             <td>{$entry.timezone|h}</td>
           </tr>
 {/if}
         </table>
-      </dd></dl>
     </td>
   </tr>
 </table>
 
 
+</div>
 
 {include file="footer.tpl"}
diff --git a/templates/entry_vcf.tpl b/templates/entry_vcf.tpl
index ed3776c..2555416 100644
--- a/templates/entry_vcf.tpl
+++ b/templates/entry_vcf.tpl
@@ -15,5 +15,5 @@ EMAIL;INTERNET:{$mail}
 ADR;WORK;ENCODING=QUOTED-PRINTABLE:;;{$entry.street|escape:qp};{$entry.location|escape:qp};;{$entry.plz|escape:qp};
 ADR;HOME;ENCODING=QUOTED-PRINTABLE:;;{$entry.homestreet|escape:qp}
 URL;WORK:{$entry.url}
-BDAY:{$entry.anniversary}
+BDAY:{$entry.birthday}
 END:VCARD
diff --git a/templates/export_list_csv.tpl b/templates/export_list_csv.tpl
index 6e32289..34835a2 100644
--- a/templates/export_list_csv.tpl
+++ b/templates/export_list_csv.tpl
@@ -1,2 +1,2 @@
-{$lang.name|csv};{$lang.givenname|csv};{$lang.title|csv};{$lang.organization|csv};{$lang.office|csv};{$lang.street|csv};{$lang.zip|csv};{$lang.location|csv};{$lang.phone|csv};{$lang.fax|csv};{$lang.pager|csv};{$lang.homestreet|csv};{$lang.homephone|csv};{$lang.mobile|csv};{$lang.url|csv};{$lang.note|csv};{$lang.mail|csv};{$lang.mail|csv};{$lang.mail|csv};
+{$lang.name|csv};{$lang.givenname|csv};{$lang.title|csv};{$lang.organization|csv};{$lang.office|csv};{$lang.street|csv};{$lang.zip|csv};{$lang.location|csv};{$lang.phone|csv};{$lang.fax|csv};{$lang.pager|csv};{$lang.homestreet|csv};{$lang.homephone|csv};{$lang.mobile|csv};{$lang.url|csv};{$lang.note|csv};{$lang.mail|csv};{$lang.mail|csv};{$lang.mail|csv};{$lang.marker|csv}
 {$list}
diff --git a/templates/export_list_csv_entry.tpl b/templates/export_list_csv_entry.tpl
index 85442cd..d37b082 100644
--- a/templates/export_list_csv_entry.tpl
+++ b/templates/export_list_csv_entry.tpl
@@ -1,2 +1,2 @@
-{$entry.name|csv};{$entry.givenname|csv};{$entry.title|csv};{$entry.organization|csv};{$entry.office|csv};{$entry.street|csv};{$entry.zip|csv};{$entry.location|csv};{$entry.phone|csv};{$entry.fax|csv};{$entry.pager|csv};{$entry.homestreet|csv};{$entry.homephone|csv};{$entry.mobile|csv};{$lang.url|csv};{$entry.note|csv};{$entry.mail[0]|csv};{$entry.mail[1]|csv};{$entry.mail[2]|csv};
+{$entry.name|csv};{$entry.givenname|csv};{$entry.title|csv};{$entry.organization|csv};{$entry.office|csv};{$entry.street|csv};{$entry.zip|csv};{$entry.location|csv};{$entry.phone|csv};{$entry.fax|csv};{$entry.pager|csv};{$entry.homestreet|csv};{$entry.homephone|csv};{$entry.mobile|csv};{$lang.url|csv};{$entry.note|csv};{$entry.mail[0]|csv};{$entry.mail[1]|csv};{$entry.mail[2]|csv};{$entry.markers|csv}
 
diff --git a/templates/extended_edit.tpl b/templates/extended_edit.tpl
deleted file mode 100644
index b69323d..0000000
--- a/templates/extended_edit.tpl
+++ /dev/null
@@ -1,16 +0,0 @@
-
-  <tr>
-    <td colspan="2"><b>{$lang.extended}</b></td>
-  </tr>
-  <tr>
-    <td align="right" valign="top" nowrap="nowrap">{$lang.anniversary}:<br><span class="hint">({$lang.msg_dateformat})</span></td>
-    <td><input type="text" class="input" name="entry[anniversary]" value="{$entry.anniversary|escape}" maxlength="10"></td>
-  </tr>
-
-  <tr>
-    <td align="right" valign="top" nowrap="nowrap">{$lang.marker}:<br><span class="hint">({$lang.msg_tagsep})</span></td>
-    <td>
-      <textarea class="input" name="entry[markers]" id="tageditlookup">{$entry.markers|escape}</textarea><div id="tageditresult" class="autocomplete"></div>
-    </td>
-
-  </tr>
diff --git a/templates/extended_show.tpl b/templates/extended_show.tpl
deleted file mode 100644
index ff90894..0000000
--- a/templates/extended_show.tpl
+++ /dev/null
@@ -1,28 +0,0 @@
-<b>{$lang.extended}</b>
-<dl><dd>
-  <table>
-    <tr>
-    {if $entry.anniversary}
-    <tr>
-      <td align="right">{$lang.anniversary}:</td>
-      <td>{$entry.anniversary|date_format:$conf.dateformat}</td>
-    </tr>
-    {/if}
-    <tr>
-      <td valign="top" align="right">
-        {$lang.marker}:
-      </td>
-      <td id="tedit_insert">
-
-        <span id="tedit_out">
-        {foreach from=$entry.marker item=marker}
-          <a href="index.php?marker={$marker|escape:url}" class="tag">{$marker}</a> 
-        {/foreach}
-        </span>
-        {if $user}
-          <img src="pix/tag_blue_edit.png" align="right" width="16" height="16" onclick="tedit_showEditor('{$dn}')" class="click" />
-        {/if}
-      </td>
-    </tr>
-  </table>
-</dd></dl>
diff --git a/templates/filter.tpl b/templates/filter.tpl
deleted file mode 100644
index 73f783e..0000000
--- a/templates/filter.tpl
+++ /dev/null
@@ -1,50 +0,0 @@
-<ul class="x">
-  <li><a href="index.php?filter=a">A</a></li>
-  <li><a href="index.php?filter=b">B</a></li>
-  <li><a href="index.php?filter=c">C</a></li>
-  <li><a href="index.php?filter=d">D</a></li>
-  <li><a href="index.php?filter=e">E</a></li>
-  <li><a href="index.php?filter=f">F</a></li>
-  <li><a href="index.php?filter=g">G</a></li>
-  <li><a href="index.php?filter=h">H</a></li>
-  <li><a href="index.php?filter=i">I</a></li>
-  <li><a href="index.php?filter=j">J</a></li>
-  <li><a href="index.php?filter=k">K</a></li>
-  <li><a href="index.php?filter=l">L</a></li>
-  <li><a href="index.php?filter=m">M</a></li>
-  <li><a href="index.php?filter=n">N</a></li>
-  <li><a href="index.php?filter=o">O</a></li>
-  <li><a href="index.php?filter=p">P</a></li>
-  <li><a href="index.php?filter=q">Q</a></li>
-  <li><a href="index.php?filter=r">R</a></li>
-  <li><a href="index.php?filter=s">S</a></li>
-  <li><a href="index.php?filter=t">T</a></li>
-  <li><a href="index.php?filter=u">U</a></li>
-  <li><a href="index.php?filter=v">V</a></li>
-  <li><a href="index.php?filter=w">W</a></li>
-  <li><a href="index.php?filter=x">X</a></li>
-  <li><a href="index.php?filter=y">Y</a></li>
-  <li><a href="index.php?filter=z">Z</a></li>
-  <li><a href="index.php?filter=other">#</a></li>
-  <li><a href="index.php?filter=*">*</a></li>
-</ul>
-
-{if $fields._marker}
-  <div class="tags x">
-    <form method="get" action="index.php" accept-charset="utf-8">
-      <a href="tags.php" class="tag">{$lang.marker}</a>:
-
-      <input name="marker" class="searchfield" type="text" id="taglookup"
-       value="{$smarty.request.marker|escape}" />
-      <input type="submit" value="{$lang.search}" class="searchbutton" />
-    </form>
-  </div>
-{/if}
-
-<div class="search x">
-  <form method="get" action="index.php" accept-charset="utf-8">
-    <input type="text" name="search" class="searchfield" id="searchfield"
-     value="{$smarty.request.search|escape}" />
-    <input type="submit" value="{$lang.search}" class="searchbutton" />
-  </form>
-</div>
diff --git a/templates/footer.tpl b/templates/footer.tpl
index 7b3f048..42a4191 100644
--- a/templates/footer.tpl
+++ b/templates/footer.tpl
@@ -1,67 +1,22 @@
-  </div>
+    </div>
+
+    <div id="footrow">
+        <div class="login">
+            {if $user == ''}
+                <a href="login.php" class="ed_login">{$lang.login}</a>
+            {else}
+                <a href="login.php?username=" class="ed_logout">{$lang.logout}</a>
+            {/if}
+        </div>
 
-  <div id="footrow">
-    {if $user == ''}
-      {$lang.notloggedin}
-      &nbsp;&nbsp;&nbsp;
-      <a href="login.php"><img src="pix/key.png" border="0" width="16" height="16" align="middle" /> {$lang.login}</a>
-    {else}
-      {$lang.loggedinas} <b>{$user}</b>
-      &nbsp;&nbsp;&nbsp;
-      <a href="login.php?username="><img src="pix/key_go.png" border="0" width="16" height="16" align="middle" /> {$lang.logout}</a>
-    {/if}
+        {if $user == ''}
+            {$lang.notloggedin}
+        {else}
+            {$lang.loggedinas} <b>{$user}</b>
+        {/if}
   </div>
 </div>
 
 </body>
 </html>
 
-
-<!--
-
-  </td>
-</tr>
-
-<tr>
-  <td class="buttonrow" align="right" colspan="2">
-    <table width="100%"><tr>
-      <td align="left">
-        <a href="orgs.php"><img src="pix/book_open.png" border="0" width="16" height="16" align="middle" />{$lang.orgs}</a>
-      </td>
-      <td align="right">
-      {if $dn}
-        <a href="entry.php?dn={$dn|escape:url}&mode=vcf"><img src="pix/vcard.png" border="0" width="16" height="16" align="middle" />{$lang.vcfexport}</a>
-      {/if}
-      {if $list}
-        <a href="index.php?filter={$filter|escape:url}&marker={$marker|escape:url}&search={$search|escape:url}&export=csv"><img src="pix/page_white_excel.png" border="0" width="16" height="16" align="middle">{$lang.csvexport}</a>
-      {/if}
-      {if $user}
-          <a href="import.php"><img src="pix/page_in.png" border="0" width="16" height="16" align="middle">{$lang.vcfimport}</a> 
-        {if $dn}
-          {if $smarty.request.mode == 'edit'}
-            <a href="entry.php?dn={$dn|escape:url}"><img src="pix/page_red.png" border="0" width="16" height="16" align="middle">{$lang.show}</a>
-          {elseif $smarty.request.mode != 'copy'}
-            <a href="entry.php?dn={$dn|escape:url}&mode=edit"><img src="pix/page_edit.png" border="0" width="16" height="16" align="middle">{$lang.edit}</a>
-            <a href="entry.php?dn={$dn|escape:url}&mode=copy"><img src="pix/page_copy.png" border="0" width="16" height="16" align="middle">{$lang.copy}</a>
-            <a href="entry.php?dn={$dn|escape:url}&del=1" onClick="return confirm('{$lang.msg_reallydel}');"><img src="pix/page_delete.png" border="0" width="16" height="16" align="middle">{$lang.delete}</a>
-          {/if}
-        {/if}
-          <a href="entry.php?mode=edit"><img src="pix/page_add.png" border="0" width="16" height="16" align="middle">{$lang.new}</a>
-      {/if}
-      </td>
-    </tr></table>
-  </td>
-</tr>
-<tr>
-  <td class="footrow" colspan="2">
-    {if $user == ''}
-      <a href="login.php"><img src="pix/key.png" border="0" width="16" height="16" align="middle" /> {$lang.login}</a>&nbsp;&nbsp;&nbsp;
-      {$lang.notloggedin}
-    {else}
-      <a href="login.php?username="><img src="pix/key_go.png" border="0" width="16" height="16" align="middle" /> {$lang.logout}</a>&nbsp;&nbsp;&nbsp;
-      {$lang.loggedinas} <b>{$user}</b>
-    {/if}
-  </td>
-</tr>
-</table>
--->
diff --git a/templates/header.tpl b/templates/header.tpl
index a06fc33..0fc3492 100644
--- a/templates/header.tpl
+++ b/templates/header.tpl
@@ -1,42 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
-  <title>ConTagged - {$lang.ldapab}</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>ConTagged - {$lang.ldapab}</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
+<!--
   <link rel="stylesheet" type="text/css" href="templates/layout.css" />
   <link rel="stylesheet" type="text/css" href="templates/style.css" />
+-->
 
-  <link rel="stylesheet" type="text/css" href="styles/scripted.css" />
-  <script src="scripts/jquery.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="styles/layout.css" />
+    <link rel="stylesheet" type="text/css" href="styles/design.css" />
+    <link rel="stylesheet" type="text/css" href="styles/scripted.css" />
 
-  <script src="scripts/interface/iutil.js" type="text/javascript"></script>
-  <script src="scripts/interface/iautocompleter.js" type="text/javascript"></script>
-  <script src="scripts/interface/imagebox.js" type="text/javascript"></script>
+    <script src="scripts/jquery.js" type="text/javascript"></script>
+    <script src="scripts/interface/iutil.js" type="text/javascript"></script>
+    <script src="scripts/interface/iautocompleter.js" type="text/javascript"></script>
+    <script src="scripts/interface/imagebox.js" type="text/javascript"></script>
+    <script src="scripts/formatDate.js" type="text/javascript"></script>
 
-  <script src="scripts/gui.js" type="text/javascript"></script>
+    <script src="scripts/gui.js" type="text/javascript"></script>
 
-  {if $LDAPERRORS != ''}
-  <script>
-    window.alert('{$lang.err_ldap}:\n\n{$LDAPERRORS|escape:quotes}');
-  </script>
-  {/if}
+    <script type="text/javascript">
+        {if $LDAPERRORS != ''}
+            window.alert('{$lang.err_ldap}:\n\n{$LDAPERRORS|escape:quotes}');
+        {/if}
+        {if $entry.dn}
+            DN = '{$entry.dn|escape:javascript}';
+        {/if}
+        {if $user}
+            USER = '{$user|escape:javascript}';
+        {/if}
+    </script>
 </head>
 <body>
 
 <div id="ldapab">
 
-  <div id="titlerow">
-    <a href="{$home}" class="logo">ConTagged</a>
-    <span class="logosmall">- {$lang.ldapab}</span>
-  </div>
+    <div id="titlerow">
+        <div class="logo">
+            <a href="{$home}">ConTagged</a>
+            <span>- {$lang.ldapab}</span>
+        </div>
+
+        <div class="search">
+            {include file="search.tpl"}
+        </div>
+    </div>
+
+    <div id="toolbar">
+        {include file="toolbar.tpl"}
+    </div>
+
+
+    <div id="filterrow">
+        <ul>
+            <li><a href="index.php?filter=a">A</a></li>
+            <li><a href="index.php?filter=b">B</a></li>
+            <li><a href="index.php?filter=c">C</a></li>
+            <li><a href="index.php?filter=d">D</a></li>
+            <li><a href="index.php?filter=e">E</a></li>
+            <li><a href="index.php?filter=f">F</a></li>
+            <li><a href="index.php?filter=g">G</a></li>
+            <li><a href="index.php?filter=h">H</a></li>
+            <li><a href="index.php?filter=i">I</a></li>
+            <li><a href="index.php?filter=j">J</a></li>
+            <li><a href="index.php?filter=k">K</a></li>
+            <li><a href="index.php?filter=l">L</a></li>
+            <li><a href="index.php?filter=m">M</a></li>
+            <li><a href="index.php?filter=n">N</a></li>
+            <li><a href="index.php?filter=o">O</a></li>
+            <li><a href="index.php?filter=p">P</a></li>
+            <li><a href="index.php?filter=q">Q</a></li>
+            <li><a href="index.php?filter=r">R</a></li>
+            <li><a href="index.php?filter=s">S</a></li>
+            <li><a href="index.php?filter=t">T</a></li>
+            <li><a href="index.php?filter=u">U</a></li>
+            <li><a href="index.php?filter=v">V</a></li>
+            <li><a href="index.php?filter=w">W</a></li>
+            <li><a href="index.php?filter=x">X</a></li>
+            <li><a href="index.php?filter=y">Y</a></li>
+            <li><a href="index.php?filter=z">Z</a></li>
+            <li><a href="index.php?filter=other">#</a></li>
+            <li><a href="index.php?filter=*">*</a></li>
+        </ul>
+    </div>
 
-  <div id="filterrow">
-    {include file="filter.tpl"}
-  </div>
 
-  <div id="toolbar">
-    {include file="toolbar.tpl"}
-  </div>
 
 
   <div id="content">
diff --git a/templates/import.tpl b/templates/import.tpl
index 3ec11e6..fe08cc3 100644
--- a/templates/import.tpl
+++ b/templates/import.tpl
@@ -1,25 +1,22 @@
-<table cellspacing="0" cellpadding="0" width="100%">
-<tr>
-<td class="filterrow">
-  <form action="import.php" method="post" enctype="multipart/form-data" accept-charset="utf-8">
-    {$lang.msg_uploadvcf}: <input name="userfile" type="file" class="upload" />
-    <input type="submit" value="{$lang.upload}" class="searchbutton"/>
-  </form>
-</td>
-</tr>
-</table>
 
-<br><br>
-<table cellspacing="0" cellpadding="0" width="100%" align="center">
-  {if $list == ''}
+<form action="import.php" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="import">
+    <fieldset>
+        <legend>{$lang.upload}</legend>
+        <label for="upload">{$lang.msg_uploadvcf}:</label>
+        <input name="userfile" type="file" class="upload" id="upload" />
+        <input type="submit" value="{$lang.upload}" />
+    </fieldset>
+</form>
+
+<table cellspacing="0" cellpadding="0" width="100%" align="center" class="list">
+{if $list == ''}
     <tr>
       <td align="center">
-        {$error}
+          {$error}
       </td>
     </tr>
-  {else}
+{else}
     {* $list is a concatenation of multiple importVCF_entry.tpl *}
     {$list}
-  {/if}
+{/if}
 </table>
-<br><br><br>
diff --git a/templates/importVCF.tpl b/templates/importVCF.tpl
deleted file mode 100644
index d4b1294..0000000
--- a/templates/importVCF.tpl
+++ /dev/null
@@ -1,25 +0,0 @@
-<table cellspacing="0" cellpadding="0" width="100%">
-<tr>
-<td class="filterrow">
-  <form action="importVCF.php" method="post" enctype="multipart/form-data" accept-charset="utf-8">
-    {$lang.msg_uploadvcf}: <input name="userfile" type="file" class="upload" />
-    <input type="submit" value="{$lang.upload}" class="searchbutton"/>
-  </form>
-</td>
-</tr>
-</table>
-
-<br><br>
-<table cellspacing="0" cellpadding="0" width="100%" align="center">
-  {if $list == ''}
-    <tr>
-      <td align="center">
-        {$error}
-      </td>
-    </tr>
-  {else}
-    {* $list is a concatenation of multiple importVCF_entry.tpl *}
-    {$list}
-  {/if}
-</table>
-<br><br><br>
diff --git a/templates/importVCF_entry.tpl b/templates/importVCF_entry.tpl
deleted file mode 100644
index 5e35e2d..0000000
--- a/templates/importVCF_entry.tpl
+++ /dev/null
@@ -1,39 +0,0 @@
-<tr>
-	<form action="entry.php" method="post" target="_blank" accept-charset="utf-8">
-  <td class="result">
-    <b>{$entry.name}, {$entry.givenname}</b>
-  </td>
-  <td class="result">
-		<input type="hidden" name="save" value="1" />
-		<input type="hidden" name="entry[name]" value="{$entry.name|escape}" />
-		<input type="hidden" name="entry[givenname]" value="{$entry.givenname|escape}" />
-		<input type="hidden" name="entry[title]" value="{$entry.title|escape}" />
-		<input type="hidden" name="entry[organization]" value="{$entry.organization|escape}" />
-		<input type="hidden" name="entry[office]" value="{$entry.office|escape}" />
-		<input type="hidden" name="entry[street]" value="{$entry.street|escape}" />
-		<input type="hidden" name="entry[zip]" value="{$entry.zip|escape}" />
-		<input type="hidden" name="entry[location]" value="{$entry.location|escape}" />
-		<input type="hidden" name="entry[phone]" value="{$entry.phone|escape}" />
-		<input type="hidden" name="entry[fax]" value="{$entry.fax|escape}" />
-		<input type="hidden" name="entry[pager]" value="{$entry.pager|escape}" />
-		<input type="hidden" name="entry[homestreet]" value="{$entry.homestreet|escape}" />
-		<input type="hidden" name="entry[homephone]" value="{$entry.homephone|escape}" />
-		<input type="hidden" name="entry[mobile]" value="{$entry.mobile|escape}" />
-		<input type="hidden" name="entry[url]" value="{$entry.url|escape}" />
-		{foreach from=$entry.mail item=mail}
-		<input type="hidden" name="entry[mail][]" value="{$mail|escape}" />
-		{/foreach}
-		<input type="hidden" name="entry[note]" value="{$entry.note|escape}" />
-		<input type="hidden" name="entry[anniversary]" value="{$entry.anniversary|escape}" />
-	</td>
-	<td class="result" align="right">
-		<button name="type" value="public">
-     	<img src="pix/public.png" border="0" width="16" height="16" align="middle">{$lang.publicbook}
-		</button>
-    <button name="type" value="private">
-     	<img src="pix/private.png" border="0" width="16" height="16" align="middle">{$lang.privatebook}
-		</button>
-  </td>
-  </form>
-</tr>
-
diff --git a/templates/import_entry.tpl b/templates/import_entry.tpl
index 4e11770..2054197 100644
--- a/templates/import_entry.tpl
+++ b/templates/import_entry.tpl
@@ -1,38 +1,38 @@
 <tr>
-	<form action="entry.php" method="post" target="_import_" accept-charset="utf-8">
-  <td class="result">
-    <b>{$entry.name}, {$entry.givenname}</b>
-  </td>
-  <td class="result">
-		<input type="hidden" name="save" value="1" />
-		<input type="hidden" name="entry[name]" value="{$entry.name|escape}" />
-		<input type="hidden" name="entry[givenname]" value="{$entry.givenname|escape}" />
-		<input type="hidden" name="entry[title]" value="{$entry.title|escape}" />
-		<input type="hidden" name="entry[organization]" value="{$entry.organization|escape}" />
-		<input type="hidden" name="entry[office]" value="{$entry.office|escape}" />
-		<input type="hidden" name="entry[street]" value="{$entry.street|escape}" />
-		<input type="hidden" name="entry[zip]" value="{$entry.zip|escape}" />
-		<input type="hidden" name="entry[location]" value="{$entry.location|escape}" />
-		<input type="hidden" name="entry[phone]" value="{$entry.phone|escape}" />
-		<input type="hidden" name="entry[fax]" value="{$entry.fax|escape}" />
-		<input type="hidden" name="entry[pager]" value="{$entry.pager|escape}" />
-		<input type="hidden" name="entry[homestreet]" value="{$entry.homestreet|escape}" />
-		<input type="hidden" name="entry[homephone]" value="{$entry.homephone|escape}" />
-		<input type="hidden" name="entry[mobile]" value="{$entry.mobile|escape}" />
-		<input type="hidden" name="entry[url]" value="{$entry.url|escape}" />
-		{foreach from=$entry.mail item=mail}
-		<input type="hidden" name="entry[mail][]" value="{$mail|escape}" />
-		{/foreach}
-		<input type="hidden" name="entry[note]" value="{$entry.note|escape}" />
-		<input type="hidden" name="entry[anniversary]" value="{$entry.anniversary|escape}" />
-	</td>
-	<td class="result" align="right">
-		<button name="type" value="public">
-     	<img src="pix/public.png" border="0" width="16" height="16" align="middle">{$lang.publicbook}
-		</button>
-    <button name="type" value="private">
-     	<img src="pix/private.png" border="0" width="16" height="16" align="middle">{$lang.privatebook}
-		</button>
+    <form action="entry.php" method="post" target="_import_" accept-charset="utf-8">
+    <td class="result">
+        <b>{$entry.name}, {$entry.givenname}</b>
+    </td>
+    <td>
+        <input type="hidden" name="save" value="1" />
+        <input type="hidden" name="entry[name]" value="{$entry.name|escape}" />
+        <input type="hidden" name="entry[givenname]" value="{$entry.givenname|escape}" />
+        <input type="hidden" name="entry[title]" value="{$entry.title|escape}" />
+        <input type="hidden" name="entry[organization]" value="{$entry.organization|escape}" />
+        <input type="hidden" name="entry[office]" value="{$entry.office|escape}" />
+        <input type="hidden" name="entry[street]" value="{$entry.street|escape}" />
+        <input type="hidden" name="entry[zip]" value="{$entry.zip|escape}" />
+        <input type="hidden" name="entry[location]" value="{$entry.location|escape}" />
+        <input type="hidden" name="entry[phone]" value="{$entry.phone|escape}" />
+        <input type="hidden" name="entry[fax]" value="{$entry.fax|escape}" />
+        <input type="hidden" name="entry[pager]" value="{$entry.pager|escape}" />
+        <input type="hidden" name="entry[homestreet]" value="{$entry.homestreet|escape}" />
+        <input type="hidden" name="entry[homephone]" value="{$entry.homephone|escape}" />
+        <input type="hidden" name="entry[mobile]" value="{$entry.mobile|escape}" />
+        <input type="hidden" name="entry[url]" value="{$entry.url|escape}" />
+        {foreach from=$entry.mail item=mail}
+        <input type="hidden" name="entry[mail][]" value="{$mail|escape}" />
+        {/foreach}
+        <input type="hidden" name="entry[note]" value="{$entry.note|escape}" />
+        <input type="hidden" name="entry[anniversary]" value="{$entry.anniversary|escape}" />
+    </td>
+    <td class="result" align="right">
+        <button name="type" value="public">
+            <img src="pix/public.png" border="0" width="16" height="16" align="middle">{$lang.publicbook}
+        </button>
+        <button name="type" value="private">
+            <img src="pix/private.png" border="0" width="16" height="16" align="middle">{$lang.privatebook}
+        </button>
   </td>
   </form>
 </tr>
diff --git a/templates/list.tpl b/templates/list.tpl
index f1e28ad..a413fb4 100644
--- a/templates/list.tpl
+++ b/templates/list.tpl
@@ -1,6 +1,6 @@
 {include file="header.tpl"}
 
-<table cellspacing="0" cellpadding="0" width="100%" align="center">
+<table cellspacing="0" cellpadding="0" width="100%" align="center" class="list">
   {if $conf.userlogreq == 1 && $user == ''}
     <tr>
       <td align="center">
diff --git a/templates/list_entry.tpl b/templates/list_entry.tpl
index 29e64a0..65729b0 100644
--- a/templates/list_entry.tpl
+++ b/templates/list_entry.tpl
@@ -1,26 +1,29 @@
 {if $entry.type}
-<tr>
-  <td class="result" width="25">
-    <img src="pix/{$entry.type|h}.png" border="0" width="16" height="16" align="middle" title="{$entry.type|h}">
-  </td>
-  <td class="result">
-    <b><a href="entry.php?dn={$entry.dn|escape:url}">{$entry.name|h}, {$entry.givenname|h}</a></b>
-  </td>
-  <td class="result">
-    <a href="index.php?org={$entry.organization|escape:url}">{$entry.organization|h}</a>&nbsp;
-  </td>
-  <td class="result">
-    {$entry.phone|h}&nbsp;
-  </td>
-  <td class="result">
-    <a href="mailto:{$entry.mail[0]|h}">{$entry.mail[0]|h}</a>&nbsp;
-  </td>
-  <td class="result" width="16">
-    {if $entry.photo}
-      <a href="img.php?dn={$entry.dn|escape:url}&amp;.jpg" rel="imagebox" target="_blank" title="{$entry.givenname|escape} {$entry.name|escape}"><img src="pix/image.png" border="0" width="16" height="16" align="middle" title="{$lang.photo|h}"></a>
-    {else}
-      &nbsp;
-    {/if}
-  </td>
+<tr class="{cycle values="even,odd"}">
+    <td width="25">
+        <img src="pix/{$entry.type|h}.png" border="0" width="16" height="16" align="middle"
+         alt="{$entry.type|h}" title="{$entry.type|h}" />
+    </td>
+    <td>
+        <b><a href="entry.php?dn={$entry.dn|escape:url}">{$entry.name|h}, {$entry.givenname|h}</a></b>
+    </td>
+    <td>
+        <a href="index.php?org={$entry.organization|escape:url}">{$entry.organization|h}</a>&nbsp;
+    </td>
+    <td>
+        {$entry.phone|h}&nbsp;
+    </td>
+    <td>
+        <a href="mailto:{$entry.mail[0]|h}">{$entry.mail[0]|h}</a>&nbsp;
+    </td>
+    <td width="16">
+        {if $entry.photo}
+            <a href="img.php?dn={$entry.dn|escape:url}&amp;.jpg" rel="imagebox" target="_blank"
+               title="{$entry.givenname|escape} {$entry.name|escape}"><img src="pix/image.png"
+               border="0" width="16" height="16" align="middle" alt="{$lang.photo|h}"></a>
+        {else}
+            &nbsp;
+        {/if}
+    </td>
 </tr>
 {/if}
diff --git a/templates/list_filter.tpl b/templates/list_filter.tpl
deleted file mode 100644
index ac0dab4..0000000
--- a/templates/list_filter.tpl
+++ /dev/null
@@ -1,63 +0,0 @@
-<table cellspacing="0" cellpadding="0" width="100%">
-<tr>
-<td class="filterrow">
-  <a href="index.php?filter=a">A</a>
-  <a href="index.php?filter=b">B</a>
-  <a href="index.php?filter=c">C</a>
-  <a href="index.php?filter=d">D</a>
-  <a href="index.php?filter=e">E</a>
-  <a href="index.php?filter=f">F</a>
-  <a href="index.php?filter=g">G</a>
-  <a href="index.php?filter=h">H</a>
-  <a href="index.php?filter=i">I</a>
-  <a href="index.php?filter=j">J</a>
-  <a href="index.php?filter=k">K</a>
-  <a href="index.php?filter=l">L</a>
-  <a href="index.php?filter=m">M</a>
-  <a href="index.php?filter=n">N</a>
-  <a href="index.php?filter=o">O</a>
-  <a href="index.php?filter=p">P</a>
-  <a href="index.php?filter=q">Q</a>
-  <a href="index.php?filter=r">R</a>
-  <a href="index.php?filter=s">S</a>
-  <a href="index.php?filter=t">T</a>
-  <a href="index.php?filter=u">U</a>
-  <a href="index.php?filter=v">V</a>
-  <a href="index.php?filter=w">W</a>
-  <a href="index.php?filter=x">X</a>
-  <a href="index.php?filter=y">Y</a>
-  <a href="index.php?filter=z">Z</a>
-  <a href="index.php?filter=other">#</a>
-  <a href="index.php?filter=*">*</a>
-</td>
-{if $conf.openxchange}
-<td class="filterrow" align="right">
-  <form method="get" action="index.php" style="display:inline">
-    <select name="categories" class="searchfield">
-      <option value="">--- {$lang.categories} ---</option>
-      {html_options values=$categories output=$categories selected=$smarty.request.categories}
-    </select>
-    <input type="submit" value="{$lang.search}" class="searchbutton">
-  </form>
-</td>
-{/if}
-
-{if $conf.extended}
-<td class="filterrow" align="right">
-  <form method="get" action="index.php" style="display:inline">
-    <a href="tags.php">{$lang.marker}</a>:
-    <input name="marker" class="searchfield" type="text" id="taglookup" value="{$smarty.request.marker|escape}"/>
-    <input type="submit" value="{$lang.search}" class="searchbutton">
-  </form>
-</td>
-<div id="tagresult" class="autocomplete"></div>
-
-{/if}
-<td class="filterrow" align="right">
-  <form method="get" action="index.php" style="display:inline" accept-charset="utf-8">
-    <input type="text" name="search" class="searchfield" value="{$smarty.request.search}">
-    <input type="submit" value="{$lang.search}" class="searchbutton">
-  </form>
-</td>
-</tr>
-</table>
diff --git a/templates/login.tpl b/templates/login.tpl
index 2a950da..80741c9 100644
--- a/templates/login.tpl
+++ b/templates/login.tpl
@@ -1,31 +1,30 @@
 {include file="header.tpl"}
 
 
-  <br /><br /><br />
-  <form action="login.php" method="post" accept-charset="utf-8">
-  <table class="tableborder" align="center">
-    <tr>
-      <td colspan="2" align="center">{$msg}<br /><br /></td>
-    </tr>
-    <tr>
-      <td align="right">{$lang.username}:</td>
-      <td><input name="username" class="input" type="text" /></td>
-    </tr>
-    <tr>
-      <td align="right">{$lang.password}:</td>
-      <td><input name="password" type="password" class="input" /></td>
-    </tr>
-    <tr>
-      <td colspan="2" align="left">
-        <input type="checkbox" name="remember" value="1" id="remember" />
-        <label for="remember">{$lang.remember}</label>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2" align="center"><input type="submit" class="input" value="login" /></td>
-    </tr>
-  </table>
-  </form>
-  <br /><br /><br />
+    <form action="login.php" method="post" accept-charset="utf-8" id="login">
+        <fieldset>
+            <legend>{$lang.login}</legend>
+
+            <div class="msg">{$msg|h}</div>
+
+            <div class="row">
+                <input name="username" type="text" class="input" id="username" />
+                <label for="username">{$lang.username}</label>
+            </div>
+
+            <div class="row">
+                <input name="password" type="password" class="input" id="password" />
+                <label for="password">{$lang.password}</label>
+            </div>
+
+            <div class="row">
+                <input type="checkbox" name="remember" value="1" id="remember" />
+                <label for="remember">{$lang.remember}</label>
+            </div>
+
+            <input type="submit" value="{$lang.login}" class="button" />
+
+        </fieldset>
+    </form>
 
 {include file="footer.tpl"}
diff --git a/templates/openxchange_edit.tpl b/templates/openxchange_edit.tpl
deleted file mode 100644
index 0856a4f..0000000
--- a/templates/openxchange_edit.tpl
+++ /dev/null
@@ -1,71 +0,0 @@
-<tr>
-<td width="50%" valign="top" align="center">
-  <table>
-  <tr>
-    <td colspan="2"><b>{$lang.openxchange}</b></td>
-  </tr>
-  <tr>
-    <td align="right" valign="top">{$lang.birthday}:</td>
-    <td><input type="text" class="input" name="entry[birthday]" value="{$entry.birthday|escape}"></td>
-  </tr>
-  <tr>
-    <td align="right" valign="top">{$lang.ipphone}:</td>
-    <td><input type="text" class="input" name="entry[ipphone]" value="{$entry.ipphone|escape}"></td>
-  </tr>
-  <tr>
-    <td align="right" valign="top">{$lang.instantmessenger}:</td>
-    <td><input type="text" class="input" name="entry[instantmessenger]" value="{$entry.instantmessenger|escape}"></td>
-  </tr>
-  <tr>
-    <td align="right" valign="top">{$lang.domain}:</td>
-    <td><input type="text" class="input" name="entry[domain]" value="{$entry.domain|escape}"></td>
-  </tr>
-  <tr>
-    <td align="right" valign="top">{$lang.certificate}:</td>
-    <td>
-      <textarea name="entry[certificate]" rows=6 cols=28 onClick="this.form.elements['entry[certificate]'].select();">{$entry.certificate|escape}</textarea>
-      <br>
-      <input type=button name=clearCert value="Clear" onClick="if (confirm('Are you sure?')) this.form.elements['entry[certificate]'].value='';">
-    </td>
-  </tr>
-  </table>
-</td>
-<td width="50%" valign="top" align="center">
-  <table>
-  <tr>
-    <td colspan="2"><b>{$lang.moreopenxchange}</b></td>
-  </tr>
-  <tr>
-    <td align="right" valign="top">{$lang.country}:</td>
-    <td>
-      <select name="entry[country][]" class="input">
-        <option value="">--- {$lang.select} ---</option>
-        {html_options values=$country output=$country selected=$entry.country}
-      </select><br>
-      <input type="text" class="inputbr" name="entry[country][]"><br>
-    </td>
-  </tr>
-  <tr>
-    <td align="right" valign="top">{$lang.timezone}:</td>
-    <td>
-      <select name="entry[timezone][]" class="input">
-        <option value="">--- {$lang.select} ---</option>
-        {html_options values=$timezone output=$timezone selected=$entry.timezone}
-      </select><br>
-      <input type="text" class="inputbr" name="entry[timezone][]"><br>
-    </td>
-  </tr>
-  <tr>
-    <td align="right" valign="top">{$lang.categories}:</td>
-    <td>
-      <select name="entry[categories][]" size="5" class="input" multiple="multiple">
-        {html_options values=$categories output=$categories selected=$entry.categories}
-      </select><br>
-      <input type="text" class="inputbr" name="entry[categories][]"><br>
-      <input type="text" class="inputbr" name="entry[categories][]"><br>
-    </td>
-
-  </tr>
-</table>
-</td>
-</tr>
diff --git a/templates/openxchange_show.tpl b/templates/openxchange_show.tpl
deleted file mode 100644
index 6f50348..0000000
--- a/templates/openxchange_show.tpl
+++ /dev/null
@@ -1,72 +0,0 @@
-<table width="100%">
-  <tr>
-      <td width="50%" valign="top">
-	<b>{$lang.openxchange}</b>
-<dl><dd>
-  <table>
-    {if $entry.birthday}
-    <tr>
-      <td align="right">{$lang.birthday}:</td>
-      <td>{$entry.birthday}</td>
-    </tr>
-    {/if}
-    {if $entry.ipphone}
-    <tr>
-      <td align="right">{$lang.ipphone}:</td>
-      <td>{$entry.ipphone}</td>
-    </tr>
-    {/if}
-    {if $entry.instantmessenger}
-    <tr>
-      <td align="right">{$lang.instantmessenger}:</td>
-      <td>{$entry.instantmessenger}</td>
-    </tr>
-    {/if}
-    {if $entry.domain}
-    <tr>
-      <td align="right">{$lang.domain}:</td>
-      <td>{$entry.domain}</td>
-    </tr>
-    {/if}
-    {if $entry.certificate}
-    <tr>
-      <td align="right">{$lang.certificate}:</td>
-      <td><form>
-        <textarea rows=3 cols=28 name='certificate' onClick='this.form.certificate.select();'>{$entry.certificate}</textarea>
-	</form></td>
-    </tr>
-    {/if}
-  </table>
-</dd></dl>
-</td>
-      <td width="50%" valign="top">
-	<b>{$lang.moreopenxchange}</b>
-<dl><dd>
-<table >
-    {if $entry.country}
-    <tr>
-      <td align="right">{$lang.country}:</td>
-      <td>{$entry.country}</td>
-    </tr>
-    {/if}
-    {if $entry.timezone}
-    <tr>
-      <td align="right">{$lang.timezone}:</td>
-      <td>{$entry.timezone}</td>
-    </tr>
-    {/if}
-    {if $entry.categories}
-    <tr>
-      <td valign="top" align="right">{$lang.categories}:</td>
-      <td>
-        {foreach from=$entry.categories item=categories}
-          {$categories}<br>
-        {/foreach}
-      </td>
-    </tr>
-    {/if}
-</table>
-</dd></dl>
-      </td>
-  </tr>
-</table>
diff --git a/templates/orgs.tpl b/templates/orgs.tpl
index 0c030af..ba6bfb5 100644
--- a/templates/orgs.tpl
+++ b/templates/orgs.tpl
@@ -1,21 +1,21 @@
 {include file="header.tpl"}
 
-<table width="100%">
+<table cellspacing="0" cellpadding="0" width="100%" align="center" class="list">
 {foreach from=$orgs item=org}
-  <tr>
-    <td class="result" width="20">
-      <img src="pix/cog.png" border="0" width="16" height="16" align="middle" />
-    </td>
-    <td class="result">
-      <a href="index.php?org={$org|escape:url}">{$org}</a><br>
-    </td>
-  </tr>
+    <tr>
+        <td class="result" width="20">
+            <img src="pix/cog.png" border="0" width="16" height="16" align="middle" />
+        </td>
+        <td class="result">
+            <a href="index.php?org={$org|escape:url}">{$org|h}</a><br>
+        </td>
+    </tr>
 {foreachelse}
-  <tr>
-    <td align="center">
-      <br /><br />{$lang.err_noentries}<br /><br />
-    </td>
-  </tr>
+    <tr>
+        <td align="center">
+            <br /><br />{$lang.err_noentries}<br /><br />
+        </td>
+    </tr>
 {/foreach}
 </table>
 
diff --git a/templates/pngbehavior.htc b/templates/pngbehavior.htc
deleted file mode 100644
index 7849c8d..0000000
--- a/templates/pngbehavior.htc
+++ /dev/null
@@ -1,53 +0,0 @@
-// this is an ugly fix to make Internet Explorer work with transparent
-// PNG images - do your self a favour and use a real browser!
-
-<public:component>
-<public:attach event="onpropertychange" onevent="propertyChanged()" />
-<script>
-
-var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
-var realSrc;
-var blankSrc = "templates/blank.gif";
-
-if (supported) fixImage();
-
-function propertyChanged() {
-   if (!supported) return;
-
-   var pName = event.propertyName;
-   if (pName != "src") return;
-   // if not set to blank
-   if ( ! new RegExp(blankSrc).test(src))
-      fixImage();
-};
-
-function fixImage() {
-   // get src
-   var src = element.src;
-
-   // check for real change
-   if (src == realSrc) {
-      element.src = blankSrc;
-      return;
-   }
-
-   if ( ! new RegExp(blankSrc).test(src)) {
-      // backup old src
-      realSrc = src;
-   }
-
-   // test for png
-   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
-      // set blank image
-      element.src = blankSrc;
-      // set filter
-      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
-   }
-   else {
-      // remove filter
-      element.runtimeStyle.filter = "";
-   }
-}
-
-</script>
-</public:component>
diff --git a/templates/search.tpl b/templates/search.tpl
new file mode 100644
index 0000000..eec6d6e
--- /dev/null
+++ b/templates/search.tpl
@@ -0,0 +1,16 @@
+    <form method="get" action="index.php" accept-charset="utf-8" class="search">
+        <input type="text" name="search" class="searchfield" id="searchfield"
+               value="{$smarty.request.search|h}" />
+        <input type="submit" value="{$lang.search}" class="searchbutton" />
+    </form>
+
+{if $fields._marker}
+    <form method="get" action="index.php" accept-charset="utf-8" class="tags">
+        <a href="tags.php" class="tag">{$lang.marker}</a>:
+
+        <input name="marker" class="searchfield" type="text" id="taglookup"
+               value="{$smarty.request.marker|h}" />
+        <input type="submit" value="{$lang.search}" class="searchbutton" />
+    </form>
+{/if}
+
diff --git a/templates/tags.tpl b/templates/tags.tpl
index c0befac..df70408 100644
--- a/templates/tags.tpl
+++ b/templates/tags.tpl
@@ -1,8 +1,9 @@
 {include file="header.tpl"}
 
-<div class="tagcloud">
-  {$tagcloud}
-</div>
+<div id="tagcloud">
+    {$tagcloud}
 
+</div>
 <p>{$lang.tagcloud}</p>
+
 {include file="footer.tpl"}
diff --git a/templates/toolbar.tpl b/templates/toolbar.tpl
index b155388..e282640 100644
--- a/templates/toolbar.tpl
+++ b/templates/toolbar.tpl
@@ -2,26 +2,23 @@
 
   <!-- help -->
   <li>
-    <a href="help.php"><img src="pix/help.png" border="0"
-       width="16" height="16" align="middle" title="{$lang.help}" /></a>
+    <a href="help.php" class="ed_help">{$lang.help}</a>
   </li>
 
   <!-- company list -->
   <li>
-    <a href="orgs.php"><img src="pix/book_open.png" border="0"
-       width="16" height="16" align="middle" title="{$lang.orgs}" /></a>
+    <a href="orgs.php" class="ed_orgs">{$lang.orgs}</a>
   </li>
 
-  <li class="sep"></li>
+  <li class="sep">&nbsp;</li>
 
   {if $user} <!-- new contact -->
     <li>
-      <a href="entry.php?mode=edit"><img src="pix/page_add.png" border="0"
-         width="16" height="16" align="middle" title="{$lang.new}"></a>
+      <a href="entry.php?mode=edit" class="ed_new">{$lang.new}</a>
     </li>
   {/if}
 
-  <li class="sep"></li>
+  <li class="sep">&nbsp;</li>
 
   {if $dn} <!-- begin contact page functions -->
     {if $user} <!-- begin editing functions -->
@@ -29,22 +26,18 @@
       <!-- edit/show, copy, delete -->
       {if $smarty.request.mode == 'edit'}
         <li>
-          <a href="entry.php?dn={$dn|escape:url}"><img src="pix/page_red.png"
-           border="0" width="16" height="16" align="middle" title="{$lang.show}" /></a>
+          <a href="entry.php?dn={$dn|escape:url}" class="ed_show">{$lang.show}</a>
         </li>
       {elseif $smarty.request.mode != 'copy'}
         <li>
-          <a href="entry.php?dn={$dn|escape:url}&mode=edit"><img src="pix/page_edit.png"
-             border="0" width="16" height="16" align="middle" title="{$lang.edit}" /></a>
+          <a href="entry.php?dn={$dn|escape:url}&amp;mode=edit" class="ed_edit">{$lang.edit}</a>
         </li>
         <li>
-          <a href="entry.php?dn={$dn|escape:url}&mode=copy"><img src="pix/page_copy.png"
-             border="0" width="16" height="16" align="middle" title="{$lang.copy}" /></a>
+          <a href="entry.php?dn={$dn|escape:url}&amp;mode=copy" class="ed_copy">{$lang.copy}</a>
         </li>
         <li>
-          <a href="entry.php?dn={$dn|escape:url}&del=1" onclick="return confirm('{$lang.msg_reallydel}');"><img
-             src="pix/page_delete.png" border="0" width="16" height="16" align="middle"
-             title="{$lang.delete}" /></a>
+          <a href="entry.php?dn={$dn|escape:url}&amp;del=1" onclick="return confirm('{$lang.msg_reallydel}');"
+             class="ed_delete">{$lang.delete}</a>
         </li>
       {/if}
 
@@ -52,27 +45,26 @@
 
     <!-- vcf export -->
     <li>
-      <a href="entry.php?dn={$dn|escape:url}&mode=vcf"><img src="pix/vcard.png"
-         border="0" width="16" height="16" align="middle" title="{$lang.vcfexport}" /></a>
+      <a href="entry.php?dn={$dn|escape:url}&amp;mode=vcf" class="ed_vcfexport">{$lang.vcfexport}</a>
     </li>
 
-    <li class="sep"></li>
+    <li class="sep">&nbsp;</li>
   {/if} <!-- end contact page functions -->
 
 
   {if $list} <!-- export -->
     <li>
-      <a href="index.php?filter={$filter|escape:url}&marker={$marker|escape:url}&search={$search|escape:url}&export=csv"><img src="pix/page_white_excel.png" border="0" width="16" height="16" align="middle" title="{$lang.csvexport}" /></a>
+      <a href="index.php?filter={$filter|escape:url}&amp;marker={$marker|escape:url}&amp;search={$search|escape:url}&amp;export=csv"
+         class="ed_csvexport">{$lang.csvexport}</a>
     </li>
   {/if}
 
   {if $user} <!-- import -->
     <li>
-      <a href="import.php"><img src="pix/page_in.png" border="0"
-         width="16" height="16" align="middle" title="{$lang.vcfimport}" /></a>
+      <a href="import.php" class="ed_vcfimport">{$lang.vcfimport}</a>
     </li>
   {/if}
 
-  
+
 
 </ul>
-- 
2.39.5