/* Table of Contents ================================================== # Trunk */ /* # Trunk ================================================== */ .trunk { background: rgba(35,41,55,1); border-bottom: 2px solid rgba(0,0,0,0.2); left: 0; position: fixed; right: 0; top: 50px; z-index: 1040; } .trunk-buffer { padding: 30px 0; } .trunk-nav, .trunk-user { list-style-type: none; margin: 0; padding: 0; } .trunk-user { margin: 10px auto 0 auto; padding-top: 10px; text-align: center; } .trunk-nav > li, .trunk-user > li { font-weight: 500; font-size: 11px; line-height: 11px; margin: 5px; } .trunk-nav > li { float: left; width: calc(33.333333% - 10px); } .trunk-user > li { display: inline-block; margin-bottom: 0; width: calc(45% - 30px); } .trunk-nav > li > a, .trunk-user > li > a { -webkit-appearance: none; appearance: none; color: rgba(136,153,166,1); cursor: pointer; display: block; -webkit-font-smoothing: antialiased; font-weight: 500; font-size: 11px; letter-spacing: 1px; line-height: 11px; padding: 11px 0 9px 0; text-align: center; text-decoration: none; text-rendering: geometricPrecision; text-transform: uppercase; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; vertical-align: middle; white-space: nowrap; } .trunk-nav > li > a { border: 1px solid rgba(0,0,0,0.2); padding: 11px 0 9px 0; } .trunk-user > li > a { padding: 9px 0 7px 0; } .trunk-nav > li > a:hover, .trunk-nav > li > a:focus, .trunk-nav > li > a:active, .trunk-nav > li > a.active { border-color: rgba(255,255,255,1); color: rgba(255,255,255,1); } .trunk-user > li > a:hover, .trunk-user > li > a:focus, .trunk-user > li > a:active, .trunk-user > li > a.active { color: rgba(255,255,255,1); } .trunk-user > img, .trunk-user > li.trunk-user-placeholder { background: rgba(136,153,166,1); border-radius: 500px; color: rgba(255,255,255,1); display: inline-block; height: 40px; margin: 0; text-align: center; width: 40px; vertical-align: middle; } .trunk-user > li.trunk-user-placeholder > i { font-size: 26px; line-height: 44px; }