/*
Theme Name: JPB Foundation
Theme URI: http://blenderbox.com
Description: A theme for the JPB Foundation website
Author: Dan Steadman (Blenderbox)
Version: 1.0
*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* HTML5 display definitions */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

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

audio:not([controls]) { display: none; }

[hidden] { display: none; }

/* Base */
html { font-size: 100%; overflow-y: auto; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { background: #fff; margin: 0; }

body, button, input, select, textarea { color: #444; font: 15px arial, verdana, sans-serif; line-height: 1.22; }

/* Typography */
abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { border: 0 #e2e6e6 solid; border-top-width: 1px; clear: both; display: block; height: 1px; margin: 10px 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family:h5bp.com/ */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }

q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height:h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

h1, h2, h3, h4, h5, h6 { color: #000; font-weight: bold; margin: 0; padding: 0; text-rendering: optimizeLegibility; }

/* Lists */
dd { margin: 0 0 0 40px; }

ul, ol { padding: 10px 10px 10px 30px; }

ul li { background: transparent url(../images/bullet.png) 0 6px no-repeat; list-style: none; padding: 0 0 8px 10px; }

ol li { list-style: decimal; margin: 0 0 0 10px; padding: 0 0 8px 0; }

nav ul, nav ol, nav li { background: none; margin: 0; padding: 0; }

blockquote { color: #76888a; font-size: 16px; font-style: italic; padding: 10px 0; }

blockquote p { padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/* Correct overflow not hidden in IE9 */
svg:not(:root) { overflow: hidden; }

/* Figures */
figure { margin: 0; }

/* Forms */
form { margin: 0; }

fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; font-weight: bold; }

legend { border: 0; *margin-left: -7px; padding: 0; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

button, input { line-height: normal; *overflow: visible; }

button:active, .button:active { position: relative; top: 1px; }

/* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */
table button, table input { *overflow: auto; }

button, select, input[type="button"], input[type="reset"], input[type="submit"], input[type='file'] { cursor: pointer; }

button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; }

/* Consistent box sizing and appearance  */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }

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

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input[type='text'], input[type='email'], input[type='password'], input[type='url'], input.input-field, textarea { border: 1px solid #bccccd; padding: 2px; }

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

/* Colors for form validity */
/*Tables*/
table { border-collapse: collapse; border-spacing: 0; padding: 10px 0; }

td, th { padding: 5px; }

th { font-weight: bold; }

td { vertical-align: top; }

::-moz-selection { background: #579da0; color: #fff; text-shadow: none; }

::selection { background: #579da0; color: #fff; text-shadow: none; }

::-webkit-input-placeholder { color: #282218; }

::-moz-placeholder { color: #282218; }

input.placeholder { color: #282218; }

p, ul li { color: #534744; font-size: 15px; font-style: normal; line-height: 22px; margin: 0; }

p { font-family: Georgia, Times, "Times New Roman", serif; }

p.small { color: #534744; font-size: 13px; font-style: normal; line-height: 18px; margin: 0px 0 12px; }

article ul li { font-family: Georgia, Times, "Times New Roman", serif; }

blockquote { border-top: 1px solid #766d6a; color: #766d6a; font: italic 15px/24px Georgia, Times, "Times New Roman", serif; padding-top: 18px; margin: 41px 0 36px 24px; }

h1, h2 { font-family: "brandonlight", arial, sans-serif; font-weight: 400; }

h3, h5, h4, h6 { font-family: "brandonreg", arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { color: #402e00; }

h1, h1 a { font-size: 44px; line-height: 48px; }

h2, h2 a { font-size: 32px; line-height: 36px; }

h3, h3 a { font-size: 24px; line-height: 30px; }

h4, h4 a { font-size: 20px; line-height: 24px; }

h5, h5 a { font-size: 16px; line-height: 24px; text-transform: uppercase; }

h6, h6 a { font: italic 18px/24px Georgia, Times, "Times New Roman", serif; margin: 35px 0 13px; }

a { color: #419639; text-decoration: none; }

a:hover, a:active { outline: 0; }

a:hover { color: #a9a3a1; text-decoration: none; }

a:focus, button:focus, input:focus, label:focus, select:focus, textarea:focus { outline: 1px dotted #c01339; }

a:focus { outline: thin dotted; }

a { -o-transition-duration: .15s; -moz-transition-duration: .15s; -webkit-transition-duration: .15s; transition-duration: .15s; -o-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -o-transition-property: color, background-color; -moz-transition-property: color, background-color; -webkit-transition-property: color, background-color; transition-property: color, background-color; }

.hide { display: none !important; visibility: hidden; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.alert { color: #ff0000; }

.ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }

.bordertop { border-top: 5px solid #534744; }

.fl { float: left; }

.csh { margin-top: 125px; }

.close { letter-spacing: -1px; }

.far { letter-spacing: 1px; }

.bg { position: absolute; width: 100%; z-index: 0; left: 0; }

.bluegreen { height: 265px; background-color: #c4e6e8; top: 485px; }

.gray { height: 570px; background-color: #eeebea; top: 750px; }

.lightgray { height: 600px; background-color: #f8f7f7; top: 1320px; }

.alignleft { float: left; }

.alignright { float: right; }

.caps { font: 13px/18px "brandonbold", arial, sans-serif; text-transform: uppercase; }

/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/
/* Forces backgrounds to span full width, even if there is horizontal scrolling. Increase this if your layout is wider.
 Note: IE6 works fine without this fix.
*/
body { min-width: 976px; }

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_8 { margin-left: auto; margin-right: auto; width: 976px; }

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8 { display: inline; float: left; position: relative; margin-left: 6px; margin-right: 6px; }

.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8 { position: relative; }

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha { margin-left: 0; }

.omega { margin-right: 0; }

/* Grid >> 8 Columns
----------------------------------------------------------------------------------------------------*/
.container_8 .grid_1 { width: 110px; }

.container_8 .grid_2 { width: 232px; }

.container_8 .grid_3 { width: 354px; }

.container_8 .grid_4 { width: 476px; }

.container_8 .grid_5 { width: 598px; }

.container_8 .grid_6 { width: 720px; }

.container_8 .grid_7 { width: 842px; }

.container_8 .grid_8 { width: 964px; }

/* Prefix Extra Space >> 8 Columns
----------------------------------------------------------------------------------------------------*/
.container_8 .prefix_1 { padding-left: 122px; }

.container_8 .prefix_2 { padding-left: 244px; }

.container_8 .prefix_3 { padding-left: 366px; }

.container_8 .prefix_4 { padding-left: 488px; }

.container_8 .prefix_5 { padding-left: 610px; }

.container_8 .prefix_6 { padding-left: 732px; }

.container_8 .prefix_7 { padding-left: 854px; }

/* Suffix Extra Space >> 8 Columns
----------------------------------------------------------------------------------------------------*/
.container_8 .suffix_1 { padding-right: 122px; }

.container_8 .suffix_2 { padding-right: 244px; }

.container_8 .suffix_3 { padding-right: 366px; }

.container_8 .suffix_4 { padding-right: 488px; }

.container_8 .suffix_5 { padding-right: 610px; }

.container_8 .suffix_6 { padding-right: 732px; }

.container_8 .suffix_7 { padding-right: 854px; }

/* Push Space >> 8 Columns
----------------------------------------------------------------------------------------------------*/
.container_8 .push_1 { left: 122px; }

.container_8 .push_2 { left: 244px; }

.container_8 .push_3 { left: 366px; }

.container_8 .push_4 { left: 488px; }

.container_8 .push_5 { left: 610px; }

.container_8 .push_6 { left: 732px; }

.container_8 .push_7 { left: 854px; }

/* Pull Space >> 8 Columns
----------------------------------------------------------------------------------------------------*/
.container_8 .pull_1 { left: -122px; }

.container_8 .pull_2 { left: -244px; }

.container_8 .pull_3 { left: -366px; }

.container_8 .pull_4 { left: -488px; }

.container_8 .pull_5 { left: -610px; }

.container_8 .pull_6 { left: -732px; }

.container_8 .pull_7 { left: -854px; }

@font-face { font-family: 'brandonbold'; src: url("fonts/Brandon_bld.otf"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'brandonlight'; src: url("fonts/Brandon_light.otf"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'brandonreg'; src: url("fonts/Brandon_reg.otf"); font-weight: normal; font-style: normal; }

#logo { background: url(../images/logo.png) no-repeat; position: absolute; top: 70px; left: 17px; width: 229px; height: 72px; }

#main > header { height: 170px; }
#main > header a { color: #534744; font: 23px/18px "brandonlight", arial, sans-serif; }
#main > header a:hover { color: #a9a3a1; }
#main > header nav { position: absolute; top: 103px; right: 0; }
#main > header nav ul li { float: left; padding: 0 20px 0 0; }
#main > header .current-menu-item a, #main > header .current-menu-parent a, #main > header .current-category-ancestor a { background: url(../images/icons/caret.png) bottom center no-repeat; color: #a9a3a1; padding-bottom: 5px; }

#subhead { background-color: #c4e6e8; position: absolute; height: 125px; top: 170px; left: 0; width: 100%; }
#subhead hr, #subhead h1 { width: 955px; margin: 0 auto; }
#subhead hr { height: 0; padding-top: 5px; }
#subhead h1 { margin-top: 55px; padding-left: 10px; text-transform: uppercase; letter-spacing: 2px; }
#subhead a { color: #579da0; }
#subhead a:hover { color: #a9a3a1; }

#main > footer { padding-bottom: 35px; }
#main > footer nav { border-bottom: 1px solid #c7c6c6; margin-top: 45px; padding-bottom: 15px; margin: 45px 5px 0; }
#main > footer nav li { float: left; margin: 0 15px; }
#main > footer nav li:first-child { margin-left: 0; }
#main > footer address { font: 14px/22px "brandonreg", arial, sans-serif; margin-top: 15px; }
#main > footer span { display: block; float: left; padding-right: 20px; }
#main > footer .sosume { color: #a9a3a1; float: right; font: 14px/22px "brandonreg", arial, sans-serif; padding-right: 30px; }

#jpbgallery { overflow: hidden; z-index: 6; height: 405px; position: relative; }
#jpbgallery .img { position: absolute; min-width: 964px; opacity: 0; }
#jpbgallery .img:first-child { opacity: 1; }
#jpbgallery .nav-wrap { position: absolute; }
#jpbgallery h2, #jpbgallery p { color: #534744; }
#jpbgallery h2 { font: 32px/31px "brandonbold", arial, sans-serif; left: 25px; display: inline; }
#jpbgallery p { font: 13px/18px georgia; }
#jpbgallery .nav-wrap { height: 240px; background-color: white; right: 20px; bottom: 25px; width: 390px; opacity: 0.9; filter: alpha(opacity=90); }
#jpbgallery .nav-wrap header, #jpbgallery .nav-wrap .copy, #jpbgallery .nav-wrap footer { padding: 0 22px; }
#jpbgallery .nav-wrap header { padding-top: 22px; height: 70px; }
#jpbgallery .nav-wrap .copy { height: 135px; }
#jpbgallery .nav-wrap footer { height: 37px; background-color: #419639; }
#jpbgallery .nav-wrap footer a { line-height: 37px; color: white; }
#jpbgallery .nav-wrap footer a:hover { color: #a9a3a1; }
#jpbgallery nav, #jpbgallery .prev, #jpbgallery .next { float: right; }
#jpbgallery nav { position: absolute; top: 9px; right: 4px; }
#jpbgallery span { display: block; float: right; border-left: 1px solid #d5d5d5; height: 20px; }
#jpbgallery .prev, #jpbgallery .next { display: block; background: url(../images/buttons/sprites.png) no-repeat; height: 19px; width: 12px; margin: 0 8px; }
#jpbgallery .prev:hover { background-position: 0 -19px; }
#jpbgallery .next { background-position: -12px 0; }
#jpbgallery .next:hover { background-position: -12px -19px; }

#mission > section h5, #areas > section h5, .more h5 { letter-spacing: -1px; }

#mission { padding-top: 25px; margin-bottom: 25px; height: 150px; }
#mission > header { padding: 10px 5px; letter-spacing: -1px; }
#mission p { font: 22px/28px "brandonlight", arial, sans-serif; padding: 10px 20px; }

#areas p, #values p { font: 13px/22px georgia, arial, sans-serif; padding-top: 5px; }

#areas { margin-top: 30px; min-height: 540px; }
#areas > header { margin-top: 35px; }
#areas section { width: 545px; }
#areas h1 { color: #419639; }
#areas div > article { float: left; padding: 20px 0 30px 10px; border-top: 1px solid #c7c6c6; width: 100%; }
#areas div > article:first-child { border-top: 0; }
#areas div > article section { float: left; }
#areas .more { float: right; margin: 20px 25px 0 0; }

#values h5 { margin: 35px 0; }
#values p { color: #766d6a; }
#values .more { float: left; margin-top: 10px; }

#motto { margin-top: 80px; padding: 30px 5px 0; border-top: 1px solid #c7c6c6; height: 130px; }
#motto p { color: #766d6a; font: italic 18px/26px georgia; width: 720px; }

#category, #single, #about, #contact { min-height: 500px; margin-top: 205px; }
#category h1, #single h1, #about h1, #contact h1 { color: #534744; }
#category p, #single p, #about p, #contact p { padding-top: 15px; font-size: 15px; }
#category article, #single article, #about article, #contact article { margin-left: 10px; padding-bottom: 55px; }
#category article.primary, #single article.primary, #about article.primary, #contact article.primary { margin: 0; padding-left: 20px; }
#category article.primary h1, #single article.primary h1, #about article.primary h1, #contact article.primary h1 { padding-bottom: 15px; }
#category article.primary h2, #single article.primary h2, #about article.primary h2, #contact article.primary h2 { color: #534744; font: 29px/22px "brandonreg", arial, sans-serif; padding: 50px 0 12px; }

#category article { padding-bottom: 43px; margin-bottom: 22px; }
#category p { padding-top: 10px; }
#category.pa .more { position: absolute; right: 15px; top: 15px; }
#category.pa article { border-bottom: 1px solid #a9a3a1; position: relative; }
#category.pa article:first-child .more { top: 25px; }
#category.pa article h1 { width: 580px; float: left; }
#category.landing article { margin-bottom: 20px; padding-bottom: 0; }

#about h1 { letter-spacing: 1px; }

#collaborators, #grantees { margin-bottom: 65px; }
#collaborators h1, #grantees h1 { text-transform: capitalize; margin-bottom: 25px; letter-spacing: 1px; }
#collaborators > h1, #grantees > h1 { padding-left: 10px; }
#collaborators p, #grantees p { padding-top: 8px; }
#collaborators article, #grantees article { margin-bottom: 35px; }
#collaborators article.last, #grantees article.last { padding-bottom: 20px; }
#collaborators .more, #grantees .more { margin-left: 10px; }

#page h2 { padding: 30px 0 10px; }
#page.grid_8 { margin-top: 205px; }
#page aside { min-height: 200px; }
#page aside li { list-style-type: none; }

#single .size-large { padding-bottom: 20px; }
#single > article h1 { color: #534744; font: 47px/51px "brandonlight", arial, sans-serif; }
#single.about > article.primary ul { padding-top: 0; margin-top: 0; }
#single.about > article.primary h2, #single.about > article.primary h6 { margin: 0 0 10px; padding: 0 0 10px; }

aside.primary ul { margin: 0; padding: 0; margin-left: 20px; }
aside.primary li { background-image: none; padding-left: 0; padding-bottom: 5px; }
aside.primary li.active, aside.primary li.current-cat { position: relative; }
aside.primary li.active i, aside.primary li.current-cat i { background: url(../images/icons/sprites.png) 0 5px no-repeat; float: left; height: 19px; width: 10px; position: absolute; left: -20px; }
aside.primary li.active a, aside.primary li.current-cat a { color: #579da0; }
aside.primary li a { color: #534744; font: 18px/24px "brandonreg", arial, sans-serif; }
aside.primary li a:hover { color: #a9a3a1; }
.eq-height-grid .grid_2{
	float: none; display: inline-block; vertical-align: top; margin-bottom: 50px;
}
@media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }