You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
|
|
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
#wrapper { flex: 1 0 auto; }
#footer { flex-shrink: 0; padding: 0.5em; }
.text-align-right { text-align: right; }
.pure-menu-item a img { padding: .1em .5em; max-height: 2.4em; min-width: 2.4em; max-width: 2.4em; }
.menu-wrapper { background-color: #E7732F; margin-bottom: 2.5em; white-space: nowrap; position: relative; }
.menu { display: inline-block; width: auto; vertical-align: middle; -webkit-font-smoothing: antialiased; }
.menu .pure-menu-link, .menu .pure-menu-heading { color: black; }
.menu .pure-menu-link:hover, .menu .pure-menu-heading:hover { background-color: transparent; }
.menu-top { position: relative; padding-top: .5em; padding-bottom: .5em; }
.menu-brand { display: block; text-align: center; position: relative; color: black; }
.menu-toggle { width: 44px; height: 44px; display: block; position: absolute; top: 3px; right: 0; display: none; }
.menu-toggle .bar { background-color: white; display: block; width: 20px; height: 2px; border-radius: 100px; position: absolute; top: 22px; right: 12px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.menu-toggle .bar:first-child { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); }
.menu-toggle.x .bar { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.menu-toggle.x .bar:first-child { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.menu-screen { background-color: #E7732F; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; height: 3em; position: absolute; top: 0; z-index: -1; }
.menu-tucked .menu-screen { -webkit-transform: translateY(-44px); -moz-transform: translateY(-44px); -ms-transform: translateY(-44px); transform: translateY(-44px); width: auto; }
@media (min-width: 62em) { .menu-screen { margin-top: 2.9em; z-index: 1; right: 0em; } }
@media (max-width: 62em) { .menu { display: block; }
.menu-toggle { display: block; display: none\9; }
.menu-bottom { position: absolute; width: 100%; border-top: 1px solid #E7732F; background-color: #808080\9; z-index: 100; }
.menu-bottom .pure-menu-link { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.menu-bottom.menu-tucked .pure-menu-link { -webkit-transform: translateX(-140px); -moz-transform: translateX(-140px); -ms-transform: translateX(-140px); transform: translateX(-140px); opacity: 0; opacity: 1\9; }
.pure-menu-horizontal.menu-tucked { z-index: -1; top: 45px; position: absolute; overflow: hidden; }
.menu-untucked { height: 3.1em; }
.pure-menu-horizontal.pure-menu-scrollable.menu-untucked { overflow-x: auto; } }
|