/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   Author: Ryan Richard Overbey
   ========================================================================== */

body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Reset default margin values from normalize.css */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/* Undo normalize.css use of 40px left-padding. */
menu,
ol,
ul {
    padding: 0;
}

/* Undo normalize.css use of margins for uls */
dl,
menu,
ol,
ul {
    margin: 0;
}



p,
figcaption {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    line-height: 1.5rem;
    font-family: 'Helvetica', 'Arial', sans-serif;
    margin-top: .75em;
    margin-top: .75rem;
    margin-bottom: .75em;
    margin-bottom: .75rem;
}

img {
    max-width: 100%;
}

#banner,
#content,
footer
 {
    /* padding-left and right == one full column of 16. This means HALF column on each side. */
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
    margin-left: auto;
    margin-right: auto;
}

#banner,
#primary-nav,
#content,
footer {
		min-width: 25.5em;
    max-width: 64em;
}

#banner {
    height: 4.5em; /* == 72px */
    height: 4.5rem; /* == 72px */
    background-color: #333333;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#454f51), to(#333333));
    background-image: -webkit-linear-gradient(top, #454f51, #333333);
    background-image: -moz-linear-gradient(top, #454f51, #333333);
    background-image: -ms-linear-gradient(top, #454f51, #333333);
    background-image: -o-linear-gradient(top, #454f51, #333333);
    background-image: linear-gradient(top, #454f51, #333333);
    max-width: 62em;
    /* Ensure that header text does not wrap */
    overflow: hidden;
}

#banner h1 {
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Calibri','Helvetica Nue','Helvetica',sans-serif;
    font-weight: normal;
    font-size: 1.5em; /* == 24px; at 1.5 leading this is a line height of 36px; to maintain vertical rhythm we need 72px. 72-36 = 36 px of extra space. New context of 36px * .5 = 18px on each side to center header. */
    font-size: 1.5rem; /* == 24px */
        height: 1.5em; /* == 36px */
        height: 2.25rem; /* == 36px */
        padding-top: .75em; /* == 18px */
        padding-top: 1.125rem; /* == 18px */
        padding-bottom: .75em; /* == 18px */
        padding-bottom: 1.125rem; /* == 18px */
        padding-left: 2.5em; /* 24*2.5 = 60px */
        padding-left: 3.75rem; /* == 60px */
    background-image: url('http://pluralism.org/img/harvard-shield-bw-51x60.png');
/*    background-color: red;    */
    background-repeat: no-repeat;
    background-position: left center;
}

#banner h2 {
    color: white;
    font-family: 'Helvetica Nue','Helvetica',sans-serif;
    font-weight: normal;
}

#banner h1 a,
#banner h1 a:visited {
    color: white;
    text-decoration: none;
}

#banner h1 {
    text-transform: uppercase;
}

/*  PRIMARY NAVIGATION */

#primary-nav {
    position: relative;
}

#ocg-nav li,
#about-nav li {
    margin: 0;
    padding: 0;
    text-align: center;
    display: inline-block;
    width: 49.5%;
    padding-top: .75em;
    padding-top: .75rem;
    padding-bottom: .75em;
    padding-bottom: .75rem;
}

#ocg-nav a,
#about-nav a {
    text-decoration: none;
    display: block;
    color: white;
    line-height: 3em;
    margin-top: -.75em;
    margin-bottom: -.75em;
    text-shadow: -1px -1px 1px grey;
}

#primary-nav-ocg {
    background-color: #5f6b7a;
}

#primary-nav-ocg:hover {
    background-color: #3d4958;
}

#primary-nav-landscape {
    background-color: #4ccc00;
}

#primary-nav-landscape:hover {
    background-color: #359003;
}

#primary-nav-religion {
    display: none;
    background-color: #205b96;
}

#primary-nav-religion:hover {
    background-color: #072c60;
}

#primary-nav-encounter {
    background-color: #353224;
}

#primary-nav-encounter:hover {
    background-color: #020003;
}

#primary-nav-resources {
    background-color: #ff0000;
}

#primary-nav-resources:hover {
    background-color: #cd0104;
}

#primary-nav-landscape,
#primary-nav-religion,
#primary-nav-encounter {
    display: none !important;
    visibility: hidden;
}

#about-nav li {
    background-color: #777;
}

#about-nav li:hover {
    background-color: #555;
}

#content {
    background-color: #f3f3f3;
    padding-top: .75em; /* 16*.75 = 12px */
    padding-top: .75rem; /* == 12px */
    padding-bottom: .75em; /* 16*.75 = 12px */
    padding-bottom: .75rem; /* == 12px */
    max-width: 62em; /* == 992px */
    max-width: 62rem; /* == 992px */
    width: 100%;
}

#content section {
    background-color: #ffffff;
    padding-top: .75em; /* == 12px */
    padding-top: .75rem; /* == 12px */
    margin-top: .75em; /* == 12px */
    margin-top: .75rem; /* == 12px */
    /* Automatically apply padding to table-cell styled descendants. */
    border-spacing: .75em; /* == 12px */
    border-spacing: .75rem; /* == 12px */
}

section > h1 {
    text-transform: uppercase;
    font-size: 1em; /* == 16px */
    font-size: 1rem; /* == 16px */
    margin: 0;
    padding: 0;
    background-color: #ff0000;
    margin-left: -.5em; /* == 8px */
    margin-left: -.5rem; /* == 8px */
    padding-left: 1em; /* == 16px */
    padding-left: 1rem; /* == 16px */
    display: inline-block;
    padding-right: 1em;
    padding-right: 1rem;
    margin-bottom: .5em;
    margin-bottom: .5rem;
    position: relative;
    color: #ffffff;
    text-shadow: -1px 0px 1px #000;

    background-image: -moz-radial-gradient(center center, ellipse contain, #ff493c, #ff0000 100%);
    background-image: -webkit-radial-gradient(center center, ellipse contain, #ff493c, #ff0000 100%);
    background-image: -o-radial-gradient(center center, ellipse contain, #ff493c, #ff0000 100%);
    background-image: -ms-radial-gradient(center center, ellipse contain, #ff493c, #ff0000 100%);
    background-image: radial-gradient(center center, ellipse contain, #ff493c, #ff0000 100%);

    -moz-box-shadow: 1px 1px 2px #333;
    -webkit-box-shadow: 1px 1px 2px #333;
    box-shadow: 1px 1px 2px #333;

}

section > h1:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    left: 0;
    border-width: .25em .25em; /* == 4px */
    border-width: .25rem .25rem; /* == 4px */
    border-style: solid;
    border-color: #b80004 #b80004 transparent transparent;
}

section#ocg-home > h1 {
    background-color: #8a8a8a;
    background-image: -moz-radial-gradient(center center, ellipse contain, #9d9d9d, #8a8a8a 100%);
    background-image: -webkit-radial-gradient(center center, ellipse contain, #9d9d9d, #8a8a8a 100%);
    background-image: -o-radial-gradient(center center, ellipse contain, #9d9d9d, #8a8a8a 100%);
    background-image: -ms-radial-gradient(center center, ellipse contain, #9d9d9d, #8a8a8a 100%);
    background-image: radial-gradient(center center, ellipse contain, #9d9d9d, #8a8a8a 100%);
}

section#ocg-home > h1:after {
    border-color: #515151 #515151 transparent transparent;
}

section#landscape > h1 {
    background-color: #359500;
    background-image: -moz-radial-gradient(center center, ellipse contain, #4ccc00, #359500 100%);
    background-image: -webkit-radial-gradient(center center, ellipse contain, #4ccc00, #359500 100%);
    background-image: -o-radial-gradient(center center, ellipse contain, #4ccc00, #359500 100%);
    background-image: -ms-radial-gradient(center center, ellipse contain, #4ccc00, #359500 100%);
    background-image: radial-gradient(center center, ellipse contain, #4ccc00, #359500 100%);
}

section#landscape > h1:after {
    border-color: #076700 #076700 transparent transparent;
}

section#religions > h1 {
    background-color: #205b96;
    background-image: -moz-radial-gradient(center center, ellipse contain, #427FBC, #205b96 100%);
    background-image: -webkit-radial-gradient(center center, ellipse contain, #427FBC, #205b96 100%);
    background-image: -o-radial-gradient(center center, ellipse contain, #427FBC, #205b96 100%);
    background-image: -ms-radial-gradient(center center, ellipse contain, #427FBC, #205b96 100%);
    background-image: radial-gradient(center center, ellipse contain, #427FBC, #205b96 100%);
}

section#religions > h1:after {
    border-color: #133B68 #133B68 transparent transparent;
}


section#encounter > h1 {
    background-color: #34312a;
    background-image: -moz-radial-gradient(center center, ellipse contain, #5b563f, #34312a 100%);
    background-image: -webkit-radial-gradient(center center, ellipse contain, #5b563f, #34312a 100%);
    background-image: -o-radial-gradient(center center, ellipse contain, #5b563f, #34312a 100%);
    background-image: -ms-radial-gradient(center center, ellipse contain, #5b563f, #34312a 100%);
    background-image: radial-gradient(center center, ellipse contain, #5b563f, #34312a 100%);
}

section#encounter > h1:after {
    border-color: #19395c #19395c transparent transparent;
}




hr {
    margin: 0;
    padding: 0;
    color: gray;
    line-height: 0;
    font-size: 1em; /* == 16px */
    font-size: 1rem; /* == 16px */
    margin-bottom: .125em; /* == 2px */
    margin-bottom: .125rem; /* == 2px */
    /* margin-bottom: .625em; /* == 10px */
    /* margin-bottom: .625rem; /* == 10px */
}


article,
aside
 {
/*    background-color: lightsteelblue;*/
    padding-left: 1em; /* == 16px */
    padding-left: 1rem;  /* == 16px */
    padding-right: 1em; /* == 16px */
    padding-right: 1rem;  /* == 16px */
    font-size: 1em; /* == 16px */
    font-size: 1rem;  /* == 16px */
}
section hgroup {
/*    background-color: peachpuff;*/
}

article > hgroup > h1 {
    margin: 0;
    padding: 0;
    font-size: 1.5em; /* Font size = 24px; leading x 1.5 = 36px. Any multiple of 12 is OK! */
    font-size: 1.5rem; /* == 24px */
    font-weight: normal;
    line-height: 1em;
    line-height: 1.5rem;
    font-family: 'Georgia';
}

article > hgroup > h2 {
    margin: 0;
    padding: 0;
    font-size: 1.3125em; /* Font size = 21px */
    font-size: 1.3125rem; /* == 21px */
/*    line-height: 1.7142857em; /* Leading = 36px/21 = 12/7 = 1.7142857; */
    font-weight: normal;
    font-family: 'Georgia';
    color: gray;
}

article > hgroup {
    margin-bottom: .833em;
    margin-bottom: .833rem;
}

article a,
article a:visited,
aside a,
aside a:visited {
    color: #00639f;
    text-decoration: none;
}

article a:hover,
article a:focus,
aside a:hover,
aside a:focus
 {
    color: #00417d;
    text-decoration: underline;
}

article p {
     text-overflow: ellipsis
}

article p img {
    margin-top: .75em; /* == 12px */
    margin-top: .75rem; /* == 12px */
    margin-bottom: .75em; /* == 12px */
    margin-bottom: .75rem; /* == 12px */
}

article h3, article h4,
aside h3, aside h4 {
    margin: 0;
    padding: 0;
    color: #db3528;
    font-size: 1.125em; /* 18px font size. To get line-height of 24 we need leading of 1.333333 */
    font-size: 1.125rem; /* == 18px */
    line-height: 1.33333333; /* =18x1.333 == 24px */
    line-height: 1.5rem; /* == 24px */
    margin-top: 1em; /* == 18px */
    margin-top: 1.125rem; /* == 18px */
    margin-bottom: .3333em; /* == 6px */
    margin-bottom: .375rem; /* == 6px */
    font-family: 'Georgia';
    font-weight: normal;
}

aside > h3:first-child {
    margin-top: .6667em; /* == 12px */
    margin-top: .75rem; /* == 12px */
}

#ocg-home article h3,
#ocg-home article h4,
#ocg-home aside h3
{
    color: #515151;
}

#religions article h3,
#religions article h4,
#religions aside h3
{
    color: #1B2737;
}

.ocg-religion-timeline #religions article h3,
#glossary dfn
{
    color: #213c5d;
}

#encounter article h3,
#encounter article h4,
#encounter aside h3
{
    color: #34312a;
}

#landscape article h3,
#landscape article h4,
#landscape aside h3
{
    color: #3b8b00;
}

#ocg-home aside h4,
#religions aside h4,
#encounter aside h4,
#landscape aside h4 {
    font-size: 1em;
    font-size: 1rem;
    line-height: 1.5em;
    line-height: 1.5rem;
}

#ocg-home aside h4 {
    color: #8a8a8a;
}

#religions aside h4 {
    color: #2a5e90;
}

#encounter aside h4 {
    color: #424030;
}

#landscape aside h4 {
    color: #317e00;
}

article hr {
    margin-top: .75em;
    margin-top: .75rem;
    margin-right: 0;
    margin-bottom: .625em;
    margin-bottom: .625rem;
}

article h4 {
    background-color: #edf2e9;
    padding-top: .667em; /* 12/18 == .667 */
    padding-top: .75rem;
    padding-bottom: .667em;
    padding-bottom: .75rem;
    padding-left: .444em; /* 8/18 == .444 */
    padding-left: .5rem;
}

article ul,
article ol {
    margin-left: 1.75em; /* == 8px */
    margin-left: 1.75rem; /* == 8px */
    position: relative;
}

article ul {
    list-style-type: none;
}

article details p,
article details ul  {
    margin-left: 1em;
    margin-left: 1rem;
}
/* Silly hack to get the list circle markers to be a different color than li text! */
article ul li:before
{
    content: '•';
    color: #d23f45;
    margin: 0;
    padding: 0;
    font-size: 1.5em; /* == 24px */
    font-size: 1.5rem; /* == 24px */
    position: absolute;
    left: -.75em; /* == 12px */
    left: -1rem; /* == 12px */
}




article li {
    margin-bottom: .75em; /* == 12px */
    margin-bottom: .75rem; /* == 12px */
    line-height: 1.5em;
    line-height: 1.5rem;
}

article ul li li:before {
    content: none;
}

article ul ul {
    list-style-type: circle;
}

.visual-links tr {
    border-collapse: collapse;

}
.visual-links td {
    margin: 0;
    padding: 0;
    vertical-align: top;
    padding-left: .25em; /* == 4px */
    padding-left: .25rem; /* == 4px */
    padding-right: .25em; /* == 4px */
    padding-right: .25rem; /* == 4px */
    padding-top: .75em; /* == 12px */
    padding-top: .75rem; /* == 12px */
    padding-bottom: .75em; /* == 12px */
    padding-bottom: .75rem; /* == 12px */
}

/* Add focus styles (for keyboard accessibility) */
.no-details summary:hover,
.no-details summary:focus { background: rgba(0,0,0,.25); }

/* The following styles are not really needed, since the jQuery script takes care of hiding/displaying the elements. */
/* However, we’re still gonna use CSS as well to prevent FOUC in browsers that understand these selectors. */
/* Remember: by default (and probably most of the time), the contents of the <details> element are hidden. */

/* Hide all direct descendants of every <details> element */
/* Note that IE6 doesn’t support the child selector; we’ll work around that using jQuery later */
.no-details details > * { display: none; }

/* Make sure summary remains visible */
.no-details details summary { display: block; }

article details {
    line-height: 1.5em;
    line-height: 1.5rem;
}

article summary {
    background-color: #eff4f8;
    line-height: 1.5em;
    line-height: 1.5rem;
    padding-top: .75em; /* == 12px */
    padding-top: .75rem; /* == 12px */
    padding-bottom: .75em;
    padding-bottom: .75rem; /* == 12px */
    padding-left: .5em; /* == 8px */
    padding-left: .5rem; /* == 8px */
    padding-right: .5em;
    padding-right: .5rem;
    cursor: pointer;
/*    border-bottom: .125em inset #abb0b4;*/ /* == 2px */
/*    border-bottom: .125rem inset #abb0b4;*/ /* == 2px */
}

article summary img {
    margin-right: 1em;
    margin-right: 1rem;
    float: left;
    -moz-box-shadow: 1px 1px 2px #333;
    -webkit-box-shadow: 1px 1px 2px #333;
    box-shadow: 1px 1px 2px #333;
}

article summary~* {
    padding-left: .5em; /* == 8px */
    padding-left: .5rem; /* == 8px */
}

article summary:hover {
    background-color: #cdd2d6;
}


article details,
article summary,
article summary~* {
    transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: 5s;
}

article details > p:first-of-type {
    padding-top: 1.5rem;
}

article details > table {
margin-left: 1.5em;
margin-left: 1.5rem;
margin-right: 1.5em;
margin-right: 1.5rem;
}

article details td {
	padding-left: .5em;
	padding-right: .5em;
}

article summary::-webkit-details-marker {
    display: none;
}

article summary:after {
    margin: 0;
    padding: 0;
    content: " ▸ ";
    background-color: #6a87a0;
    color: #eff4f8;
    border-radius: 1em;
    border-radius: 1rem;
    padding-right: .4em;
    padding-right: .4rem;
    text-shadow: 1px 1px 1px grey;
    margin-left: 1em; /* ==16px */
    margin-left: 1rem; /* == 16px */
}

article summary.bio:after {
    float: right;
    line-height: 0;
    margin-left: 0;
    margin-right: 1em;
    margin-right: 1rem;
}

article details[open] summary:after,
article details.open summary:after
 {
    content: ' ▾ ';
    padding-right: .3em;
    padding-right: .3rem;
}

.essaysets-nav summary:hover,
#landscape #essayset-portal-nav summary:hover {
    cursor: pointer;
}

.essaysets-nav details,
#landscape #essayset-portal-nav details {
    position: relative;
}


.essaysets-nav summary::-webkit-details-marker,
#landscape #essayset-portal-nav summary::-webkit-details-marker
 {
    color: white;
    position: absolute;
    left: -.75em;
    /* font-size = 12px;
    line-height = 24px; */
    top: 1.25em; 
}

#landscape #essayset-portal-nav summary::-webkit-details-marker
{
    left: -.75rem;
    top: .2rem;
}

.no-details .essaysets-nav summary:before,
.no-details #landscape #essayset-portal-nav summary:before
{
        color: white;
        content: '▸ ';
        position: absolute;
        left: -.75em;
        top: .375em;
}
    
.no-details .essaysets-nav details.open > summary:before,
.no-details #landscape #essayset-portal-nav details.open > summary:before
{
        content: '▾ ';
}

.podcast-episode figure {
    float: left;
    width: 30%;
    margin-right: 1em;
    margin-top: .5em;
}

.podcast-episode p {
}



.enquoted:before,
.enquoted:after {
    content: '“';
    color: #eaf0f9;
    font-size: 4em;
    font-size: 4rem;
    line-height: 0;
    vertical-align:text-bottom;
}

.enquoted:after {
    content: '„';
    vertical-align: text-top;
}


.footnotes p,
figcaption
 {
    font-size: .75em; /* == 12px */
    font-size: .75rem; /* == 12px */

    padding-top: .5em;
    padding-top: .375rem;
    padding-bottom: .5em;
    padding-bottom: .375rem;

    line-height: 1em;
    line-height: .75rem;
}

.mejs-audio {
    /* Audio player comes in at standard height of 30px. Add 9px to either side to keep vertical rhythm (30+9+9 == 48) */
    margin-top: .5625em;
    margin-bottom: .5625em;
}


/* GLOSSARY */
#glossary dfn {
    font-family: 'Georgia','Times','Times New Roman',serif;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1.2em;
}

#glossary dt {
    margin-top: 1.2em;
}



.container:after,
.row:after {
	content:				".";
	display:	 			block;
	height:					0;
	font-size:				0;
	clear: 					both;
	visibility:				hidden;
}

.row
{
	display:			table;
	width:				100%;
	padding:			.25em 0;
	
}

.row .input label
{
}

.row .column
{
	display:			table-row;
    vertical-align: 	top;
}

.two-column .column
{
	display:			table-cell;
	width:				50%;

}

.three-column .column
{
	display:			table-cell;
	width:				33.33%;
}

.row .input label
{
    display: block;
    width: 100%;
}

.row select
{
    margin: 0;
    margin-top: -1em;
    padding: 0;
}

.row .input input[type=text],
.row .input textarea
{
}

.input label
{
	float:				none;
	width: auto;
	padding: 0 .25em;
}

.submit
{
	padding-left:			.5em;
	padding-bottom:			.5em;
}


.paging .disabled {
    display: none;
}

.event_title {
    font-weight: bold;
}

.figures {
    text-align: center;
}

.figures figure {
    display: inline-block;
    margin: .25em .5em;
    vertical-align: top;
}

.figures figcaption {
    max-width: 15em;
}

#internships h3 a {
    text-decoration: none;
    color: inherit;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

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

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

    .collapse {
      height: 0;
      overflow: hidden;
      -webkit-transition: height 0.4s ease;
         -moz-transition: height 0.4s ease;
           -o-transition: height 0.4s ease;
              transition: height 0.4s ease;
    }

    .collapse.in {
      height: auto;
      background-color: #ef0005;
      padding: 1em; /* == 16px */
      padding: 1rem; /* == 16px */
      -webkit-border-radius: .5em;
      -webkit-border-radius: .5rem;
      -moz-border-radius: .5em;
      -moz-border-radius: .5rem;
      border-radius: .5em;
      border-radius: .5rem;

      -webkit-box-shadow: 1px 1px 2px black;
        box-shadow: 1px 1px 2px black;
    }

    #ocg-home .collapse.in {
        background-color: #aaaaaa;
    }

    #religions .collapse.in {
        background-color: #2E5D91;
    }
    
    #encounter .collapse.in {
        background-color: #424030;
    }
    
    #landscape .collapse.in {
        background-color: #3b8b00;
    }
    
    button[data-toggle=collapse]:before {
        content: 'x';
        vertical-align: top;
    }
    button.collapsed:before {
        content: '≡';
        vertical-align: top;
    }

    .nav-collapse,
    .nav-collapse.collapse {
        overflow: hidden;
        height: 0;
    }

    #resources-row,
    #religions-portal-row    
    {
        position: relative;
    }

    #resources-row nav {
        position: absolute;
        top: -2.75em;
        right: 0em;
    }
    
    #ocg-sections-nav button,
    #resources-clergy-nav button {
        float: right;
    }
    
    #resources-row nav ul {
        padding-top: 0;
    }

    #resources-row nav li {
        line-height: 2.5em; /* == 40px */
        line-height: 2.5rem; /* == 40px */
    }

    #resources-row nav a {
        color: white;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        font-size: .75rem;
        margin-right: -1em; /* == 16px */
        margin-right: -1rem; /* == 16px */
        margin-left: -1em; /* == 16px */
        margin-left: -1rem; /* == 16px */
        padding-left: 1em; /* == 16px */
        padding-left: 1rem; /* == 16px */
        padding-right: 1em; /* == 16px */
        padding-right: 1rem; /* == 16px */
    }
    
    	
    #resources-row nav ul#essaysets-nav {
        padding-top: 1em;
    }
    
	#essaysets-nav summary {
    	color: white;
    	text-transform: uppercase;
    	font-size: .75em;	
	}
    
    #landscape #resources-row nav li
    {
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0;
    }
    
    #landscape #resources-row nav li a
    {
        margin: 0;
        padding: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #resources-row nav li a:hover,
    #resources-row nav li a:visited {
        color: white;
    }

    #resources-row nav li a:hover {
        background-color: #cd0104;
	}
	
	#ocg-home #resources-row nav li a:hover {
    	background-color: rgba(0,0,0,.5);
    	color: white;
	}
	
	#religions #resources-row nav li a:hover {
    	background-color: #1E3E61;
	}
	
	#encounter #resources-row nav li a:hover {
    	background-color: #34312a;
	}
	
	#landscape #resources-row nav li a:hover {
    	background-color: #317e00;
	}
	
	/**
	*  OCG ESSAYSET PORTAL NAV, multi-level, set apart with color, etc.
	*/
	#resources-row nav #essayset-portal-nav {
    	background-color: rgba(0,0,0,.25);
    	padding: 0 1em;
	}
	
    /**
    * OCG BOTTOM LEFT SUBNAVS for long list of traditions and  for index, help, etc.
    * @TODO: REFINE TERMINOLOGY FOR THESE SELECTORS
    */
    #resources-row nav #index-help-nav li,
    #resources-row nav #traditions-nav li,
    #resources-row nav .essaysets-nav
     {
        line-height: 1em;
        line-height: 1rem;
    }
    
    #resources-row nav #index-help-nav a,
    #resources-row nav .essaysets-nav a,
    #landscape #essayset-portal-nav .essays-nav a,
    #resources-row nav #timelines-nav a
     {
        text-transform: none;
        /* font-size == 12px */
        padding-top: .5em; /* 12px/2 = 6px */
        padding-bottom: .5em;
        padding-top: .375rem;
        padding-bottom: .375rem;
    }
    
    #resources-row nav #index-help-nav a
    {
        padding-top: .3333em;
        padding-bottom: .3333em;
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
    
    
    #resources-row nav #traditions-nav a {
        color: #BDEDFE;
        /* font-size 12px;
            line-height: 16px;
            we need padding of 4px on either side.
            4/12 = .33333
        */
        padding-top: .3333em;
        padding-top: .25rem;
        padding-bottom: .3333em;
        padding-bottom: .25rem;
    }
    
    #resources-row nav #traditions-nav li.selected a {
        color: #ffffff;
    }
    
    #resources-row nav .essaysets-nav li
     {
        margin: 0;
        padding: 0;
        padding-left: .25em;
    }
    
    #religions #resources-row nav li.selected 
     {
        background-color: #1E3E61;
    }

    #encounter #resources-row nav .essaysets-nav li.selected {
        background-color: #34312a;
    }
    
    #landscape #resources-row #essayset-portal-nav li.selected {
        background-color: #317e00;
    }

    
    #resources-row nav .essays-nav li a:hover {
        margin-left: -2em;
        padding-left: 2em;        
    }
    
    #resources-row nav .essays-nav li.selected,
    {
        margin-left: -1.25rem;
        padding-left: 1.5rem;
        margin-right: -1rem;
        padding-right: 0;
    }
    
    #resources-row nav .essays-nav li.selected a:hover {
        margin-right: 0;
        padding-right: 0;
    }
        
    #resources-row nav #index-help-nav,
    #resources-row nav #traditions-nav
     {
        /* font-size = 16px */
        /* 1 px border requires margin and padding top of 12-1 = 11/2 = 5.5px to keep rhythm
            5.5/16 == .34375em
            
        */
        margin-left: -1em;
        margin-right: -1em;
        padding-left: 1em;
        padding-right: 1em;
        margin-top: .34375em;
        margin-top: .34375rem;
        padding-top: .34375em;
        padding-top: .34375rem;
        border-top: 2px solid rgba(0,0,0,.25);
    }
    
    
    .portal-essay-link a
    {
        text-transform: uppercase;
    }
    
    .portal-essay-link a:before
    {
        padding-right: .5rem;
    }
        
    .portal-essay-link a:hover,
    .portal-essay-link a:active
    {
        color: #ccc;
        text-decoration: none;
    }
    

/* OCG HOME PORTAL */
    #ocg-home #resources-row nav #index-help-nav {
        border-top: none;
        margin: 0;
        padding: 0;
    }
    
    #ocg-sections-nav li {
        margin: 0 -1em;
        padding: 0 .5em;
    }
    
    #ocg-sections-nav #landscape {
        background-color: #66c231;
    }

    #ocg-sections-nav #religions {
        background-color: #285d93;
    }
    #ocg-sections-nav #encounter {
        background-color: #353125;

    }

    
    #ocg-home #index-help-nav {
        border-radius: .5em;
    }
    
    
    
    #ocg-home #index-help-nav a {
        color: #333333;
    }
    
    
    #ocg-home .portal-essay-link a {
        color: #285574;
    }
    
    #ocg-home .portal-essay-link a:hover {
        color: #333333;
    }

    #ocg-home figure h4 {
        background-color: transparent;
        margin-top: 0;       
        margin-left: 0;
        padding-left: 0;
    }
    
    #home-collage {
        display: none;
    }

    #ocg-home figure,
    #ocg-home audio
     {
        width: 300px;
    }
  
/* OCG RELIGIONS PORTAL */
    #religions-nav
    {
        background-color: #e0e0e0;
    }
    
    
    #religions-nav li
    {
        display: inline-block;
        margin: .25rem;
        background-color: #f2f2f2;
        height: 6.5rem;
        width: 7.25rem;
        text-align: center;
        vertical-align: bottom;
        border: .25rem solid white;
        border-bottom-width: 2rem;
    }
    
    #religions-nav .symbolless
    {
        background-color: #254670;
        border: none;
/*        height: 8.25rem;*/
        height: 8.375rem;
        width: 7.75rem;
/*        width: 8.25rem;*/
    }
    
    #religions-nav a
    {
        margin: 0;
        padding: 0;
        text-transform: uppercase;
        text-decoration: none;
        color: black;
        font-size: .75rem;
        font-weight: bold;
        display: block;
        vertical-align: baseline;
        padding-top: 6.5rem;
        background-repeat: no-repeat;
        background-position: center .5rem;
        background-position-x: center;
        background-position-y: .5rem;
    }
    
    #religions-nav .symbolless a
    {        
        padding-top: 3.5rem;
        height: 4.75rem;
        color: white;
    }
    
    #additional-resources.symbolless a
    {
        height: 5.75rem;
        padding-top: 2.5rem;
    }
    
    #bibliography.symbolless a {
        padding-top: 3rem;
        height: 5.25rem
    }
    
    #afro-caribbean a {
        background-image: url('/img/ocg/traditions/afro-75x75.png');
    }
    #bahai a {
        background-image: url('/img/ocg/traditions/bahai-75x75.png');
    }
    #buddhism a {
        background-image: url('/img/ocg/traditions/buddhism-75x75.png');
    }
    #christianity a {
        background-image: url('/img/ocg/traditions/christianity-75x75.png');
    }
    #confucianism a {
        background-image: url('/img/ocg/traditions/confucianism-75x75.png');
    }
    #daoism a {
        background-image: url('/img/ocg/traditions/daoism-75x75.png');
    }
    #hinduism a {
        background-image: url('/img/ocg/traditions/hinduism-75x75.png');
    }
    #humanism a {
        background-image: url('/img/ocg/traditions/humanism-75x75.png');
    }
    #islam a {
        background-image: url('/img/ocg/traditions/islam-75x75.png');
    }
    #jainism a {
        background-image: url('/img/ocg/traditions/jainism-75x75.png');
    }
    #judaism a {
        background-image: url('/img/ocg/traditions/judaism-75x75.png');
    }
    #native a {
        background-image: url('/img/ocg/traditions/native-75x75.png');
    }
    #paganism a {
        background-image: url('/img/ocg/traditions/paganism-75x75.png');
    }
    #shinto a {
        background-image: url('/img/ocg/traditions/shinto-75x75.png');
    }
    #sikhism a {
        background-image: url('/img/ocg/traditions/sikhism-75x75.png');
    }
    #unitarian a {
        background-image: url('/img/ocg/traditions/unitarian-75x75.png');
    }
    #zoroastrianism a {
        background-image: url('/img/ocg/traditions/zoroastrianism-75x75.png');
    }
  
/* LANDSCAPE PORTAL */

#landscape-text-nav h1
    {
        display: block;
        font-weight: normal;
        padding: 0;
        margin: 0;
        font-size: 1.25em; /* 16*1.25 = 20px */
        font-size: 1.25rem; /* 16*1.25 = 20px */
        margin-left: 2em; /* 20*2 = 40px */
        margin-left: 2.5rem; /* 16*2.5 = 40px */       
        padding-top: .8em; /* 20*.8 = 16px */
        padding-top: 1rem; /* 16px*/
        padding-right: .5rem;
    }
    
    #landscape-text-nav button
    {
        display: inline-block;
        /*float: right;*/
        /*margin: 1.5rem 2.5rem 0 0;*/
        margin: 0;
        background-color: black;
        color: white;
        padding: .25em;
        margin-left: .5rem;
    }
    
    #landscape-text-nav select 
    {
        display: inline-block;
        line-height: 2rem;
        margin: 0;
        margin-left: 2em; /* 20*2 = 40px */
        margin-left: 2.5rem; /* 16*2.5 = 40px */   
    }


#landscape-text-nav-select .major-city {
    font-style: italic;
}

#worldmap-figure{
    display:none;
}
#worldmap {
    display: none;
}  

#landscape-key {
    display: none;
}

#cityscape {
    margin-top: 1em;
    width: 20em;
    margin-left: 2.5em;
    box-shadow: 2px 2px 2px grey;
}

#cityscape-caption {
    font-size: .75em;
    font-style: italic;
    margin-left: 3.5em;
}

#cityscape-caption a {
    text-decoration: none;
    color: #359500;
}

#cityscape-caption a:hover,
#cityscape-caption a:active {
    color: #3b8b00;
}
  
/* ENCOUNTER PORTAL */

/* ENCOUNTER PORTAL */
#encounter-nav
    {
        background-color: #e0e0e0;
        padding: .5em 1em;
        border-radius: .5rem;    
    }
    
    #encounter-nav h2
    {
        font-size: 1.25rem;
        text-transform: uppercase;
    }
    
    #encounter-nav p
    {
        padding: 1em;
        font-size: .75em;
        background-color: #f2f2f2;
    }
    
    #encounter-nav img
    {
        display: inline;
        float: left;
        margin-right: .75em;
        box-shadow: 2px 2px 2px #333333;
    }
    
    #encounter-nav a,
    #encounter-nav a:visited
    {
        text-decoration: none;
        color: black;
    }
    
    #encounter-nav a:hover,
    #encounter-nav a:active
    {
        color: #434030;
    }
 
.sound__artwork {
    display: none;
}

.shadowed {
    border: 1px solid #999999;
    box-shadow: 2px 2px 2px #333333;
    margin: .5em;
}
    
    

  
  
/*  =========================================================================
    Colorbox CSS fixes for OCG Documents  
    
    ========================================================================= */
/* You may want to simply import colorbox.css necessary elements here. Especially because the current colorbox.css uses silly things like IMAGES for border shadows, when you may be better off simply rendering a box-shadow directly.
    @TODO: Further customize CSS for colorbox to eliminate necessity of the colorbox.css defaults!
*/

.document-introduction p {
    font-style: italic;
    font-size: .75em;
    font-size: .75rem;
    line-height: 2em; /* 12px x 2 = 24px */
    line-height: 1.5rem; /* == 24px */
}

/* ==========================================================================
   Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.

   Screen width breakpoints:
   iPhone
   ========================================================================== */

/* 320px = 20rem  */
@media only screen and ( min-width: 20.1em ) {

    #responsive-test #content section {
        background-color: red;
    }

    #resources-row nav {
        right: 2em;
    }



}

/* 480px = 30rem */
@media only screen and ( min-width: 30.1em ) {

    #responsive-test #content section {
        background-color: yellow;
    }
    /* It is in this section that the header THE PLURALISM PROJECT | Harvard University starts line-wrapping. */
   /* It is in this section that the OCG / Additional Resources menu collapses; we are safe at > 768px */
}

/* 768px = 48rem */
@media only screen and ( min-width: 48.1em ) {

    #responsive-test #content section {
        background-color: green;
    }


    /* SITE BANNER */

    #banner h1 {
        display: inline-block;
    }

    #banner h2 {
        display: inline-block;
    }

    #banner h2:before {
        content: ' | ';
        padding-left: .25em;
        padding-right: .25em;
    }

    /* PRIMARY NAVIGATION */


    #primary-nav {
        margin-left: 0;
        /*height: 4em; /* 24x3 = 72px */
        /* height: 4.5rem; /* == 72px */
        background-color: white;
        margin-bottom: 1.5em; /* == 24px */
        margin-bottom: 1.5rem; /* == 24px */
    }
    #ocg-nav {
        position: relative;
        margin-left: 15%; /* == 256px */
        min-width: 85%;
    }

    /*ul#ocg-nav:before {
        position: absolute;
        content: 'On Common Ground';
        height: 0;
        font-weight: 300;
        font-family: 'Helvetica Neue UltraLight','Helvetica Neue','Helvetica',sans-serif;
        text-transform: uppercase;
        font-size: 1.5em; /* == 24px */
        /*font-size: 1.5rem;*/ /* == 24px */
        /*margin: 0;
        padding: 0;
        color: #eee;
        margin-left: .75em;*/ /* =24*.75 == 18px */
        /*margin-left: 1.125rem;*/ /* == 18px */
        /*top: .75em;*/ /* =24*.75 == 18px */
        /*top: 1.125rem;*/ /* == 18px */
    /*}*/

    #primary-nav-landscape,
    #primary-nav-religion,
    #primary-nav-encounter {
        display: inline-block !important;
        visibility: visible;
    }

    /*#primary-nav-ocg {
        display: none !important;
        visibility: hidden;
    }*/

    #ocg-nav li {
        width: 6em; /* == 96px */
        width: 6rem; /* == 96px */
        border-bottom: .5em solid; /* == 8px */
        border-bottom: .5rem solid; /* == 8px */
        margin-top: 2.5em; /* == 40px */
        margin-top: 2.5rem; /* == 40px */
        padding-top: 0;
        padding-bottom: 0;
    }

    li#primary-nav-landscape {
        background-color: inherit;
        border-bottom-color: #68c036;
    }

    li#primary-nav-landscape:hover {
        background-color: inherit;
        border-bottom-color: #359003;
    }

    li#primary-nav-religion {
        background-color: inherit;
        border-bottom-color: #2a5e90;
    }

    li#primary-nav-religion:hover {
        background-color: inherit;
        border-bottom-color: #072c60;
    }


    li#primary-nav-encounter {
        background-color: inherit;
        border-bottom-color: #353326;
    }

    li#primary-nav-encounter:hover {
        background-color: inherit;
        border-bottom-color: #020003;
    }

    li#primary-nav-resources {
        background-color: inherit;
        border-bottom-color: #ef0005;
        margin-left: 2em; /* == 32px */
        margin-left: 2rem; /* == 32px */
        width: 10em; /* == 160px */
        width: 10rem; /* == 160px */
    }

    li#primary-nav-resources:hover {
        background-color: inherit;
        border-bottom-color: #bc0002;
    }


    #ocg-nav li a {
    /*    background-color: grey;*/
        font-size: .75em; /* 16x.75 == 12 px; leading of 1.5 = 18px;
        for a baseline of 24 px we need a line-height of 2em */
        font-size: .75rem; /* == 12px */
        line-height: 2em; /* 12px x 2 = 24px */
        line-height: 1.5rem; /* == 24px */
        margin-top: 0;
        margin-bottom: 0;
        font-family: 'Georgia';
        text-shadow: none;
        color: black;
    }

    #primary-nav-landscape:hover a,
    #primary-nav-religion:hover a,
    #primary-nav-encounter:hover a,
    #primary-nav-resources:hover a {
        color: #333;
        font-style: italic;
    }
    
    /* Make ON COMMON GROUND link clickable and absolutely positioned */
    #primary-nav-ocg {
        position: absolute;
        font-size: 1.5em; /* == 24px */
        font-size: 1.5rem; /* == 24px */
        margin: 0;
        padding: 0;
        top: -.75em; /* =24*.75 == 18px */
        top: -1.125rem; /* == 18px */
        left: -2.167em; /* = 24 * 2.167 = 52px*/
        left: -3.25rem; /* == 52px*/
        background-color: white;
        border: none !important;
    }
    
    #ocg-nav li#primary-nav-ocg a {
        font-family: 'Helvetica Neue UltraLight','Helvetica Neue','Helvetica',sans-serif;
        text-transform: uppercase;
        color: #eee;
        font-size: 1.5em; /* == 24px */
        font-size: 1.5rem; /* == 24px */
        position: relative;
        width: 16.67em; /* 24 * 16.67 = 400px */
        width: 25rem; /* 16 * 25 = 400 px */
    }
    
    #ocg-nav li#primary-nav-ocg a:hover {
        background-color: white;
        color: #ccc;
    }


    #about-nav {
    display: block;
    position: absolute;
    right: 1em;
    right: 1rem;
    /* Temporary values pre-OCG-launch */
    top: -3.5em;
    top: -3.5rem;
/*
		top: 2.375em;
    top: 2.375rem;
    vertical-align: middle;*/
}

#about-nav li {
    text-align: auto;
    display: inline;
    width: auto;
    padding: 0;
    margin: 0;
    background-color: transparent;

}

#about-nav li:hover {
    background-color: transparent;
}

#about-nav a {
    display: inline;
    color: inherit;
    line-height: auto;
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: none;
}

#about-nav a,
#about-nav a:visited {
    font-family: 'Georgia','Times','Times New Roman',serif;
    text-transform: uppercase;
    /* Temp values pre-ocg-launch */
    /* color: grey;*/
    color: white;
    text-decoration: none;
}

#about-nav a:hover {
	/* Temp values pre-OCG-launch */
    color: grey;
/*    color: black;*/
}

#about-nav li:first-of-type a:after {
    content: ' | ';
}

    /* SECONDARY NAVIGATION */

    #resources-row {
        display: table-row;        
    }


    #resources-row article {
        display: table-cell;
        vertical-align: top;
    }

    #resources-row nav {
        display: table-cell;
        vertical-align: top;
        width: 25%; /* == 4 columns == */
        background-color: #ff0000;
        -webkit-border-radius: .5em;
        -webkit-border-radius: .5rem;
        -moz-border-radius: .5em;
        -moz-border-radius: .5rem;
        border-radius: .5em;
        border-radius: .5rem;
    }

    aside {
        display: table-cell;
        vertical-align: top;
        width: 25%;
    }
    
    #ocg-home #resources-row nav {
        background-color: #aaaaaa;
    }

    
    #religions #resources-row nav {
        background-color: #2E5D91;
    }
    #encounter #resources-row nav {
        background-color: #5b563f;
    }
    #landscape #resources-row nav {
        background-color: #45a600;
    }

    #resources-row nav li {        
        line-height: 1.5rem; /* 16 * 1.5 = 24px */
        padding-left: 1rem;
        padding-right: 1rem;
    }


    #resources-row nav a {
        color: white;
        font-family: 'Helvetica Nue Condensed','Helvetica Nue','Helvetica',sans-serif;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        padding-top: .75rem; /* 16 * .75 = 12px */
        padding-bottom: .75rem; /* 16*.75 = 12px */
    }

    #resources-row nav li a:hover,
    #resources-row nav li a:visited {
        color: white;
    }

    #resources-row nav li a:hover {
        background-color: #cd0104;
        -webkit-border-radius: .5em;
        -webkit-border-radius: .5rem;
        -moz-border-radius: .5em;
        -moz-border-radius: .5rem;
        border-radius: .5em;
        border-radius: .5rem;
    }
    
    
    #ocg-home #resources-row nav li a:hover {
        background-color: rgba(0,0,0, .25);
    }
    
    #religions #resources-row nav li a:hover {
        background-color: #1E3E61;
    }
    #encounter #resources-row nav li a:hover {
        background-color: #34312a;
    }
    #landscape #resources-row nav li a:hover {
        background-color: #317e00;
    }

    /* Secondary nav separator is a simple transparent line to adapt to colors. */
    #religions #resources-row nav hr {
        color: black;    
    }
    
    #resources-row {
        position: relative;

    }

    #resources-row nav {
        position: relative;
        top: auto;
        right: auto;
    }

    #ocg-sections-nav button,
    #resources-clergy-nav button {
        height: 0;
        margin: 0;
        padding: 0;
        float: none;
        display: none;
    }

    #resources-row nav #essayset-portal-nav {
        padding: inherit;
        /* font size is 16 px here.
            to get to a rhythm of 24, instead of +8 top and bottom, you need +6 top and bottom.
        */
        /* margin: .5em; */
        margin: .375em .5em;
        margin: .375rem .5rem;
	}
	
	#landscape #essayset-portal-nav details {
    	padding-left: 1rem;
	}

	
	.essaysets-nav summary::-webkit-details-marker
	 {
        color: white;
        position: absolute;
        left: -.75em;
        top: .75em;   
    }
        
	#landscape #essayset-portal-nav summary::-webkit-details-marker
    {
        left: .2rem;
        top: 1rem;
    }
    
    #landscape #resources-row nav li
    {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    #landscape #resources-row nav li a
    {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
        
    .collapse {
        height: auto !important;
    }

    .portal-essay-link a,
    .portal-essay-link a:visited
    {
        color: white;
    }
    
    .portal-essay-link a:hover
    {
        color: #ccc;
        text-decoration: none;
    }



    /* OCG HOME PORTAL */
    #ocg-home #resources-row nav {
        background-color: white;
        width: 12.5em;
    }
    
    #ocg-home #index-help-nav {
        background-color: #aaaaaa;
    }
    
    #ocg-sections-nav li {
        margin: 0;
        padding: 0;
    }
    
    #ocg-sections-nav-list {
        background-color: white;
    }
    
    #ocg-sections-nav-list li {
        margin-bottom: 1em;
    }
    
    #ocg-sections-nav-list li a {
        font-size: 1em;
        padding-left: 0.5em;
        padding-top: 1.5em;
    }
    
    #ocg-sections-nav-list a:after {
        content: 'OCG';
        color: rgba(255,255,255, .5);
        position: relative;
        top: -1em;
        left: -6.5em;
        font-size: 1.25em;
        float: right;
    }
    
    
    #ocg-sections-nav #landscape {
        border-radius: .5em;
        background-color: #66c231;
        background-image: url('/img/ocg/ocg-home-landscape-bg.jpg');
        background-repeat: no-repeat;
        background-position: right center;
    }

    #ocg-sections-nav #religions {
        border-radius: .5em;
        background-color: #285d93;
        background-image: url('/img/ocg/ocg-home-religions-bg.jpg');
        background-repeat: no-repeat;
        background-position: right center;
    }
    #ocg-sections-nav #encounter {
        border-radius: .5em;
        background-color: #353125;
        background-image: url('/img/ocg/ocg-home-encounter-bg.jpg');
        background-repeat: no-repeat;
        background-position: right center;
    }
    
    #home-collage {
        display: inline;
        max-width: 300px;
        float: right;
        padding-left: 1em;
        padding-bottom: 1em;
        margin-top: -2em;
    }

    #ocg-home article > figure:first-of-type {
        clear: right; float: right;
    }
        
    #ocg-home #resources-row article
    {
        display: table-cell;
        background-color: #e0e0e0;
        /*background-image: url('/img/ocg/collage_400x700.jpg');
        background-repeat: no-repeat;
        background-position: right top;
        padding-right: 410px;*/
        color: black;
        border-radius: .5rem;
    }
    
    #ocg-home #resources-row article.top-level
    {
        background-color: white;
        border: none;
    }

    #ocg-home #resources-row article h1
    {
        font-size: 1.5rem;
        color: black;
        font-weight: normal;
        font-family: 'Georgia',serif;
        padding-top: 1rem;
    }
    
    #ocg-home #resources-row .top-level h1
    {
        padding-top: 0;
    }
    
    #ocg-home .portal-essay-link
    {
        text-align: left;
    }
    

    /* OCG ENCOUNTER PORTAL */
    #encounter-portal-row
    {
        display: table;
        width: 100%;
    }
    
    #encounter-portal-row nav
    {
        display: table-cell;
        vertical-align: top;
    }
    
    #encounter-portal-row article
    {
        display: table-cell;
        vertical-align: top;
        right: 0;
        width: 19.5rem;
        background-image: url('/img/ocg/encounter/encounters-portal-img.jpg');
        background-repeat: no-repeat;
        overflow: hidden;
        position: relative;
        background-color: #434030;
        color: white;
    }

    #encounter-portal-row article h1
    {
        margin: 0;
        padding: 0;
        position: absolute;
        top: -4rem;
        right: -.75rem;
        font-size: 1.25rem;
        color: white;
        font-weight: normal;
        font-family: 'Georgia',serif;
        background-color: rgba(56,49,36, 0.75) /*#434030*/;
        border-radius: 100%;
        height: 12rem;
        line-height: 12rem;
        width: 12rem;
        text-align: center;
    }

    #encounter-portal-row article figure
    {
        margin-top: 325px;
    }

    #encounter-portal-row article p:nth-child(2)
    {
        /* margin-top = height of background image */
/*        margin-top: 325px;
        padding-top: 1rem;*/
    }
    
    #encounter-portal-row p
    {
        font-size: .75rem; /* == 12px */
        line-height: 1.5rem; /* == 24px */
    }
    
            
    /* OCG RELIGIONS PORTAL */
    #religions-portal-row
    {
        display: table;
        width: 100%;
    }
    #religions-portal-row nav
    {
        display: table-cell;
        vertical-align: top;
    }
        
    #religions-portal-row article
    {
        display: table-cell;
        vertical-align: top;
        right: 0;
        width: 21rem;
        background-image: url('/img/ocg/religions/interfaith-mural_400x353.jpg');
        background-repeat: no-repeat;
        overflow: hidden;
        position: relative;
        background-color: #254670;
        color: white;
    }
    
    #religions-portal-row article h1
    {
        margin: 0;
        padding: 0;
        position: relative;
        top: -2.5rem;
        right: -12.5rem;
        font-size: 1.25rem;
        color: white;
        font-weight: normal;
        font-family: 'Georgia',serif;
        background-color: rgba(37,70,112,.75); /* #254670 */
        border-radius: 100%;
        height: 10rem;
        line-height: 10rem;
        width: 10rem;
        text-align: center;
    }
    
    #religions-portal-row article p:nth-child(2)
    {
        /* margin-top = height of background image */
        margin-top: 200px;
        padding-top: 1rem;
    }
    
    #religions-portal-row p
    {
        font-size: .75rem; /* == 12px */
        line-height: 1.5rem; /* == 24px */
    }

    #religions-portal-row .attribution {
        font-size: .625rem; /* == 10px */
        line-height: .75rem; /* == 12px */
    }
    
    #religions-portal-row .attribution a {
        color: white;
    }
    
    #religions-portal-row .attribution a:hover {
        text-decoration: none;
        color: #ccc;
    }

    #religions-portal-row .portal-essay-link
    {
        text-align: right;
    }
    


    /* OCG LANDSCAPE PORTAL */
    #landscape-portal
    {
        width: 100%;
    }

    
    #landscape-map-nav
    {
        float: right;
        width: 50%;
    }
    
    #landscape-map
    {
        display: block;
        height: 22rem;
        background-color: blue;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    #landscape-map img
    {
        max-width: inherit;
    }
    
    #landscape-text-nav
    {
        display: block;
        background-color: #e0e0e0;
        border-radius: .5rem;
        min-height: 24rem;
    }
    
    #landscape-text-nav select
    {
        margin-left: .5rem;
    }
    
    
    
    #cityscape {
        width: 25em;
    }
    
    #landscape-text-nav h1
    {
        display: inline-block;
    }
    
    
    

    
    .landscape-portal-row article
    {
        display: block;
        background-color: #359500;
        color: white;
        border-radius: .5rem;
        
    }

    .landscape-portal-row article h1
    {
        font-size: 1.5rem;
        color: white;
        font-weight: normal;
        font-family: 'Georgia',serif;
        padding-top: 1rem;
    }
    
    .landscape-portal-row .portal-essay-link
    {
        text-align: right;
    }


	#landscape #resources-row nav #essayset-portal-nav {
    	background-color: #3b8b00;
	}
	
	#landscape-key,
	#landscape-key ul {
    	list-style-type: none;
    	margin: 0;
	}
	
	#landscape-key {
    display: inline;
    font-size: .75em;
    font-size: .75rem;
    float: left;
    width: 30%;
    border: 1px solid grey;
    padding-left: .5em;
    margin-right: .5em;
    }
	
	#landscape-key li:before
    {
    content: none;
    }

    #landscape-key li {
        font-weight: bold;
        margin: 0;
    }
    
    #landscape-key li li {
        margin-left: 1.5em;
        text-indent: -1.75em;
        font-weight: normal;
    }
    
    #landscape-key img {
        padding-right: .5em;
    }
	
	#worldmap-figure {
    	display: inline-block;
    	width: 65%;
	}
	#worldmap {
        display: block;
	   width: 100%;
	   height: 27.375rem;
	}
    
    
    #worldmap-caption a {
    font-style: italic;
    color: white;
    background-color: black;
    border: 1px inset darkgrey;
    padding: .5rem;
}

    
}

/* 1024px = 64rem */
@media only screen and ( min-width: 64em ) {


    #responsive-test #content section {
        background-color: blue;
    }


}

/* Retina display and other high-resolution devices */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */


    #responsive-test #content section {
        background-color: peachpuff;
    }

}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .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; /* h5bp.com/t */
    }

    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;
    }
    
    #primary-nav,
    #banner h2,
    #essay-navigation
     {
        display: none;
    }
    
    #banner h1 {
        margin: 0;
        padding: 0;
        font-size: 1em;
        font-family: 'Georgia, sans-serif'; 
    }
    
    #banner h2 {
        display: none;
    }
    
    section > h1::after {
        border: none;
    }
    
}


/* IE hacks */


		.lt-ie10 .enquoted:before {
			vertical-align: bottom;
		}


		.lt-ie10 .enquoted:after {
			vertical-align: baseline;
		}


    .lt-ie9 .collapse {
      height: 0;
      overflow: hidden;
      -webkit-transition: height 0.4s ease;
         -moz-transition: height 0.4s ease;
           -o-transition: height 0.4s ease;
              transition: height 0.4s ease;
    }

    .lt-ie9 .collapse.in {
      height: auto;
      background-color: #ef0005;
      padding: 1em; /* == 16px */
      padding: 1rem; /* == 16px */
      -webkit-border-radius: .5em;
      -webkit-border-radius: .5rem;
      -moz-border-radius: .5em;
      -moz-border-radius: .5rem;
      border-radius: .5em;
      border-radius: .5rem;

      -webkit-box-shadow: 1px 1px 2px black;
        box-shadow: 1px 1px 2px black;
    }
    .lt-ie9 button:before {
        content: 'x';
    }
    .lt-ie9 button.collapsed:before {
        content: '≡';
    }

    .lt-ie9 .nav-collapse,
    .lt-ie9 .nav-collapse.collapse {
        overflow: hidden;
        height: 0;
    }

    .lt-ie9 #resources-row {
        position: relative;

    }

    .lt-ie9 #resources-row nav {
        position: absolute;
        top: -2.75em;
        right: 1.5em;


    }
    .lt-ie9 #ocg-sections-nav button,
    .lt-ie9 #resources-clergy-nav button {
        float: right;
    }


    .lt-ie9 #resources-row nav ul {
        padding-top: 0;
    }

    .lt-ie9 #resources-row nav li {
        line-height: 2.5em; /* == 40px */
        line-height: 2.5rem; /* == 40px */
    }


    .lt-ie9 #resources-row nav a {
        color: white;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        font-size: .75rem;
        padding: 1em;

    }

    .lt-ie9 #resources-row nav li a:hover {
        color: white;
        background-color: #cd0104;
    }




    /* SITE BANNER */

    .lt-ie9 #banner h1 {
        display: inline-block;
    }

    .lt-ie9 #banner h2 {
        display: inline-block;
    }

    .lt-ie9 #banner h2:before {
        content: ' | ';
        padding-left: .25em;
        padding-right: .25em;
    }

    /* PRIMARY NAVIGATION */


    .lt-ie9 #primary-nav {
        margin-left: 0;
        /*height: 4em; /* 24x3 = 72px */
        /* height: 4.5rem; /* == 72px */
        background-color: white;
        margin-bottom: 1.5em; /* == 24px */
        margin-bottom: 1.5rem; /* == 24px */
    }
    .lt-ie9 #ocg-nav {
        position: relative;
        margin-left: 15%; /* == 256px */
        min-width: 85%;
    }

    .lt-ie9 ul#ocg-nav:before {
        position: absolute;
        content: 'On Common Ground';
        height: 0;
        font-weight: 300;
        font-family: 'Helvetica Neue UltraLight','Helvetica Neue','Helvetica',sans-serif;
        text-transform: uppercase;
        font-size: 1.5em; /* == 24px */
        font-size: 1.5rem; /* == 24px */
        margin: 0;
        padding: 0;
        color: #eee;
        margin-left: .75em; /* =24*.75 == 18px */
        margin-left: 1.125rem; /* == 18px */
        top: .75em; /* =24*.75 == 18px */
        top: 1.125rem; /* == 18px */
    }

    .lt-ie9 #primary-nav-landscape,
    .lt-ie9 #primary-nav-religion,
    .lt-ie9 #primary-nav-encounter {
        display: inline-block !important;
        visibility: visible;
    }

    .lt-ie9 #primary-nav-ocg {
        display: none !important;
        visibility: hidden;
    }


    .lt-ie9 #ocg-nav li {
        width: 6em; /* == 96px */
        width: 6rem; /* == 96px */
        border-bottom: .5em solid; /* == 8px */
        border-bottom: .5rem solid; /* == 8px */
        margin-top: 2.5em; /* == 40px */
        margin-top: 2.5rem; /* == 40px */
        padding-top: 0;
        padding-bottom: 0;
    }

    .lt-ie9 li#primary-nav-landscape {
        background-color: inherit;
        border-bottom-color: #68c036;
    }

    .lt-ie9 li#primary-nav-landscape:hover {
        background-color: inherit;
        border-bottom-color: #359003;
    }

    .lt-ie9 li#primary-nav-religion {
        background-color: inherit;
        border-bottom-color: #2a5e90;
    }

    .lt-ie9 li#primary-nav-religion:hover {
        background-color: inherit;
        border-bottom-color: #072c60;
    }


    .lt-ie9 li#primary-nav-encounter {
        background-color: inherit;
        border-bottom-color: #353326;
    }

    .lt-ie9 li#primary-nav-encounter:hover {
        background-color: inherit;
        border-bottom-color: #020003;
    }

    .lt-ie9 li#primary-nav-resources {
        background-color: inherit;
        border-bottom-color: #ef0005;
        margin-left: 2em; /* == 32px */
        margin-left: 2rem; /* == 32px */
        width: 10em; /* == 160px */
        width: 10rem; /* == 160px */
    }

    .lt-ie9 li#primary-nav-resources:hover {
        background-color: inherit;
        border-bottom-color: #bc0002;
    }


    .lt-ie9 #ocg-nav li a {
    /*    background-color: grey;*/
        font-size: .75em; /* 16x.75 == 12 px; leading of 1.5 = 18px;
        for a baseline of 24 px we need a line-height of 2em */
        font-size: .75rem; /* == 12px */
        line-height: 2em; /* 12px x 2 = 24px */
        line-height: 1.5rem; /* == 24px */
        margin-top: 0;
        margin-bottom: 0;
        font-family: 'Georgia';
        text-shadow: none;
        color: black;
    }

    .lt-ie9 #primary-nav-landscape:hover a,
    .lt-ie9 #primary-nav-religion:hover a,
    .lt-ie9 #primary-nav-encounter:hover a,
    .lt-ie9 #primary-nav-resources:hover a {
        color: #333;
        font-style: italic;
    }


    .lt-ie9 #about-nav {
    display: block;
    position: absolute;
    right: 1em;
    left: 51em;
    /* Temporary values pre-OCG-launch */
    top: -3.5em;
/*    top: 2.375em;
    top: 2.375rem;
    vertical-align: middle;*/
}

.lt-ie9 #about-nav li {
    text-align: auto;
    display: inline;
    width: auto;
    padding: 0;
    margin: 0;
    background-color: transparent;

}

.lt-ie9 #about-nav li:hover {
    background-color: transparent;
}

.lt-ie9 #about-nav a {
    display: inline;
    color: inherit;
    line-height: auto;
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: none;
}

.lt-ie9 #about-nav a,
.lt-ie9 #about-nav a:visited {
    font-family: 'Georgia','Times','Times New Roman',serif;
    text-transform: uppercase;
    /* Temp values pre-ocg-launch */
    /* color: grey;*/
    color: white;
    text-decoration: none;
}

.lt-ie9 #about-nav a:hover {
	/* Temp values pre-OCG-launch */
    color: grey;
/*    color: black;*/
}

.lt-ie9 #about-nav li:first-of-type a:after {
    content: ' | ';
}

.lt-ie9 #about-nav li a:before {
	content: ' | ';
	}
.lt-ie9 #about-nav li a:after {
	content: ' | ';
	}




    /* SECONDARY NAVIGATION */
		.lt-ie9 summary:after {
			content:'>' !important;
			padding-left: .1em;
			background-color: transparent;
			color: inherit;
			}




    .lt-ie9 #resources-row {
        display: table-row;
    }



    .lt-ie9 #resources-row article {
        display: table-cell;
        vertical-align: top;
    }

		.lt-ie8 #resources-row article {
			float: left;
		}

    .lt-ie9 #resources-row nav {
        display: table-cell;
        vertical-align: top;
        width: 25%; /* == 4 columns == */
        background-color: #ff0000;
        -webkit-border-radius: .5em;
        -webkit-border-radius: .5rem;
        -moz-border-radius: .5em;
        -moz-border-radius: .5rem;
        border-radius: .5em;
        border-radius: .5rem;
    }
    
    .lt-ie9 #religions #resources-row nav {
    /* @TODO Refactor this????? */
        background-color: #2E5D91;
    }
    .lt-ie9 #encounter #resources-row nav {
        background-color: #424030;
    }
    
    		.lt-ie8 #resources-row nav {
    		float: right;
    		}

    .lt-ie9 #resources-row nav ul {
    }

    .lt-ie9 #resources-row nav li {
    		line-height: 1.5em;
        line-height: 1.5rem;
        padding-left: 1em;
        padding-left: 1rem;
        padding-right: 1em;
        padding-right: 1rem;
    }


    .lt-ie9 #resources-row nav a {
        color: white;
        font-family: 'Helvetica Nue Condensed','Helvetica Nue','Helvetica',sans-serif;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        margin-right: -1em; /* == 16px */
        margin-right: -1rem; /* == 16px */
        margin-left: -1em; /* == 16px */
        margin-left: -1rem; /* == 16px */
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

   .lt-ie9  #resources-row nav li a:hover,
    .lt-ie9 #resources-row nav li a:visited {
        color: white;
    }

    .lt-ie9 #resources-row nav li a:hover {
        background-color: #cd0104;
        -webkit-border-radius: .5em;
        -webkit-border-radius: .5rem;
        -moz-border-radius: .5em;
        -moz-border-radius: .5rem;
        border-radius: .5em;
        border-radius: .5rem;
    }
    
    .lt-ie9 #ocg-home #resources-row nav li a:hover {
        background-color: #888888;
    }
    
    .lt-ie9 #religions #resources-row nav li a:hover {
        /* @TODO: REFACTOR this? */
        background-color: #1E3E61;
    }
    .lt-ie9 #encounter #resources-row nav li a:hover {
        background-color: #34312a;
    }



    .lt-ie9 #resources-row {
        position: relative;

    }

   .lt-ie9  #resources-row nav {
        position: relative;
        top: auto;
        right: auto;
    }
    .lt-ie9 #ocg-sections-nav button,
    .lt-ie9 #resources-clergy-nav button {
        height: 0;
        margin: 0;
        padding: 0;
        float: none;
        display: none;
    }

    .lt-ie9 .collapse {
        height: auto !important;
    }

    .lt-ie8 #banner,
.lt-ie8 #primary-nav,
.lt-ie8 #content,
.lt-ie8 footer {
    width: 64em;
}

	.lt-ie8 #resources-row {
		zoom: 1;
		}

	.lt-ie8 #resources h1 {
		width: 44em;
	}
	.lt-ie8 #resources-row article {
		float: left;
		width: 44em;
	}
	.lt-ie8 #resources-row nav {
		float: right;
		width: 15em;
	}

	.lt-ie8 article ul {
		list-style-type: disc;
	}

	.lt-ie8 article ul ul {
		list-style-type: circle;
		}
	.lt-ie8 footer {
		clear: both;
	}
		.lt-ie8 summary {
			text-decoration: underline;
			}

		.lt-ie8 #about-nav li {
		padding-left: 1em;
		padding-right: 1em;
		}

		.lt-ie8 #about-nav {
    left: 50em;
}