/* Header */
.mast {
text-overflow: ellipsis; width: 100%; z-index: 19999;
}
.bar {
clear: both; position: relative; width: 100%; height: 45px; margin: 0 auto;
}
.sprite-up {
background-image: url(images/logo.svg); background-position: 44px 44px;
}
.logo {
background-repeat: no-repeat; height: 44px; width: 65px; background-position: center;
}
/* In-logo Ajax loader */
.loader {
animation: loading 1s linear infinite; box-sizing: content-box; width: 20px; height: 20px; border: 5px solid; border-top-color: #f9ff00; border-left-color: #ef730c; border-bottom-color: #445aff; border-right-color: #0da; border-radius: 50%; margin: 32px -44px;
}
@keyframes loading {
0% { transform: translate(-9px, -25px) rotate(0deg); } 100% { transform: translate(-9px, -25px) rotate(360deg); }
}
.offline {
-webkit-filter: grayscale(1); filter: grayscale(1);
}
.offline.logo {
animation: loading 2s linear infinite; box-sizing: content-box; width: 20px; height: 20px; border: 5px solid; border-left-color: transparent; border-right-color: transparent; border-radius: 50%; margin: 32px 8px 0 24px;
}
.beta-label {
margin: 8px 0 0 -16px; transform: rotate(90deg); color: #777;
}
.page-label {
padding: 11px 15px; width: 90px;
}
.navi-menu {
margin: 0; padding: 0; white-space: nowrap; li { a:hover, &#active a:hover, &.selected a:hover { color: #1177ff; } } >menu li a { display: block; } menu { white-space: nowrap; height: 45px; } li { &#active { background-position: left center; background-repeat: no-repeat; } a { line-height: 44px; padding: 13px 20px; color: #555; } }
}
.bar-line {
border-bottom: 1px solid #eaeaea;
}
.element {
display: flex; height: 44px; padding: 0 10px; align-items: center; justify-content: center;
}
.divider {
border-left: 1px solid #eaeaea;
}
.transparent-white {
background-color: rgba(255, 255, 255, 0.85);
}
.super-small {
font-size: 70%;
}
.search {
width: 130px; margin: 1px auto auto 9px; padding: 0 0 0 26px; height: 44px; outline: 0 !important; border: none; display: block; background: transparent none; background-image: url(images/search.svg); background-position-x: left; background-position-y: center; background-repeat: no-repeat; background-size: 24px 24px;
}
ul#results-container {
position: absolute; top: 45px; left: 0; background: aliceblue; li { width: inherit; display: flex; margin-bottom: 1px; background: aliceblue; a { color: #444; padding: 7px 10px; width: inherit; &:hover { color: #1177FF; border-color: #1177FF; background-color: aliceblue; } } }
}
@media (orientation: portrait) {
body { ul#results-container { margin: 0 5vw; width: 90vw; } }
}
@media (orientation: landscape) {
body { ul#results-container { margin: 0 85px; width: 500px; } }
}
a.gray {
color: #777 !important; font-style: italic; pointer-events: none;
}