big interface overhaul, new logo

14 files changed, 426 insertions, 331 deletions

diff --git a/backend.php b/backend.php
index bb8f86534..a9a661427 100644
--- a/backend.php
+++ b/backend.php
@@ -40,7 +40,9 @@
 
 		$actid = $_GET["actid"];
 
-		print "<table width=\"100%\" class=\"feedsList\" id=\"feedsList\">";
+//		print "<table width=\"100%\" class=\"feedsList\" id=\"feedsList\">";
+
+		print "<ul class=\"feedList\" id=\"feedList\">";
 
 		$lnum = 0;
 
@@ -56,7 +58,9 @@
 			$total = $line["total"];
 			$unread = $line["unread"];
 			
-			$class = ($lnum % 2) ? "even" : "odd";
+//			$class = ($lnum % 2) ? "even" : "odd";
+
+			$class = "odd";
 
 			if ($unread > 0) $class .= "Unread";
 
@@ -66,17 +70,16 @@
 
 			$total_unread += $unread;
 
-			print "<tr class=\"$class\" id=\"FEEDR-$feed_id\">";
+//			print "<tr class=\"$class\" id=\"FEEDR-$feed_id\">";
 
 			$icon_file = ICONS_DIR . "/$feed_id.ico";
 
 			if ($subop != "piggie") {
 
 				if (file_exists($icon_file) && filesize($icon_file) > 0) {
-						$feed_icon = "<img width=\"16\" height=\"16\"
-							src=\"" . ICONS_URL . "/$feed_id.ico\">";
+						$feed_icon = "<img src=\"" . ICONS_URL . "/$feed_id.ico\">";
 				} else {
-					$feed_icon = "&nbsp;";
+					$feed_icon = "<img src=\"images/blank_icon.png\">";
 				}
 			} else {
 				$feed_icon = "<img width=\"16\" height=\"16\"
@@ -84,43 +87,40 @@
 			}
 		
 			$feed = "<a href=\"javascript:viewfeed($feed_id, 0);\">$feed</a>";
-			if (ENABLE_FEED_ICONS) {
+			
+/*			if (ENABLE_FEED_ICONS) {
 				print "<td>$feed_icon</td>";
 			}
+			
 			print "<td id=\"FEEDN-$feed_id\">$feed</td>";
 			print "<td>";
 			print "<span id=\"FEEDU-$feed_id\">$unread</span>&nbsp;/&nbsp;";
 			print "<span id=\"FEEDT-$feed_id\">$total</span>";
 			print "</td>";
 
-			print "</tr>";
-			++$lnum;
-		}
+			print "</tr>"; */
+
+			print "<li id=\"FEEDR-$feed_id\" class=\"$class\">";
+			if (ENABLE_FEED_ICONS) {
+				print "$feed_icon";
+			}
+			print "<span id=\"FEEDN-$feed_id\">$feed</span>";
 
-//		print "<tr><td class=\"footer\" colspan=\"3\">
-//			<a href=\"javascript:update_feed_list(false,true)\">Update all feeds</a></td></tr>";
+			if ($unread > 0) {
+				print "<span id=\"FEEDCTR-$feed_id\">
+					&nbsp;(<span id=\"FEEDU-$feed_id\">$unread</span>)</span>";
+			}
+			
+			print "</li>";
 
-//		print "<tr><td class=\"footer\" colspan=\"2\">&nbsp;";
-//		print "</td></tr>";
+			++$lnum;
+		}
 
 		print "</table>";
 
 		print "<div class=\"invisible\" id=\"FEEDTU\">$total_unread</div>";
 		print "<div class=\"invisible\" id=\"ACTFEEDID\">$actid</div>";
 
-/*
-		print "<p align=\"center\">All feeds: 
-			<a class=\"button\" 
-				href=\"javascript:scheduleFeedUpdate(true)\">Update</a>";
-
-		print "&nbsp;<a class=\"button\" 
-				href=\"javascript:catchupAllFeeds()\">Mark as read</a></p>";
-
-		print "<div class=\"invisible\" id=\"FEEDTU\">$total_unread</div>";
-*/
-
-	
-
 	}
 
 
@@ -226,7 +226,23 @@
 				$feed_icon = "&nbsp;";
 			}
 
-			print "<table class=\"postTable\" width=\"100%\" cellspacing=\"0\" 
+			print "<div class=\"postReply\">";
+
+			print "<div class=\"postHeader\"><table>";
+
+			print "<tr><td><b>Title:</b></td>
+				<td width='100%'>" . $line["title"] . "</td></tr>";
+			print "<tr><td><b>Link:</b></td>
+				<td width='100%'>" . $line["link"] . "</td></tr>";
+					
+			print "</table></div>";
+
+			print "<div class=\"postIcon\">" . $feed_icon . "</div>";
+			print "<div class=\"postContent\">" . $line["content"] . "</div>";
+			
+			print "</div>";
+
+/*			print "<table class=\"postTable\" width=\"100%\" cellspacing=\"0\" 
 				cellpadding=\"0\">";
 				
 			print "<tr class=\"titleTop\"><td align=\"right\"><b>Title:</b></td>
@@ -244,7 +260,7 @@
 				colspan=\"2\" width=\"100%\">" . $line["content"] . "</td>
 				<td valign=\"top\">$feed_icon</td>
 			</tr>";
-			print "</table>";	 
+			print "</table>";	 */
 
 		}
 
@@ -629,26 +645,30 @@
 
 		if ($subop == "edit") {
 			print "Edit feed:&nbsp;
-					<a class=\"button\" href=\"javascript:feedEditCancel()\">Cancel</a>&nbsp;
-					<a class=\"button\" href=\"javascript:feedEditSave()\">Save</a>";
+				<input type=\"submit\" class=\"button\" 
+					onclick=\"javascript:feedEditCancel()\" value=\"Cancel\">
+				<input type=\"submit\" class=\"button\" 
+					onclickf=\"javascript:feedEditSave()\" value=\"Save\">";
 			} else {
 
 			print "
 				Selection:&nbsp;
-			<a class=\"button\" 
-				href=\"javascript:editSelectedFeed()\">Edit</a>&nbsp;
-			<a class=\"buttonWarn\" 
-				href=\"javascript:removeSelectedFeeds()\">Remove</a>&nbsp;";
+			<input type=\"submit\" class=\"button\" 
+				onclick=\"javascript:editSelectedFeed()\" value=\"Edit\">
+			<input type=\"submit\" class=\"button\" 
+				onclick=\"javascript:removeSelectedFeeds()\" value=\"Remove\">";
+				
 			if (ENABLE_PREFS_CATCHUP_UNCATCHUP) {
 				print "
-				<a class=\"button\" 
-					href=\"javascript:readSelectedFeeds()\">Mark as read</a>&nbsp;
-				<a class=\"button\" 
-					href=\"javascript:unreadSelectedFeeds()\">Mark as unread</a>&nbsp;";
+				<input type=\"submit\" class=\"button\" 
+					onclick=\"javascript:readSelectedFeeds()\" value=\"Mark as read\">
+				<input type=\"submit\" class=\"button\" 
+					onclick=\"javascript:unreadSelectedFeeds()\" value=\"Mark as unread\">&nbsp;";
 			}
 			print "
-			All feeds:&nbsp; 
-				<a class=\"button\" href=\"opml.php?op=Export\">Export OPML</a>";
+			All feeds: 
+				<input type=\"submit\" 
+					class=\"button\" onclick=\"opml.php?op=Export\" value=\"Export OPML\">";
 		
 			}
 
@@ -808,20 +828,29 @@
 		print "<p>";
 
 		if ($subop == "edit") {
-			print "Edit feed:&nbsp;
-					<a class=\"button\" href=\"javascript:filterEditCancel()\">Cancel</a>&nbsp;
-					<a class=\"button\" href=\"javascript:filterEditSave()\">Save</a>";
+			print "Edit feed:
+				<input type=\"submit\" class=\"button\" 
+					onclick=\"javascript:filterEditCancel()\" value=\"Cancel\">
+				<input type=\"submit\" class=\"button\" 
+					onclick=\"javascript:filterEditSave()\" value=\"Save\">";
 					
 		} else {
 
 			print "
-				Selection:&nbsp;
-			<a class=\"button\" 
-				href=\"javascript:editSelectedFilter()\">Edit</a>&nbsp;
-			<a class=\"buttonWarn\" 
-				href=\"javascript:removeSelectedFilters()\">Remove</a>&nbsp;";
+				Selection:
+			<input type=\"submit\" class=\"button\" 
+				onclick=\"javascript:editSelectedFilter()\" value=\"Edit\">
+			<input type=\"submit\" class=\"button\" 
+				onclick=\"javascript:removeSelectedFilters()\" value=\"Remove\">";
 		}
 	}
 
+	if ($op == "error") {
+		print "<div width=\"100%\" align='center'>";
+		$msg = $_GET["msg"];
+		print $msg;
+		print "</div>";
+	}
+
 	pg_close($link);
 ?>
diff --git a/feedlist.js b/feedlist.js
index dd0d04914..5ea9fffe9 100644
--- a/feedlist.js
+++ b/feedlist.js
@@ -74,11 +74,12 @@ function viewfeed(feed, skip, subop, doc) {
 
 	headlines_frame.location.href = query + "&addheader=true";
 
-	cleanSelected("feedsList");
+	cleanSelectedList("feedList");
+
 	var feedr = document.getElementById("FEEDR-" + feed);
 	if (feedr) {
 		feedr.className = feedr.className + "Selected";
-	}
+	} 
 	
 	disableContainerChildren("headlinesToolbar", false, doc);
 
diff --git a/functions.js b/functions.js
index 7faf42874..ebb1bb8f3 100644
--- a/functions.js
+++ b/functions.js
@@ -124,10 +124,18 @@ function hotkey_handler(e) {
 
 }
 
-function cleanSelected(element) {
+function cleanSelectedList(element) {
 	var content = document.getElementById(element);
 
-	var rows = new Array();
+	for (i = 0; i < content.childNodes.length; i++) {
+		content.childNodes[i].className = content.childNodes[i].className.replace("Selected", "");
+	}
+
+}
+
+
+function cleanSelected(element) {
+	var content = document.getElementById(element);
 
 	for (i = 0; i < content.rows.length; i++) {
 		content.rows[i].className = content.rows[i].className.replace("Selected", "");
@@ -247,4 +255,12 @@ function disableContainerChildren(id, disable, doc) {
 
 }
 
+function gotoPreferences() {
+	document.location.href = "prefs.php";
+}
+
+function gotoMain() {
+	document.location.href = "tt-rss.php";
+}
+
 
diff --git a/images/blank_icon.png b/images/blank_icon.png
new file mode 100644
index 000000000..a2f107312
--- /dev/null
+++ b/images/blank_icon.png
diff --git a/images/ttrss_logo.png b/images/ttrss_logo.png
new file mode 100644
index 000000000..0cfde81c0
--- /dev/null
+++ b/images/ttrss_logo.png
diff --git a/images/ttrss_logo.svg b/images/ttrss_logo.svg
new file mode 100644
index 000000000..0291cf933
--- /dev/null
+++ b/images/ttrss_logo.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="155.00000pt"
+   height="25.000000pt"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.42"
+   sodipodi:docbase="/home/fox"
+   sodipodi:docname="ttrss_logo.svg"
+   inkscape:export-filename="/home/fox/ttrss_logo.png"
+   inkscape:export-xdpi="150.00000"
+   inkscape:export-ydpi="150.00000">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient2800">
+      <stop
+         style="stop-color:#000000;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop2802" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop2804" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2782">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop2784" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop2786" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6000000"
+     inkscape:cx="109.86875"
+     inkscape:cy="46.667736"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1600"
+     inkscape:window-height="1131"
+     inkscape:window-x="0"
+     inkscape:window-y="25" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <text
+       xml:space="preserve"
+       style="font-size:28.000000px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125.00000%;writing-mode:lr-tb;text-anchor:start;fill-opacity:0.037500001;stroke:#b3b3b3;stroke-width:1.0000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000;font-family:Verdana;opacity:1.0000000;fill:#000000"
+       x="3.750001"
+       y="23.750002"
+       id="text1306"
+       sodipodi:linespacing="125.00000%"><tspan
+         sodipodi:role="line"
+         id="tspan1308"
+         x="3.7500010"
+         y="23.750002"
+         style="fill-opacity:0.037500001;fill:#000000">tiny tiny rss</tspan></text>
+  </g>
+</svg>
diff --git a/images/vgrad_light.png b/images/vgrad_light.png
new file mode 100644
index 000000000..31322e6a6
--- /dev/null
+++ b/images/vgrad_light.png
diff --git a/images/vgrad_light_rev.png b/images/vgrad_light_rev.png
new file mode 100644
index 000000000..36f0b5595
--- /dev/null
+++ b/images/vgrad_light_rev.png
diff --git a/images/vgrad_light_rev2.png b/images/vgrad_light_rev2.png
new file mode 100644
index 000000000..d69a31c40
--- /dev/null
+++ b/images/vgrad_light_rev2.png
diff --git a/prefs.php b/prefs.php
index 52eedc6d3..5f0adf7d1 100644
--- a/prefs.php
+++ b/prefs.php
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Tiny Tiny RSS</title>
+	<title>Tiny Tiny RSS : Preferences</title>
 	<link rel="stylesheet" href="tt-rss.css" type="text/css">
 	<script type="text/javascript" src="functions.js"></script>
 	<script type="text/javascript" src="prefs.js"></script>
@@ -12,27 +12,26 @@
 <? require_once "version.php" ?>
 <? require_once "config.php" ?>
 
-<table width="100%" height="100%" cellspacing=0 cellpadding=0 class="main">
+<table width="100%" height="100%" cellspacing="0" cellpadding="0" class="main">
 <tr>
-	<td class="header" valign="middle" colspan="2">	
-			Preferences
+	<td class="header" valign="middle">	
+		<img src="images/ttrss_logo.png" alt="logo">	
 	</td>
 </tr>
 <tr>
-	<td class="toolbar" valign="middle">
-		<table id="notify"><tr><td width="100%" id="notify_body">&nbsp;</td>
-		<td><img onclick="javascript:notify('')" alt="Close" 
-			src="images/close.png"></td></table>		
-	</td>
-	<td class="toolbar" valign="middle" colspan="2" align="right">	
-		<a href="tt-rss.php" class="button">Return to main</a>
-	</td>
+	<td class="mainToolbar" valign="middle">
+
+		<table width='100%' cellspacing='0' cellpadding='0'>	
+			<td><span id="notify"><span id="notify_body"></span></td>
+			<td align='right'>
+				<input type="submit" onclick="gotoMain()" 
+					class="button" value="Return to main"></td>
+		</table>
 </tr>
 </tr>
-	<td id="prefContent" class="prefContent" valign="top" colspan="2">
+	<td id="prefContent" class="prefContent" valign="top">
 		<h2>Feed Configuration</h2><div id="piggie">&nbsp;</div>
 
-
 		<div class="expPane" id="feedConfPane">
 			<a class="button" 
 				href="javascript:expandPane('feedConfPane')">Expand section &gt;</a>
@@ -61,7 +60,7 @@
 	</td>
 </tr>
 <tr>
-	<td colspan="2" class="notify">
+	<td class="footer">
 		<a href="http://bah.spb.su/~fox/tt-rss/">Tiny-Tiny RSS</a> v<?= VERSION ?> &copy; 2005 Andrew Dolgov
 		<? if (WEB_DEMO_MODE) { ?>
 		<br>Running in demo mode, some functionality is disabled.
diff --git a/tt-rss.css b/tt-rss.css
index 37518b3d1..40d959d7d 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -6,217 +6,239 @@ body {
 	font-family : sans-serif;
 }
 
-h1 {
-	font-size : 16pt;	
-}
-
-h2 {
-	font-size : 14pt;
-	font-color : bold;
-	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	border-color : #e0e0e0;
-}
-
-hr {
-	border-width : 0px 0px 1px 0px;
-	border-style : dashed;
-	border-color : #e0e0e0;
-}
-
-a {
-	color : black;
-	text-decoration : none;
-}
+/* common styles */
 
-a:hover {
-	color : #5050aa;
+table.main td.header {
+	padding : 10px 10px 10px 50px;
+	height : 90px;
+	font-size : 24pt;
+	font-weight : bold;	
+	background-image : url("images/vgrad_light_rev2.png");
+	background-position : top left;
+	background-repeat : repeat-x;
 }
 
-table.postTable a {
-	color : #5050aa;
+table.main td.mainToolbar {
+	border-width : 0px 0px 0px 0px;
+	border-style : solid;
+	border-color : #c0c0c0;
+	padding : 10px 25px 10px 10px;
 }
 
-table.postTable a:hover {
-	color : black;
+table.main td.feeds {
+	width : 300px;
+	height : 100%;
+	border-width : 1px 0px 0px 0px;
+	border-style : solid;
+	border-color : #c0c0c0;
+	padding : 5px;
 }
 
-td.headlinesToolbar {
+table.main td.headlinesToolbarBox {
 	padding : 10px;
-}
-
-table.headlinesList td.title, table.headlinesHeader td.title {
-	font-weight : bold;
-	font-size : large;
-	border-width : 0px 0px 1px 0px;
-	border-color : #d0d0d0;
+	border-width : 0px 0px 1px 1px;
 	border-style : solid;
-	text-align : right;
-	padding-bottom : 3px;
+	border-color : #c0c0c0;
+	background-image : url("images/vgrad_light.png");
+	background-position : bottom left;
+	background-repeat : repeat-x;
 }
 
-table.headlinesList td.feedLastUpdateNotice {
-	font-size : x-small;
-	border-width : 0px 0px 1px 0px;
-	border-color : #d0d0d0;
+table.main td.footer {
+	border-width : 1px 0px 0px 0px;
 	border-style : solid;
-	text-align : left;
-	padding-bottom : 3px;
-	color : #a0a0a0;
+	border-color : #c0c0c0;
+	padding : 10px;
+	text-align : center;
+	font-size : x-small;
+	background-image : url("images/vgrad_light_rev2.png");
+	background-position : top left;
+	background-repeat : repeat-x;
+	color : gray;
 }
 
-table.headlinesList td.headlineUpdated {
-	width : 200px;
+table.main td.footer a {
+	color : gray;
 }
 
-input {
-	border : 1px solid #a0a0a0;
+table.main td.footer a:hover {
+	color : #5050aa;
 }
 
-table.main td.toolbar {
-	height : 40px;
-	background-color : #f0f0f0;
-	padding-right : 10px;
-	padding-left : 10px;
-	font-size : small;
+table.main td.headlines {
+	height : 25%;
+	border-width : 0px 0px 1px 1px;
+	border-style : solid;
+	border-color : #c0c0c0;
 }
 
-#notify {
-	font-weight : bold;
-	border : 1px solid #c0c0c0;
-	font-size : small;
-	display : none;
-	background : white;
-	-moz-border-radius : 5px;
-	padding : 2px 5px 2px 5px;
-	width : 300px;
+table.main td.content {
+	height : 100%;
+	background-image : url("images/vgrad_light_rev.png");
+	background-position : top left;
+	background-repeat : repeat-x;
+	border-width : 0px 0px 0px 1px;
+	border-style : solid;
+	border-color : #c0c0c0;
 }
 
-table.feedsList td {
-	font-size : x-small;
+table.main td.prefContent {
+	height : 100%;
+	background-image : url("images/vgrad_light_rev.png");
+	background-position : top left;
+	background-repeat : repeat-x;
+	border-width : 1px 0px 0px 0px;
+	border-style : solid;
+	border-color : #c0c0c0;
+	padding : 20px;
 }
 
-table.main td.header {
-	font-size : 21pt;
-	background-color : #f0f0f0;
-	background-image : url("images/header.png");
+div.postReply {
+	background-image : url("images/vgrad_light_rev.png");
 	background-position : top left;
 	background-repeat : repeat-x;
-	height : 50px;
-	padding-left : 80px;
-	padding-top : 30px;
-	font-weight : bold;
-	color : black;
+	height : 100%;
+	padding : 10px;
 }
 
-table.main td.feeds {
-	width : 300px;
-	border-width : 1px 1px 0px 0px;
-	border-color : #c0c0c0;
-	border-style : solid;
+div.postReply div.postHeader {
+	background : white;
+	border : 1px solid #c0c0c0;
 	padding : 5px;
 }
 
-div.headlineToolbar {
-	border-width : 1px 0px 0px 0px;
-	border-color : #c0c0c0;
-	border-style : solid;
+div.postReply div.postContent {
 	padding : 10px;
 }
 
-td.articleToolbar {
-	border-width : 0px 0px 1px 0px;
-	border-color : #c0c0c0;
-	border-style : solid;
-	padding : 10px;
-	background : #f0f0f0;
+div.postReply div.postIcon {
+	float : right;
+	border : 0px;
+	margin : 10px;
 }
-table.main td.headlines {
-	height : 25%;
-	border-width : 1px 0px 0px 0px;
-	border-color : #c0c0c0;
-	border-style : solid;
-	font-size : small;
+
+ul.feedList {
+	list-style-type : none;
+	margin : 0px;
+	padding : 10px;	
 }
 
-table.main td.prefContent {
-	padding : 10px;
-	border-width : 1px 0px 0px 0px;
-	border-color : #c0c0c0;
-	border-style : solid;
+ul.feedList li {
+	margin : 2px;
+}
+
+ul.feedList li.oddSelected, ul.feedList li.evenSelected,
+	li.oddUnreadSelected, li.evenUnreadSelected {
+	background-color : white;
+} 
+
+li.oddSelected a, li.evenSelected a,
+	li.oddUnreadSelected a, li.evenUnreadSelected a {
+	color : #5050aa;
+} 
 
+ul.feedList img {
+	margin : 0px 3px 0px 0px;
+	width : 16px;
+	height : 16px;
 }
 
-table.main td.headlinesToolbarBox {
-	padding : 0px;
-	height : 20px;
-	border-width : 1px 0px 0px 0px;
-	border-color : #c0c0c0;
-	border-style : solid;
+h1 {
+	font-size : 16pt;	
 }
 
-table.main td.content {
-	padding : 0px;
-	border-width : 1px 0px 0px 0px;
-	border-color : #c0c0c0;
+h2 {
+	font-size : 14pt;
+	font-color : bold;
+	border-width : 0px 0px 1px 0px;
 	border-style : solid;
+	border-color : #e0e0e0;
 }
 
-table.main td.notify {
-	height : 40px;
-	border-width : 1px 0px 0px 0px;
-	border-color : #c0c0c0;
-	border-style : solid;
-	font-size : x-small;
-	text-align : center;
-	color : gray;
-	background-color : #f0f0f0;
-	background-image : url("images/header_rev.png");
-	background-position : top left;
-	background-repeat : repeat-x;
+hr {
+	border-width : 0px 0px 1px 0px;
+	border-style : dashed;
+	border-color : #e0e0e0;
+}
 
+a {
+	color : black;
+	text-decoration : none;
 }
 
-.evenGrayed {
-	background-color : #f0f0f0;
-	color : #909090;
+a:hover {
+	color : #5050aa;
 }
 
-.oddGrayed {
-	color : #909090;
+#piggie {
+	width : 400;
+	height : 400;
+	left : 50;
+	background-color : white;
+	display : none;
+	z-index : 3;
+	background-image : url("http://madoka.spb.ru/stuff/fox/piggie.png");
+	background-position : center center;
+	background-repeat : no-repeat;
+	position : absolute;
+	border : 1px solid pink;	
+	margin-left : auto;
+	margin-right : auto;
+	-moz-border-radius : 10px;
+	opacity : 0.8;
 }
 
-.even {
-	background-color : #f0f0f0;
+#iedit_title, #iedit_link, #iedit_regexp, #iedit_descr {
+	width : 100%;
+	padding-left : 2px;
 }
 
-.evenUnread {
-	background-color : #f0f0f0;
+#notify {
 	font-weight : bold;
+	font-size : small;
+	display : none;
+	width : 350px;
+	color : gray;
 }
 
-.oddUnread {
-	font-weight : bold;
+div.expPane {
+	margin : 15px;
 }
 
-.invisible {
-	display : none;
+iframe.feedsFrame {
+	width : 100%;
+	height : 90%;
+	border-width : 0px;
+	margin : 0px;
+	padding : 0px;
 }
 
-table.prefAddFeed td {
-	padding : 2px;
+iframe.contentFrame, iframe.headlinesFrame {
+	width : 100%;
+	border-width : 0px;
+	padding : 0px;
+	margin : 0px;
+	height : 100%;
 }
 
-table.prefAddFeed input {
-	width : 250px;
+.button {
+	border : 1px solid #d0d0d0;
+	background-image : url("images/button.png");
+	background-position : top;
+	background-repeat : repeat-x;
+	background-color : white;
+	color : black;	
 }
 
-table.prefFeedList tr.title td, table.prefFilterList tr.title td,
-	table.headlinesList tr.title td {
-	font-weight : bold;
-	border-width : 0px 0px 1px 0px;
-	border-color : #f0f0f0;
-	border-style : solid;
+.button:hover {
+	background : white;
+	text-decoration : none;
+	color : black;
+}
+
+a.button {
+	padding : 2px 5px 2px 5px;
+	font-size : small;
 }
 
 .evenUnreadSelected, .evenSelectedUnread {
@@ -251,132 +273,51 @@ table.prefFeedList tr.title td, table.prefFilterList tr.title td,
 	color : #909090;
 }
 
-.button {
-	border : 1px solid #d0d0d0;
-	background-image : url("images/button.png");
-	background-position : top;
-	background-repeat : repeat-x;
-	background-color : white;
-	color : black;	
-}
-
-/* .button:hover {
-	background : white;
-	text-decoration : none;
-	color : black;
-} */
-
-a.button {
-	padding : 2px 5px 2px 5px;
-}
-
-
-.buttonWarn {
-	border : 1px solid #d0d0d0;
-	background-image : url("images/button.png");
-	background-position : top;
-	background-repeat : repeat-x;
-	background-color : white;
-	color : black;	
-	padding : 2px 5px 2px 5px;
-	font-size : small;
-}
-
-.buttonWarn:hover {
-	background : #fff0f0;
-	text-decoration : none;
-	color : black;
-}
-
-td.headlineUpdateMark {
-	width : 25px;
-	text-align : center;
-}
-
-div.errorBox {
-	border : 1px solid #c0c0c0;
-	padding : 20px;
-	margin : 20px;
-	background : #f0f0f0;
-}
-
-tr.titleTop, tr.titleBottom, tr.titleTopBottom {
-	background : #f0f0f0;
-}
-
-td.titleIcon {
-	border-width : 0px 0px 1px 0px;
-	border-color : #d0d0d0;
-	border-style : solid;
+.evenGrayed {
+	background-color : #f0f0f0;
+	color : #909090;
 }
 
-tr.titleTop td {
-	padding : 5px 10px 0px 10px;
+.oddGrayed {
+	color : #909090;
 }
 
-tr.titleBottom td {
-	padding : 3px 10px 5px 10px;
-	border-width : 0px 0px 1px 0px;
-	border-color : #d0d0d0;
-	border-style : solid;
+.even {
+	background-color : #f0f0f0;
 }
 
-tr.titleTopBottom td {
-	padding : 3px 10px 5px 10px;
-	border-width : 1px 0px 1px 0px;
-	border-color : #d0d0d0;
-	border-style : solid;
+.evenUnread {
+	background-color : #f0f0f0;
+	font-weight : bold;
 }
 
-td.post {
-	padding : 20px;
+.oddUnread {
+	font-weight : bold;
 }
 
-#piggie {
-	width : 400;
-	height : 400;
-	left : 50;
-	background-color : white;
+.invisible {
 	display : none;
-	z-index : 3;
-	background-image : url("http://madoka.spb.ru/stuff/fox/piggie.png");
-	background-position : center center;
-	background-repeat : no-repeat;
-	position : absolute;
-	border : 1px solid pink;	
-	margin-left : auto;
-	margin-right : auto;
-	-moz-border-radius : 10px;
-	opacity : 0.8;
 }
 
-img.feedIcon {
-	margin : 3px;
-	border : 1px solid #c0c0c0;
+input {
+	border : 1px solid #a0a0a0;
 }
 
-#iedit_title, #iedit_link, #iedit_regexp, #iedit_descr {
-	width : 100%;
-	padding-left : 2px;
-}
+/* preferences */
 
-div.expPane {
-	margin : 15px;
+table.prefAddFeed td {
+	padding : 2px;
 }
 
-iframe.feedsFrame {
-	width : 100%;
-	height : 90%;
-	border-width : 0px;
-	margin : 0px;
-	padding : 0px;
+table.prefAddFeed input {
+	width : 250px;
 }
 
-iframe.contentFrame, iframe.headlinesFrame {
-	width : 100%;
-	border-width : 0px;
-	padding : 0px;
-	margin : 0px;
-	height : 100%;
+table.prefFeedList tr.title td, table.prefFilterList tr.title td,
+	table.headlinesList tr.title td {
+	font-weight : bold;
+	border-width : 0px 0px 1px 0px;
+	border-color : #f0f0f0;
+	border-style : solid;
 }
 
diff --git a/tt-rss.js b/tt-rss.js
index 2bd19f138..d8e9dc6a8 100644
--- a/tt-rss.js
+++ b/tt-rss.js
@@ -62,7 +62,7 @@ function feedlist_callback() {
 function refetch_callback() {
 
 	if (xmlhttp_rpc.readyState == 4) {
-		notify("All feeds updated");
+		notify("All feeds updated.");
 
 		active_feed_id = frames["feeds-frame"].document.getElementById("ACTFEEDID").innerHTML;
 		
diff --git a/tt-rss.php b/tt-rss.php
index e240365ef..2428b1d17 100644
--- a/tt-rss.php
+++ b/tt-rss.php
@@ -15,12 +15,20 @@
 <table width="100%" height="100%" cellspacing=0 cellpadding=0 class="main">
 <tr>
 	<td class="header" valign="middle" colspan="2">	
-			Tiny Tiny RSS
+		<img src="images/ttrss_logo.png" alt="logo">	
 	</td>
 </tr>
 <tr>
-	<td class="toolbar" colspan="2">
-		<table width="100%" cellspacing="0" cellpadding="0">
+	<td class="mainToolbar" colspan="2">
+	
+		<table width='100%' cellspacing='0' cellpadding='0'>	
+			<td><span id="notify"><span id="notify_body"></span></td>
+			<td align='right'>
+				<input type="submit" onclick="gotoPreferences()" 
+					class="button" value="Preferences"></td>
+		</table>
+	
+		<!-- <table width="100%" cellspacing="0" cellpadding="0">
 		<td valign="middle">
 			<table id="notify"><tr><td width="100%" id="notify_body">&nbsp;</td>
 			<td><img onclick="javascript:notify('')" alt="Close" 
@@ -28,7 +36,7 @@
 		</td>
 		<td class="toolbar" valign="middle" align="right">
 			<a href="prefs.php" class="button">Preferences</a></td>
-		</tr></table>
+		</tr></table> -->
 	</td>
 </tr>
 <tr>
@@ -50,7 +58,7 @@
 
 	</td>
 	<td valign="top" class="headlinesToolbarBox">
-		<table width="100%">
+		<table width="100%" cellpadding="0" cellspacing="0">
 		
 		<!-- <tr><td id="headlinesTitle" class="headlinesTitle">
 			&nbsp;
@@ -91,7 +99,8 @@
 </tr><tr>
 	<td id="headlines" class="headlines" valign="top">
 		<iframe name="headlines-frame" 
-			id="headlines-frame" class="headlinesFrame"> </iframe>
+			id="headlines-frame" class="headlinesFrame" 
+				src="backend.php?op=error&msg=No%20feed%20selected."></iframe>
 	</td>
 </tr><tr>
 	<td class="content" id="content" valign="top">
@@ -99,7 +108,7 @@
 	</td>
 </tr>
 <tr>
-	<td colspan="2" class="notify">
+	<td colspan="2" class="footer">
 		<a href="http://bah.spb.su/~fox/tt-rss/">Tiny-Tiny RSS</a> v<?= VERSION ?> &copy; 2005 Andrew Dolgov
 		<? if (WEB_DEMO_MODE) { ?>
 		<br>Running in demo mode, some functionality is disabled.
diff --git a/viewfeed.js b/viewfeed.js
index 55656cd11..957357a62 100644
--- a/viewfeed.js
+++ b/viewfeed.js
@@ -31,19 +31,29 @@ function view(id, feed_id) {
 
 	var crow = document.getElementById("RROW-" + id);
 
+	var f_doc = parent.frames["feeds-frame"].document;
+
 	if (crow.className.match("Unread")) {
-		var umark = parent.frames["feeds-frame"].document.getElementById("FEEDU-" + feed_id);
+		var umark = f_doc.getElementById("FEEDU-" + feed_id);
+		
 		umark.innerHTML = umark.innerHTML - 1;
 		crow.className = crow.className.replace("Unread", "");
 
 		if (umark.innerHTML == "0") {
-			var feedr = parent.frames["feeds-frame"].document.getElementById("FEEDR-" + feed_id);			
+			var feedr = f_doc.getElementById("FEEDR-" + feed_id);	
 			feedr.className = feedr.className.replace("Unread", "");
+
+			var feedctr = f_doc.getElementById("FEEDCTR-" + feed_id);
+
+			if (feedctr) {
+				feedctr.innerHTML = "";
+			}
 		}
 
 		total_unread--;
 	}	
 
+
 	cleanSelected("headlinesList");
 
 	var upd_img_pic = document.getElementById("FUPDPIC-" + id);