@import "tools"; #nav-line { background-color: #e2e2e2; @include size-px(padding-left, 5); @media screen and (min-width: 62.5em) { @include size-px(width, 975); margin: auto; } ul#menu { list-style: none; padding: 0; margin: 0; @include size-px(margin-left, 6); li.menu { background-color: #e2e2e2; float: left; a.menu { display: block; @include size-px(height, 31); @include size-px(padding-top, 18); @include size-px(padding-left, 14); @include size-px(padding-right, 14); color: #0c7076; @include size-px(font-size, 11); @include mono; } a.hidden-box-trigger:hover { border-bottom-style: solid; border-bottom-color: white; @include size-px(border-bottom-width, 3); margin-bottom: -3px; } } } #lang-menu { position: relative; display: block; float: right; @include size-px(height, 33); @include size-px(padding-top, 16); @include size-px(padding-left, 25); @include size-px(padding-right, 20); background: #f7f7f7; @include mono; #lang-button { @include size-px(font-size, 10); color: #717171; .lang-flag { @include size-px(font-size, 13); } &:after { @include size-px(padding-left, 10); content: url("/static/img/arrow-gray.png"); vertical-align: middle; } } #lang-menu-items { z-index: 9999; button { @include mono; display: none; background: #f7f7f7; color: #6f6f6f; cursor: pointer; width: 100%; margin: 0; padding: 0; @include size-px(padding-top, 5); @include size-px(padding-bottom, 5); border-style: solid; border-color: #ddd; border-width: 0; @include size-px(border-bottom-width, 1); @include size-px(font-size, 13); &.active { color: #000; } } } &:hover, &.hover { #lang-menu-items { position: absolute; width: 100%; padding: 0; left: 0; @include size-px(top, 39); button { display: block; } } } } }