/* --------------------------------------------------------------
	Cross-browser normalization
-------------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, main { display: block; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q > , <blockquote > . */
/* blockquote:before, blockquote:after, q:before, q:after { content: ""; } */
/* blockquote, q { quotes: "" ""; } */

/* Remove annoying border on linked images. */
a img { border: none; text-decoration: none; }

/* PC FF3 adds an outline to Flash objects */
a, object { outline: none; }

/* apply a natural box layout model to all elements */
html { -webkit-box-sizing: border-box; box-sizing: border-box; }
*, :before, :after { -webkit-box-sizing: inherit; box-sizing: inherit; }


/* -------------------------------------------------------------- 
  	Standard elements defaults 
-------------------------------------------------------------- */

/* Text Elements
-------------------------------------------------------- */
html {
	text-rendering: optimizelegibility;
	overflow-y: scroll;
}
body {
	font: 400 15px/21px helvetica, arial, sans-serif;
	color: #666;
	margin: 0;
	padding: 20px 10px;
/* 	background: #D59A40; */
	background: #fff;
}
body > * {
	max-width: 1000px;
	margin: 0 auto;
}
body:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    background: transparent url("../images/design/bfa-background-1.jpg") no-repeat scroll 50% 100%;
    background-size: cover;
    bottom: 12.5%;
}

p { margin: 0 0 18px; }
a {
	text-decoration: underline;
	background-color: transparent/* IE10 */;
}
a,
a:visited { color: #45aed5; }

a:hover,
a:active,
a:focus { color: #f8a039; }

a[href$='.pdf']:after { content: ' (pdf)'; }
.btn a[href$='.pdf']:after,
.imageCaption a[href$='.pdf']:after { display: none; }

hr {
	color: #9d9fa2;
	background-color: #9d9fa2;
	color: #ccc;
	background-color: #ccc;
	border: 0;
	height: 2px;
	clear: both;
	margin: 1em 0;
}
address { font-style: normal; }
blockquote {
	quotes: "\201C""\201D""\2018""\2019";
	margin: 20px 0;
	color: #666;
}
blockquote p { font: 400 12px/18px Georgia,serif; }
blockquote span {
	font-style: normal;
	font-size: .8em;
}
blockquote p:after,
blockquote p:before {
	color: #ccc;
	font-size: 2em;
	font-family: georgia,serif;
	line-height: 0;
	vertical-align: -0.25em;
}
blockquote p:before { content: open-quote; }
blockquote p:after { content: close-quote; }

strong,b { font-weight: 700; }
em { font-style: italic; }
small,.small { font-size: .8em; }

/* Following six styles generally do not need to be edited */
sup, sub    { line-height: 0; }
dfn 		{ font-style: italic; }
del 		{ color:#666; }
pre 		{ white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* 48,32,24,18,9 */

.video-embed {
	width: 100%;
/* 	float: right; */
/* 	margin-left: 5%; */
	margin-bottom: 10px;
}
.video-container {
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	position: relative;
}

.video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/* Headings
-------------------------------------------------------- */
h1, h2, h3, h4, h5 { margin: 0 0 12px; }
h2, h3, h5 { color: #58595b; }
h1, h4 { color: #000; }
h1 { font: 400 32px/32px helvetica, arial, sans-serif;margin-bottom: 16px; }
h2 { font: 400 24px/24px helvetica, arial, sans-serif;margin-top: 12px; }
h3 { font: 400 18px/24px helvetica, arial, sans-serif;margin-top: 18px; }
h4 { font: 700 15px/21px helvetica, arial, sans-serif; }
h5 { font: 700 12px/18px helvetica, arial, sans-serif; }
h6 { font: 700 12px/18px helvetica, arial, sans-serif; }

h3:first-child { margin-top: 0; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #00aeef;
	text-decoration: none;
}
h1 a { font-size: .6em; }
h4 a { color: inherit !important; }

@media (max-width: 640px) {
	h1 { font: 400 24px/24px helvetica, arial, sans-serif;}
	h2 { font: 400 20px/24px helvetica, arial, sans-serif; }
	h3 { font: 400 18px/24px helvetica, arial, sans-serif; }
	h4 { font: 700 14px/18px helvetica, arial, sans-serif; }
	h5 { font: 700 12px/18px helvetica, arial, sans-serif; }
	h6 { font: 700 12px/18px helvetica, arial, sans-serif; }
}

/* 	Lists
-------------------------------------------------------- */
ul,ol {
	margin: 0 1.2em 20px;
	padding: 0;
	list-style: disc;
	color: #666;
}
ol {
	list-style: decimal;
	padding: 0;
}
ol ul,ol ol {
	margin: 0;
	padding: 0;
}
li {
	margin: 0;
	padding: 0;
	line-height: 1.5em; 
}
ul ul { margin-bottom: 0; }
ol.orderedList li span { color: #666; }
ol.orderedList { color: #58595B; }

/* 	Tables
-------------------------------------------------------- */
.content table {
	table-layout: fixed;
	width: 100%;
}
.content table td { padding: 5px 10px; }

/* 	Forms
-------------------------------------------------------- */
form { margin: 0; }
fieldset {
	border: 1px solid #e4e4e4;
	margin: 2em 0 0 0;
	padding: 0;
}
fieldset ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
fieldset li {
	clear: both;
	padding: .5em;
}
input { outline: none; }
input, textarea { border-radius: 0; }
option { padding: 5px; }
.fieldArea { 
	position: relative;
	margin: 6px 0;
	clear: both;
	padding: 0 10px 0 33%;
}
.fieldArea [name] { 
	font: 400 11px/14px arial,helvetica,sans-serif;
	border: 1px solid #DADADA;
	height: 30px;
	width: 100%;
	padding: 4px;
	outline: medium none;
	overflow: hidden;
	max-width: 320px;
}
.fieldArea [name][type="radio"], 
.fieldArea [name][type="file"], 
.fieldArea [name][type="checkbox"] { 
	background: none;
	border: none;
	box-shadow: none;
	display: initial;
	height: auto;
	max-width: 100%;
	padding: 0;
	width: auto;
}
.fieldArea select[name] { border-radius: 0 !important; }
.fieldArea textarea[name] { 
	overflow: auto;
	font-family: inherit;
	height: 8em;
	padding: 4px 8px;
}
.fieldArea label {
    text-align: right;
    display: block;
    width: 50%;
    line-height: 1;
    padding: 9px 20px 9px 10px;
    position: relative;
    margin-left: -50%;
    float: left;
}

/* container registration */
fieldset.column-2 {
	margin-left: -10px;
	margin-right: -10px;
}
fieldset.column-2 legend {
	padding: 0 10px;
	font-weight: 400;
}
fieldset.column-2 .fieldArea {
	width: 50%;
	clear: none;
	float: left;
	padding: 0 10px;
}
.wide-label .fieldArea { padding: 0 10px 0 10px; }
.wide-label .fieldArea label .requiredMarker { position: static; }
.wide-label .fieldArea label {
	margin-left: 0;
	text-align: left;
	float: none;
	width: auto;
	padding: 9px 0;
}
.wide-label .fieldArea [name] { max-width: none; }

/* TODO: locate */
.bodyFieldArea label,
.summaryFieldArea label {
	float: none;
	text-align: left;
}
.bodyFieldArea iframe,
.summaryFieldArea iframe {
	width: 100%;
	height: 350px;
}

@media (max-width: 460px) {
	fieldset { padding: 10px; }
	.fieldArea {
	    padding: 0;
	    margin: 0 0 5px;
	}
	.fieldArea [name] {
		font-size: 16px;
		max-width: 420px;
	}
	.fieldArea label {	
	    margin: 0;
	    width: auto;
	    display: block;
	    text-align: left;
	    float: none;
	    padding: 9px 0 9px 0;
	}
}

/* Forms - Misc
-------------------------------------------------------- */
.aiValueField { display: none; }
.requiredMarker,
label .required { color: #DF4545; margin-right: -8px; }
form input.protect { display: none; }


/* Forms - Errors and Messages
-------------------------------------------------------- */
[class*='message']:before { 
	font: 1em/1 "iconFont";
	color: #fff;
	display: block;
	position: absolute;
	text-align: center;
	
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: grayscale;
}
[class*='message'][class*='error']:before { content: "\e904"; }
[class*='message'][class*='fatal']:before { content: "\e900"; }
[class*='message'][class*='info']:before  { content: "\e903"; }
[class*='message'][class*='warn']:before  { content: "\e904"; }

/* Block Message */
.messages { 
	margin: 0 0 24px;
	padding: 0 0 0 100px;
	position: relative;
	box-shadow: 0 1px 3px rgba(85,84,80,0.4);
}
.messages:before { 
	font-size: 70px;
	margin: -35px 0 0 -35px;
	left: 50px;
	top: 50%;
	width: 70px;
}
.messages .inner {
	background: #fff;
	padding: 20px;
	min-height: 80px;
}
.messages p:first-child { margin-top: 0; }
.messages ul { padding-left: 0; }
.messages[class*='error'] { background: #CC3F29; }
.messages[class*='fatal'] { background: #CC3F29; }
.messages[class*='info']  { background: #0090c7; }
.messages[class*='warn']  { background: #f2b230; }


/* Inline Message */
.message { 
	display: block;
	text-align: left;
	margin-top: 6px;
	font-size: 13px;
	padding: 8px 10px 8px 45px;
	position: absolute;
	background: #FFF;
	box-shadow: 0 1px 3px rgba(85,84,80,0.5);
	left: 33%;
	right: 10px;
	z-index: 100;
	max-width: 320px;
}
.message:before { 
	font-size: 22px;
	padding: 8px 2px;
	top: -3px;
	bottom: -1px;
	width: 32px;
	left: -1px;
	margin-right: 5px;
}
.message:after { 
	position: absolute;
	left: 0;
	bottom: 100%;
	content: "";
	border-width: 11px 16px;
	border-style: solid;
	border-color: transparent;
	margin: 0 0 3px -1px;
}
.message[class*='error']:before { background: #CC3F29; }
.message[class*='fatal']:before { background: #CC3F29; }
.message[class*='info']:before { background: #0090c7; }
.message[class*='warn']:before { background: #f2b230; }
.message[class*='error']:after { border-bottom-color: #CC3F29; }
.message[class*='fatal']:after { border-bottom-color: #CC3F29; }
.message[class*='info']:after { border-bottom-color: #0090c7; }
.message[class*='warn']:after { border-bottom-color: #f2b230; }
.fieldArea.containsMessages { position: relative; }
.fieldArea.containsError [name] { border-color: #CC3F29; }
.fieldArea.containsFatal [name] { border-color: #CC3F29; }
.fieldArea.containsInfo  [name] { border-color: #0090c7; }
.fieldArea.containsWarn  [name] { border-color: #f2b230; }
.fieldArea.containsError [name]:focus { box-shadow: 0 2px 0 0 #CC3F29; }
.fieldArea.containsFatal [name]:focus { box-shadow: 0 2px 0 0 #CC3F29; }
.fieldArea.containsInfo  [name]:focus { box-shadow: 0 2px 0 0 #0090c7; }
.fieldArea.containsWarn  [name]:focus { box-shadow: 0 2px 0 0 #f2b230; }
.js .fieldArea .message { 
	display: block;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateY(4px ) /* safari */;
	-ms-transform: translateY(4px ) /* IE9 */;
	transform: translateY(4px );
	transition: opacity 100ms ease-out, visibility 100ms ease-out, transform 100ms ease-out;
}
.js .fieldAreaFocus .message,
.js .fieldAreaHover .message { 
	display: block;
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0) /* safari */;
	-ms-transform: translateY(0) /* IE9 */;
	transform: translateY(0);
	transition: opacity 200ms ease-out, visibility 200ms ease-out, transform 200ms ease-out;
}

@media (max-width: 460px) { .message { left: 0; } }

/* --------------------------------------------------------------
	Components

	Grid
	Media
	Alignment
	Images
	Page Navigation
	Bread Crumbs
	Buttons
	Pagination
	Wait Component
	Search Form
	Listing
-------------------------------------------------------------- */
/* 	Grid
-------------------------------------------------------- */
.grid { margin: 0 -10px;overflow:hidden; }
.grid > * {
	float: left;
	padding: 10px;
	margin: 0;
}
.columns-2 > * { width: 50%; }
.columns-3 > * { width: 33.333%; }
.columns-4 > * { width: 25%; }
.columns-6 > * { width: 16.6667%; }

/* 	Media
-------------------------------------------------------- */
.media { 
	display: table;
	table-layout: fixed;
	width: 100%;
}
.media > .mediaImage {
    display: table-cell;
    padding: 0 18px 0 0;
    vertical-align: top;
}
.media > * {
    display: table-cell;
    vertical-align: middle;
}

/* 	Alignment
-------------------------------------------------------- */
.txtC {text-align:center;}
.txtL {text-align:left;}
.txtR {text-align:right;}
.txtT {vertical-align:top;}
.txtB {vertical-align:bottom;}
.txtM {vertical-align:middle;}

/* Images
-------------------------------------------------------- */
img {
	max-width: 100%;
	display: inline-block;
	height: auto;
	max-height: 100%;
}
img[align="left"],
img[align="right"]  { max-width: 33%; }
img[align="left"]   { margin: 0 20px 12px 0; }
img[align="right"]  { margin: 0 0 12px 20px; }
img[align="middle"] {
	margin: 12px auto;
	display: block;
}
p img[align] {
	margin-top: 9px;
	margin-bottom: 9px;
}

img.northwest { background-position:   0%   0%; }
img.west      { background-position:   0%  50%; }
img.southwest { background-position:   0% 100%; }
img.north     { background-position:  50%   0%; }
img.center    { background-position:  50%  50%; }
img.south     { background-position:  50% 100%; }
img.northeast { background-position: 100%   0%; }
img.east      { background-position: 100%  50%; }
img.southeast { background-position: 100% 100%; }

.imageCaption {
	color: #666;
	font: 400 italic 10px/1.5 helvetica,arial,sans-serif;
	display: block;
}
.imageCaption > * { display: block; }
.imageCaption span { margin: 6px 10px; }
.imageCaption[align] { max-width: 33%; }
.imageCaption[align="left"] {
	margin: 0 20px 12px 0;
	float: left;
}
.imageCaption[align="right"] {
	margin: 0 0 12px 20px;
	float: right;
}
.imageCaption img {
	margin: 0;
	padding: 4px;
	border: 1px solid #ccc;
	max-width: 100%;
}

@media screen and (max-width: 560px ) {
	p img,
	img[align],
	.imageCaption[align] { 
		clear: both;
		display: block;
		float: none;
		margin: 12px 0;
		max-width: 100%;
		width: auto !important;
	}
}


/* 	TODO: Page Navigation			
-------------------------------------------------------- */

/* 	Bread Crumbs  
-------------------------------------------------------- */
.breadcrumbs { display: none; }

/* Button Styles
-------------------------------------------------------- */
.btn,
.btn:before,
.btn > * {
	position: relative;
	z-index: 1;
}
.btn {
    font: 700 12px/1 helvetica, arial, sans-serif;
	display: inline-block;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	vertical-align: middle;

	cursor: pointer;
}
.btn > * {
	border: none;
	background: none;
	display: block;
	margin: 0;
	padding: 8px 20px 6px;
	text-decoration: inherit;
	color: inherit;
	/* input */
	cursor: inherit;
	font: inherit !important;
	height: inherit;
   	text-shadow: inherit;
	text-transform: inherit;
}
form .btn { margin: 10px 0; }

.btn-wrap .btn {
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 0;
}
.btn-wrap .btn + .btn { margin-left: 1em;margin-bottom: 0; }

/* button skin */
.btn,
.btn:visited {
	color: #fff;
    background: #e35d38;
    border-radius: 4px;
    overflow: hidden;
    border: none;
	transition: all 400ms linear 0s;
}
.btn > * {
	padding-left: 30px;
    border: 1px solid #e35d38;
    border-radius: 4px;
}
.btn:before {
	font: 12px/20px "iconFont",sans-serif;
	content: "\e908";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 22px;
	line-height: 28px;
	text-align: center;
	background: #c75232;
	color: #ffab94;
	z-index: 100;
	height: 100%;
	transition: all 400ms linear 0s;
}
.btn:focus,
.btn:hover {
    background: #fff;
    color: #e35d38;
    border-radius: 4px;
}
.btn:focus:before,
.btn:hover:before { background: #e35d38; }
.btn:active,
.btn:active:before {
	color: #ffab94;
	background: #c75232;
}


.btn.donate {
	background: #43A786;
	color: rgba(255,255,255,.8);
	margin: 0 0 18px;
}
.btn.donate > * { border-color: #43A786; }
.btn.donate:before {
	color: rgba(255,255,255,.8);
	background: #388B6E;
}
.btn.donate:focus,
.btn.donate:hover {
	background: #fff;
    border-color: #43A786;
    color: #43A786;
}
.btn.donate:focus:before,
.btn.donate:hover:before {
    background: #43A786;
    color: #fff;
}
.btn.donate:active,
.btn.donate:active:before {
	color: rgba(255,255,255,.8);
	background: #388B6E;
}

/* Pagination
-------------------------------------------------------- */
.pagination { margin: 10px 0; }
.pagination a,
.pagination .ellipse { 
    line-height: 30px;
    margin: 0 5px;
    padding: 0 10px;
    text-align: center;
}
.pagination .btn:before { display: none; }
.pagination > a:first-child { margin-left: 0; }
.pagination .pageInfo {
    float: right;
    margin: 0 10px;
}
.paginator { margin: 0 5px; }
.paginator a {
	padding: 0 5px;
	margin: 0;
	text-decoration: none;
	font-weight: 500;
}
.paginator a.current { color: #272727; }

/* Wait component
-------------------------------------------------------- */
.wait { 
	position: relative;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.btn .wait {
	background: inherit;
	padding-right: 28px;
	padding-left: 40px;
	z-index: 0;
}
.btn .wait i {
	margin-left: -17px;
	margin-right: 10px;
}
.btn.wait { background: #62463a; }
.wait i:before { 
	content: "\e905";
	font: 400 14px/16px "iconFont" !important;

	/* Better Font Rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	position: absolute;
	width: 16px;
	height: 16px;
	right: 6px;
	bottom: 0;
	top: 50%;
	padding: 0;
	text-align: center;
	margin-top: -8px;

	-webkit-animation: spin 1s infinite linear;
	animation: spin 1s infinite linear;
}
.waiting input { position: absolute; }

/* Search Form Styles 
-------------------------------------------------------- */
.search-form {
	background: #EEE;
	position: relative;
	z-index: 1;
	border-radius: 5px;
	overflow: hidden;
	padding: 0 72px 0 0;
	margin-bottom: 5px;
}
.search-form fieldset {
	margin: 0;
	border: 0;
}
.search-form input {
    background: none;
    border: none;
    height: 16px;
    display: block;
    vertical-align: middle;
    border-radius: 0;
}
.search-form input[type="text"] {
    width: 100%;
    font-size: 10px;
    line-height: 26px;
    color: #444;
    padding: 0 8px;
    box-shadow: none;
    height: 26px;
}
.search-form input[type="text"]:focus {
    color: #000;
    outline: none;
}
.search-form input[type="submit"], 
.search-form .waiting {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    text-shadow: none;
    width: 72px;
    background: #bababa;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    height: 26px;
}
.search-form .search { display: block; }
.search-form.inline-search-form {
	display: block;
	float: none;
	max-width: 320px;
	width: 100%;
}
.search-form .wait { display: block; }
.search-form .wait span { display: none; }
.search-form .wait i {
    height: 26px;
    display: block;
}
.search-form .wait i:before {
	left: 50%;
	margin-left: -8px;
}

/* 	Listing
-------------------------------------------------------- */
.listing {
	border-top: 1px solid #ccc;
	padding: 10px 0;
	margin: 10px 0;
}
.listing:first-child { border-top: 0; }

/* 	Misc
-------------------------------------------------------- */
.word-limit-50 { min-height: 100px; }
.word-limit-100 { min-height: 160px; }
.word-limit-200 { min-height: 310px; }
.word-limit-300 { min-height: 460px; }

.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alighRight { text-align: right; }
.alignCenter { text-align: center; }
.clear { clear: both; }
.clearLeft { clear: left; }
.clearRight { clear: right; }

/* TODO */
.clearFix:after,li.required:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.fullLink {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}
img.scalable {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("../images/email/alpha.gif") no-repeat scroll 50% 50%;
    background-size: auto 100%;
    width: 100%;
    height: 100%;
}

/* 	CTA
-------------------------------------------------------- */
.cta {
    border-radius: 5px;
    position: relative;
    min-height: 240px;
    padding: 5px 10px;
    transition: background 300ms ease 0ms;
}
.ctaInner {
	color: #fff;
	z-index: 2;
    position: absolute;
    bottom: 5px;
    top: 5px;
    left: 10px;
    right: 10px;
}
.ctaImage {
	position: absolute;
	z-index: 0;
	opacity: 0.25;
}
.ctaHead {
    color: #FFF;
    text-decoration: none;
    font: 400 22px/1.2 helvetica, arial, sans-serif;
    display: block;
    text-align: center;
    min-height: 2.5em;
    margin-top: 20px;
}
.ctaBody {
    margin: 10px auto 0;
	min-height: 3em;
	max-width: 320px;
}
.ctaLink {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	left: 0;
	text-decoration: none;
}
.cta .fullLink:after,
.cta span.arrow {
	content: '';
	width: 35px;
	height: 35px;
	display: block;
	position: absolute;
	right: 5px;
	bottom: 10px;
	background: transparent url(../images/design/icon_circle.png) 0 0 no-repeat;
}

/* variations */
.interactive-cta .cta {
    border-radius: 8px;
    padding: 8px;
    height: 180px;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}
.interactive-cta .ctaInner  {
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
.interactive-cta .ctaInner > * { position: static; }
.interactive-cta .ctaHead {
	font-size: 30px;
	min-height: 0;
	margin: 0 0 8px;
}
.interactive-cta .ctaBody {
	min-height: 0;
	max-height: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 300ms ease 0s, max-height 450ms ease 0s;
}
.interactive-cta .ctaBody p { margin-bottom: 8px; }
.interactive-cta .ctaImage {
	opacity: 0;
	filter: grayscale(100%);
	background-size: cover;
	transition: opacity 450ms ease 200ms;
}
.interactive-cta .fullLink:after { display: none; }

/* states */
.cta:hover .ctaImage {
    opacity: 0.25;
    transition: opacity 300ms ease-out 0ms;
}
.interactive-cta .cta:hover .ctaBody {
	max-height: 300px;
	opacity: 1;
}

/* skin */
.forest  { background: #43a786; }
.blue    { background: #689da6; }
.green   { background: #89b946; }
.violet  { background: #9e1f63; }
.purple  { background: #574fa1; }
.indigo  { background: #295187; }

.forest:hover  { background: #50C89E; }
.blue:hover    { background: #7DBDC8; }
.green:hover   { background: #95C84B; }
.violet:hover  { background: #C82781; }
.purple:hover  { background: #6A62C8; }
.indigo:hover  { background: #3C79C8; }

/* Grouping */
.cta-grid {
	margin: 20px -4px 40px;
	padding: 15px 0;
	border: 0 solid #9D9FA2;
	border-width: 2px 0;
}
.cta-grid > * {
    text-align: center;
    color: #FFF;
    padding: 4px;
    position: relative;
}
h1 + .cta-grid {
    border-top: 0;
    margin-top: 0;
    padding-top: 5px;
}
.cta-grid:last-child { border-bottom: 0; }


@media (max-width: 900px) { .interactive-cta .ctaHead { font-size: 22px; } }
@media (max-width: 730px) {
	.interactive-cta .cta-grid { margin: 0; }
	.interactive-cta .cta-grid > * {
		width: auto;
	    float: none;
	    padding: 5px 0;
    }
	.interactive-cta .cta {
		display: block;
		padding: 16px 20px;
		height: auto;
		min-height: 0;
    }
	.interactive-cta .cta .ctaInner > *,
	.interactive-cta .cta:hover .ctaInner > * {
		min-height: 0;
	    max-height: none;
	}
	.interactive-cta .cta .ctaBody {
   	    max-width: 320px;
	    margin: 0 auto;
	    opacity: 1;
    }
    .interactive-cta .cta .ctaHead {
   	    max-width: none;
	    margin: 8px auto 10px;
	}
	.interactive-cta .cta .ctaImage,
	.interactive-cta .cta :hover.ctaImage { opacity: .15; }
}
@media (min-width: 640px) and (max-width : 900px), (max-width: 530px){
	.hasFMA .cta-grid[class*="columns-3"] {
		margin-left: 0;
		margin-right: 0;
	}
	.hasFMA .cta-grid[class*="columns-3"] > * {
		float: none;
		width: auto;
		padding: 5px 0;
	}
	.hasFMA .cta-grid[class*="columns-3"] .cta,
	.hasFMA .cta-grid[class*="columns-3"] .ctaInner > *  { min-height: 0; }
	.hasFMA .cta-grid[class*="columns-3"] .cta      { padding: 16px 20px; }
	.hasFMA .cta-grid[class*="columns-3"] .ctaInner,
	.hasFMA .cta-grid[class*="columns-3"] .ctaLink  { position: static; }
	.hasFMA .cta-grid[class*="columns-3"] .ctaHead  { margin-top: 8px; }
	.hasFMA .cta-grid[class*="columns-3"] .ctaBody  { margin-bottom: 20px; }
}
@media (max-width: 460px) {
	.hasFMA .cta-grid[class*="columns-"] {
		margin-left: 0;
		margin-right: 0;
	}
	.hasFMA .cta-grid[class*="columns-"] > * {
		float: none;
		width: auto;
		padding: 5px 0;
	}
	.hasFMA .cta-grid[class*="columns-"] .cta,
	.hasFMA .cta-grid[class*="columns-"] .ctaInner > *  { min-height: 0; }
	.hasFMA .cta-grid[class*="columns-"] .cta      { padding: 16px 20px; }
	.hasFMA .cta-grid[class*="columns-"] .ctaInner,
	.hasFMA .cta-grid[class*="columns-"] .ctaLink  { position: static; }
	.hasFMA .cta-grid[class*="columns-"] .ctaHead  { margin-top: 8px; }
	.hasFMA .cta-grid[class*="columns-"] .ctaBody  { margin-bottom: 20px; }
}





.bookOptions { height: 218px; }

.books {
	padding: 0 45px 0 5px;
	margin-right: 5px;
	float: left;
	width: 66px;
	padding: 1em;
}
.books a {
	font-size: 1em;
	padding: 0;
	height: 2.5em;
	display: block;
	color: #fff;
	text-decoration: none;
}
.btn.books span.arrow {
	width: 35px;
	height: 35px;
	display: block;
	position: absolute;
	right: 5px;
	top: .7em;
	background: transparent url(../images/design/icon_circle.png) 0 0 no-repeat;
}
.btn.books span.arrow {
	position: relative;
	width: auto;
	background-position: 60% 0;
	right: 0;
	top: 3px;
}
.btn.narrow {
	margin: .5em;
	padding: .25em;
}
.btn.narrow.dkBlue { padding: 1.5em 1em; }
.btn.narrow a {
	font-size: 1.5em;
	letter-spacing: .06em;
}
.btn.narrow b {
	color: #c7e0ef;
	font-weight: normal;
}
.btn h3 {
	text-transform: uppercase;
	color: #fff;
	font-size: .8em;
	font-weight: normal;
	margin: .3em -0.5em;
	letter-spacing: -0.05em;
}
.btn h3.specialInitiatives {
	margin: 0;
	background: url(../images/design/special-initiatives.gif) 9px 2px no-repeat;
	height: 23px;
	text-indent: -9999px;
}
.btn ul {
	margin: 1em 0 0 1em;
	padding-left: 0;
	text-align: left;
	color: #fff;
	font-size: .8em;
	list-style: none;
}
.btn.narrow ul a {
	font-size: 1em;
	letter-spacing: 0;
	color: #fff;
	text-decoration: none;
}
.africaRecipients {
	width: 161px;
	background: url(../images/callouts/african_recipients-bottom.jpg) bottom left no-repeat;
}
.africaRecipients ul {
	background: url(../images/callouts/african_recipients-top.jpg) 0 0 no-repeat;
	margin: 0;
	list-style-position: inside;
	padding: 125px 0 1.5em 1.5em;
}
.africaRecipients ul li { color: #FFF; }
.africaRecipients ul li a {
	color: #FFF;
	text-decoration: none;
	font-size: 0.9em;
}
.africaRecipients ul li a:hover { text-decoration: underline; }


/* -------------------------------------------------------------- 
	TODO: hot fix
-------------------------------------------------------------- */
body > .wrapper {
	position: relative;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
	padding: 20px;
	min-height: 1080px;
}
@media (max-width: 730px) { body > .wrapper { padding: 24px 16px; }  }
@media (max-width: 460px) {
	main,
	article,
	article.hasSub .content { overflow: visible !important; }
}

/* -------------------------------------------------------------- 
	Header
-------------------------------------------------------------- */
header {
	position: relative;
	margin: -20px -20px 0;
}
#logo {
	display: block;
	overflow: hidden;
	background: #fff;
	padding: 20px 20px 10px;
	border-radius: 8px;
	z-index: 100;
	position: relative;
}
#logo a {
    display: block;
    transition: height 200ms ease 0s;
    height: 70px;
    float: left;
}
#logo img {
    display: block;
    max-height: 100%;
}
@media ( max-width : 730px ) {
	header {
		position: absolute;
	    left: 0;
	    right: 0;
	    top: 0;
	    margin: 0;
	}
}

/*  Nav: Primary
-------------------------------------------------------- */
#menu-overlay {
	display: none;
	background: #fff;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
}
.menu {
	font: 400 10px/15px helvetica, arial, sans-serif;
	margin: 0 20px;
}
.menu ul {
	list-style: none;
	overflow: hidden;
	margin: 0;
}
.menu li { margin-bottom: 0;float: left; }
.menu a {
	text-align: center;
	font: inherit;
	color: inherit;
	padding: 0 10px;
	text-decoration: none;
	display: block;
	position: relative;
}
.menu span {
	display: inline-block; 
	white-space: nowrap;
}

/* Secondary Nav */
.nav-secondary {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 100;
}
.nav-secondary ul { margin-right: -10px; }
.nav-secondary li { position: relative; }
.nav-secondary li:before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: #6f6451;
}
.nav-secondary li:first-child:before { display: none; }
.nav-secondary a { color: #45aed5; }


/* Primary Nav */
.nav-primary {
    background: #e35d38;
    overflow: hidden;
    border-radius: 5px;
    margin: 0;
    padding: 0;
}
.nav-primary > ul {
	display: table;
	width: 100%;
	padding: 6px;
}
.nav-primary li {
	display: table-cell;
	float: none;
	line-height: 1.2;
	vertical-align: middle;
	transition: margin 200ms ease 0s;
}
.nav-primary a {
    padding: 5px 12px;
    display: block;
    z-index: 100;
    color: #FFF;
}
.nav-primary .has-child { position: relative; }
.nav-primary .child-wrap { display: none; }
.nav-primary .node > a { font-weight: 700; }
.nav-primary .node > a:hover { color: #f19433; }

/* States */
.nav-primary .auto-node-overview { display: none; }
.nav-primary .node-contact-us { display: none; }

@media ( max-width : 730px ){
	#logo a {
	    height: 50px;
	    z-index: 100;
	}
	#logo { margin: 0 0 10px; }
	#menu-overlay {
		display: block;
		height: 0;
		opacity: 0;
		padding: 0;
		transition: height 0ms ease 1000ms, opacity 500ms ease 500ms;
	}
	.menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		margin: 0;
		padding: 0;
		backface-visibility: hidden;
		overflow-y: scroll;
		transition: height 0ms ease 2000ms;
		height: 0;
	}
	.menu-inner {
		background: #E35D38;
		min-width: 320px;
		position: relative;
		padding: 310px 20px 50px;
		height: auto;
		left: 0;
		right: 0;
		top: 0;
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		transform: translateY(-100%);
        transition: all 1000ms cubic-bezier(0.82,-0.3,0.32,1.3) 0s;
	}
	.menu ul {
		overflow: hidden;
		padding: 10px 0;
	}
	.menu li { float: none; }
	.menu a {
		padding: 12px 30px 12px 0;
		display: block;
		position: relative;
		font-size: 20px;
		line-height: 1;
		margin: 0 auto;
		text-align: left;
		color: #fff;
	}
	.menu span {
		display: block;
		max-width: 265px;
		margin: 0;
		position: relative;
		padding: 0;
	}
	
	.nav-secondary,
	.nav-primary {
		position: static;
		max-width: 420px;
		margin: 0 auto;
		background: none;
		border-radius: 0;
	}
	.nav-secondary { display: none; }
	.nav-primary { display: block; }
	.nav-primary > ul { 
		display: block;
		padding: 0;
	}
	.nav-primary li {
		display: block;
		margin-left: 0;
		transition: none;
	}
	.nav-primary .child-wrap { display: block; }
	.nav-primary .child-wrap ul {
		box-shadow: none !important;
		width: 100%ç;
		margin: 0;
		border: none;
		padding: 0 0 10px;
	}
	.nav-primary .child-wrap li { 
		position: relative;
		padding: 0;
	}
	.nav-primary .child-wrap a {
		font-size: 14px;
		color: #272727;
		padding: 6px 10px 6px 15px;
	}
	.nav-primary .child-wrap .child-wrap ul {
	    padding: 0 0 0 18px;
	    position: relative;
	    margin: 0;
	}

	.nav-primary .auto-node-overview,
	.nav-primary .node-contact-us { display: block; }
	.nav-primary .node > a { font-weight: 400; }
	.nav-primary .node > a:hover { color: #fff; }

	/* gradient separators */
	.nav-primary .node { position: relative; }
	.nav-primary .node:before,
	.nav-primary .node:after {
		content: "";
		position: absolute;
		right: 0;left: 0;
		height: 1px;
		opacity: .25;
	}
	.nav-primary .node:before {
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -ms-linear-gradient(left,     rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* IE10+ */
		background: linear-gradient(to right,     rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* W3C */
		top: 0;
	}
	.nav-primary .node:after {
		background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -ms-linear-gradient(left,     rgba(0,0,0,0) 0%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 100%); /* IE10+ */
		background: linear-gradient(to right,     rgba(0,0,0,0) 0%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 100%); /* W3C */
		top: -1px;
		opacity: .05;
	}
	.nav-primary .node:first-child:before,
	.nav-primary .node:first-child:after { display: none; }
	
	/* indicator: arrows */
	.nav-primary .has-child > a:after {
		font: 12px/20px "iconFont",sans-serif;
		content: "\25b8";
		position: absolute;
		right: 5px;
		top: 50%;
		margin-top: -10px;
		display: block;
		color: #F4BEAF;
		color: rgba(255,255,255,.6);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
		transition: all 100ms ease 0ms;
	}
	.nav-primary .has-child.open > a:after{
		color: #fff;
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	/* indicator: bullets */
	.nav-primary .child-wrap a:before {
		content: "";
		opacity: 1;
		position: absolute;
		background: #F4BEAF;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 100%;
		top: 50%;
		left: 4px;
		width: 4px;
		height: 4px;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.nav-primary .child-wrap a.active:before {
		background: #fff;
		width: 8px;
		height: 8px;
	}	

   	/* opening animation */
   	.js .nav-primary .child-wrap .child-wrap.active {
	    max-height: 0;
	    overflow: hidden;
	    transition: max-height 400ms ease 0ms;
	}	

	/* state */
	#menu:target .menu,
	.menu-open   .menu {
		height: 100%;
		transition: height 0ms ease 0ms;
	}
	#menu:target .menu-inner,
	.menu-open   .menu-inner {
		-webkit-transform: translateY(-200px);
		-ms-transform: translateY(-200px);
		transform: translateY(-200px);
	}

	#menu:target #menu-overlay,
	.menu-open   #menu-overlay { 
		height: 100%;
		opacity: 0.8;
		transition: opacity 500ms ease 0ms;
	}
	#menu:target  .nav-primary .child-wrap .child-wrap.active,
	.js.menu-open .nav-primary .child-wrap .child-wrap.active {
	    max-height: 1000px;
	    transition: max-height 500ms ease 1200ms;
	}
	#menu:target #logo,
	.menu-open   #logo {
	    position: fixed;
	    margin: 0;
	    left: 10px;
	    right: 10px;
	    top: 20px;
	}
	.menu-open body {
		overflow: hidden;
		max-height: 100%;
	    position: fixed;
	    margin: 0;
	    left: 0;
	    right: 0;
	    top: 0;
		bottom: 0;
	}
	.menu-open[class*='android-os-2'] body { position: relative; }
	.menu-open[class*='android-os-2'] .menu { height: auto; }
}

/* 	Nav: Triggers
-------------------------------------------------------- */
.triggers {
	position: absolute;
	display: none;
	top: 20px;
	right: 20px;
    left: auto;
	width: 100%;
	z-index: 100;
}
.triggers a { color: #58595B; }
.triggers span { display: none; }
.trigger {
	text-align: left;
	text-decoration: none;
	position: absolute;
	padding: 0;
	top: 0;
	font: 400 16px/25px arial,sans-serif;
}
.trigger .label {
	position: relative;
	display: inline-block;
	line-height: 40px;
	font-size: 12px;
	overflow: hidden;
	vertical-align: middle; 
	transition: max-width 1000ms ease 0ms;
}
.trigger[class*="menu-"] {
	right: 0;
	opacity: 1;
	transition: opacity 100ms ease 0ms;
}
.trigger[class*="menu-"] [class^="icon-"] {
	display: inline-block;
	margin-left: 10px;
	right: 20px;
	vertical-align: middle;
	font-size: 20px;
}
.trigger[class*="menu-"] .icon-close { color: #000; }
.trigger[class*="menu-close"] {	opacity: 0;color: #000;z-index: -1; }
.trigger[class*="menu-open"] .label { max-width: 0; }


/* state: no-JS */
.no-js .triggers .label { max-width: 100px; }
#menu:target .triggers .trigger[class*="menu-open"] 	{ opacity: 0; z-index: -1; }
#menu:target .triggers .trigger[class*="menu-close"] 	{ opacity: 1; z-index:  1; transition: opacity 100ms ease 200ms; }

/* state: JS */
.scrolled .trigger[class*="menu-open"] .label { max-width: 100px; }
.menu-open .triggers .trigger[class*="menu-open"] 	{ opacity: 0; z-index: -1;}
.menu-open .triggers .trigger[class*="menu-close"] 	{ opacity: 1; z-index:  1; transition: opacity 100ms ease 200ms; }

@media (max-width: 730px ) { 
	.triggers { display: block; }
	#menu:target .triggers,
	.menu-open .triggers {
	    position: fixed;
	    top: 40px;
	    right: 30px;
	    left: auto;
	}
	.no-js .nav-primary .child-wrap {
	    display: block;
	    height: 0;
	    overflow: hidden;
	}
	.no-js .nav-primary .child-wrap.active { height: auto; }
}


/* -------------------------------------------------------------- 
	Footer
-------------------------------------------------------------- */
.designCredit a {
	color: inherit;
	text-decoration: inherit;
}
footer { 
	text-align: center;
	color: #000;
	max-width: 768px;
	margin-top: 20px;
	font-size: .8em;
}
footer a { 
	text-decoration: none;
	color: #e35d38;
}
footer a:visited { color: #e35d38; }
footer a:hover { color: #6f6451; }
footer p { margin-bottom: 0; }
footer .separator { color: #6f6451;margin: 0 3px; }

/* Vcard
-------------------------------------------------------------- */
footer .vcard-grid { margin-bottom: 20px; }
footer .vcard-grid:after {
    display: block;
    content: "";
    width: auto;
    border-bottom: 1px solid rgba(0,0,0,.2);
    margin: 0 10px;
}
footer .vcard {
    text-align: left;
    font-size: 13px;
    width: auto;
    max-width: 50%;
    min-width: 25%;
    padding: 20px;
}
.footer .vcard a {
	color: inherit;
	text-decoration: none;
}
footer .vcard .separator { color: inherit;margin: 0; }
footer .logo, 
footer .vcard-fax, 
footer .vcard-email, 
footer .fn, 
footer .geo, 
footer .directions,
footer .vcard-url { display: none; }
footer .adr [itemprop="streetAddress"] { display: block; }
footer .adr [itemprop="streetAddress"] + * .separator { display: none; }

/* Social Media Links
-------------------------------------------------------------- */
.social {
    overflow: hidden;
    margin: 0;
    clear: both;
    text-align: center;
}
.social li {
    display: inline-block;
    margin: 8px 6px;
}
.social a {
	display: block;
	font: 0/0 a;
	text-decoration: none;
	margin-right: 5px;
}
.social a:before {
    display: block;
	font: normal 400 18px/1 iconFont;
	height: 20px;
    width: 20px;
    margin: 0 auto 6px;
    padding: 3px;
    text-align: center;
    vertical-align: top;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.social a:active:before,
.social a:hover:before { color: #000; }

.social a[href*="twitter"]:before  { content: "\f099"; }
.social a[href*="facebook"]:before { content: "\f09a"; }
.social a[href*="google"]:before   { content: "\f0d5"; }
.social a[href*="linkedin"]:before { content: "\f0e1"; }
.social a[href*="youtube"]:before  { content: "\f167"; }
.copyright { text-align: right; }
.copyright > span {
    display: block;
    white-space: nowrap;
}


@media ( max-width: 730px ) {
	footer .vcard {
	    max-width: none;
	    min-width: 0;
	    float: none;
	    text-align: center;
	    padding: 10px 0;
	}
}


/* -------------------------------------------------------------- 
	Main
-------------------------------------------------------------- */
main { 
	overflow: hidden;
	margin-top: 8px;
	min-height: 600px;
}

.summary {
	font: 400 1.2em/1.2 helvetica, arial, sans-serif;
	color: #333;
}

aside {
	position: relative;
    overflow: hidden;
    padding: 0 40px 0 5px;
	z-index: 1;
	font-size: .8em;
}

.hasFMA {
	float: left;
	width: calc(100% - 150px);
	overflow: hidden;
}
.hasFMA article { margin-left: 6px; }

.content-fma {
	/* FMA = flexible messaging area. This column doesn't hold any real content */
    overflow: hidden;
    padding: 0 5px 0 0;
}
.content-fma a {
	display: block;
	text-align: right;
}
.content-fma a img {
	display: inline-block;
	margin-bottom: 5px;
}

.hasSub article {
	float: right;
	width: calc(100% - 205px);
	min-width: 66%;
	z-index: 0;
	margin-left: 0;
	position: relative;
}
.hasSub, .hasFMA { overflow: hidden; }

@media ( max-width: 730px ) {
	main { margin-top: 70px; }
	.hasFMA {
		float: none;
		width: auto;
	}
	.content-fma {
		text-align: justify;
		border-top: 2px solid #CCC;
		padding-top: 20px;
		margin-top: 10px;
	}
	.content-fma a { 
		display: inline-block;
		vertical-align: middle;
	}
	.content-fma::after {
	    content: "";
	    display: inline-block;
	    width: 100%;
	}
}
@media ( max-width: 640px ) {
	.hasSub article {
		float: none;
		width: auto;
	}
	aside {
		border-top: 2px solid #CCC;
		margin-top: 10px;
		padding: 0 20px;
	}
}

/* 	Local Nav
-------------------------------------------------------- */
.local-nav { margin-bottom: 10px; }
.local-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.local-nav ul ul { margin: 0 0 0 10px;  }
.local-nav a {
	color: #d3533c;
	text-decoration: none;
	font-weight: bold;
}
.local-nav a:hover { color: #F8A039; }
@media ( max-width: 640px ) { .local-nav { display: none; } }

/* 	TODO: Article
-------------------------------------------------------- */

/* 	TODO: Aside
-------------------------------------------------------- */
aside .vcard-address-street { display: block; }
aside .vcard-address-extended { display: block; }
aside .location + .location { margin-top: 20px; }
aside .vcard .fn,
aside .vcard .type,
aside [itemprop="streetAddress"] .separator,
aside [itemprop="streetAddress"] + * > .separator { display: none; }
aside .vcard + p { margin-top: 10px; }

/* 	TODO: Lists
-------------------------------------------------------- */
/* 	TODO: Masthead
-------------------------------------------------------- */
/* 	TODO: List Items
-------------------------------------------------------- */
/* 	TODO: Icons
-------------------------------------------------------- */
/* 	Banner
-------------------------------------------------------- */
.banner { 
	overflow: hidden;
	margin-bottom: 20px;
}

@media screen and (max-width: 480px) {

	._project .banner { 
		 display: none;
	}	
}


.banner > * {
	border-radius: 15px;
	position: relative;
	height: 150px;
	border-radius: 15px 0 15px 15px;
}

.bannerImage {
	float: right;
	margin-left: 10px;
	width: 24%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.bannerImage + .bannerImage {
	width: 40%;
	border-radius: 15px 15px 0 15px;
	transition: width 200ms ease 0s;
}

.bannerMessage {
	overflow: hidden;
	background-color: #f8a039;
	font-size: 12px
}
.bannerMessage .inner {
	height: 6em;
	position: absolute;
	top: 50%;
	margin-top: -4em;
}
.bannerMessage p {
	font-size: 1.8em;
	line-height: 1.2em;
	color: #fff;
	margin: 0 1em 1em 1em;
}

@media ( max-width: 960px ) { .bannerImage + .bannerImage { width: 36%; } }
@media ( max-width: 840px ) { .bannerImage + .bannerImage { width: 24%; } }
@media ( max-width: 730px ) {
	.bannerImage {
		margin-left: 0;
		border-radius: 0 15px 0 0;
	}
	.bannerImage + .bannerImage {
		margin-left: 10px;
		border-radius: 15px 0 0 15px;
	}
	.bannerImage,
	.bannerImage + .bannerImage { width: 20%; }
}
@media ( max-width: 640px ) {
	.bannerImage,
	.bannerImage + .bannerImage { width: 15%; }
}
@media ( max-width: 480px ) {
	.bannerImage,
	.bannerImage + .bannerImage {
		width: 0;
		margin: 0;
	}
}
@media ( max-width: 360px ) {
	.banner > * { height: auto; }
	.bannerMessage .inner {
		position: static;
		margin: 20px 20px 16px;
		height: auto;
	}
	.bannerMessage p { 
		margin: 0;
		font-size: 1.6em;
		text-align: center;
	}
	.bannerMessage p + p { margin-top: 20px; }
}
	
	
/* -------------------------------------------------------------- 
	Specific forms
-------------------------------------------------------------- */
[name].cardNumberExpirationDate { width: 4em; }
[name].expDateMonth,
[name].expDateYear {
	width: auto;
	margin-right: .5em;
}

	
	
/* -------------------------------------------------------------- 
	Page Specific Styles
-------------------------------------------------------------- */
body.full #pageContent {
	float: left;
	width: 810px;
}
body.full #pageContentInner { padding-left: 0; }
body.full #subContent { display: none; }


/* 	Entry
-------------------------------------------------------------- */
._entry .cta-grid {
	border: 0;
	padding: 0;
	margin: 3px -5px;
	font-size: 12px;
}
._entry .columns {
	overflow: hidden;
	margin: 26px -10px 40px;
}
._entry .columns > * { padding: 0 20px; }
._entry .columns .columnL {
	float: left;
	width: 66.666%;
	border-right: 1px solid #ccc;
}
._entry .columns .columnL+* {
	overflow: hidden;
	text-align: center;
}
._entry blockquote {
	margin-top: 36px;
	text-align: left;
}
._entry .photo {
	width: 100%;
	height: 0;
	padding-bottom: 36%;
	background: #eee url("../images/design/loading.gif") no-repeat 50% 50%;
	background-size: 70px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
._entry .photo img {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 100%;
}
._entry .photo img.hidden { display: none; }
._entry .success-stories {
	border-top: 1px solid #ccc;
	padding: 20px 10px;
}
._entry blockquote p {
	font-size: 1.2em;
	line-height: 1.3333;
	display: inline-block;
	margin-bottom: 8px;
}
._entry blockquote p:after,
._entry blockquote p:before {
	font-size: 1em;
	vertical-align: -0.05em;
}
.partner {
	margin: 10px -5px;
	text-align: center;
	font-size: 0;
}
.partner:after {
	display: block;
	clear: both;
	float: none;
}

._entry .partner > a {
    height: auto;
    vertical-align: middle;
    max-width: 26%;
    max-height: 100px;
    margin: 0 6%;
    margin-bottom: 20px;
}


._entry .partner > * {
    max-width: 80px;
    margin: 0 5px;
    max-height: 66px;
    display: inline-block;
}
._entry .partner + .partner > a { height: 40px; }
._entry .partner a img { max-height: 100%; }

._entry .story-wrap { margin-top: 20px; }
._entry .story-wrap .cycle-pager {
    position: absolute;
    top: -20px;
    text-align: right;
    width: 100%;
	font-size: 24px;
	color: #ccc;
}
._entry .story-wrap .cycle-pager span {
	display: inline-block;
	margin: 0 0 0 5px;
	cursor: pointer;
}
._entry .story-wrap .cycle-pager-active { color: #000; }

.js ._entry .story + .story { visibility: hidden; }
._entry .story.media { display: table !important; }
._entry .story.media .mediaImage { width: 33.333%; }

@media (max-width: 730px) { ._entry .cta-grid { margin: 3px 0; } }

@media ( max-width: 640px ) {
/* 	._entry .photo { padding-bottom: 50%; } */
	._entry .columns .columnL {
		float: none;
		width: auto;
		margin-right: 0;
	}
	._entry .story.media { display: block !important; }
	._entry .story.media > * {
		display: block;
		width: auto;
	}
	._entry .story.media .mediaImage {
		width: auto;
		max-width: 320px;
		padding-right: 0;
		margin: 0 auto 8px;
	}
}


/* 	Books and Computers
-------------------------------------------------------------- */
._books-computers .booksNavWrap {
	overflow: hidden;
	margin: 0 -3px 20px;
	text-align: center;
}
._books-computers .booksNav {
	width: 93px;
	height: 56px;
	display: inline-block;
	text-indent: -9999px;
	margin: 3px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
._books-computers .booksKindergarten   { background-image: url(../images/design/books-kindergarten.gif); }
._books-computers .booksPrimaryJunior  { background-image: url(../images/design/books-primary-junior.gif); }
._books-computers .booksPrimarySenior  { background-image: url(../images/design/books-primary-senior.gif); }
._books-computers .booksSecondaryBooks { background-image: url(../images/design/books-secondary.gif); }
._books-computers .booksPostBooks      { background-image: url(../images/design/books-post-secondary.gif); }
._books-computers .booksGeneral        { background-image: url(../images/design/books-general-other.gif); }

    text-align: right;
._books-computers .contentNav {
    border-right: 1px solid #333;
    padding-right: 20px;
    margin: 0;
    overflow: hidden;
}
._books-computers .contentNav h3 { margin-top: 0; }
._books-computers .contentNav ul {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
._books-computers .contentColumn {
	border: 0 solid #333;
	border-width: 0 0 0 1px;
	padding: 0 0 0 20px;
	float: right;
	width: 66.6666%;
	margin: 0 0 20px -1px;
}
._books-computers .contentColumn h1 {
	border: 0;
	margin: 0;
	color: #50a8b7;
}
._books-computers .contentColumn h2 { margin: 0; }

@media ( max-width: 900px ) and (min-width: 640px) {
	._books-computers .hasSub.hasFMA .contentNav {
	    padding: 0;
	    text-align: left;
	    margin: 0 0 10px;
	    border: none;
	}
	._books-computers .hasSub.hasFMA .contentNav ul {
	    margin: 0 1.2em 20px;
		list-style: outside disc;
	}
	._books-computers .hasSub.hasFMA .contentColumn {
	    width: auto;
	    float: none;
		border-color: #ccc;
		border-width: 2px 0 0;
		padding: 20px 0 0;
	}
}
@media ( max-width: 640px ) {
	._books-computers .hasSub.hasFMA .contentNav {
	    padding: 0;
	    text-align: left;
	    margin: 0 0 10px;
	    border: none;
	}
	._books-computers .hasSub.hasFMA .contentNav ul {
	    margin: 0 1.2em 20px;
		list-style: outside disc;
	}
	._books-computers .hasSub.hasFMA .contentColumn {
	    width: auto;
	    float: none;
		border-color: #ccc;
		border-width: 2px 0 0;
		padding: 20px 0 0;
	}
}

/* 	Donate to Project
-------------------------------------------------------------- */
#chooseAProject ul.regions {
	margin: 0;
	list-style: none;
}
#chooseAProject ul.regions a {
	text-decoration: none;
	font-size: 0.9em;
	color: #000;
}
#chooseAProject ul.regions a:hover { text-decoration: underline; }
#chooseAProject ul.regions a.regionName {
	font-weight: 700;
	font-size: 1.2em;
}
#chooseAProject ul.regions ul.projects {
	margin: 0;
	list-style: none;
}

#chooseAProject ul.regions li.region { margin-bottom: 1em; }
#progressBar {
	background: url(../images/donations/AfricaProjectMeter_empty.gif) 0 0 no-repeat;
	width: 314px;
	height: 54px;
	position: relative;
	z-index: 1;
	margin: 1.5em 0;
}
#currentProgress {
	background: url(../images/donations/AfricaProjectMeter.gif) 0 0 no-repeat;
	position: absolute;
	width: 314px;
	height: 54px;
	z-index: 2;
}
#countryContent {
	border-top: 1px solid #000;
	margin-top: 2em;
	text-align: left;
}
.project h3 {
	font-size: 1.7em;
	font-weight: 700;
	margin-top: 2em;
}
.project h4 {  }

.imageCaption .donate {
	margin: 0.5em 0;
	display: block;
}



/* 	jQuery Slider
-------------------------------------------------------------- */
.ui-slider {
	position: relative;
	width: 66px;
	height: 300px;
	background: url(../images/design/DonateFunds_SlidingScale.gif) bottom left no-repeat;
}
.ui-slider-handle {
	width: 22px;
	height: 22px;
	position: absolute;
	z-index: 10;
	right: 0;
	background: green;
	background: url(../images/design/DonateFunds_Slider.gif) bottom center no-repeat;
}
#slider {
	float: left;
	width: 66px;
	margin-right: 20px;
}
#donateValues {
	overflow: hidden;
	position: relative;
	padding-bottom: 300px;
	margin-bottom: 20px;
}
#donateValues img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    max-width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* 	Donate Page
-------------------------------------------------------------- */
.page-funds .steps {
	padding: 1em 0 1em 30px;
	border-top: 2px solid #9D9FA2;
}
.page-funds .steps p strong {
	color: #9D9FA2;
	font-size: 1.5em;
}
.page-funds .steps p small {
	font-size: 0.8em;
	display: block;
}
.page-funds span.step {
	font-size: 2em;
	color: #666;
	float: left;
	line-height: 1;
	margin-left: -30px;
}
.page-funds p.donateSummary { color: #43a786; }
.page-funds #donateAmount { clear: both; }
.page-funds #donateAmount .btn { margin-top: 0; }
.page-funds #hearAboutUs { padding: 20px 0; }
.page-funds #hearAboutUs textarea {
	width: 300px;
	max-width: 300px;
	height: 100px;
}
.page-funds #donateAmountDescription {
	clear: left;
	text-align: center;
}
.page-funds #donateAmount div p { display: inline; }
.page-funds #donateAmount .inputText {
	width: 4em;
	margin-left: 0.5em;
}
.page-funds #donateAmount\:payPeriod { margin-left: 20px; }

@media ( max-width: 420px ) {
	.page-funds #slider,
	.page-funds #donateAmount div strong,
	.page-funds #donateAmount div small,
	.page-funds #donateValues { display: none; }
	.page-funds #donateAmountDescription {
		padding-left: 100px;
		position: relative;
		text-align: left;
		clear: none;
	}
	.page-funds #donateAmountDescription p {
		display: block;
	    position: absolute;
	    left: 0;
	}
}
	
/* 	Site Search
-------------------------------------------------------------- */
td.selected { font-weight: 700; }
.search-result {
	border-bottom: 1px dashed #ccc;
	padding-top: 1em;
	padding-bottom: 1em;
}
.search-result-title {
	font-size: 1.2em;
	text-decoration: none;
}
.scroller { margin: 10px 0; }
.scroller .page { margin: 0 2px; }
.scroller .current {
	color: black !important;
	font-weight: 700;
	text-decoration: none;
}


/* 	Honor a Friend
-------------------------------------------------------------- */
#pageContent .honorAFriendGifts {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}
.honorAFriendGifts li {
	background-color: #ECF3D4;
	font-weight: 700;
	padding: 5px 5px 5px 15px;
	margin: 0 0 5px 0;
}
.honorAFriendGifts li.odd { background-color: #D8DFC3; }
.honorAFriendGifts li a {
	text-decoration: none;
	color: #666;
}
.honorAFriendGifts li a:hover { text-decoration: underline; }


/* 	CAPTCHA
-------------------------------------------------------------- */
fieldset input.captchaComponentInput { float: none; }
.successWrap h3 {
	border-top: 1px solid #CCC;
	padding-top: 20px;
}


/* Popups
-------------------------------------------------------------- */
#popup {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 980;
	display: none;
	opacity: 0;
}
#popup .overlay {
	position: absolute;
	background: url(../images/design/popup-background.png) 0 0 repeat;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	z-index: 990;
}
#popupGraphic {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	z-index: 995;
}
.close-area {
	width: 800px;
	margin: 0 auto;
}
a.close {
	display: block;
	width: 30px;
	height: 30px;
	padding: 0;
	background-color: rgba(0, 0, 0, .8);
	color: #FFF !important;
	text-align: center;
	line-height: 30px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	position: absolute;
	z-index: 999;
	margin-left: 770px;
}
a.close:hover {
	background-color: rgba(0, 0, 0, .1);
	color: #252525 !important;
}
#popupGraphic img {
	display: inline-block;
	width: 800px;
	margin: 0 auto;
	box-shadow: 0 0 30px 2px #000;
}


/* 	Newsletter Signup Form
-------------------------------------------------------------- */
.newsletter-sign-up-form { margin-bottom: 10px; }
.newsletter-sign-up-form fieldset { padding: 20px; }
.newsletter-sign-up-form .fieldArea {
	clear: both;
	margin-bottom: 15px;
}
.newsletter-sign-up-form .btn { margin: 0; }


/*	Consignee Form
-------------------------------------------------------------- */
.consigneeUploadFieldArea { padding-left: 0; }
.consigneeUploadFieldArea label {
	margin-left: 0;
	text-align: left;
	width: auto;
}
.consigneeUploadFieldArea [name] { width: auto; }
.captainAddressFieldArea   textarea[name],
.consigneeAddressFieldArea textarea[name] { height: 4em; }









#chooseAProject {
    overflow: hidden;
    z-index: 1;
    position: relative;
}
#chooseAProject h3:first-child span { display: none; }
.map-wrap + #chooseAProject h3:first-child span { display: inline; }


.map-wrap {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 0;
    padding-bottom: 80%;
}
.map-wrap:before {
	position: absolute;
	z-index: 0;
	opacity: 0;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../images/design/loading.gif") no-repeat 50% 50%;
	background-color: rgba(255, 255, 255, 0.75);
	background-size: 15%;
    transition: opacity 100ms linear 0ms;
}
.map-wrap .map {
    position: relative;
    width: 140%;
    left: 50%;
    position: absolute;
    top: 0;
	opacity: 1;
    z-index: 1;
    -webkit-transform: translate(-50%, 0%) scale(1);
    -ms-transform: translate(-50%, 0%) scale(1);
    transform: translate(-50%, 0%) scale(1);
	transition: opacity 2000ms ease 0ms;
}
.map-wrap .map path { stroke: #fff; }
.map-wrap .map path:hover {
	cursor: pointer;
}.map-wrap .map path:active {
	background: black;
}
.map-wrap > h3 {
	position: relative;
	z-index: 5;
}

/* states */
.map-wrap.inactive:before {
    transition: opacity 4000ms ease 0ms;
	z-index: 10;
	opacity: 1;
}
.map-wrap.inactive .map { opacity: 0; }
.map-wrap.resize:before {
	opacity: 1;
	z-index: 2;
}
.map-wrap.resize .map {
    opacity: 0.5;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
    -ms-transform: translate(-50%, -50%) scale(0.6);
    transform: translate(-50%, -50%) scale(0.6);
    top: 56%;
}

@media ( max-width: 480px ) {
	.map-wrap { overflow: hidden; }
	.map-wrap > h3 { display: none; }
	.map-wrap:after {
		content: "";
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		background: transparent;
		z-index: 100;
	}
	.map-wrap + #chooseAProject h3:first-child span { display: none; }
}


._region ol li {
	padding: 6px 0;
	line-height: 1.2;
}

@media ( max-width: 480px ) {
	iframe {
	    max-width: 100%;
		height: auto;
		width: auto;
		min-height: 180px;
	}
}
.page-clips-videos .video {
    position: relative;
    max-width: 100%;
    margin-bottom: 20px;
}
.page-clips-videos .video:before {
    padding-bottom: 56%;
    position: relative;
    width: 100%;
    display: block;
    content: '';
}
.page-clips-videos .video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


.btn-wrap .progressBar {
	position: relative;
	background: url(../images/donations/AfricaProjectMeter_empty.gif) 0 0 no-repeat;
	
	display: inline-block;
	margin: 0 0 0 20px;
	vertical-align: middle;
	z-index: 1;
}
.btn-wrap .currentProgress {
	background: url(../images/donations/AfricaProjectMeter.gif) 0 0 no-repeat;
	position: absolute;
	z-index: 2;
}
.btn-wrap .progressBar,
.btn-wrap .currentProgress {
	width: 157px;
	height: 27px;
	background-size: auto 100%;
}