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