.triangle-marker { border-color: transparent transparent; content: "\00a0"; height: 0; width: 0; position: absolute; border-style: solid; } nav a { @include hover-link; } nav .selected a:hover { text-decoration: none;} header { @extend .group; font-size: 1.3em; @extend .heading-font; border-width: 4px;} #main-nav { width: 79%; display: inline-block; padding-bottom: 10px; ul { @include horizontal-list(10px); line-height: 2em; }} #sub-nav { @extend .group; padding: 8px 0; } #docs-nav, #module-nav { display: inline-block; float: left; a { padding: 2px 10px; display: inline-block; }} #docs-nav { padding-right: 20px; & + #module-nav { padding-left: 10px; }} #module-nav { display: inline-block; ul { @include horizontal-list(false); }} body.getting-started #module-nav li.getting-started, body.tutorial #module-nav li.tutorials, body.support #module-nav li.support, #module-nav li.selected { position: relative; a { text-decoration: none; } a:before{ @extend .triangle-marker; border-width: 0 8px 8px; z-index: 2; bottom: -9px; left: 50%; margin-left: -8px; border-bottom-color: #121212; } &:before { @extend .triangle-marker; border-bottom-color: #414141; border-width: 0 6px 6px; z-index: 3; bottom: -9px; left: 50%; margin-left: -6px; } &:after { @extend .triangle-marker; border-bottom-color: #343434; border-width: 0 5px 5px; z-index: 3; bottom: -10px; left: 50%; margin-left: -5px; } } #search-docs { position: absolute; top: 29px; right: 0; &:before { content: "s"; display: block; @extend .pictos; position: absolute; left: 6px; top: 4px; font-size: .8em; z-index: 20; @include opacity(.8) } input { @extend .sans-font; @include round-corners; @include box-sizing(border-box); max-width: 200px; min-width: 75px; border: 0; margin: 0; padding: 5px 8px 5px 26px; font-size: .8em; float: right; position: relative; } }