Created
November 13, 2015 21:17
-
-
Save kgcreative/f1fb8d937380db3365ca to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| @import "bourbon/bourbon"; | |
| @import "neat/neat"; | |
| // ------------------------------------------------------------------- | |
| // Global nav | |
| // ------------------------------------------------------------------- | |
| // Vars | |
| // ------------------------------------------------------------------- | |
| // ------------------------------------------------------------------- | |
| // Variables | |
| // ------------------------------------------------------------------- | |
| // Helpers | |
| // See "scss/helpers/" | |
| // ------------------------------------------------------------------- | |
| $show_media_queries : false; | |
| $show_baseline_grid : false; | |
| // Colors | |
| // ------------------------------------------------------------------- | |
| $primary: #008DEC; | |
| $secondary: #444; | |
| $tertiary: orangered; | |
| // Alt | |
| $primary-light: lighten($primary,20%); | |
| $primary-lighter: lighten($primary,45%); | |
| $primary-lighter-accent: lighten($primary,35%); | |
| $primary-dark: darken($primary,15%); | |
| $primary-darker: darken($primary,30%); | |
| $tertiary-dark: darken($tertiary,15%); | |
| $tertiary-darker: darken($tertiary,30%); | |
| // Grayscale | |
| $black: #333; | |
| $light-black: #444; | |
| $light-gray: #ddd; | |
| $gray: #ccc; | |
| $dark-gray: #666777; | |
| $white-smoke: #eee; | |
| $white: #fff; | |
| $orange: #FF4500; | |
| // Colors | |
| $light-blue: #008DEC; | |
| $blue: #008DEC; | |
| // Flashes | |
| $light-red: #FBE3E4; | |
| $light-yellow: #FFF6BF; | |
| $light-green: #E6EFC2; | |
| // Body Background Color | |
| $base-background-color: $white-smoke; | |
| // Selection Color | |
| $selection-color: $primary-light; | |
| // Syntax highlighting | |
| $syntax-bg-color: #071022; | |
| // Typography | |
| // ------------------------------------------------------------------- | |
| $base-font-size: 1em; | |
| $base-line-height: $base-font-size * 1.7; | |
| $base-font-weight: 400; | |
| $base-font-size-small: $base-font-size * .875; | |
| $sans-serif: 'Gotham SSm A', 'Gotham SSm B', sans-serif; | |
| $serif: 'Sentinel SSm A', 'Sentinel SSm B', serif; | |
| $sans-serif-narrow: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif; | |
| $base-font-family: $sans-serif; | |
| $header-font-family: $base-font-family; // currently not in use | |
| // Sidebar | |
| $base-sidebar-font-size: $base-font-size * .875; | |
| $base-sidebar-line-height: $base-font-size * 1.5; | |
| // Font Colors | |
| $base-font-color: $light-black; | |
| $base-accent-color: $primary; | |
| $header-font-color: #333; | |
| // Text Link Colors | |
| $base-link-color: $base-accent-color; | |
| $hover-link-color: $tertiary; | |
| // Border color | |
| $base-border-color: $light-gray; | |
| // Flash Colors | |
| $error-color: $light-gray; | |
| $notice-color: $light-gray; | |
| $success-color: $light-green; | |
| // Horizontal Rules | |
| $base-hr-weight: 2px; | |
| $base-hr-color: #d2d3db; | |
| $base-hr-style: solid; | |
| // Sizes | |
| // ------------------------------------------------------------------- | |
| $unit: $base-font-size; | |
| $base-padding: em(24); | |
| $base-border-radius: em(4); | |
| $container: $max-width; | |
| // Alt container sizes | |
| $container-narrow : 60em; // 960px | |
| $container-super-narrow : 45em; // 720px | |
| $container-mobile : 30em; // 480px | |
| $container-padding: 1.5em; | |
| $container-mobile-padding: 7.5%; | |
| // Below dated and times in calednar and daily activities | |
| $details-margin-bottom: em(4); | |
| $site_header_height_mobile: em(80); | |
| $site_header_height_desktop: em(67); | |
| $search_takeover_vert_offset: em(112); | |
| $sitenav_breakpoint: 65em; | |
| $sitenav_mobile_only: max-width $sitenav_breakpoint - 0.0625em; | |
| $sitenav_border: 1px solid #dddddd; | |
| $nav-height: 75px; | |
| $topnav-offset: 1.5em; // how far down the nav items appear | |
| // Hide logo and slashes on mobile | |
| #logo, .subnav i { | |
| display: none; | |
| } | |
| // Mixins | |
| // ------------------------------------------------------------------- | |
| // If no-jssubnav | |
| @mixin hide-if-no-js { | |
| .no-js & { | |
| display: none; | |
| } | |
| } | |
| @mixin ir { | |
| position: absolute; | |
| font-size: 0; | |
| line-height: 0; | |
| opacity: 0; | |
| } | |
| @mixin button-reset { | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| -webkit-user-select: none; | |
| -webkit-touch-callout: none; | |
| -webkit-user-drag: none; | |
| } | |
| // ------------------------------------------------------------------- | |
| // HF&J Cloud Typography | |
| // ------------------------------------------------------------------- | |
| $sans-serif-fallback: 'Arial Narrow Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $serif-fallback: Georgia, Times, 'Times New Roma', serif; | |
| // Gotham Condensed | |
| @mixin gotham_condensed_bold { | |
| font-family: 'Gotham Cond A', 'Gotham Cond B', $sans-serif-fallback; | |
| font-weight: 600; | |
| font-style: normal; | |
| } | |
| // Gotham Narrow ScreenSmart | |
| @mixin gotham_narrow_ss_book { | |
| font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', $sans-serif-fallback; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| @mixin gotham_narrow_ss_bold { | |
| font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', $sans-serif-fallback; | |
| font-weight: 700; | |
| font-style: normal; | |
| } | |
| // Gotham ScreenSmart | |
| @mixin gotham_ss_book { | |
| font-family: 'Gotham SSm A', 'Gotham SSm B', $sans-serif-fallback; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| @mixin gotham_ss_book_italic { | |
| font-family: 'Gotham SSm A', 'Gotham SSm B', $sans-serif-fallback; | |
| font-weight: 400; | |
| font-style: italic; | |
| } | |
| @mixin gotham_ss_bold { | |
| font-family: 'Gotham SSm A', 'Gotham SSm B', $sans-serif-fallback; | |
| font-weight: 700; | |
| font-style: normal; | |
| } | |
| // Sentinel ScreenSmart | |
| @mixin sentinel_ss_book { | |
| font-family: 'Sentinel SSm A', 'Sentinel SSm B', $serif-fallback; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| // ------------------------------------------------------------------- | |
| // Trailing Hovers | |
| // ------------------------------------------------------------------- | |
| @mixin trailing-hovers { | |
| transition: all .3s; | |
| transition-property: background-color, color, border-color; | |
| &:hover, | |
| &:active { | |
| transition: 0s; | |
| } | |
| } | |
| // ------------------------------------------------------------------- | |
| // Rounded Corners | |
| // ------------------------------------------------------------------- | |
| @mixin rounded-corners($border-radius: $base-border-radius) { | |
| border-radius: $border-radius; | |
| overflow: hidden; | |
| } | |
| // ------------------------------------------------------------------- | |
| // Module | |
| // | |
| // Removes top margin from first child element | |
| // and bottom margin from last child element | |
| // ------------------------------------------------------------------- | |
| @mixin module { | |
| > *:first-child { margin-top: 0; } | |
| > *:last-child { margin-bottom: 0; } | |
| } | |
| // Enable .module class | |
| .module { | |
| @include module; | |
| } | |
| // ------------------------------------------------------------------- | |
| // Site Header | |
| // ------------------------------------------------------------------- | |
| .site-header { | |
| z-index: 9; | |
| //margin-bottom: em(20); | |
| height: $site_header_height_mobile; | |
| background-image: none; | |
| background-color: transparent; | |
| margin-bottom: 0; | |
| // If no-js | |
| .no-js & { | |
| @include media($sitenav_mobile_only) { | |
| height: auto; | |
| } | |
| } | |
| // Desktop | |
| @include media($sitenav_breakpoint) { | |
| margin-bottom: em(52); | |
| height: $site_header_height_desktop; | |
| background-color: #222; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| // @include water-background; | |
| } | |
| // Everything in the header wrapped in <span> | |
| // is used to hide text. Let's just declare it once. | |
| span { | |
| @include ir; | |
| } | |
| .container { | |
| position: relative; | |
| // On mobile, cancel out the .site-header .container | |
| @include media($sitenav_mobile_only) { | |
| padding: 0; | |
| } | |
| } | |
| // Branding | |
| .branding { | |
| // Prevent flicker durring css3 transisitons in Chrome/Safari | |
| // See: http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform | |
| -webkit-perspective: 1000; | |
| -webkit-backface-visibility: hidden; | |
| // mobile only | |
| @include media($sitenav_mobile_only) { | |
| //@include water-background; | |
| background-color: #222222; | |
| padding: $unit $container-mobile-padding; | |
| background-image:none; | |
| } | |
| // Desktop | |
| @include media($sitenav_breakpoint) { | |
| @include span-columns(2.5); | |
| position: relative; | |
| top: em(112); | |
| display: block; | |
| padding: 1px 2% 0 0; | |
| z-index: 3; // homepage > featured = z-index: 2 | |
| background-color: transparent; | |
| } | |
| .site-logo { //changed per MBAOPS-1710 | |
| display: block; | |
| width: 148px; | |
| height: 48px; | |
| background: url(/assets/img/seafood-watch-logo.png) top left no-repeat; | |
| background-size: 100%; | |
| // Desktop | |
| @include media($sitenav_breakpoint) { | |
| float: left; //changed per MBAOPS-1710 | |
| width: 153px; | |
| height: 66px; | |
| background: { | |
| image: url(/assets/img/logo-left.png); //changed per MBAOPS-1710 | |
| size: 100%; | |
| repeat: no-repeat; | |
| position: top left; //changed per MBAOPS-1710 | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Site Nav | |
| .site-nav { | |
| // Prevent nav from wrapping on desktop | |
| @include media($sitenav_breakpoint) { | |
| overflow: hidden; | |
| // Added by Kevin: Position fix to prevent the menu dissappearing on breakpoints | |
| position: absolute; | |
| right: 1em; | |
| display: block; | |
| float: right; | |
| // End Kevin's Addition | |
| } | |
| // Remove default <ul> margin | |
| ul { | |
| margin: 0; | |
| } | |
| // Support Links | |
| .support-links { | |
| @include hide-if-no-js; | |
| @include clearfix; | |
| a { | |
| float: left; | |
| width: 42.5%; | |
| margin: 1.5em 5%; | |
| padding: $unit 0; | |
| line-height: 1; | |
| font-weight: bold; | |
| text-align: center; | |
| border-radius: em(3.5px); | |
| -webkit-transform: translateZ(0); // Fixes twitch in Chrome caused by media queries | |
| -webkit-perspective: 1000; // Fixes twitch in Chrome caused by media queries | |
| &.donate { | |
| background: $primary; | |
| color: $white; | |
| margin-left: 2.5%; | |
| } | |
| &.buy-tickets { | |
| background: $primary; | |
| color: $white; | |
| margin-right: 2.5%; | |
| } | |
| } | |
| } | |
| } | |
| // Global Nav | |
| .global-nav { | |
| @include clearfix; | |
| @include button-reset; | |
| border-bottom: 0; | |
| background: transparent; | |
| padding-bottom: 0; | |
| // Desktop Only | |
| @include media($sitenav_breakpoint) { | |
| // Prevent nav from wrapping on desktop | |
| width: 150%; | |
| padding-bottom: 2em; | |
| } | |
| // Top Nav | |
| li.topnav { | |
| position: relative; | |
| border-bottom: 1px solid $light-gray; | |
| padding-right: em(64px); | |
| @include media($sitenav_mobile_only) { | |
| // border-top: 1px solid #145d82; | |
| margin: 0 5%; | |
| } | |
| &.tiny a i { | |
| display: none; // Hide heart icon in mobile menu | |
| } | |
| // Desktop | |
| @include media($sitenav_breakpoint) { | |
| float: left; | |
| border-bottom: 0; | |
| padding-right: 0; | |
| &.tiny, | |
| &.topnav-search { | |
| background: url(/assets/img/nav-sep.png) no-repeat left em(23); | |
| } | |
| &.tiny { | |
| display: none; | |
| @include media($sitenav_breakpoint) { | |
| display: block; | |
| } | |
| padding-left: em(18); | |
| a { | |
| margin-top: 1em; | |
| font-size: 1em; | |
| &.button { | |
| padding-bottom: 7px; | |
| } | |
| i { | |
| display: inline-block; | |
| font-size: 1em; | |
| margin-right: em(5); | |
| } | |
| } | |
| } | |
| &.topnav-search { | |
| padding-left: em(14); | |
| display: none; | |
| @include media($sitenav_breakpoint) { | |
| display: block; | |
| } | |
| } | |
| } | |
| // Top-level & Sub-level a's | |
| a { | |
| @include gotham_narrow_ss_book; | |
| display: block; | |
| font-size: 1em; | |
| padding: 1.025em; | |
| padding-left: $container-mobile-padding; | |
| line-height: 1; | |
| color: $white; | |
| @include media($sitenav_mobile_only) { | |
| border-left: 3px solid #00487c; | |
| margin-top: .35em; | |
| margin-bottom: .35em; | |
| padding-top: .75em; | |
| padding-bottom: .75em; | |
| padding-left: 5%; | |
| font-size: 1.125em; | |
| &:hover, | |
| &:active { | |
| border-left-color: #8cacc4; | |
| } | |
| &.active { | |
| border-left-color: #fff; | |
| } | |
| } | |
| } | |
| i.trigger-subnav { | |
| @include trailing-hovers; | |
| @include hide-if-no-js; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| font-size: em(28); | |
| line-height: .65em; | |
| padding: 14px 5%; | |
| min-width: 50px; | |
| height: 50px; | |
| text-align: center; | |
| color: $primary-light; | |
| cursor: pointer; | |
| &:hover, | |
| &:active { | |
| color: $white; | |
| border-color: #fff; | |
| } | |
| } | |
| // Top-level a's only | |
| > a { | |
| &.button { | |
| display: none; // Hide buttons from mobile | |
| } | |
| // &:hover, | |
| // &:active { | |
| // color: $white; | |
| //} | |
| // Desktop | |
| @include media($sitenav_breakpoint) { | |
| @include gotham_narrow_ss_bold; | |
| display: block; | |
| float: left; | |
| color: $white; | |
| font-size: 1em; | |
| line-height: 1; | |
| padding: em(8) 0; | |
| margin: em(16) em(18) 0 0; | |
| &.button { | |
| display: block; | |
| padding-left: .5em; | |
| padding-right: .5em; | |
| border-bottom: 0 none !important; | |
| } | |
| &:hover, | |
| &.active, | |
| &.active:hover { | |
| border-bottom: 2px solid rgba(255,255,255,.85); | |
| color: $white; | |
| } | |
| &:hover { | |
| border-bottom-color: rgba(255,255,255,.5); | |
| } | |
| } | |
| } | |
| @include media($sitenav_breakpoint) { | |
| .search-trigger { | |
| font-size: 1.125em; | |
| padding: em(23) 0; | |
| height: auto; | |
| width: em(24); | |
| } | |
| } | |
| // Sub Nav | |
| ul.subnav { | |
| @include hide-if-no-js; | |
| li { | |
| a { | |
| @include trailing-hovers; | |
| font-size: 1em; | |
| line-height: 1.2; | |
| padding: .85em 1em; // Vertical touch target @ 40px | |
| padding-right: $container-mobile-padding; | |
| border-top: none; | |
| color: $white; | |
| border-left: 3px solid #00487c; | |
| &:hover, | |
| &:active, | |
| &.active { | |
| border-left-color: #8cacc4; | |
| } | |
| &.active { | |
| border-left-color: #fff; | |
| //background: $white-smoke; | |
| } | |
| } | |
| } | |
| li:last-of-type a { | |
| padding-bottom: $unit; | |
| } | |
| // visual bonus | |
| } | |
| } | |
| } | |
| .global-nav { | |
| li.topnav { | |
| a { | |
| color: #333; | |
| } | |
| a:hover { | |
| color: #999; | |
| } | |
| i.trigger-subnav { | |
| color: #333; | |
| } | |
| i.trigger-subnav:hover { | |
| color: #999; | |
| } | |
| ul.subnav { | |
| li { | |
| a { | |
| color: #111; | |
| padding-right: 0; | |
| padding-left: 9%; | |
| border: 0; | |
| } | |
| a:hover { | |
| color: #999; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Site Search | |
| .site-search { | |
| position: relative; | |
| padding: 0 $container-mobile-padding; | |
| input { | |
| width: 100%; | |
| padding: $unit/2 0; | |
| border-radius: $unit*2; | |
| text-indent: $unit; | |
| border: none; | |
| &:focus { | |
| outline: 0; | |
| } | |
| } | |
| .search-form { | |
| position: relative; | |
| overflow: hidden; | |
| .search-submit, | |
| .search-clear, | |
| .search-wait { | |
| @include trailing-hovers; | |
| position: absolute; | |
| top: 0; | |
| right: $unit/2; | |
| padding: $unit/2; | |
| background: none; | |
| border: none; | |
| color: lighten($primary, 25%); | |
| &:hover { | |
| color: $primary; | |
| } | |
| [class^="icon-"] { | |
| @include media($sitenav_mobile_only) { | |
| // font-size: 1em; // TODO: this can be removed if the default icon size is returned to 1em | |
| top: -3px; // visually centered on mobile | |
| } | |
| position: relative; | |
| top: -1px; // visually centered | |
| } | |
| } | |
| .search-wait, .search-wait:hover { | |
| color: $gray; | |
| } | |
| .search-clear, | |
| .search-wait { | |
| display: none; | |
| } | |
| } | |
| } | |
| // ------------------------------------------------------------------- | |
| // JS Syles | |
| // | |
| // site.sitenav.js | |
| // ------------------------------------------------------------------- | |
| $mobile_links_active_color: #b2d1ef; | |
| @mixin is-closed { | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| @mixin is-open { | |
| height: auto !important; | |
| overflow: auto !important; | |
| } | |
| @mixin hide { | |
| display: none !important; | |
| } | |
| @mixin header-height-auto { | |
| .site-header { | |
| height: auto; | |
| } | |
| } | |
| // Search takeover styles | |
| .search-takeover { | |
| display: none; | |
| @include media($sitenav_breakpoint) { | |
| padding-top: $search_takeover_vert_offset; | |
| } | |
| background: $white; | |
| } | |
| // Site search desktop design | |
| @mixin site-search-desktop-design { | |
| .search-wrap { | |
| @include media($sitenav_breakpoint) { | |
| background: $white; | |
| width: 100%; | |
| z-index: 1; | |
| position: relative; | |
| height: em(164); | |
| border-bottom: 1px $base-hr-color $base-hr-style; | |
| transition: box-shadow 1s; // Transition in the box-shadow that gets added when .sticky-search is active | |
| } | |
| } | |
| .site-search { | |
| @include is-open; | |
| padding-bottom: $unit; | |
| @include media($sitenav_breakpoint) { | |
| @include shift(2.5); | |
| position: relative; | |
| top: em(46); | |
| padding: 0; | |
| button { | |
| &:focus { | |
| outline: none; | |
| } | |
| } | |
| input { | |
| @include rounded-corners; | |
| padding: $unit 0; | |
| width: 99%; // Not quite 100% to account for border | |
| border: none; | |
| background: $white-smoke; | |
| border: 1px solid $white; | |
| font-size: 1.25em; | |
| &:focus { | |
| outline: none; | |
| border: 1px solid $primary; | |
| } | |
| } | |
| .search-submit, | |
| .search-clear, | |
| .search-wait { | |
| position: absolute; | |
| right: 1%; | |
| width: $unit*3; | |
| height: 100%; | |
| font-size: 1.25em; | |
| } | |
| } | |
| } | |
| } | |
| // If no-js | |
| .search-wrap { | |
| @include hide-if-no-js; | |
| } | |
| // If no-js but on search page | |
| .no-js .search-page { | |
| @include media($sitenav_mobile_only) { | |
| .global-nav { | |
| display: none; | |
| } | |
| } | |
| .search-wrap { | |
| display: block; | |
| @include site-search-desktop-design; | |
| } | |
| } | |
| .search-page { | |
| #search { | |
| display: none; | |
| } | |
| // Related to OP-186 | Removes menu bar from search page. Because of the way search works, having a mobile menu will actually break the search user experience. | |
| #menu { | |
| display: none; | |
| } | |
| } | |
| // If JS is enabled... | |
| .js { | |
| .site-nav, | |
| .subnav { | |
| @include media($sitenav_mobile_only) { | |
| @include is-closed; | |
| } | |
| } | |
| .site-search { | |
| @include is-closed; | |
| } | |
| @include media($sitenav_breakpoint) { | |
| .support-links, | |
| .trigger-subnav, | |
| .subnav { | |
| @include hide; | |
| } | |
| } | |
| // Menu active | |
| .menu-active { | |
| .search-wrap { | |
| display: none; // Hide search wrapper while menu is open | |
| } | |
| } | |
| // Push content down enough to make room for subnav bar | |
| .site-main { | |
| padding-top: 2em; | |
| @include media(65em) { | |
| padding-top: 8.75em; | |
| } | |
| } | |
| // Mobile only | |
| @include media($sitenav_mobile_only) { | |
| .menu-active { | |
| @include header-height-auto; | |
| background-image: none; | |
| #menu { | |
| i { | |
| color: $mobile_links_active_color; | |
| } | |
| span { | |
| font-size: 12px; | |
| line-height: normal; | |
| opacity: 1; | |
| position: relative; | |
| color: $mobile_links_active_color; //change menu color to match icon | |
| } | |
| &:after { // This is the notch under "menu" | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| left: 64px; | |
| top: 56.5px; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 0 14px 13px 14px; | |
| border-color: transparent transparent #00487c transparent; | |
| line-height: 0px; | |
| _border-color: #000000 #000000 #00487c #000000; | |
| _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); //ie 6 hack | |
| } | |
| } | |
| .site-nav { | |
| @include is-open; | |
| margin-top: $site_header_height_mobile; | |
| background: #eee; | |
| } | |
| // Fixed top-bar | |
| .branding { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 2; | |
| } | |
| .site-util { | |
| position: fixed; | |
| font-size: 18px; | |
| } | |
| // Remove margin-bottom so that | |
| // .site-header and .site-footer are touching | |
| .site-header { | |
| margin-bottom: 0; | |
| } | |
| .site-footer { | |
| padding-top: 2em; | |
| } | |
| // Hide the main content area | |
| .featured, | |
| .site-main { | |
| display: none; | |
| } | |
| } | |
| } | |
| .topnav { | |
| .trigger-subnav:before { | |
| font-family: FontAwesome; | |
| content: "\f105"; // font awesome angle right | |
| } | |
| &.active { | |
| .trigger-subnav:before { | |
| content: "\f107"; // font awesome angle down | |
| } | |
| .subnav { | |
| @include is-open; | |
| padding-left: 6.25%; | |
| } | |
| } | |
| } | |
| // Search active | |
| .search-active { | |
| @include media($sitenav_mobile_only) { | |
| @include header-height-auto; | |
| } | |
| #search { | |
| i { | |
| color: $mobile_links_active_color; | |
| } | |
| span { | |
| color: $mobile_links_active_color; | |
| } | |
| } | |
| // Hide .site-main, .featured, and .site-footer when search is active | |
| .featured, | |
| .site-main, | |
| .site-footer { | |
| //@include media($sitenav_breakpoint) { | |
| display: none; | |
| //} | |
| } | |
| .site-header { | |
| @include media($sitenav_breakpoint) { | |
| // position: fixed; // Testing this out. Using waypoints.js to fix .search-wrap | |
| width: 100%; | |
| } | |
| .search-wrap { | |
| @include media($sitenav_mobile_only) { | |
| background-color: #008dec; | |
| padding-top: 1em; | |
| } | |
| } | |
| } | |
| // If your on desktop AND JS is enabled... | |
| .search-takeover { | |
| @include media($sitenav_breakpoint) { | |
| display: block; | |
| } | |
| } | |
| @include site-search-desktop-design; | |
| } | |
| } | |
| // While searching | |
| .searching { | |
| .search-submit, | |
| .search-clear { | |
| display: none !important; | |
| } | |
| .search-wait { | |
| display: block !important; | |
| } | |
| } | |
| // Search Util | |
| .site-util { | |
| @include clearfix; | |
| @include media($sitenav_mobile_only) { | |
| position: absolute; | |
| top: .675em; | |
| right: $container-mobile-padding; | |
| z-index: 3; | |
| font-size: 18px; | |
| a { | |
| border: none !important; //clears out the border introduced in the active mobile menu ahead | |
| margin-left: 0 !important; | |
| padding: .66667em !important; | |
| } | |
| } | |
| @include media($sitenav_breakpoint) { | |
| position: relative; | |
| } | |
| a { | |
| display: block; | |
| float: left; | |
| padding: $unit/1.5; | |
| width: 48px; | |
| height: 48px; | |
| text-align: center; | |
| color: #fff; | |
| border-radius: 6px; | |
| [class^="icon-"], [class^="fa"] { | |
| display: block; | |
| font-size: 1.5em; | |
| line-height: 1; | |
| color: $white; | |
| @include media($sitenav_breakpoint) { | |
| font-size: 1.3em; | |
| } | |
| } | |
| } | |
| #menu { | |
| .no-js & { | |
| display: none; | |
| } | |
| margin-top: -.25em; | |
| span { | |
| font-size: 12px; | |
| line-height: 1.5em; | |
| margin-left: .1em; | |
| opacity: 1; | |
| position: relative; | |
| color: #fff; | |
| } | |
| i { | |
| // font-size: 1.45em; | |
| line-height: .75; | |
| @include media($sitenav_breakpoint) { | |
| font-size: 1.3em; | |
| line-height: normal; | |
| } | |
| } | |
| @include media($sitenav_breakpoint) { | |
| display: none; | |
| } | |
| } | |
| #search { | |
| margin-top: -.25em; | |
| span { | |
| margin-left: -.3em; | |
| font-size: 12px; | |
| line-height: 1.5em; | |
| opacity: 1; | |
| position: relative; | |
| color: #fff; | |
| @include media($sitenav_breakpoint) { | |
| opacity: 0; | |
| } | |
| } | |
| i { | |
| // font-size: 1.45em; | |
| line-height: .75; | |
| @include media($sitenav_breakpoint) { | |
| font-size: 1.1em; | |
| line-height: 1.3em; // fixes visual alignment in new FA magnifying glass | |
| } | |
| } | |
| } | |
| } | |
| .search-results { | |
| .item { | |
| @include clearfix; | |
| display: block; | |
| padding: $unit*1.5 0; | |
| border-bottom: 1px $base-hr-color $base-hr-style; | |
| cursor: pointer; | |
| &:hover { | |
| //@include linear-gradient($white-smoke, #f7f7f7); | |
| background: #f7f7f7; | |
| .url { | |
| color: $primary; | |
| } | |
| } | |
| .content { | |
| position: relative; | |
| @include media($sitenav_breakpoint) { | |
| @include span-columns(9.5); | |
| @include shift(2.5); | |
| } | |
| } | |
| .header { | |
| margin-bottom: $unit/2; | |
| } | |
| .tag { | |
| @include rounded-corners; | |
| overflow: visible; // resets rounded-corners | |
| display: inline-block; | |
| padding: $unit/2; | |
| font-size: em(12); | |
| font-weight: bold; | |
| line-height: 1; | |
| background: $primary; | |
| color: $white; | |
| white-space: nowrap; | |
| margin-bottom: em(5); | |
| } | |
| .tags { | |
| display: none; | |
| @include media($sitenav_breakpoint) { | |
| display: block; | |
| text-align: right; | |
| position: absolute; | |
| right: 100%; | |
| top: em(2); | |
| margin-right: $unit; | |
| } | |
| } | |
| .title { | |
| margin: 0; | |
| } | |
| .url { | |
| // @include trailing-hovers; | |
| color: $dark-gray; | |
| font-size: em(14); | |
| // &:hover { | |
| // color: $primary; | |
| // } | |
| } | |
| .body { | |
| @include module; | |
| color: $base-font-color; | |
| p { | |
| max-width: 800px; | |
| } | |
| } | |
| } | |
| } | |
| .show-more-results { | |
| @include module; | |
| padding: 4em 0; | |
| text-align: center; | |
| } | |
| // Waypoints | |
| @include media($sitenav_breakpoint) { | |
| .search-active.sticky-search { | |
| .site-header { | |
| position: fixed; | |
| height: 0; | |
| > .container { | |
| height: 0; | |
| } | |
| .branding { | |
| top: em(45); | |
| } | |
| .site-nav { | |
| display: none; | |
| } | |
| .search-wrap { | |
| background: rgba(255,255,255,.96); | |
| box-shadow: 0 5px 15px $light-gray; // Fallback for browsers that don't support rgba. | |
| box-shadow: 0 5px 15px rgba(0,0,0,.15); // Using rgba becasue it's a more natural shadow. It doesn't colorize the results like the fallback above. | |
| input { | |
| background: rgba(0,0,0,.07); | |
| } | |
| } | |
| } | |
| .search-takeover { | |
| padding-top: $search_takeover_vert_offset + em(119); | |
| } | |
| } | |
| } | |
| // ------------------------------------------------------------------- | |
| // Nav | |
| // ------------------------------------------------------------------- | |
| // NOTE: Wrap all SFW styles in: .sfw { ... } | |
| $nav-height: 75px; | |
| $topnav-offset: 1.5em; // how far down the nav items appear | |
| .menu-active .site-footer { | |
| @media screen and (max-width:em(1039px)) { //mobile only | |
| padding-top: 3em; | |
| margin-top: 2em; | |
| } | |
| } | |
| @media screen and (max-width:em(1039px)) { // removes bottom border and creates the menu end gradient so the water footer becomes visible | |
| li.topnav:last-of-type, li.topnav:nth-last-of-type(2) { | |
| border-bottom: 0; | |
| } | |
| li.topnav:nth-last-of-type(2) { | |
| padding-bottom: 2.5em; | |
| background-color: #fff; //fallback for older browsers | |
| @include linear-gradient(to bottom, #fff 50%, #eee); //gradient for modern browsers | |
| } | |
| } | |
| // Icon color adjustments to account for black background | |
| .site-search .search-form .search-submit, | |
| .site-search .search-form .search-clear, | |
| .site-search .search-form .search-wait { | |
| color: #333; | |
| } | |
| .search-active #search i, | |
| .menu-active #menu i, | |
| .search-active #search span, | |
| .menu-active #menu span { | |
| color: $dark-gray; | |
| } | |
| #search { | |
| color: $white; | |
| } | |
| // Begin Desktop styles | |
| ///////////////////////////////////////////// | |
| ///////////////////////////////////////////// | |
| @include media(65em) { | |
| .site-header { | |
| a, i { | |
| //transition: all .3s ease; | |
| //transition-property: color, opacity, padding; | |
| } | |
| // Appropriately size home logo and position it within other <li> | |
| #logo { | |
| display: inline-block; | |
| a { | |
| margin-top: .2em; | |
| margin-left: 0; | |
| padding-bottom: 0; | |
| img { | |
| height: 50px; | |
| } | |
| } | |
| } | |
| // override topnav colors to account for black bar | |
| .global-nav { | |
| li.topnav { | |
| a { | |
| color: #fff; | |
| } | |
| a:hover { | |
| color: #fff; | |
| } | |
| } | |
| } | |
| // Progressive color enhancements | |
| // TODO: simplify this | |
| .global-nav:hover .topnav > a { | |
| color: $dark-gray; | |
| } | |
| &.subnav-open { | |
| .global-nav .topnav { | |
| > a { | |
| color: $dark-gray; | |
| } | |
| &:hover, | |
| &.open { | |
| > a { | |
| color: $white; | |
| } | |
| } | |
| } | |
| } | |
| // Opened subnav | |
| .topnav:hover, | |
| &.subnav-open { | |
| .subnav-bar { | |
| top: $nav-height; | |
| overflow: hidden; | |
| display: block; | |
| } | |
| } | |
| // Top level LI hover / open state | |
| .topnav:hover .subnav, | |
| .topnav.open .subnav { | |
| display: block !important; // Only necessary to override the inherited !important flag | |
| li { | |
| a, i { | |
| animation: subnavFadeIn .6s; | |
| animation-timing-function: ease; | |
| -webkit-animation: subnavFadeIn .6s; | |
| -webkit-animation-timing-function: ease; /* Safari and Chrome */ | |
| } | |
| } | |
| } | |
| // Kill fade effect on first load | |
| /*&.subnav-init .topnav.open .subnav li { | |
| a, i { | |
| display: none; | |
| } | |
| }*/ | |
| // Prevent subnav from opening during page load (flicker issue) | |
| &.subnav-init .subnav-bar { | |
| display: none !important; | |
| } | |
| // Persist highlight across page loads | |
| &.subnav-init .topnav.active a { | |
| color: $white; | |
| } | |
| // Subnav bar | |
| .subnav-bar { | |
| transition: all .6s ease; | |
| background-color: #222; | |
| position: absolute; | |
| // width: 100%; | |
| width: auto; | |
| min-width: 220px; | |
| //left: 0; | |
| top: -20em; // $nav-height if we want to fade above search take-over | |
| z-index: -1; //2 if we want to fade above search take-over | |
| border-radius: 0 0 4px 4px; | |
| display: block; //display:none if we are fading in place | |
| } | |
| // Mask wrapper to conceal .subnav-bar | |
| .mask { | |
| background-color: #222; | |
| } | |
| // Overrides | |
| .global-nav li.topnav.tiny, .global-nav li.topnav.topnav-search { | |
| background-position: left 25px; | |
| } | |
| .container { | |
| position: static; | |
| .site-nav { | |
| float: none; | |
| overflow: visible; | |
| position: static; | |
| .global-nav { | |
| font-size: 0px; // see: http://codepen.io/chriscoyier/pen/hmlqF | |
| width: auto; | |
| text-align: right; // aligns global nav to the rignt. used to center nav items | |
| .topnav { | |
| font-size: 13px; // reset font size (see http://codepen.io/chriscoyier/pen/hmlqF) | |
| height: $nav-height; | |
| position: static; | |
| display: inline-block; | |
| vertical-align: bottom; // fixes bottom space bug with inline-block | |
| float: none; | |
| > a { | |
| margin: 1.65em .5em 0 .5em; | |
| &:hover { | |
| border-bottom: 0 none; | |
| } | |
| &.active { | |
| border-bottom: 2px solid; // This must come after :hover | |
| } | |
| } | |
| &.topnav-search, &.tiny { | |
| padding-left: .8em; | |
| margin-left: .4em; | |
| .search-trigger { | |
| padding: 2.1em 0; | |
| } | |
| } | |
| } | |
| .subnav { | |
| text-align: left; // aligned subnav items to the left | |
| overflow: hidden !important; | |
| li, a { | |
| display: block; //changed for vertical menus | |
| } | |
| li { | |
| // Set cursor to default to fix auto property ghosting between elements and a tags | |
| cursor: default; | |
| &:last-of-type a { | |
| padding-bottom: 1.5em; | |
| background: none; | |
| } | |
| a { | |
| padding: .75em 1em; | |
| border-left: 0; | |
| color: $white; | |
| cursor: pointer; | |
| font-size: .9em; | |
| &.active { | |
| background: none; | |
| } | |
| &:hover { | |
| color: $white; | |
| opacity: .8; | |
| } | |
| } | |
| &:last-of-type i { | |
| display: none; | |
| } | |
| i { | |
| display: inline-block; // changed from inline to inline-block to fix slashes breaking into multiple lines on mac browsers. | |
| color: $white; | |
| opacity: .85; | |
| margin-left: -5px; // center slash between nav items (approx. half of it's width) | |
| cursor: default; | |
| font-size: 1.22em; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .search-wrap { | |
| z-index: -2; | |
| } | |
| } | |
| .search-takeover { | |
| padding-top: 15em; | |
| } | |
| } | |
| @include media(em(1100px)) { | |
| .site-header .container .site-nav .global-nav { | |
| // margin-right:3%; | |
| .topnav { | |
| font-size: 14px; | |
| > a { | |
| margin: 1.5em .5em 0 .5em; | |
| } | |
| &.topnav-search, &.tiny { | |
| padding-left: .8em; | |
| margin-left: .4em; | |
| background-position-y: 26px; | |
| .search-trigger { | |
| padding: 1.9em 0; | |
| } | |
| } | |
| .subnav-bar { | |
| min-width: 220px; | |
| } | |
| } | |
| .subnav { | |
| li { | |
| a { | |
| padding: .75em 1.25em; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @include media(em(1150px)) { | |
| .site-header .container .site-nav .global-nav { | |
| // margin-right:5%; | |
| .topnav { | |
| > a { | |
| margin: 1.5em .75em 0 .75em; | |
| } | |
| &.topnav-search { | |
| padding-left: .9em; | |
| margin-left: .75em; | |
| .search-trigger { | |
| padding: 1.9em 0 1.9em .25em; | |
| } | |
| } | |
| .subnav-bar { | |
| min-width: 230px; | |
| } | |
| } | |
| } | |
| } | |
| @include media(em(1200px)) { | |
| .site-header .container .site-nav .global-nav { | |
| // margin-right:9%; | |
| .topnav { | |
| font-size: 14px; | |
| > a { | |
| margin: 1.5em .75em 0 .75em; | |
| } | |
| &.topnav-search { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| .search-trigger { | |
| padding: 1.9em .25em 1.9em .5em; | |
| } | |
| } | |
| } | |
| .subnav-bar { | |
| min-width: 235px; | |
| } | |
| } | |
| } | |
| @include media(em(1300px)) { | |
| .site-header .container .site-nav .global-nav { | |
| .topnav { | |
| > a { | |
| margin: 1.5em 1.25em 0 1.25em; | |
| } | |
| &.topnav-search { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| .search-trigger { | |
| padding: 1.9em .25em 1.9em 1.25em; | |
| margin-right: 1em; | |
| } | |
| } | |
| } | |
| .subnav { | |
| li { | |
| a { | |
| padding: .75em 1.5em; | |
| } | |
| } | |
| } | |
| .subnav-bar { | |
| min-width: 240px; | |
| } | |
| } | |
| } | |
| @include media(em(1375px)) { | |
| .site-header .container .site-nav .global-nav { | |
| .topnav { | |
| font-size: 14px; | |
| > a { | |
| margin: 1.5em 1.2em 0 1.2em; | |
| } | |
| &.topnav-search, &.tiny { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| .search-trigger { | |
| padding: 1.9em .25em 1.9em 1.25em; | |
| margin-right: 1.25em; | |
| } | |
| } | |
| } | |
| .subnav { | |
| li { | |
| a { | |
| padding: .75em 1.75em; | |
| } | |
| } | |
| } | |
| .subnav-bar { | |
| min-width: 245px; | |
| } | |
| } | |
| } | |
| @include media(em(1440px)) { | |
| .site-header .container .site-nav .global-nav { | |
| .topnav { | |
| > a { | |
| margin: 1.5em 1.2em 0 1.2em; | |
| } | |
| &.topnav-search, &.tiny { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| background-position-y: 26px; | |
| .search-trigger { | |
| padding: 1.9em .25em 1.9em 1.25em; | |
| margin-right: 1.5em; | |
| } | |
| } | |
| .subnav-bar { | |
| min-width: 260px; | |
| } | |
| } | |
| .subnav { | |
| li { | |
| a { | |
| padding: .75em 2em; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @include media(em(1510px)) { | |
| .site-header .container .site-nav .global-nav { | |
| .topnav { | |
| font-size: 15px; | |
| &.topnav-search, &.tiny { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| background-position-y: 28px; | |
| } | |
| } | |
| } | |
| } | |
| .sfw { | |
| @include media(65em) { | |
| .branding { | |
| display: none; // Hide branding for now... | |
| } | |
| } | |
| } | |
| // ------------------------------------------------- | |
| // UTILITY CLASSES | |
| // ------------------------------------------------- | |
| // Opacity fade effect for subnav bar items | |
| @-webkit-keyframes subnavFadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes subnavFadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| box-sizing: border-box; | |
| } | |
| *, | |
| *::after, | |
| *::before { | |
| box-sizing: inherit; | |
| } | |
| #logo, .subnav i { | |
| display: none; | |
| } | |
| .module > *:first-child { | |
| margin-top: 0; | |
| } | |
| .module > *:last-child { | |
| margin-bottom: 0; | |
| } | |
| .site-header { | |
| z-index: 9; | |
| height: 5em; | |
| background-image: none; | |
| background-color: transparent; | |
| margin-bottom: 0; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .no-js .site-header { | |
| height: auto; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-header { | |
| margin-bottom: 3.25em; | |
| height: 4.1875em; | |
| background-color: #222; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| } | |
| } | |
| .site-header span { | |
| position: absolute; | |
| font-size: 0; | |
| line-height: 0; | |
| opacity: 0; | |
| } | |
| .site-header .container { | |
| position: relative; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .site-header .container { | |
| padding: 0; | |
| } | |
| } | |
| .site-header .branding { | |
| -webkit-perspective: 1000; | |
| -webkit-backface-visibility: hidden; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .site-header .branding { | |
| background-color: #222222; | |
| padding: 1em 7.5%; | |
| background-image: none; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-header .branding { | |
| float: left; | |
| display: block; | |
| margin-right: 2.35765%; | |
| width: 18.96686%; | |
| position: relative; | |
| top: 7em; | |
| display: block; | |
| padding: 1px 2% 0 0; | |
| z-index: 3; | |
| background-color: transparent; | |
| } | |
| .site-header .branding:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| .site-header .branding .site-logo { | |
| display: block; | |
| width: 148px; | |
| height: 48px; | |
| background: url(/assets/img/seafood-watch-logo.png) top left no-repeat; | |
| background-size: 100%; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-header .branding .site-logo { | |
| float: left; | |
| width: 153px; | |
| height: 66px; | |
| background-image: url(/assets/img/logo-left.png); | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| background-position: top left; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-nav { | |
| overflow: hidden; | |
| position: absolute; | |
| right: 1em; | |
| display: block; | |
| float: right; | |
| } | |
| } | |
| .site-nav ul { | |
| margin: 0; | |
| } | |
| .no-js .site-nav .support-links { | |
| display: none; | |
| } | |
| .site-nav .support-links::after { | |
| clear: both; | |
| content: ""; | |
| display: table; | |
| } | |
| .site-nav .support-links a { | |
| float: left; | |
| width: 42.5%; | |
| margin: 1.5em 5%; | |
| padding: 1em 0; | |
| line-height: 1; | |
| font-weight: bold; | |
| text-align: center; | |
| border-radius: 0.21875em; | |
| -webkit-transform: translateZ(0); | |
| -webkit-perspective: 1000; | |
| } | |
| .site-nav .support-links a.donate { | |
| background: #008DEC; | |
| color: #fff; | |
| margin-left: 2.5%; | |
| } | |
| .site-nav .support-links a.buy-tickets { | |
| background: #008DEC; | |
| color: #fff; | |
| margin-right: 2.5%; | |
| } | |
| .global-nav { | |
| -webkit-tap-highlight-color: transparent; | |
| -webkit-user-select: none; | |
| -webkit-touch-callout: none; | |
| -webkit-user-drag: none; | |
| border-bottom: 0; | |
| background: transparent; | |
| padding-bottom: 0; | |
| } | |
| .global-nav::after { | |
| clear: both; | |
| content: ""; | |
| display: table; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .global-nav { | |
| width: 150%; | |
| padding-bottom: 2em; | |
| } | |
| } | |
| .global-nav li.topnav { | |
| position: relative; | |
| border-bottom: 1px solid #ddd; | |
| padding-right: 4em; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .global-nav li.topnav { | |
| margin: 0 5%; | |
| } | |
| } | |
| .global-nav li.topnav.tiny a i { | |
| display: none; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .global-nav li.topnav { | |
| float: left; | |
| border-bottom: 0; | |
| padding-right: 0; | |
| } | |
| .global-nav li.topnav.tiny, | |
| .global-nav li.topnav.topnav-search { | |
| background: url(/assets/img/nav-sep.png) no-repeat left 1.4375em; | |
| } | |
| .global-nav li.topnav.tiny { | |
| display: none; | |
| padding-left: 1.125em; | |
| } | |
| } | |
| @media screen and (min-width: 65em) and (min-width: 65em) { | |
| .global-nav li.topnav.tiny { | |
| display: block; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .global-nav li.topnav.tiny a { | |
| margin-top: 1em; | |
| font-size: 1em; | |
| } | |
| .global-nav li.topnav.tiny a.button { | |
| padding-bottom: 7px; | |
| } | |
| .global-nav li.topnav.tiny a i { | |
| display: inline-block; | |
| font-size: 1em; | |
| margin-right: 0.3125em; | |
| } | |
| .global-nav li.topnav.topnav-search { | |
| padding-left: 0.875em; | |
| display: none; | |
| } | |
| } | |
| @media screen and (min-width: 65em) and (min-width: 65em) { | |
| .global-nav li.topnav.topnav-search { | |
| display: block; | |
| } | |
| } | |
| .global-nav li.topnav a { | |
| font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", "Arial Narrow Bold", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-weight: 400; | |
| font-style: normal; | |
| display: block; | |
| font-size: 1em; | |
| padding: 1.025em; | |
| padding-left: 7.5%; | |
| line-height: 1; | |
| color: #fff; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .global-nav li.topnav a { | |
| border-left: 3px solid #00487c; | |
| margin-top: .35em; | |
| margin-bottom: .35em; | |
| padding-top: .75em; | |
| padding-bottom: .75em; | |
| padding-left: 5%; | |
| font-size: 1.125em; | |
| } | |
| .global-nav li.topnav a:hover, | |
| .global-nav li.topnav a:active { | |
| border-left-color: #8cacc4; | |
| } | |
| .global-nav li.topnav a.active { | |
| border-left-color: #fff; | |
| } | |
| } | |
| .global-nav li.topnav i.trigger-subnav { | |
| transition: all 0.3s; | |
| transition-property: background-color, color, border-color; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| font-size: 1.75em; | |
| line-height: .65em; | |
| padding: 14px 5%; | |
| min-width: 50px; | |
| height: 50px; | |
| text-align: center; | |
| color: #53baff; | |
| cursor: pointer; | |
| } | |
| .global-nav li.topnav i.trigger-subnav:hover, | |
| .global-nav li.topnav i.trigger-subnav:active { | |
| transition: 0s; | |
| } | |
| .no-js .global-nav li.topnav i.trigger-subnav { | |
| display: none; | |
| } | |
| .global-nav li.topnav i.trigger-subnav:hover, | |
| .global-nav li.topnav i.trigger-subnav:active { | |
| color: #fff; | |
| border-color: #fff; | |
| } | |
| .global-nav li.topnav > a.button { | |
| display: none; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .global-nav li.topnav > a { | |
| font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", "Arial Narrow Bold", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-weight: 700; | |
| font-style: normal; | |
| display: block; | |
| float: left; | |
| color: #fff; | |
| font-size: 1em; | |
| line-height: 1; | |
| padding: 0.5em 0; | |
| margin: 1em 1.125em 0 0; | |
| } | |
| .global-nav li.topnav > a.button { | |
| display: block; | |
| padding-left: .5em; | |
| padding-right: .5em; | |
| border-bottom: 0 none !important; | |
| } | |
| .global-nav li.topnav > a:hover, | |
| .global-nav li.topnav > a.active, | |
| .global-nav li.topnav > a.active:hover { | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.85); | |
| color: #fff; | |
| } | |
| .global-nav li.topnav > a:hover { | |
| border-bottom-color: rgba(255, 255, 255, 0.5); | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .global-nav li.topnav .search-trigger { | |
| font-size: 1.125em; | |
| padding: 1.4375em 0; | |
| height: auto; | |
| width: 1.5em; | |
| } | |
| } | |
| .no-js .global-nav li.topnav ul.subnav { | |
| display: none; | |
| } | |
| .global-nav li.topnav ul.subnav li a { | |
| transition: all 0.3s; | |
| transition-property: background-color, color, border-color; | |
| font-size: 1em; | |
| line-height: 1.2; | |
| padding: 0.85em 1em; | |
| padding-right: 7.5%; | |
| border-top: none; | |
| color: #fff; | |
| border-left: 3px solid #00487c; | |
| } | |
| .global-nav li.topnav ul.subnav li a:hover, | |
| .global-nav li.topnav ul.subnav li a:active { | |
| transition: 0s; | |
| } | |
| .global-nav li.topnav ul.subnav li a:hover, | |
| .global-nav li.topnav ul.subnav li a:active, | |
| .global-nav li.topnav ul.subnav li a.active { | |
| border-left-color: #8cacc4; | |
| } | |
| .global-nav li.topnav ul.subnav li a.active { | |
| border-left-color: #fff; | |
| } | |
| .global-nav li.topnav ul.subnav li:last-of-type a { | |
| padding-bottom: 1em; | |
| } | |
| .global-nav li.topnav a { | |
| color: #333; | |
| } | |
| .global-nav li.topnav a:hover { | |
| color: #999; | |
| } | |
| .global-nav li.topnav i.trigger-subnav { | |
| color: #333; | |
| } | |
| .global-nav li.topnav i.trigger-subnav:hover { | |
| color: #999; | |
| } | |
| .global-nav li.topnav ul.subnav li a { | |
| color: #111; | |
| padding-right: 0; | |
| padding-left: 9%; | |
| border: 0; | |
| } | |
| .global-nav li.topnav ul.subnav li a:hover { | |
| color: #999; | |
| } | |
| .site-search { | |
| position: relative; | |
| padding: 0 7.5%; | |
| } | |
| .site-search input { | |
| width: 100%; | |
| padding: 0.5em 0; | |
| border-radius: 2em; | |
| text-indent: 1em; | |
| border: none; | |
| } | |
| .site-search input:focus { | |
| outline: 0; | |
| } | |
| .site-search .search-form { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .site-search .search-form .search-submit, | |
| .site-search .search-form .search-clear, | |
| .site-search .search-form .search-wait { | |
| transition: all 0.3s; | |
| transition-property: background-color, color, border-color; | |
| position: absolute; | |
| top: 0; | |
| right: 0.5em; | |
| padding: 0.5em; | |
| background: none; | |
| border: none; | |
| color: #6dc4ff; | |
| } | |
| .site-search .search-form .search-submit:hover, | |
| .site-search .search-form .search-submit:active, | |
| .site-search .search-form .search-clear:hover, | |
| .site-search .search-form .search-clear:active, | |
| .site-search .search-form .search-wait:hover, | |
| .site-search .search-form .search-wait:active { | |
| transition: 0s; | |
| } | |
| .site-search .search-form .search-submit:hover, | |
| .site-search .search-form .search-clear:hover, | |
| .site-search .search-form .search-wait:hover { | |
| color: #008DEC; | |
| } | |
| .site-search .search-form .search-submit [class^="icon-"], | |
| .site-search .search-form .search-clear [class^="icon-"], | |
| .site-search .search-form .search-wait [class^="icon-"] { | |
| position: relative; | |
| top: -1px; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .site-search .search-form .search-submit [class^="icon-"], | |
| .site-search .search-form .search-clear [class^="icon-"], | |
| .site-search .search-form .search-wait [class^="icon-"] { | |
| top: -3px; | |
| } | |
| } | |
| .site-search .search-form .search-wait, .site-search .search-form .search-wait:hover { | |
| color: #ccc; | |
| } | |
| .site-search .search-form .search-clear, | |
| .site-search .search-form .search-wait { | |
| display: none; | |
| } | |
| .search-takeover { | |
| display: none; | |
| background: #fff; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .search-takeover { | |
| padding-top: 7em; | |
| } | |
| } | |
| .no-js .search-wrap { | |
| display: none; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .no-js .search-page .global-nav { | |
| display: none; | |
| } | |
| } | |
| .no-js .search-page .search-wrap { | |
| display: block; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .no-js .search-page .search-wrap .search-wrap { | |
| background: #fff; | |
| width: 100%; | |
| z-index: 1; | |
| position: relative; | |
| height: 10.25em; | |
| border-bottom: 1px #d2d3db solid; | |
| transition: box-shadow 1s; | |
| } | |
| } | |
| .no-js .search-page .search-wrap .site-search { | |
| height: auto !important; | |
| overflow: auto !important; | |
| padding-bottom: 1em; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .no-js .search-page .search-wrap .site-search { | |
| margin-left: 21.32451%; | |
| position: relative; | |
| top: 2.875em; | |
| padding: 0; | |
| } | |
| .no-js .search-page .search-wrap .site-search button:focus { | |
| outline: none; | |
| } | |
| .no-js .search-page .search-wrap .site-search input { | |
| border-radius: 0.25em; | |
| overflow: hidden; | |
| padding: 1em 0; | |
| width: 99%; | |
| border: none; | |
| background: #eee; | |
| border: 1px solid #fff; | |
| font-size: 1.25em; | |
| } | |
| .no-js .search-page .search-wrap .site-search input:focus { | |
| outline: none; | |
| border: 1px solid #008DEC; | |
| } | |
| .no-js .search-page .search-wrap .site-search .search-submit, | |
| .no-js .search-page .search-wrap .site-search .search-clear, | |
| .no-js .search-page .search-wrap .site-search .search-wait { | |
| position: absolute; | |
| right: 1%; | |
| width: 3em; | |
| height: 100%; | |
| font-size: 1.25em; | |
| } | |
| } | |
| .search-page #search { | |
| display: none; | |
| } | |
| .search-page #menu { | |
| display: none; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .js .site-nav, | |
| .js .subnav { | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| } | |
| .js .site-search { | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .js .support-links, | |
| .js .trigger-subnav, | |
| .js .subnav { | |
| display: none !important; | |
| } | |
| } | |
| .js .menu-active .search-wrap { | |
| display: none; | |
| } | |
| .js .site-main { | |
| padding-top: 2em; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .js .site-main { | |
| padding-top: 8.75em; | |
| } | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .js .menu-active { | |
| background-image: none; | |
| } | |
| .js .menu-active .site-header { | |
| height: auto; | |
| } | |
| .js .menu-active #menu i { | |
| color: #b2d1ef; | |
| } | |
| .js .menu-active #menu span { | |
| font-size: 12px; | |
| line-height: normal; | |
| opacity: 1; | |
| position: relative; | |
| color: #b2d1ef; | |
| } | |
| .js .menu-active #menu:after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| left: 64px; | |
| top: 56.5px; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 0 14px 13px 14px; | |
| border-color: transparent transparent #00487c transparent; | |
| line-height: 0px; | |
| _border-color: #000000 #000000 #00487c #000000; | |
| _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); | |
| } | |
| .js .menu-active .site-nav { | |
| height: auto !important; | |
| overflow: auto !important; | |
| margin-top: 5em; | |
| background: #eee; | |
| } | |
| .js .menu-active .branding { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 2; | |
| } | |
| .js .menu-active .site-util { | |
| position: fixed; | |
| font-size: 18px; | |
| } | |
| .js .menu-active .site-header { | |
| margin-bottom: 0; | |
| } | |
| .js .menu-active .site-footer { | |
| padding-top: 2em; | |
| } | |
| .js .menu-active .featured, | |
| .js .menu-active .site-main { | |
| display: none; | |
| } | |
| } | |
| .js .topnav .trigger-subnav:before { | |
| font-family: FontAwesome; | |
| content: "\f105"; | |
| } | |
| .js .topnav.active .trigger-subnav:before { | |
| content: "\f107"; | |
| } | |
| .js .topnav.active .subnav { | |
| height: auto !important; | |
| overflow: auto !important; | |
| padding-left: 6.25%; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .js .search-active .site-header { | |
| height: auto; | |
| } | |
| } | |
| .js .search-active #search i { | |
| color: #b2d1ef; | |
| } | |
| .js .search-active #search span { | |
| color: #b2d1ef; | |
| } | |
| .js .search-active .featured, | |
| .js .search-active .site-main, | |
| .js .search-active .site-footer { | |
| display: none; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .js .search-active .site-header { | |
| width: 100%; | |
| } | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .js .search-active .site-header .search-wrap { | |
| background-color: #008dec; | |
| padding-top: 1em; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .js .search-active .search-takeover { | |
| display: block; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .js .search-active .search-wrap { | |
| background: #fff; | |
| width: 100%; | |
| z-index: 1; | |
| position: relative; | |
| height: 10.25em; | |
| border-bottom: 1px #d2d3db solid; | |
| transition: box-shadow 1s; | |
| } | |
| } | |
| .js .search-active .site-search { | |
| height: auto !important; | |
| overflow: auto !important; | |
| padding-bottom: 1em; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .js .search-active .site-search { | |
| margin-left: 21.32451%; | |
| position: relative; | |
| top: 2.875em; | |
| padding: 0; | |
| } | |
| .js .search-active .site-search button:focus { | |
| outline: none; | |
| } | |
| .js .search-active .site-search input { | |
| border-radius: 0.25em; | |
| overflow: hidden; | |
| padding: 1em 0; | |
| width: 99%; | |
| border: none; | |
| background: #eee; | |
| border: 1px solid #fff; | |
| font-size: 1.25em; | |
| } | |
| .js .search-active .site-search input:focus { | |
| outline: none; | |
| border: 1px solid #008DEC; | |
| } | |
| .js .search-active .site-search .search-submit, | |
| .js .search-active .site-search .search-clear, | |
| .js .search-active .site-search .search-wait { | |
| position: absolute; | |
| right: 1%; | |
| width: 3em; | |
| height: 100%; | |
| font-size: 1.25em; | |
| } | |
| } | |
| .searching .search-submit, | |
| .searching .search-clear { | |
| display: none !important; | |
| } | |
| .searching .search-wait { | |
| display: block !important; | |
| } | |
| .site-util::after { | |
| clear: both; | |
| content: ""; | |
| display: table; | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .site-util { | |
| position: absolute; | |
| top: .675em; | |
| right: 7.5%; | |
| z-index: 3; | |
| font-size: 18px; | |
| } | |
| .site-util a { | |
| border: none !important; | |
| margin-left: 0 !important; | |
| padding: .66667em !important; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-util { | |
| position: relative; | |
| } | |
| } | |
| .site-util a { | |
| display: block; | |
| float: left; | |
| padding: 0.66667em; | |
| width: 48px; | |
| height: 48px; | |
| text-align: center; | |
| color: #fff; | |
| border-radius: 6px; | |
| } | |
| .site-util a [class^="icon-"], .site-util a [class^="fa"] { | |
| display: block; | |
| font-size: 1.5em; | |
| line-height: 1; | |
| color: #fff; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-util a [class^="icon-"], .site-util a [class^="fa"] { | |
| font-size: 1.3em; | |
| } | |
| } | |
| .site-util #menu { | |
| margin-top: -.25em; | |
| } | |
| .no-js .site-util #menu { | |
| display: none; | |
| } | |
| .site-util #menu span { | |
| font-size: 12px; | |
| line-height: 1.5em; | |
| margin-left: .1em; | |
| opacity: 1; | |
| position: relative; | |
| color: #fff; | |
| } | |
| .site-util #menu i { | |
| line-height: .75; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-util #menu i { | |
| font-size: 1.3em; | |
| line-height: normal; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-util #menu { | |
| display: none; | |
| } | |
| } | |
| .site-util #search { | |
| margin-top: -.25em; | |
| } | |
| .site-util #search span { | |
| margin-left: -.3em; | |
| font-size: 12px; | |
| line-height: 1.5em; | |
| opacity: 1; | |
| position: relative; | |
| color: #fff; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-util #search span { | |
| opacity: 0; | |
| } | |
| } | |
| .site-util #search i { | |
| line-height: .75; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-util #search i { | |
| font-size: 1.1em; | |
| line-height: 1.3em; | |
| } | |
| } | |
| .search-results .item { | |
| display: block; | |
| padding: 1.5em 0; | |
| border-bottom: 1px #d2d3db solid; | |
| cursor: pointer; | |
| } | |
| .search-results .item::after { | |
| clear: both; | |
| content: ""; | |
| display: table; | |
| } | |
| .search-results .item:hover { | |
| background: #f7f7f7; | |
| } | |
| .search-results .item:hover .url { | |
| color: #008DEC; | |
| } | |
| .search-results .item .content { | |
| position: relative; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .search-results .item .content { | |
| float: left; | |
| display: block; | |
| margin-right: 2.35765%; | |
| width: 78.67549%; | |
| margin-left: 21.32451%; | |
| } | |
| .search-results .item .content:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| .search-results .item .header { | |
| margin-bottom: 0.5em; | |
| } | |
| .search-results .item .tag { | |
| border-radius: 0.25em; | |
| overflow: hidden; | |
| overflow: visible; | |
| display: inline-block; | |
| padding: 0.5em; | |
| font-size: 0.75em; | |
| font-weight: bold; | |
| line-height: 1; | |
| background: #008DEC; | |
| color: #fff; | |
| white-space: nowrap; | |
| margin-bottom: 0.3125em; | |
| } | |
| .search-results .item .tags { | |
| display: none; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .search-results .item .tags { | |
| display: block; | |
| text-align: right; | |
| position: absolute; | |
| right: 100%; | |
| top: 0.125em; | |
| margin-right: 1em; | |
| } | |
| } | |
| .search-results .item .title { | |
| margin: 0; | |
| } | |
| .search-results .item .url { | |
| color: #666777; | |
| font-size: 0.875em; | |
| } | |
| .search-results .item .body { | |
| color: #444; | |
| } | |
| .search-results .item .body > *:first-child { | |
| margin-top: 0; | |
| } | |
| .search-results .item .body > *:last-child { | |
| margin-bottom: 0; | |
| } | |
| .search-results .item .body p { | |
| max-width: 800px; | |
| } | |
| .show-more-results { | |
| padding: 4em 0; | |
| text-align: center; | |
| } | |
| .show-more-results > *:first-child { | |
| margin-top: 0; | |
| } | |
| .show-more-results > *:last-child { | |
| margin-bottom: 0; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .search-active.sticky-search .site-header { | |
| position: fixed; | |
| height: 0; | |
| } | |
| .search-active.sticky-search .site-header > .container { | |
| height: 0; | |
| } | |
| .search-active.sticky-search .site-header .branding { | |
| top: 2.8125em; | |
| } | |
| .search-active.sticky-search .site-header .site-nav { | |
| display: none; | |
| } | |
| .search-active.sticky-search .site-header .search-wrap { | |
| background: rgba(255, 255, 255, 0.96); | |
| box-shadow: 0 5px 15px #ddd; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); | |
| } | |
| .search-active.sticky-search .site-header .search-wrap input { | |
| background: rgba(0, 0, 0, 0.07); | |
| } | |
| .search-active.sticky-search .search-takeover { | |
| padding-top: 14.4375em; | |
| } | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| .menu-active .site-footer { | |
| padding-top: 3em; | |
| margin-top: 2em; | |
| } | |
| } | |
| @media screen and (max-width: 64.9375em) { | |
| li.topnav:last-of-type, li.topnav:nth-last-of-type(2) { | |
| border-bottom: 0; | |
| } | |
| li.topnav:nth-last-of-type(2) { | |
| padding-bottom: 2.5em; | |
| background-color: #fff; | |
| background-color: #fff; | |
| background-image: -webkit-linear-gradient(top, #fff 50%, #eee); | |
| background-image: linear-gradient(to bottom,#fff 50%, #eee, , , , , , , , ); | |
| } | |
| } | |
| .site-search .search-form .search-submit, | |
| .site-search .search-form .search-clear, | |
| .site-search .search-form .search-wait { | |
| color: #333; | |
| } | |
| .search-active #search i, | |
| .menu-active #menu i, | |
| .search-active #search span, | |
| .menu-active #menu span { | |
| color: #666777; | |
| } | |
| #search { | |
| color: #fff; | |
| } | |
| @media screen and (min-width: 65em) { | |
| .site-header { | |
| /*&.subnav-init .topnav.open .subnav li { | |
| a, i { | |
| display: none; | |
| } | |
| }*/ | |
| } | |
| .site-header #logo { | |
| display: inline-block; | |
| } | |
| .site-header #logo a { | |
| margin-top: .2em; | |
| margin-left: 0; | |
| padding-bottom: 0; | |
| } | |
| .site-header #logo a img { | |
| height: 50px; | |
| } | |
| .site-header .global-nav li.topnav a { | |
| color: #fff; | |
| } | |
| .site-header .global-nav li.topnav a:hover { | |
| color: #fff; | |
| } | |
| .site-header .global-nav:hover .topnav > a { | |
| color: #666777; | |
| } | |
| .site-header.subnav-open .global-nav .topnav > a { | |
| color: #666777; | |
| } | |
| .site-header.subnav-open .global-nav .topnav:hover > a, | |
| .site-header.subnav-open .global-nav .topnav.open > a { | |
| color: #fff; | |
| } | |
| .site-header .topnav:hover .subnav-bar, | |
| .site-header.subnav-open .subnav-bar { | |
| top: 75px; | |
| overflow: hidden; | |
| display: block; | |
| } | |
| .site-header .topnav:hover .subnav, | |
| .site-header .topnav.open .subnav { | |
| display: block !important; | |
| } | |
| .site-header .topnav:hover .subnav li a, | |
| .site-header .topnav:hover .subnav li i, | |
| .site-header .topnav.open .subnav li a, .site-header .topnav.open .subnav li i { | |
| animation: subnavFadeIn 0.6s; | |
| animation-timing-function: ease; | |
| -webkit-animation: subnavFadeIn 0.6s; | |
| -webkit-animation-timing-function: ease; | |
| /* Safari and Chrome */ | |
| } | |
| .site-header.subnav-init .subnav-bar { | |
| display: none !important; | |
| } | |
| .site-header.subnav-init .topnav.active a { | |
| color: #fff; | |
| } | |
| .site-header .subnav-bar { | |
| transition: all 0.6s ease; | |
| background-color: #222; | |
| position: absolute; | |
| width: auto; | |
| min-width: 220px; | |
| top: -20em; | |
| z-index: -1; | |
| border-radius: 0 0 4px 4px; | |
| display: block; | |
| } | |
| .site-header .mask { | |
| background-color: #222; | |
| } | |
| .site-header .global-nav li.topnav.tiny, .site-header .global-nav li.topnav.topnav-search { | |
| background-position: left 25px; | |
| } | |
| .site-header .container { | |
| position: static; | |
| } | |
| .site-header .container .site-nav { | |
| float: none; | |
| overflow: visible; | |
| position: static; | |
| } | |
| .site-header .container .site-nav .global-nav { | |
| font-size: 0px; | |
| width: auto; | |
| text-align: right; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav { | |
| font-size: 13px; | |
| height: 75px; | |
| position: static; | |
| display: inline-block; | |
| vertical-align: bottom; | |
| float: none; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav > a { | |
| margin: 1.65em 0.5em 0 0.5em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav > a:hover { | |
| border-bottom: 0 none; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav > a.active { | |
| border-bottom: 2px solid; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search, .site-header .container .site-nav .global-nav .topnav.tiny { | |
| padding-left: .8em; | |
| margin-left: .4em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search .search-trigger, .site-header .container .site-nav .global-nav .topnav.tiny .search-trigger { | |
| padding: 2.1em 0; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav { | |
| text-align: left; | |
| overflow: hidden !important; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li, .site-header .container .site-nav .global-nav .subnav a { | |
| display: block; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li { | |
| cursor: default; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li:last-of-type a { | |
| padding-bottom: 1.5em; | |
| background: none; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li a { | |
| padding: 0.75em 1em; | |
| border-left: 0; | |
| color: #fff; | |
| cursor: pointer; | |
| font-size: .9em; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li a.active { | |
| background: none; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li a:hover { | |
| color: #fff; | |
| opacity: .8; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li:last-of-type i { | |
| display: none; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li i { | |
| display: inline-block; | |
| color: #fff; | |
| opacity: .85; | |
| margin-left: -5px; | |
| cursor: default; | |
| font-size: 1.22em; | |
| } | |
| .site-header .search-wrap { | |
| z-index: -2; | |
| } | |
| .search-takeover { | |
| padding-top: 15em; | |
| } | |
| } | |
| @media screen and (min-width: 68.75em) { | |
| .site-header .container .site-nav .global-nav .topnav { | |
| font-size: 14px; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav > a { | |
| margin: 1.5em 0.5em 0 0.5em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search, .site-header .container .site-nav .global-nav .topnav.tiny { | |
| padding-left: .8em; | |
| margin-left: .4em; | |
| background-position-y: 26px; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search .search-trigger, .site-header .container .site-nav .global-nav .topnav.tiny .search-trigger { | |
| padding: 1.9em 0; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav .subnav-bar { | |
| min-width: 220px; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li a { | |
| padding: 0.75em 1.25em; | |
| } | |
| } | |
| @media screen and (min-width: 71.875em) { | |
| .site-header .container .site-nav .global-nav .topnav > a { | |
| margin: 1.5em 0.75em 0 0.75em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search { | |
| padding-left: .9em; | |
| margin-left: .75em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search .search-trigger { | |
| padding: 1.9em 0 1.9em 0.25em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav .subnav-bar { | |
| min-width: 230px; | |
| } | |
| } | |
| @media screen and (min-width: 75em) { | |
| .site-header .container .site-nav .global-nav .topnav { | |
| font-size: 14px; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav > a { | |
| margin: 1.5em 0.75em 0 0.75em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search .search-trigger { | |
| padding: 1.9em 0.25em 1.9em 0.5em; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav-bar { | |
| min-width: 235px; | |
| } | |
| } | |
| @media screen and (min-width: 81.25em) { | |
| .site-header .container .site-nav .global-nav .topnav > a { | |
| margin: 1.5em 1.25em 0 1.25em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search .search-trigger { | |
| padding: 1.9em 0.25em 1.9em 1.25em; | |
| margin-right: 1em; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li a { | |
| padding: 0.75em 1.5em; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav-bar { | |
| min-width: 240px; | |
| } | |
| } | |
| @media screen and (min-width: 85.9375em) { | |
| .site-header .container .site-nav .global-nav .topnav { | |
| font-size: 14px; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav > a { | |
| margin: 1.5em 1.2em 0 1.2em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search, .site-header .container .site-nav .global-nav .topnav.tiny { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search .search-trigger, .site-header .container .site-nav .global-nav .topnav.tiny .search-trigger { | |
| padding: 1.9em 0.25em 1.9em 1.25em; | |
| margin-right: 1.25em; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li a { | |
| padding: 0.75em 1.75em; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav-bar { | |
| min-width: 245px; | |
| } | |
| } | |
| @media screen and (min-width: 90em) { | |
| .site-header .container .site-nav .global-nav .topnav > a { | |
| margin: 1.5em 1.2em 0 1.2em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search, .site-header .container .site-nav .global-nav .topnav.tiny { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| background-position-y: 26px; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search .search-trigger, .site-header .container .site-nav .global-nav .topnav.tiny .search-trigger { | |
| padding: 1.9em 0.25em 1.9em 1.25em; | |
| margin-right: 1.5em; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav .subnav-bar { | |
| min-width: 260px; | |
| } | |
| .site-header .container .site-nav .global-nav .subnav li a { | |
| padding: 0.75em 2em; | |
| } | |
| } | |
| @media screen and (min-width: 94.375em) { | |
| .site-header .container .site-nav .global-nav .topnav { | |
| font-size: 15px; | |
| } | |
| .site-header .container .site-nav .global-nav .topnav.topnav-search, .site-header .container .site-nav .global-nav .topnav.tiny { | |
| padding-left: 1em; | |
| margin-left: .9em; | |
| background-position-y: 28px; | |
| } | |
| } | |
| @media screen and (min-width: 65em) { | |
| .sfw .branding { | |
| display: none; | |
| } | |
| } | |
| @-webkit-keyframes subnavFadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes subnavFadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Initial Spaghetti Code SFW Navigation Code.