@charset "UTF-8";
/* ---------------------------------------------------------------------
Lunchbox
This file imports all the shared styles,
as well as the theme color configurations for the default
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Standard Colors
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
BTN Theme Colors
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Primary Theme Colors
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Specific Module
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Original Author: Angela Norlen
Contributors: N/A

Target Browsers: IE10/IE11, Firefox 23.0.x, Safari 6.0.x, Chrome 29.0.x
Media Type: Screen, Projection
Width: All Sizes-no mobile or print
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
RESET CSS (thanks Eric Meyer)
------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

:focus {
  outline: 0; }

/* Always show a vertical scrollbar, even when there is no scrolling */
html {
  overflow-y: scroll; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* ---------------------------------------------------------------------
 HTML5 Block / Inline Block declarations
------------------------------------------------------------------------ */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block; }

/* ---------------------------------------------------------------------
 Form Reset Styles
------------------------------------------------------------------------ */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none; }

input[type=search]::-ms-clear {
  display: none; }

input[type=search] {
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*doc
---
title: Icon Font
name: Icon Font
category: index
---

When using not with one of these classes must declare font family and content: ""; font-family: $ICON_FONT. Icon Font is ICON Moon https://icomoon.io/app/ and selection json file is in this folder so you can add additional icons by uploading this json file.

```html_example
<i class="iconFont_mail"></i>
<i class="iconFont_microphone"></i>
<i class="iconFont_heart"></i>
<i class="iconFont_time"></i>
<i class="iconFont_map-marker"></i>
<i class="iconFont_search"></i>
<i class="iconFont_play"></i>
<i class="iconFont_plus"></i>
<i class="iconFont_minus"></i>
<i class="iconFont_lock"></i>
<i class="iconFont_chevron-left"></i>
<i class="iconFont_chevron-right"></i>
<i class="iconFont_file-pdf"></i>
<i class="iconFont_file-alt"></i>
```
*/
@font-face {
  font-family: 'basic-lunchbox';
  src: url("../../fonts/basic-lunchbox.eot?9opqwp");
  src: url("../../fonts/basic-lunchbox.eot?#iefix9opqwp") format("embedded-opentype"), url("../../fonts/basic-lunchbox.woff?9opqwp") format("woff"), url("../../fonts/basic-lunchbox.ttf?9opqwp") format("truetype"), url("../../fonts/basic-lunchbox.svg?9opqwp#basic-lunchbox") format("svg");
  font-weight: normal;
  font-style: normal; }
[class^="iconFont_"], [class*=" iconFont_"] {
  font-family: 'basic-lunchbox';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.iconFont_mail:before {
  content: "\e610"; }

.iconFont_microphone:before {
  content: "\e600"; }

.iconFont_heart:before {
  content: "\e601"; }

.iconFont_time:before {
  content: "\e602"; }

.iconFont_map-marker:before {
  content: "\e603"; }

.iconFont_search:before {
  content: "\e604"; }

.iconFont_play:before {
  content: "\e605"; }

.iconFont_plus:before {
  content: "\e611"; }

.iconFont_minus:before {
  content: "\e606"; }

.iconFont_lock:before {
  content: "\e607"; }

.iconFont_chevron-left:before {
  content: "\e608"; }

.iconFont_chevron-right:before {
  content: "\e609"; }

.iconFont_file-alt:before {
  content: "\e60c"; }

.iconFont_file-pdf:before {
  content: "\e60d"; }

.iconFont_print:before {
  content: "\e60a"; }

.iconFont_download-alt:before {
  content: "\e60b"; }

.iconFont_ok:before {
  content: "\e60e"; }

.iconFont_comment:before {
  content: "\e60f"; }

.iconFont_downloadArrow:before {
  content: "\e612"; }

/* ---------------------------------------------------------------------
Fonts
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Dimensions used multiple times
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Vendor prefixed properties
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Animation Effects
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Mixins
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Global utility
------------------------------------------------------------------------ */
.isVisuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  clip: rect(1px 1px 1px 1px) !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important; }

.linkProminent {
  font-weight: bold;
  color: #542e4f;
  font-size: 18px;
  line-height: 1.4; }

.linkProminent:active,
.linkProminent:hover {
  color: #75406e; }

.specialCharacter {
  font-family: helvetica, arial, sans-serif; }

.alignBtn {
  line-height: 37px; }

.isItalic {
  font-style: italic; }

.pushAlignBtn {
  margin-top: 10px; }

/* ---------------------------------------------------------------------
 Base Styles
------------------------------------------------------------------------ */
html, body {
  height: 100%; }

body {
  background: #f2f2e9 url("../../../images/exclusive_paper.png") 0 0 repeat;
  font-family: "Cabin", helvetica, arial, sans-serif;
  font-size: 16px;
  color: #585246; }

img {
  max-width: 100%;
  display: block; }

a {
  color: #fc6719;
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease; }

a:active,
a:hover {
  color: #c64603; }

hr {
  background: none;
  border-color: transparent;
  border-top-color: black; }

/* ---------------------------------------------------------------------
Objects needed for Sticky Footer
------------------------------------------------------------------------ */
.page {
  background: url(../../../images/bg-graphic-full.png) center 0 repeat-y;
  min-height: 100%;
  margin-bottom: -192px; }

.page:after {
  content: "";
  display: block;
  height: 192px; }

.header {
  width: 966px;
  position: relative;
  margin: 0 auto;
  padding: 22px 0 0 0;
  margin-bottom: 20px;
  background: url(../../../images/header-graphic.png) center 0 no-repeat; }

.header-utility {
  min-height: 91px; }

.header-utility_caf {
  min-height: 125px; }

.header-utility-nav {
  margin-bottom: 20px;
  overflow: hidden; }

.header-utility-nav-align {
  color: #518542; }

.header-utility-nav-align:hover {
  color: #3c6331; }

.header-utility-nav > li {
  float: left;
  margin-left: 10px; }

.header-utility-nav-align {
  line-height: 38px; }

.header-utility-nav li:last-child:before {
  content: "•";
  color: #518542;
  margin-right: 10px; }

/* ---------------------------------------------------------------------
Logo
------------------------------------------------------------------------ */
.logo {
  position: absolute;
  left: 50%;
  z-index: 2; }

.logo_caf {
  top: 32px;
  width: 190px;
  margin-left: -95px; }

.logo_lunchbox {
  top: 63px;
  width: 228px;
  margin-left: -116px; }

/* ---------------------------------------------------------------------
Primary Nav
------------------------------------------------------------------------ */
.primaryNav {
  width: 966px;
  margin: 0 auto 10px; }

.primaryNav-list {
  display: table;
  width: 100%;
  position: relative; }

.primaryNav-list > li {
  display: table-cell;
  vertical-align: top;
  text-align: center;
  height: 60px; }

.primaryNav-list > li:first-child {
  border-left: none; }

.primaryNav-list > li:first-child a {
  border-left: 0; }

.primaryNav-list > li > a {
  color: #fc6719;
  text-transform: uppercase;
  padding: 0;
  font-size: 15px;
  display: table;
  position: relative;
  height: 60px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.primaryNav-list > li:hover > a {
  border-left-color: transparent;
  background-color: #542e4f;
  color: #ffffff; }

.primaryNav-list > li:hover + li > a,
.primaryNav-list > li > .primaryNav-list-adjacent,
.primaryNav-list > #nav-get-involved > a {
  border-left-color: transparent; }

.primaryNav-list > li > a > span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
  padding: 0 17px; }

.primaryNav-list > li:nth-child(4)#nav-197 > a > span {
  padding-left: 12px;
  padding-right: 12px; }

/*
.primaryNav-list > li > a > span:after {
    content: " ";
    width: 100%;
    height: 8px;
    position: absolute;
    bottom: -4px;
    left: 0;
    background: transparent;
    @include transition(all);
}

.primaryNav-list > li:hover > a > span:after {
    background: $THEME_COLOR_BLOG;
}
*/
.primaryNav-list > li:hover ul {
  left: auto;
  background: #542e4f; }

.primaryNav-list > .primaryNav-list-item_isActive > a,
.primaryNav-list > .parent-primaryNav-list-item_isActive > a {
  color: #542e4f; }

/* CAF side needs some special care, since the layout is so unique */
.primaryNav-list > li {
  display: block;
  float: left; }

.primaryNav-list > li > a {
  display: table;
  width: 100%; }

.primaryNav-list_caf > * {
  width: 13.35403727%; }

.primaryNav-list_caf > *:nth-child(3) {
  margin-right: 192px; }

.primaryNav-list_lunchbox > * {
  width: 12.646652864044%; }

.primaryNav-list_lunchbox > *:nth-child(3) {
  margin-right: 233px; }

/* ---------------------------------------------------------------------
Menu
------------------------------------------------------------------------ */
.primaryNav-list ul {
  background: transparent;
  border-radius: 0 0 3px 3px;
  padding: 20px;
  min-width: 204px;
  position: absolute;
  left: -9999px;
  z-index: 200;
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease; }

.primaryNav-list .level-2 {
  text-align: left; }

.level-2 a {
  display: block;
  color: #ffffff;
  padding: 10px;
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid #75406e; }

.level-2 a:hover {
  background-color: #75406e; }

/* ---------------------------------------------------------------------
Tagline
------------------------------------------------------------------------ */
.tagline {
  height: 20px;
  color: #518542;
  font-size: 18px;
  text-align: center;
  text-indent: -9999px;
  background: url("../../../images/lunchbox/tagline.png") 0 0 no-repeat; }

/* ---------------------------------------------------------------------
Footer
------------------------------------------------------------------------ */
.footer {
  overflow: hidden;
  height: 192px;
  border-top: 1px solid #cecec8;
  background-color: #e3e3da;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 2px 5px #d8d8ce;
  -moz-box-shadow: inset 0 2px 5px #d8d8ce;
  box-shadow: inset 0 2px 5px #d8d8ce; }

.footer-inner {
  padding: 50px 0;
  margin: 0 auto;
  width: 966px; }

.footer-utilityNav {
  overflow: hidden;
  padding: 20px 0; }

.footer-utilityNav > li {
  float: left;
  font-size: 14px;
  font-weight: bold; }

.footer-utilityNav li a:before {
  content: "•";
  margin: 0 7px; }

.footer-utilityNav li:first-child a:before {
  content: "";
  margin: 0; }

.footer-utilityNav a {
  color: #585246;
  display: block; }

.footer-push {
  margin-top: 32px; }

/* ---------------------------------------------------------------------
Footer Copyright
------------------------------------------------------------------------ */
.copyright {
  font-size: 12px; }

/*doc
---
title: Form
name: Form
category: index
---


```html_example

<form>
    <ul class="form-list">
        <li>
            <ul class="blocks blocks_2up">
                <li class="form-error">
                    <label for="contact-fn" class="label label_required">First Name*</label>
                    <input id="contact-fn" type="text" class="input input_txt mix-input_full" />
                    <div class="form-error-message">
                        Error Message text here
                    </div>
                </li>
                <li>
                    <label for="contact-ln" class="label label_required">Last Name*</label>
                    <input id="contact-ln" type="text" class="input input_txt mix-input_full" />
                </li>
            </ul>
        </li>

        <li>
            <ul class="blocks blocks_2up">
                <li>
                    <label for="contact-email" class="label label_required">Email Address*</label>
                    <input id="contact-email" type="email" class="input input_txt mix-input_full" />
                </li>
                <li>
                <li>
                    <label for="contact-phone-area" class="label">Phone Number</label>
                    <ul class="hList hList_sm">
                        <li>
                            <input id="contact-phone-area" type="email" class="input input_txt mix-input_tiny" />
                            <div class="form--listhelp">Area Code</div>
                        </li>
                        <li>
                            <input id="contact-phone-area" type="email" class="input input_txt mix-input_md" />
                            <div class="form-list-help">Phone Number</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</form>

```
*/
.form-list:before, .form-list:after {
  content: "";
  display: table; }
.form-list:after {
  clear: both; }

.form-list > li {
  margin-bottom: 20px; }

.form-list_compact > li {
  margin-bottom: 10px; }

.form-list > .form-list-item_flush {
  margin-bottom: 0; }

.form-list-alignInput {
  margin-top: 12px; }

.form-list-help {
  font-size: 12px;
  margin-top: 3px;
  display: block; }

.form-footnote {
  font-weight: bold; }

.form-actions {
  overflow: hidden; }

.form-actions > * {
  float: right; }

.form-error label {
  color: red; }

.form-error input,
.form-error textarea,
.form-error select,
.form-error .select2-container .select2-choice {
  border-color: red; }

.form-error-message {
  color: red;
  margin-top: 5px;
  font-size: 14px; }

/*doc
---
title: Form Inputs
name: formInputs
category: index
---

Form elements

```html_example

    <ul class="formList">
        <li>
            <label class="label">Form Label</label>
            <input type="text" class="input input_txt" placeholder="Text input" />
        </li>
        <li>
          <label class="label">Small input/100px/.mix-input_sm</label>
            <input type="text" class="input input_txt mix-input_sm"  />
        </li>
        <li>
            <label class="label">Small .mix-input_md <span class="form-note">(Optional)</span></label>
            <input type="text" class="input input_txt mix-input_md"  />
        </li>
        <li class="hasError">
            <label class="label">Small input/440px/.mix-input_lg <span class="form-note">(Optional)</span></label>
            <input type="text" class="input input_txt mix-input_lg"  />
            <div class="error">Fill in this field please</div>
        </li>
    </ul>

    <input type="text" class="input input_txt_adj" placeholder="Text input" />

```
*/
/* ---------------------------------------------------------------------
Form label Styles
------------------------------------------------------------------------ */
.label {
  display: block;
  margin-bottom: 3px; }

.label_required {
  font-weight: bold; }

/* ---------------------------------------------------------------------
Text inputs
------------------------------------------------------------------------ */
.input {
  font-family: "Cabin", helvetica, arial, sans-serif;
  padding: 9px 6px;
  border: 1px solid #ebebe2;
  color: #585246;
  font-size: 14px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease; }

input[type="checkbox"] {
  margin: 0 10px 0 0;
  display: inline-block;
  vertical-align: top; }

select.input {
  height: 39px;
  -webkit-appearance: menulist-button; }

.input_txt {
  border: 1px solid #e3e3da; }

.input_textarea {
  height: 150px; }

.input_textarea_md {
  height: 100px; }

.mix-input_tiny {
  width: 60px; }

.mix-input_sm {
  width: 88px; }

.mix-input_smmd {
  width: 140px; }

.mix-input_md {
  width: 200px; }

.mix-input_lg {
  width: 350px; }

.mix-input_huge {
  width: 425px; }

.input[type="email"] {
  font-family: "Cabin",helvetica, arial, sans-serif; }

.mix-input_full {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%; }

.input:focus {
  background: #ebebe2;
  border-color: #9b8d88; }

input::-webkit-input-placeholder {
  color: #9b9b95; }

input:-moz-placeholder {
  color: #9b9b95; }

input::-ms-clear {
  display: none; }

.hasPlaceholderText {
  color: #9b9b95; }

.donateWidget input#required {
  display: none; }

.dropdown {
  border: 1px solid #ebebe2; }

.dropdown dd,
.dropdown dt {
  margin: 0px;
  padding: 0px; }

.dropdown ul {
  margin: -1px 0 0 0; }

.dropdown dd {
  position: relative; }

.dropdown a,
.dropdown a:visited {
  text-decoration: none;
  outline: none; }

.dropdown dt a {
  color: #585246;
  background-color: #ffffff;
  display: block;
  padding: 8px 20px 5px 10px;
  min-height: 25px;
  line-height: 24px;
  overflow: hidden;
  border: 0;
  width: 272px; }

.dropdown dt a span,
.multiSel span {
  cursor: pointer;
  display: inline-block;
  padding: 0 3px 2px 0; }

.dropdown dd ul {
  background-color: #ffffff;
  border: 1px solid #ebebe2;
  display: none;
  left: 0px;
  padding: 2px 15px 2px 5px;
  position: absolute;
  top: 2px;
  width: 280px;
  list-style: none;
  max-height: 100px;
  overflow: auto; }

.dropdown span.value {
  display: none; }

.dropdown dd ul li {
  padding: 0 3px 2px 0; }

.dropdown dd ul li a {
  padding: 5px;
  display: block; }

.dropdown dd ul li a:hover {
  background-color: #ffffff; }

/*doc
---
title: Accordion
name: Accordion
category: index
---

The accordion module needs a data attribute of data-js-module="accordion" to initialize js.

```html_example
<ul class="accordion js-accordion" data-js-module="accordion">
    <li>
        <div class="accordion-hd js-accordion-hd">
            <div class="accordion-hd-title">Content Header</div>
        </div>
        <div class="accordion-content js-accordion-content">
            Accordion Content
        </div>
    </li>
</ul>

<ul class="accordion js-accordion">
    <li class="accordion_isClosed">
        <div class="accordion-hd  js-accordion-hd">
            <div class="accordion-hd-title">Content Header</div>
        </div>
        <div class="accordion-content js-accordion-content">
            Accordion Content
        </div>
    </li>
</ul>

```
*/
.accordion_spaced {
  margin-bottom: 40px; }

.accordion > li {
  margin-bottom: 10px; }

.accordion-hd {
  padding: 15px 55px 15px 45px;
  border-radius: 2px;
  background: #518542;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.accordion-hd:active, .accordion_isClosed .accordion-hd:active,
.accordion-hd:hover, .accordion_isClosed
.accordion-hd:hover {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
  opacity: 1; }

.accordion-hd-title {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.2; }

.mix-accordion-hd_colorSecondary {
  background: #fc6719; }

.accordion-hd:after {
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  font-family: "basic-lunchbox";
  content: "\e606";
  position: absolute;
  right: 20px;
  top: 14px;
  font-size: 20px;
  font-weight: normal; }

.accordion_isClosed .accordion-hd:after {
  content: "\e611"; }

.accordion_isClosed .accordion-hd {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  /* Netscape */
  -moz-opacity: 0.7;
  /* Safari 1.x */
  -khtml-opacity: 0.7;
  /* Good browsers */
  opacity: 0.7; }

.accordion_isClosed .accordion-content {
  display: none; }

.accordion-content {
  border: 1px solid #dddbd5;
  background: #e6e5df;
  padding: 20px; }

/*doc
---
title: Action Link
name: Action Link
category: index
---


```html_example

<a class="actionLink">Link content </a>
<a class="actionLink"><i class="actionLink-icon"></i>Link content </a>

```
*/
.actionLink,
.vList li > a > span {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .6px;
  padding-right: 5px; }

.actionLink_sm {
  font-size: 13px; }

.actionLink_heavy {
  font-weight: bold; }

.actionLink:after,
.vList li > a > span:after {
  content: " >";
  font-weight: bold; }

.actionLink_back:after {
  content: ""; }

.actionLink_back:before {
  content: "< ";
  font-weight: bold; }

.actionLink-icon {
  margin-right: 10px; }

.mix-actionLink_colorSecondary {
  color: #518542; }

.actionLink_inputSubmit {
  padding: 0;
  margin: 0;
  font-family: "Cabin", helvetica, arial, sans-serif;
  background: none;
  border: none; }

.actionLink_inputSubmit:hover {
  cursor: pointer; }

/*doc
---
title: AJAX Container
name: AJAX Container
category: index
---

Container to fix the height of dynamically loaded content

```html_example
<div class="ajaxContainer">
    AJAX elements here.
</div>
```
*/
.ajaxContainer {
  min-height: 330px; }

.ajaxContainer_md {
  min-height: 270px; }

/*doc
---
title: Blocks
name: blocks
category: index
---

Blocks are used to put content along each other with equal widths and distance between.  Styleguide-box is for the styleguide purposes only and shouldn't be used in production code.

```html_example

    <ul class="blocks">
        <li class="styleguide-box">Block 1</li>
        <li class="styleguide-box">Block 2</li>
    </ul>

    <ul class="blocks blocks_3up">
        <li class="styleguide-box">Block 1</li>
        <li class="styleguide-box">Block 2</li>
        <li class="styleguide-box">Block 3</li>
    </ul>
    <ul class="blocks blocks_4up">
        <li class="styleguide-box">Block 1</li>
        <li class="styleguide-box">Block 2</li>
        <li class="styleguide-box">Block 3</li>
        <li class="styleguide-box">Block 4</li>
    </ul>


```
*/
/* ---------------------------------------------------------------------
 Blocks
------------------------------------------------------------------------ */
.blocks {
  margin-left: -3%; }
  .blocks:before, .blocks:after {
    content: "";
    display: table; }
  .blocks:after {
    clear: both; }

.blocks > * {
  float: left;
  width: 47%; }

.blocks > * {
  margin-left: 3%; }

.mix-blocks_variableHeight > * {
  vertical-align: top;
  margin: 0 -4px 15px 3%;
  display: inline-block;
  float: none; }

/* ---------------------------------------------------------------------
 Blocks (3 up)
------------------------------------------------------------------------ */
.blocks_3up > * {
  width: 30.333%; }

/* ---------------------------------------------------------------------
 Blocks (4 up)
------------------------------------------------------------------------ */
.blocks_4up > * {
  width: 22%; }

/* ---------------------------------------------------------------------
 Blocks (Multi Row)
------------------------------------------------------------------------ */
.blocks_multiRow > * {
  margin-bottom: 20px; }

/*doc
---
title: Box
name: Box
category: index
---

A box is used for a lot of content modules to offset the content from the background.  A darker mixin is available for layering on top.

```html_example

<div class="box"> This is a normal box</div>
<div class="box mix-box_dark"> This is a box that is a little darker </div>

<div class="box box_spaced">
    <h2 class="hdg hdg_2 mix-hdg_md">Home Recipes</h2>
    <div class="box-bd">
        <p>Intro statement about healthy eating starting at home. Lorem ipsum
            dolor sit amet, Lorem ipsum dolor sit amet,</p>
    </div>
        <ul class="vList">
            <li>
                <a href="#" class="media">
                    <div class="media-img">
                        <img src="https://placehold.it/192x100" alt=""/>
                    </div>
                    <div class="media-bd">
                        Asian Glazed Salmon Rolls With Grilled Veggie Polenta
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="media">
                    <div class="media-img">
                        <img src="https://placehold.it/192x100" alt=""/>
                    </div>
                    <div class="media-bd">
                        Free Range Chicken Tacos and Corn and Apple Salsa
                    </div>
                </a>
            </li>
        </ul>
    <div class="box-ft">
        <a class="btn mix-btn_chunky" href="#">Explore Recipes</a>
    </div>
</div> <!-- end .box -->

<div class="box box_spaced">
    <h2 class="hdg hdg_2 mix-hdg_md">Get Involved</h2>
    <h3 class="hdg hdg_5 mix-hdg_blog mix-hdg_sm">Join Chef Ann and "Do One thing"</h3>
    <div class="box-bd">
        <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit...
            <a href="#">Read More</a></p>
    </div>
    <a class="btn mix-btn_chunky" href="#">Get Started</a>
</div> <!-- end .box -->

<div class="box box_spaced">
    <h2 class="hdg hdg_2 mix-hdg_md">Toolkit</h2>
    <div class="box-bd">
        <p>Copy about the tooklit being a step-by-step guide to creating change in schools. gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.</p>
    </div>
    <div class="blocks">
        <ul class="linkList">
            <li><a href="#">Common Arguments &amp; Responses </a></li>
            <li><a href="#">List of Stakeholders and How to Engage Them </a></li>
            <li><a href="#">Letter Templates </a></li>
        </ul>
        <ul class="linkList">
            <li><a href="#">Educational Curriculum</a></li>
            <li><a href="#">In-School Activity Guide</a></li>
            <li><a href="#">Customizable Marketing Material</a></li>
        </ul>
    </div>

    <a class="btn mix-btn_chunky" href="#">Explore Tools</a>
</div> <!--end .box -->

```
*/
.box {
  background: url(../../../images/bg-paper.png) 0 0 no-repeat;
  background-size: 100% 100%;
  padding: 25px; }

.mix-box_gold {
  background: #ffc627; }

.box_inset {
  padding: 25px;
  background: #e8e5e1; }

.box_spaced {
  margin-bottom: 40px; }

.box_spacedSm {
  margin-bottom: 25px; }

.box_smallPadBottom {
  padding-bottom: 10px; }

.box-hd {
  margin-bottom: 20px; }

.box-hd_smallMarBottom {
  margin-bottom: 10px; }

.box-bd {
  margin-bottom: 20px;
  line-height: 1.5; }

.box-bd p > a {
  text-decoration: underline; }

.box-ft {
  overflow: hidden; }

.box-ft-action {
  text-align: right; }

.mix-box_dark {
  background: #dcdad5;
  background: rgba(220, 218, 213, 0.6); }

/*doc
---
title: Breadcrumbs
name: Breadcrumbs
category: index
---


```html_example

<ol class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li class="breadcrumbs_isActive">For Parents</li>
</ol>

```
*/
.breadcrumbs {
  overflow: hidden;
  margin-bottom: 25px;
  border-top: 1px solid #deddd1;
  border-bottom: 1px solid #deddd1; }

.breadcrumbs > li {
  float: left;
  margin: 6px 0;
  font-size: 12px;
  font-weight: 600; }

.breadcrumbs > li + li {
  border-left: 1px solid #deddd1; }

.breadcrumbs > li > a {
  padding: 3px 10px;
  display: block; }

.breadcrumbs > .last {
  padding: 3px 0 3px 10px; }

/*doc
---
title: Btn
name: btn
category: index
---

Below are the standard button used on the site.  Add btn_full class to a btn will change it to occupy 100% of its container.
 Green buttons are used for form submission. Orange buttons are your standard action buttons
```html_example

<ul class="vList">
    <li><a href="#" class="btn">Standard Button</a></li>
    <li><a href="#" class="btn btn_secondary">Secondary Button</a></li>
    <li><a href="#" class="btn mix-btn_chunky">Chunky Button</a></li>
    <li><a href="#" class="btn btn_form ">Form Button</a></li>
    <li><a class="btn btn_donate btn_secondary" href="#"><span class="btn-icon iconFont_heart"></span>Donate</a></li>
</ul>

```
*/
/* ---------------------------------------------------------------------
 Standard Buttons
------------------------------------------------------------------------ */
button {
  margin: 0;
  border: none;
  cursor: pointer; }

.btn {
  border-radius: 2px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  padding: 10px 14px;
  background-color: #542e4f;
  border-bottom: 3px solid #120a11;
  border-top: none;
  border-left: none;
  border-right: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  line-height: 1; }

.btn:hover,
.btn:active {
  color: #ffffff;
  border-bottom-color: transparent;
  background-color: #75406e; }

/* ---------------------------------------------------------------------
Btn Secondary
------------------------------------------------------------------------ */
.btn_secondary {
  background: #fc6719;
  border-bottom: 3px solid #ad3d02; }

.btn_secondary:hover {
  background-color: #df4f03; }

/* ---------------------------------------------------------------------
Form Button
------------------------------------------------------------------------ */
.btn_form {
  background: #518542;
  border-bottom-color: #3c6331; }

.btn_form:hover,
.btn_form:active {
  background-color: #3c6331; }

/* ---------------------------------------------------------------------
Chunky Btn
------------------------------------------------------------------------ */
.mix-btn_chunky {
  padding: 16px 20px;
  font-size: 16px; }

.mix-btn_wide {
  min-width: 100px; }

.mix-btn_tall {
  line-height: 1.5714285714; }

/* ---------------------------------------------------------------------
Round Btn
------------------------------------------------------------------------ */
.mix-btn_rounded {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  /* Netscape */
  -moz-opacity: 0.7;
  /* Safari 1.x */
  -khtml-opacity: 0.7;
  /* Good browsers */
  opacity: 0.7;
  padding: 7px 12px 5px 6px;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px; }

.mix-btn_rounded:hover {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
  opacity: 1; }

/* ---------------------------------------------------------------------
Btn Icon
------------------------------------------------------------------------ */
.btn-icon {
  margin-right: 10px;
  font-size: 16px; }

/* ---------------------------------------------------------------------
Btn Link
------------------------------------------------------------------------ */
.btn-link {
  color: #fc6719;
  padding: 0;
  background: none;
  text-transform: none;
  border-bottom: none; }

.btn-link > * {
  vertical-align: middle; }

/* ---------------------------------------------------------------------
Btn Tweet
------------------------------------------------------------------------ */
.btn-tweet {
  width: 75px;
  height: 26px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  text-indent: -9999px;
  background: url(../../../images/tweet-button.png) no-repeat 0 0;
  border-top: none;
  border-left: none;
  border-right: none;
  line-height: 1; }

/*doc
---
title: Callout
name: Callout
category: index
---

callout Content is used in sidebars and at the bottom of pages.  Put an equalize class (mix-callout_equalize) on them if they all need equal heights. There are different extension classes added to make the callout module purple or green. Orange is default.

```html_example
    <ul class="blocks blocks_3up">
        <li>
            <div class="callout callout_community mix-callout_equalize">
                <div class="callout-hd">
                    <h2 class="callout-hd-title">Get Involved</h2>
                </div>
                <div class="callout-media">
                    <div class="callout-media">
                        <img src="https://placehold.it/293x145" alt="" />
                    </div>
                </div>
                <div class="callout-bd">
                    <ul class="vList">
                        <li>
                            <a href="#" class="actionLink">For Parents </a>
                        </li>
                        <li>
                            <a href="#" class="actionLink">Apply for a Grant </a>
                        </li>
                        <li>
                            <a href="#" class="actionLink">Get Active in Your Community </a>
                        </li>
                        <li>
                            <a href="#" class="actionLink">Donate </a>
                        </li>
                    </ul>
                </div>
            </div> <!--end .callout -->
        </li>
        <li>
            <div class="callout callout_blog mix-callout_equalize">
                <div class="callout-hd">
                    <h2 class="callout-hd-title">From the Blog</h2>
                </div>
                <div class="callout-media">
                    <img src="https://placehold.it/293x145" alt="" />
                </div>
                <div class="callout-bd">
                    <h3 class="callout-bd-hd">Vesmmttttibulum Id Ligula Porta Felis Euismod Semper</h3>
                    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper...</p>
                </div>
                <div class="callout-ft">
                    <a href="#" class="actionLink">Visit the Blog</a>
                </div>
            </div> <!--end .callout -->
        </li>
        <li>
            <div class="callout mix-callout_equalize">
                <div class="callout-hd">
                    <h2 class="callout-hd-title">News + Media</h2>
                </div>
                <div class="callout-media">
                    <div class="video">
                        <a class="video-img" href="#">
                            <img src="https://placehold.it/293x145" alt="" />
                        </a>
                        <div class="video-overlay">
                            <div class="video-overlay-title">
                               Video Title Here
                            </div>
                        </div>
                    </div>
                </div>
                <div class="callout-bd">
                    <p>Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Cras lacinia augue.</p>
                </div>
                <div class="callout-ft">
                    <a href="#" class="actionLink">View All</a>
                </div>
            </div> <!--end .callout -->
        </li>
    </ul>

    <div class="callout callout_isFilled">
        <div class="callout-hd">
            <h2 class="callout-hd-title">Chef Ann on Facebook</h2>
        </div>
        <div class="callout-bd">
            <p>Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Cras lacinia augue.</p>
        </div>
    </div> <!--end .callout -->

```
*/
.callout {
  position: relative;
  margin-bottom: 30px;
  border-bottom: 4px solid #fc6719; }

.mix-callout_pFlushBottom {
  margin-bottom: 0; }

.mix-callout_equalize {
  height: 415px; }

.mix-callout_video {
  width: 302px;
  float: right; }

.callout-hd {
  padding: 10px;
  background-color: #fc6719; }

.callout-hd-title {
  color: #ffffff;
  font-size: 24px; }

.callout-sideImg {
  padding: 18px 0; }

.callout-bd {
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 0 20px; }

.mix-callout-bd_nofooter {
  padding-bottom: 0px; }

.callout-bd-media {
  padding-top: 20px; }

.callout-bd-hd {
  font-size: 18px;
  line-height: 1.4; }

.callout-bd-ft {
  margin-top: 10px;
  text-align: right; }

.callout-bd-ft_flat {
  margin-top: 0; }

.callout-ft {
  margin-top: 10px;
  text-align: right;
  position: absolute;
  bottom: 10px;
  right: 0; }

.callout_isFilled .callout-bd {
  padding: 25px;
  line-height: 1.2;
  background-color: #e9e8e3;
  background-color: rgba(233, 232, 227, 0.6); }

.callout_isFilled .callout-bd_compact {
  padding-top: 15px; }

.callout_isFilled .callout-hd {
  padding: 14px 14px 14px 25px; }

.callout_isFilled .callout-hd-title {
  text-transform: uppercase;
  font-size: 16px; }

.callout_isFilled .callout-media {
  background-color: #e9e8e3;
  background-color: rgba(233, 232, 227, 0.6); }

.callout_isFilled {
  border-bottom-color: #518542; }

.callout_isFilled .callout-hd {
  background-color: #518542; }

.callout_blog {
  border-bottom-color: #542e4f; }

.callout_blog .callout-hd {
  background-color: #542e4f; }

.callout_blog .callout-bd-hd a {
  color: #542e4f; }

.callout_blog .callout-bd-hd a:hover {
  color: #75406e; }

.callout_community {
  border-bottom-color: #518542; }

.callout_community .callout-hd {
  background-color: #518542; }

.callout_community .callout-bd-hd a {
  color: #518542; }

.callout_isFilled .mix-callout-bd_padNarrow {
  padding: 15px; }

.mix-callout-hd-title_titleCase,
.callout_isFilled .mix-callout-hd-title_titleCase {
  text-transform: none; }

.calloutStacked {
  clear: both;
  float: none;
  margin-left: -2%; }

.calloutStacked > * {
  width: 470px; }

/*doc
---
title: Caption
name: Caption
category: index
---

Captions are used under modal media content.

```html_example


```
*/
.caption {
  padding-top: 30px;
  font-size: 14px;
  line-height: 1.6; }

.caption p + p {
  margin-top: 20px; }

/*doc
---
title: Carousel
name: Carousel
category: index
---


```html_example
<div class="carousel">
    <ul class="carousel-slides">
        <li class="carousel-slides-slide">
            <img src="https://placehold.it/966x400" alt=""/>
            <div class="carousel-slides-slide-overlay">
                <h2 class="carousel-slides-slide-overlay-title">Join Chef Ann in the School Food Fight!</h2>
                <div class="carousel-slides-slide-overlay-bd">
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
                </div>
                <a href="#" class="btn btn_secondary mix-btn_chunky">Learn More</a>
            </div>
        </li>
    </ul>
    <div class="carousel-nav">
        <ul class="carousel-nav-list">
            <li><a href="#">Slide 1</a></li>
            <li><a href="#">Slide 2</a></li>
            <li><a href="#">Slide 3</a></li>
            <li><a href="#">Slide 4</a></li>
        </ul>
    </div>
</div>

```
*/
.carousel {
  margin-bottom: 30px; }

.carousel-slides {
  position: relative;
  margin-bottom: 10px; }

.carousel-slides > li {
  position: relative;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease; }

.carousel-slides > .isActive {
  opacity: 1;
  left: 0;
  z-index: 10; }

.carousel-nav {
  text-align: center; }

.carousel-nav_overlay {
  position: absolute;
  top: 13px;
  right: 15px;
  z-index: 10; }

.carousel-nav-list {
  display: inline-block;
  overflow: hidden; }

.carousel-nav-list > li {
  float: left; }

.carousel-nav-list a {
  cursor: pointer;
  width: 18px;
  height: 18px;
  text-indent: -9999px;
  display: block;
  background: url(../../../images/master-sprite.png) -25px 0 no-repeat; }

.carousel-nav-list > li > a:hover,
.carousel-nav-list_isActive a {
  background-position: 0 0; }

.carousel-nav-list > li + li {
  margin-left: 10px; }

.content {
  margin-bottom: 60px; }

/*doc
---
title: Date
name: Date
category: index
---


```html_example

    <div class="date">
        <div class="date-month">Jan</div>
        <div class="date-day">19</div>
    </div>
```
*/
.date {
  color: #ffffff;
  background: #542e4f;
  width: 55px;
  height: 77px;
  text-align: center; }

.date-month {
  font-size: 14px;
  text-transform: uppercase;
  background-color: #66456b;
  padding: 5px; }

.date-inner-month {
  font-size: 14px;
  text-transform: uppercase; }

.date-day {
  padding: 3px;
  font-size: 28px;
  font-weight: 500; }

.date-year {
  font-size: 14px;
  text-transform: uppercase;
  padding: 0 5px 5px; }

/*doc
---
title: Donate Widget
name: donateWidget
category: index
---

Below are the styles that comprise the Donate Widget that sits on the right of the design and acts as a drawer.
```html_example

<div class="donateWidget js-widgetDonate">
    <div class="donateWidget-hd">
        <h2 class="donateWidget-hd-hdg">Help Lunchbox!</h2>
    </div>
    <div class="donateWidget-bd">
        <div class="donateWidget-bd-preamble">
            <p>By providing your information, you will help Chef Ann’s Lunchbox & Chef Ann Foundation gather support from investors and donors.</p>
        </div>
        <div class="media">
            <div class="media-img media-img_thinGutter">
                <div class="video">
                    <div class="video-img">
                        <img src="../images/uploads/home-video-mission.jpg" width="260" alt="">
                    </div>
                    <a href="#" class="video-overlay">
                        <div class="video-overlay-play">
                            <div class="video-overlay-play-icon"></div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="media-bd">
                <form action="#">
                    <fieldset>
                        <ul class="vList vList_sm">
                            <li>
                                <label for="donate-name" class="isVisuallyHidden">Your Name</label>
                                <input type="text" id="donate-name" class="input input_text mix-input_full" placeholder="Your Name">
                            </li>
                            <li>
                                <label for="donate-email" class="isVisuallyHidden">Email Address</label>
                                <input type="email" id="donate-email" class="input input_text mix-input_full" placeholder="Email Address">
                            </li>
                            <li>
                                <label for="donate-district" class="isVisuallyHidden">School District</label>
                                <input type="email" id="donate-district" class="input input_text mix-input_full" placeholder="School District">
                            </li>
                        </ul>
                    </fieldset>
                </form>
            </div>
        </div> <!--end .media -->
    </div>
    <div class="donateWidget-ft">
        <a href="#" class="actionLink mix-actionLink_colorSecondary">Support Us</a>
    </div>
</div> <!--end .donateWidget -->

```
*/
.donateWidget {
  width: 607px;
  height: 400px;
  overflow: hidden;
  position: fixed;
  right: -557px;
  top: 200px;
  z-index: 200;
  background-color: #ffffff;
  border-radius: 2px 0 0 2px;
  -moz-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: right 0.3s ease;
  -moz-transition: right 0.3s ease;
  transition: right 0.3s ease; }

.donateWidget.expanded {
  right: 0; }

.donateWidget-hd {
  cursor: pointer;
  width: 50px;
  padding: 10px;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
  border-left: 2px solid #3c6331;
  border-radius: 2px 0 0 2px;
  font-size: 0;
  background-color: #518542;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.donateWidget-hd:hover {
  border-color: transparent;
  background: #66a753; }

.donateWidget-bd {
  width: 487px;
  padding: 15px 55px 10px 10px;
  font-size: 0;
  display: inline-block;
  vertical-align: top; }

.donateWidget-ft {
  margin-top: 10px;
  text-align: right;
  position: absolute;
  bottom: 10px;
  right: 0; }

.donateWidget-bd-preamble {
  padding-bottom: 10px;
  line-height: 1.4;
  font-size: 14px; }

.donateWidget-bd-ft {
  text-align: right; }

.donateWidget-hd-hdg {
  height: 400px;
  display: block;
  overflow: hidden;
  background: url(../../../images/lunchbox/donate-widget-toggle-text-closed.png) center center no-repeat;
  border: 0;
  direction: ltr;
  text-align: left;
  text-indent: -999em;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  transition: background 0.3s ease; }

.expanded .donateWidget-hd-hdg {
  background-image: url(../../../images/lunchbox/donate-widget-toggle-text-open.png); }

/*doc
---
title: Event
name: Event
category: index
---


```html_example
<div class="event">
    <div class="media">
        <div class="media-img">
            <div class="date">
                <div class="date-month">Jan</div>
                <div class="date-day">19</div>
            </div>
        </div>
        <div class="media-bd">
            <div class="event-bd">
                <h3 class="hdg hdg_5 mix-hdg_blog mix-hdg_tiny">Suspendisse Commodo Massa</h3>
                <p>Praesent ultriciev tellus tincidunt laoreet. Duis mauris erat, iaculis malesuada dignissim.</p>
            </div>
        </div>
    </div>
    <ul class="event-info">
        <li class="event-info-time">10:30 am</li>
        <li class="event-info-location">Minneapolis, MN</li>
    </ul>
    <div class="event-ft">
        <a href="#" class="actionLink">View all Upcoming Events </a>
    </div>
</div>

<div class="event">
    <div class="media">
        <div class="media-img">
            <div class="date">
                <div class="date-month">Jan</div>
                <div class="date-day">19</div>
            </div>
        </div>
        <div class="media-bd">
            <div class="event-bd">
                <h3 class="hdg hdg_5 mix-hdg_blog mix-hdg_tiny">Suspendisse Commodo Massa</h3>
                <p>Praesent ultriciev tellus tincidunt laoreet. Duis mauris erat, iaculis malesuada dignissim.</p>
            </div>
            <ul class="event-info">
                <li class="event-info-time">10:30 am</li>
                <li class="event-info-location">Minneapolis, MN</li>
            </ul>
        </div>
    </div>
</div>
```
*/
.event-return {
  margin-bottom: 20px;
  font-weight: bold;
  display: block; }

.event-return:before {
  font-family: "basic-lunchbox";
  content: "\e608";
  padding-right: 10px;
  font-size: 14px; }

.event-bd {
  line-height: 1.4;
  font-size: 14px;
  margin-bottom: 15px; }

.event-ft {
  text-align: right; }

.event-ft {
  text-align: right; }

.event-info {
  color: #542e4f;
  overflow: hidden;
  margin-bottom: 15px;
  font-size: 14px; }

.event-info > li {
  float: left; }

.event-info > li + li {
  margin-left: 10px; }

.event-info > li:before {
  font-family: "basic-lunchbox";
  margin-right: 5px;
  font-size: 16px; }

.event-info-time:before {
  content: "\e602"; }

.event-info-location:before {
  content: "\e603"; }

.event-info-private:before {
  content: "\e607"; }

/*doc
---
title: Filters
name: Filters
category: index
---

For small label filter pairings.

```html_example
    <div class="filters">
        <ul class="hList hList_md">
            <li>
                <label for="media-type" class="filters-label">Media Type:</label>
                <select name="" id="media-type">
                    <option value="">All</option>
                    <option value="">Video</option>
                    <option value="">Image</option>
                    <option value="">Powerpoint</option>
                </select>
            </li>
            <li>
                <label for="media-topic" class="filters-label">Select a Topic:</label>
                <select name="" id="media-topic">
                    <option value="">All</option>
                    <option value="">Some Other topic</option>
                </select>
            </li>
        </ul>
    </div>

```
*/
.filters-label {
  font-weight: bold;
  margin-right: 5px;
  display: inline-block; }

.filter-separator {
  border-bottom:1px solid #deddd1; }

.filter-separatorLink {
  font-size:12px; }

/*doc
---
title: Grid
name: Grid
category: index
---

Grid example.  No other classes should be placed on the grid object.  It should be used for layout only. The Grid was based on a 16 col, 40px gutter, 23 px col.

Needs grid-col base class on each item but removed for styleguide so they don't float.

```html_example

    <div class="grid">
        <div class="grid-col_1of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_2of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_3of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_4of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class=" grid-col_5of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_6of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
       <div class="grid-col_7of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_8of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_9of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_10of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class=" grid-col_11of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_12of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_13of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class=" grid-col_14of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
        <div class="grid-col_15of16" style="background: #ececec; height: 100px; margin-bottom: 20px;"></div>
    </div>


```
*/
/*

Gutter - 40px
Grid - 16 col
Columns = 23px
Margins -  0

*/
.grid:before, .grid:after {
  content: "";
  display: table; }
.grid:after {
  clear: both; }

.grid-col {
  float: left; }

.grid-col_right {
  float: right; }

.grid-col + .grid-col {
  margin-left: 4.1322314049587%; }

.grid-col_1of16 {
  width: 2.3760330578512%; }

.grid-col_2of16 {
  width: 8.8842975206612%; }

.grid-col_3of16 {
  width: 15.392561983471%; }

.grid-col_4of16 {
  width: 21.900826446281%; }

.grid-col_5of16 {
  width: 28.409090909091%; }

.grid-col_6of16 {
  width: 34.917355371901%; }

.grid-col_7of16 {
  width: 41.425619834711%; }

.grid-col_8of16 {
  width: 47.933884297521%; }

.grid-col_9of16 {
  width: 54.442148760331%; }

.grid-col_10of16 {
  width: 60.950413223141%; }

.grid-col_11of16 {
  width: 67.45867768595%; }

.grid-col_12of16 {
  width: 73.96694214876%; }

.grid-col_13of16 {
  width: 80.47520661157%; }

.grid-col_14of16 {
  width: 86.98347107438%; }

.grid-col_15of16 {
  width: 93.49173553719%; }

.grid-col_16of16 {
  width: 100%; }

/*doc
---
title: Headings
name: headings
category: index
---

These are the standard headings used throughout the site. The numbering does not determine which heading level it should be applied to. That should be determined by the doc outline. Each heading can have one of three standard mix-in classes to add margin-bottom if needed: mix-hdg_sm, mix_hdg_md, mix_hdg_lg which give 10, 15, 25px space underneath.

Headings should be caps when they are topic or section headers and might be lowercase in some more wysiwyg style instances or when the headings overpower.

```html_example

    <h1 class="hdg hdg_1">Heading 1</h1>
    <h1 class="hdg hdg_2">Heading 2</h1>
    <h1 class="hdg hdg_3">Heading 3</h1>
    <h1 class="hdg hdg_4">Heading 4</h1>
    <h1 class="hdg hdg_5">Heading 5</h1>
    <h1 class="hdg hdg_6">Heading 6</h1>

    <h1 class="hdg hdg_6 mix-hdg_blog">Heading 6</h1>

     <h1 class="hdg hdg_3 mix-hdg_tiny">Heading (5px)</h1>
     <h1 class="hdg hdg_3 mix-hdg_sm">Heading (10px)</h1>
     <h1 class="hdg hdg_3 mix-hdg_md">Heading (15px)</h1>
     <h1 class="hdg hdg_3 mix-hdg_lg">Heading (25px)</h1>

```
*/
/* ---------------------------------------------------------------------
 Headings
------------------------------------------------------------------------ */
.hdg {
  font-weight: 500;
  -webkit-font-smoothing: antialiased; }

.hdg_1 {
  font-size: 36px;
  line-height: 1.1; }

.hdg_2 {
  font-size: 28px;
  line-height: 1.1; }

.hdg_3 {
  font-size: 24px;
  line-height: 1.1; }

.hdg_4 {
  font-size: 18px; }

.hdg_5 {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600; }

.hdg_6 {
  font-size: 14px;
  font-weight: 600; }

.hdg_callout {
  font-size: 19px;
  line-height: 1.1; }

.mix-hdg_normal {
  font-weight: normal; }

.mix-hdg_italic {
  font-style: italic; }

.mix-hgd_light {
  opacity: 0.75; }

.mix-hdg_lower {
  line-height: 1.3;
  text-transform: none; }

.mix-hdg_blog,
.mix-hdg_blog a {
  text-transform: none;
  color: #542e4f; }

.mix-hdg_blog a:hover {
  color: #75406e; }

.mix-hdg_tiny {
  margin-bottom: 5px; }

.mix-hdg_sm {
  margin-bottom: 10px; }

.mix-hdg_md {
  margin-bottom: 20px; }

.mix-hdg_lg {
  margin-bottom: 25px; }

.mix-hdg_black {
  color: #000000; }

/*doc
---
title: Headline
name: Headline
category: index
---


```html_example

<div class="headline">
headline text
</div>
```
*/
.headline {
  padding-bottom: 10px;
  margin-bottom: 25px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #e2e2d8; }

.headline_textOnly {
  padding-top: 4px;
  padding-bottom: 12px; }

.headline-pushLink {
  margin-top: 5px; }

.hero {
  position: relative;
  margin-bottom: 30px; }

.hero-overlay {
  position: absolute;
  right: 35px;
  top: 35px;
  color: #ffffff;
  width: 290px; }

.hero-overlay-title {
  font-size: 44px;
  line-height: 1.2;
  text-transform: uppercase;
  font-family: "Francois One";
  margin-bottom: 14px; }

.hero-overlay-bd {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 30px; }

/*doc
---
title: Horizontal Lists
name:  hList
category: index
---

Horizontal lists are used to space elements horizontally on the page

```html_example

    hList
    <ul class="hList">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <br />
       hList Tiny
     <ul class="hList hList_tiny">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

     <br />
       hList Small
     <ul class="hList hList_sm">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

   <br />
       hList Medium
     <ul class="hList hList_md">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <br />
       hList Large
     <ul class="hList hList_lg">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>
       hList Separated
    <ul class="hList hList_separated">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

```
*/
.hList:before, .hList:after {
  content: "";
  display: table; }
.hList:after {
  clear: both; }

.hList > * {
  float: left; }

.hList_inlineBlock:before,
.hList_inlineBlock:after {
  display: none;
  clear: none; }

.hList_inlineBlock > * {
  display: inline-block;
  float: none; }

.hList_tiny > * + * {
  margin-left: 10px; }

.hList_sm > * + * {
  margin-left: 15px; }

.hList_md > * + * {
  margin-left: 30px; }

.hList_lg > * + * {
  margin-left: 42px; }

.hList_exLg > * + * {
  margin-left: 75px; }

.hList_separated > * + * {
  line-height: 1;
  border-left: 1px solid;
  margin-left: 12px;
  padding-left: 12px; }

.iconLinks {
  overflow: hidden; }

.iconLinks > * {
  float: left; }

.iconLinks > * + * {
  margin-left: 18px; }

.iconLinks a {
  font-size: 12px;
  text-transform: uppercase;
  color: #518542; }

.iconLinks a:hover {
  color: #3c6331; }

/*doc
---
title: Icons
name: Icons
category: index
---


```html_example

<div class="icon icon_print"></div>
<div class="icon icon_comment"></div>
<div class="icon icon_download"></div>

```
*/
.icon:before {
  font-family: "basic-lunchbox";
  content: "";
  margin-right: 10px; }

.icon_print:before {
  content: "\e60a"; }

.icon_comment:before {
  content: "\e60f"; }

.icon_download:before {
  content: "\e60b"; }

.icon_downloadArrow:before {
  content: "\e612";
  font-size: 22px;
  line-height: 20px;
  vertical-align: text-bottom; }

.icon_search:before {
  content: "\e604"; }

.icon_arrow:before {
  content: "\e609"; }

.icon_rss {
  height: 16px;
  width: 16px;
  display: inline-block;
  background-image: url(../../../images/rss-feed-16x16.png);
  background-position: 0px 0px; }

.icon_rss:hover {
  background-position: 0px -16px; }

.icon_rss_lg {
  height: 32px;
  width: 32px;
  background-image: url(../../../images/rss-feed-32x32.png); }

.icon_rss_lg:hover {
  background-position: 0px -32px; }

/*doc
---
title: Info
name: Info
category: index
---


```html_example
        <div class="info">
            <img src="https://placehold.it/127x190" alt=""/>
            <div class="info-bd">
                <div class="info-bd-hd">Bitter Harvest</div>
                <ul class="info-bd-meta">
                    <li>By Ann Cooper</li>
                    <li>Routledge, June 2000</li>
                </ul>
                <p>Nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in e
Sed non  mauris vitae erat consequat auctor eu in elit. Morbi accumsan ipsum velit.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Suspendisse in orci enim.</p>
            </div>
        </div>

```
*/
.info {
  line-height: 1.4; }

.info-media {
  float: left;
  padding: 0 30px 15px 0; }

.info-bd-hd {
  font-weight: bold;
  font-size: 18px; }

.info-bd-meta {
  font-size: 14px;
  margin-bottom: 10px;
  overflow: hidden; }

.info-bd-action {
  margin-bottom: 25px;
  display: block; }

.info-bd-meta > li {
  float: left;
  font-weight: bold;
  line-height: 1.3; }

.info-bd-meta > li + li {
  margin-left: 5px;
  padding-left: 5px;
  border-left: 2px solid; }

/*doc
---
title: Inset
name: Inset
category: index
---

Inset is used to push content inside a box with more padding.

```html_example
<div class="inset">Content has outside padding</div>

<div class="inset inset_noTop">Content has outside padding but no top padding</div>

```
*/
.inset {
  padding: 25px; }

.inset_noTop {
  padding-top: 0; }

.inset_small {
  padding: 10px; }

/*doc
---
title: intro
name: intro
category: index
---


```html_example

    <div class="intro">
        <div class="intro-hd">
            <h1 class="hdg hdg_1">Our Mission</h1>
        </div>

        <div class="intro-bd">
            <img src="../../images/intro-icon.png" class="intro-bd-icon" alt=""/>
            <p>To provide tools that enable all schools, parents, advocates, students, administrators, teachers, and food service staff to progress from serving highly processed, unhealthy food to serving fresh scratch-cooked food.</p>
        </div>
        <div class="intro-ft">
            <ul class="hList hList_sm">
                <li><a class="btn mix-btn_chunky" href="">Learn more about caf</a></li>
                <li><a class="btn mix-btn_chunky" href="">Who is Chef Ann?</a></li>
            </ul>
        </div>
    </div> <!-- end .intro -->
```
*/
.intro_spaced {
  margin-bottom: 15px; }

.intro-hd {
  margin-bottom: 10px; }

.intro-bd {
  overflow: hidden;
  line-height: 1.7;
  font-size: 18px;
  /*margin-bottom: 10px;*/ }

.intro-bd-icon {
  padding: 0 15px 22px 0; }

.intro-bd img {
  float: left; }

.intro-ft_pushTop {
  margin-top: 20px; }

/*doc
---
title: link List
name: Link List
category: index
---


```html_example


```
*/
.linkList {
  margin-bottom: 36px; }

.linkList > li + li {
  margin-top: 12px; }

.linkList a {
  font-size: 14px;
  letter-spacing: .6px; }

.linkList a:after {
  content: " >";
  font-weight: bold; }

/*doc
---
title: Listing
name: Listing
category: index
---

Listing is for independent content snippets that generally appear as lists

```html_example

    <div class="listing">
        <h3 class="hdg hdg_5 mix-hdg_sm">The Lunchbox</h3>
        <div class="listing-bd">
            <p>Brief statement describing the Salad Bars program, which will encourage users to click this title. Cras mattis consectetur purus.</p>
        </div>
        <div class="listing-action">
            <a href="#" class="actionLink>Learn More </a>
        </div>
    </div> <!-- end .listing -->

        <div class="listing">
        <h3 class="hdg hdg_5 mix-hdg_sm">The Lunchbox</h3>
        <div class="listing-bd listing-bd_enlarged">
            <p>Brief statement describing the Salad Bars program, which will encourage users to click this title. Cras mattis consectetur purus.</p>
        </div>
        <div class="listing-action">
             <a href="#" class="actionLink>Learn More </a>
        </div>
    </div> <!-- end .listing -->

    <div class="listing">
        <div class="listing-hd">
            <h3 class="hdg hdg_5 mix-hdg_lower">Document Title that may be long</h3>
            <div class="listing-hd-meta">
                September 16, 2014
            </div>
        </div>

        <div class="listing-bd">
            <p>Proin ultricies dui aliquet augue scelerisque vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec fringilla nisi sed ligula mollis pulvinar. Vestibulum eget tortor porta, hendrerit felis.</p>
        </div>
        <a href="#" class="btn btn_secondary"><i class="btn-icon
        iconFont_file-alt"></i>Download Word Doc</a>
    </div>


```
*/
.listing_spaced {
  margin-bottom: 25px; }

.listing_spaced_right {
  margin-right: 20px; }

.listing-hd {
  margin-bottom: 10px; }

.mix-listing-hd_push {
  margin-bottom: 25px; }

.listing-hd-meta {
  font-size: 12px;
  line-height: 1.2; }

.listing-bd {
  font-weight: 200;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px; }

.listing-bd_enlarged {
  font-size: 16px; }

.listing-imgPushed {
  margin: 20px 20px 0 0; }

.listing-action {
  font-weight: 500;
  text-align: right; }

.listing-date {
  float: left;
  margin-right: 15px; }

.listing-ft {
  font-size: 12px;
  padding-bottom: 2px; }

/*doc
---
title: Loading Indicator
name: Loading Indicator
category: index
---


```html_example

    <div class="js-loading-indicator">
        <div class="loadingIndicator">
            <span class="loadingIndicator-icon"></span>
        </div>
    </div>

```
*/
.loadingIndicator {
  text-align: center; }

.loadingIndicator-icon {
  display: inline-block;
  height: 42px;
  width: 42px;
  background: url(../../../images/ajax-loader.gif) center no-repeat; }

.logoPair {
  display: table-cell;
  vertical-align: middle;
  height: 120px;
  max-width: 400px;
  line-height: 1.4; }

/*doc
---
title: Marquee
name: Marquee
category: index
---

The marquee module needs a data attribute of data-js-module="marquee" to initialize js,
and a data-marquee-scroll-threshold set to the number of images required to make the marquee work.

```html_example
    <div class="marquee-wrapper">
        <div class="marquee js-sponsors-marquee" data-js-module="marquee" data-marquee-scroll-threshold="8">
            <img src="https://placehold.it/150/000/fff" alt="Title" />
        </div>
    </div>


```
*/
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0; }

.marquee {
  width: 1000%;
  padding-top: 5px;
  font-size: 0; }

.marquee img {
  display: inline-block !important;
  margin-right: 4px; }

/*doc
---
title: Media Object
name: media
category: layout
---

Places image along side block of text

```html_example

    <div class="media">
        <div class="media-img">
            <img src="https://placehold.it/150x150" />
        </div>
        <div class="media-bd">
            <p>Some example text</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam orci justo, placerat vitae ligula sed, porta rhoncus tortor. Integer non blandit dui. Aliquam diam risus, varius laoreet ante eget, dictum vulputate justo. Etiam scelerisque molestie arcu, porta imperdiet orci bibendum a. Nullam a lectus sed nibh porta tempor at ac velit. Morbi quis vehicula orci. Aliquam erat volutpat. Ut non placerat enim. Curabitur lectus turpis, sodales eu justo pharetra, volutpat vestibulum lacus. Integer id tempor eros. Cras ligula mauris, dictum eget porta ut, feugiat at sem.</p>
        </div>
   </div>

    <div class="media">
        <div class="media-imgFlip">
            <img src="https://placehold.it/150x150" />
        </div>
        <div class="media-bd">
            <p>Some example text</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam orci justo, placerat vitae ligula sed, porta rhoncus tortor. Integer non blandit dui. Aliquam diam risus, varius laoreet ante eget, dictum vulputate justo. Etiam scelerisque molestie arcu, porta imperdiet orci bibendum a. Nullam a lectus sed nibh porta tempor at ac velit. Morbi quis vehicula orci. Aliquam erat volutpat. Ut non placerat enim. Curabitur lectus turpis, sodales eu justo pharetra, volutpat vestibulum lacus. Integer id tempor eros. Cras ligula mauris, dictum eget porta ut, feugiat at sem.</p>
        </div>
   </div>

```
*/
/* ---------------------------------------------------------------------
 Media Object
------------------------------------------------------------------------ */
.media,
.media-bd {
  overflow: hidden;
  display: block; }

.media-bd_spaced {
  margin-bottom: 10px; }

.media-ft_justifyRight {
  text-align: right; }

.media-img {
  float: left;
  margin-right: 30px; }

.media-img_tight {
  margin-right: 15px; }

.media-imgFlip {
  float: right;
  margin-left: 45px; }

.media-imgList {
  margin-top:5px;
  font-size:12px;
  width:223px; }

.media-imgListItem {
  margin-bottom:5px; }

/*doc
---
title: Modal
name: Modal
category: index
---

Modals must have the following attributes and the base modal markup below must be present on the bottom of the page:

href="" //where it should pull the main content for the modal from
data-js-module="modal" //for generic modals only
data-js-module="videoModal' //for video modals only
//Video modals also require the following
data-video-file="" //name of mp4 file ex/ test.mp4
data-video-poster="" //name of file to be used as preview for video ex/video-preview.jpg

    <div class="modal-overlay js-modal-overlay js-modal-close" style="position: static";></div>
    <div class="modal js-modal" style="position: static";>
        <a class="modal-close js-modal-close" title="Close Modal" href="#">x<span class="isVisuallyHidden">Close
                Modal</span></a>
        <div class="modal-content js-modal-content">
        </div>
    </div>

```html_example


```
*/
.modal-overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.5); }

.modal {
  display: none;
  width: 700px;
  left: 50%;
  margin-left: -350px;
  top: 100px;
  position: absolute;
  z-index: 200;
  padding: 8px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }

.modal-close {
  display: block;
  padding: 5px;
  font-weight: bold;
  font-size: 30px;
  position: absolute;
  top: 7px;
  right: 15px; }

.modal-content {
  background: #f0f0eb;
  padding: 30px; }

.modal-content-bd {
  line-height: 1.2;
  margin-bottom: 20px; }

/*doc
---
title: Notice
name: Notice
category: index
---

Notices are small alerts called out for extra emphasis.

```html_example

    <div class="notice">
        <p class="notice-bd">
            No events are currently scheduled for this month.
        </p>
    </div>

```
*/
.notice {
  text-align: center; }

.notice-bd {
  padding: 20px;
  background-color: #e9e8e3;
  background-color: rgba(233, 232, 227, 0.6);
  border: 1px solid #ded9d6;
  border-width: 1px 0; }

/*doc
---
title: offset
name: offset
category: index
---

A white box used typically for a full width area with a wrapper inside that just serves as a dividing container.

```html_example

<div class="offset">
    <div class="offset-inner">
    Offset container
    </div>
</div>

<div class="offset">
    <div class="offset-inner">
    <h2 class="offset-inner-newsletterIcon">test headline</h2>
    </div>
</div>

```
*/
.offset {
  background-color: #ffffff;
  border-top: 1px solid #edede5;
  border-bottom: 1px solid #ebebe2;
  -webkit-box-shadow: 0 2px 2px #ebebe2;
  -moz-box-shadow: 0 2px 2px #ebebe2;
  box-shadow: 0 2px 2px #ebebe2; }

.offset_spaced {
  margin-bottom: 40px; }

.offset-inner {
  position: relative;
  margin: 0 auto;
  width: 966px;
  padding: 20px 0; }

.offset-inner-newsletterIcon {
  padding-left: 105px; }

.offset-inner-newsletterIcon:after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 100px;
  height: 101%;
  padding-left: 100px;
  background: url("../../../images/lunchbox/offset-icon.png") 0 bottom no-repeat; }

/*doc
---
title: Pagination
name: Pagination
category: index
---


```html_example
<div class="pagination">
    <ol class="pagination-nav">
        <li class="pagination-nav-item pagination-nav-item_prev"><a href="#"><span class="isVisuallyHidden">Previous Page</span></a>
        <li><a href="#">1</a></li>
        <li class="pagination-nav-item pagination-nav-item_isActive">2</li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li>...<a href="#">21</a></li>
        <li><a href="#">22</a></li>
        <li class="pagination-nav-item pagination-nav-item_next"><a href="#"><span class="isVisuallyHidden">Next Page</span></a>
    </ol>
</div>
```
*/
.pagination {
  text-align: center; }

.pagination-nav {
  overflow: hidden;
  display: inline-block; }

.pagination-nav > li {
  float: left; }

.pagination-nav > li > a {
  display: inline-block;
  padding: 10px 12px;
  font-family: "Francois One"; }

.pagination-nav-item_isActive {
  background: #542e4f;
  margin-top: 4px;
  color: #ffffff;
  font-weight: bold;
  border-radius: 20px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px; }

.pagination-nav-item_prev a:before {
  font-family: "basic-lunchbox";
  content: "\e608"; }

.pagination-nav-item_next a:before {
  font-family: "basic-lunchbox";
  content: "\e609"; }

/*doc
---
title: QA
name: QA
category: index
---


```html_example

<div class="qa">
    <div class="qa-question">How can parents get more involved in decision-making at their child's school?<div>
</div>
```
*/
.qa {
  margin-bottom: 10px;
  overflow: hidden; }

.qa-question:before {
  content: "Q:";
  font-family: "Francois One";
  width: 45px;
  height: 45px;
  text-align: center;
  color: #ffffff;
  line-height: 45px;
  font-size: 20px;
  float: left;
  margin-right: 15px;
  background: #518542; }

.qa-question {
  color: #542e4f;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.3; }

/*doc
---
title: Search
name: Search
category: index
---


```html_example
    <div class="search">
        <label for="search-site" class="isVisuallyHidden">Search Site</label>
        <input id="search-site" class="search-input mix-search-input_md" type="search" />
        <button class="search-btn"><span class="isVisuallyHidden">Search Site</span></button>
    </div>

    <div class="search search_full">
        <label for="search-site" class="isVisuallyHidden">Search Site</label>
        <input id="search-site" class="search-input mix-search-input_full" type="search" />
        <button class="search-btn"><span class="isVisuallyHidden">Search Site</span></button>
    </div>

```
*/
.search {
  position: relative;
  display: inline-block; }

.search_full {
  display: block; }

.search-input,
input.search-input {
  border: none;
  background: #ffffff;
  padding: 13px 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.mix-search-input_full {
  width: 100%; }

.mix-search-input_md {
  width: 230px; }

.search-btn {
  background: none;
  position: absolute;
  top: 8px;
  right: 10px; }

.search-btn:before {
  font-family: "basic-lunchbox";
  content: "\e604";
  font-size: 20px;
  color: #bebdaf; }

.search-input::-webkit-input-placeholder {
  font-size: 14px; }

.search-input:-moz-placeholder {
  font-size: 14px; }

.search-input::-ms-clear {
  display: none; }

.search-input {
  font-size: 14px; }

/*doc
---
title: Section
name: Section
category: index
---

Sections are used to space sections of content on the page

```html_example
    <div class="section">
    Content could be highly variable
    </div>

    <div class="section section_sm">
    Content could be highly variable
    </div>


```
*/
.section {
  margin-bottom: 60px; }

.section_halved {
  margin-bottom: 30px; }

.section_divided {
  border-bottom: 4px solid #fc6719; }

.section_divided:nth-child(2n) > ul {
  background: rgba(204, 204, 204, 0.2); }

/*doc
---
title: Sidebar
name: Sidebar
category: index
---


```html_example

    <div class="sidebar">
        <div class="sidebar-hd">
            <h2 class="sidebar-hd-title">About Us</h2>
        </div>
        <div class="sidebar-bd">
            <ul class="sidebar-bd-nav">
                <li><a href="#">Overview</a></li>
                <li class="sidebar-bd-nav-item sidebar-bd-nav-item_isActive"><a href="#">About Chef Ann</a></li>
                <li><a href="#">The Team</a></li>
                <li><a href="#">Supporters</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div> <!--end .sidebar -->

```
*/
.sidebar {
  border-bottom: 4px solid #542e4f; }

.sidebar-logo {
  margin-bottom: 30px; }

.sidebar-hd {
  border-radius: 2px 2px 0 0;
  padding: 12px 55px 12px 30px;
  background-color: #542e4f;
  position: relative;
  color: #ffffff; }

.sidebar-hd strong {
  color: #ffc627; }

.sidebar-hd a {
  color: #ffffff; }

.sidebar-hd:after {
  content: "";
  width: 39px;
  height: 35px;
  display: block;
  position: absolute;
  right: 10px;
  top: 6px;
  background: url(../../../images/icon-sidebarnav.png) 0 0 no-repeat; }

.sidebar-hd-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 400; }

.sidebar-bd {
  padding: 20px;
  background-color: #e9e8e3;
  background-color: rgba(233, 232, 227, 0.6); }

.sidebar-bd-nav {
  font-size: 16px; }

.sidebar-bd-nav a {
  display: block;
  padding: 10px 0 10px 10px; }

.sidebar-bd-nav a {
  border-bottom: 1px solid #dddbd5; }

.sidebar-bd-nav-item_isActive a,
.parent-sidebar-bd-nav-item_isActive a {
  background: #dddbd5;
  color: #df4f03; }

/*doc
---
title: Slides
name: Slides
category: index
---


```html_example


```
*/
.slides {
  overflow: hidden;
  max-width: 100%; }

.slides-inner > * {
  float: left; }

.slides-nav {
  text-align: center; }

.slides-nav > * {
  display: inline-block;
  vertical-align: top; }

.slides-nav-action {
  font-size: 20px;
  line-height: 28px;
  font-weight: bold; }

.slides-nav-action_prev {
  display: none; }

.slides-nav-action_prev:before {
  font-family: "basic-lunchbox";
  content: "\e608"; }

.slides-nav-action_next:before {
  font-family: "basic-lunchbox";
  content: "\e609"; }

.slides-nav-hdg {
  margin: 0 10px; }

/*doc
---
title: Split
name: split
category: index
---

Floats blocks of content left and right and clears it.

```html_example

    <div class="split">
        <div class="split-left">
            Left Text
        </div>
        <div class="split-right">
            Right Text
        </div>
   </div>

```
*/
/* ---------------------------------------------------------------------
 Split Object
------------------------------------------------------------------------ */
.split:before, .split:after {
  content: "";
  display: table; }
.split:after {
  clear: both; }

.split-left {
  float: left; }

.split-right {
  float: right; }

/*doc
---
title: Table
name: Table
category: index
---


```html_example

<table class="table">
    <thead>
    <tr>
        <th>Recipe No.</th>
        <th>Recipe Name</th>
        <th>Food Category</th>
        <th>Hot?</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>ABC123</td>
        <td><a href="#">Recipe Name which might be long</a></td>
        <td>Food Category Name</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>ABC123</td>
        <td><a href="#">Recipe Name which might be long</a></td>
        <td>Food Category Name</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>ABC123</td>
        <td><a href="#">Recipe Name which might be long</a></td>
        <td>Food Category Name</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>ABC123</td>
        <td><a href="#">Recipe Name which might be long</a></td>
        <td>Food Category Name</td>
        <td>Yes</td>
    </tr>
    </tbody>
</table>
```
*/
.table {
  width: 100%;
  border-bottom: 4px solid #fc6719; }

.table_secondary {
  border-bottom-color: #518542; }

.table th {
  text-align: left;
  background: #e3e3da;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  padding: 12px 15px;
  border-top: 1px solid #cfd1c3;
  border-bottom: 1px solid #cfd1c3; }

.table_noTop th {
  border-top: none; }

.table th:first-child {
  border-left: 1px solid #cfd1c3; }

.table th:last-child {
  border-right: 1px solid #cfd1c3; }

.table td {
  text-align: left;
  padding: 12px 15px;
  font-size: 12px; }

.table tr:nth-child(2n) td {
  background: rgba(204, 204, 204, 0.2); }

.table .table-td_cta,
.table tr:nth-child(2n) .table-td_cta {
  padding-top: 22px;
  background: none;
  text-align: right; }

.table-caps {
  text-transform: uppercase; }

.table-sortLink {
  display: inline-block;
  height: 9px;
  padding-right: 10px;
  background-image: url(../../../images/sorter-arrows.png);
  background-repeat: no-repeat;
  background-position: right 0px; }

.table-sortLink_isActive {
  color: #585246;
  background-position: right -9px; }

/*doc
---
title: Tabs
name: Tabs
category: index
---

In addition to js prefixed classes tabs expects data-js-module="tabs" to run on the main container

```html_example
<div  class="tabs js-tabs" data-js-module="tabs">
    <ul class="tabs-nav js-tabs-nav">
        <li><a href="#js-tabs-1">Chef Ann's Bio</a></li>
        <li><a href="#js-tabs-2">Speaking Engagements &amp; Calendar</a></li>
        <li class="tabs-nav-item tabs-nav-item_isActive"><a href="#js-tabs-3">Books</a></li>
        <li><a href="#js-tabs-4">Consulting</a></li>
    </ul>
    <div id="js-tabs-1" class="tabs-content js-tabs-content">
        <h2 class="hdg hdg_3 mix-hdg_md">Tab Section Heading</h2>
    </div>
</div> <!--end .tabs -->
```
*/
.tabs {
  margin-bottom: 25px; }

.tabs-nav {
  background: #fc6719;
  display: table;
  width: 100%;
  border-radius: 3px 3px 0 0;
  -webkit-box-shadow: inset 0 -4px 0 #c64603;
  -moz-box-shadow: inset 0 -4px 0 #c64603;
  box-shadow: inset 0 -4px 0 #c64603; }

.tabs-nav > li {
  display: table-cell;
  position: relative;
  vertical-align: middle;
  text-align: center;
  font-size: 14px; }

.tabs-nav > li > a {
  display: block;
  padding: 13px 20px;
  color: #ffffff;
  line-height: 1.2;
  border: 1px solid transparent;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease; }

.tabs-nav > li + li:after {
  content: " ";
  border-left: 1px solid #e4e3df;
  border-left: 1px solid rgba(228, 227, 223, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%; }

.tabs-nav > li > a:hover {
  color: #e3e3da; }

.tabs-nav .tabs-nav-item_isActive + li:after {
  content: "";
  border: none; }

.tabs-nav .tabs-nav-item_isActive,
.tabs-nav .tabs-nav-item_isActive > a,
.tabs-nav .tabs-nav-item_isActive > a:hover {
  background-color: #e3e3da;
  color: #fc6719; }

.tabs-nav .tabs-nav-item_isActive {
  border: 1px solid #cfd1c3; }

.tabs-nav_isTight .tabs-nav-item_isActive,
.tabs-nav_isTight .tabs-nav-item_isActive:hover {
  border-bottom: none; }

.tabs-content {
  padding: 30px 0;
  left: -9999px;
  position: absolute; }

.tabs-content_isTight {
  padding-top: 0; }

.tabs-content_isOpen {
  position: static; }

.tabs-nav_slim {
  display: block;
  padding: 8px 0 0 8px;
  background: #e3e3da;
  -webkit-box-shadow: inset 0 -2px 0 #dddbd5;
  -moz-box-shadow: inset 0 -2px 0 #dddbd5;
  box-shadow: inset 0 -2px 0 #dddbd5;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.tabs-nav_slim > .tabs-nav-item_isActive {
  border: none; }

.tabs-nav_slim > li > a {
  padding: 10px 15px;
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  color: #518542; }

.tabs-nav_slim > .tabs-nav-item_isActive a,
.tabs-nav_slim > .tabs-nav-item_isActive > a:hover {
  background: #f0f0eb;
  color: #518542; }

.tabs-nav_slim > li > a:hover {
  color: #518542; }

/*doc
---
title: Tag Cloud
name: Tag Cloud
category: index
---


```html_example


```
*/
.tagCloud > li {
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: 3px; }

.tagCloud {
  margin-left: -10px; }

.tagCloud > li {
  margin-left: 10px; }

.tagCloud a {
  color: #518542; }

.tagCloud a:hover,
.tagCloud a:active {
  color: #3c6331; }

.tagCloud-tag {
  font-size: 14px; }

.mix-tagCloud-tag_1 {
  font-size: 30px; }

.mix-tagCloud-tag_2 {
  font-size: 24px; }

.mix-tagCloud-tag_3 {
  font-size: 18px; }

.mix-tagCloud-tag_4 {
  font-size: 14px; }

.mix-tagCloud-tag_4:nth-child(2n+1) > a {
  color: #518542; }

.mix-tagCloud-tag_4:nth-child(3n+2) > a {
  color: #542e4f;
  opacity: 0.8; }

.mix-tagCloud-tag_4:nth-child(5n+3) > a {
  color: #fc6719; }

.mix-tagCloud-tag_4:nth-child(7n+5) > a {
  color: black; }

.mix-tagCloud-tag_4:nth-child(11n+7) > a {
  color: #542e4f;
  opacity: 0.8; }

.mix-tagCloud-tag_3:nth-child(2n+1) > a {
  color: #518542; }

.mix-tagCloud-tag_3:nth-child(3n+2) > a {
  color: #542e4f;
  opacity: 0.8; }

.mix-tagCloud-tag_3:nth-child(5n+3) > a {
  color: #fc6719; }

.mix-tagCloud-tag_3:nth-child(7n+5) > a {
  color: #fc6719; }

.mix-tagCloud-tag_3:nth-child(11n+7) > a {
  color: #542e4f;
  opacity: 0.8; }

.mix-tagCloud-tag_2:nth-child(2n+1) > a {
  color: #518542; }

.mix-tagCloud-tag_2:nth-child(3n+2) > a {
  color: #542e4f;
  opacity: 0.8; }

.mix-tagCloud-tag_2:nth-child(5n+3) > a {
  color: #fc6719; }

.mix-tagCloud-tag_2:nth-child(7n+5) > a {
  color: #fc6719; }

.mix-tagCloud-tag_2:nth-child(11n+7) > a {
  color: #542e4f;
  opacity: 0.8; }

.mix-tagCloud-tag_1:nth-child(2n+1) > a {
  color: #542e4f;
  opacity: 0.8; }

.mix-tagCloud-tag_1:nth-child(3n+2) > a {
  color: #518542; }

.mix-tagCloud-tag_1:nth-child(5n+3) > a {
  color: #fc6719; }

.mix-tagCloud-tag_1:nth-child(7n+5) > a {
  color: #542e4f;
  opacity: 0.8; }

.mix-tagCloud-tag_1:nth-child(11n+7) > a {
  color: #fc6719; }

/*doc
---
title: Tags
name: Tags
category: index
---


```html_example

<ul class="tags">
    <li><a href="#">Tag Name</a>,</li>
    <li><a href="#">Tag Lunch</a>,</li>
    <li><a href="#">Tag Name Longer</a></li>
</ul>
```
*/
.tags {
  margin-top: 10px;
  font-size: 12px;
  display: inline; }
  .tags:before, .tags:after {
    content: "";
    display: table; }
  .tags:after {
    clear: both; }

.tags > li {
  float: left;
  margin-bottom: 5px; }

.tagsPreamble {
  display: inline-block;
  font-size: 12px;
  float: left;
  margin-right: 5px; }

/*doc
---
title: Testimonials
name: Testimonials
category: index
---

```html_example

<div class="testimonials testimonials_smFixed js-carousel">
   <ul class="testimonials-slides js-carousel-slides">
       <li>
            <div class="testimonials-slides-testimonial">
                “Curated text snippet of 150 characters or less. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.”
</div>
            <div class="vList vList_tiny">
                <div>Heather Gibbons</div>
                <a href="realfoodforkids.org" target="_blank">realfoodforkids
                        .org</a>
            </div>
       </li>
   </ul>
</div>
```
*/
.testimonials {
  padding-top: 20px;
  overflow: hidden;
  position: relative; }

.testimonials:after {
  content: "\201C";
  display: block;
  background: #542e4f;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  text-align: center;
  color: #ffffff;
  font-size: 60px;
  font-family: Georgia, serif;
  line-height: 68px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -20px; }

.wysiwyg .testimonials {
  float: right;
  margin: 0 0 40px 40px; }

.testimonials_smFixed .testimonials-slides {
  width: 270px;
  height: 210px;
  position: relative; }

.testimonials-slides > li {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  background: url(../../../images/bg-pattern-slides.png) 0 0 repeat;
  padding: 30px 20px; }

.testimonials-slides > .isActive {
  opacity: 1; }

.testimonials-slides-testimonial {
  margin-bottom: 20px;
  color: #542e4f;
  line-height: 1.4; }

/*doc
---
title: Twitter Container
name: Twitter Container
category: index
---

Container for custom Twitter timeline code.

```html_example

<div class="twitterContainer">
    <div class="twitterContainer-hd">
        Heading info
    </div>
    <div class="twitterContainer-bd">
        Embed code from twitter
    </div>
</div>
```
*/
.twitterContainer_spaced {
  margin-top: 30px; }

.twitterContainer-bd > iframe {
  width: 100%; }

/*doc
---
title: Video
name: Video
category: index
---

Video module shows a thumbnail view only. Using flexbox to center the play icon in the space above the title no matter how many lines the title text

```html_example

<div class="video">
    <div class="video-img">
        <img src="https://placehold.it/200x150" alt="" />
    </div>
    <a href="#" class="video-overlay">
        <div class="video-overlay-play">
            <div class="video-overlay-play-icon"></div>
        </div>
        <div class="video-overlay-title">
            Our Mission Video Title Here
        </div>
    </a>
</div>

```
*/
.video {
  position: relative;
  display: inline-block; }

.video-img > img {
  display: block; }

.video-img:before {
  content: "";
  background-color: #f2f2e9;
  background-color: rgba(242, 242, 233, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease; }

.video-overlay-play-icon:after {
  font-family: "basic-lunchbox";
  content: "\e605";
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  line-height: 45px;
  background-color: #542e4f;
  border-radius: 45px;
  -webkit-box-shadow: inset 0 -2px 0 #322035;
  -moz-box-shadow: inset 0 -2px 0 #322035;
  box-shadow: inset 0 -2px 0 #322035;
  display: block;
  width: 45px;
  height: 45px;
  -webkit-transition: box-shadow 0.3s ease;
  -moz-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease; }

.video:hover .video-img:before {
  content: "";
  background: none; }

.video:hover .video-overlay-play-icon:after {
  content: "\e605";
  -webkit-box-shadow: inset 0 -3px 0 #231625;
  -moz-box-shadow: inset 0 -3px 0 #231625;
  box-shadow: inset 0 -3px 0 #231625; }

.video-overlay {
  color: #585246;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: flex-end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-align: stretch;
  -moz-align-items: stretch;
  -webkit-align-items: stretch;
  align-items: stretch; }

.video-overlay-play {
  -ms-flex: 1 0 auto;
  -moz-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center; }

.video-overlay-title {
  padding: 14px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f2f2e9;
  background-color: rgba(242, 242, 233, 0.7);
  text-align: center;
  font-size: 16px;
  font-weight: bold; }

.video_sm .video-overlay-title {
  font-size: 14px; }

/*doc
---
title: Vertical Lists
name:  vlist
category: index
---

Vertical lists are used to space elements vertically on the page

```html_example

    <ul class="vList">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <ul class="vList vList_tiny">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_sm">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_md">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_lg">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_exLg">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_piped">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <ul class="vList vList_bullets">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

```
*/
.vList > * {
  margin-top: 8px;
  display: block; }

.vList > :first-child {
  margin: 0; }

.vList_tiny > * + * {
  margin-top: 3px; }

.vList_sm > * + * {
  margin-top: 10px; }

.vList_md > * + * {
  margin-top: 15px; }

.vList_lg > * + * {
  margin-top: 20px; }

.vList_exLg > * + * {
  margin-top: 30px; }

.vList_piped > * {
  margin-top: 0;
  padding-top: 20px;
  border-bottom: 1px solid #e5e0de;
  padding-bottom: 20px; }

.vList_piped > *:nth-child(2n) {
  background: rgba(204, 204, 204, 0.2); }

/*doc
---
title: Wrapper
name: Wrapper
category: index
---

Layout container

```html_example

<div class="wrapper">
</div>
```
*/
.wrapper {
  width: 966px;
  margin: 0 auto; }

/*doc
---
title: Wysiwyg
name: wysiwyg
category: index
---

Wysiwyg styles are used to style basic elements added via a wysiwyg editor. The wysiwyg class will need to be on the parent element of any area designated as user-generated content.

```html_example

    <div class="wysiwyg">
        <ul>
            <li>Line Item 1
               <ol>
                  <li>Nest 1</li>
                  <li>Nest 1</li>
                  <li>Nest 1</li>
                </ol>
            </li>
            <li>Line Item 2</li>
            <li>Line Item 3</li>
            <li>Line Item 4</li>
        </ul>
        <ol>
            <li>Line Item 1
                <ul>
                  <li>Nest 1</li>
                  <li>Nest 1</li>
                  <li>Nest 1</li>
                </ul>
            </li>
            <li>Line Item 2</li>
            <li>Line Item 3</li>
            <li>Line Item 4</li>
        </ol>
        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
<h2>Second-level Heading</h2>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
        <blockquote>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</blockquote>
<h3>Tertiary Heading</h3>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>

<img src="https://placehold.it/300x109" class="floatLeft" />

<h4>Fourth Level Heading</h4>
    <img src="https://placehold.it/350x150">
    <a href="">This is a link</a>
    <img src="https://placehold.it/300x100" class="floatRight" />
    <p>the nation’s <b>Bold text</b> and water <i> italics text</i> as well. and<sub>a</sub> water quality<sup>a</sup> as well.</p>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

     <ol>
       <li>Preheat oven to 350 degrees. Grease a cookie sheet and set aside.</li>
       <li>Beat the egg and mix well with the buttermilk</li>
       <li>Add the canola oil and orange zest and mix to combine</li>
       <li>On a large bowl, mix together the oats, flours, sugar, baking powder, and salt</li>
       <li> Stir the buttermilk mixture into the dry ingredients and mix until the dough just comes together. Do not over mix.</li>
       <li> Fold in the fruit.</li>
       <li>Scoop scones into the prepared cookie sheet and bake 10 minutes or until slightly golden on top.</li>
   </ol>

    <table>
        <thead>
            <tr>
                <th>table heading</th>
                <th>table heading</th>
                <th>table heading</th>
                <th>table heading</th>
                <th>table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>First Lastname</td>
                <td>Cheyenne, Kit <br />
                    Carson, Lincoln, <br />
                    Yuma</td>
                <td>CO</td>
                <td>firstname at <br />
                    test.org</td>
                <td>888-888-888</td>
            </tr>
            <tr>
                <td>First Lastname</td>
                <td>Cheyenne, Kit <br />
                    Carson, Lincoln, <br />
                    Yuma</td>
                <td>CO</td>
                <td>firstname at <br />
                    test.org</td>
                <td>888-888-888</td>
            </tr>
            <tr>
                <td>First Lastname</td>
                <td>Cheyenne, Kit <br />
                    Carson, Lincoln, <br />
                    Yuma</td>
                <td>CO</td>
                <td>firstname at <br />
                    test.org</td>
                <td>888-888-888</td>
            </tr>
            <tr>
                <td>First Lastname</td>
                <td>Cheyenne, Kit <br />
                    Yuma</td>
                <td>CO</td>
                <td>firstname at <br />
                    test.org</td>
                <td>888-888-888</td>
            </tr>
        </tbody>
    </table>
   </div>

```
*/
/* ---------------------------------------------------------------------
 Wysiwyg
------------------------------------------------------------------------ */
.wysiwyg {
  overflow: hidden;
  font-size: 16px;
  max-width: 900px; }

.mix-wysiwyg_sm {
  font-size: 14px; }

.wysiwyg img {
  float: left;
  margin: 0 20px 20px 0; }

.wysiwyg .video-img img {
  margin: 0; }

.wysiwyg .image.image_block img {
  float: none;
  margin-right: 0; }

.wysiwyg .image.image_right img {
  float: right;
  margin-left: 20px;
  margin-right: 0; }

.wysiwyg p {
  margin-bottom: 22px;
  line-height: 1.5; }

.wysiwyg a {
  text-decoration: underline; }

.wysiwyg a.video-overlay {
  text-decoration: none; }

.wysiwyg a.btn {
  background: #518542;
  border-bottom-color: #3c6331;
  text-decoration: none; }

.wysiwyg a.btn:hover,
.wysiwyg a.btn:active {
  background-color: #3c6331; }

.wysiwyg .list_left,
.wysiwyg .float_left {
  overflow: hidden; }

.wysiwyg ul {
  margin-bottom: 22px; }

.wysiwyg ul > li ul {
  margin-top: 15px; }

.wysiwyg ul:not([class]) > li {
  position: relative;
  margin-left: 20px;
  padding-left: 20px;
  background: url(../../../images/master-sprite.png) -43px 0 no-repeat; }

.wysiwyg ul:not([class]) > li ul > li {
  position: relative;
  margin-left: 20px;
  padding-left: 20px;
  background: none; }

.wysiwyg ul:not([class]) > li ul > li:before {
  content: " ";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 5px;
  left: 2px;
  background: white;
  border: 1px solid black;
  border-radius: 7px; }

.wysiwyg ol {
  list-style: none;
  counter-reset: section;
  margin-bottom: 22px; }

.wysiwyg li {
  margin-bottom: 15px;
  line-height: 1.2; }

.wysiwyg ol > li,
.wysiwyg ol > li > * {
  overflow: hidden; }

.wysiwyg ol > li {
  padding-left: 40px; }

.wysiwyg ol > li:before {
  counter-increment: section;
  /* Increment the section counter */
  content: counter(section);
  /* Display the counter */
  font-weight: bold;
  margin-left: -40px;
  margin-right: 10px;
  background: #542e4f;
  display: block;
  float: left;
  color: #ffffff;
  font-weight: bold;
  border-radius: 20px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px; }

.wysiwyg li > ol,
.wysiwyg li > ul {
  margin: 10px; }

.wysiwyg ul ul,
.wysiwyg ol ul,
.wysiwyg ul ol,
.wysiwyg ol ol {
  margin: 25px 0 0; }

.wysiwyg img {
  display: block;
  max-width: 100%;
  margin-bottom: 22px; }

.wysiwyg .floatLeft {
  float: left;
  margin: 0 32px 24px 0; }

.wysiwyg .floatRight {
  float: right;
  margin: 0 0 24px 32px; }

.wysiwyg b {
  font-weight: bold; }

.wysiwyg i {
  font-style: italic; }

.wysiwyg sup {
  vertical-align: super;
  font-size: 13px;
  line-height: 1; }

.wysiwyg sub {
  vertical-align: sub; }

.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  font-family: "Cabin", helvetica, arial, sans-serif;
  font-weight: 500;
  margin-bottom: 15px;
  -webkit-font-smoothing: antialiased; }

.wysiwyg h1 a:not([href]),
.wysiwyg h2 a:not([href]),
.wysiwyg h3 a:not([href]),
.wysiwyg h4 a:not([href]),
.wysiwyg h5 a:not([href]),
.wysiwyg h6 a:not([href]) {
  color: #585246;
  text-decoration: none; }

.wysiwyg h1 {
  font-size: 36px;
  line-height: 1.1; }

.wysiwyg h2 {
  font-size: 28px;
  line-height: 1.1; }

.wysiwyg h3 {
  font-size: 24px;
  line-height: 1.1; }

.wysiwyg h4 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600; }

.wysiwyg h5 {
  font-size: 16px;
  font-weight: 600; }

.wysiwyg h6 {
  font-size: 14px;
  font-weight: 600; }

.wysiwyg blockquote {
  font-size: 18px;
  line-height: 1.2;
  font-style: italic;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e2d8;
  border-top: 1px solid #e2e2d8;
  margin: 10px 10.57% 30px;
  position: relative; }

.wysiwyg blockquote:before,
.wysiwyg blockquote:after {
  display: block;
  padding-right: 8px;
  background: #542e4f;
  width: 32px;
  height: 40px;
  border-radius: 40px;
  text-align: center;
  color: #ffffff;
  font-size: 60px;
  font-family: Georgia, serif;
  line-height: 68px;
  position: absolute; }

.wysiwyg blockquote:before {
  content: "\201C";
  top: 0;
  left: -55px; }

.wysiwyg blockquote:after {
  content: "\201D";
  bottom: 15px;
  right: -25px; }

.wysiwyg blockquote p:last-child {
  margin-bottom: 0; }

.wysiwyg table {
  width: 100%; }

.wysiwyg table th {
  text-align: left;
  background: #e3e3da;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 15px;
  border-top: 1px solid #cfd1c3;
  border-bottom: 1px solid #cfd1c3; }

.wysiwyg table th:first-child {
  border-left: 1px solid #cfd1c3; }

.wysiwyg table th:last-child {
  border-right: 1px solid #cfd1c3; }

.wysiwyg table td {
  text-align: left;
  padding: 12px 15px; }

.wysiwyg table tr:nth-child(2n+1) td {
  background: rgba(150, 150, 150, 0.2); }

/**
 * Overrides for project produce
*/

.sidebar-hd .wysiwyg table tr:nth-child(2n+1) td,
.mix-box_gold .wysiwyg table tr:nth-child(2n+1) td {
  background: none; }


.table-caps {
  text-transform: uppercase; }

.wysiwyg strong, .wysiwyg b {
  font-weight: bold; }

.wysiwyg i, .wysiwyg em {
  font-style: italic; }

.wysiwyg p > a[name] {
  color: #585246;
  text-decoration: none;
  font-size: 18px; }

.wysiwyg .details {
  font-size: 14px;
  color: #518542;
  line-height: 1.4; }

.wysiwyg .wysiwyg-teaser {
  font-size: 13.5px;
  font-weight: 500; }

/* commenting this as it was causing odd double margins in places
.wysiwyg > :last-child {
    margin-bottom: 0; //whatever the last child is we don't want it having margin on the bottom
}

.wysiwyg > :first-child {
    margin-bottom: 22px; //overriding last child if first-child is last-child
}
*/
/*
Version: 3.4.5 Timestamp: Mon Nov  4 08:22:42 PST 2013
*/
.select2-container {
  width: 100%;
  font-size: 12px;
  margin: 0;
  position: relative;
  display: inline-block;
  /* inline-block for ie7 */
  zoom: 1;
  *display: inline;
  vertical-align: middle; }

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
  /*
    Force border-box so that % widths fit the parent
    container without overlap because of margin/padding.
  
    More Info : https://www.quirksmode.org/css/box.html
  */
  -webkit-box-sizing: border-box;
  /* webkit */
  -moz-box-sizing: border-box;
  /* firefox */
  box-sizing: border-box;
  /* css3 */ }

.select2-container .select2-choice {
  display: block;
  height: 26px;
  padding: 0 0 0 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #aaa;
  white-space: nowrap;
  line-height: 26px;
  color: #444;
  text-decoration: none;
  border-radius: 4px;
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
  background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
  background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
  background-image: linear-gradient(top, white 0%, #eeeeee 50%); }

.select2-container.select2-drop-above .select2-choice {
  border-bottom-color: #aaa;
  border-radius: 0 0 4px 4px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white));
  background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%);
  background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
  background-image: linear-gradient(top, #eeeeee 0%, white 90%); }

.select2-container.select2-allowclear .select2-choice .select2-chosen {
  margin-right: 42px; }

.select2-container .select2-choice > .select2-chosen {
  margin-right: 26px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.select2-container .select2-choice abbr {
  display: none;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 24px;
  top: 8px;
  font-size: 1px;
  text-decoration: none;
  border: 0;
  background: url("../../../images/select2/select2.png") right top no-repeat;
  cursor: pointer;
  outline: 0; }

.select2-container.select2-allowclear .select2-choice abbr {
  display: inline-block; }

.select2-container .select2-choice abbr:hover {
  background-position: right -11px;
  cursor: pointer; }

.select2-drop-mask {
  border: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 9998;
  /* styles required for IE to work */
  background-color: #fff;
  filter: alpha(opacity=0); }

.select2-drop {
  width: 100%;
  margin-top: -1px;
  position: absolute;
  z-index: 9999;
  top: 100%;
  background: #fff;
  color: #000;
  border: 1px solid #aaa;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); }

.select2-drop-auto-width {
  border-top: 1px solid #aaa;
  width: auto; }

.select2-drop-auto-width .select2-search {
  padding-top: 4px; }

.select2-drop.select2-drop-above {
  margin-top: 1px;
  border-top: 1px solid #aaa;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15); }

.select2-drop-active {
  border: 1px solid #5897fb;
  border-top: none; }

.select2-drop.select2-drop-above.select2-drop-active {
  border-top: 1px solid #5897fb; }

.select2-container .select2-choice .select2-arrow {
  display: inline-block;
  width: 18px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #aaa;
  border-radius: 0 4px 4px 0;
  background-clip: padding-box;
  background: #ccc;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(0.6, #eeeeee));
  background-image: -webkit-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%);
  background-image: -moz-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
  background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%); }

.select2-container .select2-choice .select2-arrow b {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../../../images/select2/select2.png") no-repeat 0 1px; }

.select2-search {
  display: inline-block;
  width: 100%;
  min-height: 26px;
  margin: 0;
  padding-left: 4px;
  padding-right: 4px;
  position: relative;
  z-index: 10000;
  white-space: nowrap; }

.select2-search input {
  width: 100%;
  height: auto !important;
  min-height: 26px;
  padding: 4px 20px 4px 5px;
  margin: 0;
  outline: 0;
  font-family: sans-serif;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: white url("../../../images/select2/select2.png") no-repeat 100% -22px;
  background: url("../../../images/select2/select2.png") no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  background: url("../../../images/select2/select2.png") no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: url("../../../images/select2/select2.png") no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: url("../../../images/select2/select2.png") no-repeat 100% -22px, linear-gradient(top, white 85%, #eeeeee 99%); }

.select2-drop.select2-drop-above .select2-search input {
  margin-top: 4px; }

.select2-search input.select2-active {
  background: white url("../../../images/select2/select2-spinner.gif") no-repeat 100%;
  background: url("../../../images/select2/select2-spinner.gif") no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  background: url("../../../images/select2/select2-spinner.gif") no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: url("../../../images/select2/select2-spinner.gif") no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: url("../../../images/select2/select2-spinner.gif") no-repeat 100%, linear-gradient(top, white 85%, #eeeeee 99%); }

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border: 1px solid #5897fb;
  outline: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

.select2-dropdown-open .select2-choice {
  border-bottom-color: transparent;
  -webkit-box-shadow: 0 1px 0 #fff inset;
  box-shadow: 0 1px 0 #fff inset;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #eee;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
  background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
  background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
  background-image: linear-gradient(top, white 0%, #eeeeee 50%); }

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
  border: 1px solid #5897fb;
  border-top-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(0.5, #eeeeee));
  background-image: -webkit-linear-gradient(center top, white 0%, #eeeeee 50%);
  background-image: -moz-linear-gradient(center top, white 0%, #eeeeee 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
  background-image: linear-gradient(bottom, white 0%, #eeeeee 50%); }

.select2-dropdown-open .select2-choice .select2-arrow {
  background: transparent;
  border-left: none;
  filter: none; }

.select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 1px; }

/* results */
.select2-results {
  max-height: 200px;
  padding: 0 0 0 4px;
  margin: 4px 4px 4px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent; }

.select2-results ul.select2-result-sub {
  margin: 0;
  padding-left: 0; }

.select2-results ul.select2-result-sub > li .select2-result-label {
  padding-left: 20px; }

.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-left: 40px; }

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-left: 60px; }

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-left: 80px; }

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-left: 100px; }

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-left: 110px; }

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-left: 120px; }

.select2-results li {
  list-style: none;
  display: list-item;
  background-image: none; }

.select2-results li.select2-result-with-children > .select2-result-label {
  font-weight: bold; }

.select2-results .select2-result-label {
  padding: 3px 7px 4px;
  margin: 0;
  cursor: pointer;
  min-height: 1em;
  font-size: 13px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.select2-results .select2-highlighted {
  background: #542e4f;
  color: #fff; }

.select2-results li em {
  background: #feffde;
  font-style: normal; }

.select2-results .select2-highlighted em {
  background: transparent; }

.select2-results .select2-highlighted ul {
  background: #fff;
  color: #000; }

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
  background: #f4f4f4;
  display: list-item; }

/*
disabled look for disabled choices in the results dropdown
*/
.select2-results .select2-disabled.select2-highlighted {
  color: #666;
  background: #f4f4f4;
  display: list-item;
  cursor: default; }

.select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default; }

.select2-results .select2-selected {
  display: none; }

.select2-more-results.select2-active {
  background: #f4f4f4 url("../../../images/select2/select2-spinner.gif") no-repeat 100%; }

.select2-more-results {
  background: #f4f4f4;
  display: list-item; }

/* disabled styles */
.select2-container.select2-container-disabled .select2-choice {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default; }

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
  background-color: #f4f4f4;
  background-image: none;
  border-left: 0; }

.select2-container.select2-container-disabled .select2-choice abbr {
  display: none; }

/* multiselect */
.select2-container-multi .select2-choices {
  height: auto !important;
  height: 1%;
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid #aaa;
  cursor: text;
  overflow: hidden;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, white));
  background-image: -webkit-linear-gradient(top, #eeeeee 1%, white 15%);
  background-image: -moz-linear-gradient(top, #eeeeee 1%, white 15%);
  background-image: linear-gradient(top, #eeeeee 1%, white 15%); }

.select2-locked {
  padding: 3px 5px 3px 5px !important; }

.select2-container-multi .select2-choices {
  min-height: 26px; }

.select2-container-multi.select2-container-active .select2-choices {
  border: 1px solid #5897fb;
  outline: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

.select2-container-multi .select2-choices li {
  float: left;
  list-style: none; }

.select2-container-multi .select2-choices .select2-search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap; }

.select2-container-multi .select2-choices .select2-search-field input {
  padding: 5px;
  margin: 1px 0;
  font-family: sans-serif;
  font-size: 100%;
  color: #666;
  outline: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent !important; }

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
  background: white url("../../../images/select2/select2-spinner.gif") no-repeat 100% !important; }

.select2-default {
  color: #999 !important; }

.select2-container-multi .select2-choices .select2-search-choice {
  padding: 3px 5px 3px 18px;
  margin: 3px 0 3px 5px;
  position: relative;
  line-height: 13px;
  color: #333;
  cursor: default;
  border: 1px solid #aaaaaa;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #e4e4e4;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); }

.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
  cursor: default; }

.select2-container-multi .select2-choices .select2-search-choice-focus {
  background: #d4d4d4; }

.select2-search-choice-close {
  display: block;
  width: 12px;
  height: 13px;
  position: absolute;
  right: 3px;
  top: 4px;
  font-size: 1px;
  outline: none;
  background: url("../../../images/select2/select2.png") right top no-repeat; }

.select2-container-multi .select2-search-choice-close {
  left: 3px; }

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
  background-position: right -11px; }

.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
  background-position: right -11px; }

/* disabled styles */
.select2-container-multi.select2-container-disabled .select2-choices {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default; }

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
  padding: 3px 5px 3px 5px;
  border: 1px solid #ddd;
  background-image: none;
  background-color: #f4f4f4; }

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
  display: none;
  background: none; }

/* end multiselect */
.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
  text-decoration: underline; }

.select2-offscreen, .select2-offscreen:focus {
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  outline: 0 !important;
  left: 0px !important;
  top: 0px !important; }

.select2-display-none {
  display: none; }

.select2-measure-scrollbar {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 100px;
  height: 100px;
  overflow: scroll; }

/* Retina-ize icons */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
    background-image: url("../../../images/select2/select2x2.png") !important;
    background-repeat: no-repeat !important;
    background-size: 60px 40px !important; }

  .select2-search input {
    background-position: 100% -21px !important; } }
/*doc
---
title: Features
name: Features
category: index
---


```html_example



```
*/
.features {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: table;
  border-top: 1px solid #b9b5a8;
  border-bottom: 1px solid #b9b5a8;
  border-right: 1px solid #b9b5a8;
  z-index: 10; }

.features > li {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 25%;
  display: table-cell;
  border-left: 1px solid #b9b5a8;
  background-color: #f2f2e9;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

.features > li:hover {
  background-color: #ffffff; }

.features > li a {
  display: block;
  line-height: 1.2;
  padding: 19px 15px 16px 15px;
  color: #47443a;
  font-weight: bold;
  text-align: center;
  position: relative;
  vertical-align: middle;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

.features > li:hover a {
  color: #da702b; }

.features > li > a .heroIcon {
  height: 31px;
  width: 61px;
  position: absolute;
  top: -32px;
  left: 50%;
  margin-left: -31px;
  border-radius: 61px 61px 0 0;
  -moz-border-radius: 61px 61px 0 0;
  -webkit-border-radius: 61px 61px 0 0;
  background-color: #f2f2e9;
  border-top: 1px solid #b9b5a8;
  border-right: 1px solid #b9b5a8;
  border-left: 1px solid #b9b5a8;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

.features > li:hover > a .heroIcon {
  background-color: #ffffff; }

.features > li > a .heroIcon-media {
  width: 27px;
  height: 27px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -14px;
  margin-top: -7px;
  background-image: url(../../../images/lunchbox/lunchbox_hero_icons.png);
  background-position: 0px 0px; }

.features > li:hover > a .heroIcon-media_1 {
  background-position: 0px -27px; }

.features > li > a .heroIcon-media_2 {
  background-position: -27px 0px; }

.features > li:hover > a .heroIcon-media_2 {
  background-position: -27px -27px; }

.features > li > a .heroIcon-media_3 {
  background-position: -54px 0px; }

.features > li:hover > a .heroIcon-media_3 {
  background-position: -54px -27px; }

.features > li > a .heroIcon-media_4 {
  background-position: -81px 0px; }

.features > li:hover > a .heroIcon-media_4 {
  background-position: -81px -27px; }

/*doc
---
title: Hightlight
name: Hightlight
category: index
---


```html_example

<div class="highlight">Text Example</div>

```
*/
.highlight {
  background-color: yellow; }

.labelPair_inlineBlock {
  display: inline-block; }

.mix-labelPair_pushLeft {
  margin-left: 15px; }

.mix-labelPair_box {
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 2px;
  padding-bottom: 2px;
  background: #cccccc;
  background: rgba(130, 121, 112, 0.15); }

.mix-labelPair_box > * {
  display: inline-block;
  vertical-align: middle; }

.labelPair-label {
  font-weight: bold; }

.labelPair-label_withField {
  margin-right: 10px; }

.labelPair-data_pushRight {
  margin-right: 10px; }

/*doc
---
title: Recipe
name: Recipe
category: index
---


```html_example


```
*/
/* ---------------------------------------------------------------------
 Recipe Links
------------------------------------------------------------------------ */
.recipe-links {
  margin-bottom: 15px; }

/* ---------------------------------------------------------------------
 Recipe Extras
------------------------------------------------------------------------ */
.recipe-extras {
  overflow: hidden;
  margin-bottom: 20px;
  border-top: 1px solid #518542; }

.recipe-extras-icon:before {
  content: "\e60e";
  font-family: "basic-lunchbox";
  color: #fc6719;
  margin-right: 6px; }

.recipe-extras > * {
  float: left;
  border: 1px solid #518542;
  border-top: none;
  padding: 10px;
  min-height: 18px; }

.recipe-extras > * + * {
  border-left: none;
  line-height: 18px; }

/* ---------------------------------------------------------------------
 Recipe Calcuations
------------------------------------------------------------------------ */
.recipe-calculations {
  border-bottom: 1px solid #e2e2d8;
  padding-bottom: 10px; }

.recipe-calculations-row {
  display: table;
  width: 100%; }

.recipe-calculations-row > li {
  display: table-cell;
  vertical-align: middle; }

/* ---------------------------------------------------------------------
 Recipe Content
------------------------------------------------------------------------ */
.recipe-content {
  font-size: 14px;
  line-height: 1.4; }

.recipe-content-info {
  padding-left: 15px; }

.recipe-content-info-servings {
  text-transform: uppercase;
  font-style: italic;
  margin-bottom: 10px; }