diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index 0fb1b83a6..fdfec9dc6 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -57,106 +57,97 @@ body > #layout {
     flex-wrap: nowrap;
     height: 100%;
     width: 100%;
-}
-
-body > #layout > div.sidebar,
-body > #layout > div.list {
-    display: flex;
-    flex-grow: 2;
-    flex-direction: column;
-    min-width: 300px;
-    max-width: 30%;
-    border-right: 1px solid @layout-border-color;
-}
-
-body > #layout > div.content {
-    display: flex;
-    flex-grow: 6;
-    flex-direction: column;
-    min-width: 50%;
-    background-color: @layout-content-background-color;
-}
-
-body > #layout > div.sidebar {
-    min-width: 220px;
-    background-color: @layout-sidebar-background-color;
-}
-
-body > #layout > div.list {
-    min-width: 300px;
-    background-color: @layout-list-background-color;
-}
 
-body > #layout > div.menu {
-    width: @taskmenu-width;
-    background-color: @taskmenu-background-color;
-}
-
-body > #layout > div.menu a,
-body > #layout > div.menu a:before {
-    display: block;
-    width: @taskmenu-width;
-}
-
-#layout > div.content > iframe,
-#layout > div.content > .content,
-#layout > div.content > .content > iframe {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    border: 0;
-    flex: 1;
-}
-
-#layout > div > .scroller {
-    flex: 1;
-}
 
-#layout > .content.only > .scroller {
-    overflow: auto;
-}
-
-#layout > div > .header,
-#layout > div > .footer {
-    background-color: @layout-header-background-color;
-    font-size: 1.2em;
-    font-weight: bold;
-    line-height: 2.5em;
-    height: 2.5em;
-    padding: 0 0.25em;
-    margin: 0;
-    position: relative; /* for absolute positioning of searchbar */
-    overflow: hidden;
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-}
-#layout > div > .header {
-    border-bottom: 1px solid #ddd;
-}
-#layout > div > .footer {
-    border-top: 1px solid #ddd;
-}
-
-#layout > div > .header > .header-title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-#taskmenu .special-buttons {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-}
-
-#taskmenu .special-buttons a {
-    color: @taskmenu-special-button-color;
-}
-
-#taskmenu .action-buttons a {
-    color: @taskmenu-action-button-color;
+    & > div {
+        &.sidebar,
+        &.list {
+            display: flex;
+            flex-grow: 2;
+            flex-direction: column;
+            min-width: 300px;
+            max-width: 30%;
+            border-right: 1px solid @layout-border-color;
+        }
+
+        &.content {
+            display: flex;
+            flex-grow: 6;
+            flex-direction: column;
+            min-width: 50%;
+            background-color: @layout-content-background-color;
+
+            & > iframe,
+            & > .content,
+            & > .content > iframe {
+                height: 100%;
+                width: 100%;
+                overflow: auto;
+                border: 0;
+                flex: 1;
+            }
+        }
+
+        &.sidebar {
+            min-width: 220px;
+            background-color: @layout-sidebar-background-color;
+        }
+
+        &.list {
+            min-width: 300px;
+            background-color: @layout-list-background-color;
+        }
+
+        &.menu {
+            width: @taskmenu-width;
+            background-color: @taskmenu-background-color;
+
+            a,
+            a:before {
+                display: block;
+                width: @taskmenu-width;
+            }
+        }
+
+        & > .scroller {
+            flex: 1;
+        }
+
+        & > .content.only > .scroller {
+            overflow: auto;
+        }
+
+        & > .header,
+        & > .footer {
+            background-color: @layout-header-background-color;
+            font-size: 1.2em;
+            font-weight: bold;
+            line-height: 2.5em;
+            height: 2.5em;
+            padding: 0 0.25em;
+            margin: 0;
+            position: relative; /* for absolute positioning of searchbar */
+            overflow: hidden;
+            white-space: nowrap;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+        }
+
+        & > .header {
+            border-bottom: 1px solid #ddd;
+
+            .header-title {
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        & > .footer {
+            border-top: 1px solid #ddd;
+        }
+    }
 }
 
 
@@ -190,7 +181,7 @@ body > #layout > div.menu a:before {
 }
 
 @media screen and (max-width: @screen-width-small) {
-    #layout > div > .header > .toolbar:not(.searchbar),
+    body > #layout > div > .header > .toolbar:not(.searchbar),
     body > #layout > div:not(.selected) {
         display: none;
     }
@@ -226,9 +217,6 @@ body > #layout > div.menu a:before {
         display: inline-block;
         width: 100px;
     }
-    #taskmenu .special-buttons {
-        position: relative;
-    }
 }
 
 @media screen and (max-width: @screen-width-mini) {
diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index b0d750f10..63b659cf1 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -115,6 +115,11 @@ button, input, select, textarea {
   }
 }
 
+.animated-icon-class {
+    -webkit-animation: fa-spin 2s infinite linear;
+    animation: fa-spin 2s infinite linear;
+}
+
 
 /*** Common UI elements ***/
 
@@ -129,12 +134,14 @@ div.popover-content > .ui.popup {
     display: block !important;
 }
 
-body.iframe .formcontent {
-    padding: 1em;
-}
+body.iframe {
+    .formcontent {
+        padding: 1em;
+    }
 
-body.iframe .formbuttons {
-    padding: 0 1em 1em 1em;
+    .formbuttons {
+        padding: 0 1em 1em 1em;
+    }
 }
 
 .ui-dialog iframe {
@@ -174,10 +181,10 @@ body.iframe .formbuttons {
 
 #folder-selector {
     overflow-y: auto;
-}
 
-#folder-selector li a.virtual {
-    opacity: .2;
+    li a.virtual {
+        opacity: .2;
+    }
 }
 
 
diff --git a/skins/elastic/styles/widgets/attachmentlist.less b/skins/elastic/styles/widgets/attachmentlist.less
index 785632a17..4c3cb8a4c 100644
--- a/skins/elastic/styles/widgets/attachmentlist.less
+++ b/skins/elastic/styles/widgets/attachmentlist.less
@@ -1,94 +1,96 @@
 /* Attachments list */
 
 
-.attachmentslist li:before {
-    &:extend(.font-icon-class);
-    content: @fa-var-file-o;
-}
-
-.attachmentslist li.txt:before,
-.attachmentslist li.text:before {
-    content: @fa-var-file-text-o;
-}
-
-.attachmentslist li.pdf:before {
-    content: @fa-var-file-pdf-o;
-}
-
-.attachmentslist li.odt:before,
-.attachmentslist li.doc:before,
-.attachmentslist li.docx:before,
-.attachmentslist li.msword:before {
-    content: @fa-var-file-word-o;
-}
-
-.attachmentslist li.ods:before,
-.attachmentslist li.xls:before,
-.attachmentslist li.xlsx:before,
-.attachmentslist li.msexcel:before {
-    content: @fa-var-file-excel-o;
-}
-
-.attachmentslist li.rar:before,
-.attachmentslist li.zip:before,
-.attachmentslist li.gz:before {
-    content: @fa-var-file-zip-o;
-}
-
-.attachmentslist li.image:before,
-.attachmentslist li.jpg:before,
-.attachmentslist li.jpeg:before,
-.attachmentslist li.png:before {
-    content: @fa-var-file-image-o;
-}
-
-.attachmentslist li.mp3:before,
-.attachmentslist li.audio:before {
-    content: @fa-var-file-audio-o;
-}
-
-.attachmentslist li.m4p:before,
-.attachmentslist li.video:before {
-    content: @fa-var-file-video-o;
-}
-
-.attachmentslist li.ics:before,
-.attachmentslist li.calendar:before {
-/* TODO */
-}
-
-.attachmentslist li.vcard:before {
-    content: @fa-var-vcard;
-}
-
-.attachmentslist li.html:before {
-    content: @fa-var-file-code-o;
-}
-
-.attachmentslist li.eml:before,
-.attachmentslist li.rfc822:before {
-/* TODO */
-}
-
-.attachmentslist li.odp:before,
-.attachmentslist li.otp:before,
-.attachmentslist li.ppt:before,
-.attachmentslist li.pptx:before,
-.attachmentslist li.ppsx:before,
-.attachmentslist li.vnd.mspowerpoint:before {
-    content: @fa-var-file-powerpoint-o;
-}
-
-.attachmentslist li.sig:before,
-.attachmentslist li.pgp-signature:before,
-.attachmentslist li.pkcs7-signature:before {
-/* TODO */
-}
-
-.attachmentslist li.application.asc:before {
-/* TODO */
-}
-
-.attachmentslist li.application.pgp-keys:before {
-/* TODO */
+.attachmentslist li {
+    &:before {
+        &:extend(.font-icon-class);
+        content: @fa-var-file-o;
+    }
+
+    &.txt:before,
+    &.text:before {
+        content: @fa-var-file-text-o;
+    }
+
+    &.pdf:before {
+        content: @fa-var-file-pdf-o;
+    }
+
+    &.odt:before,
+    &.doc:before,
+    &.docx:before,
+    &.msword:before {
+        content: @fa-var-file-word-o;
+    }
+
+    &.ods:before,
+    &.xls:before,
+    &.xlsx:before,
+    &.msexcel:before {
+        content: @fa-var-file-excel-o;
+    }
+
+    &.rar:before,
+    &.zip:before,
+    &.gz:before {
+        content: @fa-var-file-zip-o;
+    }
+
+    &.image:before,
+    &.jpg:before,
+    &.jpeg:before,
+    &.png:before {
+        content: @fa-var-file-image-o;
+    }
+
+    &.mp3:before,
+    &.audio:before {
+        content: @fa-var-file-audio-o;
+    }
+
+    &.m4p:before,
+    &.video:before {
+        content: @fa-var-file-video-o;
+    }
+
+    &.ics:before,
+    &.calendar:before {
+        /* TODO */
+    }
+
+    &.vcard:before {
+        content: @fa-var-vcard;
+    }
+
+    &.html:before {
+        content: @fa-var-file-code-o;
+    }
+
+    &.eml:before,
+    &.rfc822:before {
+        /* TODO */
+    }
+
+    &.odp:before,
+    &.otp:before,
+    &.ppt:before,
+    &.pptx:before,
+    &.ppsx:before,
+    &.vnd.mspowerpoint:before {
+        content: @fa-var-file-powerpoint-o;
+    }
+
+    &.sig:before,
+    &.pgp-signature:before,
+    &.pkcs7-signature:before {
+        /* TODO */
+    }
+
+    &.application.asc:before {
+        /* TODO */
+    }
+
+    &.application.pgp-keys:before {
+        /* TODO */
+    }
 }
diff --git a/skins/elastic/styles/widgets/folderlist.less b/skins/elastic/styles/widgets/folderlist.less
index 74ea258d7..fd6dc273c 100644
--- a/skins/elastic/styles/widgets/folderlist.less
+++ b/skins/elastic/styles/widgets/folderlist.less
@@ -1,53 +1,58 @@
 /*** Folders list widget ***/
 
 
-.folderlist li.mailbox .unreadcount {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 2em;
-    line-height: 1.4em;
-    margin: 0.5em 0.2em;
-    padding: 0 0.3em;
-    background:  /* todo */ #1e70bf;
-    border-radius: 0.4em;
-    color: @badge-font-color;
-    text-align: center;
-    font-weight: bold;
-}
+.folderlist {
+    li {
+        &.mailbox {
+            .unreadcount {
+                position: absolute;
+                top: 0;
+                right: 0;
+                min-width: 2em;
+                line-height: 1.4em;
+                margin: 0.5em 0.2em;
+                padding: 0 0.3em;
+                background:  /* todo */ #1e70bf;
+                border-radius: 0.4em;
+                color: @badge-font-color;
+                text-align: center;
+                font-weight: bold;
+            }
 
-.folderlist li.mailbox.selected > a .unreadcount {
-    background: /* todo */;
-}
+            &.selected > a .unreadcount {
+                background: /* todo */;
+            }
 
-.folderlist li.mailbox.recent > a .unreadcount {
-    background: /* todo */;
-}
+            &.recent > a .unreadcount {
+                background: /* todo */;
+            }
+        }
 
-/* icons */
+        a:before {
+            &:extend(.font-icon-class);
+            content: @fa-var-folder-o;
+        }
 
-.folderlist li a:before {
-    &:extend(.font-icon-class);
-    content: @fa-var-folder-o;
-}
-.folderlist li.inbox a:before {
-    content: @fa-var-inbox;
-}
-.folderlist li.trash a:before {
-    content: @fa-var-trash;
-}
-.folderlist li.trash.empty a:before {
-    content: @fa-var-trash-o;
-}
-.folderlist li.drafts a:before {
-    content: @fa-var-edit;
-}
-.folderlist li.sent a:before {
-    content: @fa-var-paper-plane;
-}
-.folderlist li.junk a:before {
-    content: @fa-var-recycle;
-}
-.folderlist li.archive a:before {
-    content: @fa-var-archive;
+        &.inbox a:before {
+            content: @fa-var-inbox;
+        }
+        &.trash a:before {
+            content: @fa-var-trash;
+        }
+        &.trash.empty a:before {
+            content: @fa-var-trash-o;
+        }
+        &.drafts a:before {
+            content: @fa-var-edit;
+        }
+        &.sent a:before {
+            content: @fa-var-paper-plane;
+        }
+        &.junk a:before {
+            content: @fa-var-recycle;
+        }
+        &.archive a:before {
+            content: @fa-var-archive;
+        }
+    }
 }
diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less
index 578d543cb..e9e316cb1 100644
--- a/skins/elastic/styles/widgets/lists.less
+++ b/skins/elastic/styles/widgets/lists.less
@@ -1,83 +1,176 @@
 /*** List and treelist widgets ***/
 
+.listing {
+    tbody td,
+    li {
+        display: block;
+        border-bottom: 1px solid #f4f4f4;
+        cursor: default;
+        font-weight: normal;
+    }
+
+    tbody td,
+    li a {
+        display: block;
+        text-decoration: none;
+        cursor: default;
+        padding: 0 0.5em;
+        white-space: nowrap;
+        vertical-align: middle;
+        line-height: 2.4em;
+        color: @list-color;
+    }
+
+    tbody td {
+        display: table-cell;
+        outline: none;
+    }
+
+    li.selected,
+    tr.selected td {
+        color: @list-selected-color;
+        background-color: @list-selected-color-background;
+    }
+
+    td.selection {
+        padding: 0 1em;
+        width: 3em;
+        text-align: center;
+    }
+
+    td.selection > input {
+        vertical-align: middle;
+    }
+}
+
 table.listing {
     width: 100%;
     table-layout: fixed;
 }
 
-.listing tbody td,
-.listing li {
-    display: block;
-    border-bottom: 1px solid #f4f4f4;
-    cursor: default;
-    font-weight: normal;
-}
-
-.listing tbody td,
-.listing li a {
-    display: block;
-    text-decoration: none;
-    cursor: default;
-    padding: 0 0.5em;
-    white-space: nowrap;
-    vertical-align: middle;
-    line-height: 2.4em;
-    color: @list-color;
-}
-
-.listing tbody td {
-    display: table-cell;
-    outline: none;
-}
-
-.listing li.selected,
-.listing tr.selected td {
-    color: @list-selected-color;
-    background-color: @list-selected-color-background;
-}
-
-.listing td.selection {
-    padding: 0 1em;
-    width: 3em;
-    text-align: center;
-}
-
-.listing td.selection > input {
-    vertical-align: middle;
-}
-
 ul.listing {
     display: block;
     list-style: none;
     margin: 0;
     padding: 0;
-}
 
-ul.listing li {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    position: relative;
-}
+    li {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        position: relative;
 
-ul.listing li ul {
-    border-top: 1px solid #f4f4f4;
-    padding-left: 1.5em;
-}
+        ul {
+            border-top: 1px solid #f4f4f4;
+            padding-left: 1.5em;
 
-ul.listing li ul li:last-child {
-    border-bottom: none;
-}
+            li:last-child {
+                border-bottom: none;
+            }
+        }
 
-ul.listing li input[type=checkbox] {
-    position: absolute;
-    top: 0;
-    right: 0.2em;
-    height: 2.4em;
-    vertical-align: middle;
+        input[type=checkbox] {
+            position: absolute;
+            top: 0;
+            right: 0.2em;
+            height: 2.4em;
+            vertical-align: middle;
+        }
+    }
 }
 
 
+/* icons */
+
+.listing.iconized li {
+    a:before {
+        &:extend(.font-icon-class);
+    }
+    &.preferences > a:before {
+        content: @fa-var-sliders;
+    }
+    &.folders > a:before {
+        content: @fa-var-folder;
+    }
+    &.responses > a:before {
+        content: @fa-var-comment;
+    }
+    &.identities > a:before {
+        content: @fa-var-at;
+    }
+    &.password > a:before {
+        content: @fa-var-lock;
+    }
+    &.addressbook a:before {
+        content: @fa-var-book;
+    }
+    &.contactgroup a:before {
+        content: @fa-var-group;
+    }
+    &.contactsearch a:before {
+        content: @fa-var-search;
+    }
+    &.filter > a:before {
+        content: @fa-var-filter;
+    }
+    &.enigma.keys > a:before {
+        content: @fa-var-key;
+    }
+
+    /* autocomplete popup */
+    & > i:before {
+        &:extend(.font-icon-class);
+        content: @fa-var-user;
+    }
+    &.group > i:before {
+        content: @fa-var-group;
+    }
+}
+
+.listing.iconized tr {
+    td:before {
+        &:extend(.font-icon-class);
+    }
+    &.contact.person td.name:before {
+        content: @fa-var-user;
+    }
+    &.general > td.section:before {
+        content: @fa-var-desktop;
+    }
+    &.mailbox > td.section:before {
+        content: @fa-var-envelope-o;
+    }
+    &.mailview > td.section:before {
+        content: @fa-var-inbox;
+    }
+    &.compose > td.section:before {
+        content: @fa-var-paper-plane;
+    }
+    &.addressbook > td.section:before {
+        content: @fa-var-user;
+    }
+    &.folders > td.section:before {
+        content: @fa-var-folder-o;
+    }
+    &.server > td.section:before {
+        content: @fa-var-server;
+    }
+    &.enigma > td.section:before {
+        content: @fa-var-lock;
+    }
+}
+
+/* selecatable list: e.g. spellcheck language selection */
+.listing.iconized.selectable li {
+    a:before {
+        &:extend(.font-icon-class);
+        content: "";
+    }
+    a.selected:before {
+        content: @fa-var-check;
+    }
+}
+
 ul.treelist li div.treetoggle {
     position: absolute;
     top: 1.2em;
@@ -86,99 +179,17 @@ ul.treelist li div.treetoggle {
     height: 0.8em;
     line-height: 0.8em;
     cursor: pointer;
-}
-
-/* icons */
-
-.listing.iconized tr td:before,
-.listing.iconized li a:before,
-.listing.iconized li > i:before,
-ul.treelist li div.treetoggle:before {
-    &:extend(.font-icon-class);
-}
-
-.listing.iconized li.preferences > a:before {
-    content: @fa-var-sliders;
-}
-.listing.iconized li.folders > a:before {
-    content: @fa-var-folder;
-}
-.listing.iconized li.responses > a:before {
-    content: @fa-var-comment;
-}
-.listing.iconized li.identities > a:before {
-    content: @fa-var-at;
-}
-.listing.iconized li.password > a:before {
-    content: @fa-var-lock;
-}
-.listing.iconized li.addressbook a:before {
-    content: @fa-var-book;
-}
-.listing.iconized li.contactgroup a:before {
-    content: @fa-var-group;
-}
-.listing.iconized li.contactsearch a:before {
-    content: @fa-var-search;
-}
-.listing.iconized tr.contact.person td.name:before {
-    content: @fa-var-user;
-}
-.listing.iconized tr.general > td.section:before {
-    content: @fa-var-desktop;
-}
-.listing.iconized tr.mailbox > td.section:before {
-    content: @fa-var-envelope-o;
-}
-.listing.iconized tr.mailview > td.section:before {
-    content: @fa-var-inbox;
-}
-.listing.iconized tr.compose > td.section:before {
-    content: @fa-var-paper-plane;
-}
-.listing.iconized tr.addressbook > td.section:before {
-    content: @fa-var-user;
-}
-.listing.iconized tr.folders > td.section:before {
-    content: @fa-var-folder-o;
-}
-.listing.iconized tr.server > td.section:before {
-    content: @fa-var-server;
-}
-.listing.iconized li.filter > a:before {
-    content: @fa-var-filter;
-}
-.listing.iconized li.enigma.keys > a:before {
-    content: @fa-var-key;
-}
-.listing.iconized tr.enigma > td.section:before {
-    content: @fa-var-lock;
-}
-
-/* autocomplete popup */
-.listing.iconized li > i:before {
-    content: @fa-var-user;
-}
-.listing.iconized li.group > i:before {
-    content: @fa-var-group;
-}
-
-/* selecatable list: spellcheck language selection */
-.listing.iconized.selectable li a:before {
-    content: "";
-}
-.listing.iconized.selectable li a.selected:before {
-    content: @fa-var-check;
-}
-
-ul.treelist li div.treetoggle:before {
-    content: @fa-var-plus-square-o;
-    font-size: 0.8em;
-    width: 0.8em;
-    height: 0.8em;
-    background-color: white;
-}
 
-ul.treelist li div.treetoggle.expanded:before {
-    content: @fa-var-minus-square-o;
+    &:before {
+        &:extend(.font-icon-class);
+        content: @fa-var-plus-square-o;
+        font-size: 0.8em;
+        width: 0.8em;
+        height: 0.8em;
+        background-color: white;
+    }
+
+    &.expanded:before {
+        content: @fa-var-minus-square-o;
+    }
 }
diff --git a/skins/elastic/styles/widgets/messagelist.less b/skins/elastic/styles/widgets/messagelist.less
index f3be9f685..93620bb45 100644
--- a/skins/elastic/styles/widgets/messagelist.less
+++ b/skins/elastic/styles/widgets/messagelist.less
@@ -6,69 +6,73 @@ table.fixedcopy {
     display: none;
 }
 
-.messagelist td {
-    border-left: 0;
-    width: 2em;
-    vertical-align: top;
-}
-
-.messagelist td.subject {
-    width: 99%;
-    white-space: wrap;
-    position: relative; /* for span.date positioning in Firefox */
-}
-
-.messagelist td.threads {
-    vertical-align: bottom;
-}
-
-.messagelist td.subject span {
-    line-height: 2em;
-}
-
-.messagelist td.subject span.date {
-    right: 2px;
-    top: 3px;
-    position: absolute;
-    color: #666; /* TODO */
-}
-
-.messagelist td.subject span.fromto {
-    padding-left: 1.5em;
-    display: block;
-    margin-right: 10em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: #666; /* TODO */
-}
-
-.messagelist tr.flagged td.subject span.date,
-.messagelist tr.flagged td.subject span.fromto {
-    color: #ff5c33; /* TODO */
-}
-
-.messagelist tr.deleted td.subject span.date,
-.messagelist tr.deleted td.subject span.fromto {
-    color: #ccc; /* TODO */
-}
-
-.messagelist td.subject span.subject {
-    clear: both;
-    display: block;
-    font-size: 1em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.messagelist td.flags span {
-    width: 20px;
-    height: 20px;
-    display: block;
-    margin-left: 1px;
-}
-
-.messagelist td.flags span.flag {
-    cursor: pointer;
+.messagelist {
+    td {
+        border-left: 0;
+        width: 2em;
+        vertical-align: top;
+    }
+
+    td.subject {
+        width: 99%;
+        white-space: wrap;
+        position: relative; /* for span.date positioning in Firefox */
+
+        span {
+            line-height: 2em;
+
+            &.date {
+                right: 2px;
+                top: 3px;
+                position: absolute;
+                color: #666; /* TODO */
+            }
+
+            &.fromto {
+                padding-left: 1.5em;
+                display: block;
+                margin-right: 10em;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                color: #666; /* TODO */
+            }
+
+            &.subject {
+                clear: both;
+                display: block;
+                font-size: 1em;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    td.threads {
+        vertical-align: bottom;
+    }
+
+    td.flags {
+        span {
+            width: 20px;
+            height: 20px;
+            display: block;
+            margin-left: 1px;
+
+            &.flag {
+                cursor: pointer;
+            }
+        }
+    }
+
+    tr.flagged td.subject span.date,
+    tr.flagged td.subject span.fromto {
+        color: #ff5c33; /* TODO */
+    }
+
+    tr.deleted td.subject span.date,
+    tr.deleted td.subject span.fromto {
+        color: #ccc; /* TODO */
+    }
 }
 
 
@@ -82,45 +86,52 @@ table.fixedcopy {
     &:extend(.font-icon-class);
 }
 
-.messagelist tr.thread td.threads div:before {
-    content: @fa-var-caret-square-o-right;
-}
-.messagelist tr.thread.expanded td.threads div:before {
-    content: @fa-var-caret-square-o-down;
-}
-.messagelist td.subject span.msgicon.status:before {
-    content: @fa-var-circle-o;
-}
-.messagelist tr.unread td.subject span.msgicon.status:before {
-    content: @fa-var-circle;
-}
-.messagelist td.subject span.msgicon.unreadchildren:before {
-    content: @fa-var-dot-circle-o;
-}
-.messagelist tr.deleted td.subject span.msgicon.status:before {
-    content: @fa-var-ban;
-}
-.messagelist td.subject span.msgicon.status.replied:before {
-    content: @fa-var-mail-reply;
-}
-.messagelist td.subject span.msgicon.status.forwarded:before {
-    content: @fa-var-mail-forward;
-}
-.messagelist td.subject span.msgicon.status.replied.forwarded:before {
-    content: @fa-var-mail-forward; /* TODO */
-}
-.messagelist span.attachment span:before {
-    content: @fa-var-paperclip;
-}
-.messagelist span.attachment span.report:before {
-    content: @fa-var-file-text-o;
-}
-.messagelist span.attachment span.encrypted:before {
-    content: @fa-var-lock;
-}
-.messagelist span.flagged:before {
-    content: @fa-var-flag;
-}
-.messagelist tr:hover span.unflagged:before {
-    content: @fa-var-flag-o;
+.messagelist {
+    tr.thread td.threads div:before {
+        content: @fa-var-caret-square-o-right;
+    }
+    tr.thread.expanded td.threads div:before {
+        content: @fa-var-caret-square-o-down;
+    }
+    td.subject span.msgicon.status:before {
+        content: @fa-var-circle-o;
+    }
+    tr.unread td.subject span.msgicon.status:before {
+        content: @fa-var-circle;
+    }
+    td.subject span.msgicon.unreadchildren:before {
+        content: @fa-var-dot-circle-o;
+    }
+    td.subject span.msgicon.status.replied:before {
+        content: @fa-var-mail-reply;
+    }
+    td.subject span.msgicon.status.forwarded:before {
+        content: @fa-var-mail-forward;
+    }
+    td.subject span.msgicon.status.replied.forwarded:before {
+        content: @fa-var-mail-forward; /* TODO */
+    }
+    tr.deleted td.subject span.msgicon.status:before {
+        content: @fa-var-ban;
+    }
+
+    span.attachment span {
+        &:before {
+            content: @fa-var-paperclip;
+        }
+        &.report:before {
+            content: @fa-var-file-text-o;
+        }
+        &.encrypted:before {
+            content: @fa-var-lock;
+        }
+    }
+
+    span.flagged:before {
+        content: @fa-var-flag;
+    }
+
+    tr:hover span.unflagged:before {
+        content: @fa-var-flag-o;
+    }
 }
diff --git a/skins/elastic/styles/widgets/messagestack.less b/skins/elastic/styles/widgets/messagestack.less
index 71a45e78e..2e1263407 100644
--- a/skins/elastic/styles/widgets/messagestack.less
+++ b/skins/elastic/styles/widgets/messagestack.less
@@ -9,20 +9,22 @@
     height: auto;
     max-height: 85%;
     overflow-y: auto;
-}
 
-#messagestack div.voice {
-    position: absolute;
-    top: -1000px;
-}
+    div {
+        &.voice {
+            position: absolute;
+            top: -1000px;
+        }
 
-#messagestack div i.icon {
-    font-size: 2em !important;
-}
+        i.icon {
+            font-size: 2em !important;
+        }
 
-#messagestack div a:hover {
-    text-decoration: underline;
-    cursor: pointer;
+        a:hover {
+            text-decoration: underline;
+            cursor: pointer;
+        }
+    }
 }
 
 .ui.alert {
@@ -31,29 +33,25 @@
     opacity: 0.95;
     float: left;
     width: 100%;
-    padding-left: 0.75em;
-}
+    padding: 0.75em;
 
-.ui.alert > i.icon:before {
-    &:extend(.font-icon-class);
-    height: 1em;
-    width: 1em;
-    line-height: 1em;
-    content: @fa-var-info-circle;
-}
+    & > i.icon:before {
+        &:extend(.font-icon-class);
+        content: @fa-var-info-circle;
+    }
 
-.ui.alert.loading > i.icon:before {
-    content: @fa-var-circle-o-notch;
-    -webkit-animation: fa-spin 2s infinite linear;
-    animation: fa-spin 2s infinite linear;
-}
+    &.loading > i.icon:before {
+        content: @fa-var-circle-o-notch;
+        .animated-icon-class;
+    }
 
-.ui.alert.alert-warning > i.icon:before {
-    content: @fa-var-warning;
-}
+    &.alert-warning > i.icon:before {
+        content: @fa-var-warning;
+    }
 
-.ui.alert.alert-danger > i.icon:before {
-    content: @fa-var-exclamation-circle;
+    &.alert-danger > i.icon:before {
+        content: @fa-var-exclamation-circle;
+    }
 }
 
 
diff --git a/skins/elastic/styles/widgets/searchbar.less b/skins/elastic/styles/widgets/searchbar.less
index 17b8393f1..4fcef5a37 100644
--- a/skins/elastic/styles/widgets/searchbar.less
+++ b/skins/elastic/styles/widgets/searchbar.less
@@ -9,39 +9,39 @@
     z-index: 10;
     top: 0;
     right: 0;
-}
-
-.searchbar > * {
-    height: 2.5em;
-}
-
-.searchbar > form,
-.searchbar > a.button.options,
-.searchbar > a.button.reset {
-    display: none;
-    width: 1%;
-}
-
-.searchbar > form,
-.searchbar > form > input {
-    width: 98%;
-}
-
-.searchbar input {
-    border: none;
-    border-bottom: 1px solid #ddd;
-    background: transparent;
-    line-height: 1;
-}
-
-.searchbar > a.button.search.active {
-    color: @searchbar-icon-active-color;
-}
-
-.searchbar > a.button.reset:before {
-    content: @fa-var-remove;
-}
 
-.searchbar > a.button.options:before {
-    content: @fa-var-angle-down;
+    & > * {
+        height: 2.5em;
+    }
+
+    & > form,
+    & > a.button.options,
+    & > a.button.reset {
+        display: none;
+        width: 1%;
+    }
+
+    & > form,
+    & > form > input {
+        width: 98%;
+    }
+
+    input {
+        border: none;
+        border-bottom: 1px solid #ddd;
+        background: transparent;
+        line-height: 1;
+    }
+
+    & > a {
+        &.button.search.active {
+            color: @searchbar-icon-active-color;
+        }
+        &.button.reset:before {
+            content: @fa-var-remove;
+        }
+        &.button.options:before {
+            content: @fa-var-angle-down;
+        }
+    }
 }
diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less
index 258366d0b..df36ed6f0 100644
--- a/skins/elastic/styles/widgets/taskmenu.less
+++ b/skins/elastic/styles/widgets/taskmenu.less
@@ -1,49 +1,68 @@
 /*** Common UI elements ***/
 
-#taskmenu a {
-    text-decoration: none;
-    padding: 0.4em 0;
-}
+#taskmenu {
+    a {
+        text-decoration: none;
+        padding: 0.4em 0;
+    }
 
-#taskmenu a.button,
-#taskmenu a.button:before {
-    display: block;
-    width: 60px;
-    text-align: center;
-}
+    a.button {
+        display: block;
+        width: 60px;
+        text-align: center;
 
-/* Icons */
+        &:before {
+            &:extend(.font-icon-class);
+            font-size: 1.5em;
+            margin-bottom: 0.1em;
+        }
 
-#taskmenu a.button:before {
-    &:extend(.font-icon-class);
-    font-size: 1.5em;
-    margin-bottom: 0.1em;
-}
+        &.mail:before {
+            content: @fa-var-envelope;
+        }
+        &.addressbook:before {
+            content: @fa-var-user;
+        }
+        &.settings:before {
+            content: @fa-var-cog;
+        }
+        &.help:before {
+            content: @fa-var-life-bouy;
+        }
+        &.logout:before {
+            content: @fa-var-power-off;
+        }
+        &.about:before {
+            content: @fa-var-question;
+        }
+        &.logout:hover {
+            color: @taskmenu-logout-button-hover-color;
+        }
+        &.refresh:before {
+            content: @fa-var-refresh;
+        }
+        &.compose:before {
+            content: @fa-var-edit;
+        }
+    }
 
-#taskmenu a.button.mail:before {
-    content: @fa-var-envelope;
-}
-#taskmenu a.button.addressbook:before {
-    content: @fa-var-user;
-}
-#taskmenu a.button.settings:before {
-    content: @fa-var-cog;
-}
-#taskmenu a.button.help:before {
-    content: @fa-var-life-bouy;
-}
-#taskmenu a.button.logout:before {
-    content: @fa-var-power-off;
-}
-#taskmenu a.button.about:before {
-    content: @fa-var-question;
-}
-#taskmenu a.button.logout:hover {
-    color: @taskmenu-logout-button-hover-color;
-}
-#taskmenu a.button.refresh:before {
-    content: @fa-var-refresh;
-}
-#taskmenu a.button.compose:before {
-    content: @fa-var-edit;
+    .special-buttons {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        @media screen and (max-width: @screen-width-xs) {
+            position: relative;
+        }
+
+        a {
+            color: @taskmenu-special-button-color;
+        }
+    }
+
+    .action-buttons {
+        a {
+            color: @taskmenu-action-button-color;
+        }
+    }
 }