#WRAPPER>#HEADER>#searchbar{display:inline-block;position:absolute;top:.8em;left:1em;width:20em;height:2em;padding:.2em 1em;border:0;border-radius:3px;background-color:#e8e8e8}#WRAPPER>#HEADER>#user-data{display:inline-block;position:absolute;top:0;right:0;height:calc( 100% - 2*1em )}#WRAPPER>#HEADER>#user-data>#user-name{display:block;position:absolute;top:0;right:calc( 4em*2 - 1em );height:4em;padding:0 1em;color:#828282;line-height:4em;white-space:nowrap;cursor:pointer}#WRAPPER>#HEADER>#user-data>#user-name:hover{color:#4f4f4f}#WRAPPER>#HEADER>#user-data>#user-picture{display:block;position:absolute;top:1em;right:4em;width:calc( 4em - 2*1em );height:calc( 4em - 2*1em );border-radius:50% / 50%;background:#e8e8e8 url("/f/svg/nopic/st/header") center center no-repeat;background-size:auto 80%;cursor:default;align-self:center}#WRAPPER>#HEADER>#user-data>#user-picture.active{background-image:url("/f/svg/sample/dy/profile");background-size:auto 100%}#WRAPPER>#HEADER>#user-data:before{content:'';display:block;position:absolute;top:0;right:0;width:4em;height:4em;background:url("/f/svg/expand/st/header/999999") center center no-repeat;background-size:1em 1em;cursor:pointer}#WRAPPER>#HEADER>.user-panel{display:block;position:absolute;top:calc( 4em - 1em );right:0;margin:.5em;border-radius:5px;border:1px solid #cfcfcf;background-color:#fff;transition:left .3s ease-in-out}#WRAPPER>#HEADER>.user-panel>span{display:block;position:relative;color:#000;padding:.5em 1em;padding-left:2em;cursor:pointer}#WRAPPER>#HEADER>.user-panel>span:not(:last-child){border-bottom:1px solid #ddd}#WRAPPER>#HEADER>.user-panel>span:hover{background-color:#eee}#WRAPPER>#HEADER>#toggle-user-panel{display:none}#WRAPPER>#HEADER>#toggle-user-panel+.user-panel{left:100%}#WRAPPER>#HEADER>#toggle-user-panel:checked+.user-panel{left:auto}#WRAPPER>#HEADER>#toggle-user-panel:checked+.user-panel:before{left:7em} /*# sourceMappingURL=header.css.map */