Address book styling for Larry; show about page in UI dialog

15 files changed, 502 insertions, 187 deletions

diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index 57a1b0da4..c1a8e54dc 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -90,6 +90,22 @@
 	background-position: 32px -1579px;
 }
 
+#directorylist li.contactgroup input {
+	margin-left: 36px;
+}
+
+#directorylist li.contactsearch a {
+	background-position: 6px -1651px;
+}
+
+#directorylist li.contactsearch.selected a {
+	background-position: 6px -1675px;
+}
+
+#directorylist li.contactsearch input {
+	margin-left: 8px;
+}
+
 #contacts-table .contact td.name {
 	background-position: 6px -1603px;
 }
@@ -141,12 +157,16 @@
 
 #contacthead {
 	border: 0;
-	margin: 0 20em 1em 0;
+	margin: 0 16em 1em 0;
 	padding: 0;
 	line-height: 1.5em;
 	font-size: 12px;
 }
 
+form #contacthead {
+	margin-right: 0;
+}
+
 #contacthead .names span.namefield,
 #contacthead .names input {
 	font-size: 140%;
@@ -180,6 +200,84 @@
 	width: 90px;
 }
 
+.contactfieldgroup {
+	border: 0;
+	border-radius: 5px;
+	background: #f7f7f7;
+	background: -moz-linear-gradient(top, #f7f7f7 0%, #eee 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eee));
+	background: -o-linear-gradient(top, #f7f7f7 0%, #eee 100%);
+	background: -ms-linear-gradient(top, #f7f7f7 0%, #eee 100%);
+	background: linear-gradient(top, #f7f7f7 0%, #eee 100%);
+	margin: 0 0 12px 0;
+	padding: 8px;
+}
+
+.contactfieldgroup legend {
+	display: block;
+	margin: 0 -8px;
+	width: 100%;
+	font-weight: bold;
+	text-shadow: 0px 1px 1px #fff;
+	padding: 6px 8px 3px 8px;
+	background: #f0f0f0;
+	background: -moz-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#d6d6d6));
+	background: -o-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
+	background: -ms-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
+	background: linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
+	border-bottom: 1px solid #cfcfcf;
+	border-radius: 5px 5px 0 0;
+}
+
+.contactfieldgroup .row {
+	position: relative;
+	margin: 0.2em 0;
+}
+
+.contactfieldgroup .contactfieldlabel {
+	position: absolute;
+	top: 0;
+	left: 2px;
+	width: 110px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: #666;
+}
+
+.contactfieldgroup .contactfieldlabel select {
+	width: 100%;
+	color: #666;
+}
+
+.contactfieldgroup .contactfieldcontent {
+	padding-left: 120px;
+	min-height: 1em;
+	line-height: 1.3em;
+}
+
+.contactfieldgroup .contactfield {
+	line-height: 1.3em;
+}
+
+.contactcontrolleraddress .contactfieldcontent input {
+	margin-bottom: 0.1em;
+}
+
+.contactfieldcontent.composite {
+	padding-bottom: 8px;
+}
+
+.contactfieldcontent .contactfieldbutton {
+	vertical-align: middle;
+	margin-left: 0.5em;
+}
+
+.contactfield .ff_notes {
+	width: 99%;
+}
+
 a.deletebutton {
 	position: relative;
 	left: 5px;
@@ -189,5 +287,5 @@ a.deletebutton {
 	height: 18px;
 	text-decoration: none;
 	text-indent: -1000px;
-	background: url(images/buttons.png) -7px -337px no-repeat;
+	background: url(images/buttons.png) -7px -377px no-repeat;
 }
diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png
index 438768f91..0e3bf3ff8 100644
--- a/skins/larry/images/buttons.png
+++ b/skins/larry/images/buttons.png
diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png
index 5f4473fdd..abd6dc0cb 100644
--- a/skins/larry/images/listicons.png
+++ b/skins/larry/images/listicons.png
diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html
index 2fd6774fe..b088e4fb7 100644
--- a/skins/larry/includes/header.html
+++ b/skins/larry/includes/header.html
@@ -1,9 +1,9 @@
 <div id="header">
 <div id="topline">
 	<div class="topleft">
-		<roundcube:button command="about" type="link" label="about" class="about-link" />
+		<roundcube:button name="about" type="link" label="about" class="about-link" onclick="UI.show_about(this);return false" />
 		<roundcube:if condition="config:support_url" />
-		<a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
+		<a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link" id="supportlink"><roundcube:label name="support" /></a>
 		<roundcube:endif />
 	</div>
 	<div class="topright">
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index d7cb212d7..7e0c5cb75 100644
--- a/skins/larry/includes/mailtoolbar.html
+++ b/skins/larry/includes/mailtoolbar.html
@@ -42,7 +42,7 @@
 </div>
 
 <div id="messagemenu" class="popupmenu">
-  <ul class="toolbarmenu">
+  <ul class="toolbarmenu iconized">
 	<li><roundcube:button command="print" label="printmessage" class="icon" classAct="icon active" innerclass="icon print" /></li>
 	<li><roundcube:button command="download" label="emlsave" class="icon" classAct="icon active" innerclass="icon download" /></li>
 	<li><roundcube:button command="edit" label="editasnew" class="icon" classAct="icon active" innerclass="icon edit" /></li>
@@ -54,7 +54,7 @@
 
 <roundcube:if condition="template:name == 'mail'" />
 <div id="markmessagemenu" class="popupmenu">
-  <ul class="toolbarmenu">
+  <ul class="toolbarmenu iconized">
 	<li><roundcube:button command="mark" prop="read" label="markread" classAct="icon active" class="icon" innerclass="icon read" /></li>
 	<li><roundcube:button command="mark" prop="unread" label="markunread" classAct="icon active" class="icon" innerclass="icon unread" /></li>
 	<li><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="icon active" class="icon" innerclass="icon flagged" /></li>
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 44721c551..1381e2dc2 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -90,21 +90,21 @@
 a.iconbutton.listmode {
 	width: 26px;
 	height: 20px;
-	background-position: 0 -437px;
+	background-position: 0 -477px;
 }
 
 a.iconbutton.threadmode {
 	width: 26px;
 	height: 20px;
-	background-position: 0 -457px;
+	background-position: 0 -497px;
 }
 
 a.iconbutton.listmode.selected {
-	background-position: -26px -437px;
+	background-position: -26px -477px;
 }
 
 a.iconbutton.threadmode.selected {
-	background-position: -26px -457px;
+	background-position: -26px -497px;
 }
 
 #mailboxlist li.mailbox {
@@ -167,6 +167,14 @@ a.iconbutton.threadmode.selected {
 	background-position: 6px -406px;
 }
 
+#mailboxlist li.archive > a {
+	background-position: 6px -1699px;
+}
+
+#mailboxlist li.archive.selected > a {
+	background-position: 6px -1723px;
+}
+
 #mailboxlist li.virtual > a {
 	color: #aaa;
 }
@@ -283,95 +291,16 @@ a.iconbutton.threadmode.selected {
 	right: 2px;
 	width: 20px;
 	height: 18px;
-	background: url(images/buttons.png) -3px -418px no-repeat;
+	background: url(images/buttons.png) -3px -458px no-repeat;
 }
 
 #mailpreviewtoggle.enabled {
-	background-position: -28px -418px;
+	background-position: -28px -458px;
 }
 
 
 /*** message list ***/
 
-.boxlistcontent table {
-	display: table;
-	width: 100%;
-	table-layout: fixed;
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-.boxlistcontent thead tr td {
-	font-weight: bold;
-	background: #d6eaf3;
-	background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
-	background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(14px,#d6eaf3), color-stop(100%,#d6eaf3));
-	background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
-	background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
-	background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
-	border-left: 1px solid #bbd3da;
-}
-
-.boxlistcontent thead tr td a,
-.boxlistcontent thead tr td span {
-	display: block;
-	padding: 8px 7px;
-	color: #69939e;
-	text-decoration: none;
-}
-
-.boxlistcontent tbody tr td {
-	padding: 3px 7px;
-	border-bottom: 1px solid #ddd;
-	border-left: 1px dotted #bbd3da;
-	white-space: nowrap;
-	cursor: default;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.boxlistcontent thead tr td:first-child,
-.boxlistcontent tbody tr td:first-child {
-	border-left: 0;
-}
-
-.boxlistcontent tbody tr td a {
-	color: #333;
-	text-decoration: none;
-	white-space: nowrap;
-	cursor: default;
-}
-
-.boxlistcontent tr.selected td {
-	color: #fff !important;
-	background: #019bc6;
-	background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4));
-	background: -o-linear-gradient(top, #019bc6 0%, #017cb4 100%);
-	background: -ms-linear-gradient(top, #019bc6 0%, #017cb4 100%);
-	background: linear-gradient(top, #019bc6 0%, #017cb4 100%);
-}
-
-.boxlistcontent tr.selected td a,
-.boxlistcontent tr.selected td span {
-	color: #fff !important;
-}
-
-.boxlistcontent tr.unfocused td {
-	color: #fff !important;
-	background: #4db0d2;
-}
-
-.boxlistcontent tr.unfocused td a,
-.boxlistcontent tr.unfocused td span {
-	color: #fff !important;
-}
-
-.boxlistcontent tr.deleted td,
-.boxlistcontent tr.deleted td a {
-	color: #ccc !important;
-}
-
 #messagelist tr td.attachment,
 #messagelist tr td.threads,
 #messagelist tr td.status,
@@ -381,11 +310,11 @@ a.iconbutton.threadmode.selected {
 	padding: 4px 3px;
 }
 
-html.chrome #messagelist tr td.attachment,
-html.chrome #messagelist tr td.threads,
-html.chrome #messagelist tr td.status,
-html.chrome #messagelist tr td.flag,
-html.chrome #messagelist tr td.priority {
+.chrome #messagelist tr td.attachment,
+.chrome #messagelist tr td.threads,
+.chrome #messagelist tr td.status,
+.chrome #messagelist tr td.flag,
+.chrome #messagelist tr td.priority {
 	width: 26px;
 }
 
@@ -393,7 +322,7 @@ html.chrome #messagelist tr td.priority {
 	width: 26px;
 }
 
-html.chrome #messagelist tr td.threads {
+.chrome #messagelist tr td.threads {
 	width: 30px;
 }
 
@@ -807,18 +736,6 @@ h3.subject {
 #message-objects div a.button,
 #messagebody span.part-notice a.button {
 	margin-left: 10px;
-	box-shadow: 0 1px 1px 0 #e8e386;
-	-o-box-shadow: 0 1px 1px 0 #e8e386;
-	-webkit-box-shadow: 0 1px 1px 0 #e8e386;
-	-moz-box-shadow: 0 1px 1px 0 #e8e386;
-}
-
-#message-objects div a.button:hover,
-#messagebody span.part-notice a.button:hover {
-	box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
-	-moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
-	-webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
-	-o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
 }
 
 div.message-part,
@@ -1095,12 +1012,12 @@ div.message-part blockquote blockquote blockquote {
 	left: 6px;
 	width: 20px;
 	height: 18px;
-	background: url(images/buttons.png) -3px -418px no-repeat;
+	background: url(images/buttons.png) -3px -458px no-repeat;
 	text-decoration: none;
 }
 
 #composeoptionstoggle.enabled {
-	background-position: -28px -418px;
+	background-position: -28px -458px;
 }
 
 #composeview-bottom {
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index 05a587a8b..105b3506b 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -182,3 +182,12 @@
 	text-align: right;
 }
 
+#pluginlist td.version {
+	width: 5em;
+}
+
+#pluginlist td.license,
+#pluginlist td.source {
+	width: 8em;
+}
+
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 48c8c6fb6..875125bd6 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -78,10 +78,10 @@ input.button {
 	background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
 	background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
 	background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
-	box-shadow: 0 1px 1px 0 #ccc;
-	-o-box-shadow: 0 1px 1px 0 #ccc;
-	-webkit-box-shadow: 0 1px 1px 0 #ccc;
-	-moz-box-shadow: 0 1px 1px 0 #ccc;
+	box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+	-o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+	-webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+	-moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
 	text-decoration: none;
 	outline: none;
 }
@@ -94,11 +94,11 @@ input.button {
 	border-color: #465864;
 	border-radius: 5px;
 	background: #7a7b7d;
-	background: -moz-linear-gradient(top, rgba(123,123,123,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(123,123,123,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
-	background: -o-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
-	background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
+	background: -moz-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#606060)); /* Chrome,Safari4+ */
+	background: -o-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* IE10+ */
+	background: linear-gradient(top, #7b7b7b 0%, #606060 100%); /* W3C */
 	box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
 	-o-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
 	-webkit-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
@@ -117,32 +117,32 @@ input.button {
 
 .formbuttons input.button:active {
 	color: #fff;
-	background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(123,123,123,1) 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(123,123,123,1)));
-	background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
-	background: -ms-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
-	background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
+	background: -moz-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(100%,#7b7b7b));
+	background: -o-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
+	background: -ms-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
+	background: linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
 }
 
 input.button.mainaction {
 	color: #ededed;
 	border-color: #1f262c;
 	background: #505050;
-	background: -moz-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(42,46,49,1) 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,82,1)), color-stop(100%,rgba(42,46,49,1)));
-	background: -o-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
-	background: -ms-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
-	background: linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
+	background: -moz-linear-gradient(top, #505050 0%, #2a2e31 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(100%,#2a2e31));
+	background: -o-linear-gradient(top, #505050 0%, #2a2e31 100%);
+	background: -ms-linear-gradient(top, #505050 0%, #2a2e31 100%);
+	background: linear-gradient(top, #505050 0%, #2a2e31 100%);
 }
 
 input.button.mainaction:active {
 	color: #fff;
 	background: #515151;
-	background: -moz-linear-gradient(top, #515151 0%, #2c2c2c 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515151), color-stop(100%,#2c2c2c));
-	background: -o-linear-gradient(top, #515151 0%, #2c2c2c 100%);
-	background: -ms-linear-gradient(top, #515151 0%, #2c2c2c 100%);
-	background: linear-gradient(top, #515151 0%, #2c2c2c 100%);
+	background: -moz-linear-gradient(top, #2a2e31 0%, #505050 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2e31), color-stop(100%,#505050));
+	background: -o-linear-gradient(top, #2a2e31 0%, #505050 100%);
+	background: -ms-linear-gradient(top, #2a2e31 0%, #505050 100%);
+	background: linear-gradient(top, #2a2e31 0%, #505050 100%);
 }
 
 input.button[disabled],
@@ -171,21 +171,21 @@ a.button {
 	background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
 	background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
 	background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
-	box-shadow: 0 1px 1px 0 #ccc;
-	-o-box-shadow: 0 1px 1px 0 #ccc;
-	-webkit-box-shadow: 0 1px 1px 0 #ccc;
-	-moz-box-shadow: 0 1px 1px 0 #ccc;
+	box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+	-o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+	-webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+	-moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
 	text-decoration: none;
 }
 
-a.button:hover,
-input.button:hover,
+a.button:focus,
 input.button:focus {
 	border-color: #4fadd5;
 	box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
 	-moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
 	-webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
 	-o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
+	outline: none;
 }
 
 label.disabled,
@@ -200,10 +200,10 @@ a.button.disabled:hover,
 input.button.disabled:hover,
 input.button[disabled]:hover {
 	border-color: #c6c6c6;
-	box-shadow: 0 1px 1px 0 #ddd;
-	-o-box-shadow: 0 1px 1px 0 #ddd;
-	-webkit-box-shadow: 0 1px 1px 0 #ddd;
-	-moz-box-shadow: 0 1px 1px 0 #ddd;
+	box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
+	-o-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
+	-webkit-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
+	-moz-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
 }
 
 a.button.disabled span.inner {
@@ -247,6 +247,7 @@ input.button:active {
 
 .pagenav a.button {
 	padding: 1px 3px;
+	height: 16px;
 }
 
 .pagenav a.button span.inner {
@@ -339,16 +340,28 @@ a.iconlink:hover {
 	text-decoration: underline;
 }
 
+a.iconlink.delete {
+	background-position: -7px -337px;
+}
+
 a.iconlink.add {
 	background-position: -7px -357px;
 }
 
-a.iconlink.edit {
+a.iconlink.remove {
+	background-position: -7px -377px;
+}
+
+a.iconlink.cancel {
 	background-position: -7px -397px;
 }
 
-a.iconlink.delete {
-	background-position: -7px -337px;
+a.iconlink.edit {
+	background-position: -7px -417px;
+}
+
+a.iconlink.upload {
+	background-position: -6px -437px;
 }
 
 
@@ -548,6 +561,10 @@ a.iconlink.delete {
 	top: 130px;
 }
 
+#mainscreen .offset {
+	margin-top: 42px;
+}
+
 .uibox {
 	border: 1px solid #a3a3a3;
 	border-radius: 4px;
@@ -565,6 +582,7 @@ a.iconlink.delete {
 .readtext {
 	width: 42em;
 	padding: 12px;
+	font-size: 12px;
 }
 
 .readtext > h1,
@@ -651,8 +669,11 @@ a.iconlink.delete {
 
 .listbox .listitem.selected,
 .listbox .tablink.selected,
+.listbox .listitem.selected a,
+.listbox .tablink.selected a,
 .listing tbody tr.selected td,
-.listing li.selected {
+.listing li.selected,
+.listing li.selected a {
 	color: #004458;
 	font-weight: bold;
 }
@@ -695,6 +716,8 @@ table.layout td {
 	-webkit-box-shadow: inset 0 1px 0 0 #fff;
 	-moz-box-shadow: inset 0 1px 0 0 #fff;
 	box-shadow: inset 0 1px 0 0 #fff;
+	white-space: nowrap;
+	overflow: hidden;
 }
 
 .boxfooter .listbutton {
@@ -707,10 +730,6 @@ table.layout td {
 	margin-top: 1px;
 }
 
-.boxfooter .listbutton.disabled {
-	opacity: 0.4;
-}
-
 .boxfooter .listbutton .inner {
 	display: inline-block;
 	width: 48px;
@@ -720,20 +739,65 @@ table.layout td {
 }
 
 .boxfooter .listbutton.add .inner {
-	background-position: 10px -1211px;
+	background-position: 10px -1291px;
 }
 
 .boxfooter .listbutton.delete .inner {
-	background-position: 10px -1252px;
+	background-position: 10px -1332px;
 }
 
 .boxfooter .listbutton.groupactions .inner {
-	background-position: 5px -1292px;
+	background-position: 5px -1372px;
+}
+
+.boxfooter .listbutton.disabled .inner {
+	opacity: 0.4;
+}
+
+.boxfooter .countdisplay {
+	display: inline-block;
+	position: relative;
+	top: 10px;
+	color: #69929e;
+	padding: 3px 6px;
+}
+
+.boxpagenav {
+	position: absolute;
+	top: 10px;
+	right: 6px;
+	width: auto;
+}
+
+.boxpagenav a.icon {
+	display: inline-block;
+	padding: 1px 3px;
+	height: 13px;
+	width: 14px;
+	text-indent: 1000px;
+	overflow: hidden;
+	background: url(images/buttons.png) -4px -286px no-repeat;
+}
+
+.boxpagenav a.icon.prevpage {
+	background-position: -4px -301px;
+}
+
+.boxpagenav a.icon.nextpage {
+	background-position: -28px -301px;
+}
+
+.boxpagenav a.icon.lastpage {
+	background-position: -28px -286px;
+}
+
+.boxpagenav a.icon.disabled {
+	opacity: 0.4;
 }
 
 .centerbox {
 	width: 40em;
-	margin: 36px auto;
+	margin: 16px auto;
 }
 
 .errorbox {
@@ -747,11 +811,117 @@ table.layout td {
 }
 
 
+/*** Records table ***/
+
+table.records-table {
+	display: table;
+	width: 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+	border-spacing: 0;
+	border: 1px solid #bbd3da;
+}
+
+.boxlistcontent .records-table {
+	border: 0;
+}
+
+.records-table thead td {
+	color: #69939e;
+	font-size: 11px;
+	font-weight: bold;
+	background: #d6eaf3;
+	background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
+	background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(14px,#d6eaf3), color-stop(100%,#d6eaf3));
+	background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
+	background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
+	background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
+	border-left: 1px solid #bbd3da;
+	padding: 8px 7px;
+}
+
+.records-table.sortheader thead td {
+	padding: 0;
+}
+
+.records-table thead td a,
+.records-table thead td span {
+	display: block;
+	padding: 8px 7px;
+	color: #69939e;
+	text-decoration: none;
+}
+
+.records-table tbody td {
+	padding: 3px 7px;
+	border-bottom: 1px solid #ddd;
+	border-left: 1px dotted #bbd3da;
+	white-space: nowrap;
+	cursor: default;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	background-color: #fff;
+}
+
+.records-table thead tr td:first-child,
+.records-table tbody tr td:first-child {
+	border-left: 0;
+}
+
+.records-table tbody td a {
+	color: #333;
+	text-decoration: none;
+	white-space: nowrap;
+	cursor: default;
+}
+
+.records-table tr.selected td {
+	color: #fff !important;
+	background: #019bc6;
+	background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4));
+	background: -o-linear-gradient(top, #019bc6 0%, #017cb4 100%);
+	background: -ms-linear-gradient(top, #019bc6 0%, #017cb4 100%);
+	background: linear-gradient(top, #019bc6 0%, #017cb4 100%);
+}
+
+.records-table tr.selected td a,
+.records-table tr.selected td span {
+	color: #fff !important;
+}
+
+.records-table tr.unfocused td {
+	color: #fff !important;
+	background: #4db0d2;
+}
+
+.records-table tr.unfocused td a,
+.records-table tr.unfocused td span {
+	color: #fff !important;
+}
+
+.records-table tr.deleted td,
+.records-table tr.deleted td a {
+	color: #ccc !important;
+}
+
+
 /*** iFrames ***/
 
+#aboutframe {
+	width: 97%;
+	height: 100%;
+	border: 0;
+	padding: 0;
+}
+
 body.iframe {
 	background: #fff;
-	margin: 38px 0 20px 0;
+	margin: 38px 0 10px 0;
+}
+
+body.iframe.footerbuttons {
+	margin-bottom: 42px;
 }
 
 body.iframe.fullheight {
@@ -778,6 +948,16 @@ body.iframe .boxtitle {
 	z-index: 100;
 }
 
+body.iframe .footerbuttons {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	z-index: 110;
+	background: #fff;
+	padding: 8px;
+}
+
 .boxcontent {
 	padding: 10px;
 }
@@ -1027,20 +1207,20 @@ ul.proplist li {
 	top: 0;
 	height: 42px;
 	width: 18px;
-	background: url(images/buttons.png) -24px -1129px no-repeat;
+	background: url(images/buttons.png) -24px -1249px no-repeat;
 	cursor: pointer;
 }
 
 .dropbutton .dropbuttontip:hover {
-	background-position: 0 -1129px;
+	background-position: 0 -1249px;
 }
 
 .toolbar a.button.back {
-	background-position: 0 -1170px;
+	background-position: 0 -1210px;
 }
 
 .toolbar a.button.checkmail {
-	background-position: center -490px;
+	background-position: center -1170px;
 }
 
 .toolbar a.button.compose {
@@ -1175,6 +1355,10 @@ ul.toolbarmenu li a.active:hover,
 	background: linear-gradient(top, #00aad6 0%, #008fc9 100%);
 }
 
+ul.toolbarmenu.iconized li a {
+	padding-left: 30px;
+}
+
 ul.toolbarmenu li label {
 	display: block;
 	color: #fff;
@@ -1340,7 +1524,7 @@ ul.toolbarmenu li span.extwin {
 /*** fieldset tabs ***/
 
 .tabsbar {
-	margin-bottom: 10px;
+	margin-bottom: 12px;
 	padding-top: 15px;
 	height: 27px;
 }
@@ -1387,6 +1571,7 @@ ul.toolbarmenu li span.extwin {
 fieldset.tab {
 	border: 0;
 	padding: 0;
+	margin-left: 0;
 }
 
 
diff --git a/skins/larry/templates/about.html b/skins/larry/templates/about.html
index f1e424260..04e308a4e 100644
--- a/skins/larry/templates/about.html
+++ b/skins/larry/templates/about.html
@@ -4,11 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body>
-
-<roundcube:include file="/includes/header.html" />
-
-<div class="offset uibox scroller centerbox" style="width:60em">
+<body class="ui-widget-content">
 
 <div class="readtext">
 <roundcube:object name="aboutcontent" />
@@ -16,10 +12,9 @@
 <h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
 <p class="copyright">Copyright &copy; 2005-2011, The Roundcube Dev Team</p>
 <p class="license">This program is free software; you can redistribute it and/or modify
-it under the terms of the <a href="http://www.gnu.org/licenses/gpl-2.0.html" target="_blank">GNU General Public License version 2</a>
-as published by the Free Software Foundation.
+it under the terms of the <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GNU General Public License</a>
+as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 </p>
-<p class="links"><roundcube:object name="supportlink" label="support" target="_blank" /></p>
 
 </div>
 
@@ -28,9 +23,5 @@ as published by the Free Software Foundation.
 <roundcube:object name="pluginlist" id="pluginlist" class="records-table" cellspacing="0" />
 </div>
 
-</div>
-
-<roundcube:include file="/includes/footer.html" />
-
 </body>
 </html>
diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html
index 23da1411d..da1b7ba8b 100644
--- a/skins/larry/templates/addressbook.html
+++ b/skins/larry/templates/addressbook.html
@@ -36,10 +36,10 @@
 
 <!-- toolbar -->
 <div id="addressbooktoolbar" class="toolbar">
-	<roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advsearch" />
-	<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="writenewmessage" />
-	<roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="importcontacts" />
-	<roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="exportvcards" />
+	<roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advsearch" title="advsearch" />
+	<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="writenewmessage" title="writenewmessage" />
+	<roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="importcontacts" title="importcontacts" />
+	<roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="exportvcards" title="exportvcards" />
 	<roundcube:container name="toolbar" id="addressbooktoolbar" />
 </div>
 
@@ -51,6 +51,13 @@
 </div>
 <div class="boxfooter">
 	<roundcube:button command="add" type="link" title="newcontact" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="deletecontact" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="x" />
+	<roundcube:object name="recordsCountDisplay" class="countdisplay" label="fromtoshort" />
+</div>
+<div class="boxpagenav">
+	<roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" content="|&amp;lt;" />
+	<roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&amp;lt;" />
+	<roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&amp;gt;" />
+	<roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&amp;gt;|" />
 </div>
 </div>
 
diff --git a/skins/larry/templates/contactedit.html b/skins/larry/templates/contactedit.html
index 562e6d2d6..4bea55bf7 100644
--- a/skins/larry/templates/contactedit.html
+++ b/skins/larry/templates/contactedit.html
@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body class="iframe">
+<body class="iframe footerbuttons">
 
 <h1 class="boxtitle">
 	<roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" />
@@ -18,11 +18,14 @@
 
 	<div id="contactphoto">
 		<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
+		<roundcube:if condition="env:photocol" />
 		<div class="formlinks">
 			<roundcube:button command="upload-photo" id="uploadformlink" type="link" label="replacephoto" class="iconlink upload disabled" classAct="iconlink upload active" onclick="UI.show_uploadform();return false" condition="env:photocol" /><br/>
 			<roundcube:button command="delete-photo" type="link" label="delete" class="iconlink delete disabled" classAct="iconlink delete active" condition="env:photocol" />
 		</div>
+		<roundcube:endif />
 	</div>
+
 	<roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
 	<br style="clear:both" />
 
@@ -32,7 +35,7 @@
 
 </form>
 
-<div id="headerbuttons" class="formbuttons">
+<div class="footerbuttons formbuttons">
 	<roundcube:button command="save" type="input" class="button mainaction" label="save" />
 	<roundcube:button command="show" type="input" class="button" label="cancel" condition="env:action=='edit'" />
 	<roundcube:button name="cancel" type="input" class="button" label="cancel" onclick="history.back()" condition="env:action=='add'" />
diff --git a/skins/larry/templates/contactsearch.html b/skins/larry/templates/contactsearch.html
new file mode 100644
index 000000000..e622ddfd5
--- /dev/null
+++ b/skins/larry/templates/contactsearch.html
@@ -0,0 +1,21 @@
+<roundcube:object name="doctype" value="html5" />
+<html>
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+</head>
+<body class="iframe">
+
+<h1 class="boxtitle"><roundcube:label name="advsearch" /></h1>
+
+<div id="contact-details" class="boxcontent">
+	<roundcube:object name="searchform" id="advsearchform" class="tabbed" size=30 />
+	<p class="formbuttons">
+		<roundcube:button command="save" type="input" class="button mainaction" label="search" />
+	</p>
+</div>
+
+<roundcube:include file="/includes/footer.html" />
+
+</body>
+</html>
diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html
new file mode 100644
index 000000000..bdc1f3f51
--- /dev/null
+++ b/skins/larry/templates/importcontacts.html
@@ -0,0 +1,34 @@
+<roundcube:object name="doctype" value="html5" />
+<html>
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+</head>
+<body>
+
+<roundcube:include file="/includes/header.html" />
+
+<div id="mainscreen">
+
+<div id="addressbooktoolbar" class="toolbar">
+	<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
+</div>
+
+<div class="offset uibox contentbox">
+<h2 class="boxtitle"><roundcube:label name="importcontacts" /></h2>
+
+<div class="boxcontent readtext">
+<roundcube:object name="importstep" />
+
+<p class="formbuttons">
+	<roundcube:object name="importnav" class="button" />
+</p>
+
+</div>
+
+</div>
+
+<roundcube:include file="/includes/footer.html" />
+
+</body>
+</html>
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 9f4b756d9..0d3306407 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -56,9 +56,9 @@
 <!-- messagelist -->
 <div id="messagelistcontainer" class="uibox boxlistcontent">
 <roundcube:object name="messages"
-  id="messagelist"
-  columns=""
-  optionsmenuIcon="true" />
+	id="messagelist"
+	class="records-table sortheader"
+	optionsmenuIcon="true" />
 </div>
 
 <!-- list footer -->
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 4b811cbc2..7033ebf55 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -14,6 +14,7 @@
 
 function rcube_mail_ui()
 {
+  var env = {};
   var popups = {};
   var popupconfig = {
     forwardmenu:        { editable:1 },
@@ -33,14 +34,25 @@ function rcube_mail_ui()
   var compose_headers = {};
 
   // export public methods
+  this.set = setenv;
   this.init = init;
   this.init_tabs = init_tabs;
+  this.show_about = show_about;
   this.show_popup = show_popup;
   this.set_searchmod = set_searchmod;
   this.show_uploadform = show_uploadform;
   this.show_header_row = show_header_row;
   this.hide_header_row = hide_header_row;
 
+
+  /**
+   *
+   */
+  function setenv(key, val)
+  {
+    env[key] = val;
+  }
+
   /**
    *
    */
@@ -49,7 +61,6 @@ function rcube_mail_ui()
     if (rcmail.env.task == 'mail') {
       rcmail.addEventListener('menu-open', show_listoptions);
       rcmail.addEventListener('menu-save', save_listoptions);
-      rcmail.addEventListener('aftersend-attachment', show_uploadform);
       rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); });
 
       var dragmenu = $('#dragmessagemenu');
@@ -67,6 +78,7 @@ function rcube_mail_ui()
         layout_messageview();
       }
       else if (rcmail.env.action == 'compose') {
+        rcmail.addEventListener('aftersend-attachment', show_uploadform);
         layout_composeview();
 
         $('#composeoptionstoggle').parent().click(function(){
@@ -109,6 +121,14 @@ function rcube_mail_ui()
       }
     }
     else if (rcmail.env.task == 'addressbook') {
+      rcmail.addEventListener('afterupload-photo', show_uploadform);
+
+      if (rcmail.env.action == '') {
+        new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right',
+          orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init();
+        new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box',
+          orientation:'v', relative:true, start:296, min:220, size:12 }).init();
+      }
 
     }
 
@@ -529,7 +549,7 @@ function rcube_mail_ui()
       $('#_' + which).val(compose_headers[which]);
     $('#compose-' + which).show();
     $('#' + which + '-link').hide();
-    this.resize_compose_body();
+    layout_composeview();
     return false;
   }
 
@@ -545,7 +565,8 @@ function rcube_mail_ui()
 
     $('#compose-' + which).hide();
     $('#' + which + '-link').show();
-    this.resize_compose_body();
+    layout_composeview();
+    return false;
   }
 
 
@@ -606,6 +627,35 @@ function rcube_mail_ui()
       $('#tab'+idx).toggleClass('selected', idx==index);
     });
   }
+
+  /**
+   * Show about page as jquery UI dialog
+   */
+  function show_about(elem)
+  {
+    var frame = $('<iframe>').attr('id', 'aboutframe')
+      .attr('src', rcmail.url('settings/about'))
+      .appendTo(document.body);
+
+    var h = Math.floor($(window).height() * 0.75);
+    var buttons = {};
+    var supportln = $('#supportlink');
+    if (supportln.length && (env.supporturl = supportln.attr('href')))
+      buttons[supportln.html()] = function(e){ env.supporturl.indexOf('mailto:') < 0 ? window.open(env.supporturl) : location.href = env.supporturl };
+
+    frame.dialog({
+      modal: true,
+      resizable: false,
+      closeOnEscape: true,
+      title: elem ? elem.title || elem.innerHTML : null,
+      close: function() {
+        frame.dialog('destroy').remove();
+      },
+      buttons: buttons,
+      width: 640,
+      height: h
+    }).width(640);
+  }
 }