#header .logo { background-image: url(../img/logo.svg); background-repeat: no-repeat; width: 250px; height: 118px; margin: 0 auto; } #header .logo-wide { background-image: url(../img/logo-wide.svg); background-repeat: no-repeat; width: 147px; height: 32px; } #header .logo-icon { /* display logo so appname can be shown next to it */ display: inline-block; background-image: url(../img/logo-icon.svg); background-repeat: no-repeat; width: 60px; height: 32px; } #header .menutoggle { display: inline-block; position: absolute; left: 70px; top: 18px; } /* show appname next to logo */ .header-appname { display: inline-block; position: relative; color: #fff; font-size: 16px; margin: 0; margin-top: -24px; padding: 7px 0 7px 5px; vertical-align: middle; } /* show caret indicator next to logo to make clear it is tappable */ #header .icon-caret { display: inline-block; width: 12px; height: 12px; margin: 0; margin-top: -21px; padding: 0; vertical-align: middle; } .header-appname, #header .icon-caret { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); opacity: .75; } /* do not show menu toggle on public share links as there is no menu */ #body-public #header .icon-caret { display: none; } /* toggle navigation */ #content-wrapper { padding-left: 0; } #navigation { top: 45px; bottom: initial; width: 265px; max-height: 85%; margin-top: 0; top: 45px; background-color: rgba(36, 40, 47, .97); overflow-x: initial; border-bottom-right-radius: 7px; border-bottom: 1px #333 solid; border-right: 1px #333 solid; box-shadow: 0 0 7px rgba(29,45,68,.97); display: none; } #navigation, #navigation * { box-sizing:border-box; -moz-box-sizing:border-box; } #navigation li { display: inline-block; } #navigation a { width: 80px; height: 80px; display: inline-block; text-align: center; padding: 20px 0; } #navigation a span { display: inline-block; font-size: 13px; padding-bottom: 0; padding-left: 0; width: 80px; } #navigation .icon { margin: 0 auto; padding: 0; } #navigation li:first-child .icon { padding-top: 0; } /* Apps management as sticky footer */ #navigation .wrapper { min-height: initial; margin: 0; } #apps-management { height: initial; } /* shift to account for missing navigation */ #body-user #controls, #body-settings #controls { padding-left: 0; }