/* ------------------------------------------------------------------------- */

/*
 *	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 -------------------------------------------------------------------- */