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

thomascube

2011-12-22 68e13c45d396744a7e848d1a82830b7fd408863a

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

 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,10 +157,14 @@

#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,
@@ -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 @@
    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;
}

 skins/larry/images/buttons.png

 skins/larry/images/listicons.png

 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">

 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>

 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 {
@@ -165,6 +165,14 @@

#mailboxlist li.trash.selected > a {
    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 {
@@ -283,94 +291,15 @@
    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,
@@ -381,11 +310,11 @@
    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 @@
    width: 26px;
}

html.chrome #messagelist tr td.threads {
.chrome #messagelist tr td.threads {
    width: 30px;
}

@@ -807,18 +736,6 @@
#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 @@
    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 {

 skins/larry/settings.css

@@ -182,3 +182,12 @@
    text-align: right;
}

#pluginlist td.version {
    width: 5em;
}

#pluginlist td.license,
#pluginlist td.source {
    width: 8em;
}


 skins/larry/styles.css

@@ -78,10 +78,10 @@
    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 @@
    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 @@

.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 @@
    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 @@
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 @@

.pagenav a.button {
    padding: 1px 3px;
    height: 16px;
}

.pagenav a.button span.inner {
@@ -339,16 +340,28 @@
    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 @@
    top: 130px;
}

#mainscreen .offset {
    margin-top: 42px;
}

.uibox {
    border: 1px solid #a3a3a3;
    border-radius: 4px;
@@ -565,6 +582,7 @@
.readtext {
    width: 42em;
    padding: 12px;
    font-size: 12px;
}

.readtext > h1,
@@ -651,8 +669,11 @@

.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 @@
    -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 @@
    margin-top: 1px;
}

.boxfooter .listbutton.disabled {
    opacity: 0.4;
}

.boxfooter .listbutton .inner {
    display: inline-block;
    width: 48px;
@@ -720,20 +739,65 @@
}

.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 @@
}


/*** 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 {
@@ -776,6 +946,16 @@
    left: 0;
    width: 100%;
    z-index: 100;
}

body.iframe .footerbuttons {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 110;
    background: #fff;
    padding: 8px;
}

.boxcontent {
@@ -1027,20 +1207,20 @@
    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 {
@@ -1173,6 +1353,10 @@
    background: -o-linear-gradient(top, #00aad6 0%, #008fc9 100%);
    background: -ms-linear-gradient(top, #00aad6 0%, #008fc9 100%);
    background: linear-gradient(top, #00aad6 0%, #008fc9 100%);
}

ul.toolbarmenu.iconized li a {
    padding-left: 30px;
}

ul.toolbarmenu li label {
@@ -1340,7 +1524,7 @@
/*** fieldset tabs ***/

.tabsbar {
    margin-bottom: 10px;
    margin-bottom: 12px;
    padding-top: 15px;
    height: 27px;
}
@@ -1387,6 +1571,7 @@
fieldset.tab {
    border: 0;
    padding: 0;
    margin-left: 0;
}



 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>

@@ -27,10 +22,6 @@
<h3><roundcube:label name="installedplugins" en_US="Installed plugins" /></h3>
<roundcube:object name="pluginlist" id="pluginlist" class="records-table" cellspacing="0" />
</div>

</div>

<roundcube:include file="/includes/footer.html" />

</body>
</html>

 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>


 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'" />

 skins/larry/templates/contactsearch.html

New file
@@ -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>

 skins/larry/templates/importcontacts.html

New file
@@ -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>

 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 -->

 skins/larry/ui.js

@@ -14,6 +14,7 @@

function rcube_mail_ui()
{
  var env = {};
  var popups = {};
  var popupconfig = {
    forwardmenu:        { editable:1 },
@@ -33,13 +34,24 @@
  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 @@
    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 @@
        layout_messageview();
      }
      else if (rcmail.env.action == 'compose') {
        rcmail.addEventListener('aftersend-attachment', show_uploadform);
        layout_composeview();

        $('#composeoptionstoggle').parent().click(function(){
@@ -109,6 +121,14 @@
      }
    }
    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 @@
      $('#_' + which).val(compose_headers[which]);
    $('#compose-' + which).show();
    $('#' + which + '-link').hide();
    this.resize_compose_body();
    layout_composeview();
    return false;
  }

@@ -545,7 +565,8 @@

    $('#compose-' + which).hide();
    $('#' + which + '-link').show();
    this.resize_compose_body();
    layout_composeview();
    return false;
  }


@@ -606,6 +627,35 @@
      $('#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);
  }
}