/* Table of Contents ================================================== # Trunk */ /* # Trunk ================================================== */ .trunk { background: rgba(52,64,68,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 { list-style-type: none; margin: 0; padding: 0; } .trunk-nav > li { float: left; font-weight: 500; font-size: 11px; line-height: 11px; margin: 5px; width: calc(33.333333% - 10px); } .trunk-nav > li > a { -webkit-appearance: none; -moz-appearance: none; border: 1px solid rgba(42,44,48,1); border-radius: 0; 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.active, .trunk-nav > li > a:active, .trunk-nav > li > a:hover, .trunk-nav > li > a:focus { border-color: rgba(255,255,255,1); color: rgba(255,255,255,1); } .trunk-user { list-style-type: none; margin: 10px auto 0 auto; padding: 10px 0 0 0; text-align: center; } .trunk-user > li { display: inline-block; font-weight: 500; font-size: 11px; line-height: 11px; margin: 5px 5px 0 5px; width: calc(45% - 30px); } .trunk-user > li > a { -webkit-appearance: none; -moz-appearance: none; border: 0; border-radius: 0; 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: 9px 0 7px 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-user > li > a.active, .trunk-user > li > a:active, .trunk-user > li > a:hover, .trunk-user > li > a:focus { 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; }