- Use GetConfigDir instead of USRDIR define.

- Unification of table markup (still needs some tweaking).
- Adaption of styles.css to new table CSS classes.

14 files changed, 441 insertions, 398 deletions

diff --git a/Makefile b/Makefile
index b26662b..eea0727 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,7 @@
 #
 # Makefile for a Video Disk Recorder plugin
 #
-# $Id: Makefile,v 1.41 2007/06/01 19:57:29 lordjaxom Exp $
+# $Id: Makefile,v 1.42 2007/06/06 15:44:57 tadi Exp $
 
 # The official name of this plugin.
 # This name will be used in the '-P...' option of VDR to load the plugin.
@@ -33,7 +33,6 @@ LIBS  += $(shell tntnet-config --libs)
 VDRDIR   ?= ../../..
 LIBDIR   ?= ../../lib
 TMPDIR   ?= /tmp
-USRDIR	 ?= /usr/share/vdr-plugin-$(PLUGIN)
 
 ### Allow user defined options to overwrite defaults:
 
@@ -52,7 +51,7 @@ PACKAGE = vdr-$(ARCHIVE)
 
 INCLUDES += -I$(VDRDIR)/include -Ihttpd
 
-DEFINES  += -D_GNU_SOURCE -DPLUGIN_NAME_I18N='"$(PLUGIN)"' -DUSRDIR='"$(USRDIR)"'
+DEFINES  += -D_GNU_SOURCE -DPLUGIN_NAME_I18N='"$(PLUGIN)"'
 export DEFINES
 
 LIBS     += httpd/libhttpd.a
@@ -63,7 +62,7 @@ SUBDIRS   = httpd pages css images javascript
 
 PLUGINOBJS = $(PLUGIN).o thread.o tntconfig.o setup.o i18n.o timers.o \
              tools.o recordings.o tasks.o status.o epg_events.o epgsearch.o \
-			 grab.o md5.o filecache.o livefeatures.o
+	     grab.o md5.o filecache.o livefeatures.o
 
 WEBLIBS    = pages/libpages.a css/libcss.a images/libimages.a \
              javascript/libjavascript.a
diff --git a/css/styles.css b/css/styles.css
index 2f89a67..0c23636 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -39,15 +39,51 @@ img {
 	border: 0;
 }
 
-/* ######################
+/* #########################
    # global style properties
-   ######################
+   #########################
 */
 
 .bold {
 	font-weight: bold;
 }
 
+/* ==============================
+   =  Dotted Frame
+   ==============================
+*/
+
+.dotted {
+	border: 1px dotted #bbbbbb;
+	padding: 3px;
+	margin: 2px;
+	float: left;
+	background-color: #f3f3f3;
+}
+
+
+.title {
+	font-weight: bold;
+}
+
+.short {
+	font-weight: normal;
+}
+
+.more {
+	font-weight: bold;
+	cursor: pointer;
+}
+
+.withmargin {
+	margin: 5px;
+}
+
+.nomargin {
+	margin: 0px;
+}
+
+
 /* ######################
    # Tooltip style for hints
    ######################
@@ -160,8 +196,6 @@ div.menu form {
 }
 
 div.inhalt {
-	height: 200px;
-	width: 100% 
 	overflow: auto;
 	padding: 10px;
 }
@@ -190,11 +224,16 @@ div.pagemenu a {
 	font-weight: bold;
 }
 
+div.pagemenu a:hover {
+	text-decoration: underline;
+}
+
 div.pagemenu a.active {
 	text-decoration: none;
 	color: blue;
 	font-weight: bold;
 }
+
 div.pagemenu span {
 	text-decoration: none;
 	color: black;
@@ -292,6 +331,7 @@ div#infobox div.st_controls div#infobox_channel_buttons {
    #######################
 */
 
+/* NOT USED
 div.head_box_l {
 	background-image: url(bg_header_l.png);
 	background-position: top left;
@@ -300,14 +340,18 @@ div.head_box_l {
 	margin-bottom: 2ex;
 	padding: 0;
 }
+*/
 
+/* NOT USED
 div.head_box_m {
 	background-image: url(bg_header_h.png);
 	background-repeat: repeat-x;
 	margin: 3px;
 	padding: 0;
 }
+*/
 
+/* NOT USED
 div.head_box_r {
 	background-image: url(bg_header_r.png);
 	background-position: top right;
@@ -316,7 +360,9 @@ div.head_box_r {
 	padding: 0;
 	padding-left: 0.5em;
 }
+*/
 
+/* NOT USED:
 table.head_box_text {
 	color: #ffffff;
 	font-weight: bold;
@@ -324,7 +370,9 @@ table.head_box_text {
 	margin: 0;
 	height: 30px;
 }
+*/
 
+/* NOT USED:
 button.smallbutton {
 	width: 51px;
 	height: 17px;
@@ -338,6 +386,7 @@ button.smallbutton {
 	text-align: center;
 	cursor: pointer;
 }
+*/
 
 button.green {
 	width: 100px;
@@ -388,6 +437,32 @@ table td.buttonpanel {
 	text-align: right;
 }
 
+table td.toprow {
+}
+
+table th.toprow {
+}
+
+table td.bottomrow {
+	border-bottom: 1px solid black;
+}
+
+table td.leftcol {
+	border-left: 1px solid black;
+}
+
+table td.rightcol {
+	border-right: 1px solid black;
+}
+
+table td.topaligned {
+	vertical-align: top;
+}
+
+table td.padded {
+	padding: 3px 7px 3px 3px;
+}
+
 /* ################
    #  Event
    ################
@@ -426,7 +501,6 @@ div.station div div div {
 	margin-left: 3px;
 	padding-left: 5px;
 	padding-top: 2px;
-	color: white;
 	font-weight: bold;
 }
 
@@ -498,6 +572,7 @@ div.info {
 div.progress {
 	overflow: hidden;
 	padding-right: 4px;
+	margin: 0px;
 }
 
 div.progress div {
@@ -505,22 +580,6 @@ div.progress div {
 	padding: 0px;
 }
 
-div.title {
-	font-weight: bold;
-	margin: 5px;
-}
-
-div.short {
-	font-weight: normal;
-	margin: 5px;
-}
-
-div.more {
-	margin: 5px;
-	font-weight: bold;
-	cursor: pointer;
-}
-
 div.__progress {
 	overflow: hidden;
 	width: 100px;
@@ -535,11 +594,72 @@ div.__progress div.__elapsed {
 }
 
 
+/* ##################################
+   # table listing
+   # (this is used in listing tables)
+   ##################################
+*/
+
+table.listing {
+	padding: 0px;
+	margin: 0px;
+}
+
+table.listing tr td {
+	background: url(bg_line.png) bottom repeat-x;
+	border-bottom: 1px solid #C0C1DA;
+}
+
+table.listing tr td.action {
+	padding-left: 3px;
+	padding-right: 5px;
+}
+
+table.listing tr td.leftcol {
+	padding-left: 7px;
+	padding-right: 5px;
+}
+
+table.listing tr td.current {
+	color: blue;
+}
+
+table.listing tr.head td {
+	color: white;
+	font-weight: bold;
+	margin: 0px;
+	padding: 0px;
+	border-bottom: 1px solid black;
+}
+
+table.listing tr.description td {
+	font-weight: bold;
+	background: #E9EFFF;
+}
+
+table.listing tr.spacer td {
+	height: 10px;
+	background: transparent;
+	border-top: 1px solid black;
+	border-bottom: 0px;
+}
+
+table.listing a {
+	text-decoration: none;
+	color: black;
+	font-weight: bold;
+}
+
+table.listing a:hover {
+	text-decoration: underline;
+}
+
+
 /* #############
    # Timers
    #############
 */
-
+/* NOT USED
 table.timers {
 	padding: 0;
 	margin: 0;
@@ -577,6 +697,10 @@ table.timers a {
 	font-weight: bold;
 }
 
+table.timers a:hover {
+	text-decoration: underline;
+}
+*/
 
 /*
   ##############################
@@ -584,6 +708,7 @@ table.timers a {
   ##############################
 */
 
+/* NOT USED:
 table.schedule {
 	margin: 10px 0 0 0 ;
 	padding: 0;
@@ -620,6 +745,7 @@ table.schedule div.more {
 	font-weight: bold;
 	cursor: pointer;
 }
+*/
 
 /*
   ##############################
@@ -628,12 +754,13 @@ table.schedule div.more {
 */
 
 div.boxheader	 {
-	margin: 0;
-	padding: 0;
+	margin: 0px;
+	padding: 0px;
 	background: url(bg_box_l.png) top left no-repeat;
 }
 
 div.boxheader div {
+	margin: 0px;
 	background: url(bg_box_r.png) top right no-repeat;
 }
 
@@ -736,21 +863,6 @@ div.screenshot {
 
 /*
   ##############################
-  #  Dotted Frame
-  ##############################
-*/
-
-div.dotted {
-	border: 1px dotted #bbbbbb;
-	padding: 3px;
-	margin: 2px;
-	float: left;
-	background-color: #f3f3f3;
-}
-
-
-/*
-  ##############################
   #  Error widget
   ##############################
 */
@@ -782,42 +894,42 @@ table.error td.border {
 
 /*
   ##############################
-  #  Edit Tables
+  #  Formular Tables
+  #  (are used in forms to group input elements)
   ##############################
 */
+/* 'formular' replaces 'edit' */
 
-table.edit {
+table.formular {
 	margin-top: 10px;
 }
 
-table.edit tr td.head {
-	background: white;
-	color: white;
-	font-weight: bold;
-	margin: 0;
-	padding: 0;
-	border:none;
-}
-
-table.edit tr td {
+table.formular tr td {
 	vertical-align: top;
-	padding: 6px 7px 6px 3px;
 	vertical-align: middle;
 	background: url(bg_line.png) bottom repeat-x;
 	border-bottom: 1px solid #C0C1DA;
 }
 
-table.edit tr td.label {
-	font-weight: bold;
-	vertical-align: top;
+table.formular tr td.leftcol {
+	padding-left: 2px;
 }
 
-table.edit tr.active {
-	background: #DEE6EE;
+table.formular tr td.rightcol {
+	padding-right: 7px;
+}
+
+table.formular tr td.label {
+	font-weight: bold;
+	vertical-align: top;
 }
 
-table.edit td.blank {
-	background: none;
+table.formular tr.head td {
+	background: white;
+	color: white;
+	font-weight: bold;
+	margin: 0;
+	padding: 0;
 	border: none;
 }
 
@@ -827,18 +939,16 @@ table.dependent {
 }
 
 table.dependent tr td {
-	background: none;
+	background: transparent;
 	vertical-align: middle;
 }
 
 table.dependent tr td.title {
-	background: none;
+	background: transparent;
 	vertical-align: top;
 }
 
-
 div.dependent {
-	background-color: #DEE6EE;
 	margin-top: 10px;
 	padding: 6px 7px 6px 3px;
 }
@@ -849,6 +959,7 @@ div.dependent {
   ##############################
 */
 
+/* NOT USED:
 table.searchresults {
 	margin: 10px 0 0 0;
 	padding: 0;
@@ -893,6 +1004,12 @@ table.searchresults a {
 	color: black;
 	font-weight: bold;
 }
+
+table.searchresults a:hover {
+	text-decoration: underline;
+}
+*/
+
 /*
   ##############################
   #  Login
@@ -923,6 +1040,10 @@ div.about_box a {
 	font-weight: bold;
 }
 
+div.about_box a:hover {
+	text-decoration: underline;
+}
+
 div#aboutBox_tip {
 	width: 45%;
 }
diff --git a/doc/ChangeLog b/doc/ChangeLog
index 12bd5a5..97ea096 100644
--- a/doc/ChangeLog
+++ b/doc/ChangeLog
@@ -1,3 +1,19 @@
+2007-06-06  Dieter Hametner  <dh+vdr at gekrumbel dot de>
+
+	Use GetConfigDir instead of USRDIR define.
+
+	* pages/*.ecpp: begin of unification of table markup.
+		Still needs some tweaking but the general framework
+		is in place.
+	* styles.css: Removed different table styles.
+		Added two general table styles:
+		 - listing: for tables showing listings like
+			    search results or schedules.
+		 - formular: for tables used in input forms to
+			     layout the input elements.
+		Added some general use styles, like 'bold', 'more',
+		'withmargin', 'nomargin', 'short', 'title', 'dotted'
+
 2007-06-03  Dieter Hametner  <dh+vdr at gekrumbel dot de>
 
 	Added CSS based themeing support. For details please read
diff --git a/pages/content.ecpp b/pages/content.ecpp
index 8f3cbbb..1438790 100644
--- a/pages/content.ecpp
+++ b/pages/content.ecpp
@@ -26,7 +26,7 @@ reply.setContentType(mime);
 // FileCache::ptr_type f = LiveFileCache().get("/tmp/live/" + request.getPathInfo());
 string path(request.getPathInfo());
 
-FileCache::ptr_type f = LiveFileCache().get(USRDIR "/" + path);
+FileCache::ptr_type f = LiveFileCache().get(Plugin::GetConfigDirectory() + "/" + path);
 if (f.get() == 0) {
 	return DECLINED;
 }
diff --git a/pages/edit_searchtimer.ecpp b/pages/edit_searchtimer.ecpp
index 5d6fa9d..12fb250 100644
--- a/pages/edit_searchtimer.ecpp
+++ b/pages/edit_searchtimer.ecpp
@@ -457,24 +457,21 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 				<form method="POST" name="edit_searchtimer" action="edit_searchtimer.ecpp">
 					<input type="hidden" name="searchtimerid" value="<$ searchtimerid $>"/>
 					<input type="hidden" name="blacklistids_internal" value="<$ blacklistids_internal $>" id="blacklistids_internal"/>
-					<table class="edit" cellpadding="0" cellspacing="0">
-						<tr>
-							<td  class="head" colspan="4"><div class="boxheader"><div><div><$ editsearchtimer ? tr("Edit search timer") : tr("New search timer") $></div></div></div></td>
+					<table class="formular" cellpadding="0" cellspacing="0">
+						<tr class="head">
+							<td  class="toprow leftcol rightcol" colspan="2"><div class="boxheader"><div><div><$ editsearchtimer ? tr("Edit search timer") : tr("New search timer") $></div></div></div></td>
 						</tr>
 
 						<!-- Search term -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Search term") $>:</td>
-							<td><input type="text" name="search" value="<$ search $>" size="90" id="searchterm" /></td>
-							<td class="border" style="border-right: 1px solid black"></td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Search term") $>:</div></td>
+							<td class="rightcol"><input type="text" name="search" value="<$ search $>" size="90" id="searchterm" /></td>
 						</tr>
 
 						<!-- Search mode -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Search mode" ) $>:</td>
-							<td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Search mode" ) $>:</div></td>
+							<td class="rightcol">
 								<div style="float:left; max-width:50%; margin-right:20px">
 									<select onchange="changedsearchmode(this)" name="mode" size="1" id="search_mode">
 										<option value="0" <{ SELECTIF(mode == 0) }> ><$ tr("phrase") $></option>
@@ -490,22 +487,18 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 										<input type="text" name="tolerance" size="2" value="<$ tolerance $>" />
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 
 						<!-- Match case -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Match case") $>:</td>
-							<td><input type="checkbox" name="matchcase" value="1" <{ CHECKIF(matchcase) }> id="matchcase"/></td>
-							<td class="border" style="border-right: 1px solid black"></td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Match case") $>:</div></td>
+							<td class="rightcol"><input type="checkbox" name="matchcase" value="1" <{ CHECKIF(matchcase) }> id="matchcase"/></td>
 						</tr>
 
 						<!-- Search in -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Search in") $>:</td>
-							<td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Search in") $>:</div></td>
+							<td class="rightcol">
 								<div class="dotted">
 									<input type="checkbox" name="usetitle" value="1" <{ CHECKIF(usetitle) }> />
 									<label for="usetitle"><$ tr("Title") $> </label>
@@ -519,26 +512,22 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 									<label for="usedescr"><$ tr("Description") $> </label>
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 
 %						if (extEPGInfos.size() > 0) {
 						<!-- Use ext. EPG categories -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Use extended EPG info" ) $>:</td>
-							<td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Use extended EPG info" ) $>:</div></td>
+							<td class="rightcol">
 								<input type="checkbox" name="useextepginfo" value="1" <{ CHECKIF(useextepginfo) }> onclick="changeduseextepginfo(this)" id="useextepginfo"/>
 								<div id="use_extepg_settings" style="display: none">
-									<table border="0" cellspacing="0" cellpadding="0">
+									<table class="dependent" border="0" cellspacing="0" cellpadding="0">
 %										int i=0; for (ExtEPGInfos::iterator extinfo = extEPGInfos.begin(); extinfo != extEPGInfos.end(); ++extinfo, i++) {
-										<tr valign="top">
-											<td align="left" valign="top"><$ extinfo->Name() $></td>
-											<td align="left" valign="top">
-												<input type="text" name="extepgvalues" value="<$extepgvalues[i]$>" size="20" id="extepg_<{ reply.out() << extinfo->Id(); }>_value"/>
-											</td>
+										<tr>
+											<td class="label"><div class="withmargin"><$ extinfo->Name() $></div></td>
+											<td><input type="text" name="extepgvalues" value="<$extepgvalues[i]$>" size="20" id="extepg_<{ reply.out() << extinfo->Id(); }>_value"/></td>
 %											if (extinfo->Values().size() > 0) {
-											<td>
+											<td >
 												<select size="3" multiple="multiple" align="left" valign="top" name="extepg_<{ reply.out() << extinfo->Id(); }>" onchange="changedextepginfo(this)">
 %											for (unsigned int j=0; j<extinfo->Values().size(); j++) {
 													<option value="<{ reply.out() << extinfo->Values()[j];}>"
@@ -555,17 +544,14 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 									</table>
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 %						}
 
 
 						<!-- Use channel -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Use channel" ) $>:</td>
-							<td>
-
+							<td class="label leftcol"><div class="withmargin"><$ tr("Use channel" ) $>:</div></td>
+							<td class="rightcol">
 								<select onchange="changedchannelmode(this)" name="usechannel" size="1" id="channel_mode">
 									<option value="0" <{ SELECTIF(usechannel == 0) }> ><$ tr("no") $></option>
 									<option value="1" <{ SELECTIF(usechannel == 1) }> ><$ tr("interval") $></option>
@@ -574,12 +560,14 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 								</select>
 
 								<div id="channelinterval" style="display: none;">
-									<table border="0" cellpadding="0" cellspacing="0" class="dependent">
+									<table class="dependent" border="0" cellpadding="0" cellspacing="0" class="dependent">
 										<tr>
-											<td class="title"><$ tr("from channel" ) $>:</td><td><& channels_widget name=("channelfrom") channelid=(true) selected=(channelfrom) &><br /></td>
+											<td class="label"><div class="withmargin"><$ tr("from channel" ) $>:</div></td>
+											<td><& channels_widget name=("channelfrom") channelid=(true) selected=(channelfrom) &></td>
 										</tr>
 										<tr>
-											<td class="title" style="border-bottom: none"><$ tr("to channel" ) $>:</td><td style="border-bottom: none"><& channels_widget name=("channelto") channelid=(true) selected=(channelto) &></td>
+											<td class="label"><div class="withmargin"><$ tr("to channel" ) $>:</div></td>
+											<td><& channels_widget name=("channelto") channelid=(true) selected=(channelto) &></td>
 										</tr>
 									</table>
 								</div>
@@ -594,26 +582,24 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 %									}
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 
 						<!-- Use time -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Use time") $>:</td>
-							<td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Use time") $>:</div></td>
+							<td class="rightcol">
 								<input type="checkbox" name="usetime" value="1" <{ CHECKIF(usetime) }> onclick="changedusetime(this)" id="usetime" />
 								<div id="timesettings" style="display: none">
-									<table border="0" cellpadding="0" cellspacing="0" class="dependent">
+									<table class="dependent" border="0" cellpadding="0" cellspacing="0" class="dependent">
 										<tr>
-											<td><$ tr("Start after") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Start after") $>:</div></td>
 											<td>
 												<input type="text" size="2" maxlength="2" name="start_h" value="<$ start_h $>" /> : <input type="text" size="2" maxlength="2" name="start_m" value="<$ start_m $>" />
 												<& tooltip.help text=(tr("The time the show may start at the earliest")) &>
 											</td>
 										</tr>
 										<tr>
-											<td><$ tr("Start before") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Start before") $>:</div></td>
 											<td>
 												<input type="text" size="2" maxlength="2" name="stop_h" value="<$ stop_h $>" /> : <input type="text" size="2" maxlength="2" name="stop_m" value="<$ stop_m $>" />
 												<& tooltip.help text=(tr("The time the show may start at the latest")) &>
@@ -622,36 +608,32 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 									</table>
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 
 						<!-- Use duration -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Use duration") $>:</td>
-							<td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Use duration") $>:</div></td>
+							<td class="rightcol">
 								<input type="checkbox" name="useduration" value="1" <{ CHECKIF(useduration) }> onclick="changeduseduration(this)" id="useduration" />
 								<div id="durationsettings" style="display: none">
-									<table border="0" cellpadding="0" cellspacing="0" class="dependent">
+									<table class="dependent" border="0" cellpadding="0" cellspacing="0">
 										<tr>
-											<td><$ tr("Min. duration") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Min. duration") $>:</div></td>
 											<td><input type="text" size="3" maxlength="3" name="durationmin" value="<$ durationmin $>" /> min</td>
 										</tr>
 										<tr>
-											<td><$ tr("Max. duration") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Max. duration") $>:</div></td>
 											<td><input type="text" size="3" maxlength="3" name="durationmax" value="<$ durationmax $>" /> min</td>
 										</tr>
 									</table>
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 
 						<!-- Use weekday -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Use day of week") $>:</td>
-							<td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Use day of week") $>:</div></td>
+							<td class="rightcol">
 								<input type="checkbox" name="useweekday" value="1" <{ CHECKIF(useweekday) }> onclick="changeduseweekday(this)" id="useweekday" />
 								<div id="weekdaysettings" style="display: none" class="dependent">
 									<div class="dotted"><input type="checkbox" name="wday_mon" value="1" <{ CHECKIF(wday_mon) }> /> <$ tr("Monday") $></div>
@@ -664,14 +646,12 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 									<br style="clear: both" /><!-- Der muss da sein damit die Höhenberechnung klappt. Glaubt mir, ist so. -->
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 
 						<!-- Use blacklists -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Use blacklists" ) $>:</td>
-							<td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Use blacklists" ) $>:</div></td>
+							<td class="rightcol">
 								<select onchange="changedblacklistmode(this)" name="blacklistmode" size="1" id="blacklistmode">
 									<option value="0" <{ SELECTIF(blacklistmode == 0) }> ><$ tr("no") $></option>
 									<option value="1" <{ SELECTIF(blacklistmode == 1) }> ><$ tr("Selection") $></option>
@@ -687,22 +667,18 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 %								}
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 
 						<!-- Use in favorites menu -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Use in favorites menu") $>:</td>
-							<td><input type="checkbox" name="useinfavorites" value="1" <{ CHECKIF(useinfavorites) }>/></td>
-							<td class="border" style="border-right: 1px solid black"></td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Use in favorites menu") $>:</div></td>
+							<td class="rightcol"><input type="checkbox" name="useinfavorites" value="1" <{ CHECKIF(useinfavorites) }>/></td>
 						</tr>
 
 						<!-- Use as search timer -->
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="label"><$ tr("Use as search timer" ) $>:</td>
-							<td>
+							<td class="label leftcol"><div class="withmargin"><$ tr("Use as search timer" ) $>:</div></td>
+							<td class="rightcol">
 								<div style="float:left; max-width:50%; margin-right:20px">
 									<input type="checkbox" name="useassearchtimer" value="1" <{ CHECKIF(useassearchtimer) }> onclick="changeduseassearchtimer(this)" id="useassearchtimer"/>
 								</div>
@@ -716,12 +692,12 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 								<div id="searchtimermode1settings" style="display: none">
 									<table class="dependent" border="0" cellpadding="0" cellspacing="0">
 										<tr>
-											<td class="title"><$ tr("Series recording") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Series recording") $>:</div></td>
 											<td><input type="checkbox" name="seriesrecording" value="1" <{ CHECKIF(seriesrecording) }>/></td>
 										</tr>
 
 										<tr>
-											<td class="title"><$ tr("Directory") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Directory") $>:</div></td>
 											<td><input type="text" name="directory" id="directory" value="<$ directory $>" size="70" /><br>
 											<select onchange="changeddirselection(this)" name="recordingdirsselection" size="1" id="recordingdirsselection" style="margin-top: 5px">
 											<option/>
@@ -733,7 +709,7 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 										</tr>
 
 										<tr>
-											<td class="title"><$ tr("Delete recordings after ... days") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Delete recordings after ... days") $>:</div></td>
 											<td>
 												<input type="text" name="delrecafterdays" id="delrecafterdays" size="2" value="<$ delrecafterdays $>"/>&nbsp;&nbsp;
 												<$ tr("Keep ... recordings") $>:
@@ -742,41 +718,41 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 										</tr>
 
 										<tr>
-											<td class="title"><$ tr("Pause when ... recordings exist") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Pause when ... recordings exist") $>:</div></td>
 											<td><input type="text" name="pauseonrecs" id="pauseonrecs" size="2" value="<$ pauseonrecs $>"/></td>
 										</tr>
 
 										<tr>
-											<td class="title"><$ tr("Avoid repeats" ) $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Avoid repeats" ) $>:</div></td>
 											<td><input type="checkbox" name="avoidrepeats" value="1" <{ CHECKIF(avoidrepeats) }> onclick="changedavoidrepeats(this)" id="avoidrepeats"/>
 												<div id="avoidrepeatssettings" style="display: none">
-													<table border="0" cellpadding="0" cellspacing="0">
+													<table class="dependent" border="0" cellpadding="0" cellspacing="0">
 														<tr>
-															<td><$ tr("Allowed repeats") $>:</td>
+															<td class="label"></div><$ tr("Allowed repeats") $>:</div></td>
 															<td>
 																<input type="text" size="3" maxlength="3" name="allowedrepeats" value="<$ allowedrepeats $>" /> <$ tr("Only repeats within ... days") $>:<input type="text" size="3" maxlength="3" name="repeatswithindays" value="<$ repeatswithindays $>" />
 															</td>
 														</tr>
 
 														<tr>
-															<td><$ tr("Compare title" ) $>:</td>
+															<td class="label"><div class="withmargin"><$ tr("Compare title" ) $>:</div></td>
 															<td><input type="checkbox" name="comparetitle" value="1" <{ CHECKIF(comparetitle) }>/>
 														</tr>
 
-														<tr class= "active">
-															<td><$ tr("Compare subtitle" ) $>:</td>
+														<tr>
+															<td class="label"><div class="withmargin"><$ tr("Compare subtitle" ) $>:</div></td>
 															<td><input type="checkbox" name="comparesubtitle" value="1" <{ CHECKIF(comparesubtitle) }>/>
 														</tr>
 
 														<tr>
-															<td><$ tr("Compare summary" ) $>:</td>
+															<td class="label"><div class="withmargin"><$ tr("Compare summary" ) $>:</div></td>
 															<td><input type="checkbox" name="comparesummary" value="1" <{ CHECKIF(comparesummary) }>/>
 														</tr>
 
 %														if (extEPGInfos.size() > 0) {
 %															int i=0; for (ExtEPGInfos::iterator extinfo = extEPGInfos.begin(); extinfo != extEPGInfos.end(); ++extinfo, i++) {
-														<tr valign="top">
-															<td align="left" valign="top"><$ tr("Compare" ) $> <$ extinfo->Name() $>:</td>
+														<tr>
+															<td class="label"><div class="withmargin"><$ tr("Compare" ) $> <$ extinfo->Name() $>:</div></td>
 															<td><input type="checkbox" name="avoidrepeatscatselected" value="<$ i+1 $>" <{ CHECKIF(avoidrepeatscatselected[i]) }>/></td>
 														</tr>
 %															}
@@ -787,28 +763,28 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 										</tr>
 
 										<tr>
-											<td class="title"><$ tr("Priority") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Priority") $>:</div></td>
 											<td><input type="text" name="priority" size="2" value="<$ priority $>"/></td>
 										</tr>
 
 										<tr>
-											<td class="title"><$ tr("Lifetime") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Lifetime") $>:</div></td>
 											<td><input type="text" name="lifetime" size="2" value="<$ lifetime $>"/></td>
 										</tr>
 
 										<tr>
-											<td class="title"><$ tr("Setup.Recording$Margin at start (min)") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Setup.Recording$Margin at start (min)") $>:</div></td>
 											<td><input type="text" name="marginstart" size="2" value="<$ marginstart $>"/></td>
 										</tr>
 
 										<tr>
-											<td class="title"><$ tr("Setup.Recording$Margin at stop (min)") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Setup.Recording$Margin at stop (min)") $>:</div></td>
 											<td><input type="text" name="marginstop" size="2" value="<$ marginstop $>"/></td>
 										</tr>
 
 										<tr>
-											<td class="blank"><$ tr("Use VPS") $>:</td>
-											<td class="blank"><input type="checkbox" name="usevps" value="1" <{ CHECKIF(usevps) }>/></td>
+											<td class="label"><div class="withmargin"><$ tr("Use VPS") $>:</div></td>
+											<td><input type="checkbox" name="usevps" value="1" <{ CHECKIF(usevps) }>/></td>
 										</tr>
 									</table>
 								</div>
@@ -816,23 +792,22 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 								<div id="searchtimermode3settings" style="display: none">
 									<table class="dependent" border="0" cellpadding="0" cellspacing="0">
 										<tr>
-											<td class="title"><$ tr("Switch ... minutes before start") $>:</td>
+											<td class="label"><div class="withmargin"><$ tr("Switch ... minutes before start") $>:</div></td>
 											<td><input type="text" name="switchminbefore" id="switchminbefore" size="2" value="<$ switchminbefore $>"/></td>
 										</tr>
 									</table>
 								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 
 						<tr>
-							<td class="border" style="border-left: 1px solid black"></td>
-							<td class="buttonpanel" colspan="2">
+							<td class="buttonpanel leftcol rightcol" colspan="2">
+								<div class="withmargin">
 								<button class="green" type="submit" name="test" value="test" onclick="return checksearch();"><$ tr("Test") $></button>
 								<button class="green" type="submit" name="save" onclick="return checksearch();"><$ tr("Save") $></button>
 								<button type="button" class="red" onclick="history.back()"><$ tr("Cancel") $></button>
+								</div>
 							</td>
-							<td class="border" style="border-right: 1px solid black"></td>
 						</tr>
 					</table>
 				</form>
diff --git a/pages/edit_timer.ecpp b/pages/edit_timer.ecpp
index 51cfd19..3c071d1 100644
--- a/pages/edit_timer.ecpp
+++ b/pages/edit_timer.ecpp
@@ -136,14 +136,14 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 			<form method="POST" name="edit_timer" action="edit_timer.ecpp">
 				<input type="hidden" name="timerid" value="<$ timerid $>"/>
 				<input type="hidden" name="aux" value="<$ aux $>"/>
-				<table class="edit" cellpadding="0" cellspacing="0">
-					<tr>
-						<td class="head" colspan="4"><div class="boxheader"><div><div><$ timer ? tr("Edit timer") : tr("New timer") $></div></div></div></td>
+				<table class="formular" cellpadding="0" cellspacing="0">
+					<tr class="head">
+						<td class="toprow leftcol rightcol" colspan="2"><div class="boxheader"><div><div><$ timer ? tr("Edit timer") : tr("New timer") $></div></div></div></td>
 					</tr>
+
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Active") $>:</td>
-						<td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Active") $>:</div></td>
+						<td class="rightcol">
 							<div class="dotted">
 								<input id="active_1" name="active" value="1" <{ reply.out() << ( active ? "checked=\"checked\"" : "" ); }> type="radio"></input>
 								<label for="active_1"><$ tr("Yes") $></label>
@@ -153,34 +153,26 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 								<label for="active_0"><$ tr("No") $></label>
 							</div>
 						</td>
-						<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
+
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Channel") $>:</td>
-						<td><& channels_widget name=("channel") channelid=(true) selected=(channel) &></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Channel") $>:</div></td>
+						<td class="rightcol"><div class="withmargin"><& channels_widget name=("channel") channelid=(true) selected=(channel) &></div></td>
 					</tr>
 
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Title" ) $>:</td>
-						<td><input type="text" name="title" value="<$ title $>" size="80" /></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Title" ) $>:</div></td>
+						<td class="rightcol"><input type="text" name="title" value="<$ title $>" size="80" /></td>
 					</tr>
 
-
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Day") $>:</td>
-						<td><input type="text" name="day" value="<$ day $>" size="2" maxlength="2" /></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Day") $>:</div></td>
+						<td class="rightcol"><input type="text" name="day" value="<$ day $>" size="2" maxlength="2" /></td>
 					</tr>
 
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Weekday") $>:</td>
-						<td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Weekday") $>:</div></td>
+						<td class="rightcol">
 							<div class="dotted">
 								<input id="wday_mon" type="checkbox" name="wday_mon" value="1" <{ reply.out() << ( wday_mon ? "checked=\"checked\"" : "" ); }> />
 								<label for="wday_mon"><$ tr("Monday") $></label>
@@ -209,52 +201,41 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 								<input id="wday_sun" type="checkbox" name="wday_sun" value="1" <{ reply.out() << ( wday_sun ? "checked=\"checked\"" : "" ); }> />
 								<label for="wday_sun"><$ tr("Sunday") $></label>
 							</div>
-						<td class="border" style="border-right: 1px solid black"></td>
 						</td>
 					</tr>
 
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Start") $>:</td>
-						<td><input type="text" size="2" maxlength="2" name="start_h" value="<$ ZeroPad(start_h) $>" /> : <input type="text" size="2" maxlength="2" name="start_m" value="<$ ZeroPad(start_m) $>" /></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Start") $>:</div></td>
+						<td class="rightcol"><input type="text" size="2" maxlength="2" name="start_h" value="<$ ZeroPad(start_h) $>" /> : <input type="text" size="2" maxlength="2" name="start_m" value="<$ ZeroPad(start_m) $>" /></td>
 					</tr>
 
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Stop") $>:</td>
-						<td><input type="text" size="2" maxlength="2" name="end_h" value="<$ ZeroPad(end_h) $>" /> : <input type="text" size="2" maxlength="2" name="end_m" value="<$ ZeroPad(end_m) $>" /></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Stop") $>:</div></td>
+						<td class="rightcol"><input type="text" size="2" maxlength="2" name="end_h" value="<$ ZeroPad(end_h) $>" /> : <input type="text" size="2" maxlength="2" name="end_m" value="<$ ZeroPad(end_m) $>" /></td>
 					</tr>
 
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Use VPS") $>:</td>
-						<td><input type="checkbox" name="vps" value="1" <{ reply.out() << ( vps ? "checked=\"checked\"" : "" ); }>/></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Use VPS") $>:</div></td>
+						<td class="rightcol"><input type="checkbox" name="vps" value="1" <{ reply.out() << ( vps ? "checked=\"checked\"" : "" ); }>/></td>
 					</tr>
 
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Priority") $>:</td>
-						<td><input type="text" size="2" maxlength="2" name="priority" value="<$ priority $>" /></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Priority") $>:</div></td>
+						<td class="rightcol"><input type="text" size="2" maxlength="2" name="priority" value="<$ priority $>" /></td>
 					</tr>
 
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Lifetime") $>:</td>
-						<td><input type="text" size="2" maxlength="2" name="lifetime" value="<$ lifetime $>" /></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Lifetime") $>:</div></td>
+						<td class="rightcol"><input type="text" size="2" maxlength="2" name="lifetime" value="<$ lifetime $>" /></td>
 					</tr>
 
 					<tr>
-						<td class="border" style="border-left: 1px solid black; border-bottom: 1px solid black"></td>
-						<td class="buttonpanel" colspan="2" style="border-bottom: 1px solid black">
+						<td class="buttonpanel leftcol rightcol bottomrow" colspan="2">
+							<div class="withmargin">
 							<button class="green" type="submit"><$ tr("Save") $></button>
 							<button type="button" class="red" onclick="history.back()"><$ tr("Cancel") $></button>
+							</div>
 						</td>
-						<td class="border" style="border-right: 1px solid black; border-bottom: 1px solid black"></td>
 					</tr>
 				</table>
 			</form>
diff --git a/pages/schedule.ecpp b/pages/schedule.ecpp
index fd5ece1..b5d3286 100644
--- a/pages/schedule.ecpp
+++ b/pages/schedule.ecpp
@@ -61,11 +61,10 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 		<& pageelems.logo &>
 		<& menu active=("schedule") component=("schedule.channel_selection")>
 		<div class="inhalt">
-			<table class="schedule" cellspacing="0" cellpadding="0">
+			<table class="listing" cellspacing="0" cellpadding="0">
 <{
 				EpgEvents epgEvents;
 
-				bool active_line = false;
 				string current_day = "";
 				const cEvent* PresentEvent = Schedule->GetPresentEvent();
 				time_t now = time(NULL) - ::Setup.EPGLinger * 60;
@@ -80,7 +79,6 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 					EpgEventPtr epgEvent(new EpgEvent(evntId, Event, Channel->Name()));
 					epgEvents.push_back(epgEvent);
 
-					//active_line = !active_line;
 					string title(Event->Title() ? Event->Title() : "");
 					string short_description(Event->ShortText() ? Event->ShortText() : "");
 					string description(Event->Description() ? Event->Description() : "");
@@ -89,47 +87,35 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 					string day(Event->StartTime() ? FormatDateTime(tr("%A, %b %d %Y"), Event->StartTime()) : "");
 					tEventID event = Event->EventID();
 					ostringstream os;
-      					os << Event->EventID();
+					os << Event->EventID();
 					string strEventID = os.str();
 					bool truncated = false;
 					if (current_day != day) {
 						if (current_day != "") {
 }>
-						<tr>
-							<td colspan="5" style="border-top: 1px solid black; border-bottom: none; background-image: none">&nbsp;</td></tr>
+						<tr class="spacer">
+							<td colspan="5"/>
 						</tr>
 <{
 						}
 }>
-						<tr>
-							<td class="day" colspan="5"><div class="boxheader"><div><div><$ day $></div></div></div></td>
+						<tr class="head">
+							<td colspan="5"><div class="boxheader"><div><div><$ day $></div></div></div></td>
 						</tr>
 %					current_day = day;
 %					}
-					<tr class="<? active_line ? "active" ?>">
-						<td style="border-left: 1px solid black"><& pageelems.event_timer channelid=(channel_id) eventid=(event) &>
-%						if ( LiveFeatures< features::epgsearch >().Recent() ) {
-						<a href="searchresults.html?searchplain=<$ StringUrlEncode(title) $>"><img src="<$ LiveSetup().GetThemedLink("img", "search.png") $>" border="0" alt="" <& tooltip.hint text=(tr("Search for repeats.")) &>></img></a>
-%						}
-						<a href="http://akas.imdb.com/Tsearch?title=<$ StringUrlEncode(title) $>"><img src="<$ LiveSetup().GetThemedLink("img", "imdb.png") $>" border="0" alt="" <& tooltip.hint text=(tr("Find more at the Internet Movie Database.")) &>></img></a>
-						</td>
-						<td><$ start $> - <$ end $></td>
-						<td>
-%							if(Event == PresentEvent) {
-							<font color="#0000FF">
-% 							}
-							<div class="more"<& tooltip.hint text=(StringEscapeAndBreak(StringWordTruncate(description, 300, truncated)) + string("<br />") + string(tr("Click to view details."))) &><& tooltip.display domId=(epgEvent->Id()) &>><strong><$ title $></strong></div><$ short_description $><br />
-%							if(Event == PresentEvent) {
-							</font>
-%							}
-						</td>
-						<td style="border-right: 1px solid black">&nbsp;</td>
+					<tr>
+						<td class="action leftcol"><& pageelems.event_timer channelid=(channel_id) eventid=(event) &></td>
+						<td class="action"><%cpp>if (LiveFeatures<features::epgsearch>().Recent() ) { </%cpp><a href="searchresults.html?searchplain=<$ StringUrlEncode(title) $>"><img src="<$ LiveSetup().GetThemedLink("img", "search.png") $>" alt="" <& tooltip.hint text=(tr("Search for repeats.")) &>></img></a><%cpp> } else { </%cpp><img src="transparent.png" width="16" height="16"><%cpp> } </%cpp></td>
+						<td class="action"><a href="http://akas.imdb.com/Tsearch?title=<$ StringUrlEncode(title) $>"><img src="<$ LiveSetup().GetThemedLink("img", "imdb.png") $>" border="0" alt="" <& tooltip.hint text=(tr("Find more at the Internet Movie Database.")) &>></img></a></td>
+						<td class="topaligned"><div class="withmargin"><$ start $> - <$ end $></div></td>
+						<td class="<? (Event == PresentEvent) ? "current" ?> topaligned rightcol"><div class="more withmargin" <& tooltip.hint text=(StringEscapeAndBreak(StringWordTruncate(description, 300, truncated)) + "<br />" + tr("Click to view details.")) &><& tooltip.display domId=(epgEvent->Id()) &>><span class="title"><$ title $></span><br /><span class="short"><%cpp>if (short_description.empty()) { </%cpp>&nbsp;<%cpp> } </%cpp><$ short_description $></span></div></td>
 					</tr>
 %				}
 %				if (Schedule->Events()->Count() > 0) {
-						<tr>
-							<td colspan="4" style="border-top: 1px solid black; background-image: none; border-bottom: none">&nbsp;</td>
-						</tr>
+					<tr class="spacer">
+						<td colspan="5"/>
+					</tr>
 %				}
 			</table>
 		</div>
diff --git a/pages/searchepg.ecpp b/pages/searchepg.ecpp
index 6e4d2f4..846d1f6 100644
--- a/pages/searchepg.ecpp
+++ b/pages/searchepg.ecpp
@@ -254,28 +254,25 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 		<div class="inhalt">
 			<form method="POST" name="searchepg" action="searchepg.ecpp">
 				<input type="hidden" name="blacklistids_internal" value="<$ blacklistids_internal $>" id="blacklistids_internal"/>
-				<table class="edit" cellpadding="0" cellspacing="0">
-					<tr>
-						<td  class="head" colspan="4"><div class="boxheader"><div><div><$ tr("Search settings") $></div></div></div></td>
+				<table class="formular" cellpadding="0" cellspacing="0">
+					<tr class="head">
+						<td  class="toprow leftcol rightcol" colspan="2"><div class="boxheader"><div><div><$ tr("Search settings") $></div></div></div></td>
 					</tr>
 
 					<!-- Search term -->
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Search term") $>:</td>
-						<td><input type="text" name="search" value="<$ search $>" size="90" id="searchterm" /></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Search term") $>:</div></td>
+						<td class="rightcol"><input type="text" name="search" value="<$ search $>" size="90" id="searchterm" /></td>
 					</tr>
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Extended search") $>:</td>
-						<td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Extended search") $>:</div></td>
+						<td class="rightcol">
 							<input type="checkbox" name="useextendedsearch" value="1" <{ CHECKIF(useextendedsearch) }> onclick="changeduseextendedsearch(this)" id="useextendedsearch"/>
 						<div id="extendedsearch" style="display: none">
 						<table class="dependent" border="0" cellpadding="0" cellspacing="0">
 						<!-- Search mode -->
 						<tr>
-							<td class="label"><$ tr("Search mode" ) $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Search mode" ) $>:</div></td>
 							<td>
 								<div style="float:left; margin-right:20px">
 									<select onchange="changedsearchmode(this)" name="mode" size="1" id="search_mode">
@@ -296,13 +293,13 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 
 						<!-- Match case -->
 						<tr>
-							<td class="label"><$ tr("Match case") $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Match case") $>:</div></td>
 							<td><input type="checkbox" name="matchcase" value="1" <{ CHECKIF(matchcase) }> id="matchcase"/></td>
 						</tr>
 
 						<!-- Search in -->
 						<tr>
-							<td class="label"><$ tr("Search in") $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Search in") $>:</div></td>
 							<td>
 								<div class="dotted">
 									<input type="checkbox" name="usetitle" value="1" <{ CHECKIF(usetitle) }> />
@@ -324,11 +321,11 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 %					if (extEPGInfos.size() > 0) {
 						<!-- Use ext. EPG categories -->
 						<tr>
-							<td class="label"><$ tr("Use extended EPG info" ) $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Use extended EPG info" ) $>:</div></td>
 							<td>
 								<input type="checkbox" name="useextepginfo" value="1" <{ CHECKIF(useextepginfo) }> onclick="changeduseextepginfo(this)" id="useextepginfo"/>
 								<div id="use_extepg_settings" style="display: none">
-									<table border="0" cellspacing="0" cellpadding="0">
+									<table class="dependent" border="0" cellspacing="0" cellpadding="0">
 %									int i=0; for (ExtEPGInfos::iterator extinfo = extEPGInfos.begin(); extinfo != extEPGInfos.end(); ++extinfo, i++) {
 										<tr valign="top">
 											<td align="left" valign="top"><$ extinfo->Name() $></td>
@@ -359,7 +356,7 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 
 						<!-- Use channel -->
 						<tr>
-							<td class="label"><$ tr("Use channel" ) $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Use channel" ) $>:</div></td>
 							<td>
 
 								<select onchange="changedchannelmode(this)" name="usechannel" size="1" id="channel_mode">
@@ -370,7 +367,7 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 								</select>
 
 								<div id="channelinterval" style="display: none;">
-									<table>
+									<table class="dependent" cellspacing="0" cellpadding="0">
 										<tr>
 											<td><$ tr("from channel" ) $>:</td>
 											<td><& channels_widget name=("channelfrom") channelid=(true) selected=(channelfrom) &></td>
@@ -396,11 +393,11 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 
 						<!-- Use time -->
 						<tr>
-							<td class="label"><$ tr("Use time") $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Use time") $>:</div></td>
 							<td>
 								<input type="checkbox" name="usetime" value="1" <{ CHECKIF(usetime) }> onclick="changedusetime(this)" id="usetime" />
 								<div id="timesettings" style="display: none">
-									<table border="0" cellpadding="0" cellspacing="0">
+									<table class="dependent" border="0" cellpadding="0" cellspacing="0">
 										<tr>
 											<td><$ tr("Start after") $>:</td>
 											<td>
@@ -422,11 +419,11 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 
 						<!-- Use duration -->
 						<tr>
-							<td class="label"><$ tr("Use duration") $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Use duration") $>:</div></td>
 							<td>
 								<input type="checkbox" name="useduration" value="1" <{ CHECKIF(useduration) }> onclick="changeduseduration(this)" id="useduration" />
 								<div id="durationsettings" style="display: none">
-									<table border="0" cellpadding="0" cellspacing="0">
+									<table class="dependent" border="0" cellpadding="0" cellspacing="0">
 										<tr>
 											<td><$ tr("Min. duration") $>:</td>
 											<td><input type="text" size="3" maxlength="3" name="durationmin" value="<$ durationmin $>" /> min</td>
@@ -442,7 +439,7 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 
 						<!-- Use weekday -->
 						<tr>
-							<td class="label"><$ tr("Use day of week") $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Use day of week") $>:</div></td>
 							<td>
 								<input type="checkbox" name="useweekday" value="1" <{ CHECKIF(useweekday) }> onclick="changeduseweekday(this)" id="useweekday" />
 								<div id="weekdaysettings" style="display: none; white-space: nowrap">
@@ -460,7 +457,7 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 
 						<!-- Use blacklists -->
 						<tr>
-							<td class="label"><$ tr("Use blacklists" ) $>:</td>
+							<td class="label"><div class="withmargin"><$ tr("Use blacklists" ) $>:</div></td>
 							<td>
 								<select onchange="changedblacklistmode(this)" name="blacklistmode" size="1" id="blacklistmode">
 									<option value="0" <{ SELECTIF(blacklistmode == 0) }> ><$ tr("no") $></option>
@@ -481,14 +478,13 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 						</table>
 					</div>
 					</td>
-					<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="buttonpanel" colspan="2">
+						<td class="buttonpanel leftcol rightcol bottomrow" colspan="2">
+							<div class="withmargin">
 							<button class="green" type="submit" name="save" onclick="return checksearch();"><$ tr("Search") $></button>
+							</div>
 						</td>
-						<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
 				</table>
 			</form>
diff --git a/pages/searchresults.ecpp b/pages/searchresults.ecpp
index 9c395e1..0343a2f 100644
--- a/pages/searchresults.ecpp
+++ b/pages/searchresults.ecpp
@@ -58,15 +58,13 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 %           if (results.size() == 0) {
                 <$ tr("No search results") $>
 %           }
-			<table class="searchresults" cellspacing="0" callpadding="0">
+			<table class="listing" cellspacing="0" callpadding="0">
 <{
 				string current_day = "";
-				bool active_line = false;
 				EpgEvents epgEvents;
 				int evntNr = 0;
 
 				for (SearchResults::iterator result = results.begin(); result != results.end(); ++result) {
-//					active_line = !active_line;
 					string channelname = Channels.GetByChannelID(result->Channel())->Name();
 					int channelnr = Channels.GetByChannelID(result->Channel())->Number();
 					string start(result->StartTime() ? FormatDateTime(tr("%I:%M %p"), result->StartTime()) : "");
@@ -86,33 +84,28 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 					if (current_day != day) {
 						if (current_day != "") {
 }>
-						<tr>
-							<td colspan="5" style="border-top: 1px solid black; border-bottom: none; background-image: none">&nbsp;</td></tr>
-						</tr>
+					<tr class="spacer">
+						<td colspan="4"/>
+					</tr>
 <{
 						}
 }>
-						<tr>
-							<td class="day" colspan="5"><div class="boxheader"><div><div><$ day $></div></div></div></td>
-						</tr>
-%					current_day = day;
+					<tr class="head">
+						<td colspan="4"><div class="boxheader"><div><div><$ day $></div></div></div></td>
+					</tr>
+%						current_day = day;
 %					}
-                    <tr class="<? active_line ? "active" ?>">
-						<td style="border-left: 1px solid black"><& pageelems.event_timer channelid=(channel_id) eventid=(event)&></td>
-						<td><a href="schedule.html?channel=<$ channelnr $>"><$ channelname $></a></td>
-						<td><$ start $> - <$ end $></td>
-
-						<td>
-							<div class="more"<& tooltip.hint text=(StringEscapeAndBreak(StringWordTruncate(description, 300, truncated)) + string("<br />") + string(tr("Click to view details."))) &><& tooltip.display domId=(epgEvent->Id()) &>><strong><$ result->Title() $></strong></div><$ result->ShortText() $><br />
-						</td>
-
-						<td style="border-right: 1px solid black">&nbsp;</td>
+                    <tr>
+						<td class="action leftcol"><& pageelems.event_timer channelid=(channel_id) eventid=(event)&></td>
+						<td class="topaligned"><div class="withmargin"><a href="schedule.html?channel=<$ channelnr $>"><$ channelname $></a></div></td>
+						<td class="topaligned"><div class="withmargin"><$ start $> - <$ end $></div></td>
+						<td class="topaligned rightcol"><div class="more withmargin"<& tooltip.hint text=(StringEscapeAndBreak(StringWordTruncate(description, 300, truncated)) + "<br />" + tr("Click to view details.")) &><& tooltip.display domId=(epgEvent->Id()) &>><span class="title"><$ result->Title() $></span><br /><span class="short"><%cpp>if (result->ShortText().empty()) { </%cpp>&nbsp;<%cpp> } </%cpp><$ result->ShortText() $></span></div></td>
 					</tr>
 %				}
 %				if (results.size() > 0) {
-						<tr>
-							<td colspan="5" style="border-top: 1px solid black; background: none; border-bottom: none">&nbsp;</td>
-						</tr>
+					<tr class="spacer">
+						<td colspan="4"/>
+					</tr>
 %				}
 			</table>
 		</div>
diff --git a/pages/searchtimers.ecpp b/pages/searchtimers.ecpp
index 296a110..95aa7b6 100644
--- a/pages/searchtimers.ecpp
+++ b/pages/searchtimers.ecpp
@@ -43,43 +43,38 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 		<& pageelems.logo &>
 		<& menu active=("searchtimers") component=("searchtimers.searchtimer_actions")>
 		<div class="inhalt">
-			<table class="timers" cellspacing="0" cellpadding="0">
+			<table class="listing" cellspacing="0" cellpadding="0">
 				<tr class="head">
-					<td colspan="10">
+					<td colspan="8">
 						<div class="boxheader"><div><div><$ pageTitle $></div></div></div>
 					</td>
 				</tr>
 				<tr class="description">
-					<td class="border" style="border-left: 1px solid black"></td>
-					<td>&nbsp;</td>
-					<td><$ tr("Expression") $></td>
-					<td><$ tr("Channel") $></td>
-					<td><$ tr("Starts between") $>&nbsp;</td>
-					<td>&nbsp;</td>
-					<td>&nbsp;</td>
-					<td>&nbsp;</td>
-					<td>&nbsp;</td>
-					<td class="border" style="border-right: 1px solid black"></td>
+					<td class="action leftcol"><img src="transparent.png" alt="" width="16px" height="16px"/></td>
+					<td><div class="withmargin"><$ tr("Expression") $></div></td>
+					<td><div class="withmargin"><$ tr("Channel") $></div></td>
+					<td><div class="withmargin"><$ tr("Starts between") $></div></td>
+					<td class="rightcol" colspan="4"/>
 				</tr>
 <{
 				for (SearchTimers::iterator timer = timers.begin(); timer != timers.end(); ++timer) {
 }>
 				<tr>
-					<td class="border" style="border-left: 1px solid black"></td>
-					<td><{ if(timer->UseAsSearchTimer()) { }><img src="<$ LiveSetup().GetThemedLink("img", "arrow.png") $>" alt=""></img><{ } }></td>
-					<td><$ timer->Search() $></td>
-					<td><$ timer->ChannelText() $></td>
-					<td><? timer->UseTime() ? timer->StartTimeFormatted()+" - "+timer->StopTimeFormatted() ?></td>
-					<td><a href="searchtimers.html?searchtimerid=<$ timer->Id() $>&action=toggle"><img src="<$ LiveSetup().GetThemedLink("img", timer->UseAsSearchTimer() ? "active.png" : "inactive.png") $>" alt="<$ tr("Toggle search timer actions (in)active") $>" <& tooltip.hint text=(tr("Toggle search timer actions (in)active")) &>></img></a></td>
-					<td><a href="searchresults.html?searchtimerid=<$ timer->Id() $>"><img src="<$ LiveSetup().GetThemedLink("img", "search.png") $>" alt="<$ tr("Browse search timer results") $>" <& tooltip.hint text=(tr("Browse search timer results")) &>></img></a></td>
-					<td><a href="edit_searchtimer.html?searchtimerid=<$ timer->Id() $>"><img src="<$ LiveSetup().GetThemedLink("img", "edit.png") $>" alt="<$ tr("Edit search timer") $>" <& tooltip.hint text=(tr("Edit search timer")) &>></img></a></td>
-					<td><a href="searchtimers.html?searchtimerid=<$ timer->Id() $>&action=delete" onclick="return confirm('<$ tr("Delete this search timer?") $>')"><img src="<$ LiveSetup().GetThemedLink("img", "del.png") $>" alt="<$ tr("Delete search timer") $>" <& tooltip.hint text=(tr("Delete search timer")) &>></img></a></td>
-					<td class="border" style="border-right: 1px solid black"></td>
+					<td class="action leftcol"><{ if(timer->UseAsSearchTimer()) { }><img src="<$ LiveSetup().GetThemedLink("img", "arrow.png") $>" alt=""></img><{ } }></td>
+					<td><div class="withmargin"><$ timer->Search() $></div></td>
+					<td><div class="withmargin"><$ timer->ChannelText() $></div></td>
+					<td><div class="withmargin"><? timer->UseTime() ? timer->StartTimeFormatted()+" - "+timer->StopTimeFormatted() ?></div></td>
+					<td class="action"><a href="searchtimers.html?searchtimerid=<$ timer->Id() $>&action=toggle"><img src="<$ LiveSetup().GetThemedLink("img", timer->UseAsSearchTimer() ? "active.png" : "inactive.png") $>" alt="<$ tr("Toggle search timer actions (in)active") $>" <& tooltip.hint text=(tr("Toggle search timer actions (in)active")) &>></img></a></td>
+					<td class="action"><a href="searchresults.html?searchtimerid=<$ timer->Id() $>"><img src="<$ LiveSetup().GetThemedLink("img", "search.png") $>" alt="<$ tr("Browse search timer results") $>" <& tooltip.hint text=(tr("Browse search timer results")) &>></img></a></td>
+					<td class="action"><a href="edit_searchtimer.html?searchtimerid=<$ timer->Id() $>"><img src="<$ LiveSetup().GetThemedLink("img", "edit.png") $>" alt="<$ tr("Edit search timer") $>" <& tooltip.hint text=(tr("Edit search timer")) &>></img></a></td>
+					<td class="action rightcol"><a href="searchtimers.html?searchtimerid=<$ timer->Id() $>&action=delete" onclick="return confirm('<$ tr("Delete this search timer?") $>')"><img src="<$ LiveSetup().GetThemedLink("img", "del.png") $>" alt="<$ tr("Delete search timer") $>" <& tooltip.hint text=(tr("Delete search timer")) &>></img></a></td>
 				</tr>
 <{
 				}
 }>
-				<tr><td colspan="11" style="border-top: 1px solid black; background-image: none; border-bottom: none">&nbsp;</td></tr>
+				<tr class="spacer">
+					<td colspan="8"/>
+				</tr>
 			</table>
 		</div>
 	</body>
diff --git a/pages/setup.ecpp b/pages/setup.ecpp
index d7708df..7ee8d39 100644
--- a/pages/setup.ecpp
+++ b/pages/setup.ecpp
@@ -74,7 +74,7 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 		<& pageelems.ajax_js &>
 		<script type="text/javascript"><!--
 		function initform()
-		{			
+		{
 			changeduseauth(document.getElementById("useauth"));
 			if (document.getElementById("message").value != "")
 				alert(document.getElementById("message").value);
@@ -94,68 +94,59 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 		<& menu active=("setup") &>
 		<div class="inhalt">
 			<form method="POST" name="setup" action="setup.ecpp">
-					<input type="hidden" name="authchanged" value="<$ authchanged $>" id="authchanged"/>		
+					<input type="hidden" name="authchanged" value="<$ authchanged $>" id="authchanged"/>
 					<input type="hidden" name="message" value="<$ message $>" id="message"/>
-					<table class="edit" cellpadding="0" cellspacing="0">
-					<tr>
-						<td  class="head" colspan="4"><div class="boxheader"><div><div><$ tr("Setup") $></div></div></div></td>
+					<table class="formular" cellpadding="0" cellspacing="0">
+					<tr class="head">
+						<td  class="toprow leftcol rightcol" colspan="2"><div class="boxheader"><div><div><$ tr("Setup") $></div></div></div></td>
 					</tr>
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Last channel to display") $>:</td>
-						<td><input type="text" name="lastchannel" value="<$ lastchannel $>" id="lastchannel" /></td>
-						<td class="border" style="border-right: 1px solid black"></td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Last channel to display") $>:</div></td>
+						<td class="rightcol"><input type="text" name="lastchannel" value="<$ lastchannel $>" id="lastchannel" /></td>
 					</tr>
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Use authentication") $>:</td>
-						<td>
+						<td class="label leftcol"><div class="withmargin"><$ tr("Use authentication") $>:</div></td>
+						<td class="rightcol">
 							<input type="checkbox" name="useauth" id="useauth" value="1" <{ reply.out() << ( useauth ? "checked=\"checked\"" : "" ); }> onclick="changeduseauth(this)"/>
 							<div id="authsection" style="display: none">
 							<table border="0" cellpadding="0" cellspacing="0" class="dependent">
 							<tr>
-								<td><$ tr("Admin login") $>:</td>
+								<td class="label"><div class="withmargin"><$ tr("Admin login") $>:</div></td>
 								<td><input type="text" name="login" value="<$ login $>" id="login" onchange="setauthchanged(this)" /></td>
 							</tr>
 							<tr>
-								<td><$ tr("Admin password") $>:</td>
+								<td class="label"><div class="withmargin"><$ tr("Admin password") $>:</div></td>
 								<td><input  type="password" name="pass" value="<$ pass $>" id="pass" onchange="setauthchanged(this)" /></td>
 							</tr>
 							<tr>
-								<td><$ tr("Local net (no login required)") $>:</td>
+								<td class="label"><div class="withmargin"><$ tr("Local net (no login required)") $>:</div></td>
 								<td><input  type="text" name="localnetmask" value="<$ localnetmask $>" id="localnetmask" /></td>
 							</tr>
 							</table>
 							</div>
 						</td>
-						<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("additional fixed times in 'What's on?'") $>:</td>
-						<td><input type="text" name="times" value="<$ times $>" id="times" />
+						<td class="label leftcol"><div class="withmargin"><$ tr("additional fixed times in 'What's on?'") $>:</div></td>
+						<td class="rightcol"><input type="text" name="times" value="<$ times $>" id="times" />
 							<& tooltip.help text=(tr("Format is HH:MM. Separate multiple times with a colon")) &></td>
-						<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Start page") $>:</td>
-						<td><select name="startscreen" size="1" id="startscreen">
+						<td class="label leftcol"><div class="withmargin"><$ tr("Start page") $>:</div></td>
+						<td class="rightcol"><select name="startscreen" size="1" id="startscreen">
 							<option value="whatsonnow" <{ SELECTIF(startscreen == "whatsonnow") }>><$ tr("What's on now?") $></option>
 							<option value="whatsonnext" <{ SELECTIF(startscreen == "whatsonnext") }>><$ tr("What's on next?") $></option>
 							<option value="schedule" <{ SELECTIF(startscreen == "schedule") }>><$ tr("Schedule") $></option>
 							<option value="recordings" <{ SELECTIF(startscreen == "recordings") }>><$ tr("Recordings") $></option>
 							<option value="timers" <{ SELECTIF(startscreen == "timers") }>><$ tr("Timers") $></option>
 						</select></td>
-						<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="label"><$ tr("Theme") $>:</td>
-						<td><select name="theme" size="1" id="theme">
+						<td class="label leftcol"><div class="withmargin"><$ tr("Theme") $>:</div></td>
+						<td class="rightcol"><select name="theme" size="1" id="theme">
 <%cpp>
 {
-	cReadDir d(USRDIR "/themes");
+	cReadDir d((Plugin::GetConfigDirectory() + "/themes").c_str());
 	struct dirent* e;
 	string parent("..");
 	string current(".");
@@ -173,14 +164,13 @@ if (!logged_in && LiveSetup().UseAuth()) return reply.redirect("login.html");
 }
 </%cpp>
 						</select></td>
-						<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
 					<tr>
-						<td class="border" style="border-left: 1px solid black"></td>
-						<td class="buttonpanel" colspan="2">
+						<td class="buttonpanel leftcol rightcol bottomrow" colspan="2">
+							<div class="withmargin">
 							<button class="green" type="submit" name="save" ><$ tr("Save") $></button>
+							</div>
 						</td>
-						<td class="border" style="border-right: 1px solid black"></td>
 					</tr>
 				</table>
 			</form>
diff --git a/pages/timers.ecpp b/pages/timers.ecpp
index 01eacc9..3853684 100644
--- a/pages/timers.ecpp
+++ b/pages/timers.ecpp
@@ -56,38 +56,36 @@ using namespace vdrlive;
 %			if (timers.size() == 0) {
 				<$ tr("No timer defined") $>
 %			} else {
-			<table class="timers" cellspacing="0" cellpadding="0">
+			<table class="listing" cellspacing="0" cellpadding="0">
 <%cpp>
 				for (SortedTimers::iterator timer = timers.begin(); timer != timers.end(); ++timer) {
 					string currentDay = timer->WeekDays() > 0 ? *cTimer::PrintDay(0, timer->WeekDays()) : 							FormatDateTime(tr("%A, %x"), timer->Day());
 					if (previousDay != currentDay) {
 						if (!previousDay.empty()) {
 </%cpp>
-						<tr>
-							<td colspan="10" style="border-top: 1px solid black; border-bottom: none; background-image: none">&nbsp;</td>
+						<tr class="spacer">
+							<td colspan="8"/>
 						</tr>
 <%cpp>
 						}
 						previousDay = currentDay;
 </%cpp>
 				<tr class="head">
-					<td colspan="10">
+					<td colspan="8">
 						<div class="boxheader"><div><div>
 							<$ timer->WeekDays() > 0 ? *cTimer::PrintDay(0, timer->WeekDays()) : FormatDateTime(tr("%A, %x"), timer->Day()) $>
 						</div></div></div>
 					</td>
 				</tr>
 				<tr class="description">
-					<td class="border" style="border-left: 1px solid black"></td>
-					<td><img src="transparent.png" alt="" width="16px" height="16px" /></td>
-					<td><$ tr("Channel") $></td>
-					<td><$ tr("Start") $></td>
-					<td><$ tr("Stop") $></td>
-					<td><$ tr("File") $></td>
-					<td><img src="transparent.png" alt="" width="16px" height="16px" /></td>
-					<td><img src="transparent.png" alt="" width="16px" height="16px" /></td>
-					<td><img src="transparent.png" alt="" width="16px" height="16px" /></td>
-					<td class="border" style="border-right: 1px solid black"></td>
+					<td class="leftcol"><img src="transparent.png" alt="" width="16px" height="16px" /></td>
+					<td><div class="withmargin"><$ tr("Channel") $></div></td>
+					<td><div class="withmargin"><$ tr("Start") $></div></td>
+					<td><div class="withmargin"><$ tr("Stop") $></div></td>
+					<td><div class="withmargin"><$ tr("File") $></div></td>
+					<td class="action"><img src="transparent.png" alt="" width="16px" height="16px" /></td>
+					<td class="action"><img src="transparent.png" alt="" width="16px" height="16px" /></td>
+					<td class="action rightcol"><img src="transparent.png" alt="" width="16px" height="16px" /></td>
 				</tr>
 <%cpp>
 					}
@@ -98,22 +96,20 @@ using namespace vdrlive;
 						timerStateImg = "arrow.png";
 </%cpp>
 				<tr>
-					<td class="border" style="border-left: 1px solid black"></td>
-					<td><img src="<$ LiveSetup().GetThemedLink("img", timerStateImg) $>" alt=""></img></td>
-					<td><a href="schedule.html?channel=<$ timer->Channel()->Number()$>"><$ timer->Channel()->Name() $></a></td>
-					<td><$ FormatDateTime(tr("%I:%M %p"), timer->StartTime()) $></td>
-					<td><$ FormatDateTime(tr("%I:%M %p"), timer->StopTime()) $></td>
-					<td><$ timer->File() $></td>
-					<td><a href="timers.html?timerid=<$ timers.GetTimerId(*timer) $>&action=toggle"><img src="<$ LiveSetup().GetThemedLink("img", (timer->Flags() & tfActive) ? "active.png" : "inactive.png") $>" alt="" <& tooltip.hint text=(tr("Toggle timer active/inactive")) &>></img></a></td>
-					<td><a href="edit_timer.html?timerid=<$ timers.GetTimerId(*timer) $>"><img src="<$ LiveSetup().GetThemedLink("img", "edit.png") $>" alt="" <& tooltip.hint text=(tr("Edit timer")) &>></img></a></td>
-					<td><a href="timers.html?timerid=<$ timers.GetTimerId(*timer) $>&action=delete"><img src="<$ LiveSetup().GetThemedLink("img", "del.png") $>" alt="" <& tooltip.hint text=(tr("Delete timer")) &>></img></a></td>
-					<td class="border" style="border-right: 1px solid black"></td>
+					<td class="leftcol"><img src="<$ LiveSetup().GetThemedLink("img", timerStateImg) $>" alt=""></img></td>
+					<td><div class="withmargin"><a href="schedule.html?channel=<$ timer->Channel()->Number()$>"><$ timer->Channel()->Name() $></a></div></td>
+					<td><div class="withmargin"><$ FormatDateTime(tr("%I:%M %p"), timer->StartTime()) $></div></td>
+					<td><div class="withmargin"><$ FormatDateTime(tr("%I:%M %p"), timer->StopTime()) $></div></td>
+					<td><div class="withmargin"><$ timer->File() $></div></td>
+					<td class="action"><a href="timers.html?timerid=<$ timers.GetTimerId(*timer) $>&action=toggle"><img src="<$ LiveSetup().GetThemedLink("img", (timer->Flags() & tfActive) ? "active.png" : "inactive.png") $>" alt="" <& tooltip.hint text=(tr("Toggle timer active/inactive")) &>></img></a></td>
+					<td class="action"><a href="edit_timer.html?timerid=<$ timers.GetTimerId(*timer) $>"><img src="<$ LiveSetup().GetThemedLink("img", "edit.png") $>" alt="" <& tooltip.hint text=(tr("Edit timer")) &>></img></a></td>
+					<td class="action rightcol"><a href="timers.html?timerid=<$ timers.GetTimerId(*timer) $>&action=delete"><img src="<$ LiveSetup().GetThemedLink("img", "del.png") $>" alt="" <& tooltip.hint text=(tr("Delete timer")) &>></img></a></td>
 				</tr>
 <%cpp>
 				}
 			}
 </%cpp>
-				<tr><td colspan="10" style="border-top: 1px solid black; background-image: none; border-bottom: none">&nbsp;</td></tr>
+				<tr class="spacer"><td colspan="8"/></tr>
 			</table>
 		</div>
 	</body>
diff --git a/pages/whats_on.ecpp b/pages/whats_on.ecpp
index e7c5dcf..84c21a2 100644
--- a/pages/whats_on.ecpp
+++ b/pages/whats_on.ecpp
@@ -49,7 +49,7 @@ string displaytime;
 if (mode.empty())
 	mode = LiveSetup().GetLastWhatsOnListMode();
 else
-	LiveSetup().SetLastWhatsOnListMode(mode);	
+	LiveSetup().SetLastWhatsOnListMode(mode);
 
 current_type = type;
 current_mode = mode;
@@ -99,9 +99,9 @@ if (type == "now") {
 		<& menu active=("whats_on") component=("whats_on.whats_on_actions")>
 		<div class="inhalt">
 %			if (mode == "list") {
-			<table class="schedule" cellspacing="0" cellpadding="0">
-				<tr>
-					<td class="day" colspan="5"><div class="boxheader"><div><div><$ head $></div></div></div></td>
+			<table class="listing" cellspacing="0" cellpadding="0">
+				<tr class="head">
+					<td colspan="7"><div class="boxheader"><div><div><$ head $></div></div></div></td>
 				</tr>
 %	    }
 <{
@@ -109,7 +109,6 @@ if (type == "now") {
 
 	ReadLock channelsLock( Channels );
 	if (channelsLock) {
-		bool active_line = false;
 		int evntNr = 0;
 		for (cChannel *Channel = Channels.First(); Channel && Channel->Number() <= LiveSetup().GetLastChannel(); Channel = Channels.Next(Channel)) {
 			if (!Channel->GroupSep()) {
@@ -133,7 +132,7 @@ if (type == "now") {
 
 							bool truncated = false;
 							string truncDescription = StringWordTruncate(epgEvent->LongDescr(), maximumTooltipHintLength, truncated);
-							string longDescription = StringEscapeAndBreak(StringWordTruncate(epgEvent->LongDescr(), maximumDescriptionLength)) 
+							string longDescription = StringEscapeAndBreak(StringWordTruncate(epgEvent->LongDescr(), maximumDescriptionLength))
 									+ "<br/><br/>" + tr("Click to view details.");
 }>
 %		if (mode == "detail") {
@@ -157,41 +156,37 @@ if (type == "now") {
 %							if (epgEvent->Elapsed() >= 0) {
 						<div class="progress"><div><& pageelems.progressbar progress=(epgEvent->Elapsed()) &></div></div>
 %							}
-						<div class="title"><$ (epgEvent->Title()) $></div>
-						<div class="short"><$ (epgEvent->ShortDescr()) $></div>
-						<div class="description"><$ truncDescription $></div>
+						<div class="title withmargin"><$ (epgEvent->Title()) $></div>
+						<div class="short withmargin"><$ (epgEvent->ShortDescr()) $></div>
+						<div class="description withmargin"><$ truncDescription $></div>
 %							if (truncated) {
-						<div class="more"<& tooltip.hint text=(longDescription) &><& tooltip.display domId=(epgEvent->Id()) &>><$ tr("more") $> ...</div>
+						<div class="more withmargin"<& tooltip.hint text=(longDescription) &><& tooltip.display domId=(epgEvent->Id()) &>><$ tr("more") $> ...</div>
 %							}
 				 	</div>
 				</div>
 			</div>
 %   } else { // mode == "list"
-				<tr class="<? active_line ? "active" ?>">
-					<td style="border-left: 1px solid black"><& pageelems.event_timer channelid=(channel_id) eventid=(event) &>
-%					if (type == "now") {
-						<& pageelems.ajax_action_href action="switch_channel" tip=(tr("Switch to this channel.")) param=(channel_id) image="zap.png" alt="" &>
-%					}
-%					if ( LiveFeatures< features::epgsearch >().Recent() ) {
-						<a href="searchresults.html?searchplain=<$ StringUrlEncode(epgEvent->Title()) $>"><img src="<$ LiveSetup().GetThemedLink("img", "search.png") $>" border="0" alt="" <& tooltip.hint text=(tr("Search for repeats.")) &>></img></a>
-%					}
-						<a href="http://akas.imdb.com/Tsearch?title=<$ StringUrlEncode(epgEvent->Title()) $>"><img src="<$ LiveSetup().GetThemedLink("img", "imdb.png") $>" border="0" alt="" <& tooltip.hint text=(tr("Find more at the Internet Movie Database.")) &>></img></a>
-					</td>
-					<td>
-						<div><$ (epgEvent->StartTime(tr("%I:%M %p"))) $> - <$ (epgEvent->EndTime(tr("%I:%M %p"))) $></div>
+				<tr>
+					<td class="action leftcol"><& pageelems.event_timer channelid=(channel_id) eventid=(event) &></td>
+					<td class="action"><%cpp>if (type == "now") { </%cpp><& pageelems.ajax_action_href action="switch_channel" tip=(tr("Switch to this channel.")) param=(channel_id) image="zap.png" alt="" &><%cpp> } </%cpp>
+					<td class="action"><%cpp>if (LiveFeatures<features::epgsearch>().Recent() ) { </%cpp><a href="searchresults.html?searchplain=<$ StringUrlEncode(epgEvent->Title()) $>"><img src="<$ LiveSetup().GetThemedLink("img", "search.png") $>" border="0" alt="" <& tooltip.hint text=(tr("Search for repeats.")) &>></img></a><%cpp> } else { </%cpp><img src="transparent.png" width="16" height="16"><%cpp> } </%cpp></td>
+					<td class="action"><a href="http://akas.imdb.com/Tsearch?title=<$ StringUrlEncode(epgEvent->Title()) $>"><img src="<$ LiveSetup().GetThemedLink("img", "imdb.png") $>" border="0" alt="" <& tooltip.hint text=(tr("Find more at the Internet Movie Database.")) &>></img></a></td>
+					<td class="topaligned">
+						<div class="withmargin">
+							<div class="nomargin"><$ (epgEvent->StartTime(tr("%I:%M %p"))) $> - <$ (epgEvent->EndTime(tr("%I:%M %p"))) $></div>
 %							if (epgEvent->Elapsed() >= 0) {
-						<div class="progress"><div><& pageelems.progressbar progress=(epgEvent->Elapsed()) &></div></div>
+							<div class="progress"><div><& pageelems.progressbar progress=(epgEvent->Elapsed()) &></div></div>
 %							}
+				        </div>
 					</td>
-					<td>
-					<div class="more"
+					<td class="topaligned">
+						<div class="more withmargin"
 %					if (!longDescription.empty()) {
 						<& tooltip.hint text=(longDescription) &><& tooltip.display domId=(epgEvent->Id()) &>
 %					}
-					><strong><$ (epgEvent->Title()) $></strong></div><$ (epgEvent->ShortDescr()) $><br />
+						><span class="title"><$ (epgEvent->Title()) $></span><br /><span class="short"><$ (epgEvent->ShortDescr()) $></span></div>
 					</td>
-					<td><div class="station"><a href="schedule.html?channel=<$ Channel->Number() $>" <& tooltip.hint text=(tr("View the schedule of this channel")) &>><$ (epgEvent->Caption()) $></a></div></td>
-					<td style="border-right: 1px solid black">&nbsp;</td>
+					<td class="topaligned rightcol"><div class="station withmargin"><a href="schedule.html?channel=<$ Channel->Number() $>" <& tooltip.hint text=(tr("View the schedule of this channel")) &>><$ (epgEvent->Caption()) $></a></div></td>
 				</tr>
 %   }
 <{
@@ -213,8 +208,8 @@ if (type == "now") {
 	}
 }>
 %			if (mode == "list") {
-				<tr>
-					<td colspan="5" style="border-top: 1px solid black; background-image: none; border-bottom: none">&nbsp;</td>
+				<tr class="spacer">
+					<td colspan="7"/>
 				</tr>
 			</table>
 %   	}
diff --git a/themes/redwine/css/theme.css b/themes/redwine/css/theme.css
index 1e6c627..4e57fae 100644
--- a/themes/redwine/css/theme.css
+++ b/themes/redwine/css/theme.css
@@ -215,7 +215,7 @@ div.screenshot {
   ##############################
 */
 
-table.edit tr td {
+table.formular tr td {
 	background: url(../img/bg_line.png) bottom repeat-x;
 	border-bottom: 1px solid #DA8DA8;
 }
@@ -227,11 +227,11 @@ table.edit tr td {
   ##############################
 */
 
-table.searchresults tr td.head {
+table.listing tr td.head {
 	background: #963B5F;
 }
 
-table.searchresults tr td {
+table.listing tr td {
 	background: url(../img/bg_line.png) bottom repeat-x;
         border-bottom: 1px solid #DA8DA8;
 }