------------------------------------------------------------------------- */
 /*
 *  Elements
 *  Elements are the fundamental unit of your design and map directly to
 *  HTML5 elements, like a, span, h1, ul, etc.
 */
 /* ------------------------------------------------------------------------- */
 /*
 *  Fonts first
 */
 
 @import url(http://fonts.googleapis.com/css?family=Droid+Sans);
 @font-face {
   font-family: EsalenHeading;
   src: url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff'), local('Meta-Normal'), local('Tahoma');
 }
 
 @font-face {
   font-family: EsalenSans;
   src: local('Arial'), local('Helvetica');
 }
 
 @font-face {
   font-family: EsalenSerif;
   src: url(http://themes.googleusercontent.com/static/fonts/quattrocento/v4/WZDISdyil4HsmirlOdBRFHhCUOGz7vYGh680lGh-uXM.woff) format('woff'), local('Cambria'), local('Georgia');
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Viewport styles and resets
 */
 
 * {
   margin: 0;
   padding: 0
 }
 
 a img, iframe {
   border: 0
 }
 
 img, object, embed, iframe, video, audio {
   vertical-align: bottom
 }
 
 html, body {
   height: 100%
 }
 
 body {
   font: normal 87.5% EsalenSans, Arial, Helvetica, sans-serif;
   line-height: 1.5;
   background: #e7ebea;
   color: #505050;
 }
 
 @media only screen and (min-width: 768px) {
   body {
     background: #f3f5f4 url(i/bg.jpg) fixed no-repeat center top;
     background-size: 100% auto;
   }
   body.front {
     padding-top: 130px;
     /* To clear the fixed toolbar and nav */
   }
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Links and buttons
 */
 
 a {
   color: #027283;
   text-decoration: none;
 }
 
 a:hover, a:focus {
   color: #d62400;
 }
 
 article p a, article li a {
   font-weight: bold;
 }
 
 a.button {
   display: block;
   display: inline-block;
   font: bold 12px EsalenUI, Arial, Helvetica, sans-serif;
   line-height: 1;
   position: relative;
   padding: 7px 50px 7px 15px;
   background: #679fa6;
   background-image: -webkit-linear-gradient(#8cbbc1, #679fa6);
   background: -ms-linear-gradient(top, #8cbbc1 0%, #679fa6 100%);
   /* IE10+ */
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8cbbc1', endColorstr='#679fa6', GradientType=0);
   /* IE6-9 */
   color: #fff;
   border-bottom: 1px solid #508a90;
   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
   text-transform: uppercase;
 }
 
 a.button:after {
   content: " ";
   height: 4px;
   width: 4px;
   position: absolute;
   top: 10px;
   right: 12px;
   pointer-events: none;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 
 a.button:hover {
   background: #57a4b5;
   background-image: -webkit-linear-gradient(#6ab0bf, #4693a5);
   background: -ms-linear-gradient(top, #6ab0bf 0%, #4693a5 100%);
   /* IE10+ */
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6ab0bf', endColorstr='#4693a5', GradientType=0);
   /* IE6-9 */
   border-bottom: 1px solid #3b7d8c;
 }
 
 a.button[disabled], button[disabled] {
   font-style: italic;
   background: #fff;
   color: #555;
   border: 2px dotted #aaa;
   border-radius: 8px;
   opacity: 0.5;
   box-shadow: none;
   text-shadow: none;
   cursor: default;
 }
 
 a.button[disabled]:after, button[disabled]:after {
   width: 8px;
   height: 0;
   border: 0;
   border-top: 2px dotted #aaa;
   -webkit-transform: none;
 }
 
 a.content-btn {
   display: inline-block;
   position: relative;
   color: white;
   font-weight: bold;
   padding: 9px 23px 9px 11px;
   text-transform: uppercase;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
   font-size: 11px;
   background: #00969C;
   /* Old browsers */
   background: -moz-linear-gradient(top, #62B9BE 35%, #00969C 100%);
   /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(35%, #62B9BE), color-stop(100%, #00969C));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #62B9BE 35%, #00969C 100%);
   /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #62B9BE 35%, #00969C 100%);
   /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #62B9BE 35%, #00969C 100%);
   /* IE10+ */
   background: linear-gradient(to bottom, #62B9BE 35%, #00969C 100%);
   /* W3C */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#62B9BE', endColorstr='#00969C', GradientType=0);
   /* IE6-9 */
 }
 
 a.content-btn:after {
   content: " ";
   height: 4px;
   width: 4px;
   position: absolute;
   top: 12px;
   right: 12px;
   pointer-events: none;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   -moz-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -webkit-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -o-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -ms-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   transform: rotate(45deg) skewY(5deg) skewX(5deg);
 }
 
 a.content-btn:hover {
   background: #62B9BE;
 }
 
 a.big-btn {
   position: relative;
   color: white;
   padding: 10px 55px 10px 13px;
   display: inline-block;
   font: bold 20px EsalenUI, Arial, Helvetica, sans-serif;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
   text-transform: uppercase;
   border-radius: 5px;
   background: #74a9aa;
   background: -moz-linear-gradient(top, #74a9aa 0%, #91babc 50%, #619ca0 51%, #4c8b92 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #74a9aa), color-stop(50%, #91babc), color-stop(51%, #619ca0), color-stop(100%, #4c8b92));
   background: -webkit-linear-gradient(top, #74a9aa 0%, #91babc 50%, #619ca0 51%, #4c8b92 100%);
   background: -o-linear-gradient(top, #74a9aa 0%, #91babc 50%, #619ca0 51%, #4c8b92 100%);
   background: -ms-linear-gradient(top, #74a9aa 0%, #91babc 50%, #619ca0 51%, #4c8b92 100%);
   background: linear-gradient(to bottom, #74a9aa 0%, #91babc 50%, #619ca0 51%, #4c8b92 100%);
 }
 
 a.big-btn:hover {
   background: #6F9FA0;
 }
 
 a.big-btn:active {
   background: #74a9aa;
 }
 
 a.big-btn:after {
   content: " ";
   height: 7px;
   width: 7px;
   position: absolute;
   top: 17px;
   right: 19px;
   pointer-events: none;
   border-top: 3px solid #fff;
   border-right: 3px solid #fff;
   -moz-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -webkit-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -o-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -ms-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   transform: rotate(45deg) skewY(5deg) skewX(5deg);
 }
 /*-- Fitvid custom styles --*/
 
 #landing-sidebar .video-container {}
 /* ------------------------------------------------------------------------- */
 /*
 *  Headings
 */
 
 h1, h2, h3, h4, h5, h6 {
   font-size: 1em;
   font-family: EsalenSans, Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: #000;
   margin: 25px 0 10px;
 }
 
 h1 {
   font-family: 'ff-meta-web-pro', EsalenSans, Arial, Helvetica, sans-serif;
   font-size: 34px;
   line-height: 1.125;
   margin: 0 0 25px;
 }
 
 h2 {
   font-family: 'ff-meta-web-pro', EsalenSans, Arial, Helvetica, sans-serif;
   font-size: 25px;
   line-height: 1.25;
 }
 
 h3, h4, h5 {
   font-weight: bold;
 }
 
 @media only screen and (min-width: 768px) {
   h1 {
     font-size: 40px
   }
 }
 /* Label-style headings */
 
 h2.label, h3.label, h4.label {
   font: normal 15px 'ff-meta-web-pro', Arial, Helvetica, sans-serif;
   line-height: 1.2;
   margin: 0 0 25px;
   color: #898c8b;
   text-transform: uppercase;
 }
 /* Block, box, pane, etc., headings */
 
 .panel-pane > h2, .box > h2, .block > h2, .node-box > h2 {
   margin: 0 0 20px;
 }
 /*-- Landing Asides headings--*/
 
 #landing-sidebar h2 {
   font-family: 'ff-meta-web-pro', EsalenSans, Arial, Helvetica, sans-serif;
   color: #B5B5B5;
   padding: 15px 0px 11px 40px;
   font-size: 15px;
   margin: 0px 0px 1px 0px;
   text-transform: uppercase;
   letter-spacing: 1px;
   background: url(i/header-bg.jpg) repeat-y left top #292929;
   position: relative;
 }
 
 #landing-sidebar h2:after {
   content: '';
   position: absolute;
   top: 0px;
   left: 0px;
   width: 40px;
   height: 46px;
 }
 
 #main #content #landing-sidebar .tab-subjects {
   margin: -20px 0px 15px 0px;
   border-top: none;
 }
 
 #main #content #landing-sidebar .tab-subjects h2 {
   clear: none;
   padding: 0 0 1px 0;
   font-size: 12px;
   margin: 0px 0px 0px 0px;
   text-transform: inherit;
   letter-spacing: normal;
   background: none;
   position: inherit;
   border: none;
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Paragraphs
 */
 
 p {
   max-width: 700px;
   margin: 0 0 20px;
 }
 
 p.highlight {
   font-size: 1.25em;
   color: #738c90;
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Lists
 */
 
 ul, ol {
   margin: 20px 0 20px 25px;
   padding: 0;
 }
 
 li {
   margin: 0 0 5px;
   padding: 0;
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Navigation
 */
 
 nav ul, nav ol {
   margin: 0;
   padding: 0;
 }
 
 nav li {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Form fields
 */
 
 input {
   outline: 0;
 }
 
 input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus {
   box-shadow: 0px 0px 6px #46cedb;
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Media
 */
 
 img {
   max-width: 100%;
   height: auto;
 }
 
 .image {
   font: 0/0 a;
   width: auto;
   height: 200px;
   margin: 15px auto;
   background: transparent no-repeat center;
   background-size: cover;
   color: transparent;
 }
 
 @media only screen and (min-width: 600px) {
   img, .image {
     max-width: auto;
   }
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Quotes
 */
 
 blockquote {
   font: 1.25em EsalenSerif, Georgia, times, serif;
   line-height: 1.6;
   margin: 30px 0 30px 5px;
   padding: 5px 0 5px 30px;
   color: #738c90;
   border-left: 8px solid #dce5e6;
 }
 
 blockquote p {
   margin: 0 0 15px;
 }
 
 blockquote p:last-of-type {
   margin: 0;
 }
 
 blockquote cite {
   font: normal 12px EsalenSans, sans;
   display: block;
   margin: 20px 0 0;
   color: #aaa;
   text-transform: uppercase;
   letter-spacing: 0.3em;
 }
 /* ------------------------------------------------------------------------- */
 /* 
 * Tables
 */
 
 table {
   font-size: 12px;
   position: relative;
   line-height: normal;
   width: 100%;
   margin: 25px 0px;
   border-spacing: 0;
 }
 
 table caption {
   font-weight: normal;
   margin: 0 0 10px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 
 table thead, table tbody, tr.even, tr.odd, table th, table td {
   background: transparent;
   border: 0;
 }
 
 th, td {
   padding: 8px 12px;
 }
 
 thead th {
   font-size: 12px;
   font-weight: bold;
   padding: 10px 12px;
   background: #80979c;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5), transparent 2%, rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0.5));
   color: #fff;
   border-right: 1px solid #879496;
   border-image: -webkit-linear-gradient(transparent, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.25)) 1;
   text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5);
   text-align: left;
 }
 
 thead th:first-child {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 
 thead th:last-child {
   border-right: 0;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 
 table td {
   border-bottom: 1px solid #eee;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   vertical-align: top;
 }
 
 tr:last-child td {
   border-bottom: 0;
 }
 
 tr.even td {
   background: #f5f5f5;
   background: rgba(0, 0, 0, 0.05);
 }
 
 tr.drag td {
   background-color: #fffff0;
 }
 
 tr.drag-previous td {
   background-color: #ffd;
 }
 
 @media only screen and (min-width: 600px) {
   table {
     font-size: 1em;
   }
   th, td {
     padding: 12px;
   }
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Forms
 */
 
 form section {
   margin: 0 0 30px;
 }
 
 fieldset {
   border: 0;
   padding: 0 0 10px;
   margin: 20px 0;
   border-bottom: 1px solid #d7d8d7;
 }
 
 section fieldset:last-child {
   padding-bottom: 0;
   border: 0;
 }
 
 fieldset h3 {
   display: block;
   font: normal 15px EsalenHeading, Arial, Helvetica, sans-serif;
   margin: 0 0 15px;
   color: #808080;
   text-transform: uppercase;
 }
 
 form section > h2 {
   font-size: 1em;
   position: relative;
   margin: 0 0 20px;
   padding: 9px 105px 9px 15px;
   background: #6b959b;
   color: #fff;
 }
 
 form section > h2 .validation-type {
   position: absolute;
   top: 9px;
   right: 15px;
   color: #c9e2e5;
   text-transform: uppercase;
 }
 
 @media only screen and (min-width: 600px) {
   fieldset.compact .control {
     position: relative;
     padding-left: 162px;
   }
   fieldset.compact .control label {
     position: absolute;
     left: 0px;
     top: 5px;
     width: 147px;
     text-align: right;
   }
 }
 /* Controls */
 
 form .control {
   margin: 0 0 10px;
 }
 
 input[type="text"], input[type="email"], input[type="url"], input[type="password"] {
   font: normal 1em EsalenSans, Arial, Helvetica, sans-serif;
   line-height: 1;
   padding: 6px 8px;
   background: #f9f9f9;
   background-image: -webkit-linear-gradient(#f5f5f5, #fff);
   border: 1px solid #cbcbcb;
   outline: 0;
   box-shadow: inset 0px 1px 1px #fff, 0px 1px 1px #fff;
 }
 
 input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, select:focus {
   border-color: #36bed9;
 }
 
 label input[type="checkbox"], label input[type="radio"] {
   margin: 0 4px 0 0;
 }
 
 select, option {
   font-size: 1em;
   padding: 4px;
 }
 
 select {
   background: #f9f9f9;
   background-image: -webkit-linear-gradient(#eee, #fff);
   border: 1px solid #cbcbcb;
   outline: 0;
 }
 
 label {
   display: block;
   font-family: EsalenHeading, Arial, Helvetica, sans-serif;
   color: #000;
   margin: 0 0 5px;
 }
 
 label em {
   font-style: normal;
   color: #aa0000;
 }
 
 button, input[type="submit"] {
   display: block;
   display: inline-block;
   font: normal 18px EsalenUI, Arial, Helvetica, sans-serif;
   line-height: 1;
   position: relative;
   padding: 10px 50px 10px 15px;
   background: #8cbbc1;
   background-image: -webkit-linear-gradient(#8cbbc1, #679fa6);
   color: #fff;
   border: 0;
   border-bottom: 1px solid #508a90;
   border-radius: 3px;
   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
   cursor: pointer;
 }
 
 input[type="submit"] {
   padding: 10px 15px;
 }
 
 button:after {
   content: " ";
   height: 4px;
   width: 4px;
   position: absolute;
   top: 12px;
   right: 12px;
   pointer-events: none;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   -moz-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -webkit-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -o-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   -ms-transform: rotate(45deg) skewY(5deg) skewX(5deg);
   transform: rotate(45deg) skewY(5deg) skewX(5deg);
 }
 
 button:hover, input[type="submit"]:hover {
   background: #679fa6;
   background-image: -webkit-linear-gradient(#679fa6, #679fa6);
 }
 
 button:active, input[type="submit"]:active {
   background: #4B929A;
   background-image: -webkit-linear-gradient(#4B929A, #4B929A);
 }
 /* Option and Opt in Controls */
 
 .options-control label, .opt-in-control label {
   font-family: EsalenSans, Arial, Helvetica, sans-serif;
   color: #444;
 }
 
 .opt-in-control .more {
   font-size: 12px;
   padding: 5px 20px;
 }
 
 .opt-in-control .more p {
   margin: 10px 0;
 }
 
 .form-submit {
   padding: 30px 0 0;
   border-top: 1px solid #d7d8d7;
 }
 
 .form-submit .disclaimer {
   font-size: 12px;
   color: #808080;
   margin: 20px 0 0;
 }
 /* Admin Tweaks */
 
 .page-connect #landing-sidebar .catalog ul.contextual-links {
   padding: 0px;
   margin: 0px;
 }
 
 #landing-footer ul.contextual-links li, .page-connect #landing-sidebar .catalog ul.contextual-links li {
   background: none;
   padding: 0px;
   margin: 0px;
 }
 
 #landing-footer ul.contextual-links li a, .page-connect #landing-sidebar .catalog ul.contextual-links li a, .page-give #landing-sidebar .volunteer ul.contextual-links li a {
   margin: 0.25em 0;
   padding: 0.25em 1em 0.25em 0.5em;
 }
 
 .page-give #landing-sidebar .volunteer a.contextual-links-trigger {
   padding: 0;
   border-bottom: none;
 }
 /* ------------------------------------------------------------------------- */
 /*
 *  Responsive design breakpoints
 *  Use these throughout this CSS file to target different viewport widths
 */
 
 @media only screen and (min-width: 480px) {}
 
 @media only screen and (min-width: 600px) {}
 
 @media only screen and (min-width: 768px) {}
 
 @media only screen and (min-width: 992px) {}
 
 @media only screen and (min-width: 1382px) {}
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {}
 /* @end --------------------------------------------------------------------