/* Utility nav. View Site, Support, Username, etc */ #main_header .utility_nav { display: none; position: absolute; right: 20px; top: -webkit-calc(50% - .5em); top: calc(50% - .5em); @include bp(large) { display: block; } .utility_nav-clicked { color: white; &:hover { color: white; } & ~ .utility_sub_nav { max-height: 100px; } } li { display: inline-block; margin-left: 20px; position: relative; ul { width: 124px; max-height: 0; overflow: hidden; background-color: $c-utility-sub-nav-bg; @include border-radius(2px); @include box-shadow(0,0,8px,-2px,$c-box_shadow); position: absolute; top: 30px; right: 0; z-index: 2; @include transition(max-height, .2s, ease-in-out); li { display: block; width: 100%; margin-left: 0; &:first-of-type { margin-top: 8px; } &:last-of-type { margin-bottom: 8px; } a { display: block; background-color: $c-utility-sub-nav-link-bg; font-size: 12px; color: $c-utility-sub-nav-link-color; padding: 10px 15px; @include transition(background-color, .2s, ease-in-out); &:hover { background-color: $c-utility-sub-nav-link-bg-hover; color: $c-utility-sub-nav-link-color; } } } } &:first-child { margin-left: 0; } } a { font-size: 13px; color: $c-text-sub; &:hover { color: $c-text-sub-hover; } span { display: inline-block; vertical-align: bottom; font-size: 13px; margin-left: 5px; &.icon-support { position: relative; top: 1px; font-size: 15px; } &.icon-arrow_down { font-size: 3px; margin-left: 0; vertical-align: middle; } } } @include bp(page_header_save_block) { position: relative; top: 0; right: 0; margin-top: 20px; } }