From d5fc8e31882a271181e21e4f5730bfc28a2a22b5 Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Fri, 7 Oct 2016 09:51:58 -0400 Subject: [PATCH] New shop sidebar and styles based on new defaults The sidebar is now on the left side rather than the right and is based on the one we have for shipwreckmuseum and harborcountry. --- css/app.css.map | 1 - parts/shop-cats-and-products.php | 57 ++ parts/shop-sidebar.php | 99 ++-- parts/shop-sidebar_old.php | 76 +++ scss/plugins/_woocommerce.scss | 108 +++- scss/plugins/_woocommerce_old.scss | 876 +++++++++++++++++++++++++++++ sections/interior-page.php | 54 +- woocommerce.php | 123 ++-- woocommerce_old.php | 163 ++++++ 9 files changed, 1411 insertions(+), 146 deletions(-) create mode 100644 parts/shop-cats-and-products.php create mode 100644 parts/shop-sidebar_old.php create mode 100644 scss/plugins/_woocommerce_old.scss create mode 100644 woocommerce_old.php diff --git a/css/app.css.map b/css/app.css.map index 9a417a6..e69de29 100644 --- a/css/app.css.map +++ b/css/app.css.map @@ -1 +0,0 @@ -{"version":3,"file":"app.css","sources":["app.scss","_settings.scss","../bower_components/foundation-sites/scss/util/_util.scss","../bower_components/foundation-sites/scss/util/_unit.scss","../bower_components/foundation-sites/scss/util/_value.scss","../bower_components/foundation-sites/scss/util/_color.scss","../bower_components/foundation-sites/scss/util/_selector.scss","../bower_components/foundation-sites/scss/util/_flex.scss","../bower_components/foundation-sites/scss/util/_breakpoint.scss","../bower_components/foundation-sites/scss/util/_mixins.scss","../bower_components/foundation-sites/scss/foundation.scss","../bower_components/foundation-sites/scss/util/_util.scss","../bower_components/foundation-sites/scss/_global.scss","../bower_components/foundation-sites/scss/grid/_grid.scss","../bower_components/foundation-sites/scss/grid/_row.scss","../bower_components/foundation-sites/scss/grid/_column.scss","../bower_components/foundation-sites/scss/grid/_size.scss","../bower_components/foundation-sites/scss/grid/_position.scss","../bower_components/foundation-sites/scss/grid/_gutter.scss","../bower_components/foundation-sites/scss/grid/_classes.scss","../bower_components/foundation-sites/scss/grid/_layout.scss","../bower_components/foundation-sites/scss/grid/_flex-grid.scss","../bower_components/foundation-sites/scss/typography/_typography.scss","../bower_components/foundation-sites/scss/typography/_base.scss","../bower_components/foundation-sites/scss/typography/_helpers.scss","../bower_components/foundation-sites/scss/typography/_alignment.scss","../bower_components/foundation-sites/scss/typography/_print.scss","../bower_components/foundation-sites/scss/forms/_forms.scss","../bower_components/foundation-sites/scss/forms/_text.scss","../bower_components/foundation-sites/scss/forms/_checkbox.scss","../bower_components/foundation-sites/scss/forms/_label.scss","../bower_components/foundation-sites/scss/forms/_help-text.scss","../bower_components/foundation-sites/scss/forms/_input-group.scss","../bower_components/foundation-sites/scss/forms/_fieldset.scss","../bower_components/foundation-sites/scss/forms/_select.scss","../bower_components/foundation-sites/scss/forms/_range.scss","../bower_components/foundation-sites/scss/forms/_progress.scss","../bower_components/foundation-sites/scss/forms/_meter.scss","../bower_components/foundation-sites/scss/forms/_error.scss","../bower_components/foundation-sites/scss/components/_visibility.scss","../bower_components/foundation-sites/scss/components/_float.scss","../bower_components/foundation-sites/scss/components/_button.scss","../bower_components/foundation-sites/scss/components/_button-group.scss","../bower_components/foundation-sites/scss/components/_accordion-menu.scss","../bower_components/foundation-sites/scss/components/_accordion.scss","../bower_components/foundation-sites/scss/components/_badge.scss","../bower_components/foundation-sites/scss/components/_breadcrumbs.scss","../bower_components/foundation-sites/scss/components/_callout.scss","../bower_components/foundation-sites/scss/components/_close-button.scss","../bower_components/foundation-sites/scss/components/_drilldown.scss","../bower_components/foundation-sites/scss/components/_dropdown-menu.scss","../bower_components/foundation-sites/scss/components/_dropdown.scss","../bower_components/foundation-sites/scss/components/_flex.scss","../bower_components/foundation-sites/scss/components/_flex-video.scss","../bower_components/foundation-sites/scss/components/_label.scss","../bower_components/foundation-sites/scss/components/_media-object.scss","../bower_components/foundation-sites/scss/components/_menu.scss","../bower_components/foundation-sites/scss/components/_menu-icon.scss","../bower_components/foundation-sites/scss/components/_off-canvas.scss","../bower_components/foundation-sites/scss/components/_orbit.scss","../bower_components/foundation-sites/scss/components/_pagination.scss","../bower_components/foundation-sites/scss/components/_progress-bar.scss","../bower_components/foundation-sites/scss/components/_reveal.scss","../bower_components/foundation-sites/scss/components/_slider.scss","../bower_components/foundation-sites/scss/components/_sticky.scss","../bower_components/foundation-sites/scss/components/_switch.scss","../bower_components/foundation-sites/scss/components/_table.scss","../bower_components/foundation-sites/scss/components/_tabs.scss","../bower_components/foundation-sites/scss/components/_title-bar.scss","../bower_components/foundation-sites/scss/components/_top-bar.scss","../bower_components/foundation-sites/scss/components/_thumbnail.scss","../bower_components/foundation-sites/scss/components/_tooltip.scss","../bower_components/motion-ui/src/motion-ui.scss","../bower_components/motion-ui/src/_settings.scss","../bower_components/motion-ui/src/util/_animation.scss","../bower_components/motion-ui/src/util/_args.scss","../bower_components/motion-ui/src/util/_keyframe.scss","../bower_components/motion-ui/src/util/_selector.scss","../bower_components/motion-ui/src/util/_series.scss","../bower_components/motion-ui/src/util/_transition.scss","../bower_components/motion-ui/src/util/_unit.scss","../bower_components/motion-ui/src/effects/_fade.scss","../bower_components/motion-ui/src/effects/_hinge.scss","../bower_components/motion-ui/src/effects/_spin.scss","../bower_components/motion-ui/src/effects/_zoom.scss","../bower_components/motion-ui/src/effects/_shake.scss","../bower_components/motion-ui/src/effects/_slide.scss","../bower_components/motion-ui/src/effects/_wiggle.scss","../bower_components/motion-ui/src/transitions/_fade.scss","../bower_components/motion-ui/src/transitions/_hinge.scss","../bower_components/motion-ui/src/transitions/_zoom.scss","../bower_components/motion-ui/src/transitions/_slide.scss","../bower_components/motion-ui/src/transitions/_spin.scss","../bower_components/motion-ui/src/_classes.scss","_mixins.scss","mixins/_gradient.scss","mixins/_off-canvas-arrow.scss","_wordpress.scss","_defaults.scss","_body.scss","_page.header.scss","_topbar.scss","_main.scss","_slideshow.scss","_plugins.scss","plugins/_nextgen.scss","plugins/_gravityForms.scss","plugins/_events.scss","plugins/_woocommerce.scss","plugins/_fullCalendar.scss","_blog.scss","_sidebar.scss","_search.scss","_page.footer.scss","_copyright.scss","_structure.scss","_left-off-canvas.scss"],"sourcesContent":["@charset 'utf-8';\n\n@import 'settings';\n@import 'foundation';\n@import 'motion-ui';\n@import \"mixins\";\n@include foundation-global-styles;\n@include foundation-grid;\n// @include foundation-flex-grid;\n@include foundation-typography;\n@include foundation-button;\n@include foundation-forms;\n// @include foundation-range-input;\n@include foundation-accordion;\n@include foundation-accordion-menu;\n@include foundation-badge;\n@include foundation-breadcrumbs;\n@include foundation-button-group;\n@include foundation-callout;\n@include foundation-close-button;\n@include foundation-menu;\n@include foundation-menu-icon;\n@include foundation-drilldown-menu;\n@include foundation-dropdown;\n@include foundation-dropdown-menu;\n@include foundation-flex-video;\n@include foundation-label;\n@include foundation-media-object;\n@include foundation-off-canvas;\n@include foundation-orbit;\n@include foundation-pagination;\n@include foundation-progress-bar;\n// @include foundation-progress-element;\n// @include foundation-meter-element;\n@include foundation-slider;\n@include foundation-sticky;\n@include foundation-reveal;\n@include foundation-switch;\n@include foundation-table;\n@include foundation-tabs;\n@include foundation-thumbnail;\n@include foundation-title-bar;\n@include foundation-tooltip;\n@include foundation-top-bar;\n@include foundation-visibility-classes;\n@include foundation-float-classes;\n// @include foundation-flex-classes;\n//\n@include motion-ui-transitions;\n@include motion-ui-animations;\n@import \"wordpress\";\n@import \"defaults\";\n@import \"body\";\n@import \"page.header\";\n@import \"topbar\";\n@import \"main\";\n@import \"slideshow\";\n@import \"plugins\";\n@import \"blog\";\n@import \"sidebar\";\n@import \"search\";\n@import \"page.footer\";\n@import \"copyright\";\n@import \"structure\";\n@import \"left-off-canvas\";\n//@import \"right-off-canvas\";\n\n\n","// Foundation for Sites Settings\n// -----------------------------\n//\n// Table of Contents:\n//\n// 1. Global\n// 2. Breakpoints\n// 3. The Grid\n// 4. Base Typography\n// 5. Typography Helpers\n// 6. Abide\n// 7. Accordion\n// 8. Accordion Menu\n// 9. Badge\n// 10. Breadcrumbs\n// 11. Button\n// 12. Button Group\n// 13. Callout\n// 14. Close Button\n// 15. Drilldown\n// 16. Dropdown\n// 17. Dropdown Menu\n// 18. Flex Video\n// 19. Forms\n// 20. Label\n// 21. Media Objectaaaaaaaaaaaaaaaaaaaaaaaa\n// 22. Menu\n// 23. Meter\n// 24. Off-canvas\n// 25. Orbit\n// aaaaaaaaaaaaaaaaaaa26. Pagination\n// 27. Progress Bar\n// 28. Reveal\n// 29. Slider\n// 30. Switch\n// 31. Table\n// 32. Tabs\n// 33. Thumbnail\n// 34. Title Bar\n// 35. Tooltip\n// 36. Top Bar\n\n@import 'util/util';\n\n// 1. Global\n// ---------\n\n$global-font-size: 100%;\n$global-width: rem-calc(1200);\n$global-lineheight: 1.5;\n$foundation-palette: (\n primary: #2199e8,\n secondary: #777,\n success: #3adb76,\n warning: #ffae00,\n alert: #ec5840,\n);\n$light-gray: #e6e6e6;\n$medium-gray: #cacaca;\n$dark-gray: #8a8a8a;\n$black: #0a0a0a;\n$white: #fefefe;\n$white : #FFFFFF;\n$ghost : #FAFAFA;\n$snow : #F9F9F9;\n$vapor : #F6F6F6;\n$white-smoke : #F5F5F5;\n$silver : #EFEFEF;\n$smoke : #EEEEEE;\n$gainsboro : #DDDDDD;\n$iron : #CCCCCC;\n$base : #AAAAAA;\n$aluminum : #999999;\n$jumbo : #888888;\n$monsoon : #777777;\n$steel : #666666;\n$charcoal : #555555;\n$tuatara : #444444;\n$oil : #333333;\n$jet : #222222;\n$black : #000000;\n$green : #5d9c8f;\n$red : #d2222a;\n$d-blue : #131c5f;\n$l-blue : #0093d1;\n$maroon : #924350;\n$gold : #f2bd7d;\n$yellow : #fdfad9;\n\n$body-background: $white;\n$body-font-color: $black;\n$body-font-family: 'Lato', sans-serif;\n$body-antialiased: true;\n$global-margin: 1rem;\n$global-padding: 1rem;\n$global-weight-normal: normal;\n$global-weight-bold: bold;\n$global-radius: 0;\n$global-text-direction: ltr;\n$global-flexbox: false;\n$print-transparent-backgrounds: true;\n\n\n@include add-foundation-colors;\n\n// 2. Breakpoints\n// --------------\n\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n);\n$breakpoint-classes: (small medium large);\n\n// 3. The Grid\n// -----------\n\n$grid-row-width: $global-width;\n$grid-column-count: 12;\n$grid-column-gutter: (\n small: 20px,\n medium: 30px,\n);\n$grid-column-align-edge: true;\n$block-grid-max: 8;\n\n// 4. Base Typography\n// ------------------\n\n$header-font-family: $body-font-family;\n$header-font-weight: $global-weight-normal;\n$header-font-style: normal;\n// We use these to define default font stacks\n$font-family-sans-serif: \"Open Sans\", sans-serif;\n$font-family-serif: Georgia, Cambria, \"Times New Roman\", Times, serif;\n$font-family-monospace: Consolas, \"Liberation Mono\", Courier, monospace;\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;\n$header-sizes: (\n small: (\n 'h1': 30,\n 'h2': 24,\n 'h3': 24,\n 'h4': 24,\n 'h5': 18,\n 'h6': 16,\n ),\n medium: (\n 'h1': 36,\n 'h2': 28,\n 'h3': 28,\n 'h4': 28,\n 'h5': 22,\n 'h6': 20,\n ),\n);\n$header-color: inherit;\n$header-lineheight: 1.4;\n$header-margin-bottom: 0.5rem;\n$header-text-rendering: optimizeLegibility;\n$small-font-size: 80%;\n$header-small-font-color: $medium-gray;\n$paragraph-lineheight: 1.6;\n$paragraph-margin-bottom: 1rem;\n$paragraph-text-rendering: optimizeLegibility;\n$code-color: $black;\n$code-font-family: $font-family-monospace;\n$code-font-weight: $global-weight-normal;\n$code-background: $light-gray;\n$code-border: 1px solid $medium-gray;\n$code-padding: rem-calc(2 5 1);\n$anchor-color: $maroon;\n$anchor-color-hover: $maroon;\n$anchor-text-decoration: underline;\n$anchor-text-decoration-hover: none;\n$hr-width: $global-width;\n$hr-border: 1px solid $medium-gray;\n$hr-margin: rem-calc(20) auto;\n$list-lineheight: $paragraph-lineheight;\n$list-margin-bottom: $paragraph-margin-bottom;\n$list-style-type: disc;\n$list-style-position: outside;\n$list-side-margin: 1.25rem;\n$list-nested-side-margin: 1.25rem;\n$defnlist-margin-bottom: 1rem;\n$defnlist-term-weight: $global-weight-bold;\n$defnlist-term-margin-bottom: 0.3rem;\n$blockquote-color: $dark-gray;\n$blockquote-padding: rem-calc(9 20 0 0);\n$blockquote-border: 0px solid $medium-gray;\n$cite-font-size: rem-calc(13);\n$cite-color: $dark-gray;\n$keystroke-font: $font-family-monospace;\n$keystroke-color: $black;\n$keystroke-background: $light-gray;\n$keystroke-padding: rem-calc(2 4 0);\n$keystroke-radius: $global-radius;\n$abbr-underline: 1px dotted $black;\n\n// 5. Typography Helpers\n// ---------------------\n\n$lead-font-size: $global-font-size * 1.25;\n$lead-lineheight: 1.6;\n$subheader-lineheight: 1.4;\n$subheader-color: $dark-gray;\n$subheader-font-weight: $global-weight-normal;\n$subheader-margin-top: 0.2rem;\n$subheader-margin-bottom: 0.5rem;\n$stat-font-size: 2.5rem;\n\n// 6. Abide\n// --------\n\n$abide-inputs: true;\n$abide-labels: true;\n$input-background-invalid: map-get($foundation-palette, alert);\n$form-label-color-invalid: map-get($foundation-palette, alert);\n$input-error-color: map-get($foundation-palette, alert);\n$input-error-font-size: rem-calc(12);\n$input-error-font-weight: $global-weight-bold;\n\n// 7. Accordion\n// ------------\n\n$accordion-background: $green;\n$accordion-plusminus: false;\n$accordion-item-color: foreground($accordion-background, $yellow);\n$accordion-item-background-hover: $green;\n$accordion-item-padding: 0rem rem-calc(14);\n$accordion-content-background: $green;\n$accordion-content-border: 0px solid $light-gray;\n$accordion-content-color: foreground($accordion-background, $white);\n$accordion-content-padding: 1rem;\n\n// 8. Accordion Menu\n// -----------------\n\n$accordionmenu-arrows: false;\n$accordionmenu-arrow-color: $primary-color;\n\n// 9. Badge\n// --------\n\n$badge-background: $primary-color;\n$badge-color: foreground($badge-background);\n$badge-padding: 0.3em;\n$badge-minwidth: 2.1em;\n$badge-font-size: 0.6rem;\n\n// 10. Breadcrumbs\n// ---------------\n\n$breadcrumbs-margin: 0 0 $global-margin 0;\n$breadcrumbs-item-font-size: rem-calc(11);\n$breadcrumbs-item-color: $black;\n$breadcrumbs-item-color-current: $maroon;\n$breadcrumbs-item-color-disabled: $medium-gray;\n$breadcrumbs-item-margin: 0.75rem;\n$breadcrumbs-item-uppercase: true;\n$breadcrumbs-item-slash: true;\n\n// 11. Button\n// ----------\n\n$button-padding: rem-calc(4) rem-calc(15) rem-calc(8);\n$button-margin: 0 0 $global-margin 0;\n$button-fill: solid;\n$button-background: $white;\n$button-background-hover: $maroon;\n$button-color: $maroon;\n$button-color-alt: $black;\n$button-radius: rem-calc(15);\n$button-sizes: (\n tiny: 0.6rem,\n small: 0.75rem,\n default: 0.9rem,\n large: 1.25rem,\n);\n$button-opacity-disabled: 0.25;\n\n// 12. Button Group\n// ----------------\n\n$buttongroup-margin: 1rem;\n$buttongroup-spacing: 1px;\n$buttongroup-child-selector: '.button';\n$buttongroup-expand-max: 6;\n\n// 13. Callout\n// -----------\n\n$callout-background: $white;\n$callout-background-fade: 85%;\n$callout-border: 1px solid rgba($black, 0.25);\n$callout-margin: 0 0 1rem 0;\n$callout-padding: 1rem;\n$callout-font-color: $body-font-color;\n$callout-font-color-alt: $body-background;\n$callout-radius: $global-radius;\n$callout-link-tint: 30%;\n\n// 14. Close Button\n// ----------------\n\n$closebutton-position: right top;\n$closebutton-offset-horizontal: 1rem;\n$closebutton-offset-vertical: 0.5rem;\n$closebutton-size: 2em;\n$closebutton-lineheight: 1;\n$closebutton-color: $dark-gray;\n$closebutton-color-hover: $black;\n\n// 15. Drilldown\n// -------------\n\n$drilldown-transition: transform 0.15s linear;\n$drilldown-arrows: true;\n$drilldown-arrow-color: $primary-color;\n$drilldown-background: $white;\n\n// 16. Dropdown\n// ------------\n\n$dropdown-padding: 1rem;\n$dropdown-border: 0px solid $medium-gray;\n$dropdown-font-size: rem-calc(18);\n$dropdown-width: 300px;\n$dropdown-radius: $global-radius;\n$dropdown-sizes: (\n tiny: 100px,\n small: 200px,\n large: 400px,\n);\n\n// 17. Dropdown Menu\n// -----------------\n\n$dropdownmenu-arrows: false;\n$dropdownmenu-arrow-color: $anchor-color;\n$dropdownmenu-min-width: 160px;\n$dropdownmenu-background: $green;\n$dropdownmenu-border: 0px solid $medium-gray;\n\n// 18. Flex Video\n// --------------\n\n$flexvideo-margin-bottom: rem-calc(16);\n$flexvideo-ratio: 4 by 3;\n$flexvideo-ratio-widescreen: 16 by 9;\n\n// 19. Forms\n// ---------\n\n$fieldset-border: 1px solid $medium-gray;\n$fieldset-padding: rem-calc(20);\n$fieldset-margin: rem-calc(18 0);\n$legend-padding: rem-calc(0 3);\n$form-spacing: rem-calc(16);\n$helptext-color: $black;\n$helptext-font-size: rem-calc(13);\n$helptext-font-style: italic;\n$input-prefix-color: $black;\n$input-prefix-background: $light-gray;\n$input-prefix-border: 1px solid $medium-gray;\n$input-prefix-padding: 1rem;\n$form-label-color: $black;\n$form-label-font-size: rem-calc(14);\n$form-label-font-weight: $global-weight-normal;\n$form-label-line-height: 1.8;\n$select-background: $white;\n$select-triangle-color: $dark-gray;\n$select-radius: $global-radius;\n$input-color: $black;\n$input-placeholder-color: $medium-gray;\n$input-font-family: inherit;\n$input-font-size: rem-calc(16);\n$input-background: $white;\n$input-background-focus: $white;\n$input-background-disabled: $light-gray;\n$input-border: 1px solid $medium-gray;\n$input-border-focus: 1px solid $dark-gray;\n$input-shadow: inset 0 1px 2px rgba($black, 0.1);\n$input-shadow-focus: 0 0 5px $medium-gray;\n$input-cursor-disabled: default;\n$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;\n$input-number-spinners: true;\n$input-radius: $global-radius;\n\n// 20. Label\n// ---------\n\n$label-background: $primary-color;\n$label-color: foreground($label-background);\n$label-font-size: 0.8rem;\n$label-padding: 0.33333rem 0.5rem;\n$label-radius: $global-radius;\n\n// 21. Media Object\n// ----------------\n\n$mediaobject-margin-bottom: $global-margin;\n$mediaobject-section-padding: $global-padding;\n$mediaobject-image-width-stacked: 100%;\n\n// 22. Menu\n// --------\n\n$menu-margin: 0;\n$menu-margin-nested: 1rem;\n$menu-item-padding: 0.7rem 1rem;\n$menu-item-color-active: $white;\n$menu-item-background-active: map-get($foundation-palette, primary);\n$menu-icon-spacing: 0.25rem;\n\n// 23. Meter\n// ---------\n\n$meter-height: 1rem;\n$meter-radius: $global-radius;\n$meter-background: $medium-gray;\n$meter-fill-good: $success-color;\n$meter-fill-medium: $warning-color;\n$meter-fill-bad: $alert-color;\n\n// 24. Off-canvas\n// --------------\n\n$offcanvas-size: 250px;\n$offcanvas-background: $maroon;\n$offcanvas-zindex: -1;\n$offcanvas-transition-length: 0.5s;\n$offcanvas-transition-timing: ease;\n$offcanvas-fixed-reveal: true;\n$offcanvas-exit-background: rgba($white, 0.25);\n$maincontent-class: 'off-canvas-content';\n$maincontent-shadow: 0 0 10px rgba($black, 0.5);\n\n// 25. Orbit\n// ---------\n\n$orbit-bullet-background: $medium-gray;\n$orbit-bullet-background-active: $dark-gray;\n$orbit-bullet-diameter: 1.2rem;\n$orbit-bullet-margin: 0.1rem;\n$orbit-bullet-margin-top: 0.8rem;\n$orbit-bullet-margin-bottom: 0.8rem;\n$orbit-caption-background: rgba($black, 0.5);\n$orbit-caption-padding: 1rem;\n$orbit-control-background-hover: rgba($black, 0.5);\n$orbit-control-padding: 1rem;\n$orbit-control-zindex: 10;\n\n// 26. Pagination\n// --------------\n\n$pagination-font-size: rem-calc(14);\n$pagination-margin-bottom: $global-margin;\n$pagination-item-color: $black;\n$pagination-item-padding: rem-calc(3 10);\n$pagination-item-spacing: rem-calc(1);\n$pagination-radius: $global-radius;\n$pagination-item-background-hover: $light-gray;\n$pagination-item-background-current: $primary-color;\n$pagination-item-color-current: foreground($pagination-item-background-current);\n$pagination-item-color-disabled: $medium-gray;\n$pagination-ellipsis-color: $black;\n$pagination-mobile-items: false;\n$pagination-arrows: true;\n\n// 27. Progress Bar\n// ----------------\n\n$progress-height: 1rem;\n$progress-background: $medium-gray;\n$progress-margin-bottom: $global-margin;\n$progress-meter-background: $primary-color;\n$progress-radius: $global-radius;\n\n// 28. Reveal\n// ----------\n\n$reveal-background: $white;\n$reveal-width: 600px;\n$reveal-max-width: $global-width;\n$reveal-padding: $global-padding;\n$reveal-border: 1px solid $medium-gray;\n$reveal-radius: $global-radius;\n$reveal-zindex: 1005;\n$reveal-overlay-background: rgba($black, 0.45);\n\n// 29. Slider\n// ----------\n\n$slider-width-vertical: 0.5rem;\n$slider-transition: all 0.2s ease-in-out;\n$slider-height: 0.5rem;\n$slider-background: $light-gray;\n$slider-fill-background: $medium-gray;\n$slider-handle-height: 1.4rem;\n$slider-handle-width: 1.4rem;\n$slider-handle-background: $primary-color;\n$slider-opacity-disabled: 0.25;\n$slider-radius: $global-radius;\n\n// 30. Switch\n// ----------\n\n$switch-background: $medium-gray;\n$switch-background-active: $primary-color;\n$switch-height: 2rem;\n$switch-height-tiny: 1.5rem;\n$switch-height-small: 1.75rem;\n$switch-height-large: 2.5rem;\n$switch-radius: $global-radius;\n$switch-margin: $global-margin;\n$switch-paddle-background: $white;\n$switch-paddle-offset: 0.25rem;\n$switch-paddle-radius: $global-radius;\n$switch-paddle-transition: all 0.25s ease-out;\n\n// 31. Table\n// ---------\n\n$table-background: $white;\n$table-color-scale: 5%;\n$table-border: 1px solid smart-scale($table-background, $table-color-scale);\n$table-padding: rem-calc(8 10 10);\n$table-hover-scale: 2%;\n$table-row-hover: darken($table-background, $table-hover-scale);\n$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);\n$table-striped-background: smart-scale($table-background, $table-color-scale);\n$table-stripe: even;\n$table-head-background: smart-scale($table-background, $table-color-scale / 2);\n$table-foot-background: smart-scale($table-background, $table-color-scale);\n$table-head-font-color: $body-font-color;\n$show-header-for-stacked: false;\n\n// 32. Tabs\n// --------\n\n$tab-margin: 0;\n$tab-background: $white;\n$tab-background-active: $light-gray;\n$tab-item-font-size: rem-calc(12);\n$tab-item-background-hover: $white;\n$tab-item-padding: 1.25rem 1.5rem;\n$tab-expand-max: 6;\n$tab-content-background: $white;\n$tab-content-border: $light-gray;\n$tab-content-color: foreground($tab-background, $primary-color);\n$tab-content-padding: 1rem;\n\n// 33. Thumbnail\n// -------------\n\n$thumbnail-border: solid 4px $white;\n$thumbnail-margin-bottom: $global-margin;\n$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);\n$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);\n$thumbnail-transition: box-shadow 200ms ease-out;\n$thumbnail-radius: $global-radius;\n\n// 34. Title Bar\n// -------------\n\n$titlebar-background: url(../assets/repeating-nav-bkgrd.jpg) repeat-x;\n$titlebar-color: $white;\n$titlebar-padding: 0.5rem;\n$titlebar-text-font-weight: bold;\n$titlebar-icon-color: $white;\n$titlebar-icon-color-hover: $gold;\n$titlebar-icon-spacing: 0.25rem;\n\n// 35. Tooltip\n// -----------\n\n$has-tip-font-weight: $global-weight-bold;\n$has-tip-border-bottom: dotted 1px $dark-gray;\n$tooltip-background-color: $black;\n$tooltip-color: $white;\n$tooltip-padding: 0.75rem;\n$tooltip-font-size: $small-font-size;\n$tooltip-pip-width: 0.75rem;\n$tooltip-pip-height: $tooltip-pip-width * 0.866;\n$tooltip-radius: $global-radius;\n\n// 36. Top Bar\n// -----------\n\n$topbar-padding: 0;\n$topbar-background: transparent;\n$topbar-submenu-background: $green;\n$topbar-title-spacing: 1rem;\n$topbar-input-width: 200px;\n$topbar-unstack-breakpoint: medium;\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'unit';\n@import 'value';\n@import 'color';\n@import 'selector';\n@import 'flex';\n@import 'breakpoint';\n@import 'mixins';\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n// scss-lint:disable ZeroUnit\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Calculate rem if units for $value is not rem\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.\n///\n/// @param {Mixed} $val - Value to check.\n///\n/// @returns {Boolean} `true` if `$val` is not falsey.\n@function has-value($val) {\n @if $val == null or $val == none {\n @return false;\n }\n @if type-of($val) == 'number' and strip-unit($val) == 0 {\n @return false;\n }\n @if type-of($val) == 'list' and length($val) == 0 {\n @return false;\n }\n @return true;\n}\n\n/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.\n///\n/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. \"1em 2em 1em\"\n/// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`.\n///\n/// @returns {Number} A single value based on `$val` and `$side`.\n@function get-side($val, $side) {\n $length: length($val);\n\n @if $length == 1 {\n @return $val;\n }\n @if $length == 2 {\n @return map-get((\n top: nth($val, 1),\n bottom: nth($val, 1),\n left: nth($val, 2),\n right: nth($val, 2),\n ), $side);\n }\n @if $length == 3 {\n @return map-get((\n top: nth($val, 1),\n left: nth($val, 2),\n right: nth($val, 2),\n bottom: nth($val, 3),\n ), $side);\n }\n @if $length == 4 {\n @return map-get((\n top: nth($val, 1),\n right: nth($val, 2),\n bottom: nth($val, 3),\n left: nth($val, 4),\n ), $side);\n }\n}\n\n/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.\n///\n/// @param {List} $val - Border value to find a value in.\n/// @param {Keyword} $elem - Border component to extract.\n///\n/// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border.\n@function get-border-value($val, $elem) {\n // Find the width, style, or color and return it\n @each $v in $val {\n $type: type-of($v);\n @if $elem == width and $type == 'number' {\n @return $v;\n }\n @if $elem == style and $type == 'string' {\n @return $v;\n }\n @if $elem == color and $type == 'color' {\n @return $v;\n }\n }\n\n // Defaults\n $defaults: (\n width: 0,\n style: solid,\n color: #000,\n );\n\n @return map-get($defaults, $elem);\n}\n\n/// Finds a value in a nested map.\n/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps\n///\n/// @param {Map} $map - Map to pull a value from.\n/// @param {String} $keys... - Keys to use when looking for a value.\n/// @returns {Mixed} The value found in the map.\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n $map: map-get($map, $key);\n }\n @return $map;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color.\n///\n/// @param {Color} $color - Color to check the lightness of.\n/// @param {Color} $yes [$black] - Color to return if `$color` is light.\n/// @param {Color} $no [$white] - Color to return if `$color` is dark.\n/// @param {Percentage} $threshold [60%] - Threshold of lightness to check against.\n///\n/// @returns {Color} The $yes color or $no color.\n@function foreground($color, $yes: $black, $no: $white, $threshold: 60%) {\n @if $color == transparent {\n $color: $body-background;\n }\n @if (lightness($color) > $threshold) {\n @return $yes;\n }\n @else {\n @return $no;\n }\n}\n\n/// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Transfers the colors in the `$foundation-palette` variable into the legacy color variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.\n///\n/// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them.\n@function text-inputs($types: ()) {\n $return: ();\n\n $all-types:\n text\n password\n date\n datetime\n datetime-local\n month\n week\n email\n number\n search\n tel\n time\n url\n color;\n\n @if not has-value($types) {\n $types: $all-types;\n }\n\n @each $type in $types {\n $return: append($return, unquote('[type=\\'#{$type}\\']'), comma);\n }\n\n @return $return;\n}\n","$-zf-flex-justify: (\n 'left': flex-start,\n 'right': flex-end,\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n);\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group breakpoints\n////\n\n// scss-lint:disable ZeroUnit\n\n/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.\n/// @type Map\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n) !default;\n\n$-zf-zero-breakpoint: small !default;\n\n@if nth(map-values($breakpoints), 1) != 0 {\n @error 'Your smallest breakpoint (defined in $breakpoints) must be set to \"0\".';\n}\n@else {\n $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);\n}\n\n/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n/// @type List\n$breakpoint-classes: (small medium large) !default;\n\n/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.\n///\n/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.\n@function breakpoint($val: $-zf-zero-breakpoint) {\n // Size or keyword\n $bp: nth($val, 1);\n // Value for max-width media queries\n $bp-max: 0;\n // Direction of media query (up, down, or only)\n $dir: if(length($val) > 1, nth($val, 2), up);\n // Eventual output\n $str: '';\n // Is it a named media query?\n $named: false;\n\n // Orientation media queries have a unique syntax\n @if $bp == 'landscape' or $bp == 'portrait' {\n @return '(orientation: #{$bp})';\n }\n @else if $bp == 'retina' {\n @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';\n }\n\n // Try to pull a named breakpoint out of the $breakpoints map\n @if type-of($bp) == 'string' {\n @if map-has-key($breakpoints, $bp) {\n @if $dir == 'only' or $dir == 'down' {\n $bp-max: -zf-map-next($breakpoints, $bp);\n }\n\n $bp: map-get($breakpoints, $bp);\n $named: true;\n }\n @else {\n $bp: 0;\n @warn 'breakpoint(): \"#{$val}\" is not defined in your $breakpoints setting.';\n }\n }\n\n // Convert any pixel, rem, or unitless value to em\n $bp: -zf-bp-to-em($bp);\n @if $bp-max {\n $bp-max: -zf-bp-to-em($bp-max) - (1/16);\n }\n\n // Conditions to skip media query creation\n // - It's a named breakpoint that resolved to \"0 down\" or \"0 up\"\n // - It's a numeric breakpoint that resolved to \"0 \" + anything\n @if $bp > 0em or $dir == 'only' or $dir == 'down' {\n // `only` ranges use the format `(min-width: n) and (max-width: n)`\n @if $dir == 'only' {\n // Only named media queries can have an \"only\" range\n @if $named == true {\n // Only use \"min-width\" if the floor is greater than 0\n @if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n\n // Only add \"and\" to the media query if there's a ceiling\n @if $bp-max != null {\n $str: $str + ' and ';\n }\n }\n\n // Only use \"max-width\" if there's a ceiling\n @if $bp-max != null {\n $str: $str + '(max-width: #{$bp-max})';\n }\n }\n @else {\n @warn 'breakpoint(): Only named media queries can have an `only` range.';\n }\n }\n\n // `down` ranges use the format `(max-width: n)`\n @else if $dir == 'down' {\n $max: if($named, $bp-max, $bp);\n\n // Skip media query creation if input value is exactly \"0 down\",\n // unless the function was called as \"small down\", in which case it's just \"small only\"\n @if $named or $bp > 0em {\n @if $max != null {\n $str: $str + '(max-width: #{$max})';\n }\n }\n }\n\n // `up` ranges use the format `(min-width: n)`\n @else if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n }\n }\n\n @return $str;\n}\n\n/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:\n/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n/// - If a rem value is passed, the unit will be changed to em.\n/// - If an em value is passed, the value will be used as-is.\n///\n/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.\n///\n/// @output If the breakpoint is \"0px and larger\", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.\n@mixin breakpoint($value) {\n $str: breakpoint($value);\n\n // If $str is still an empty string, no media query is needed\n @if $str == '' {\n @content;\n }\n\n // Otherwise, wrap the content in a media query\n @else {\n @media screen and #{$str} {\n @content;\n }\n }\n}\n\n/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n/// @access private\n///\n/// @param {Map} $map - Map to convert.\n///\n/// @returns {String} A string containing the map's contents.\n@function -zf-bp-serialize($map) {\n $str: '';\n @each $key, $value in $map {\n $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';\n }\n $str: str-slice($str, 1, -2);\n\n @return $str;\n}\n\n/// Find the next key in a map.\n/// @access private\n///\n/// @param {Map} $map - Map to traverse.\n/// @param {Mixed} $key - Key to use as a starting point.\n///\n/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.\n@function -zf-map-next($map, $key) {\n // Store the values of the map as a list, so we can access them with nth\n $values: map-values($map);\n\n // Ghetto for loop\n $i: 1;\n $found: false;\n @each $val in map-keys($map) {\n @if $found == false {\n @if ($key == $val) {\n $found: true;\n }\n $i: $i + 1;\n }\n }\n\n // If the key doesn't exist, or it's the last key in the map, return null\n @if $i > length($map) {\n @return null;\n }\n // Otherwise, return the value\n @else {\n @return nth($values, $i);\n }\n}\n\n/// Get a value for a breakpoint from a responsive config map. If the config map has the key `$value`, the exact breakpoint value is returned. If the config map does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n/// @access private\n///\n/// @param {Map} $map - Input config map.\n/// @param {Keyword} $value - Breakpoint name to use.\n///\n/// @return {Mixed} The corresponding breakpoint value.\n@function -zf-get-bp-val($map, $value) {\n // Check if the breakpoint name exists globally\n @if not map-has-key($breakpoints, $value) {\n @return null;\n }\n // Check if the breakpoint name exists in the local config map\n @else if map-has-key($map, $value) {\n // If it does, just return the value\n @return map-get($map, $value);\n }\n // Otherwise, find the next lowest breakpoint and return that value\n @else {\n $anchor: null;\n $found: false;\n\n @each $key, $val in $breakpoints {\n @if not $found {\n @if map-has-key($map, $key) {\n $anchor: $key;\n }\n @if $key == $value {\n $found: true;\n }\n }\n }\n\n @return map-get($map, $anchor);\n }\n}\n\n// Legacy breakpoint variables\n// These will be removed in 6.3\n$small-up: null;\n$small-only: null;\n$medium-up: null;\n$medium-only: null;\n$large-up: null;\n$large-only: null;\n$xlarge-up: null;\n$xlarge-only: null;\n$xxlarge-up: null;\n$xxlarge-only: null;\n\n@if map-has-key($breakpoints, small) {\n $small-up: screen;\n $small-only: unquote('screen and #{breakpoint(small only)}');\n}\n\n@if map-has-key($breakpoints, medium) {\n $medium-up: unquote('screen and #{breakpoint(medium)}');\n $medium-only: unquote('screen and #{breakpoint(medium only)}');\n}\n\n@if map-has-key($breakpoints, large) {\n $large-up: unquote('screen and #{breakpoint(large)}');\n $large-only: unquote('screen and #{breakpoint(large only)}');\n}\n\n@if map-has-key($breakpoints, xlarge) {\n $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');\n $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');\n}\n\n@if map-has-key($breakpoints, xxlarge) {\n $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.\n///\n/// @param {Number} $triangle-size - Width of the triangle.\n/// @param {Color} $triangle-color - Color of the triangle.\n/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.\n@mixin css-triangle(\n $triangle-size,\n $triangle-color,\n $triangle-direction\n) {\n content: '';\n display: block;\n width: 0;\n height: 0;\n border: inset $triangle-size;\n\n @if ($triangle-direction == down) {\n border-color: $triangle-color transparent transparent;\n border-top-style: solid;\n border-bottom-width: 0;\n }\n @if ($triangle-direction == up) {\n border-color: transparent transparent $triangle-color;\n border-bottom-style: solid;\n border-top-width: 0;\n }\n @if ($triangle-direction == right) {\n border-color: transparent transparent transparent $triangle-color;\n border-left-style: solid;\n border-right-width: 0;\n }\n @if ($triangle-direction == left) {\n border-color: transparent $triangle-color transparent transparent;\n border-right-style: solid;\n border-left-width: 0;\n }\n}\n\n/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing.
\n///\n/// @param {Color} $color [$black] - Color to use for the icon.\n/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.\n/// @param {Number} $width [20px] - Width of the icon.\n/// @param {Number} $height [16px] - Height of the icon.\n/// @param {Number} $weight [2px] - Height of individual bars in the icon.\n/// @param {Number} $bars [3] - Number of bars in the icon.\n@mixin hamburger(\n $color: $black,\n $color-hover: $dark-gray,\n $width: 20px,\n $height: 16px,\n $weight: 2px,\n $bars: 3\n) {\n // box-shadow CSS output\n $shadow: ();\n $hover-shadow: ();\n\n // Spacing between bars is calculated based on the total height of the icon and the weight of each bar\n $spacing: floor(($height - ($weight * $bars)) / ($bars - 1));\n\n // Icon container\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n width: $width;\n height: $height;\n\n // Icon bars\n &::after {\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: $weight;\n background: $color;\n top: 0;\n left: 0;\n\n @for $i from 2 through $bars {\n $offset: ($weight + $spacing) * ($i - 1);\n $shadow: append($shadow, 0 $offset 0 $color, comma);\n }\n\n box-shadow: $shadow;\n }\n\n // Hover state\n @if $color-hover {\n // Generate CSS\n @for $i from 2 through $bars {\n $offset: ($weight + $spacing) * ($i - 1);\n $hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);\n }\n\n &:hover::after {\n background: $color-hover;\n box-shadow: $hover-shadow;\n }\n }\n}\n\n/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.\n/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.\n///\n/// @param {Color} $color [$black] - Color to use for the triangle.\n@mixin background-triangle($color: $black) {\n $rgb: 'rgb%28#{red($color)}, #{green($color)}, #{blue($color)}%29';\n\n background-image: url(\"data:image/svg+xml;utf8,\");\n\n @media screen and (min-width:0\\0) {\n @if lightness($color) < 60% {\n // White triangle\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');\n }\n @else {\n // Black triangle\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');\n }\n }\n}\n\n/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.\n/// The clearfix is augmented with specific styles to prevent borders in flexbox environments\n/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack\n/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix\n@mixin clearfix {\n &::before,\n &::after {\n content: ' ';\n display: table;\n @if $global-flexbox {\n flex-basis: 0;\n order: 1;\n }\n }\n\n &::after {\n clear: both;\n }\n}\n\n/// Adds CSS for a \"quantity query\" selector that automatically sizes elements based on how many there are inside a container.\n/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS\n///\n/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.\n/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.\n@mixin auto-width($max, $elem: li) {\n @for $i from 2 through $max {\n &:nth-last-child(#{$i}):first-child,\n &:nth-last-child(#{$i}):first-child ~ #{$elem} {\n width: percentage(1 / $i);\n }\n }\n}\n\n/// Removes the focus ring around an element when a mouse input is detected.\n@mixin disable-mouse-outline {\n [data-whatinput='mouse'] & {\n outline: 0;\n }\n}\n\n/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.\n/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility\n@mixin element-invisible {\n position: absolute !important;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n}\n\n/// Reverses the CSS output created by the `element-invisible()` mixin.\n@mixin element-invisible-off {\n position: static !important;\n height: auto;\n width: auto;\n overflow: visible;\n clip: auto;\n}\n\n/// Vertically centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin vertical-center {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/// Horizontally centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin horizontal-center {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/// Absolutely centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin absolute-center {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.\n///\n/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.\n@mixin -zf-each-breakpoint($small: true) {\n $map: $breakpoint-classes;\n\n @if not $small {\n $map: map-remove($map, $-zf-zero-breakpoint);\n }\n\n @each $size in $map {\n $-zf-size: $size !global;\n\n @include breakpoint($size) {\n @content;\n }\n }\n}\n","/**\n * Foundation for Sites by ZURB\n * Version 6.2.3\n * foundation.zurb.com\n * Licensed under MIT Open Source\n */\n\n// Sass utilities\n@import 'util/util';\n\n// Global variables and styles\n@import 'global';\n\n// Components\n@import 'grid/grid';\n@import 'typography/typography';\n@import 'forms/forms';\n@import 'components/visibility';\n@import 'components/float';\n@import 'components/button';\n@import 'components/button-group';\n@import 'components/accordion-menu';\n@import 'components/accordion';\n@import 'components/badge';\n@import 'components/breadcrumbs';\n@import 'components/callout';\n@import 'components/close-button';\n@import 'components/drilldown';\n@import 'components/dropdown-menu';\n@import 'components/dropdown';\n@import 'components/flex';\n@import 'components/flex-video';\n@import 'components/label';\n@import 'components/media-object';\n@import 'components/menu';\n@import 'components/menu-icon';\n@import 'components/off-canvas';\n@import 'components/orbit';\n@import 'components/pagination';\n@import 'components/progress-bar';\n@import 'components/reveal';\n@import 'components/slider';\n@import 'components/sticky';\n@import 'components/switch';\n@import 'components/table';\n@import 'components/tabs';\n@import 'components/title-bar';\n@import 'components/top-bar';\n@import 'components/thumbnail';\n@import 'components/tooltip';\n\n@mixin foundation-everything($flex: false) {\n @if $flex {\n $global-flexbox: true !global;\n }\n\n @include foundation-global-styles;\n @if not $flex {\n @include foundation-grid;\n }\n @else {\n @include foundation-flex-grid;\n }\n @include foundation-typography;\n @include foundation-forms;\n @include foundation-button;\n @include foundation-accordion;\n @include foundation-accordion-menu;\n @include foundation-badge;\n @include foundation-breadcrumbs;\n @include foundation-button-group;\n @include foundation-callout;\n @include foundation-close-button;\n @include foundation-menu;\n @include foundation-menu-icon;\n @include foundation-drilldown-menu;\n @include foundation-dropdown;\n @include foundation-dropdown-menu;\n @include foundation-flex-video;\n @include foundation-label;\n @include foundation-media-object;\n @include foundation-off-canvas;\n @include foundation-orbit;\n @include foundation-pagination;\n @include foundation-progress-bar;\n @include foundation-slider;\n @include foundation-sticky;\n @include foundation-reveal;\n @include foundation-switch;\n @include foundation-table;\n @include foundation-tabs;\n @include foundation-thumbnail;\n @include foundation-title-bar;\n @include foundation-tooltip;\n @include foundation-top-bar;\n @include foundation-visibility-classes;\n @include foundation-float-classes;\n\n @if $flex {\n @include foundation-flex-classes;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'unit';\n@import 'value';\n@import 'color';\n@import 'selector';\n@import 'flex';\n@import 'breakpoint';\n@import 'mixins';\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n// scss-lint:disable ColorVariable, QualifyingElement, VendorPrefix\n\n////\n/// @group global\n////\n\n/// Font size attribute applied to `` and ``. We use 100% by default so the value is inherited from the user's browser settings.\n/// @type Number\n$global-font-size: 100% !default;\n\n/// Global width of your site. Used by the grid to determine row width.\n/// @type Number\n$global-width: rem-calc(1200) !default;\n\n/// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px\n/// @type Number\n$global-lineheight: 1.5 !default;\n\n/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.\n/// @type Map\n$foundation-palette: (\n primary: #2199e8,\n secondary: #777,\n success: #3adb76,\n warning: #ffae00,\n alert: #ec5840,\n) !default;\n\n/// Color used for light gray UI items.\n/// @type Color\n$light-gray: #e6e6e6 !default;\n\n/// Color used for medium gray UI items.\n/// @type Color\n$medium-gray: #cacaca !default;\n\n/// Color used for dark gray UI items.\n/// @type Color\n$dark-gray: #8a8a8a !default;\n\n/// Color used for black ui items.\n/// @type Color\n$black: #0a0a0a !default;\n\n/// Color used for white ui items.\n/// @type Color\n$white: #fefefe !default;\n\n/// Background color of the body.\n/// @type Color\n$body-background: $white !default;\n\n/// Text color of the body.\n/// @type Color\n$body-font-color: $black !default;\n\n/// Font stack of the body.\n/// @type List\n$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;\n\n/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.\n/// @type Boolean\n$body-antialiased: true !default;\n\n/// Global value used for margin on components.\n/// @type Number\n$global-margin: 1rem !default;\n\n/// Global value used for padding on components.\n/// @type Number\n$global-padding: 1rem !default;\n\n/// Global font weight used for normal type.\n/// @type Keyword | Number\n$global-weight-normal: normal !default;\n\n/// Global font weight used for bold type.\n/// @type Keyword | Number\n$global-weight-bold: bold !default;\n\n/// Global value used for all elements that have a border radius.\n/// @type Number\n$global-radius: 0 !default;\n\n/// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.\n/// @type Keyword\n$global-text-direction: ltr !default;\n\n/// Enables flexbox for components that support it.\n/// @type Boolean\n$global-flexbox: false !default;\n\n@if not map-has-key($foundation-palette, primary) {\n @error 'In $foundation-palette, you must have a color named \"primary\".';\n}\n\n// Internal variables used for text direction\n$global-left: if($global-text-direction == rtl, right, left);\n$global-right: if($global-text-direction == rtl, left, right);\n\n// Internal variables used for colors\n$primary-color: map-get($foundation-palette, primary);\n$secondary-color: map-get($foundation-palette, secondary);\n$success-color: map-get($foundation-palette, success);\n$warning-color: map-get($foundation-palette, warning);\n$alert-color: map-get($foundation-palette, alert);\n\n// Remove this in 6.3\n$-zf-menu-icon-imported: false;\n$-zf-flex-classes-imported: false;\n\n@mixin foundation-global-styles {\n @include -zf-normalize;\n\n // These styles are applied to a tag, which is read by the Foundation JavaScript\n .foundation-mq {\n font-family: '#{-zf-bp-serialize($breakpoints)}';\n }\n\n html {\n font-size: $global-font-size;\n box-sizing: border-box;\n }\n\n // Set box-sizing globally to handle padding and border widths\n *,\n *::before,\n *::after {\n box-sizing: inherit;\n }\n\n // Default body styles\n body {\n padding: 0;\n margin: 0;\n font-family: $body-font-family;\n font-weight: $global-weight-normal;\n line-height: $global-lineheight;\n color: $body-font-color;\n background: $body-background;\n\n @if ($body-antialiased) {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n }\n\n img {\n // Grid defaults to get images and embeds to work properly\n max-width: 100%;\n height: auto;\n -ms-interpolation-mode: bicubic;\n\n // Get rid of gap under images by making them display: inline-block; by default\n display: inline-block;\n vertical-align: middle;\n }\n\n // Make sure textarea takes on height automatically\n textarea {\n height: auto;\n min-height: 50px;\n border-radius: $global-radius;\n }\n\n // Make select elements are 100% width by default\n select {\n width: 100%;\n border-radius: $global-radius;\n }\n\n // Styles Google Maps and MapQuest embeds properly\n // scss-lint:disable IdSelector\n #map_canvas,\n .map_canvas,\n .mqa-display {\n img,\n embed,\n object {\n max-width: none !important;\n }\n }\n\n // Reset