From f1e911ec0376b7ed603eb1afe652c86bd9c64dc3 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <alec@alec.pl>
Date: Sun, 24 Mar 2019 19:25:00 +0100
Subject: [PATCH] Elastic: Toolbar/menus/layout refactoring

Refactoring for better consistency and simplicity.

5KB less in size of (minified) styles.css file.

Layout changes:
- body > #layout > .menu       -> #layout-menu
- body > #layout > .list       -> #layout-list
- body > #layout > .sidebar    -> #layout-sidebar
- body > #layout > .content    -> #layout-content

Toolbar/menu changes:
- .toolbar           -> .toolbar.menu
- .toolbarmenu       -> .menu.listing
- .menu-button       -> .task-menu-button
- .pagenav.toolbar   -> .pagenav.menu
- #taskmenu          -> #taskmenu.menu.toolbar
- .image-tools .menu -> .image-tools .menu.toolbar
- required .disabled class to de-activate menu items
- .button class is not required on .menu children
- merge toolbar.less and taskmenu.less into menu.less
- @color-toolbarmenu-hover            -> @color-menu-hover
- @color-toolbarmenu-hover-background -> @color-menu-hover-background

Also cleaned/removed some code in spellchecker.js. Made .googie_list a list not table.
---
 .../acl/skins/elastic/templates/table.html    |  15 +-
 .../enigma/skins/elastic/templates/keys.html  |  47 +-
 .../help/skins/elastic/templates/content.html |   2 +-
 .../help/skins/elastic/templates/help.html    |  12 +-
 plugins/managesieve/managesieve.php           |   2 +-
 .../skins/elastic/templates/forward.html      |   2 +-
 .../skins/elastic/templates/managesieve.html  |  30 +-
 .../skins/elastic/templates/vacation.html     |   2 +-
 plugins/markasjunk/markasjunk.php             |   4 +-
 plugins/zipdownload/zipdownload.php           |   4 +-
 program/js/app.js                             |   4 +-
 program/js/googiespell.js                     | 404 ++++--------
 skins/classic/googiespell.css                 |   2 +-
 skins/elastic/README.md                       |  10 +-
 skins/elastic/styles/colors.less              |   4 +-
 skins/elastic/styles/layout.less              | 204 ++++--
 skins/elastic/styles/styles.less              |  29 +-
 skins/elastic/styles/variables.less           |   2 +-
 skins/elastic/styles/widgets/buttons.less     |   2 +-
 skins/elastic/styles/widgets/common.less      |   6 +-
 skins/elastic/styles/widgets/dialogs.less     |   4 -
 skins/elastic/styles/widgets/editor.less      |  10 +-
 skins/elastic/styles/widgets/jqueryui.less    |   2 +-
 skins/elastic/styles/widgets/lists.less       |  19 +-
 skins/elastic/styles/widgets/mail.less        |  12 +-
 .../widgets/{toolbar.less => menu.less}       | 623 ++++++++++--------
 skins/elastic/styles/widgets/taskmenu.less    | 221 -------
 skins/elastic/templates/about.html            |   2 +-
 skins/elastic/templates/addressbook.html      |  79 ++-
 skins/elastic/templates/bounce.html           |   2 +-
 skins/elastic/templates/compose.html          |  52 +-
 skins/elastic/templates/dialog.html           |   2 +-
 skins/elastic/templates/error.html            |   8 +-
 skins/elastic/templates/folders.html          |  17 +-
 skins/elastic/templates/identities.html       |  12 +-
 .../elastic/templates/includes/mail-menu.html |  87 ++-
 skins/elastic/templates/includes/menu.html    |  20 +-
 skins/elastic/templates/includes/pagenav.html |  14 +-
 .../templates/includes/settings-menu.html     |   4 +-
 skins/elastic/templates/login.html            |   2 +-
 skins/elastic/templates/mail.html             |  60 +-
 skins/elastic/templates/message.html          |  14 +-
 skins/elastic/templates/messagepart.html      |  59 +-
 skins/elastic/templates/plugin.html           |   2 +-
 skins/elastic/templates/responses.html        |  16 +-
 skins/elastic/templates/settings.html         |   4 +-
 skins/elastic/ui.js                           |  73 +-
 skins/larry/googiespell.css                   |   4 +-
 48 files changed, 950 insertions(+), 1261 deletions(-)
 rename skins/elastic/styles/widgets/{toolbar.less => menu.less} (64%)
 delete mode 100644 skins/elastic/styles/widgets/taskmenu.less

diff --git a/plugins/acl/skins/elastic/templates/table.html b/plugins/acl/skins/elastic/templates/table.html
index 1d74a7e4a..0a4b58133 100644
--- a/plugins/acl/skins/elastic/templates/table.html
+++ b/plugins/acl/skins/elastic/templates/table.html
@@ -3,21 +3,20 @@
 		<h2 class="voice" id="aria-label-acltable"><roundcube:label name="acl.ariasummaryacltable" /></h2>
 		<roundcube:object name="acltable" id="acltable" class="records-table options-table" aria-labelledby="aria-label-acltable" role="listbox" />
 	</div>
-	<div id="acllist-footer" class="footer toolbar">
-		<roundcube:button command="acl-create" type="link"
-			label="acl.add" title="acl.newuser"
-			class="button create disabled" classAct="button create" innerClass="inner" />
+	<div id="acllist-footer" class="footer toolbar menu">
+		<roundcube:button command="acl-create" type="link" class="create disabled" classAct="create"
+			label="acl.add" title="acl.newuser" innerClass="inner" />
 		<roundcube:button name="aclmenulink" type="link"
 			label="actions" title="acl.actions" href="#acl-actions"
-			class="button actions" innerClass="inner" data-popup="acl-menu" />
+			class="actions" innerClass="inner" data-popup="acl-menu" />
 	</div>
 </div>
 
 <div id="acl-menu" class="popupmenu" aria-hidden="true" data-align="bottom">
 	<h3 id="aria-label-aclactions" class="voice"><roundcube:label name="acl.arialabelaclactions" /></h3>
-	<ul class="toolbarmenu listing iconized" role="menu" aria-labelledby="aria-label-aclactions">
-		<roundcube:button command="acl-edit" label="edit" type="link-menuitem" class="edit" classAct="edit active" />
-		<roundcube:button command="acl-delete" label="delete" type="link-menuitem" class="delete" classAct="delete active" />
+	<ul class="menu listing iconized" role="menu" aria-labelledby="aria-label-aclactions">
+		<roundcube:button command="acl-edit" label="edit" type="link-menuitem" class="edit disabled" classAct="edit active" />
+		<roundcube:button command="acl-delete" label="delete" type="link-menuitem" class="delete disabled" classAct="delete active" />
 		<roundcube:if condition="!in_array('acl_advanced_mode', (array)config:dont_override)" />
 			<roundcube:button name="acl-switch" type="link-menuitem" class="active check" id="acl-switch" onclick="rcmail.command('acl-mode-switch')" label="acl.advanced" />
 		<roundcube:endif />
diff --git a/plugins/enigma/skins/elastic/templates/keys.html b/plugins/enigma/skins/elastic/templates/keys.html
index 4dd498581..8836fecb8 100644
--- a/plugins/enigma/skins/elastic/templates/keys.html
+++ b/plugins/enigma/skins/elastic/templates/keys.html
@@ -5,64 +5,55 @@
 <h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="enigma.enigmakeys" /></h1>
 
 <!-- keys list -->
-<div class="list listbox selected" aria-labelledby="aria-label-enigmakeyslist">
+<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-enigmakeyslist">
 	<div class="header">
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
 		<span id="aria-label-enigmakeyslist" class="header-title"><roundcube:label name="enigma.enigmakeys" /></span>
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
-	<roundcube:object name="searchform" id="keysearch" wrapper="searchbar toolbar"
+	<roundcube:object name="searchform" id="keysearch" wrapper="searchbar menu"
 		label="keysearchform" buttontitle="findkeys" ariatag="h2" />
 	<div class="scroller">
 		<roundcube:object name="keyslist" id="keys-table" class="listing" role="listbox" noheader="true"
-		data-list="keys_list"data-label-msg="listempty" />
+		data-list="keys_list" data-label-msg="listempty" />
 	</div>
-	<div class="pagenav footer toolbar small" role="toolbar">
-		<roundcube:button command="firstpage" type="link"
-			class="button firstpage disabled" classAct="button firstpage"
+	<div class="pagenav menu footer small" role="toolbar">
+		<roundcube:button command="firstpage" type="link" class="firstpage disabled" classAct="firstpage"
 			title="firstpage" label="first" innerclass="inner" />
-		<roundcube:button command="previouspage" type="link"
-			class="button prevpage disabled" classAct="button prevpage"
+		<roundcube:button command="previouspage" type="link" class="prevpage disabled" classAct="prevpage"
 			title="previouspage" label="previous" innerclass="inner" />
 		<span class="pagenav-text" aria-live="polite" aria-relevant="text">
 			<roundcube:object name="countdisplay" />
 		</span>
 		<roundcube:endif />
-		<roundcube:button command="nextpage" type="link"
-			class="button nextpage disabled" classAct="button nextpage"
+		<roundcube:button command="nextpage" type="link" class="nextpage disabled" classAct="nextpage"
 			title="nextpage" label="next" innerclass="inner" />
-		<roundcube:button command="lastpage" type="link"
-			class="button lastpage disabled" classAct="button lastpage"
+		<roundcube:button command="lastpage" type="link" class="lastpage disabled" classAct="lastpage"
 			title="lastpage" label="last" innerclass="inner" />
 	</div>
 </div>
 
 <!-- key info frame -->
-<div class="content" role="main">
+<div id="layout-content" role="main">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
 		<!-- toolbar -->
-		<div id="folderstoolbar" class="toolbar">
-			<roundcube:button command="plugin.enigma-key-create" type="link"
-				class="button create disabled" classAct="button create"
+		<div id="folderstoolbar" class="toolbar menu">
+			<roundcube:button command="plugin.enigma-key-create" type="link" class="create disabled" classAct="create"
 				label="create" title="enigma.createkeys" innerClass="inner" />
-			<roundcube:button command="plugin.enigma-key-delete" type="link"
-				class="button delete disabled" classAct="button delete"
+			<roundcube:button command="plugin.enigma-key-delete" type="link" class="delete disabled" classAct="delete"
 				label="delete" title="enigma.keyremove" innerClass="inner" />
 			<span class="spacer"></span>
-			<roundcube:button command="plugin.enigma-key-import-search" type="link"
-				class="button search disabled" classAct="button search"
+			<roundcube:button command="plugin.enigma-key-import-search" type="link" class="search disabled" classAct="search"
 				label="search" title="enigma.keyimportsearchlabel" innerClass="inner" />
-			<roundcube:button command="plugin.enigma-key-import" type="link"
-				class="button import disabled" classAct="button import"
+			<roundcube:button command="plugin.enigma-key-import" type="link" class="import disabled" classAct="import"
 				label="import" title="enigma.importkeys" innerClass="inner" />
 			<span class="dropbutton">
-				<roundcube:button command="plugin.enigma-key-export" type="link"
-					class="button export disabled" classAct="button export"
+				<roundcube:button command="plugin.enigma-key-export" type="link" class="export disabled" classAct="export"
 					label="export" title="enigma.exportkeys" innerclass="inner" />
-				<a href="#export" class="button dropdown" data-popup="export-menu">
+				<a href="#export" class="dropdown" data-popup="export-menu">
 					<span class="inner"><roundcube:label name="enigma.arialabelkeyexportoptions" /></span>
 				</a>
 			</span>
@@ -75,9 +66,9 @@
 
 <div id="export-menu" class="popupmenu">
 	<h3 id="aria-label-exportmenu" class="voice"><roundcube:label name="enigma.arialabelkeyexportoptions" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-export-menu">
-		<roundcube:button type="link-menuitem" command="plugin.enigma-key-export" label="exportall" prop="sub" class="export all" classAct="export all active" />
-		<roundcube:button type="link-menuitem" command="plugin.enigma-key-export-selected" label="exportsel" prop="sub" class="export selection" classAct="export selection active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-export-menu">
+		<roundcube:button type="link-menuitem" command="plugin.enigma-key-export" label="exportall" prop="sub" class="export all disabled" classAct="export all active" />
+		<roundcube:button type="link-menuitem" command="plugin.enigma-key-export-selected" label="exportsel" prop="sub" class="export selection disabled" classAct="export selection active" />
 	</ul>
 </div>
 
diff --git a/plugins/help/skins/elastic/templates/content.html b/plugins/help/skins/elastic/templates/content.html
index 06311ada9..8d4835548 100644
--- a/plugins/help/skins/elastic/templates/content.html
+++ b/plugins/help/skins/elastic/templates/content.html
@@ -2,7 +2,7 @@
 
 <h1 class="voice"><roundcube:object name="steptitle" /></h1>
 
-<div id="help-<roundcube:var name="env:action" />" class="content frame-content">
+<div id="help-<roundcube:var name="env:action" />" class="frame-content">
 	<roundcube:object name="helpcontent" />
 </div>
 
diff --git a/plugins/help/skins/elastic/templates/help.html b/plugins/help/skins/elastic/templates/help.html
index b45f1a628..b8c522495 100644
--- a/plugins/help/skins/elastic/templates/help.html
+++ b/plugins/help/skins/elastic/templates/help.html
@@ -1,16 +1,16 @@
 <roundcube:include file="includes/layout.html" />
 <roundcube:include file="includes/menu.html" />
 
-<div id="sidebar" class="sidebar listbox" role="navigation" aria-labelledby="aria-label-helpnav">
+<div id="layout-sidebar" class="listbox" role="navigation" aria-labelledby="aria-label-helpnav">
 	<div class="header">
-		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
+		<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<span id="aria-label-helpnav" class="header-title"><roundcube:label name="help.help" /></span>
 	</div>
 	<div class="scroller">
 		<ul class="listing iconized" data-menu="toolbar-small">
-			<roundcube:object name="tablink" action="index" type="link-menuitem" label="help.help" class="help" />
-			<roundcube:object name="tablink" action="about" type="link-menuitem" label="help.about" class="about" />
-			<roundcube:object name="tablink" action="license" type="link-menuitem" label="help.license" class="license" />
+			<roundcube:object name="tablink" action="index" type="link-menuitem" label="help.help" class="help active" />
+			<roundcube:object name="tablink" action="about" type="link-menuitem" label="help.about" class="about active" />
+			<roundcube:object name="tablink" action="license" type="link-menuitem" label="help.license" class="license active" />
 			<roundcube:container name="helptabs" id="helptabsbar" />
 		</ul>
 	</div>
@@ -18,7 +18,7 @@
 
 <h1 class="voice"><roundcube:label name="help.help" /></h1>
 
-<div id="content" class="content selected" role="main">
+<div id="layout-content" class="selected" role="main">
 	<div class="header">
 		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<span class="header-title"><roundcube:label name="help.help" /></span>
diff --git a/plugins/managesieve/managesieve.php b/plugins/managesieve/managesieve.php
index 876c8a4cc..e361f7a6c 100644
--- a/plugins/managesieve/managesieve.php
+++ b/plugins/managesieve/managesieve.php
@@ -169,7 +169,7 @@ class managesieve extends rcube_plugin
                 'label'    => 'managesieve.filtercreate',
                 'type'     => 'link',
                 'classact' => 'icon filterlink active',
-                'class'    => 'icon filterlink',
+                'class'    => 'icon filterlink disabled',
                 'innerclass' => 'icon filterlink',
             ))), 'messagemenu');
 
diff --git a/plugins/managesieve/skins/elastic/templates/forward.html b/plugins/managesieve/skins/elastic/templates/forward.html
index e68737247..26f9c72f2 100644
--- a/plugins/managesieve/skins/elastic/templates/forward.html
+++ b/plugins/managesieve/skins/elastic/templates/forward.html
@@ -4,7 +4,7 @@
 
 <h1 class="voice"><roundcube:label name="managesieve.forward" /></h1>
 
-<div class="content selected" role="main">
+<div id="layout-content" class="selected" role="main">
 	<div class="header">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
diff --git a/plugins/managesieve/skins/elastic/templates/managesieve.html b/plugins/managesieve/skins/elastic/templates/managesieve.html
index b76cb0caa..e3201f893 100644
--- a/plugins/managesieve/skins/elastic/templates/managesieve.html
+++ b/plugins/managesieve/skins/elastic/templates/managesieve.html
@@ -5,21 +5,21 @@
 <h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="managesieve.filters" /></h1>
 
 <!-- filters list -->
-<div class="list listbox selected">
+<div id="layout-list" class="listbox selected">
 	<div class="header">
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
 		<span id="aria-label-filterslist" class="header-title"><roundcube:label name="managesieve.filters" /></span>
 		<roundcube:if condition="!env:managesieve_no_set_list" />
-			<div class="toolbar" role="toolbar">
+			<div class="toolbar menu" role="toolbar">
 				<roundcube:button name="filtersetactions" type="link" title="managesieve.arialabelfiltersetactions" label="actions"
-					class="button actions" innerclass="inner" data-popup="filterset-menu" />
+					class="actions" innerclass="inner" data-popup="filterset-menu" />
 			</div>
 		<roundcube:endif />
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
 	<roundcube:if condition="!env:managesieve_no_set_list" />
-	<div class="pagenav pagenav-list toolbar" onclick="UI.switch_nav_list(this)">
-		<a class="button icon expand"><span class="inner"></span></a>
+	<div class="pagenav pagenav-list menu" onclick="UI.switch_nav_list(this)">
+		<a class="expand"><span class="inner"></span></a>
 		<span id="filterset-name" class="pagenav-text"></span>
 		<h2 class="voice" id="aria-label-filtersets"><roundcube:label name="managesieve.filtersets" /></h2>
 	</div>
@@ -36,19 +36,19 @@
 </div>
 
 <!-- filter details frame -->
-<div class="content" role="main">
+<div id="layout-content" role="main">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
 		<!-- toolbar -->
-		<div id="responsestoolbar" class="toolbar">
+		<div id="responsestoolbar" class="toolbar menu">
 			<roundcube:button command="plugin.managesieve-add" type="link"
 				label="create" title="managesieve.filteradd" innerClass="inner"
-				class="button create disabled" classAct="button create" data-fab="true" />
+				class="create disabled" classAct="create" data-fab="true" />
 			<roundcube:button command="plugin.managesieve-del" type="link"
 				label="delete" title="delete" innerClass="inner"
-				class="button delete disabled" classAct="button delete" />
+				class="delete disabled" classAct="delete" />
 		</div>
 	</div>
 	<h2 id="aria-label-filterframe" class="voice"><roundcube:label name="managesieve.arialabelfilterform" /></h2>
@@ -60,14 +60,14 @@
 
 <div id="filterset-menu" class="popupmenu">
 	<h3 id="aria-label-setactions" class="voice"><roundcube:label name="managesieve.arialabelfiltersetactions" /></h3>
-	<ul class="toolbarmenu listing" id="filtersetmenu-menu" role="menu" aria-labelledby="aria-label-setactions">
-		<roundcube:button type="link-menuitem" command="plugin.managesieve-setadd" label="managesieve.filtersetadd" class="create" classAct="create active" />
+	<ul class="menu listing" id="filtersetmenu-menu" role="menu" aria-labelledby="aria-label-setactions">
+		<roundcube:button type="link-menuitem" command="plugin.managesieve-setadd" label="managesieve.filtersetadd" class="create disabled" classAct="create active" />
 		<roundcube:if condition="env:raw_sieve_editor != false" />
-			<roundcube:button type="link-menuitem" command="plugin.managesieve-seteditraw" label="managesieve.filterseteditraw" class="edit" classAct="edit active" />
+			<roundcube:button type="link-menuitem" command="plugin.managesieve-seteditraw" label="managesieve.filterseteditraw" class="edit disabled" classAct="edit active" />
 		<roundcube:endif />
-		<roundcube:button type="link-menuitem" command="plugin.managesieve-setact" label="managesieve.filtersetswitch" class="status" classAct="status active" />
-		<roundcube:button type="link-menuitem" command="plugin.managesieve-setdel" label="managesieve.filtersetdel" class="delete" classAct="delete active" />
-		<roundcube:button type="link-menuitem" command="plugin.managesieve-setget" label="download" class="download" classAct="download active" />
+		<roundcube:button type="link-menuitem" command="plugin.managesieve-setact" label="managesieve.filtersetswitch" class="status disabled" classAct="status active" />
+		<roundcube:button type="link-menuitem" command="plugin.managesieve-setdel" label="managesieve.filtersetdel" class="delete disabled" classAct="delete active" />
+		<roundcube:button type="link-menuitem" command="plugin.managesieve-setget" label="download" class="download disabled" classAct="download active" />
 		<roundcube:container name="filtersetoptions" id="filtersetmenu-menu" />
 	</ul>
 </div>
diff --git a/plugins/managesieve/skins/elastic/templates/vacation.html b/plugins/managesieve/skins/elastic/templates/vacation.html
index 356fcb37f..051d32730 100644
--- a/plugins/managesieve/skins/elastic/templates/vacation.html
+++ b/plugins/managesieve/skins/elastic/templates/vacation.html
@@ -4,7 +4,7 @@
 
 <h1 class="voice"><roundcube:label name="managesieve.vacation" /></h1>
 
-<div class="content selected" role="main">
+<div id="layout-content" class="selected" role="main">
 	<div class="header">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
diff --git a/plugins/markasjunk/markasjunk.php b/plugins/markasjunk/markasjunk.php
index bad4933e2..dea5d6fdb 100644
--- a/plugins/markasjunk/markasjunk.php
+++ b/plugins/markasjunk/markasjunk.php
@@ -100,7 +100,7 @@ class markasjunk extends rcube_plugin
                         'type'       => 'link-menuitem',
                         'label'      => 'markasjunk.asjunk',
                         'id'         => 'markasjunk',
-                        'class'      => 'icon junk',
+                        'class'      => 'icon junk disabled',
                         'classact'   => 'icon junk active',
                         'innerclass' => 'icon junk'
                     ), 'markmenu');
@@ -110,7 +110,7 @@ class markasjunk extends rcube_plugin
                         'type'       => 'link-menuitem',
                         'label'      => 'markasjunk.asnotjunk',
                         'id'         => 'markasnotjunk',
-                        'class'      => 'icon notjunk',
+                        'class'      => 'icon notjunk disabled',
                         'classact'   => 'icon notjunk active',
                         'innerclass' => 'icon notjunk'
                     ), 'markmenu');
diff --git a/plugins/zipdownload/zipdownload.php b/plugins/zipdownload/zipdownload.php
index 385f257f2..5a53ef6cf 100644
--- a/plugins/zipdownload/zipdownload.php
+++ b/plugins/zipdownload/zipdownload.php
@@ -105,14 +105,14 @@ class zipdownload extends rcube_plugin
         $menu    = array();
         $ul_attr = array('role' => 'menu', 'aria-labelledby' => 'aria-label-zipdownloadmenu');
         if ($rcmail->config->get('skin') != 'classic') {
-            $ul_attr['class'] = 'toolbarmenu';
+            $ul_attr['class'] = 'toolbarmenu menu';
         }
 
         foreach (array('eml', 'mbox', 'maildir') as $type) {
             $menu[] = html::tag('li', null, $rcmail->output->button(array(
                     'command'  => "download-$type",
                     'label'    => "zipdownload.download$type",
-                    'class'    => "download $type",
+                    'class'    => "download $type disabled",
                     'classact' => "download $type active",
                     'type'     => 'link',
             )));
diff --git a/program/js/app.js b/program/js/app.js
index aaa07fc0c..8ca5b66bd 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -3546,7 +3546,7 @@ function rcube_webmail()
         for (i = 1; i <= ref.env.pagecount; i++)
           html += '<li>' + i + '</li>';
 
-        html = '<ul class="toolbarmenu">' + html + '</ul>';
+        html = '<ul class="toolbarmenu menu">' + html + '</ul>';
 
         if (!ref.pagejump) {
           ref.pagejump = $('<div id="pagejump-selector" class="popupmenu"></div>')
@@ -8563,7 +8563,7 @@ function rcube_webmail()
     if (!container) {
       var rows = [],
         container = $('<div>').attr('id', name).addClass('popupmenu'),
-        ul = $('<ul>').addClass('toolbarmenu'),
+        ul = $('<ul>').addClass('toolbarmenu menu'),
         link = document.createElement('a');
 
       link.href = '#';
diff --git a/program/js/googiespell.js b/program/js/googiespell.js
index daa7698a0..05110edae 100644
--- a/program/js/googiespell.js
+++ b/program/js/googiespell.js
@@ -84,8 +84,6 @@ function GoogieSpell(img_dir, server_url, has_dict)
     // Extensions
     this.custom_ajax_error = null;
     this.custom_no_spelling_error = null;
-    this.custom_menu_builder = []; // Should take an eval function and a build menu function
-    this.custom_item_evaulator = null; // Should take an eval function and a build menu function
     this.extra_menu_items = [];
     this.custom_spellcheck_starter = null;
     this.main_controller = true;
@@ -109,8 +107,6 @@ function GoogieSpell(img_dir, server_url, has_dict)
     // Set document's onclick to hide the language and error menu
     $(document).click(function(e) {
         var target = $(e.target);
-        if (target.attr('googie_action_btn') != '1' && ref.isLangWindowShown())
-            ref.hideLangWindow();
         if (target.attr('googie_action_btn') != '1' && ref.isErrorWindowShown())
             ref.hideErrorWindow();
     });
@@ -190,11 +186,6 @@ this.appendNewMenuItem = function(name, call_back_fn, checker)
     this.extra_menu_items.push([name, call_back_fn, checker]);
 };
 
-this.appendCustomMenuBuilder = function(eval_fn, builder)
-{
-    this.custom_menu_builder.push([eval_fn, builder]);
-};
-
 this.setFocus = function()
 {
     try {
@@ -316,7 +307,6 @@ this.prepare = function(ignore, no_indicator)
     this.error_links = [];
     this.ta_scroll_top = this.text_area.scrollTop;
     this.ignore = ignore;
-    this.hideLangWindow();
 
     var area = $(this.text_area);
 
@@ -432,14 +422,9 @@ this.saveOldValue = function(elm, old_value) {
 
 this.createListSeparator = function()
 {
-    var td = document.createElement('td'),
-        tr = document.createElement('tr');
-
-    $(td).html(' ').attr('googie_action_btn', '1')
-        .css({'cursor': 'default', 'font-size': '3px', 'border-top': '1px solid #ccc', 'padding-top': '3px'});
-    tr.appendChild(td);
-
-    return tr;
+    return $('<li>').html('&nbsp;').attr('googie_action_btn', '1')
+        .css({'cursor': 'default', 'font-size': '3px', 'border-top': '1px solid #ccc', 'padding-top': '3px'})
+        .get(0);
 };
 
 this.correctError = function(id, elm, l_elm, rm_pre_space)
@@ -482,180 +467,145 @@ this.showErrorWindow = function(elm, id)
 
     var ref = this,
         pos = $(elm).offset(),
-        table = document.createElement('table'),
-        list = document.createElement('tbody');
+        list = document.createElement('ul');
 
     $(this.error_window).html('');
-    $(table).addClass('googie_list').attr('googie_action_btn', '1');
-
-    // Check if we should use custom menu builder, if not we use the default
-    var changed = false;
-    for (var k=0; k<this.custom_menu_builder.length; k++) {
-        var eb = this.custom_menu_builder[k];
-        if (eb[0](this.results[id])) {
-            changed = eb[1](this, list, elm);
-            break;
-        }
+    $(list).addClass('googie_list').attr('googie_action_btn', '1');
+
+    // Build up the result list
+    var suggestions = this.results[id]['suggestions'],
+        offset = this.results[id]['attrs']['o'],
+        len = this.results[id]['attrs']['l'],
+        row, item, dummy;
+
+    // [Add to dictionary] button
+    if (this.has_dictionary && !$(elm).attr('is_corrected')) {
+        row = document.createElement('li'),
+        dummy = document.createElement('span');
+
+        $(dummy).text(this.lang_learn_word).addClass('googie_add_to_dict');
+        $(row).attr('googie_action_btn', '1').css('cursor', 'default')
+            .mouseover(ref.item_onmouseover)
+            .mouseout(ref.item_onmouseout)
+            .click(function(e) {
+                ref.learnWord(elm, id);
+                ref.ignoreError(elm, id);
+            });
+
+        row.appendChild(dummy);
+        list.appendChild(row);
     }
 
-    if (!changed) {
-        // Build up the result list
-        var suggestions = this.results[id]['suggestions'],
-            offset = this.results[id]['attrs']['o'],
-            len = this.results[id]['attrs']['l'],
-            row, item, dummy;
-
-        // [Add to dictionary] button
-        if (this.has_dictionary && !$(elm).attr('is_corrected')) {
-            row = document.createElement('tr'),
-            item = document.createElement('td'),
-            dummy = document.createElement('span');
-
-            $(dummy).text(this.lang_learn_word).addClass('googie_add_to_dict');
-            $(item).attr('googie_action_btn', '1').css('cursor', 'default')
-                .mouseover(ref.item_onmouseover)
-                .mouseout(ref.item_onmouseout)
-                .click(function(e) {
-                    ref.learnWord(elm, id);
-                    ref.ignoreError(elm, id);
-                });
-
-            item.appendChild(dummy);
-            row.appendChild(item);
-            list.appendChild(row);
-        }
-/*
-        if (suggestions.length == 0) {
-            row = document.createElement('tr'),
-            item = document.createElement('td'),
-            dummy = document.createElement('span');
+    for (var i=0, len=suggestions.length; i < len; i++) {
+        row = document.createElement('li'),
+        dummy = document.createElement('span');
 
-            $(dummy).text(this.lang_no_suggestions);
-            $(item).attr('googie_action_btn', '1').css('cursor', 'default');
+        $(dummy).html(suggestions[i]);
 
-            item.appendChild(dummy);
-            row.appendChild(item);
-            list.appendChild(row);
-        }
-*/
-        for (var i=0, len=suggestions.length; i < len; i++) {
-            row = document.createElement('tr'),
-            item = document.createElement('td'),
-            dummy = document.createElement('span');
+        $(row).mouseover(this.item_onmouseover).mouseout(this.item_onmouseout)
+            .click(function(e) { ref.correctError(id, elm, e.target.firstChild); });
 
-            $(dummy).html(suggestions[i]);
+        row.appendChild(dummy);
+        list.appendChild(row);
+    }
 
-            $(item).mouseover(this.item_onmouseover).mouseout(this.item_onmouseout)
-              .click(function(e) { ref.correctError(id, elm, e.target.firstChild) });
+    // The element is changed, append the revert
+    if (elm.is_changed && elm.innerHTML != elm.old_value) {
+        var old_value = elm.old_value,
+            revert_row = document.createElement('li'),
+            rev_span = document.createElement('span');
 
-            item.appendChild(dummy);
-            row.appendChild(item);
-            list.appendChild(row);
-        }
+        $(rev_span).addClass('googie_list_revert').html(this.lang_revert + ' ' + old_value);
 
-        // The element is changed, append the revert
-        if (elm.is_changed && elm.innerHTML != elm.old_value) {
-            var old_value = elm.old_value,
-                revert_row = document.createElement('tr'),
-                revert = document.createElement('td'),
-                rev_span = document.createElement('span');
-
-            $(rev_span).addClass('googie_list_revert').html(this.lang_revert + ' ' + old_value);
-
-            $(revert).mouseover(this.item_onmouseover).mouseout(this.item_onmouseout)
-                .click(function(e) {
-                    ref.updateOrginalText(offset, elm.innerHTML, old_value, id);
-                    $(elm).removeAttr('is_corrected').css('color', '#b91414').html(old_value);
-                    ref.hideErrorWindow();
-                });
-
-            revert.appendChild(rev_span);
-            revert_row.appendChild(revert);
-            list.appendChild(revert_row);
-        }
+        $(revert_row).mouseover(this.item_onmouseover).mouseout(this.item_onmouseout)
+            .click(function(e) {
+                ref.updateOrginalText(offset, elm.innerHTML, old_value, id);
+                $(elm).removeAttr('is_corrected').css('color', '#b91414').html(old_value);
+                ref.hideErrorWindow();
+            });
 
-        // Append the edit box
-        var edit_row = document.createElement('tr'),
-            edit = document.createElement('td'),
-            edit_input = document.createElement('input'),
-            ok_pic = document.createElement('button'), // roundcube mod.
-            edit_form = document.createElement('form');
+        revert_row.appendChild(rev_span);
+        list.appendChild(revert_row);
+    }
 
-        var onsub = function () {
-            if (edit_input.value != '') {
-                if (!ref.isDefined(elm.old_value))
-                    ref.saveOldValue(elm, elm.innerHTML);
+    // Append the edit box
+    var edit_row = document.createElement('li'),
+        edit_input = document.createElement('input'),
+        ok_pic = document.createElement('button'),
+        edit_form = document.createElement('form');
 
-                ref.updateOrginalText(offset, elm.innerHTML, edit_input.value, id);
-                $(elm).attr('is_corrected', true).css('color', 'green').text(edit_input.value);
-                ref.hideErrorWindow();
-            }
-            return false;
-        };
+    var onsub = function () {
+        if (edit_input.value != '') {
+            if (!ref.isDefined(elm.old_value))
+                ref.saveOldValue(elm, elm.innerHTML);
 
-        $(edit_input).width(120)
-          .css({'margin': 0, 'padding': 0})
-          .val($(elm).text()).attr('googie_action_btn', '1');
-        $(edit).css('cursor', 'default').attr('googie_action_btn', '1');
-
-        // roundcube modified image use
-        if (this.use_ok_pic) {
-            $('<img>').attr('src', this.img_dir + 'ok.gif')
-                .width(32).height(16)
-                .css({cursor: 'pointer', 'margin-left': '2px', 'margin-right': '2px'})
-                .appendTo(ok_pic);
-        }
-        else {
-            $(ok_pic).text('OK');
+            ref.updateOrginalText(offset, elm.innerHTML, edit_input.value, id);
+            $(elm).attr('is_corrected', true).css('color', 'green').text(edit_input.value);
+            ref.hideErrorWindow();
         }
+        return false;
+    };
 
-        $(ok_pic).addClass('mainaction save googie_ok_button').click(onsub);
+    $(edit_input).width(120)
+      .css({'margin': 0, 'padding': 0})
+      .val($(elm).text()).attr('googie_action_btn', '1');
+    $(edit_row).css('cursor', 'default').attr('googie_action_btn', '1');
+
+    // roundcube modified image use
+    if (this.use_ok_pic) {
+        $('<img>').attr('src', this.img_dir + 'ok.gif')
+            .width(32).height(16)
+            .css({cursor: 'pointer', 'margin-left': '2px', 'margin-right': '2px'})
+            .appendTo(ok_pic);
+    }
+    else {
+        $(ok_pic).text('OK');
+    }
+
+    $(ok_pic).addClass('mainaction save googie_ok_button').click(onsub);
 
-        $(edit_form).attr('googie_action_btn', '1')
-            .css({'margin': 0, 'padding': 0, 'cursor': 'default', 'white-space': 'nowrap'})
-            .submit(onsub);
+    $(edit_form).attr('googie_action_btn', '1')
+        .css({'margin': 0, 'padding': 0, 'cursor': 'default', 'white-space': 'nowrap'})
+        .submit(onsub);
 
-        edit_form.appendChild(edit_input);
-        edit_form.appendChild(ok_pic);
-        edit.appendChild(edit_form);
-        edit_row.appendChild(edit);
-        list.appendChild(edit_row);
+    edit_form.appendChild(edit_input);
+    edit_form.appendChild(ok_pic);
+    edit_row.appendChild(edit_form);
+    list.appendChild(edit_row);
 
-        // Append extra menu items
-        if (this.extra_menu_items.length > 0)
-            list.appendChild(this.createListSeparator());
+    // Append extra menu items
+    if (this.extra_menu_items.length > 0)
+        list.appendChild(this.createListSeparator());
 
-        var loop = function(i) {
-            if (i < ref.extra_menu_items.length) {
-                var e_elm = ref.extra_menu_items[i];
+    var loop = function(i) {
+        if (i < ref.extra_menu_items.length) {
+            var e_elm = ref.extra_menu_items[i];
 
-                if (!e_elm[2] || e_elm[2](elm, ref)) {
-                    var e_row = document.createElement('tr'),
-                      e_col = document.createElement('td');
+            if (!e_elm[2] || e_elm[2](elm, ref)) {
+                var e_row = document.createElement('tr'),
+                  e_col = document.createElement('td');
 
-                    $(e_col).html(e_elm[0])
-                        .mouseover(ref.item_onmouseover)
-                        .mouseout(ref.item_onmouseout)
-                        .click(function() { return e_elm[1](elm, ref) });
+                $(e_col).html(e_elm[0])
+                    .mouseover(ref.item_onmouseover)
+                    .mouseout(ref.item_onmouseout)
+                    .click(function() { return e_elm[1](elm, ref) });
 
-                    e_row.appendChild(e_col);
-                    list.appendChild(e_row);
-                }
-                loop(i+1);
+                e_row.appendChild(e_col);
+                list.appendChild(e_row);
             }
-        };
+            loop(i+1);
+        }
+    };
 
-        loop(0);
-        loop = null;
+    loop(0);
+    loop = null;
 
-        //Close button
-        if (this.use_close_btn) {
-            list.appendChild(this.createCloseButton(this.hideErrorWindow));
-        }
+    //Close button
+    if (this.use_close_btn) {
+        list.appendChild(this.createCloseButton(this.hideErrorWindow));
     }
 
-    table.appendChild(list);
-    this.error_window.appendChild(table);
+    this.error_window.appendChild(list);
 
     // roundcube plugin api hook
     rcmail.triggerEvent('googiespell_create', {obj: this.error_window});
@@ -835,103 +785,6 @@ this.showErrorsInIframe = function()
 //    this.edit_layer.scrollTop = this.ta_scroll_top;
 };
 
-
-//////
-// Choose language menu
-//////
-this.createLangWindow = function()
-{
-    this.language_window = document.createElement('div');
-    $(this.language_window).addClass('googie_window popupmenu')
-        .width(100).attr('googie_action_btn', '1');
-
-    // Build up the result list
-    var table = document.createElement('table'),
-        list = document.createElement('tbody'),
-        ref = this,
-        row, item, span;
-
-    $(table).addClass('googie_list').width('100%');
-    this.lang_elms = [];
-
-    for (i=0; i < this.langlist_codes.length; i++) {
-        row = document.createElement('tr');
-        item = document.createElement('td');
-        span = document.createElement('span');
-
-        $(span).text(this.lang_to_word[this.langlist_codes[i]]);
-        this.lang_elms.push(item);
-
-        $(item).attr('googieId', this.langlist_codes[i])
-            .click(function(e) {
-                ref.deHighlightCurSel();
-                ref.setCurrentLanguage($(this).attr('googieId'));
-
-                if (ref.lang_state_observer != null) {
-                    ref.lang_state_observer();
-                }
-
-                ref.highlightCurSel();
-                ref.hideLangWindow();
-            })
-            .mouseover(function(e) {
-                if (this.className != "googie_list_selected")
-                    this.className = "googie_list_onhover";
-            })
-            .mouseout(function(e) {
-                if (this.className != "googie_list_selected")
-                    this.className = "googie_list_onout";
-            });
-
-        item.appendChild(span);
-        row.appendChild(item);
-        list.appendChild(row);
-    }
-
-    // Close button
-    if (this.use_close_btn) {
-        list.appendChild(this.createCloseButton(function () { ref.hideLangWindow.apply(ref) }));
-    }
-
-    this.highlightCurSel();
-
-    table.appendChild(list);
-    this.language_window.appendChild(table);
-};
-
-this.isLangWindowShown = function()
-{
-    return $(this.language_window).is(':visible');
-};
-
-this.hideLangWindow = function()
-{
-    $(this.language_window).hide();
-    $(this.switch_lan_pic).removeClass().addClass('googie_lang_3d_on');
-};
-
-this.showLangWindow = function(elm)
-{
-    if (this.show_menu_observer)
-        this.show_menu_observer(this);
-
-    this.createLangWindow();
-    $('body').append(this.language_window);
-
-    var pos = $(elm).offset(),
-        height = $(elm).height(),
-        width = $(elm).width(),
-        h = $(this.language_window).height(),
-        pageheight = $(document).height(),
-        left = this.change_lang_pic_placement == 'right' ?
-            pos.left - 100 + width : pos.left + width,
-        top = pos.top + h < pageheight ? pos.top + height : pos.top - h - 4;
-
-    $(this.language_window).css({'top' : top+'px','left' : left+'px'}).show();
-
-    this.highlightCurSel();
-};
-
 this.deHighlightCurSel = function()
 {
     $(this.lang_cur_elm).removeClass().addClass('googie_list_onout');
@@ -952,30 +805,6 @@ this.highlightCurSel = function()
     }
 };
 
-this.createChangeLangPic = function()
-{
-    var img = $('<img>')
-        .attr({src: this.img_dir + 'change_lang.gif', 'alt': 'Change language', 'googie_action_btn': '1'}),
-        switch_lan = document.createElement('span');
-        ref = this;
-
-    $(switch_lan).addClass('googie_lang_3d_on')
-        .append(img)
-        .click(function(e) {
-            var elm = this.tagName.toLowerCase() == 'img' ? this.parentNode : this;
-            if($(elm).hasClass('googie_lang_3d_click')) {
-                elm.className = 'googie_lang_3d_on';
-                ref.hideLangWindow();
-            }
-            else {
-                elm.className = 'googie_lang_3d_click';
-                ref.showLangWindow(elm);
-            }
-        });
-
-    return switch_lan;
-};
-
 this.createSpellDiv = function()
 {
     var span = document.createElement('span');
@@ -1043,10 +872,7 @@ this.checkSpellingState = function(fire)
     if (fire)
         this.setStateChanged('ready');
 
-    if (this.show_change_lang_pic)
-        this.switch_lan_pic = this.createChangeLangPic();
-    else
-        this.switch_lan_pic = document.createElement('span');
+    this.switch_lan_pic = document.createElement('span');
 
     var span_chck = this.createSpellDiv(),
         ref = this;
diff --git a/skins/classic/googiespell.css b/skins/classic/googiespell.css
index c341ad4aa..e9e51feed 100644
--- a/skins/classic/googiespell.css
+++ b/skins/classic/googiespell.css
@@ -24,7 +24,7 @@
   padding: 0;
 }
 
-.googie_list td {
+.googie_list li {
   font-size: 11px;
   padding-left: 10px;
   padding-right: 10px;
diff --git a/skins/elastic/README.md b/skins/elastic/README.md
index db8e75bde..e844956a8 100644
--- a/skins/elastic/README.md
+++ b/skins/elastic/README.md
@@ -62,14 +62,14 @@ FOR DEVELOPERS
 ```
     <body>
         <div id="layout">
-            <div class="menu"></div>
-            <div class="sidebar"></div>
-            <div class="list"></div>
-            <div class="content"></div>
+            <div id="layout-menu"></div>
+            <div id="layout-sidebar"></div>
+            <div id="layout-list"></div>
+            <div id="layout-content"></div>
         </div>
     </body>
 ```
-  where `sidebar` and `list` are optional. Which element of the `layout` will be displayed
+  where `#layout-sidebar` and `#layout-list` are optional. Which element of the `#layout` will be displayed
   as a main view on mobile devices can be defined by adding `selected` class to it.
 
 - The `<html>` element will receive special classes that will be updated on resize
diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 90dcb7d2f..5a9f32e81 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -68,8 +68,8 @@
 @color-searchbar-background:            #fbfbfb;
 
 // Toolbar menu
-@color-toolbarmenu-hover:               #fff;
-@color-toolbarmenu-hover-background:    @color-main;
+@color-menu-hover:               #fff;
+@color-menu-hover-background:    @color-main;
 
 
 // Listings
diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index 53458364d..a3101c022 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -40,74 +40,24 @@ body {
     height: 100%;
     color: @color-font;
     overflow: hidden;
+
+    html.iframe & {
+        overflow: auto;
+    }
 }
 
-body > #layout {
+#layout {
     overflow: hidden;
     display: flex;
     height: 100%;
     width: 100%;
 
     & > div {
-        &.sidebar,
-        &.list {
-            display: flex;
-            flex-direction: column;
-            max-width: 30%;
-            border-right: 1px solid @color-layout-border;
-        }
-
-        &.content {
-            display: flex;
-            flex: 6;
-            flex-direction: column;
-            min-width: 50%;
-            background-color: @color-layout-content-background;
-
-            & > .formcontent, // e.g. Help plugin
-            & > .content {
-                height: 100%;
-                width: 100%;
-                overflow: auto;
-                flex: 1;
-            }
-
-            .iframe-wrapper {
-                width: 100%;
-                height: 100%;
-                flex: 1;
-
-                iframe {
-                    width: 100%;
-                    height: 100%;
-                    border: 0;
-                }
-            }
-        }
-
-        &.sidebar {
-            display: flex;
-            min-width: 220px;
-            background-color: @color-layout-sidebar-background;
-            flex: 2;
-        }
-
-        &.list {
-            display: flex;
-            flex: 3;
-            min-width: 300px;
-            background-color: @color-layout-list-background;
-        }
-
         & > .scroller {
             flex: 1;
             position: relative; // for .listing-info positioning
         }
 
-        & > .content.only > .scroller {
-            overflow: auto;
-        }
-
         & > .header,
         & > .footer {
             background-color: @color-layout-header-background;
@@ -136,6 +86,10 @@ body > #layout {
                 margin: 0 -20rem;
             }
 
+            a.button {
+                color: @color-toolbar-button;
+            }
+
             a.toolbar-list-button,
             a.toolbar-menu-button {
                 order: 99; // always the last button
@@ -162,25 +116,129 @@ body > #layout {
     }
 }
 
-html.iframe {
-    body {
+#layout-sidebar {
+    display: flex;
+    flex-direction: column;
+    flex: 2;
+    max-width: 30%;
+    min-width: 220px;
+    border-right: 1px solid @color-layout-border;
+    background-color: @color-layout-sidebar-background;
+}
+
+#layout-list {
+    display: flex;
+    flex-direction: column;
+    flex: 3;
+    max-width: 30%;
+    min-width: 300px;
+    border-right: 1px solid @color-layout-border;
+    background-color: @color-layout-list-background;
+}
+
+#layout-content {
+    display: flex;
+    flex: 6;
+    flex-direction: column;
+    min-width: 50%;
+    background-color: @color-layout-content-background;
+
+    html.iframe & {
+        height: 100%;
+    }
+
+    & > .formcontent, // e.g. Help plugin
+    & > .content {
+        height: 100%;
+        width: 100%;
         overflow: auto;
+        flex: 1;
+    }
 
-        #layout > .content {
+    .iframe-wrapper {
+        width: 100%;
+        height: 100%;
+        flex: 1;
+
+        iframe {
+            width: 100%;
             height: 100%;
+            border: 0;
+        }
+    }
+
+    &.only > .scroller {
+        overflow: auto;
+    }
+}
+
+#layout-menu {
+    &.popover {
+        left: 0 !important;
+    }
+
+    .popover-header {
+        height: @layout-header-height;
+        line-height: @layout-header-height;
+        border: 0;
+        border-radius: 0;
+        text-align: center;
+
+        img {
+            max-height: @layout-header-height;
+            max-width: @layout-menu-width;
+            padding: .25rem;
+
+            @media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
+                max-width: @layout-menu-width * 0.45;
+            }
+        }
+
+        @media screen and (min-width: (@screen-width-xs + 1px)) {
+            padding: 0 !important;
+            background-color: @color-taskmenu-background !important;
+
+            a {
+                display: none !important;
+            }
+        }
+
+        html.layout-phone & {
+            display: flex !important;
+            align-items: center;
+            justify-content: center;
+            padding: 0 .5rem;
+
+            img {
+                max-width: @layout-mobile-menu-width - 50px;
+            }
+
+            a {
+                width: auto;
+                flex: 1;
+
+                &:before {
+                    height: @layout-touch-header-height;
+                    float: right;
+                }
+
+                .inner {
+                    display: none;
+                }
+            }
         }
     }
 }
 
 
 @media screen and (max-width: @screen-width-large) {
-    body > #layout > div.sidebar,
-    body > #layout > div.list {
+    #layout-sidebar,
+    #layout-list {
         min-width: 260px;
         flex: 3;
     }
 
-    body > #layout > div.list > .header > a.button {
+    #layout-list > .header > a.button {
         padding: 0 .25rem;
         margin: 0 .25rem;
     }
@@ -190,13 +248,13 @@ html.iframe {
 }
 
 @media screen and (max-width: @screen-width-small) {
-    body > #layout > div.sidebar,
-    body > #layout > div.list {
+    #layout-sidebar,
+    #layout-list {
         max-width: none;
         border: 0;
     }
 
-    body > #layout > div > .header {
+    #layout > div > .header {
         background-color: @color-layout-mobile-header-background;
 
         a.button {
@@ -220,7 +278,7 @@ html.iframe {
         }
     }
 
-    body > #layout > div > .footer {
+    #layout > div > .footer {
         background-color: @color-layout-mobile-footer-background;
     }
 
@@ -233,18 +291,18 @@ html.iframe {
 }
 
 @media screen and (max-width: @screen-width-mini) {
-    body > #layout > div.sidebar,
-    body > #layout > div.list {
+    #layout-sidebar,
+    #layout-list {
         min-width: @page-min-width;
     }
 }
 
 @media screen and (min-width: (@screen-width-xs + 1px)) {
-    a.menu-button {
+    a.task-menu-button {
         display: none;
     }
 
-    body > #layout > .menu {
+    #layout-menu {
         // FIXME: we set background color here not in taskmenu.less, because
         // otherwise background is partially white on Android/iOS
         background-color: @color-taskmenu-background;
@@ -254,21 +312,21 @@ html.iframe {
 
 @media screen and (min-width: (@screen-width-small + 1px)) {
     .floating-action-buttons,
-    body > #layout > .content > .header > .header-title,
-    body > #layout > div > .header > .buttons,
+    #layout-content > .header > .header-title,
+    #layout > div > .header > .buttons,
     a.toolbar-menu-button {
         display: none;
     }
 }
 
 @media screen and (min-width: (@screen-width-medium + 1px)) {
-    body > #layout > .menu {
+    #layout-menu {
         width: @layout-menu-width;
     }
 }
 
 @media screen and (min-width: (@screen-width-large + 1px)) {
-    body > #layout > .list > .header > .header-title:not(.all-sizes),
+    #layout-list > .header > .header-title:not(.all-sizes),
     a.toolbar-list-button,
     a.back-list-button,
     a.back-sidebar-button {
diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index 0d199fc8e..011e1c80f 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -15,9 +15,8 @@
 @import "widgets/buttons";
 @import "widgets/jqueryui";
 @import "widgets/dialogs";
-@import "widgets/taskmenu";
+@import "widgets/menu";
 @import "widgets/messages";
-@import "widgets/toolbar";
 @import "widgets/lists";
 @import "widgets/forms";
 @import "widgets/editor";
@@ -26,17 +25,19 @@
 
 /*** Login form ***/
 
-.task-login #layout > .content {
-    text-align: center;
-    width: 100%;
-    display: block;
-}
+.task-login {
+    #layout-content {
+        text-align: center;
+        width: 100%;
+        display: block;
+    }
 
-.task-login #layout .content #logo {
-    display: inline-block;
-    position: relative;
-    top: 16vh;
-    max-height: 100px;
+    #logo {
+        display: inline-block;
+        position: relative;
+        top: 16vh;
+        max-height: 100px;
+    }
 }
 
 #login-form {
@@ -94,8 +95,8 @@
 }
 
 body.task-error-login #layout {
-    & > .menu,
-    & > .content > .header {
+    #layout-menu,
+    #layout-content > .header {
         display: none;
     }
 }
diff --git a/skins/elastic/styles/variables.less b/skins/elastic/styles/variables.less
index d8ff0f82b..73689ba96 100644
--- a/skins/elastic/styles/variables.less
+++ b/skins/elastic/styles/variables.less
@@ -25,7 +25,7 @@
 @page-min-width:        240px;
 
 @layout-menu-width:                     5.6rem;
-@layout-menu-width-sm:                  @layout-menu-width * 0.6;
+@layout-menu-width-sm:                  3rem;
 @layout-header-height:                  4.2rem;
 @layout-footer-height:                  @layout-header-height;
 @layout-footer-small-height:            2.5rem;
diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
index 386f74a44..b1529614b 100644
--- a/skins/elastic/styles/widgets/buttons.less
+++ b/skins/elastic/styles/widgets/buttons.less
@@ -42,7 +42,7 @@ button.btn {
         content: @fa-var-ellipsis-v;
         width: 1em;
     }
-    &.menu-button:before {
+    &.task-menu-button:before {
         content: @fa-var-bars;
     }
     &.back-sidebar-button:before,
diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less
index 26416aded..133c05098 100644
--- a/skins/elastic/styles/widgets/common.less
+++ b/skins/elastic/styles/widgets/common.less
@@ -378,9 +378,9 @@ fieldset.image-attachment {
         border-top: 1px solid @color-table-border;
         text-align: left;
 
-        a.button {
-            padding: 0;
-            height: 3.5rem;
+        a {
+            padding: .2rem .45rem !important;
+            height: 3.5rem !important;
         }
     }
 
diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less
index 93b9dceaf..3be90c7ac 100644
--- a/skins/elastic/styles/widgets/dialogs.less
+++ b/skins/elastic/styles/widgets/dialogs.less
@@ -111,10 +111,6 @@ html.layout-phone {
         }
     }
 
-    .popover.menu {
-        left: 0 !important;
-    }
-
     .popover-overlay {
         z-index: 1000;
         background-color: @color-dialog-overlay-background;
diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
index c4e918217..ac257ced7 100644
--- a/skins/elastic/styles/widgets/editor.less
+++ b/skins/elastic/styles/widgets/editor.less
@@ -461,8 +461,8 @@
 
 .mce-menu {
     .mce-menu-item.mce-active {
-        color: @color-toolbarmenu-hover;
-        background-color: @color-toolbarmenu-hover-background;
+        color: @color-menu-hover;
+        background-color: @color-menu-hover-background;
     }
 
     .popover-header {
@@ -914,13 +914,13 @@ html.touch .mce-grid td {
 }
 
 .googie_list {
-    td {
+    li {
         min-width: 8rem;
         width: auto;
 
         &.googie_list_onhover {
-            color: @color-toolbarmenu-hover;
-            background-color: @color-toolbarmenu-hover-background;
+            color: @color-menu-hover;
+            background-color: @color-menu-hover-background;
         }
 
         .googie_list_revert:before {
diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
index ac8d4b2ba..51fcd343e 100644
--- a/skins/elastic/styles/widgets/jqueryui.less
+++ b/skins/elastic/styles/widgets/jqueryui.less
@@ -36,7 +36,7 @@
 
    .ui-state-active {
         border: 0 !important;
-        background-color: @color-toolbarmenu-hover-background !important;
+        background-color: @color-menu-hover-background !important;
     }
 
     .ui-menu-item {
diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less
index 608dec252..a2165761b 100644
--- a/skins/elastic/styles/widgets/lists.less
+++ b/skins/elastic/styles/widgets/lists.less
@@ -364,11 +364,16 @@ html.ie11 .listing.iconized li a:before {
 .popupmenu .listing {
     li > a {
         border-left: 0;
+
+        &:not(.disabled):hover {
+            color: @color-menu-hover;
+            background-color: @color-menu-hover-background;
+        }
     }
 
     li.selected {
-        color: @color-toolbarmenu-hover;
-        background-color: @color-toolbarmenu-hover-background;
+        color: @color-menu-hover;
+        background-color: @color-menu-hover-background;
     }
 
     td {
@@ -534,17 +539,9 @@ ul.treelist {
     }
 
     // folder-selector fix for left padding
-    &.toolbarmenu a:before {
+    &.menu a:before {
         margin-left: .5em;
     }
-
-    &.toolbarmenu {
-        li {
-            a:before {
-                margin-right: .25em;
-            }
-        }
-    }
 }
 
 
diff --git a/skins/elastic/styles/widgets/mail.less b/skins/elastic/styles/widgets/mail.less
index de7749edd..bfe049b77 100644
--- a/skins/elastic/styles/widgets/mail.less
+++ b/skins/elastic/styles/widgets/mail.less
@@ -257,16 +257,8 @@
     background-color: @color-image-tools-background;
     border-radius: 0 .3rem .3rem 0;
 
-    .toolbar {
+    .menu {
         float: left;
-        height: @layout-header-height;
-
-        a.button:before {
-            width: auto;
-            height: 1.75rem;
-            display: block;
-            float: none;
-        }
     }
 
     a.button.icon.tools {
@@ -293,7 +285,7 @@
     }
 
     a {
-        color: @color-image-tools;
+        color: @color-image-tools !important;
 
         &:focus,
         &:hover {
diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/menu.less
similarity index 64%
rename from skins/elastic/styles/widgets/toolbar.less
rename to skins/elastic/styles/widgets/menu.less
index b9d77d523..5b0eb9d3e 100644
--- a/skins/elastic/styles/widgets/toolbar.less
+++ b/skins/elastic/styles/widgets/menu.less
@@ -11,84 +11,131 @@
 
 /*** Toolbar widget ***/
 
-.toolbar {
+.menu {
     margin: 0;
-    font-size: 1rem;
     text-align: center;
+    white-space: nowrap;
 
-    &.listing a,
     a {
+        .overflow-ellipsis;
         text-decoration: none;
-        cursor: pointer !important; // TODO: re-consider .listing class use on toolbar
-        color: @color-toolbar-button;
-    }
 
-    a.button {
-        display: inline-block;
-        border: 0 !important;
-        height: @layout-header-height;
-        min-width: 3.5rem;
-        max-width: 6rem;
-        width: auto; // reset width defined for links in .listing
-        padding: .45rem;
-        text-align: center;
-        text-overflow: ellipsis;
-        overflow-x: hidden;
-        line-height: 1.5;
+        &:before {
+            &:extend(.font-icon-class);
+        }
 
         &:hover,
         &:focus {
             outline: 0;
         }
 
-        &.selected {
-            color: @color-success;
+        &:not(.disabled):focus,
+        &:not(.disabled):hover {
+            background-color: @color-toolbar-button-background-hover;
+        }
+    }
+
+    &.toolbar {
+        li {
+            display: inline-block;
+            height: @layout-touch-header-height;
         }
 
-        &:before {
-            &:extend(.font-icon-class);
-            float: none;
-            margin: 0;
-            line-height: 1.75;
+        a {
+            color: @color-toolbar-button;
+            display: inline-block;
+            border: 0 !important;
+            height: @layout-header-height;
+            min-width: 3.2rem;
+            max-width: 6rem;
+            width: auto; // reset width defined for links in .listing
+            padding: .45rem;
+            line-height: 1.5;
+            cursor: pointer;
+            font-size: 1rem;
+
+            &:before {
+                height: 1.75rem !important;
+                float: none !important;
+                width: auto !important;
+                margin: 0 !important;
+            }
+
+            &.selected {
+                color: @color-success;
+            }
+        }
+
+        & > .spacer {
+            width: 1em;
+        }
+
+        .dropbutton {
+            &:not(.disabled):hover {
+                background-color: @color-toolbar-button-background-hover;
+            }
+
+            a.dropdown {
+                min-width: auto;
+                padding: 0 .3rem;
+
+                &:before {
+                    line-height: 4.2;
+                }
+
+                &:hover {
+                    background-color: darken(@color-toolbar-button-background-hover, 5%);
+                }
+            }
         }
     }
 
-    &:not(.popupmenu) span.inner {
+    span.inner {
         font-size: 90%;
         font-weight: normal;
     }
 
     .dropbutton {
-        a.button.dropdown {
+        display: block;
+
+        a.dropdown {
             font-size: 75%;
-            overflow: hidden; // for IE11
+            min-width: auto;
+
+            html.ie11 &:before {
+                overflow: hidden;
+                font-size: 80%;
+            }
 
             span.inner {
                 display: none;
             }
         }
 
-        a.button:first-child {
+        a:first-child {
             padding-right: 0;
         }
     }
 
-    & > .spacer {
-        width: 1em;
-    }
-
     &.pagenav {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding: 0 !important;
+        font-size: 100%; // in case this is .footer.small
 
-        a.button {
+        a {
             flex-grow: 1;
+            display: inline-block;
             min-width: 2rem !important;
             height: @layout-footer-small-height;
+            color: @color-toolbar-button;
 
             &:before {
-                line-height: 1.25;
+                margin: 0;
+                display: inline;
+                float: none;
+                line-height: @layout-footer-small-height;
             }
         }
 
@@ -97,7 +144,6 @@
             color: @color-list-pagenav;
             flex-grow: 4;
             font-size: 80%;
-            white-space: nowrap;
         }
 
         input {
@@ -106,6 +152,7 @@
             font-size: 90%;
             text-align: center;
             max-height: 1.6rem;
+            margin: 0 .2rem;
 
             html.layout-phone & {
                 display: none;
@@ -121,7 +168,7 @@
             background-color: @color-searchbar-background;
             border-bottom: 1px solid @color-list-border;
 
-            a.button {
+            a {
                 flex-grow: unset;
             }
 
@@ -140,21 +187,6 @@
         }
     }
 
-    &.footer {
-        a.button:before {
-            height: 1.75rem;
-            float: none;
-            display: block;
-            width: auto;
-        }
-    }
-
-    &.footer.small {
-        a.button:before {
-            height: auto; // for Chrome
-        }
-    }
-
     &.content-frame-navigation.hide-nav-buttons {
         a.next,
         a.prev {
@@ -167,13 +199,6 @@
         display: flex;
         justify-content: space-around;
     }
-}
-
-
-.header {
-    a.button {
-        color: @color-toolbar-button;
-    }
 
     .buttons {
         display: block;
@@ -194,117 +219,189 @@
                 font-size: 1.75rem;
             }
         }
+    }
 
-        a.button {
-            display: inline-block;
+    .popover & {
+        li {
+            display: block;
+            height: auto;
+            text-align: left;
 
-            &:before {
-                &:extend(.font-icon-class);
-                float: none;
+            &.spacer {
+                display: none;
             }
 
-            &.reply:before {
-                content: @fa-var-reply;
+            &:last-child {
+                border: 0;
             }
 
-            &.send:before {
-                content: @fa-var-paper-plane;
+            &.separator {
+                line-height: 1.5rem !important;
+                font-size: .75rem !important;
+                padding: 0 .5rem;
+                color: @color-popover-separator;
+                background-color: @color-popover-separator-background;
+
+                label {
+                    margin: 0; // Unsets Bootstrap label margin, bug?
+                }
             }
-        }
-    }
-}
 
-.popupmenu.toolbar.listing {
-    a.button {
-        max-width: 100%;
-        width: 100%;
-        text-align: left;
-        line-height: @layout-touch-menu-record-height;
-        height: @layout-touch-menu-record-height;
+            a {
+                height: unset;
+                max-width: 100%;
+                width: 100%;
+                line-height: @listing-line-height;
+                display: block;
+                padding: 0 .5rem;
 
-        &:before {
-            display: inline-block;
-            line-height: inherit;
-            margin-right: .5rem;
-        }
-    }
+                &:before {
+                    line-height: inherit;
+                    height: inherit !important;
+                    margin-right: .5rem !important;
+                    float: left !important;
+                    width: 1.18em !important;
+                }
 
-    .dropbutton {
-        display: flex;
+                &:not(.disabled):hover {
+                    color: @color-menu-hover;
+                    background-color: @color-menu-hover-background;
+                }
+            }
 
-        a.button:first-child {
-            .overflow-ellipsis;
-            flex: 1;
+            span.inner {
+                font-size: 100%;
+            }
         }
 
-        a.button.dropdown {
-            font-size: 100%;
-            cursor: pointer;
-            width: auto;
+        .dropbutton {
+            display: flex;
 
-            &:before {
-                content: @fa-var-angle-right;
-                margin-left: .5em;
-                margin-right: 0;
+            a:first-child {
+                .overflow-ellipsis;
+                flex: 1;
             }
 
-            span.inner {
-                display: none;
+            a.dropdown {
+                width: auto;
+
+                &:before {
+                    content: @fa-var-angle-right;
+                    line-height: inherit;
+                    margin: 0;
+                }
+
+                span.inner {
+                    display: none;
+                }
             }
         }
     }
+}
 
-    li.spacer {
-        display: none;
+@media screen and (min-width: (@screen-width-small + 1px)) {
+    .content-frame-navigation {
+        display: none !important;
     }
 
-    li:last-child {
-        border: 0;
+    .header a.button.icon {
+        &:not(.disabled):focus,
+        &:not(.disabled):hover {
+            background-color: @color-toolbar-button-background-hover;
+            outline: 0;
+        }
+
+        &:before {
+            margin: 0;
+        }
     }
 }
 
-.toolbarmenu li {
-    &.separator {
-        // TODO: all separator properties
-        line-height: 1.5rem !important;
-        font-size: .75rem !important;
-        padding: 0 .5rem;
-        color: @color-popover-separator;
-        background-color: @color-popover-separator-background;
+@media screen and (max-width: @screen-width-small) {
+    .menu.footer {
+        justify-content: space-around;
 
-        label {
-            margin: 0; // Unsets Bootstrap label margin, bug?
+        & > * {
+            flex-grow: 1;
         }
-    }
-
-    a {
-        opacity: .5;
 
-        &.active {
-            opacity: 1;
+        .buttons {
+            display: flex;
+            justify-content: space-around;
         }
-    }
 
-    &:last-child {
-        border-bottom: none;
+        .listselectors > * {
+            flex-grow: 1;
+        }
     }
 
-    a:before {
-        &:extend(.font-icon-class);
+    .menu.listing a {
+        color: @color-font;
     }
 }
 
-.toolbarmenu.listing li {
-    &:hover {
-        a.active {
-            color: @color-toolbarmenu-hover;
-            background-color: @color-toolbarmenu-hover-background;
+a.toolbar-button {
+    @media screen and (min-width: (@screen-width-large + 1px)) {
+        line-height: 1.5;
+        padding: .45rem;
+
+        &:before {
+            float: none !important;
+            height: 1.75rem !important;
+            line-height: 1.5;
+            width: auto !important;
+        }
+
+        span.inner {
+            display: inline !important;
+            font-weight: normal;
+            font-size: 90%;
         }
     }
 }
 
-.toolbar a.button,
-.toolbarmenu li a {
+/*** Menu button icons ***/
+
+.menu a {
+    &.mail:before {
+        content: @fa-var-envelope;
+    }
+    &.contacts:before {
+        content: @fa-var-users;
+    }
+    &.settings:before {
+        content: @fa-var-sliders-h;
+    }
+    &.help:before {
+        content: @fa-var-life-ring;
+    }
+    &.logout:before {
+        content: @fa-var-power-off;
+    }
+    &.about:before {
+        content: @fa-var-question;
+    }
+    &.refresh:before {
+        content: @fa-var-sync;
+    }
+    &.compose:before {
+        content: @fa-var-edit;
+    }
+    &.calendar:before {
+        content: @fa-var-calendar-alt;
+    }
+    &.tasklist:before {
+        content: @fa-var-tasks;
+    }
+    &.files:before {
+        content: @fa-var-folder;
+    }
+    &.notes:before {
+        content: @fa-var-sticky-note;
+    }
+    &.chat:before {
+        content: @fa-var-comments;
+    }
     &.actions:before {
         content: @fa-var-cog;
     }
@@ -340,9 +437,6 @@
     &.collapse:before {
         content: @fa-var-angle-down;
     }
-    &.compose:before {
-        content: @fa-var-edit;
-    }
     &.copy:before {
         content: @fa-var-copy;
     }
@@ -553,137 +647,6 @@
     }
 }
 
-html.touch {
-    .toolbarmenu.listing td,
-    .toolbarmenu.listing li,
-    #layout > :not(.content) > .header a.button {
-        font-size: 1.2rem;
-    }
-
-    .toolbarmenu.listing li {
-    }
-
-    .toolbarmenu li {
-    }
-}
-
-html.ie11 .toolbar .dropbutton a.dropdown:before {
-    font-size: 80%;
-}
-
-@media screen and (min-width: (@screen-width-small + 1px)) {
-    .toolbar {
-        .header > & {
-            display: flex; // for Safari on desktop
-        }
-
-        a.button {
-            &:not(.disabled):focus,
-            &:not(.disabled):hover {
-                background-color: @color-toolbar-button-background-hover;
-            }
-        }
-
-        &.listing li {
-            display: inline-block;
-            border: 0;
-
-            a.button:before {
-                height: 1.75rem;
-                float: none;
-                display: block;
-                width: auto;
-                margin: 0;
-            }
-        }
-
-        .dropbutton {
-            height: @layout-header-height;
-            display: inline-block;
-
-            &:not(.disabled):hover {
-                background-color: @color-toolbar-button-background-hover;
-            }
-
-            a.button.dropdown {
-                min-width: 1.1rem;
-                padding: 0 .3rem;
-
-                &:hover {
-                    background-color: darken(@color-toolbar-button-background-hover, 5%);
-                }
-
-                &:before {
-                    height: @layout-header-height;
-                    line-height: 4.2;
-                }
-            }
-        }
-    }
-
-    .toolbar.content-frame-navigation {
-        display: none !important;
-    }
-
-    .header a.button.icon {
-        &:not(.disabled):focus,
-        &:not(.disabled):hover {
-            background-color: @color-toolbar-button-background-hover;
-            outline: 0;
-        }
-
-        &:before {
-            margin: 0;
-        }
-    }
-}
-
-@media screen and (max-width: @screen-width-small) {
-    body > #layout > div > .toolbar.footer {
-        justify-content: space-around;
-
-        & > * {
-            flex-grow: 1;
-        }
-
-        .buttons {
-            display: flex;
-            justify-content: space-around;
-        }
-
-        .listselectors > * {
-            flex-grow: 1;
-        }
-    }
-
-    .toolbar.listing a {
-        color: @color-font;
-    }
-}
-
-a.button.icon.toolbar-button {
-    order: 8;
-
-    @media screen and (min-width: (@screen-width-large + 1px)) {
-        height: @layout-header-height;
-        line-height: 1.5;
-        padding: .45rem;
-
-        &:before {
-            float: none;
-            height: 1.75rem;
-            line-height: 1.75;
-            width: auto;
-        }
-
-        span.inner {
-            display: inline;
-            font-weight: normal;
-            font-size: 90%;
-        }
-    }
-}
-
 
 /*** Searchbar and searchoptions widgets ***/
 
@@ -695,10 +658,8 @@ a.button.icon.toolbar-button {
     border-bottom: 1px solid @color-list-border;
     display: flex;
     align-items: center;
-    white-space: nowrap;
     overflow: hidden;
     position: relative;
-    padding-right: .5rem;
 
     form {
         flex: 1;
@@ -722,20 +683,21 @@ a.button.icon.toolbar-button {
         outline: 0; // removes focus outline in Chrome
     }
 
-    a.button {
+    a {
         height: @layout-searchbar-height;
         min-width: auto;
         color: @color-toolbar-button;
 
         &:before {
             &:extend(.font-icon-class);
+            width: 2rem;
+            line-height: @layout-searchbar-height;
+            margin: 0;
         }
 
         &.options {
             &:before {
                 content: @fa-var-angle-down;
-                line-height: 1.25;
-                width: 1em;
             }
         }
 
@@ -758,12 +720,12 @@ a.button.icon.toolbar-button {
     }
 
     &.active {
-        a.button.reset {
+        a.reset {
             display: inline;
         }
     }
 
-    &.open a.button.options:before {
+    &.open a.options:before {
         content: @fa-var-angle-up;
     }
 }
@@ -799,3 +761,120 @@ a.button.icon.toolbar-button {
         display: block !important;
     }
 }
+
+
+/*** Taskmenu ***/
+
+#taskmenu {
+    a {
+        display: block;
+    }
+
+    @media screen and (max-width: @screen-width-xs) {
+        z-index: 30001; // because autocompletion popup uses z-index:30000
+        overflow-x: hidden;
+
+        a {
+            max-width: unset;
+            padding: 0 .5em;
+            margin-top: 1px;
+            text-align: left;
+            line-height: @layout-touch-menu-record-height;
+            height: @layout-touch-menu-record-height;
+            border-bottom: 1px solid @color-list-border !important;
+            color: @color-list;
+            font-size: 1.2rem;
+
+            &:before {
+                float: left !important;
+                width: 1.2em !important;
+                margin-right: .5rem !important;
+            }
+        }
+
+        span.inner {
+            font-size: 100%;
+        }
+    }
+
+    @media screen and (min-width: (@screen-width-xs + 1px)) {
+        a {
+            color: @color-taskmenu-button;
+            padding: .45rem 0;
+            min-width: unset;
+
+            &.selected {
+                color: @color-taskmenu-button-selected;
+                background: @color-taskmenu-button-selected-background;
+            }
+
+            &:hover {
+                color: @color-taskmenu-button-hover;
+                background: @color-taskmenu-button-background-hover;
+            }
+        }
+
+        .special-buttons {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            background-color: @color-taskmenu-background;
+        }
+
+        .action-buttons {
+            a {
+                color: @color-taskmenu-button-action;
+                background: @color-taskmenu-button-action-background;
+
+                &:hover {
+                    color: @color-taskmenu-button-action-hover;
+                    background: @color-taskmenu-button-action-background-hover;
+                }
+
+                &.selected {
+                    background: @color-taskmenu-button-selected-background;
+                }
+            }
+        }
+
+        a.logout {
+            color: @color-taskmenu-button-logout-hover !important;
+        }
+    }
+
+    @media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
+        a {
+            width: @layout-menu-width-sm;
+            height: @layout-menu-width-sm;
+            font-size: 1.2rem;
+            padding: 0;
+
+            &:before {
+                line-height: @layout-menu-width-sm;
+            }
+        }
+
+        span.inner {
+            display: none;
+        }
+    }
+
+    @media screen and (min-width: (@screen-width-medium + 1px)) {
+        a {
+            width: @layout-menu-width;
+            font-size: 1rem;
+
+            &:before {
+                float: none; // fixed overflowing text in Edge
+            }
+
+            &:focus {
+                background-color: @color-taskmenu-button-selected-background;
+            }
+        }
+
+        span.inner {
+            padding: 0 .1em;
+        }
+    }
+}
diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less
deleted file mode 100644
index b44df3007..000000000
--- a/skins/elastic/styles/widgets/taskmenu.less
+++ /dev/null
@@ -1,221 +0,0 @@
-/**
- * Roundcube webmail styles for the Elastic skin
- *
- * Copyright (c) 2017-2018, The Roundcube Dev Team
- *
- * The contents are subject to the Creative Commons Attribution-ShareAlike
- * License. It is allowed to copy, distribute, transmit and to adapt the work
- * by keeping credits to the original authors in the README.md file.
- * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
- */
-
-/*** Taskmenu ***/
-
-#taskmenu {
-    height: 100%;
-
-    a {
-        .overflow-ellipsis;
-        text-decoration: none;
-        display: block;
-
-        &:before {
-            &:extend(.font-icon-class);
-        }
-
-        &.mail:before {
-            content: @fa-var-envelope;
-        }
-        &.addressbook:before {
-            content: @fa-var-users;
-        }
-        &.settings:before {
-            content: @fa-var-sliders-h;
-        }
-        &.help:before {
-            content: @fa-var-life-ring;
-        }
-        &.logout:before {
-            content: @fa-var-power-off;
-        }
-        &.about:before {
-            content: @fa-var-question;
-        }
-        &.refresh:before {
-            content: @fa-var-sync;
-        }
-        &.compose:before {
-            content: @fa-var-edit;
-        }
-        &.calendar:before {
-            content: @fa-var-calendar-alt;
-        }
-        &.tasklist:before {
-            content: @fa-var-tasks;
-        }
-        &.files:before {
-            content: @fa-var-folder;
-        }
-        &.notes:before {
-            content: @fa-var-sticky-note;
-        }
-        &.chat:before {
-            content: @fa-var-comments;
-        }
-    }
-
-    @media screen and (max-width: @screen-width-xs) {
-        z-index: 30001; // because autocompletion popup uses z-index:30000
-        overflow-x: hidden;
-
-        a {
-            width: 100%;
-            padding: 0 .5em;
-            text-align: left;
-            line-height: @layout-touch-menu-record-height;
-            height: @layout-touch-menu-record-height;
-            border-bottom: 1px solid @color-list-border;
-            color: @color-list;
-            font-size: 1.2rem;
-
-            &:before {
-                margin-right: .5rem;
-            }
-        }
-    }
-
-    @media screen and (min-width: (@screen-width-xs + 1px)) {
-        a {
-            text-align: center;
-            color: @color-taskmenu-button;
-            padding: .45rem 0;
-            width: @layout-menu-width-sm;
-            font-size: 1.2rem;
-            margin-bottom: 1px;
-
-            &:before {
-                display: block;
-                height: 2.1rem;
-                line-height: 1.5;
-                width: @layout-menu-width-sm;
-                margin: 0;
-            }
-
-            &.selected {
-                color: @color-taskmenu-button-selected;
-                background: @color-taskmenu-button-selected-background;
-            }
-
-            &:hover {
-                color: @color-taskmenu-button-hover;
-                background: @color-taskmenu-button-background-hover;
-            }
-        }
-
-        .special-buttons {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            background-color: @color-taskmenu-background;
-        }
-
-        .action-buttons {
-            a {
-                color: @color-taskmenu-button-action;
-                background: @color-taskmenu-button-action-background;
-
-                &:hover {
-                    color: @color-taskmenu-button-action-hover;
-                    background: @color-taskmenu-button-action-background-hover;
-                }
-
-                &.selected {
-                    background: @color-taskmenu-button-selected-background;
-                }
-            }
-        }
-
-        span.inner {
-            display: none;
-        }
-
-        a.logout {
-            color: @color-taskmenu-button-logout-hover !important;
-        }
-    }
-
-    @media screen and (min-width: (@screen-width-medium + 1px)) {
-        a {
-            width: @layout-menu-width;
-            height: (@layout-header-height - .05rem);
-            font-size: 1rem;
-
-            &:before {
-                width: @layout-menu-width;
-                height: 1.75rem;
-                line-height: 1.5;
-                float: none; // fixed overflowing text in Edge
-            }
-        }
-
-        span.inner {
-            display: inline;
-            font-size: 85%;
-            padding: 0 .1em;
-        }
-    }
-}
-
-.menu {
-    .popover-header {
-        height: @layout-header-height;
-        line-height: @layout-header-height;
-        border: 0;
-        border-radius: 0;
-        text-align: center;
-
-        img {
-            max-height: @layout-header-height;
-            max-width: @layout-menu-width;
-            padding: .25rem;
-
-            @media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
-                max-width: @layout-menu-width * 0.45;
-            }
-        }
-
-        @media screen and (min-width: (@screen-width-xs + 1px)) {
-            padding: 0 !important;
-            background-color: @color-taskmenu-background !important;
-
-            a {
-                display: none !important;
-            }
-        }
-
-        html.layout-phone & {
-            display: flex !important;
-            align-items: center;
-            justify-content: center;
-            padding: 0 .5rem;
-
-            img {
-                max-width: @layout-mobile-menu-width - 50px;
-            }
-
-            a {
-                width: auto;
-                flex: 1;
-
-                &:before {
-                    height: @layout-touch-header-height;
-                    float: right;
-                }
-
-                .inner {
-                    display: none;
-                }
-            }
-        }
-    }
-}
diff --git a/skins/elastic/templates/about.html b/skins/elastic/templates/about.html
index 13ebef31f..78f538890 100644
--- a/skins/elastic/templates/about.html
+++ b/skins/elastic/templates/about.html
@@ -2,7 +2,7 @@
 
 <h1 class="voice"><roundcube:label name="about" /></h1>
 
-<div class="content frame-content">
+<div class="frame-content">
 	<roundcube:object name="aboutcontent" />
 	<h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
 	<p class="copyright"><roundcube:object name="copyright" /></p>
diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html
index 558a9446e..d327c121e 100644
--- a/skins/elastic/templates/addressbook.html
+++ b/skins/elastic/templates/addressbook.html
@@ -4,7 +4,7 @@
 <h1 class="voice"><roundcube:label name="addressbook" /></h1>
 
 <!-- sources/groups list -->
-<div class="sidebar listbox" role="navigation" aria-labelledby="directorylist-header">
+<div id="layout-sidebar" class="listbox" role="navigation" aria-labelledby="directorylist-header">
 	<div class="header">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span id="directorylist-header" class="header-title"><roundcube:label name="groups" /></span>
@@ -19,18 +19,18 @@
 </div>
 
 <!-- contacts list -->
-<div class="list listbox selected" aria-labelledby="aria-label-contactslist">
+<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-contactslist">
 	<div class="header">
-		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
+		<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="groups" /></span></a>
 		<roundcube:object name="addresslisttitle" label="contacts" tag="span" class="header-title" />
-		<div class="toolbar" role="toolbar">
+		<div class="toolbar menu" role="toolbar">
 			<a href="#select" class="button select disabled" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
 			<roundcube:container name="listcontrols" id="listcontrols" />
 		</div>
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
-	<roundcube:object name="searchform" id="searchform" wrapper="searchbar toolbar"
+	<roundcube:object name="searchform" id="searchform" wrapper="searchbar menu"
 		label="contactsearchform" buttontitle="findcontacts" options="searchmenu" ariatag="h2" />
 	<div id="searchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu">
 		<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
@@ -57,40 +57,35 @@
 </div>
 
 <!-- contact details frame -->
-<div class="content" role="main">
+<div id="layout-content" role="main">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
 		<!-- toolbar -->
-		<div id="addressbooktoolbar" class="toolbar">
-			<roundcube:button command="add" type="link"
-				class="button create disabled" classAct="button create"
+		<div id="addressbooktoolbar" class="toolbar menu">
+			<roundcube:button command="add" type="link" class="create disabled" classAct="create"
 				label="create" title="newcontact" innerclass="inner" data-fab="true" />
 			<roundcube:button command="print" type="link" data-hidden="small"
-				class="button print disabled" classAct="button print"
+				class="print disabled" classAct="print"
 				label="print" title="printcontact" innerclass="inner" />
-			<roundcube:button command="delete" type="link"
-				class="button delete disabled" classAct="button delete"
+			<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
 				label="delete" title="deletecontact" innerClass="inner" />
 			<span class="spacer"></span>
-			<roundcube:button command="advanced-search" type="link"
-				class="button search disabled" classAct="button search"
+			<roundcube:button command="advanced-search" type="link" class="search disabled" classAct="search"
 				label="search" title="advsearch" innerclass="inner" />
 			<roundcube:container name="toolbar" id="addressbooktoolbar" />
-			<roundcube:button command="import" type="link"
-				class="button import disabled" classAct="button import"
+			<roundcube:button command="import" type="link" class="import disabled" classAct="import"
 				label="import" title="importcontacts" innerclass="inner" />
 			<span class="dropbutton">
-				<roundcube:button command="export" type="link"
-					class="button export disabled" classAct="button export"
+				<roundcube:button command="export" type="link" class="export disabled" classAct="export"
 					label="export" title="exportvcards" innerclass="inner" />
-				<a href="#export" class="button dropdown" data-popup="export-menu">
+				<a href="#export" class="dropdown" data-popup="export-menu">
 					<span class="inner"><roundcube:label name="arialabelcontactexportoptions" /></span>
 				</a>
 			</span>
 			<roundcube:button name="contactmenulink" id="contactmenulink" type="link"
-				class="button more" label="more" title="moreactions"
+				class="more" label="more" title="moreactions"
 				data-popup="contact-menu" innerclass="inner" />
 		</div>
 	</div>
@@ -104,57 +99,57 @@
 <!-- popup menus -->
 <div id="export-menu" class="popupmenu">
 	<h3 id="aria-label-export-menu" class="voice"><roundcube:label name="arialabelcontactexportoptions" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-export-menu">
-		<roundcube:button type="link-menuitem" command="export" label="exportall" prop="sub" class="export all" classAct="export all active" />
-		<roundcube:button type="link-menuitem" command="export-selected" label="exportsel" prop="sub" class="export selection" classAct="export selection active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-export-menu">
+		<roundcube:button type="link-menuitem" command="export" label="exportall" prop="sub" class="export all disabled" classAct="export all active" />
+		<roundcube:button type="link-menuitem" command="export-selected" label="exportsel" prop="sub" class="export selection disabled" classAct="export selection active" />
 	</ul>
 </div>
 
 <div id="groupoptions-menu" class="popupmenu">
 	<h3 id="aria-label-groupoptions-menu" class="voice"><roundcube:label name="arialabelabookgroupoptions" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-groupoptions-menu">
-		<roundcube:button type="link-menuitem" command="group-create" title="newgroup" label="addgroup" class="create" classAct="create active" />
-		<roundcube:button type="link-menuitem" command="group-rename" label="grouprename" class="group rename" classAct="group rename active" />
-		<roundcube:button type="link-menuitem" command="group-delete" label="groupdelete" class="group delete" classAct="group delete active" />
-		<roundcube:button type="link-menuitem" command="search-create" label="searchsave" class="search" classAct="search active" />
-		<roundcube:button type="link-menuitem" command="search-delete" label="searchdelete" class="search delete" classAct="search delete active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-groupoptions-menu">
+		<roundcube:button type="link-menuitem" command="group-create" title="newgroup" label="addgroup" class="create disabled" classAct="create active" />
+		<roundcube:button type="link-menuitem" command="group-rename" label="grouprename" class="group rename disabled" classAct="group rename active" />
+		<roundcube:button type="link-menuitem" command="group-delete" label="groupdelete" class="group delete disabled" classAct="group delete active" />
+		<roundcube:button type="link-menuitem" command="search-create" label="searchsave" class="search disabled" classAct="search active" />
+		<roundcube:button type="link-menuitem" command="search-delete" label="searchdelete" class="search delete disabled" classAct="search delete active" />
 		<roundcube:container name="groupoptions" id="groupoptionsmenu" />
 	</ul>
 </div>
 
 <div id="listselect-menu" class="popupmenu">
 	<h3 id="aria-label-listselect-menu" class="voice"><roundcube:label name="arialabellistselectmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
 		<roundcube:button type="link-menuitem" label="selection" class="selection" classAct="selection active"
 			name="list-toggle-button" id="list-toggle-button"
 			onclick="if ($(this).is('.active')) $('#contacts-table').toggleClass('withselection');" />
-		<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page" classAct="select page active" />
-		<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert" classAct="select invert active" />
-		<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none" classAct="select none active" />
+		<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page disabled" classAct="select page active" />
+		<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert disabled" classAct="select invert active" />
+		<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none disabled" classAct="select none active" />
 	</ul>
 </div>
 
 <div id="dragcontact-menu" class="popupmenu">
 	<h3 id="aria-label-dragcontact-menu" class="voice"><roundcube:label name="arialabeldropactionmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-dragcontact-menu">
-		<roundcube:button type="link-menuitem" command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" />
-		<roundcube:button type="link-menuitem" command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-dragcontact-menu">
+		<roundcube:button type="link-menuitem" command="move" onclick="return rcmail.drag_menu_action('move')" label="move" class="disabled" classAct="active" />
+		<roundcube:button type="link-menuitem" command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" class="disabled" classAct="active" />
 	</ul>
 </div>
 
 <div id="contact-menu" class="popupmenu">
 	<h3 id="aria-label-contact-menu" class="voice"><roundcube:label name="arialabelmorecontactactions" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-contact-menu">
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-contact-menu">
 		<roundcube:if condition="env:qrcode" />
-		<roundcube:button type="link-menuitem" command="qrcode" label="qrcode" class="qrcode" classAct="qrcode active" />
+		<roundcube:button type="link-menuitem" command="qrcode" label="qrcode" class="qrcode disabled" classAct="qrcode active" />
 		<roundcube:endif />
-		<roundcube:button type="link-menuitem" command="group-assign-selected" label="groupassign" class="assigngroup" classAct="assigngroup active" innerclass="folder-selector-link"  aria-haspopup="true" />
-		<roundcube:button type="link-menuitem" command="group-remove-selected" label="groupremove" class="removegroup" classAct="removegroup active" />
+		<roundcube:button type="link-menuitem" command="group-assign-selected" label="groupassign" class="assigngroup disabled" classAct="assigngroup active" innerclass="folder-selector-link"  aria-haspopup="true" />
+		<roundcube:button type="link-menuitem" command="group-remove-selected" label="groupremove" class="removegroup disabled" classAct="removegroup active" />
 		<roundcube:if condition="env:contact_move_enabled" />
-		<roundcube:button type="link-menuitem" command="move" label="moveto" class="move" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
+		<roundcube:button type="link-menuitem" command="move" label="moveto" class="move disabled" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
 		<roundcube:endif />
 		<roundcube:if condition="env:contact_copy_enabled" />
-		<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
+		<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy disabled" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
 		<roundcube:endif />
 		<roundcube:container name="contactmenu" id="contact-menu" />
 	</ul>
diff --git a/skins/elastic/templates/bounce.html b/skins/elastic/templates/bounce.html
index 820eebd42..20ad47fb7 100644
--- a/skins/elastic/templates/bounce.html
+++ b/skins/elastic/templates/bounce.html
@@ -64,7 +64,7 @@
 
 <div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
 	<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-headersmenu">
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-headersmenu">
 		<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="cc" /></a></li>
 		<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="bcc" /></a></li>
 	</ul>
diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html
index 054aba1bc..a16301b80 100644
--- a/skins/elastic/templates/compose.html
+++ b/skins/elastic/templates/compose.html
@@ -10,7 +10,7 @@
 <h1 class="voice"><roundcube:label name="compose" /></h1>
 
 <!-- compose options and attachments list -->
-<div class="sidebar listbox">
+<div id="layout-sidebar" class="listbox">
 	<div class="header">
 		<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title all-sizes"><roundcube:label name="optionsandattachments" /></span>
@@ -72,43 +72,43 @@
 	</div>
 </div>
 
-<div class="content listbox selected" role="main">
+<div id="layout-content" class="listbox selected" role="main">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header">
-		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
+		<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<span class="header-title"><roundcube:label name="compose" /></span>
 		<!-- toolbar -->
-		<div id="messagetoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">
-			<a class="button settings" href="#options" onclick="UI.show_sidebar()" data-hidden="big">
+		<div id="messagetoolbar" class="toolbar menu" role="toolbar" aria-labelledby="aria-label-toolbar">
+			<a class="settings" href="#options" onclick="UI.show_sidebar()" data-hidden="big">
 				<span class="inner"><roundcube:label name="optionsandattachments"></span>
 			</a>
-			<roundcube:button command="savedraft" type="link" class="button save draft disabled" classAct="button save draft"
+			<roundcube:button command="savedraft" type="link" class="save draft disabled" classAct="save draft"
 				label="save" title="savemessage" tabindex="2" innerclass="inner" data-content-button="true" />
 			<span class="spacer"></span>
-			<roundcube:button name="addattachment" type="link" class="button attach"
+			<roundcube:button name="addattachment" type="link" class="attach"
 				label="attach" title="addattachment" data-hidden="small"
 				onclick="if (!$(this).is('.disabled')) rcmail.upload_input('uploadform')"
 				aria-haspopup="true" aria-expanded="false" tabindex="2" innerclass="inner" />
-			<roundcube:button command="insert-sig" type="link" class="button signature disabled" classAct="button signature"
+			<roundcube:button command="insert-sig" type="link" class="signature disabled" classAct="signature"
 				label="signature" title="insertsignature" tabindex="2" innerclass="inner" />
-			<a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" unselectable="on" tabindex="2" data-popup="responses-menu">
+			<a href="#responses" class="responses" label="responses" title="<roundcube:label name='insertresponse' />" unselectable="on" tabindex="2" data-popup="responses-menu">
 				<span class="inner"><roundcube:label name="responses" /></span>
 			</a>
 			<roundcube:if condition="!empty(env:spell_langs)" />
 			<span class="dropbutton">
-				<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled"
-					classAct="button spellcheck" classSel="button spellcheck pressed"
+				<roundcube:button command="spellcheck" type="link" class="spellcheck disabled"
+					classAct="spellcheck" classSel="button spellcheck pressed"
 					label="spellcheck" title="checkspelling" tabindex="2" innerclass="inner" />
-				<a href="#languages" class="button dropdown" tabindex="2" data-popup="spell-menu">
+				<a href="#languages" class="dropdown" tabindex="2" data-popup="spell-menu">
 					<span class="inner"><roundcube:label name="language" /></span>
 				</a>
 			</span>
 			<roundcube:endif />
 			<span class="dropbutton" style="display:none">
-				<roundcube:button command="compose-encrypted" type="link" class="button encrypt disabled"
-					classAct="button encrypt" classSel="button encrypt selected" innerclass="inner"
+				<roundcube:button command="compose-encrypted" type="link" class="encrypt disabled"
+					classAct="encrypt" classSel="encrypt selected" innerclass="inner"
 					label="encrypt" title="encryptmessagemailvelope" tabindex="2" />
-				<a href="#encryption" id="encryption-menu-button" class="button dropdown" tabindex="2" data-popup="encryption-menu">
+				<a href="#encryption" id="encryption-menu-button" class="dropdown" tabindex="2" data-popup="encryption-menu">
 					<span class="inner"><roundcube:label name="encryptmessagemailvelope" /></span>
 				</a>
 			</span>
@@ -229,7 +229,7 @@
 
 <div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
 	<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-headersmenu">
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-headersmenu">
 		<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="cc" /></a></li>
 		<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="bcc" /></a></li>
 		<li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="replyto" /></a></li>
@@ -239,35 +239,35 @@
 
 <div id="responses-menu" class="popupmenu">
 	<h3 id="aria-label-responsesmenu" class="voice"><roundcube:label name="arialabelresponsesmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-responsesmenu">
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-responsesmenu">
 		<li role="separator" class="separator"><label><roundcube:label name="insertresponse" /></label></li>
 		<roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" />
 		<li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>
-		<roundcube:button command="save-response" type="link-menuitem" label="newresponse" class="create responses" classAct="create responses active" unselectable="on" />
+		<roundcube:button command="save-response" type="link-menuitem" label="newresponse" class="create responses disabled" classAct="create responses active" unselectable="on" />
 		<roundcube:button name="responses" type="link-menuitem" label="editresponses" class="edit responses active" onclick="return rcmail.command('switch-task', 'settings/responses')" />
 	</ul>
 </div>
 
 <div id="attachmentmenu" class="popupmenu">
 	<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
-		<roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="extwin" classAct="extwin active" />
-		<roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="download" classAct="download active" />
-		<roundcube:button command="rename-attachment" id="attachmenurename" type="link-menuitem" label="rename" class="rename" classAct="rename active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
+		<roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="extwin disabled" classAct="extwin active" />
+		<roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="download disabled" classAct="download active" />
+		<roundcube:button command="rename-attachment" id="attachmenurename" type="link-menuitem" label="rename" class="rename disabled" classAct="rename active" />
 		<roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" />
 	</ul>
 </div>
 
 <div id="encryption-menu" class="popupmenu">
-	<ul class="toolbarmenu listing" role="menu">
-		<roundcube:button command="compose-encrypted" type="link-menuitem" label="encryptmessage" class="encrypt" classAct="encrypt active" />
-		<roundcube:button command="compose-encrypted-signed" type="link-menuitem" label="encryptandsign" class="encrypt sign" classAct="encrypt sign active" />
+	<ul class="menu listing" role="menu">
+		<roundcube:button command="compose-encrypted" type="link-menuitem" label="encryptmessage" class="encrypt disabled" classAct="encrypt active" />
+		<roundcube:button command="compose-encrypted-signed" type="link-menuitem" label="encryptandsign" class="encrypt sign disabled" classAct="encrypt sign active" />
 	</ul>
 </div>
 
 <div id="recipient-dialog" class="popupmenu" role="region" aria-labelledby="aria-label-composecontacts">
 	<div class="listbox">
-		<roundcube:object name="searchform" id="searchform" wrapper="searchbar toolbar"
+		<roundcube:object name="searchform" id="searchform" wrapper="searchbar menu"
 			label="contactsearchform" buttontitle="findcontacts" ariatag="h2" class="no-bs" />
 		<div class="scroller" tabindex="-1">
 			<roundcube:object name="addressbooks" id="directorylist" class="treelist listing iconized"
diff --git a/skins/elastic/templates/dialog.html b/skins/elastic/templates/dialog.html
index 40ead4d25..5f03e894e 100644
--- a/skins/elastic/templates/dialog.html
+++ b/skins/elastic/templates/dialog.html
@@ -1,6 +1,6 @@
 <roundcube:include file="includes/layout.html" />
 
-<div class="content frame-content <roundcube:var name="env:dialog_class" />">
+<div class="frame-content <roundcube:var name="env:dialog_class" />">
 	<roundcube:object name="dialogcontent" />
 </div>
 
diff --git a/skins/elastic/templates/error.html b/skins/elastic/templates/error.html
index 0ae156091..ea9202832 100644
--- a/skins/elastic/templates/error.html
+++ b/skins/elastic/templates/error.html
@@ -2,14 +2,14 @@
 
 <roundcube:if condition="!env:framed && !env:extwin" />
 	<roundcube:include file="includes/menu.html" />
-	<div class="content selected" role="main">
-		<div class="header" role="toolbar">
-			<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
+	<div id="layout-content" class="selected" role="main">
+		<div class="header">
+			<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 			<span class="header-title"></span>
 		</div>
 		<div class="frame-content scroller">
 <roundcube:else />
-	<div class="content selected" role="main">
+	<div id="layout-content" class="selected" role="main">
 		<div class="frame-content scroller">
 <roundcube:endif />
 
diff --git a/skins/elastic/templates/folders.html b/skins/elastic/templates/folders.html
index 8c70647d5..2230e5031 100644
--- a/skins/elastic/templates/folders.html
+++ b/skins/elastic/templates/folders.html
@@ -5,13 +5,13 @@
 <h1 class="voice"><roundcube:label name="folders" /></h1>
 
 <!-- folders list -->
-<div class="list listbox selected" aria-labelledby="aria-label-folderslist">
+<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-folderslist">
 	<div class="header">
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
 		<span id="aria-label-folderslist" class="header-title"><roundcube:label name="folders" /></span>
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
-	<roundcube:object name="searchform" id="foldersearch" wrapper="searchbar toolbar" ariatag="h2"
+	<roundcube:object name="searchform" id="foldersearch" wrapper="searchbar menu" ariatag="h2"
 		label="foldersearchform" buttontitle="findfolders" options="foldersearchmenu" />
 	<div id="foldersearchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="subscription-table">
 		<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
@@ -38,21 +38,18 @@
 </div>
 
 <!-- folder info frame -->
-<div class="content" role="main">
+<div id="layout-content" role="main">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
 		<!-- toolbar -->
-		<div id="folderstoolbar" class="toolbar">
-			<roundcube:button command="create-folder" type="link"
-				class="button create disabled" classAct="button create"
+		<div id="folderstoolbar" class="toolbar menu">
+			<roundcube:button command="create-folder" type="link" class="create disabled" classAct="create"
 				label="create" title="createfolder" innerClass="inner" data-fab="true" />
-			<roundcube:button command="delete-folder" type="link"
-				class="button delete disabled" classAct="button delete"
+			<roundcube:button command="delete-folder" type="link" class="delete disabled" classAct="delete"
 				label="delete" title="delete" innerclass="inner" />
-			<roundcube:button command="purge" type="link"
-				class="button purge disabled" classAct="button purge"
+			<roundcube:button command="purge" type="link" class="purge disabled" classAct="purge"
 				label="empty" title="empty" innerclass="inner" />
 		</div>
 	</div>
diff --git a/skins/elastic/templates/identities.html b/skins/elastic/templates/identities.html
index b1ff97e35..c59478ac8 100644
--- a/skins/elastic/templates/identities.html
+++ b/skins/elastic/templates/identities.html
@@ -5,7 +5,7 @@
 <h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1>
 
 <!-- responses list -->
-<div class="list listbox selected" aria-labelledby="aria-label-identitieslist">
+<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-identitieslist">
 	<div class="header">
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
 		<span id="aria-label-identitieslist" class="header-title"><roundcube:label name="identities" /></span>
@@ -20,20 +20,18 @@
 </div>
 
 <!-- response details frame -->
-<div class="content" role="main">
+<div id="layout-content" role="main">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
 		<!-- toolbar -->
-		<div id="identitiestoolbar" class="toolbar">
-			<roundcube:button command="add" type="link"
+		<div id="identitiestoolbar" class="toolbar menu">
+			<roundcube:button command="add" type="link" class="create disabled" classAct="create"
 				label="create" title="newidentity" innerClass="inner" 
-				class="button create disabled" classAct="button create"
 				condition="config:identities_level:0<2" data-fab="true" />
-			<roundcube:button command="delete" type="link"
+			<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
 				label="delete" title="delete" innerClass="inner"
-				class="button delete disabled" classAct="button delete"
 				condition="config:identities_level:0<2" />
 		</div>
 	</div>
diff --git a/skins/elastic/templates/includes/mail-menu.html b/skins/elastic/templates/includes/mail-menu.html
index 1cda3d857..7da3ee8ea 100644
--- a/skins/elastic/templates/includes/mail-menu.html
+++ b/skins/elastic/templates/includes/mail-menu.html
@@ -1,97 +1,88 @@
 <roundcube:add_label name="viewsource" />
-<div id="mailtoolbar" class="toolbar" role="toolbar">
-	<roundcube:button command="compose" type="link" class="button compose hidden"
+<div id="mailtoolbar" class="toolbar menu" role="toolbar">
+	<roundcube:button command="compose" type="link" class="compose hidden"
 		label="compose" title="writenewmessage" innerclass="inner" />
-	<roundcube:button command="reply" type="link"
-		class="button reply disabled" classAct="button reply"
+	<roundcube:button command="reply" type="link" class="reply disabled" classAct="reply"
 		label="reply" title="replytomessage" innerclass="inner" data-content-button="true" />
 	<span class="dropbutton">
-		<roundcube:button command="reply-all" type="link"
-			class="button reply-all disabled" classAct="button reply-all"
+		<roundcube:button command="reply-all" type="link" class="reply-all disabled" classAct="reply-all"
 			label="replyall" title="replytoallmessage" innerclass="inner" />
-		<a href="#reply-all" id="replyallmenulink" class="button dropdown" data-popup="replyall-menu" tabindex="0">
+		<a href="#reply-all" id="replyallmenulink" class="dropdown" data-popup="replyall-menu" tabindex="0">
 			<span class="inner"><roundcube:label name="arialabelreplyalloptions" /></span>
 		</a>
 	</span>
 	<span class="dropbutton">
-		<roundcube:button command="forward" type="link"
-			class="button forward disabled" classAct="button forward"
+		<roundcube:button command="forward" type="link" class="forward disabled" classAct="forward"
 			label="forward" title="forwardmessage" innerclass="inner" />
-		<a href="#forward" id="forwardmenulink" class="button dropdown" data-popup="forward-menu" tabindex="0">
+		<a href="#forward" id="forwardmenulink" class="dropdown" data-popup="forward-menu" tabindex="0">
 			<span class="inner"><roundcube:label name="arialabelforwardingoptions" /></span>
 		</a>
 	</span>
 	<span class="spacer"></span>
-	<roundcube:button command="delete" type="link"
-		class="button delete disabled" classAct="button delete"
+	<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
 		label="delete" title="deletemessage" innerclass="inner" />
 	<roundcube:if condition="template:name == 'message'" />
-		<roundcube:button command="print" type="link" data-hidden="small"
-			class="button print disabled" classAct="button print"
-			label="print" title="printmessage" innerclass="inner" />
+		<roundcube:button command="print" type="link" class="print disabled" classAct="print"
+			label="print" title="printmessage" innerclass="inner" data-hidden="small"  />
 	<roundcube:endif />
 	<roundcube:container name="toolbar" id="mailtoolbar" />
-	<roundcube:button name="markmenulink" id="markmessagemenulink" type="link"
-		class="button markmessage" label="mark" title="markmessages"
-		data-popup="markmessage-menu" innerclass="inner" />
-	<roundcube:button name="messagemenulink" id="messagemenulink" type="link"
-		class="button more" label="more" title="moreactions"
-		data-popup="message-menu" innerclass="inner" />
+	<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="markmessage"
+		label="mark" title="markmessages" data-popup="markmessage-menu" innerclass="inner" />
+	<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="more"
+		label="more" title="moreactions" data-popup="message-menu" innerclass="inner" />
 	<roundcube:if condition="template:name == 'message'" />
 		<span class="spacer"></span>
-		<roundcube:button command="previousmessage" type="link" data-hidden="small"
-			class="button prev disabled" classAct="button prev"
-			innerclass="inner" label="previous" title="previousmessage" />
-		<roundcube:button command="nextmessage" type="link" data-hidden="small"
-			class="button next disabled" classAct="button next"
-			innerclass="inner" label="next" title="nextmessage" />
+		<roundcube:button command="previousmessage" type="link" class="prev disabled" classAct="prev"
+			innerclass="inner" label="previous" title="previousmessage" data-hidden="small" />
+		<roundcube:button command="nextmessage" type="link" class="next disabled" classAct="next"
+			innerclass="inner" label="next" title="nextmessage" data-hidden="small" />
 	<roundcube:endif />
 </div>
 
 <div id="forward-menu" class="popupmenu">
 	<h3 id="aria-label-forward-menu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-forward-menu">
-		<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" class="forward inline" classAct="forward inline active" />
-		<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" class="forward attachment" classAct="forward attachment active" />
-		<roundcube:button type="link-menuitem" command="bounce" label="bouncemsg" class="forward bounce" classAct="forward bounce active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-forward-menu">
+		<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" class="forward inline disabled" classAct="forward inline active" />
+		<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" class="forward attachment disabled" classAct="forward attachment active" />
+		<roundcube:button type="link-menuitem" command="bounce" label="bouncemsg" class="forward bounce disabled" classAct="forward bounce active" />
 		<roundcube:container name="forwardmenu" id="forward-menu" />
 	</ul>
 </div>
 
 <div id="replyall-menu" class="popupmenu">
 	<h3 id="aria-label-replyall-menu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-replyall-menu">
-		<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all" classAct="reply all active" />
-		<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list" classAct="reply list active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-replyall-menu">
+		<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all disabled" classAct="reply all active" />
+		<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list disabled" classAct="reply list active" />
 		<roundcube:container name="replyallmenu" id="replyall-menu" />
 	</ul>
 </div>
 
 <div id="message-menu" class="popupmenu">
 	<h3 id="aria-label-message-menu" class="voice"><roundcube:label name="arialabelmoremessageactions" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-message-menu">
-		<roundcube:button type="link-menuitem" command="print" label="printmessage" class="print" classAct="print active" data-hidden="small"/>
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-message-menu">
+		<roundcube:button type="link-menuitem" command="print" label="printmessage" class="print disabled" classAct="print active" data-hidden="small"/>
 		<roundcube:if condition="template:name != 'message'" />
-			<roundcube:button type="link-menuitem" command="import-messages" label="import" class="import" classAct="import active"
+			<roundcube:button type="link-menuitem" command="import-messages" label="import" class="import disabled" classAct="import active"
 				name="messageimport" onclick="UI.import_dialog()" />
 		<roundcube:endif />
-		<roundcube:button type="link-menuitem" command="download" label="export" class="download" classAct="download active" />
-		<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew" classAct="edit asnew active" />
-		<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source" classAct="source active" />
-		<roundcube:button type="link-menuitem" command="move" label="moveto" class="move" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
-		<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
-		<roundcube:button type="link-menuitem" command="open" label="openinextwin" target="_blank" class="extwin" classAct="extwin active" data-hidden="small" />
+		<roundcube:button type="link-menuitem" command="download" label="export" class="download disabled" classAct="download active" />
+		<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew disabled" classAct="edit asnew active" />
+		<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source disabled" classAct="source active" />
+		<roundcube:button type="link-menuitem" command="move" label="moveto" class="move disabled" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
+		<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy disabled" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
+		<roundcube:button type="link-menuitem" command="open" label="openinextwin" target="_blank" class="extwin disabled" classAct="extwin active" data-hidden="small" />
 		<roundcube:container name="messagemenu" id="message-menu" />
 	</ul>
 </div>
 
 <div id="markmessage-menu" class="popupmenu">
 	<h3 id="aria-label-markmessage-menu" class="voice"><roundcube:label name="arialabelmarkmessagesas" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-markmessage-menu">
-		<roundcube:button type="link-menuitem" command="mark" prop="read" label="markread" classAct="read active" class="read" />
-		<roundcube:button type="link-menuitem" command="mark" prop="unread" label="markunread" classAct="unread active" class="unread" />
-		<roundcube:button type="link-menuitem" command="mark" prop="flagged" label="markflagged" classAct="flag active" class="flag" />
-		<roundcube:button type="link-menuitem" command="mark" prop="unflagged" label="markunflagged" classAct="unflag active" class="unflag" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-markmessage-menu">
+		<roundcube:button type="link-menuitem" command="mark" prop="read" label="markread" classAct="read active" class="read disabled" />
+		<roundcube:button type="link-menuitem" command="mark" prop="unread" label="markunread" classAct="unread active" class="unread disabled" />
+		<roundcube:button type="link-menuitem" command="mark" prop="flagged" label="markflagged" classAct="flag active" class="flag disabled" />
+		<roundcube:button type="link-menuitem" command="mark" prop="unflagged" label="markunflagged" classAct="unflag active" class="unflag disabled" />
 		<roundcube:container name="markmenu" id="markmessage-menu" />
 	</ul>
 </div>
diff --git a/skins/elastic/templates/includes/menu.html b/skins/elastic/templates/includes/menu.html
index 561e94e71..10a35de20 100644
--- a/skins/elastic/templates/includes/menu.html
+++ b/skins/elastic/templates/includes/menu.html
@@ -1,37 +1,37 @@
-<div class="menu">
+<div id="layout-menu">
 	<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
 	<div class="popover-header">
 		<roundcube:object name="logo" src="/images/logo.svg" data-src-small="0" id="logo" alt="Logo" />
 		<a class="button icon cancel"><span class="inner"><roundcube:label name="close" /></span></a>
 	</div>
-	<div id="taskmenu" role="navigation" aria-labelledby="aria-label-tasknav">
+	<div id="taskmenu" class="menu toolbar" role="navigation" aria-labelledby="aria-label-tasknav">
 		<span class="action-buttons">
 			<roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
-				<roundcube:button command="compose" type="link" class="button compose selected"
+				<roundcube:button command="compose" type="link" class="compose selected"
 					label="compose" title="writenewmessage" innerclass="inner" />
 			<roundcube:else />
-				<roundcube:button command="compose" type="link" class="button compose"
+				<roundcube:button command="compose" type="link" class="compose"
 					label="compose" title="writenewmessage" innerclass="inner"
 					data-fab="true" data-fab-task="mail" data-fab-action="none" />
 			<roundcube:endif />
 		</span>
 		<roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
 			<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
-				class="button mail" />
+				class="mail" />
 		<roundcube:else />
 			<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
-				class="button mail" classSel="button mail selected" />
+				class="mail" classSel="mail selected" />
 		<roundcube:endif />
 		<roundcube:button command="addressbook" label="contacts" type="link" innerClass="inner"
-			class="button addressbook" classSel="button addressbook selected" />
+			class="contacts" classSel="contacts selected" />
 		<roundcube:container name="taskbar" id="taskmenu" />
 		<roundcube:button command="settings" label="settings" type="link" innerClass="inner"
-			class="button settings" classSel="button settings selected" />
+			class="settings" classSel="settings selected" />
 		<span class="special-buttons">
 			<roundcube:button name="about" label="about" type="link"
-				class="button about" innerClass="inner" onclick="UI.about_dialog(this)" />
+				class="about" innerClass="inner" onclick="UI.about_dialog(this)" />
 			<roundcube:button command="logout" label="logout" type="link"
-				class="button logout" innerClass="inner" />
+				class="logout" innerClass="inner" />
 		</span>
 	</div>
 </div>
diff --git a/skins/elastic/templates/includes/pagenav.html b/skins/elastic/templates/includes/pagenav.html
index 382293393..04496d4c3 100644
--- a/skins/elastic/templates/includes/pagenav.html
+++ b/skins/elastic/templates/includes/pagenav.html
@@ -1,9 +1,7 @@
-<div class="pagenav toolbar footer small" role="toolbar">
-	<roundcube:button command="firstpage" type="link"
-		class="button firstpage disabled" classAct="button firstpage"
+<div class="pagenav menu footer small" role="toolbar">
+	<roundcube:button command="firstpage" type="link" class="firstpage disabled" classAct="firstpage"
 		title="firstpage" label="first" innerclass="inner" />
-	<roundcube:button command="previouspage" type="link"
-		class="button prevpage disabled" classAct="button prevpage"
+	<roundcube:button command="previouspage" type="link" class="prevpage disabled" classAct="prevpage"
 		title="previouspage" label="previous" innerclass="inner" />
 	<roundcube:if condition="template:name == 'mail'" />
 		<roundcube:object name="messageCountDisplay" class="pagenav-text" aria-live="polite" aria-relevant="text" />
@@ -15,10 +13,8 @@
 	<roundcube:else />
 		<span class="pagenav-text" aria-live="polite" aria-relevant="text">&nbsp;</span>
 	<roundcube:endif />
-	<roundcube:button command="nextpage" type="link"
-		class="button nextpage disabled" classAct="button nextpage"
+	<roundcube:button command="nextpage" type="link" class="nextpage disabled" classAct="nextpage"
 		title="nextpage" label="next" innerclass="inner" />
-	<roundcube:button command="lastpage" type="link"
-		class="button lastpage disabled" classAct="button lastpage"
+	<roundcube:button command="lastpage" type="link" class="lastpage disabled" classAct="lastpage"
 		title="lastpage" label="last" innerclass="inner" />
 </div>
diff --git a/skins/elastic/templates/includes/settings-menu.html b/skins/elastic/templates/includes/settings-menu.html
index ec2d8d89a..0f6cca1cc 100644
--- a/skins/elastic/templates/includes/settings-menu.html
+++ b/skins/elastic/templates/includes/settings-menu.html
@@ -1,6 +1,6 @@
-<div class="sidebar listbox<roundcube:exp expression="!request:_action ? ' selected' : ''"/>" role="navigation" aria-labelledby="aria-label-settingstabs">
+<div id="layout-sidebar" class="listbox<roundcube:exp expression="!request:_action ? ' selected' : ''"/>" role="navigation" aria-labelledby="aria-label-settingstabs">
 	<div class="header">
-		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
+		<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<span id="aria-label-settingstabs" class="header-title"><roundcube:label name="settings" /></span>
 	</div>
 	<div class="scroller">
diff --git a/skins/elastic/templates/login.html b/skins/elastic/templates/login.html
index da527606b..af1a1a8ef 100644
--- a/skins/elastic/templates/login.html
+++ b/skins/elastic/templates/login.html
@@ -2,7 +2,7 @@
 
 <h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
 
-<div class="content selected no-navbar" role="main">
+<div id="layout-content" class="selected no-navbar" role="main">
 	<roundcube:object name="logo" src="/images/logo.svg" data-src-small="0" id="logo" alt="Logo" />
 	<roundcube:form id="login-form" name="login-form" method="post" class="propform">
 	<roundcube:object name="loginform" form="login-form" size="40" submit=true />
diff --git a/skins/elastic/templates/mail.html b/skins/elastic/templates/mail.html
index 63ea278a7..a57140ce5 100644
--- a/skins/elastic/templates/mail.html
+++ b/skins/elastic/templates/mail.html
@@ -4,7 +4,7 @@
 <h1 class="voice"><roundcube:label name="mail" /></h1>
 
 <!-- folders list -->
-<div class="sidebar listbox" role="navigation" aria-labelledby="aria-label-folderlist">
+<div id="layout-sidebar" class="listbox" role="navigation" aria-labelledby="aria-label-folderlist">
 	<div class="header">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title username"><roundcube:object name="username" /></span>
@@ -15,7 +15,7 @@
 	<div id="folderlist-content" class="scroller">
 		<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing folderlist" folder_filter="mail" unreadwrap="%s" />
 	</div>
-	<div class="footer toolbar small">
+	<div class="footer small">
 		<roundcube:if condition="env:quota" />
 			<div id="quotadisplay" class="quota-widget">
 				<span class="voice"><roundcube:label name="quota"></span>
@@ -26,24 +26,24 @@
 </div>
 
 <!-- messages list -->
-<div class="list listbox selected">
+<div id="layout-list" class="listbox selected">
 	<div id="messagelist-header" class="header">
-		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
+		<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="mailboxlist" /></span></a>
 		<span class="header-title"></span>
-		<div class="toolbar" role="toolbar">
-			<a href="#select" class="button select disabled" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
+		<div class="toolbar menu" role="toolbar">
+			<a href="#select" class="select disabled" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
 			<roundcube:if condition="env:threads" />
-				<a href="#threads" class="button threads disabled" data-popup="threadselect-menu" title="<roundcube:label name="threads" />"><span class="inner"><roundcube:label name="threads" /></span></a>
+				<a href="#threads" class="threads disabled" data-popup="threadselect-menu" title="<roundcube:label name="threads" />"><span class="inner"><roundcube:label name="threads" /></span></a>
 			<roundcube:endif />
-			<roundcube:object name="listmenulink" class="button settings active" label="options" innerclass="inner" />
+			<roundcube:object name="listmenulink" class="settings active" label="options" innerclass="inner" />
 			<roundcube:container name="listcontrols" id="listcontrols" />
 		</div>
 		<roundcube:button command="checkmail" type="link" class="button icon toolbar-button refresh"
 			label="refresh" title="checkmail" innerclass="inner" />
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
-	<roundcube:object name="searchform" id="mailsearchform" wrapper="searchbar toolbar"
+	<roundcube:object name="searchform" id="mailsearchform" wrapper="searchbar menu"
 		label="mailquicksearchbox" buttontitle="findmail" options="searchmenu" ariatag="h2" />
 	<div id="searchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="messagelist">
 		<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
@@ -96,7 +96,7 @@
 </div>
 
 <!-- message preview -->
-<div class="content">
+<div id="layout-content">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
@@ -118,44 +118,44 @@
 
 <div id="dragmessage-menu" class="popupmenu">
 	<h3 id="aria-label-dragmessage-menu" class="voice"><roundcube:label name="arialabeldropactionmenu" /></h3>
-	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-dragmessage-menu">
-		<roundcube:button command="move" type="link-menuitem" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" />
-		<roundcube:button command="copy" type="link-menuitem" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-dragmessage-menu">
+		<roundcube:button command="move" type="link-menuitem" onclick="return rcmail.drag_menu_action('move')" label="move" class="disabled" classAct="active" />
+		<roundcube:button command="copy" type="link-menuitem" onclick="return rcmail.drag_menu_action('copy')" label="copy" class="disabled" classAct="active" />
 	</ul>
 </div>
 
 <div id="mailboxoptions-menu" class="popupmenu">
 	<h3 id="aria-label-mailboxoptions-menu" class="voice"><roundcube:label name="arialabelmailboxmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-mailboxoptions-menu">
-		<roundcube:button command="expunge" type="link-menuitem" label="compact" class="expunge" classAct="expunge active" />
-		<roundcube:button command="purge" type="link-menuitem" label="empty" class="purge" classAct="purge active" />
-		<roundcube:button command="mark-all-read" type="link-menuitem" label="markallread" class="read" classAct="read active" />
-		<roundcube:button command="folders" task="settings" type="link-menuitem" label="managefolders" class="folders" classAct="folders active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-mailboxoptions-menu">
+		<roundcube:button command="expunge" type="link-menuitem" label="compact" class="expunge disabled" classAct="expunge active" />
+		<roundcube:button command="purge" type="link-menuitem" label="empty" class="purge disabled" classAct="purge active" />
+		<roundcube:button command="mark-all-read" type="link-menuitem" label="markallread" class="read disabled" classAct="read active" />
+		<roundcube:button command="folders" task="settings" type="link-menuitem" label="managefolders" class="folders disabled" classAct="folders active" />
 		<roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
 	</ul>
 </div>
 
 <div id="listselect-menu" class="popupmenu">
 	<h3 id="aria-label-listselect-menu" class="voice"><roundcube:label name="arialabellistselectmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
-		<roundcube:button type="link-menuitem" label="selection" class="selection" classAct="selection active"
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
+		<roundcube:button type="link-menuitem" label="selection" class="selection disabled" classAct="selection active"
 			name="list-toggle-button" id="list-toggle-button"
 			onclick="if ($(this).is('.active')) $('#messagelist').toggleClass('withselection');" />
-		<roundcube:button command="select-all" type="link-menuitem" label="all" class="select all" classAct="select all active" />
-		<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page" classAct="select page active" />
-		<roundcube:button command="select-all" type="link-menuitem" prop="unread" label="unread" class="select unread" classAct="select unread active" />
-		<roundcube:button command="select-all" type="link-menuitem" prop="flagged" label="flagged" class="select flagged" classAct="select flagged active" />
-		<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert" classAct="select invert active" />
-		<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none" classAct="select none active" />
+		<roundcube:button command="select-all" type="link-menuitem" label="all" class="select all disabled" classAct="select all active" />
+		<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page disabled" classAct="select page active" />
+		<roundcube:button command="select-all" type="link-menuitem" prop="unread" label="unread" class="select unread disabled" classAct="select unread active" />
+		<roundcube:button command="select-all" type="link-menuitem" prop="flagged" label="flagged" class="select flagged disabled" classAct="select flagged active" />
+		<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert disabled" classAct="select invert active" />
+		<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none disabled" classAct="select none active" />
 	</ul>
 </div>
 
 <div id="threadselect-menu" class="popupmenu">
 	<h3 id="aria-label-threadselectmenu" class="voice"><roundcube:label name="arialabelthreadselectmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-threadselectmenu">
-		<roundcube:button command="expand-all" type="link-menuitem" label="expand-all" class="expand all" classAct="expand all active" />
-		<roundcube:button command="expand-unread" type="link-menuitem" label="expand-unread" class="expand unread" classAct="expand unread active" />
-		<roundcube:button command="collapse-all" type="link-menuitem" label="collapse-all" class="expand none" classAct="expand none active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-threadselectmenu">
+		<roundcube:button command="expand-all" type="link-menuitem" label="expand-all" class="expand all disabled" classAct="expand all active" />
+		<roundcube:button command="expand-unread" type="link-menuitem" label="expand-unread" class="expand unread disabled" classAct="expand unread active" />
+		<roundcube:button command="collapse-all" type="link-menuitem" label="collapse-all" class="expand none disabled" classAct="expand none active" />
 	</ul>
 </div>
 
diff --git a/skins/elastic/templates/message.html b/skins/elastic/templates/message.html
index abb998e21..9fdac6a80 100644
--- a/skins/elastic/templates/message.html
+++ b/skins/elastic/templates/message.html
@@ -5,7 +5,7 @@
 
 <h1 class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h1>
 
-<div class="content selected">
+<div id="layout-content" class="selected">
 	<roundcube:if condition="!env:framed" />
 		<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 		<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
@@ -64,18 +64,18 @@
 <!-- popup menus -->
 <div id="attachmentmenu" class="popupmenu">
 	<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
-		<roundcube:button command="open-attachment" type="link-menuitem" id="attachmenuopen" label="open" class="extwin" classAct="extwin active" />
-		<roundcube:button command="download-attachment" type="link-menuitem" id="attachmenudownload" label="download" class="download" classAct="download active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
+		<roundcube:button command="open-attachment" type="link-menuitem" id="attachmenuopen" label="open" class="extwin disabled" classAct="extwin active" />
+		<roundcube:button command="download-attachment" type="link-menuitem" id="attachmenudownload" label="download" class="download disabled" classAct="download active" />
 		<roundcube:container name="attachmentmenu" id="attachmentmenu" />
 	</ul>
 </div>
 
 <div id="mailto-menu" class="popupmenu">
 	<h3 id="aria-label-mailtomenu" class="voice"><roundcube:label name="arialabelmailtomenu" /></h3>
-	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-mailtomenu">
-		<roundcube:button name="addtoaddressbook" type="link-menuitem" label="addtoaddressbook" class="addressbook" />
-		<roundcube:button name="composeto" type="link-menuitem" label="composeto" class="compose active" />
+	<ul class="menu listing" role="menu" aria-labelledby="aria-label-mailtomenu">
+		<roundcube:button name="addtoaddressbook" type="link-menuitem" label="addtoaddressbook" class="addressbook disabled" classAct="addressbook active" />
+		<roundcube:button name="composeto" type="link-menuitem" label="composeto" class="compose disabled" classAct="compose active" />
 		<roundcube:container name="mailtomenu" id="mailto-menu" />
 	</ul>
 </div>
diff --git a/skins/elastic/templates/messagepart.html b/skins/elastic/templates/messagepart.html
index 86efc6bfb..7a84ec3e1 100644
--- a/skins/elastic/templates/messagepart.html
+++ b/skins/elastic/templates/messagepart.html
@@ -2,7 +2,7 @@
 
 <h1 class="voice"><roundcube:var name="env:filename" /></h1>
 
-<div class="sidebar listbox">
+<div id="layout-sidebar" class="listbox">
 	<div class="header">
 		<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title" id="aria-label-contentinfo"><roundcube:label name="properties" /></span>
@@ -13,54 +13,51 @@
 	</div>
 </div>
 
-<div class="content selected">
+<div id="layout-content" class="selected">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
 		<a class="button icon properties" id="properties-button" href="#properties" onclick="UI.show_sidebar()" data-hidden="big">
 			<span class="inner"><roundcube:label name="properties"></span>
 		</a>
 		<span class="header-title constant"><roundcube:var name="env:filename" /></span>
-		<div id="messagetoolbar" class="toolbar">
+		<div id="messagetoolbar" class="toolbar menu">
 			<roundcube:button command="download" type="link" label="download" title="download"
-				class="button download disabled" classAct="button download" innerclass="inner" />
+				class="download disabled" classAct="download" innerclass="inner" />
 			<roundcube:button command="print" type="link" label="print" title="print"
-				class="button print disabled" classAct="button print" innerclass="inner" data-hidden="small" />
+				class="print disabled" classAct="print" innerclass="inner" data-hidden="small" />
 			<roundcube:container name="toolbar" id="messagetoolbar" />
 			<roundcube:if condition="env:is_message" />
 				<span class="spacer"></span>
-				<roundcube:button command="reply" type="link"
-					class="button reply disabled" classAct="button reply"
+				<roundcube:button command="reply" type="link" class="reply disabled" classAct="reply"
 					label="reply" title="replytomessage" innerclass="inner" />
 				<span class="dropbutton">
-					<roundcube:button command="reply-all" type="link"
-						class="button reply-all disabled" classAct="button reply-all"
+					<roundcube:button command="reply-all" type="link" class="reply-all disabled" classAct="reply-all"
 						label="replyall" title="replytoallmessage" innerclass="inner" />
-					<a href="#reply-all" id="replyallmenulink" class="button dropdown" data-popup="replyall-menu" tabindex="0">
+					<a href="#reply-all" id="replyallmenulink" class="dropdown" data-popup="replyall-menu" tabindex="0">
 						<span class="inner"><roundcube:label name="arialabelreplyalloptions" /></span>
 					</a>
 				</span>
 				<span class="dropbutton">
-					<roundcube:button command="forward" type="link"
-						class="button forward disabled" classAct="button forward"
+					<roundcube:button command="forward" type="link" class="forward disabled" classAct="forward"
 						label="forward" title="forwardmessage" innerclass="inner" />
-					<a href="#forward" id="forwardmenulink" class="button dropdown" data-popup="forward-menu" tabindex="0">
+					<a href="#forward" id="forwardmenulink" class="dropdown" data-popup="forward-menu" tabindex="0">
 						<span class="inner"><roundcube:label name="arialabelforwardingoptions" /></span>
 					</a>
 				</span>
 				<span class="spacer"></span>
 				<roundcube:button name="messagemenulink" id="messagemenulink" type="link"
-					class="button more" label="more" title="moreactions" data-popup="message-menu"
+					class="more" label="more" title="moreactions" data-popup="message-menu"
 					innerclass="inner" data-hidden="small" />
 			<roundcube:endif />
 			<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
 				<roundcube:button command="image-scale" type="link" prop="+" data-hidden="small"
-					class="button zoomin disabled" classAct="button zoomin"
+					class="zoomin disabled" classAct="zoomin"
 					label="zoomin" title="increaseimage" innerclass="inner" />
 				<roundcube:button command="image-scale" type="link" prop="-" data-hidden="small"
-					class="button zoomout disabled" classAct="button zoomout"
+					class="zoomout disabled" classAct="zoomout"
 					label="zoomout" title="decreaseimage" innerclass="inner" />
-				<roundcube:button command="image-rotate" type="link"
-					class="button rotate disabled" classAct="button rotate" data-hidden="small"
+				<roundcube:button command="image-rotate" type="link" data-hidden="small"
+					class="rotate disabled" classAct="rotate"
 					label="rotate" title="rotateimage" innerclass="inner" />
 			<roundcube:endif />
 		</div>
@@ -73,15 +70,15 @@
 <roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
 	<div id="image-tools" class="image-tools" data-hidden="big">
 		<h3 id="aria-label-imagetools" class="voice"><roundcube:label name="arialabelimagetools" /></h3>
-		<div class="toolbar" role="menu" aria-labelledby="aria-label-imagetools">
+		<div class="toolbar menu" role="menu" aria-labelledby="aria-label-imagetools">
 			<roundcube:button command="image-scale" type="link" prop="+"
-				class="button zoomin disabled" classAct="button zoomin"
+				class="zoomin disabled" classAct="zoomin"
 				label="zoomin" title="increaseimage" innerclass="inner" />
 			<roundcube:button command="image-scale" type="link" prop="-"
-				class="button zoomout disabled" classAct="button zoomout"
+				class="zoomout disabled" classAct="zoomout"
 				label="zoomout" title="decreaseimage" innerclass="inner" />
 			<roundcube:button command="image-rotate" type="link"
-				class="button rotate disabled" classAct="button rotate"
+				class="rotate disabled" classAct="rotate"
 				label="rotate" title="rotateimage" innerclass="inner" />
 		</div>
 		<a href="#" class="button icon tools" onclick="$(this).attr('title', $(this).data('label-' + ($('#image-tools').toggleClass('open').is('.open') ? 'hide' : 'show')))"
@@ -95,27 +92,27 @@
 <roundcube:if condition="env:is_message" />
 	<div id="forward-menu" class="popupmenu">
 		<h3 id="aria-label-forwardmenu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
-		<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-forwardmenu">
-			<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" classAct="forward inline active" class="forward" />
-			<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forward attachment active" class="forward attachment" />
+		<ul class="menu listing" role="menu" aria-labelledby="aria-label-forwardmenu">
+			<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" classAct="forward inline active" class="forward disabled" />
+			<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forward attachment active" class="forward attachment disabled" />
 			<roundcube:container name="forwardmenu" id="forward-menu" />
 		</ul>
 	</div>
 
 	<div id="replyall-menu" class="popupmenu">
 		<h3 id="aria-label-replyallmenu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
-		<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-replyallmenu">
-			<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all" classAct="reply all active" />
-			<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list" classAct="reply list active" />
+		<ul class="menu listing" role="menu" aria-labelledby="aria-label-replyallmenu">
+			<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all disabled" classAct="reply all active" />
+			<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list disabled" classAct="reply list active" />
 			<roundcube:container name="replyallmenu" id="replyall-menu" />
 		</ul>
 	</div>
 
 	<div id="message-menu" class="popupmenu">
 		<h3 id="aria-label-messagemenu" class="voice"><roundcube:label name="arialabelmoremessageactions" /></h3>
-		<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-messagemenu">
-			<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew" classAct="edit asnew active" />
-			<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source" classAct="source active" />
+		<ul class="menu listing" role="menu" aria-labelledby="aria-label-messagemenu">
+			<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew disabled" classAct="edit asnew active" />
+			<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source disabled" classAct="source active" />
 			<roundcube:container name="messagemenu" id="message-menu" />
 		</ul>
 	</div>
diff --git a/skins/elastic/templates/plugin.html b/skins/elastic/templates/plugin.html
index ea73d49e8..48a796b21 100644
--- a/skins/elastic/templates/plugin.html
+++ b/skins/elastic/templates/plugin.html
@@ -2,7 +2,7 @@
 <roundcube:include file="includes/menu.html" />
 <roundcube:include file="includes/settings-menu.html" condition="env:task == 'settings'" />
 
-<div class="content selected" role="main">
+<div id="layout-content" class="selected" role="main">
 	<div class="header">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
diff --git a/skins/elastic/templates/responses.html b/skins/elastic/templates/responses.html
index cc15160cb..3a57153c2 100644
--- a/skins/elastic/templates/responses.html
+++ b/skins/elastic/templates/responses.html
@@ -5,7 +5,7 @@
 <h1 class="voice"><roundcube:label name="responses" /></h1>
 
 <!-- responses list -->
-<div class="list listbox selected" aria-labelledby="aria-label-responseslist">
+<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-responseslist">
 	<div class="header">
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
 		<span id="aria-label-responseslist" class="header-title"><roundcube:label name="responses" /></span>
@@ -20,19 +20,17 @@
 </div>
 
 <!-- response details frame -->
-<div class="content" role="main">
+<div id="layout-content" role="main">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
 		<!-- toolbar -->
-		<div id="responsestoolbar" class="toolbar">
-			<roundcube:button command="add" type="link"
-				label="create" title="newresponse" innerClass="inner"
-				class="button create disabled" classAct="button create" data-fab="true" />
-			<roundcube:button command="delete" type="link"
-				label="delete" title="delete" innerClass="inner"
-				class="button delete disabled" classAct="button delete" />
+		<div id="responsestoolbar" class="toolbar menu">
+			<roundcube:button command="add" type="link" class="create disabled" classAct="create"
+				label="create" title="newresponse" innerClass="inner" data-fab="true" />
+			<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
+				label="delete" title="delete" innerClass="inner" />
 		</div>
 	</div>
 	<div class="iframe-wrapper">
diff --git a/skins/elastic/templates/settings.html b/skins/elastic/templates/settings.html
index 00836643a..c8b18ffa7 100644
--- a/skins/elastic/templates/settings.html
+++ b/skins/elastic/templates/settings.html
@@ -4,7 +4,7 @@
 
 <h1 class="voice"><roundcube:label name="preferences" /></h1>
 
-<div class="list listbox<roundcube:exp expression="!request:_action ? '' : ' selected'"/>" aria-labelledby="aria-label-prefsection">
+<div id="layout-list" class="listbox<roundcube:exp expression="!request:_action ? '' : ' selected'"/>" aria-labelledby="aria-label-prefsection">
 	<div class="header">
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
 		<span id="aria-label-prefsection" class="header-title"><roundcube:label name="preferences" /></span>
@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<div class="content" role="main">
+<div id="layout-content" role="main">
 	<div class="header">
 		<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		<span class="header-title"></span>
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index f7cc6a690..7113af4b8 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -39,13 +39,13 @@ function rcube_elastic_ui()
         content_buttons = [],
         frame_buttons = [],
         layout = {
-            menu: $('#layout > .menu'),
-            sidebar: $('#layout > .sidebar'),
-            list: $('#layout > .list'),
-            content: $('#layout > .content'),
+            menu: $('#layout-menu'),
+            sidebar: $('#layout-sidebar'),
+            list: $('#layout-list'),
+            content: $('#layout-content'),
         },
         buttons = {
-            menu: $('a.menu-button'),
+            menu: $('a.task-menu-button'),
             back_sidebar: $('a.back-sidebar-button'),
             back_list: $('a.back-list-button'),
             back_content: $('a.back-content-button'),
@@ -147,7 +147,7 @@ function rcube_elastic_ui()
         // Set content frame title in parent window (exclude ext-windows and dialog frames)
         if (is_framed && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) {
             if (title = $('h1.voice:first').text()) {
-                parent.$('#layout > .content > .header > .header-title:not(.constant)').text(title);
+                parent.$('#layout-content > .header > .header-title:not(.constant)').text(title);
             }
         }
         else if (!is_framed) {
@@ -166,7 +166,7 @@ function rcube_elastic_ui()
         if (!is_framed && layout.content.length && !$(layout.content).is('.no-navbar')
             && !$(layout.content).children('.frame-content').length
         ) {
-            env.frame_nav = $('<div class="footer toolbar content-frame-navigation hide-nav-buttons">')
+            env.frame_nav = $('<div class="footer menu toolbar content-frame-navigation hide-nav-buttons">')
                 .append($('<a class="button prev">')
                     .append($('<span class="inner"></span>').text(rcmail.gettext('previous'))))
                 .append($('<span class="buttons">'))
@@ -185,7 +185,7 @@ function rcube_elastic_ui()
             var target = $(this);
 
             // skip non-content buttons
-            if (!is_framed && !target.parents('.content').length) {
+            if (!is_framed && !target.parents('#layout-content').length) {
                 return;
             }
 
@@ -242,7 +242,7 @@ function rcube_elastic_ui()
         });
 
         // Taskmenu items added by plugins do not use elastic classes (e.g help plugin)
-        // it's for larry skin compat. We'll assign 'button', 'selected' and icon-specific class.
+        // it's for larry skin compat. We'll assign 'selected' and icon-specific class.
         $('#taskmenu > a').each(function() {
             if (/button-([a-z]+)/.test(this.className)) {
                 var data, name = RegExp.$1,
@@ -250,19 +250,18 @@ function rcube_elastic_ui()
 
                 if (button && (data = button.data)) {
                     if (data.sel) {
-                        data.sel += ' button ' + name;
-                        data.sel = data.sel.replace('button-selected', 'selected');
+                        data.sel = data.sel.replace('button-selected', 'selected') + ' ' + name;
                     }
 
                     if (data.act) {
-                        data.act += ' button ' + name;
+                        data.act += ' ' + name;
                     }
 
                     rcmail.buttons[button.command][button.index] = data;
                     rcmail.init_button(button.command, data);
                 }
 
-                $(this).addClass('button ' + name);
+                $(this).addClass(name);
                 $('.button-inner', this).addClass('inner');
             }
 
@@ -506,14 +505,14 @@ function rcube_elastic_ui()
 
             if (rcmail[list] && rcmail[list].multiselect) {
                 var repl, button,
-                    parent = table.parents('.sidebar,.list,.content').last(),
+                    parent = table.parents('layout-sidebar,#layout-list,#layout-content').last(),
                     header = parent.find('.header'),
                     toolbar = header.find('ul');
 
                 if (!toolbar.length) {
                     toolbar = header;
                 }
-                else if (button = toolbar.find('a.button.select').data('toggle-button')) {
+                else if (button = toolbar.find('a.select').data('toggle-button')) {
                     button = $('#' + button);
                 }
 
@@ -526,7 +525,7 @@ function rcube_elastic_ui()
                         .on('click', function() { if ($(this).is('.active')) table.toggleClass('withselection'); })
                         .append($('<span class="inner">').text(rcmail.gettext('select')));
 
-                    if (toolbar.is('.toolbar') || toolbar.is('.toolbarmenu')) {
+                    if (toolbar.is('.menu')) {
                         button.prependTo(toolbar).wrap('<li role="menuitem">');
 
                         // Add a button to the content toolbar menu too
@@ -542,7 +541,7 @@ function rcube_elastic_ui()
                         }
                         else {
                             button.appendTo(toolbar).addClass('icon');
-                            if (!parent.is('.sidebar')) {
+                            if (!parent.is('#layout-sidebar')) {
                                 button.addClass('toolbar-button');
                             }
                         }
@@ -675,15 +674,15 @@ function rcube_elastic_ui()
                 // In compose window we do not provide "Back' button, instead
                 // we modify the Mail button in the task menu to act like it (i.e. calls 'list' command)
                 if (!rcmail.env.extwin) {
-                    $('a.button.mail', layout.menu).attr('onclick', "return rcmail.command('list','',this,event)");
+                    $('a.mail', layout.menu).attr('onclick', "return rcmail.command('list','',this,event)");
                 }
 
                 rcmail.addEventListener('compose-encrypted', function(e) {
                     $("a.mode-html, button.attach").prop('disabled', e.active);
-                    $('a.button.attach, a.button.responses')[e.active ? 'addClass' : 'removeClass']('disabled');
+                    $('a.attach, a.responses')[e.active ? 'addClass' : 'removeClass']('disabled');
                 });
 
-                $('.sidebar > .footer:not(.pagenav) > a.button').click(function() {
+                $('#layout-sidebar > .footer:not(.pagenav) > a.button').click(function() {
                     if ($(this).is('.disabled')) {
                         rcmail.display_message(rcmail.gettext('nocontactselected'), 'warning');
                     }
@@ -1003,7 +1002,7 @@ function rcube_elastic_ui()
 
         // The same for some other checkboxes
         // We do this here, not in setup() because we want to cover dialogs
-        $('input.pretty-checkbox, .propform input[type=checkbox], .form-check input, .popupmenu.form input[type=checkbox], .toolbarmenu input[type=checkbox]', context)
+        $('input.pretty-checkbox, .propform input[type=checkbox], .form-check input, .popupmenu.form input[type=checkbox], .menu input[type=checkbox]', context)
             .each(function() { pretty_checkbox(this); });
 
         // Also when we add action-row of the form, e.g. Managesieve plugin adds them after the page is ready
@@ -1454,7 +1453,7 @@ function rcube_elastic_ui()
     function rcmail_popup_init(o)
     {
         // Add some common styling to the autocomplete/googiespell popups
-        $('table,ul', o.obj).addClass('toolbarmenu listing iconized');
+        $('ul', o.obj).addClass('menu listing iconized');
         $(o.obj).addClass('popupmenu popover');
         bootstrap_style(o.obj);
 
@@ -1482,7 +1481,7 @@ function rcube_elastic_ui()
                     .click(function() { $(this).remove(); });
             }
 
-            $('table,button', o.obj).click(function(e) {
+            $('ul,button', o.obj).click(function(e) {
                 if (!$(e.target).is('input')) {
                     $('.popover-overlay').remove();
                 }
@@ -1706,7 +1705,7 @@ function rcube_elastic_ui()
         screen_resize_small_none();
 
         if (layout.list) {
-            $('.header > ul.toolbar', layout.list).addClass('popupmenu toolbarmenu').removeClass('toolbar');
+            $('.header > ul.menu', layout.list).addClass('popupmenu');
         }
     };
 
@@ -1717,7 +1716,7 @@ function rcube_elastic_ui()
         screen_resize_small_none();
 
         if (layout.list) {
-            $('.header > ul.toolbarmenu.popupmenu', layout.list).removeClass('popupmenu toolbarmenu').addClass('toolbar');
+            $('.header > ul.menu.popupmenu', layout.list).removeClass('popupmenu');
         }
     };
 
@@ -1728,13 +1727,13 @@ function rcube_elastic_ui()
         if (layout.content.length) {
             show = got_content = layout.content.is(env.last_selected);
             layout.content[show ? 'removeClass' : 'addClass']('hidden');
-            $('.header > ul.toolbar', layout.content).addClass('popupmenu');
+            $('.header > ul.menu', layout.content).addClass('popupmenu');
         }
 
         if (layout.list.length) {
             show = !got_content && layout.list.is(env.last_selected);
             layout.list[show ? 'removeClass' : 'addClass']('hidden');
-            $('.header > ul.toolbar', layout.list).addClass('popupmenu');
+            $('.header > ul.menu', layout.list).addClass('popupmenu');
         }
 
         if (layout.sidebar.length) {
@@ -1749,8 +1748,8 @@ function rcube_elastic_ui()
 
     function screen_resize_small_none()
     {
-        buttons.back_list.filter(function() { return $(this).parents('.sidebar').length == 0; }).hide();
-        $('ul.toolbar.popupmenu').removeClass('popupmenu');
+        buttons.back_list.filter(function() { return $(this).parents('#layout-sidebar').length == 0; }).hide();
+        $('ul.menu.popupmenu').removeClass('popupmenu');
     };
 
     function show_content(unsticky)
@@ -2069,7 +2068,7 @@ function rcube_elastic_ui()
 
         // convert content toolbar to a popup list
         if (layout.content) {
-            $('.header > .toolbar', layout.content).each(function() {
+            $('.header > .menu', layout.content).each(function() {
                 var toolbar = $(this);
 
                 toolbar.children().each(function() { button_func(this, items); });
@@ -2079,7 +2078,7 @@ function rcube_elastic_ui()
 
         // convert list toolbar to a popup list
         if (layout.list) {
-            $('.header > .toolbar', layout.list).each(function() {
+            $('.header > .menu', layout.list).each(function() {
                 var toolbar = $(this);
 
                 list_mark = toolbar.next();
@@ -2114,7 +2113,7 @@ function rcube_elastic_ui()
         // append the new list toolbar and menu button
         if (list_items.length) {
             var container = layout.list.children('.header'),
-                menu_attrs = {'class': 'toolbar popupmenu listing iconized', id: 'toolbar-list-menu'},
+                menu_attrs = {'class': 'menu toolbar popupmenu listing iconized', id: 'toolbar-list-menu'},
                 menu_button = $('<a class="button icon toolbar-list-button" href="#list-menu">')
                     .attr({'data-popup': 'toolbar-list-menu'}),
                 // TODO: copy original toolbar attributes (class, role, aria-*)
@@ -2132,7 +2131,7 @@ function rcube_elastic_ui()
         // append the new toolbar and menu button
         if (items.length) {
             var container = layout.content.children('.header'),
-                menu_attrs = {'class': 'toolbar popupmenu listing iconized', id: 'toolbar-menu'},
+                menu_attrs = {'class': 'menu toolbar popupmenu listing iconized', id: 'toolbar-menu'},
                 menu_button = $('<a class="button icon toolbar-menu-button" href="#menu">')
                     .attr({'data-popup': 'toolbar-menu'});
 
@@ -2448,7 +2447,7 @@ function rcube_elastic_ui()
             else if (p.name == 'addressbook-selector' || p.name == 'contactgroup-selector') {
                 content.addClass('listing contactlist');
             }
-            else if (content.hasClass('toolbarmenu')) {
+            else if (content.hasClass('menu')) {
                 content.addClass('listing');
             }
 
@@ -2781,7 +2780,7 @@ function rcube_elastic_ui()
             ul = $('ul', obj);
 
         if (!ul.length) {
-            ul = $('<ul class="toolbarmenu selectable listing iconized" role="menu">');
+            ul = $('<ul class="selectable listing iconized" role="menu">');
 
             for (i in rcmail.env.spell_langs) {
                 li = $('<li role="menuitem">');
@@ -3440,7 +3439,7 @@ function rcube_elastic_ui()
                 items.push($('<li>').append(link));
             });
 
-            var list = $('<ul class="toolbarmenu listing selectable iconized">')
+            var list = $('<ul class="listing selectable iconized">')
                 .attr('data-ident', select_ident)
                 .append(items)
                 .on('click', 'a.active', function() {
@@ -3818,7 +3817,7 @@ function rcube_elastic_ui()
     function switch_nav_list(obj)
     {
         var records, height, speed = 250,
-            button = $('a.button', obj),
+            button = $('a', obj),
             navlist = $(obj).next();
 
         if (!navlist.height()) {
diff --git a/skins/larry/googiespell.css b/skins/larry/googiespell.css
index e833556fd..b3a55a9be 100644
--- a/skins/larry/googiespell.css
+++ b/skins/larry/googiespell.css
@@ -26,12 +26,12 @@
   border-spacing: 0;
 }
 
-.googie_list td {
+.googie_list li {
   min-width: 80px;
   width: auto;
 }
 
-.googie_list td.googie_list_selected {
+.googie_list li.googie_list_selected {
   background: #4db0d2;
 }