.actions { display: block; } body { margin: 0.5em; padding: 2px; padding-right: 23px; white-space: nowrap; position: relative; } #prints { list-style: none; padding: 0; margin: 0; } button.action.isIcon { border: none; cursor: pointer; padding: 0; margin: 0; line-height: 0; background-color: transparent; } * + button.action.isIcon { margin-left: 1px; } button.action img { max-height: 19px; margin: 0; } .hasHiddenActions { position: relative; display: inline-block; color: darkblue; } .hasHiddenActions:hover { padding: 3px; margin: -3px; background-color: #f6f6f6; z-index: 10; } .hasHiddenActions .actions { display: none; position: absolute; top: 100%; left: 0px; border-top-width: 0; background-color: #f6f6f6; padding: 2px 1px 1px 1px; line-height: 0; } .hasHiddenActions:hover .actions{ display: block; } #globalActions { position: absolute; right: 0; top: 0; width: 23px; height: 100%; text-align: right; } .notifications .fakedCanvasContent { display: block; width: 100%; box-sizing: border-box; } .notifications { margin: 0; padding: 0 0 20px 1em; } .collapsable { position: relative; margin: 0; } .collapsable.collapsed .collapser { display: inline-block; width: 20px; height: 20px; line-height: 20px; box-sizing: border-box; } .collapsable .collapser { cursor: pointer; color: blue; text-decoration: underline; } .collapsable .collapser .more { display: none; } .collapsable.collapsed .collapser .more { display: inline; } .collapsable.collapsed .collapser .less { display: none; } .collapsable .collapser .less { display: inline; } .collapsable.collapsed .collapsing { height: 0px; overflow: hidden; padding: 0; } .collapsable .collapsing { height: initial; width: 100%; box-sizing: border-box; }