diff --git a/plugins/kolab_activesync/skins/elastic/templates/config.html b/plugins/kolab_activesync/skins/elastic/templates/config.html
index af9d54d9..b365236a 100644
--- a/plugins/kolab_activesync/skins/elastic/templates/config.html
+++ b/plugins/kolab_activesync/skins/elastic/templates/config.html
@@ -1,39 +1,41 @@
 <roundcube:include file="includes/layout.html" />
 <roundcube:include file="includes/menu.html" />
 <roundcube:include file="includes/settings-menu.html" />
 
 <h1 class="voice"><roundcube:label name="kolab_activesync.tabtitle" /></h1>
 
 <!-- devices list -->
 <div class="list listbox selected" aria-labelledby="aria-label-deviceslist">
 	<div class="header">
 		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
 		<span id="aria-label-deviceslist" class="header-title"><roundcube:label name="kolab_activesync.devices" /></span>
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
 	<div class="scroller">
 		<roundcube:object name="plugin.devicelist" id="devices-table" class="listing" role="listbox" />
 	</div>
 <!--
 	<div class="footer"></div>
 -->
 </div>
 
 <!-- device info frame -->
 <div class="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 class="toolbar">
 			<roundcube:button command="plugin.delete-device" type="link"
 				class="button delete disabled" classAct="button delete"
 				label="delete" title="kolab_activesync.deletedevice" innerclass="inner" />
 		</div>
 	</div>
-	<roundcube:frame contentframe="activesync-frame" id="activesync-frame" src="/watermark.html" title="arialabeldeviceframe" />
+	<div class="iframe-wrapper">
+		<roundcube:frame contentframe="activesync-frame" id="activesync-frame" src="/watermark.html" title="arialabeldeviceframe" />
+	</div>
 </div>
 
 <roundcube:include file="includes/footer.html" />
diff --git a/plugins/kolab_delegation/skins/elastic/templates/settings.html b/plugins/kolab_delegation/skins/elastic/templates/settings.html
index 28c9c798..a96464f4 100644
--- a/plugins/kolab_delegation/skins/elastic/templates/settings.html
+++ b/plugins/kolab_delegation/skins/elastic/templates/settings.html
@@ -1,48 +1,50 @@
 <roundcube:include file="includes/layout.html" />
 <roundcube:include file="includes/menu.html" />
 <roundcube:include file="includes/settings-menu.html" />
 
 <h1 class="voice"><roundcube:label name="kolab_delegation.tabtitle" /></h1>
 
 <!-- devices list -->
 <div class="list listbox selected" aria-labelledby="aria-label-delegateslist">
 	<div class="header">
 		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
 		<span id="aria-label-delegateslist" class="header-title"><roundcube:label name="kolab_delegation.delegates" /></span>
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
 	<div class="scroller">
 		<roundcube:object name="plugin.delegatelist" id="delegate-table" class="listing" role="listbox" />
 	</div>
 <!--
 	<div class="footer"></div>
 -->
 </div>
 
 <!-- delegatee info frame -->
 <div class="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 class="toolbar">
 			<roundcube:button command="delegate-add" type="link"
 				label="create" title="kolab_delegation.adddelegate"
 				class="button create disabled" classAct="button create" innerClass="inner" />
 			<roundcube:button command="delegate-delete" type="link"
 				class="button delete disabled" classAct="button delete"
 				label="delete" title="kolab_delegation.deletedelegate" innerclass="inner" />
 		</div>
 	</div>
-	<roundcube:frame contentframe="delegation-frame" id="delegation-frame" src="/watermark.html" title="arialabeldelegateform" />
+	<div class="iframe-wrapper">
+		<roundcube:frame contentframe="delegation-frame" id="delegation-frame" src="/watermark.html" title="arialabeldelegateform" />
+	</div>
 </div>
 
 <div id="delegate-delete-dialog" class="popupmenu" role="dialog" aria-labelledby="aria-label-delegatedeletedialog" aria-hidden="true">
 	<h3 id="aria-label-delegatedeletedialog" class="voice"><roundcube:label name="kolab_delegation.arialabeldelegatedelete" /></h3>
 	<p><roundcube:label name="kolab_delegation.delegatedeleteconfirm" /></p>
 	<span><input type="checkbox" value="1" checked="checked" /><roundcube:label name="kolab_delegation.delegateremoveacl" /></span>
 </div>
 
 <roundcube:include file="includes/footer.html" />
diff --git a/plugins/libkolab/skins/elastic/libkolab.less b/plugins/libkolab/skins/elastic/libkolab.less
index bf3d8e21..9a25b8a5 100644
--- a/plugins/libkolab/skins/elastic/libkolab.less
+++ b/plugins/libkolab/skins/elastic/libkolab.less
@@ -1,332 +1,331 @@
 /**
  * Kolab core library
  *
  * This file contains style of various Kolab plugins for Elastic skin.
  *
  * @author Thomas Bruederli <bruederli@kolabsys.com>
  *
  * Copyright (C) 2012-2017, Kolab Systems AG <contact@kolabsys.com>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
  * published by the Free Software Foundation, either version 3 of the
  * License, or (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-@import (reference) "../../../../skins/elastic/styles/colors";
-@import (reference) "../../../../skins/elastic/styles/fontawesome";
 @import (reference) "../../../../skins/elastic/styles/variables";
 @import (reference) "../../../../skins/elastic/styles/mixins";
 
 
 /*** Folders list extensions ***/
 
 .listing {
     // Fix focus indicator, because we add div element in the list record
     @media screen and (min-width: @screen-width-large) {
         li > div a {
             border-left: 2px solid transparent;
         }
         li > div a:focus {
             border-left: 2px solid @color-list-focus-indicator;
             outline: 0;
         }
     }
 
     li {
         & > div {
             display: flex;
 
             & > a:first-child {
                 .overflow-ellipsis;
                 position: relative;
                 flex-grow: 1;
 
                 &:after {
                     color: #ccc;
                     position: absolute;
                     top: 0;
                     right: 0;
                     height: @listing-line-height !important;
                     font-size: 1.1em !important;
                 }
             }
 
             &.tasklist .listname:before {
                 // TODO: tasklist icon
             }
 
             &.calendar .calname:before {
                 // TODO: clendar icon
             }
 
             &.folder .listname:before {
                 // TODO: notes folder icon, maybe need to use #notebooks parent
             }
 
             span.handle {
                 // TODO calendar/tasklist color indicator
             }
 
             span.actions {
                 a {
                     &:extend(.font-icon-class);
                 }
 
                 a.quickview:before {
                     content: @fa-var-eye; // TODO: disabled button state
                 }
 
                 a.subscribed:before {
-                    content: @fa-var-bookmark-o; // TODO: better icon
+                    .font-icon-regular(@fa-var-bookmark); // TODO: better icon
                 }
             }
 
             &.focusview {
                 span.actions {
                     a.quickview:before {
                         content: @fa-var-eye;
                     }
                 }
             }
 
             .subscribed {
                 cursor: pointer;
                 // reset listing's link style
                 padding: 0;
                 border-left: 0;
                 width: auto;
 
                 &:before {
                     &:extend(.font-icon-class);
-                    content: @fa-var-bookmark-o; // TODO: better icon
+                    .font-icon-regular(@fa-var-bookmark); // TODO: better icon
                     height: auto;
                     color: @color-link;
                 }
             }
 
             &.subscribed {
                 .subscribed:before {
-                    content: @fa-var-bookmark; // TODO: better icon
+                    .font-icon-solid(@fa-var-bookmark); // TODO: better icon
                 }
             }
         }
 
         &.selected > div {
             color: @color-list-selected;
             background-color: @color-list-selected-background;
         }
 
         &.shared > div a:first-child {
             padding-right: 1.6em;
 
             &:after {
                 &:extend(.font-icon-class);
                 content: @fa-var-share-alt;
             }
         }
 
         &.user > div a:first-child {
             padding-right: 1.6em;
 
             &:after {
                 &:extend(.font-icon-class);
                 content: @fa-var-user;
             }
         }
 
-        &.readonly > div a:first-child {
+        &.readonly:not(.virtual) > div a:first-child {
             padding-right: 1.6em;
 
             &:after {
                 &:extend(.font-icon-class);
                 content: @fa-var-lock;
             }
         }
 
         &.other.user > div {
             span.calname {
                 // TODO @fa-var-user;
             }
         }
 
         &.shared > div {
             span.calname {
                 // TODO @fa-var-share-alt;
             }
         }
 
         & > div.readonly {
             span.calname {
                 // TODO: @fa-var-lock;
             }
         }
 
         &.virtual > div > a {
             opacity: .5;
         }
     }
 
     input.flex-checkbox {
         position: relative !important;
         margin: 0 0 0 .25em !important;
 
         & + label {
             position: relative !important;
             margin: 0 .3em 0 -1em !important;
             right: 0 !important;
         }
     }
 }
 
 html.touch .listing {
     li {
         & > div {
             a:after {
                 height: @listing-touch-line-height !important;
             }
         }
     }
 }
 
 .searchresults {
     .boxtitle {
         line-height: 2rem !important;
         font-size: 80%;
         padding: 0 .5rem;
         margin: 0;
         color: @color-popover-separator;
         background-color: @color-popover-separator-background;
         text-align: center;
         border-bottom: 1px solid @color-layout-border;
     }
 }
 
 .toolbarmenu.listing li {
     a.tags:before {
         content: @fa-var-tags;
     }
 
     a.tag:before,
     a.tag.remove:before,
     a.tag.remove.all:before {
         content: @fa-var-tag;
     }
 
     &.search {
         padding: .25rem .5rem;
         .input-group {
 
             i.icon {
                 font-size: 80%;
                 padding: .5rem;
             }
 
             input {
                 font-size: 100%;
             }
         }
     }
 }
 
 #taglist {
     li {
         padding: 0 .5rem;
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-tag;
+            margin: 0 .5rem 0 .2rem;
         }
     }
 }
 
 #tagsform option:before,
 #taglist li:before,
 #tag-selector li a:before {
     color: darken(@color-main, 15%); // default tag color
 }
 
 #tagsform option:checked:before,
 #tag-selector li:hover a:before {
     color: #fff;
 }
 
 #tagsform {
     min-height: 15rem;
 
     select {
         padding: 0;
         margin-bottom: .5rem;
 
         &:focus {
             box-shadow: none !important;
             border: 1px solid @color-layout-border;
         }
     }
 
     option {
         color: @color-font; // fix Firefox issue caused by text-shadow below
         text-shadow: none;
         padding: .5rem;
         outline: 0;
         border: 0;
 
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-tag;
             line-height: 1;
         }
     }
 
     .buttons {
         text-align: center;
 
         button {
             margin: 0 .25rem;
         }
     }
 }
 
 .tagbox {
     color: #fff;
     background-color: @color-main;
     border-radius: .25rem;
     max-width: 4em;
     padding: .1rem .4rem;
     margin-right: .2rem;
     font-weight: bold;
 
     a {
         color: inherit;
         padding-left: .5rem;
         text-decoration: none;
     }
 
     h2 > & {
         font-size: 1.2rem;
     }
 }
 
 #calendarcategories {
     .input-group:not(:last-child) {
         margin-bottom: .25rem;
     }
 }
 
 fieldset.categories .input-group a.button.create {
     &:before {
         &:extend(.font-icon-class);
         content: @fa-var-plus;
         line-height: 1;
     }
 }
 
 // TODO .quickview-active in Calendar and Tasklist